@happyvertical/smrt-images 0.34.5 → 0.34.7

package/dist/manifest.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
-  "timestamp": 1782261289124,
+  "timestamp": 1782290139382,
   "packageName": "@happyvertical/smrt-images",
-  "packageVersion": "0.34.5",
+  "packageVersion": "0.34.7",
   "objects": {
     "@happyvertical/smrt-images:Image": {
       "name": "image",

package/dist/smrt-knowledge.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-06-24T00:34:49.879Z",
+  "generatedAt": "2026-06-24T08:35:39.740Z",
   "packageName": "@happyvertical/smrt-images",
-  "packageVersion": "0.34.5",
+  "packageVersion": "0.34.7",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "3b5de61f9f6239f9835e1a662bcb1adf49eee164215d3f85f270d5765d88530a",
-    "packageJson": "ac8c71a2bd295c90b4fdf0f037010607948e8494883cd05b7b42b9d1f09a80f8",
+    "manifest": "3ae226f3faecb697f69b0c201fecaeeecce675946c85b543fdadb4ea43801249",
+    "packageJson": "d9aaa3aecde993a2efa52b9353e09a0176555dbab0a70de0466fad78755968c9",
     "agents": "b0cf63bd78f00cc1729ea7f1425291f8e23ab5591161cbbf0d08f4b16ace07fd"
   },
   "exports": [

package/dist/svelte/components/AssetsGallery.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+import { Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { onMount } from 'svelte';
 import { M } from '../i18n.js';
 import type {
@@ -157,29 +159,29 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
     
     <div class="toolbar">
       <div class="search-box">
-        <input 
-          type="search" 
+        <Input
+          type="search"
           bind:value={searchQuery}
           placeholder={t(M['images.assets_gallery.search_placeholder'])}
         />
       </div>
-      
+
       <div class="filters">
-        <select bind:value={orientationFilter}>
+        <Select class="orientation-select" bind:value={orientationFilter}>
           <option value="all">{t(M['images.assets_gallery.any_orientation'])}</option>
           <option value="landscape">Landscape</option>
           <option value="portrait">Portrait</option>
           <option value="square">Square</option>
-        </select>
-        
-        <input 
-          type="number" 
+        </Select>
+
+        <Input
+          type="number"
           bind:value={minWidth}
           placeholder={t(M['images.assets_gallery.min_width_placeholder'])}
           class="size-input"
         />
-        <input 
-          type="number" 
+        <Input
+          type="number"
           bind:value={minHeight}
           placeholder={t(M['images.assets_gallery.min_height_placeholder'])}
           class="size-input"
@@ -195,6 +197,7 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
   <div class="gallery-grid">
     {#each images as image (image.id)}
       {#if onSelect}
+        <!-- raw-primitive-allow: large draggable selection card wrapping rich image content, not a standard action button -->
         <button
           type="button"
           class="gallery-item"
@@ -233,13 +236,14 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
   
   {#if hasMore}
     <div class="load-more">
-      <button 
-        onclick={() => loadImages(false)} 
+      <Button
+        variant="ghost"
+        class="load-more-btn--pill"
+        onclick={() => loadImages(false)}
         disabled={isLoading}
-        class="load-more-btn"
       >
         {isLoading ? 'Loading...' : 'Load More'}
-      </button>
+      </Button>
     </div>
   {/if}
 </div>
@@ -283,45 +287,22 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
     min-width: 250px;
   }
 
-  .search-box input {
-    width: 100%;
-    padding: 0.75rem 1.25rem;
-    background: var(--smrt-color-surface-container-highest, #333);
-    border: 1px solid var(--smrt-color-outline-variant, #444);
-    border-radius: var(--smrt-radius-full, 9999px);
-    color: inherit;
-    font-size: var(--smrt-typography-body-large-size, 0.95rem);
-    transition: box-shadow 0.2s, border-color 0.2s;
-  }
-
-  .search-box input:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #3b82f6);
-    box-shadow: inset 0 0 0 1px var(--smrt-color-primary, #3b82f6);
-  }
-
   .filters {
     display: flex;
     gap: 0.75rem;
     flex-wrap: wrap;
   }
 
-  .filters select, .filters input {
-    padding: 0.75rem 1rem;
-    background: var(--smrt-color-surface-container-high, #242424);
-    border: 1px solid var(--smrt-color-outline-variant, #444);
-    border-radius: var(--smrt-radius-sm, 4px);
-    color: inherit;
-    transition: box-shadow 0.2s, border-color 0.2s;
+  /* Layout-only overrides for the migrated filter primitives. The Input / Select
+     primitives own the visual styling; these :global() rules only pierce their
+     rendered controls to size the boxes within the flex row (see #1589 scoping
+     rule). The orientation Select sizes to its content instead of the primitive's
+     full-width default; the min-width/min-height Inputs are capped. */
+  .filters :global(.orientation-select) {
+    width: auto;
   }
 
-  .filters select:focus, .filters input:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #3b82f6);
-    box-shadow: inset 0 0 0 1px var(--smrt-color-primary, #3b82f6);
-  }
-
-  .size-input {
+  .filters :global(.size-input) {
     width: 120px;
   }
 
@@ -421,23 +402,20 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
     padding: 1rem 0;
   }
 
-  .load-more-btn {
+  /* Bespoke pill look for the migrated Load More Button. :global() pierces into
+     the Button child's rendered <button>, which carries its own scope hash
+     (see #1589 scoping rule). */
+  .load-more :global(.load-more-btn--pill) {
     padding: 0.75rem 2rem;
     background: var(--smrt-color-surface-container-high, #242424);
     color: var(--smrt-color-primary, #3b82f6);
     border: 1px solid var(--smrt-color-outline-variant, #444);
     border-radius: var(--smrt-radius-full, 9999px);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    cursor: pointer;
     transition: background 0.2s;
   }
 
-  .load-more-btn:hover:not(:disabled) {
+  .load-more :global(.load-more-btn--pill:hover:not(:disabled)) {
     background: var(--smrt-color-surface-container-highest, #333);
   }
-
-  .load-more-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
 </style>

package/dist/svelte/components/AssetsGallery.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetsGallery.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AssetsGallery.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EAEpB,MAAM,kBAAkB,CAAC;AAEzB,KAAK,gBAAgB,GAAI;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAyNF,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AssetsGallery.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AssetsGallery.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EAEpB,MAAM,kBAAkB,CAAC;AAEzB,KAAK,gBAAgB,GAAI;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AA4NF,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/ImageEditor.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+import { Input, Select, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../i18n.js';
 import type {
   ImageConvertRequest,
@@ -180,7 +182,7 @@ async function handleAIEdit() {
   <div class="header">
     <h3>{t(M['images.image_editor.title'])}</h3>
     {#if onCancel}
-      <button class="close-btn" onclick={onCancel}>×</button>
+      <Button variant="ghost" size="sm" class="close-btn--x" onclick={onCancel}>×</Button>
     {/if}
   </div>
 
@@ -194,8 +196,16 @@ async function handleAIEdit() {
       
       <div class="editor-controls">
         <div class="mode-selector">
-          <button class:active={mode === 'standard'} onclick={() => mode = 'standard'}>{t(M['images.image_editor.standard_tools'])}</button>
-          <button class:active={mode === 'ai'} onclick={() => mode = 'ai'}>{t(M['images.image_editor.ai_edit'])}</button>
+          <Button
+            variant={mode === 'standard' ? 'primary' : 'ghost'}
+            class="mode-tab"
+            onclick={() => (mode = 'standard')}
+          >{t(M['images.image_editor.standard_tools'])}</Button>
+          <Button
+            variant={mode === 'ai' ? 'primary' : 'ghost'}
+            class="mode-tab"
+            onclick={() => (mode = 'ai')}
+          >{t(M['images.image_editor.ai_edit'])}</Button>
         </div>
 
         {#if error}
@@ -210,40 +220,40 @@ async function handleAIEdit() {
           <div class="tool-section">
             <h4>Resize</h4>
             <div class="row">
-              <label>Width <input type="number" bind:value={width} onfocus={() => isEditingDimensions = true} /></label>
-              <label>Height <input type="number" bind:value={height} onfocus={() => isEditingDimensions = true} /></label>
-              <button disabled={isProcessing} onclick={handleResize} class="tonal-btn">{t(M['images.image_editor.apply_resize'])}</button>
+              <label>Width <Input type="number" class="dim-input" bind:value={width} onfocus={() => isEditingDimensions = true} /></label>
+              <label>Height <Input type="number" class="dim-input" bind:value={height} onfocus={() => isEditingDimensions = true} /></label>
+              <Button variant="ghost" class="tonal-btn--filled" disabled={isProcessing} onclick={handleResize}>{t(M['images.image_editor.apply_resize'])}</Button>
             </div>
             {#if isEditingDimensions}
-               <div class="row"><button class="text-btn hint" onclick={resetDimensions}>{t(M['images.image_editor.reset_dimensions'])}</button></div>
+               <div class="row"><Button variant="ghost" size="sm" class="text-btn--link" onclick={resetDimensions}>{t(M['images.image_editor.reset_dimensions'])}</Button></div>
             {/if}
           </div>
 
           <div class="tool-section">
             <h4>Crop</h4>
             <div class="row">
-              <label>X <input type="number" bind:value={cropX} onfocus={() => isCropping = true} /></label>
-              <label>Y <input type="number" bind:value={cropY} onfocus={() => isCropping = true} /></label>
+              <label>X <Input type="number" class="dim-input" bind:value={cropX} onfocus={() => isCropping = true} /></label>
+              <label>Y <Input type="number" class="dim-input" bind:value={cropY} onfocus={() => isCropping = true} /></label>
             </div>
             <div class="row">
-              <label>W <input type="number" bind:value={cropW} onfocus={() => isCropping = true} /></label>
-              <label>H <input type="number" bind:value={cropH} onfocus={() => isCropping = true} /></label>
-              <button disabled={isProcessing} onclick={handleCrop} class="tonal-btn">{t(M['images.image_editor.apply_crop'])}</button>
+              <label>W <Input type="number" class="dim-input" bind:value={cropW} onfocus={() => isCropping = true} /></label>
+              <label>H <Input type="number" class="dim-input" bind:value={cropH} onfocus={() => isCropping = true} /></label>
+              <Button variant="ghost" class="tonal-btn--filled" disabled={isProcessing} onclick={handleCrop}>{t(M['images.image_editor.apply_crop'])}</Button>
             </div>
             {#if isCropping}
-               <div class="row"><button class="text-btn hint" onclick={resetDimensions}>{t(M['images.image_editor.reset_dimensions'])}</button></div>
+               <div class="row"><Button variant="ghost" size="sm" class="text-btn--link" onclick={resetDimensions}>{t(M['images.image_editor.reset_dimensions'])}</Button></div>
             {/if}
           </div>
 
           <div class="tool-section">
             <h4>{t(M['images.image_editor.convert_format'])}</h4>
             <div class="row">
-              <select bind:value={format}>
+              <Select class="format-select" bind:value={format}>
                 <option value="webp">WebP</option>
                 <option value="jpeg">JPEG</option>
                 <option value="png">PNG</option>
-              </select>
-              <button disabled={isProcessing} onclick={handleConvert} class="tonal-btn">Convert</button>
+              </Select>
+              <Button variant="ghost" class="tonal-btn--filled" disabled={isProcessing} onclick={handleConvert}>Convert</Button>
             </div>
           </div>
         {:else}
@@ -251,18 +261,20 @@ async function handleAIEdit() {
           <div class="tool-section">
             <h4>{t(M['images.image_editor.ai_powered_edit'])}</h4>
             <p class="hint">{t(M['images.image_editor.ai_powered_edit_hint'])}</p>
-            <textarea
+            <Textarea
+              class="ai-prompt"
               bind:value={prompt}
               placeholder={t(M['images.image_editor.ai_prompt_placeholder'])}
-              rows="4"
-            ></textarea>
-            <button 
-              disabled={isProcessing || !prompt.trim()} 
+              rows={4}
+            />
+            <Button
+              variant="primary"
+              class="primary-btn--pill"
+              disabled={isProcessing || !prompt.trim()}
               onclick={handleAIEdit}
-              class="primary-btn"
             >
               {isProcessing ? 'Generating...' : 'Apply AI Edit'}
-            </button>
+            </Button>
           </div>
         {/if}
       </div>
@@ -297,12 +309,12 @@ async function handleAIEdit() {
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
-  .close-btn {
-    background: transparent;
-    border: none;
+  /* The migrated close Button keeps ghost styling; only bump the × glyph size.
+     :global() pierces into the Button child's rendered <button> (see #1589). */
+  .header :global(.close-btn--x) {
     color: inherit;
     font-size: var(--smrt-typography-headline-small-size, 1.5rem);
-    cursor: pointer;
+    line-height: 1;
   }
 
   .empty-state {
@@ -346,22 +358,14 @@ async function handleAIEdit() {
     gap: 0.25rem;
   }
 
-  .mode-selector button {
+  /* The mode toggles are migrated Buttons (variant primary = active, ghost =
+     inactive). Keep the segmented-pill sizing by piercing into each Button's
+     rendered <button> (see #1589 scoping rule). */
+  .mode-selector :global(.mode-tab) {
     flex: 1;
-    background: transparent;
-    border: none;
     padding: 0.6rem 1rem;
-    color: var(--smrt-color-outline, #666);
-    cursor: pointer;
     font-weight: var(--smrt-typography-weight-medium, 500);
     border-radius: var(--smrt-radius-full, 9999px);
-    transition: all 0.2s;
-  }
-
-  .mode-selector button.active {
-    background: var(--smrt-color-surface-container, #1a1a1a);
-    color: var(--smrt-color-on-surface, #fff);
-    box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow) 20%, transparent));
   }
 
   .tool-section h4 {
@@ -388,79 +392,59 @@ async function handleAIEdit() {
     gap: 0.25rem;
   }
 
-  input, select, textarea {
-    background: var(--smrt-color-surface-container-high, #242424);
-    border: 1px solid var(--smrt-color-outline-variant, #444);
-    color: inherit;
-    padding: 0.6rem 0.75rem;
-    border-radius: var(--smrt-radius-sm, 4px);
-    transition: box-shadow 0.2s, border-color 0.2s;
+  /* Layout-only overrides for the migrated form primitives. The Input / Select /
+     Textarea primitives own the visual styling (background, border, focus ring);
+     these :global() rules only pierce their rendered controls to constrain box
+     size and spacing (see #1589 scoping rule). */
+  .row label :global(.dim-input) {
+    width: 90px;
   }
 
-  input:focus, select:focus, textarea:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #3b82f6);
-    box-shadow: inset 0 0 0 1px var(--smrt-color-primary, #3b82f6);
+  /* Size the format Select to its content instead of the primitive's full-width
+     default so it sits inline beside the Convert button in the flex row. */
+  .row :global(.format-select) {
+    width: auto;
   }
 
-  input[type="number"] {
-    width: 90px;
-  }
-
-  textarea {
-    width: 100%;
-    resize: vertical;
+  .tool-section :global(.ai-prompt) {
     margin-bottom: 1rem;
-    font-family: inherit;
   }
 
-  .tonal-btn {
+  /* Migrated Buttons keep their bespoke filled-tonal / text-link / pill looks.
+     :global() pierces into each Button's rendered <button> (see #1589). */
+  .tool-section :global(.tonal-btn--filled) {
     background: var(--smrt-color-surface-container-highest, #333);
     color: var(--smrt-color-primary, #3b82f6);
     border: 1px solid var(--smrt-color-outline-variant, #444);
     padding: 0.6rem 1.2rem;
     border-radius: var(--smrt-radius-full, 9999px);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    cursor: pointer;
     transition: background 0.2s;
     margin-top: 1.25rem;
   }
 
-  .tonal-btn:hover:not(:disabled) {
+  .tool-section :global(.tonal-btn--filled:hover:not(:disabled)) {
     background: var(--smrt-color-surface-container-high, #3f3f3f);
   }
 
-  .text-btn {
-    background: transparent;
-    border: none;
-    cursor: pointer;
+  .tool-section :global(.text-btn--link) {
     text-decoration: underline;
     padding: 0;
   }
-  .text-btn:hover {
+  .tool-section :global(.text-btn--link:hover) {
     color: var(--smrt-color-on-surface, #fff);
   }
 
-  .primary-btn {
-    background: var(--smrt-color-primary, #3b82f6);
-    color: white;
-    border: none;
+  .tool-section :global(.primary-btn--pill) {
     padding: 0.6rem 1.5rem;
     border-radius: var(--smrt-radius-full, 9999px);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    cursor: pointer;
-    transition: background 0.2s, opacity 0.2s;
   }
 
-  .primary-btn:hover:not(:disabled) {
+  .tool-section :global(.primary-btn--pill:hover:not(:disabled)) {
     filter: brightness(1.1);
   }
 
-  button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   .hint {
     font-size: var(--smrt-typography-body-small-size, 0.8rem);
     color: var(--smrt-color-outline, #888);

package/dist/svelte/components/ImageEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ImageEditor.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAGV,iBAAiB,EACjB,SAAS,EAEV,MAAM,kBAAkB,CAAC;AAEzB,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAiQF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ImageEditor.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAGV,iBAAiB,EACjB,SAAS,EAEV,MAAM,kBAAkB,CAAC;AAEzB,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAmQF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/ImageUploader.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+import { Input, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { onDestroy } from 'svelte';
 import { M } from '../i18n.js';
 import type {
@@ -276,14 +278,14 @@ onDestroy(() => {
   {#if selectedImage}
     <!-- Gallery Confirmation Step -->
     <div class="header">
-      <button type="button" class="back-btn" onclick={handleBackToChooser}>
+      <Button variant="ghost" size="sm" class="back-btn--link" onclick={handleBackToChooser}>
         <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
           <polyline points="15 18 9 12 15 6"></polyline>
         </svg>
         Back
-      </button>
+      </Button>
       {#if onCancel}
-        <button type="button" class="close-btn" onclick={onCancel}>×</button>
+        <Button variant="ghost" size="sm" class="close-btn--x" onclick={onCancel}>×</Button>
       {/if}
     </div>
 
@@ -298,39 +300,40 @@ onDestroy(() => {
       </div>
 
       <div class="confirm-actions">
-        <button type="button" class="primary-btn" onclick={handleConfirmOriginal}>
+        <Button variant="primary" class="primary-btn--pill" onclick={handleConfirmOriginal}>
           {t(M['images.image_uploader.select_image'])}
-        </button>
-        <button 
-          type="button"
-          class="variation-toggle" 
-          class:active={showVariation}
-          onclick={() => showVariation = !showVariation}
+        </Button>
+        <Button
+          variant="ghost"
+          class={showVariation
+            ? 'variation-toggle--chip variation-toggle--active'
+            : 'variation-toggle--chip'}
+          onclick={() => (showVariation = !showVariation)}
         >
           <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
             <path d="M12 20h9"></path>
             <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
           </svg>
           {t(M['images.image_uploader.create_variation'])}
-        </button>
+        </Button>
       </div>
 
       {#if showVariation}
         <div class="variation-form">
           <p class="variation-hint">{t(M['images.image_uploader.variation_hint'])}</p>
-          <textarea
+          <Textarea
             bind:value={variationPrompt}
             placeholder={t(M['images.image_uploader.variation_prompt_placeholder'])}
-            rows="3"
+            rows={3}
             disabled={isGenerating}
-          ></textarea>
+          />
           {#if variationError}
             <div class="variation-error">{variationError}</div>
           {/if}
-          <button 
-            type="button"
-            class="generate-btn"
-            disabled={isGenerating || !variationPrompt.trim()} 
+          <Button
+            variant="primary"
+            class="generate-btn--pill"
+            disabled={isGenerating || !variationPrompt.trim()}
             onclick={handleGenerateVariation}
           >
             {#if isGenerating}
@@ -339,7 +342,7 @@ onDestroy(() => {
             {:else}
               {t(M['images.image_uploader.generate_variation'])}
             {/if}
-          </button>
+          </Button>
         </div>
       {/if}
     </div>
@@ -349,22 +352,38 @@ onDestroy(() => {
     <div class="header">
       <h3>{t(M['images.image_uploader.choose_image'])}</h3>
       {#if onCancel}
-        <button type="button" class="close-btn" onclick={onCancel}>×</button>
+        <Button variant="ghost" size="sm" class="close-btn--x" onclick={onCancel}>×</Button>
       {/if}
     </div>
     
     <div class="tabs">
       {#if allowedTabs.includes('gallery')}
-        <button type="button" class:active={activeTab === 'gallery'} onclick={() => activeTab = 'gallery'}>Gallery</button>
+        <Button
+          variant="ghost"
+          class={activeTab === 'gallery' ? 'uploader-tab uploader-tab--active' : 'uploader-tab'}
+          onclick={() => (activeTab = 'gallery')}
+        >Gallery</Button>
       {/if}
       {#if allowedTabs.includes('upload')}
-        <button type="button" class:active={activeTab === 'upload'} onclick={() => activeTab = 'upload'}>Upload</button>
+        <Button
+          variant="ghost"
+          class={activeTab === 'upload' ? 'uploader-tab uploader-tab--active' : 'uploader-tab'}
+          onclick={() => (activeTab = 'upload')}
+        >Upload</Button>
       {/if}
       {#if allowedTabs.includes('camera')}
-        <button type="button" class:active={activeTab === 'camera'} onclick={() => activeTab = 'camera'}>Camera</button>
+        <Button
+          variant="ghost"
+          class={activeTab === 'camera' ? 'uploader-tab uploader-tab--active' : 'uploader-tab'}
+          onclick={() => (activeTab = 'camera')}
+        >Camera</Button>
       {/if}
       {#if allowedTabs.includes('external')}
-        <button type="button" class:active={activeTab === 'external'} onclick={() => activeTab = 'external'}>{t(M['images.image_uploader.external_url'])}</button>
+        <Button
+          variant="ghost"
+          class={activeTab === 'external' ? 'uploader-tab uploader-tab--active' : 'uploader-tab'}
+          onclick={() => (activeTab = 'external')}
+        >{t(M['images.image_uploader.external_url'])}</Button>
       {/if}
     </div>
     
@@ -401,13 +420,14 @@ onDestroy(() => {
           </div>
           <p>{t(M['images.image_uploader.drag_and_drop'])}</p>
           <span class="divider">or</span>
-          <button type="button" class="browse-btn">{t(M['images.image_uploader.browse_files'])}</button>
-          <input 
-            type="file" 
-            accept="image/*" 
-            bind:this={uploadInput} 
-            onchange={handleFileSelect} 
-            style="display: none;" 
+          <Button variant="primary" class="browse-btn--decorative">{t(M['images.image_uploader.browse_files'])}</Button>
+          <!-- raw-primitive-allow: hidden file input driven imperatively via a DOM ref (bind:this gives uploadInput so the parent can call .click() and onchange reads target.files); the Input primitive exposes a component instance, not the underlying HTMLInputElement -->
+          <input
+            type="file"
+            accept="image/*"
+            bind:this={uploadInput}
+            onchange={handleFileSelect}
+            style="display: none;"
           />
           {#if uploadError}
             <p class="error">{uploadError}</p>
@@ -419,7 +439,7 @@ onDestroy(() => {
           {#if cameraError}
             <div class="error-panel">
               <p>{cameraError}</p>
-              <button type="button" onclick={startCamera}>{t(M['images.image_uploader.try_again'])}</button>
+              <Button variant="secondary" class="try-again-btn" onclick={startCamera}>{t(M['images.image_uploader.try_again'])}</Button>
             </div>
           {:else}
             <div class="video-container">
@@ -429,9 +449,9 @@ onDestroy(() => {
                 <div class="loading-overlay">{t(M['images.image_uploader.starting_camera'])}</div>
               {/if}
             </div>
-            <button type="button" class="capture-btn" disabled={!isCameraActive} onclick={takePicture}>
+            <Button variant="primary" class="capture-btn--pill" disabled={!isCameraActive} onclick={takePicture}>
               {t(M['images.image_uploader.take_picture'])}
-            </button>
+            </Button>
             <canvas bind:this={canvasElement} style="display: none;"></canvas>
           {/if}
         </div>
@@ -440,20 +460,21 @@ onDestroy(() => {
         <div class="external-area">
           <p class="hint">{t(M['images.image_uploader.external_hint'])}</p>
           <div class="input-group">
-            <input 
-              type="url" 
+            <Input
+              type="url"
+              class="external-url-input"
               bind:value={externalUrl}
               placeholder={t(M['images.image_uploader.external_url_placeholder'])}
               onkeydown={(e) => e.key === 'Enter' && handleExternalSubmit()}
             />
-            <button 
-              type="button"
-              class="submit-btn" 
-              disabled={!externalUrl.trim()} 
+            <Button
+              variant="primary"
+              class="submit-btn--inline"
+              disabled={!externalUrl.trim()}
               onclick={handleExternalSubmit}
             >
               Add
-            </button>
+            </Button>
           </div>
         </div>
       {/if}
@@ -488,16 +509,16 @@ onDestroy(() => {
     font-size: var(--smrt-typography-title-medium-size, 1.15rem);
   }
 
-  .close-btn {
-    background: transparent;
-    border: none;
+  /* Migrated close Button keeps its muted ghost look; only the × glyph sizing
+     is custom. :global() pierces into the Button child's rendered <button>
+     (see #1589 scoping rule). */
+  .header :global(.close-btn--x) {
     color: var(--smrt-color-outline, #888);
     font-size: var(--smrt-typography-headline-small-size, 1.5rem);
     line-height: 1;
-    cursor: pointer;
   }
-  
-  .close-btn:hover {
+
+  .header :global(.close-btn--x:hover) {
     color: var(--smrt-color-on-surface, #fff);
   }
 
@@ -507,27 +528,29 @@ onDestroy(() => {
     border-bottom: 1px solid var(--smrt-color-outline-variant, #333);
   }
 
-  .tabs button {
+  /* The tab strip is migrated to ghost Buttons; the active state is the bottom
+     underline rather than a filled variant. :global() pierces into each
+     Button's rendered <button> (see #1589 scoping rule). */
+  .tabs :global(.uploader-tab) {
     flex: 1;
-    background: transparent;
     border: none;
     border-bottom: 2px solid var(--smrt-color-outline-variant, #333);
     padding: 1rem;
     color: var(--smrt-color-outline, #888);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    cursor: pointer;
+    border-radius: 0;
     transition: all 0.2s;
     text-transform: uppercase;
     font-size: var(--smrt-typography-label-large-size, 0.85rem);
     letter-spacing: var(--smrt-typography-label-large-tracking, 0.5px);
   }
 
-  .tabs button:hover {
+  .tabs :global(.uploader-tab:hover) {
     color: var(--smrt-color-on-surface-variant, #ccc);
     background: color-mix(in srgb, var(--smrt-color-on-surface, #fff) 2%, transparent);
   }
 
-  .tabs button.active {
+  .tabs :global(.uploader-tab--active) {
     color: var(--smrt-color-primary, #3b82f6);
     border-bottom: 2px solid var(--smrt-color-primary, #3b82f6);
     background: transparent;
@@ -594,10 +617,10 @@ onDestroy(() => {
     margin-bottom: 1rem;
   }
 
-  .browse-btn {
-    background: var(--smrt-color-primary, #3b82f6);
-    color: white;
-    border: none;
+  /* Decorative label inside the click-catching upload area; the parent handles
+     clicks, so this migrated Button stays inert. :global() pierces into the
+     Button child's rendered <button> (see #1589 scoping rule). */
+  .upload-area :global(.browse-btn--decorative) {
     padding: 0.5rem 1.5rem;
     border-radius: var(--smrt-radius-full, 9999px);
     font-weight: var(--smrt-typography-weight-medium, 500);
@@ -648,21 +671,18 @@ onDestroy(() => {
     color: white;
   }
 
-  .capture-btn {
-    background: var(--smrt-color-primary, #3b82f6);
-    color: white;
-    border: none;
+  /* Large primary capture action; keeps its oversized pill sizing over the
+     primary variant. :global() pierces into the Button child (see #1589). */
+  .camera-area :global(.capture-btn--pill) {
     padding: 1rem 3rem;
     border-radius: var(--smrt-radius-full, 9999px);
     font-size: var(--smrt-typography-body-large-size, 1.1rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    cursor: pointer;
   }
 
-  .capture-btn:disabled {
+  .camera-area :global(.capture-btn--pill:disabled) {
     background: var(--smrt-color-outline-variant, #444);
     color: var(--smrt-color-outline, #888);
-    cursor: not-allowed;
   }
 
   .error-panel {
@@ -677,13 +697,14 @@ onDestroy(() => {
     margin-bottom: 1rem;
   }
 
-  .error-panel button {
+  /* Migrated "try again" Button keeps its surface-tinted look over the
+     secondary variant. :global() pierces into the Button child (see #1589). */
+  .error-panel :global(.try-again-btn) {
     background: var(--smrt-color-surface-container-high, #242424);
     color: white;
     border: 1px solid var(--smrt-color-outline-variant, #444);
     padding: 0.5rem 1rem;
     border-radius: var(--smrt-radius-sm, 4px);
-    cursor: pointer;
   }
 
   /* External Tab */
@@ -708,55 +729,42 @@ onDestroy(() => {
     gap: 0.5rem;
   }
 
-  .input-group input {
+  /* Layout-only override: let the migrated URL Input flex-grow to fill the row
+     beside the Add button. The Input primitive owns the visual styling; this
+     :global() rule only pierces its rendered <input> (see #1589 scoping rule). */
+  .input-group :global(.external-url-input) {
     flex: 1;
-    padding: 1rem 1.25rem;
-    background: var(--smrt-color-surface-container-high, #242424);
-    border: 1px solid var(--smrt-color-outline-variant, #444);
-    border-radius: var(--smrt-radius-sm, 4px);
-    color: var(--smrt-color-on-surface, #fff);
-    font-size: var(--smrt-typography-body-large-size, 1rem);
-    transition: border-color 0.2s, box-shadow 0.2s;
   }
 
-  .input-group input:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #3b82f6);
-    box-shadow: inset 0 0 0 1px var(--smrt-color-primary, #3b82f6);
-  }
-
-  .submit-btn {
-    background: var(--smrt-color-primary, #3b82f6);
-    color: white;
-    border: none;
+  /* Migrated Add Button sits in the URL input group; keeps square-ish radius
+     and zero vertical padding. :global() pierces into the Button child
+     (see #1589 scoping rule). */
+  .input-group :global(.submit-btn--inline) {
     padding: 0 1.5rem;
     border-radius: var(--smrt-radius-md, 6px);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    cursor: pointer;
   }
 
-  .submit-btn:disabled {
+  .input-group :global(.submit-btn--inline:disabled) {
     background: var(--smrt-color-surface-container-highest, #333);
     color: var(--smrt-color-outline, #666);
-    cursor: not-allowed;
   }
 
   /* --- Back Button --- */
-  .back-btn {
+  /* Migrated ghost Button keeps the icon+label inline layout and tinted hover.
+     :global() pierces into the Button child (see #1589 scoping rule). */
+  .header :global(.back-btn--link) {
     display: flex;
     align-items: center;
     gap: 0.35rem;
-    background: transparent;
-    border: none;
     color: var(--smrt-color-primary, #3b82f6);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    cursor: pointer;
     padding: 0.25rem 0.5rem;
     border-radius: var(--smrt-radius-sm, 4px);
     transition: background 0.15s;
   }
 
-  .back-btn:hover {
+  .header :global(.back-btn--link:hover) {
     background: color-mix(in srgb, var(--smrt-color-primary) 8%, transparent);
   }
 
@@ -814,22 +822,20 @@ onDestroy(() => {
     margin-top: 0.5rem;
   }
 
-  .primary-btn {
-    background: var(--smrt-color-primary, #3b82f6);
-    color: white;
-    border: none;
+  /* Migrated confirm-action Buttons keep their pill / chip looks. :global()
+     pierces into each Button's rendered <button> (see #1589 scoping rule). */
+  .confirm-actions :global(.primary-btn--pill) {
     padding: 0.65rem 1.5rem;
     border-radius: var(--smrt-radius-full, 9999px);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    cursor: pointer;
     transition: filter 0.15s;
   }
 
-  .primary-btn:hover {
+  .confirm-actions :global(.primary-btn--pill:hover) {
     filter: brightness(1.1);
   }
 
-  .variation-toggle {
+  .confirm-actions :global(.variation-toggle--chip) {
     display: flex;
     align-items: center;
     gap: 0.4rem;
@@ -839,15 +845,14 @@ onDestroy(() => {
     padding: 0.65rem 1.25rem;
     border-radius: var(--smrt-radius-full, 9999px);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    cursor: pointer;
     transition: all 0.2s;
   }
 
-  .variation-toggle:hover {
+  .confirm-actions :global(.variation-toggle--chip:hover) {
     background: var(--smrt-color-surface-container-high, #3f3f3f);
   }
 
-  .variation-toggle.active {
+  .confirm-actions :global(.variation-toggle--active) {
     color: var(--smrt-color-primary, #3b82f6);
     border-color: var(--smrt-color-primary, #3b82f6);
     background: color-mix(in srgb, var(--smrt-color-primary) 8%, transparent);
@@ -871,29 +876,6 @@ onDestroy(() => {
     margin: 0;
   }
 
-  .variation-form textarea {
-    width: 100%;
-    padding: 0.75rem;
-    background: var(--smrt-color-surface-container, #1a1a1a);
-    border: 1px solid var(--smrt-color-outline-variant, #444);
-    border-radius: var(--smrt-radius-sm, 4px);
-    color: inherit;
-    font-family: inherit;
-    font-size: var(--smrt-typography-body-large-size, 0.95rem);
-    resize: vertical;
-    transition: border-color 0.2s, box-shadow 0.2s;
-  }
-
-  .variation-form textarea:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #3b82f6);
-    box-shadow: inset 0 0 0 1px var(--smrt-color-primary, #3b82f6);
-  }
-
-  .variation-form textarea:disabled {
-    opacity: 0.6;
-  }
-
   .variation-error {
     color: var(--smrt-color-error, #ef4444);
     background: color-mix(in srgb, var(--smrt-color-error) 10%, transparent);
@@ -902,31 +884,20 @@ onDestroy(() => {
     font-size: var(--smrt-typography-body-medium-size, 0.85rem);
   }
 
-  .generate-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
+  /* Migrated generate Button keeps its left-aligned pill look and inline
+     spinner. :global() pierces into the Button child (see #1589 scoping rule). */
+  .variation-form :global(.generate-btn--pill) {
     align-self: flex-start;
-    background: var(--smrt-color-primary, #3b82f6);
-    color: white;
-    border: none;
     padding: 0.65rem 1.5rem;
     border-radius: var(--smrt-radius-full, 9999px);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    cursor: pointer;
     transition: filter 0.15s, opacity 0.15s;
   }
 
-  .generate-btn:hover:not(:disabled) {
+  .variation-form :global(.generate-btn--pill:hover:not(:disabled)) {
     filter: brightness(1.1);
   }
 
-  .generate-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   @keyframes spin {
     to { transform: rotate(360deg); }
   }

package/dist/svelte/components/ImageUploader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ImageUploader.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EACT,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAGzB,KAAK,gBAAgB,GAAI;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,mDAAmD;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC,EAAE,CAAC;IAC/D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AA0ZF,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ImageUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ImageUploader.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EACT,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAGzB,KAAK,gBAAgB,GAAI;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,mDAAmD;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC,EAAE,CAAC;IAC/D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AA+ZF,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@happyvertical/smrt-images",
-  "version": "0.34.5",
+  "version": "0.34.7",
   "description": "Image asset management with AI-powered categorization, search, editing, and metadata extraction for SMRT framework",
   "type": "module",
+  "smrtRawPrimitives": "strict",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -38,12 +39,12 @@
     "@happyvertical/utils": "^0.74.7",
     "jimp": "^1.6.1",
     "sharp": "^0.34.5",
-    "@happyvertical/smrt-assets": "0.34.5",
-    "@happyvertical/smrt-core": "0.34.5",
-    "@happyvertical/smrt-prompts": "0.34.5",
-    "@happyvertical/smrt-tenancy": "0.34.5",
-    "@happyvertical/smrt-types": "0.34.5",
-    "@happyvertical/smrt-ui": "0.34.5"
+    "@happyvertical/smrt-assets": "0.34.7",
+    "@happyvertical/smrt-core": "0.34.7",
+    "@happyvertical/smrt-tenancy": "0.34.7",
+    "@happyvertical/smrt-prompts": "0.34.7",
+    "@happyvertical/smrt-types": "0.34.7",
+    "@happyvertical/smrt-ui": "0.34.7"
   },
   "peerDependencies": {
     "svelte": "^5.18.0"
@@ -59,8 +60,8 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.17",
-    "@happyvertical/smrt-playground": "0.34.5",
-    "@happyvertical/smrt-vitest": "0.34.5"
+    "@happyvertical/smrt-playground": "0.34.7",
+    "@happyvertical/smrt-vitest": "0.34.7"
   },
   "keywords": [
     "ai",