feat: add overlay shape variant for tags on images

Add overlay shape (bg-zinc-500/40, text-white/90) for tags that
sit on top of image thumbnails. Used in SampleModelSelector.
Pending Figma design system confirmation.

src/components/chip/Tag.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof Tag> = {
     label: { control: 'text' },
     shape: {
       control: 'select',
-      options: ['square', 'rounded']
+      options: ['square', 'rounded', 'overlay']
     },
     state: {
       control: 'select',
@@ -73,6 +73,13 @@ export const AllStates: Story = {
             <Tag label="Selected" shape="rounded" removable />
           </div>
         </div>
+        <div class="bg-zinc-800 p-2 rounded">
+          <p class="mb-2 text-xs text-muted-foreground">Overlay (on images)</p>
+          <div class="flex items-center gap-2">
+            <Tag label="png" shape="overlay" />
+            <Tag label="1.2 MB" shape="overlay" />
+          </div>
+        </div>
       </div>
     `
   })

src/components/chip/tag.variants.ts

@@ -6,7 +6,8 @@ export const tagVariants = cva({
   variants: {
     shape: {
       square: 'rounded-sm bg-modal-card-tag-background',
-      rounded: 'rounded-full bg-secondary-background'
+      rounded: 'rounded-full bg-secondary-background',
+      overlay: 'rounded-sm bg-zinc-500/40 text-white/90'
     },
     state: {
       default: 'text-modal-card-tag-foreground',

src/components/widget/SampleModelSelector.vue

@@ -99,9 +99,9 @@
                 </Button>
               </template>
               <template #bottom-right>
-                <Tag label="png" />
-                <Tag label="1.2 MB" />
-                <Tag label="LoRA">
+                <Tag label="png" shape="overlay" />
+                <Tag label="1.2 MB" shape="overlay" />
+                <Tag label="LoRA" shape="overlay">
                   <template #icon>
                     <i class="icon-[lucide--folder]" />
                   </template>