@happyvertical/smrt-images 0.34.4 → 0.34.6

package/dist/manifest.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
-  "timestamp": 1782257854286,
+  "timestamp": 1782278454905,
   "packageName": "@happyvertical/smrt-images",
-  "packageVersion": "0.34.4",
+  "packageVersion": "0.34.6",
   "objects": {
     "@happyvertical/smrt-images:Image": {
       "name": "image",

package/dist/smrt-knowledge.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-06-23T23:37:34.938Z",
+  "generatedAt": "2026-06-24T05:20:55.298Z",
   "packageName": "@happyvertical/smrt-images",
-  "packageVersion": "0.34.4",
+  "packageVersion": "0.34.6",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "b28c1715f58a725cbad0e541ffc0049bc4390040b05e9b935ba5b59cf4465531",
-    "packageJson": "f7aeb2e03407ed75dc4ff68f9e070a686760d9f92de6f74192c72bd8d4943cc0",
+    "manifest": "515005d7f498f29b64950227f55bf717187170d8804964551ce0d4d801ae2edf",
+    "packageJson": "92a1d613d753d7e30b192816fede1a97398d170365b5b4c1ca8d23c6a2912678",
     "agents": "b0cf63bd78f00cc1729ea7f1425291f8e23ab5591161cbbf0d08f4b16ace07fd"
   },
   "exports": [

package/dist/svelte/components/AssetsGallery.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 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 {
@@ -195,6 +196,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 +235,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>
@@ -421,23 +424,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":"AAOA,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;AA2NF,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,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../i18n.js';
 import type {
   ImageConvertRequest,
@@ -180,7 +181,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 +195,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}
@@ -212,10 +221,10 @@ async function handleAIEdit() {
             <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>
+              <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>
 
@@ -228,10 +237,10 @@ async function handleAIEdit() {
             <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>
+              <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>
 
@@ -243,7 +252,7 @@ async function handleAIEdit() {
                 <option value="jpeg">JPEG</option>
                 <option value="png">PNG</option>
               </select>
-              <button disabled={isProcessing} onclick={handleConvert} class="tonal-btn">Convert</button>
+              <Button variant="ghost" class="tonal-btn--filled" disabled={isProcessing} onclick={handleConvert}>Convert</Button>
             </div>
           </div>
         {:else}
@@ -256,13 +265,14 @@ async function handleAIEdit() {
               placeholder={t(M['images.image_editor.ai_prompt_placeholder'])}
               rows="4"
             ></textarea>
-            <button 
-              disabled={isProcessing || !prompt.trim()} 
+            <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 +307,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 +356,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 {
@@ -414,53 +416,41 @@ async function handleAIEdit() {
     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":"AAMA,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;AAkQF,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,6 @@
 <script lang="ts">
 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 +277,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,21 +299,22 @@ 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}
@@ -327,10 +329,10 @@ onDestroy(() => {
           {#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 +341,7 @@ onDestroy(() => {
             {:else}
               {t(M['images.image_uploader.generate_variation'])}
             {/if}
-          </button>
+          </Button>
         </div>
       {/if}
     </div>
@@ -349,22 +351,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,7 +419,7 @@ 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>
+          <Button variant="primary" class="browse-btn--decorative">{t(M['images.image_uploader.browse_files'])}</Button>
           <input 
             type="file" 
             accept="image/*" 
@@ -419,7 +437,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 +447,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>
@@ -446,14 +464,14 @@ onDestroy(() => {
               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 +506,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 +525,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 +614,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 +668,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 +694,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 */
@@ -725,38 +743,35 @@ onDestroy(() => {
     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 +829,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 +852,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);
@@ -902,31 +914,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":"AAOA,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;AA6ZF,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.4",
+  "version": "0.34.6",
   "description": "Image asset management with AI-powered categorization, search, editing, and metadata extraction for SMRT framework",
   "type": "module",
+  "smrtRawPrimitives": "strict-buttons",
   "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.4",
-    "@happyvertical/smrt-core": "0.34.4",
-    "@happyvertical/smrt-prompts": "0.34.4",
-    "@happyvertical/smrt-tenancy": "0.34.4",
-    "@happyvertical/smrt-types": "0.34.4",
-    "@happyvertical/smrt-ui": "0.34.4"
+    "@happyvertical/smrt-assets": "0.34.6",
+    "@happyvertical/smrt-core": "0.34.6",
+    "@happyvertical/smrt-tenancy": "0.34.6",
+    "@happyvertical/smrt-types": "0.34.6",
+    "@happyvertical/smrt-prompts": "0.34.6",
+    "@happyvertical/smrt-ui": "0.34.6"
   },
   "peerDependencies": {
     "svelte": "^5.18.0"
@@ -59,8 +60,8 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.17",
-    "@happyvertical/smrt-vitest": "0.34.4",
-    "@happyvertical/smrt-playground": "0.34.4"
+    "@happyvertical/smrt-playground": "0.34.6",
+    "@happyvertical/smrt-vitest": "0.34.6"
   },
   "keywords": [
     "ai",