@happyvertical/smrt-images 0.34.6 → 0.34.8

package/dist/manifest.json

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

package/dist/smrt-knowledge.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-06-24T05:20:55.298Z",
+  "generatedAt": "2026-06-24T16:24:24.858Z",
   "packageName": "@happyvertical/smrt-images",
-  "packageVersion": "0.34.6",
+  "packageVersion": "0.34.8",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "515005d7f498f29b64950227f55bf717187170d8804964551ce0d4d801ae2edf",
-    "packageJson": "92a1d613d753d7e30b192816fede1a97398d170365b5b4c1ca8d23c6a2912678",
+    "manifest": "a4baa7ca1cc2fa00494aeabf16c3e0e7f9a1fd12edd69f1ecae1efe8180ec8d3",
+    "packageJson": "2d9850bf9671a0909ca8fd561dd71dc7a339acca3e4d192ca51aae5824f74820",
     "agents": "b0cf63bd78f00cc1729ea7f1425291f8e23ab5591161cbbf0d08f4b16ace07fd"
   },
   "exports": [

package/dist/svelte/components/AssetsGallery.svelte

@@ -1,4 +1,5 @@
 <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';
@@ -158,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"
@@ -286,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;
-  }
-
-  .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);
+  /* 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;
   }
 
-  .size-input {
+  .filters :global(.size-input) {
     width: 120px;
   }
 

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":"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"}
+{"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,4 +1,5 @@
 <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';
@@ -219,8 +220,8 @@ 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>
+              <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}
@@ -231,12 +232,12 @@ async function handleAIEdit() {
           <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>
+              <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}
@@ -247,11 +248,11 @@ async function handleAIEdit() {
           <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>
+              </Select>
               <Button variant="ghost" class="tonal-btn--filled" disabled={isProcessing} onclick={handleConvert}>Convert</Button>
             </div>
           </div>
@@ -260,11 +261,12 @@ 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>
+              rows={4}
+            />
             <Button
               variant="primary"
               class="primary-btn--pill"
@@ -390,30 +392,22 @@ 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;
-  }
-
-  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);
+  /* 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[type="number"] {
-    width: 90px;
+  /* 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;
   }
 
-  textarea {
-    width: 100%;
-    resize: vertical;
+  .tool-section :global(.ai-prompt) {
     margin-bottom: 1rem;
-    font-family: inherit;
   }
 
   /* Migrated Buttons keep their bespoke filled-tonal / text-link / pill looks.

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":"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"}
+{"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,4 +1,5 @@
 <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';
@@ -320,12 +321,12 @@ onDestroy(() => {
       {#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}
@@ -420,12 +421,13 @@ onDestroy(() => {
           <p>{t(M['images.image_uploader.drag_and_drop'])}</p>
           <span class="divider">or</span>
           <Button variant="primary" class="browse-btn--decorative">{t(M['images.image_uploader.browse_files'])}</Button>
-          <input 
-            type="file" 
-            accept="image/*" 
-            bind:this={uploadInput} 
-            onchange={handleFileSelect} 
-            style="display: none;" 
+          <!-- 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>
@@ -458,8 +460,9 @@ 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()}
@@ -726,21 +729,11 @@ 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);
   }
 
   /* Migrated Add Button sits in the URL input group; keeps square-ish radius
@@ -883,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);

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