@happyvertical/smrt-images 0.55.16 → 0.55.17

package/dist/manifest.json

@@ -2,7 +2,7 @@
   "version": "1.0.0",
   "timestamp": 0,
   "packageName": "@happyvertical/smrt-images",
-  "packageVersion": "0.55.16",
+  "packageVersion": "0.55.17",
   "objects": {
     "@happyvertical/smrt-images:Image": {
       "name": "image",

package/dist/smrt-knowledge.json

@@ -3,12 +3,12 @@
   "sensitiveFieldsExcluded": true,
   "generatedAt": "1970-01-01T00:00:00.000Z",
   "packageName": "@happyvertical/smrt-images",
-  "packageVersion": "0.55.16",
+  "packageVersion": "0.55.17",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "d171494398c1ff68afaacba7948f256ed8d8e6aab8de8d563d48c6114939a12b",
-    "packageJson": "d0eaaae0397e04c1800918802ed159323e3fe77eff107610b6b2dd8f968da2a2",
+    "manifest": "1b50b85d6777d0e5622922638dc90b7eb01701da6c5a75672863e9c34b836790",
+    "packageJson": "b941f94bc7bba28b71beb416a7f3e4103f5b758dd62d57a601fe1872a81c77c7",
     "agents": "82a1905b76f49d9a852bf1e4f591595ae596c5cfa14ec736dc6f8fe32200fd8c"
   },
   "exports": [

package/dist/svelte/components/AssetsGallery.svelte

@@ -153,7 +153,7 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
 }
 </script>
 
-<div class="smrt-assets-gallery">
+<div class="smrt-assets-gallery" data-smrt-component="AssetsGallery">
   <div class="gallery-header">
     <h3>{t(M['images.assets_gallery.title'])}</h3>
     
@@ -249,14 +249,16 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-assets-gallery {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     height: 100%;
     min-height: 400px;
-    background: var(--smrt-color-surface, #121212);
-    color: var(--smrt-color-on-surface, #fff);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
   }
 
   .gallery-header {
@@ -264,9 +266,9 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
     flex-direction: column;
     gap: 1rem;
     padding: 1rem;
-    background: var(--smrt-color-surface-container, #1a1a1a);
-    border-radius: var(--smrt-radius-lg, 8px);
-    border: 1px solid var(--smrt-color-outline-variant, #333);
+    background: var(--smrt-color-surface-container);
+    border-radius: var(--smrt-radius-lg);
+    border: 1px solid var(--smrt-color-outline-variant);
   }
 
   .gallery-header h3 {
@@ -307,10 +309,10 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
   }
 
   .error-msg {
-    color: var(--smrt-color-error, #ef4444);
+    color: var(--smrt-color-error);
     background: color-mix(in srgb, var(--smrt-color-error) 10%, transparent);
     padding: 1rem;
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
   }
 
   .gallery-grid {
@@ -326,9 +328,9 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
     flex-direction: column;
     align-items: stretch;
     padding: 0;
-    background: var(--smrt-color-surface-container, #1a1a1a);
-    border-radius: var(--smrt-radius-lg, 8px);
-    border: 1px solid var(--smrt-color-surface-container-high, #2a2a2a);
+    background: var(--smrt-color-surface-container);
+    border-radius: var(--smrt-radius-lg);
+    border: 1px solid var(--smrt-color-surface-container-high);
     box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--smrt-color-shadow) 24%, transparent));
     overflow: hidden;
     color: inherit;
@@ -342,7 +344,7 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
 
   .gallery-item.selectable:hover, .gallery-item.selectable:focus {
     transform: translateY(-2px);
-    border-color: var(--smrt-color-primary, #3b82f6);
+    border-color: var(--smrt-color-primary);
     box-shadow: var(--smrt-elevation-2, 0 3px 6px color-mix(in srgb, var(--smrt-color-shadow) 16%, transparent), 0 3px 6px color-mix(in srgb, var(--smrt-color-shadow) 23%, transparent));
     outline: none;
   }
@@ -350,7 +352,7 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
   .img-container {
     aspect-ratio: 1;
     width: 100%;
-    background: var(--smrt-color-surface-container-high, #242424);
+    background: var(--smrt-color-surface-container-high);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -378,22 +380,22 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    letter-spacing: var(--smrt-typography-title-medium-tracking, 0.1px);
+    letter-spacing: var(--smrt-typography-title-medium-tracking);
   }
 
   .item-meta {
     font-size: var(--smrt-typography-label-large-size, 0.85rem);
-    color: var(--smrt-color-outline, #888);
+    color: var(--smrt-color-outline);
   }
 
   .empty-state {
     grid-column: 1 / -1;
     text-align: center;
     padding: 3rem;
-    color: var(--smrt-color-outline, #888);
-    background: var(--smrt-color-surface-container, #1a1a1a);
-    border-radius: var(--smrt-radius-lg, 8px);
-    border: 1px dashed var(--smrt-color-outline-variant, #444);
+    color: var(--smrt-color-outline);
+    background: var(--smrt-color-surface-container);
+    border-radius: var(--smrt-radius-lg);
+    border: 1px dashed var(--smrt-color-outline-variant);
   }
 
   .load-more {
@@ -407,15 +409,16 @@ function handleDragStart(event: DragEvent, image: ImageLike) {
      (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);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-primary);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-full);
     font-weight: var(--smrt-typography-weight-medium, 500);
     transition: background 0.2s;
   }
 
   .load-more :global(.load-more-btn--pill:hover:not(:disabled)) {
-    background: var(--smrt-color-surface-container-highest, #333);
+    background: var(--smrt-color-surface-container-highest);
   }
+}
 </style>

package/dist/svelte/components/ImageEditor.svelte

@@ -178,7 +178,7 @@ async function handleAIEdit() {
 }
 </script>
 
-<div class="smrt-image-editor">
+<div class="smrt-image-editor" data-smrt-component="ImageEditor">
   <div class="header">
     <h3>{t(M['images.image_editor.title'])}</h3>
     {#if onCancel}
@@ -283,22 +283,24 @@ async function handleAIEdit() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-image-editor {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     padding: 1.5rem;
-    background: var(--smrt-color-surface-container, #1a1a1a);
-    color: var(--smrt-color-on-surface, #fff);
-    border-radius: var(--smrt-radius-lg, 8px);
-    border: 1px solid var(--smrt-color-outline-variant, #333);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface);
+    border-radius: var(--smrt-radius-lg);
+    border: 1px solid var(--smrt-color-outline-variant);
   }
 
   .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #333);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
     padding-bottom: 1rem;
     margin-bottom: 0.5rem;
   }
@@ -320,7 +322,7 @@ async function handleAIEdit() {
   .empty-state {
     padding: 2rem;
     text-align: center;
-    color: var(--smrt-color-outline, #666);
+    color: var(--smrt-color-outline);
   }
 
   .editor-content {
@@ -336,9 +338,9 @@ async function handleAIEdit() {
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
-    background-color: var(--smrt-color-surface-container-high, #242424);
-    border-radius: var(--smrt-radius-md, 6px);
-    border: 1px dashed var(--smrt-color-outline-variant, #444);
+    background-color: var(--smrt-color-surface-container-high);
+    border-radius: var(--smrt-radius-md);
+    border: 1px dashed var(--smrt-color-outline-variant);
   }
 
   .editor-controls {
@@ -352,8 +354,8 @@ async function handleAIEdit() {
   /* Segmented button style for tabs */
   .mode-selector {
     display: flex;
-    background: var(--smrt-color-surface-container-high, #242424);
-    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface-container-high);
+    border-radius: var(--smrt-radius-full);
     padding: 0.25rem;
     gap: 0.25rem;
   }
@@ -365,14 +367,14 @@ async function handleAIEdit() {
     flex: 1;
     padding: 0.6rem 1rem;
     font-weight: var(--smrt-typography-weight-medium, 500);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
   }
 
   .tool-section h4 {
     margin: 0 0 1rem 0;
     font-size: var(--smrt-typography-title-medium-size, 0.95rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface-variant, #ccc);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .row {
@@ -388,7 +390,7 @@ async function handleAIEdit() {
     flex-direction: column;
     font-size: var(--smrt-typography-label-medium-size, 0.8rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-outline, #888);
+    color: var(--smrt-color-outline);
     gap: 0.25rem;
   }
 
@@ -413,18 +415,18 @@ async function handleAIEdit() {
   /* 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);
+    background: var(--smrt-color-surface-container-highest);
+    color: var(--smrt-color-primary);
+    border: 1px solid var(--smrt-color-outline-variant);
     padding: 0.6rem 1.2rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     font-weight: var(--smrt-typography-weight-medium, 500);
     transition: background 0.2s;
     margin-top: 1.25rem;
   }
 
   .tool-section :global(.tonal-btn--filled:hover:not(:disabled)) {
-    background: var(--smrt-color-surface-container-high, #3f3f3f);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .tool-section :global(.text-btn--link) {
@@ -432,12 +434,12 @@ async function handleAIEdit() {
     padding: 0;
   }
   .tool-section :global(.text-btn--link:hover) {
-    color: var(--smrt-color-on-surface, #fff);
+    color: var(--smrt-color-on-surface);
   }
 
   .tool-section :global(.primary-btn--pill) {
     padding: 0.6rem 1.5rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
@@ -447,23 +449,24 @@ async function handleAIEdit() {
 
   .hint {
     font-size: var(--smrt-typography-body-small-size, 0.8rem);
-    color: var(--smrt-color-outline, #888);
+    color: var(--smrt-color-outline);
     margin: 0 0 0.5rem 0;
   }
 
   .error-msg {
-    color: var(--smrt-color-error, #ef4444);
+    color: var(--smrt-color-error);
     background: color-mix(in srgb, var(--smrt-color-error) 10%, transparent);
     padding: 0.5rem;
-    border-radius: var(--smrt-radius-sm, 4px);
+    border-radius: var(--smrt-radius-sm);
     font-size: var(--smrt-typography-body-medium-size, 0.85rem);
   }
 
   .success-msg {
-    color: var(--smrt-color-success, #22c55e);
+    color: var(--smrt-color-success);
     background: color-mix(in srgb, var(--smrt-color-success) 10%, transparent);
     padding: 0.5rem;
-    border-radius: var(--smrt-radius-sm, 4px);
+    border-radius: var(--smrt-radius-sm);
     font-size: var(--smrt-typography-body-medium-size, 0.85rem);
   }
+}
 </style>