@happyvertical/smrt-images 0.55.16 → 0.55.17

package/dist/svelte/components/ImageUploader.svelte

@@ -276,7 +276,7 @@ onDestroy(() => {
 });
 </script>
 
-<div class="smrt-image-uploader">
+<div class="smrt-image-uploader" data-smrt-component="ImageUploader">
   {#if selectedImage}
     <!-- Gallery Confirmation Step -->
     <div class="header">
@@ -486,13 +486,15 @@ onDestroy(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-image-uploader {
     display: flex;
     flex-direction: column;
-    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);
     overflow: hidden;
     height: 100%;
     min-height: 500px;
@@ -503,7 +505,7 @@ onDestroy(() => {
     justify-content: space-between;
     align-items: center;
     padding: 1rem 1.5rem;
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #333);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
   
   .header h3 {
@@ -515,19 +517,19 @@ onDestroy(() => {
      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);
+    color: var(--smrt-color-outline);
     font-size: var(--smrt-typography-headline-small-size, 1.5rem);
     line-height: 1;
   }
 
   .header :global(.close-btn--x:hover) {
-    color: var(--smrt-color-on-surface, #fff);
+    color: var(--smrt-color-on-surface);
   }
 
   .tabs {
     display: flex;
-    background: var(--smrt-color-surface-container-high, #242424);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #333);
+    background: var(--smrt-color-surface-container-high);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   /* The tab strip is migrated to ghost Buttons; the active state is the bottom
@@ -536,25 +538,25 @@ onDestroy(() => {
   .tabs :global(.uploader-tab) {
     flex: 1;
     border: none;
-    border-bottom: 2px solid var(--smrt-color-outline-variant, #333);
+    border-bottom: 2px solid var(--smrt-color-outline-variant);
     padding: 1rem;
-    color: var(--smrt-color-outline, #888);
+    color: var(--smrt-color-outline);
     font-weight: var(--smrt-typography-weight-medium, 500);
     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);
+    letter-spacing: var(--smrt-typography-label-large-tracking);
   }
 
   .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);
+    color: var(--smrt-color-on-surface-variant);
+    background: color-mix(in srgb, var(--smrt-color-on-surface) 2%, transparent);
   }
 
   .tabs :global(.uploader-tab--active) {
-    color: var(--smrt-color-primary, #3b82f6);
-    border-bottom: 2px solid var(--smrt-color-primary, #3b82f6);
+    color: var(--smrt-color-primary);
+    border-bottom: 2px solid var(--smrt-color-primary);
     background: transparent;
   }
 
@@ -584,27 +586,27 @@ onDestroy(() => {
     justify-content: center;
     padding: 3rem;
     margin: 1.5rem;
-    border: 2px dashed var(--smrt-color-outline-variant, #444);
-    border-radius: var(--smrt-radius-lg, 8px);
-    background: var(--smrt-color-surface-container-high, #242424);
+    border: 2px dashed var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-lg);
+    background: var(--smrt-color-surface-container-high);
     cursor: pointer;
     transition: all 0.2s;
   }
 
   .upload-area:hover, .upload-area:focus {
-    border-color: var(--smrt-color-outline, #666);
-    background: var(--smrt-color-surface-container-highest, #2a2a2a);
+    border-color: var(--smrt-color-outline);
+    background: var(--smrt-color-surface-container-highest);
     outline: none;
   }
 
   .upload-area.dragging {
-    border-color: var(--smrt-color-primary, #3b82f6);
+    border-color: var(--smrt-color-primary);
     background: color-mix(in srgb, var(--smrt-color-primary) 5%, transparent);
     transform: scale(1.02);
   }
 
   .upload-icon {
-    color: var(--smrt-color-primary, #3b82f6);
+    color: var(--smrt-color-primary);
     margin-bottom: 1rem;
   }
 
@@ -615,7 +617,7 @@ onDestroy(() => {
 
   .divider {
     font-size: var(--smrt-typography-label-large-size, 0.85rem);
-    color: var(--smrt-color-outline, #666);
+    color: var(--smrt-color-outline);
     margin-bottom: 1rem;
   }
 
@@ -624,14 +626,14 @@ onDestroy(() => {
      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);
+    border-radius: var(--smrt-radius-full);
     font-weight: var(--smrt-typography-weight-medium, 500);
     pointer-events: none; /* Let parent handle clicks */
   }
 
   .error {
     margin-top: 1rem;
-    color: var(--smrt-color-error, #ef4444);
+    color: var(--smrt-color-error);
     font-size: var(--smrt-typography-body-medium-size, 0.9rem);
   }
 
@@ -644,7 +646,7 @@ onDestroy(() => {
     gap: 1.5rem;
     align-items: center;
     justify-content: center;
-    background: var(--smrt-color-surface-dim, #000);
+    background: var(--smrt-color-surface-dim);
   }
 
   .video-container {
@@ -652,8 +654,8 @@ onDestroy(() => {
     width: 100%;
     max-width: 600px;
     aspect-ratio: 4/3;
-    background: var(--smrt-color-surface-container-lowest, #111);
-    border-radius: var(--smrt-radius-md, 6px);
+    background: var(--smrt-color-surface-container-lowest);
+    border-radius: var(--smrt-radius-md);
     overflow: hidden;
   }
 
@@ -677,36 +679,36 @@ onDestroy(() => {
      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);
+    border-radius: var(--smrt-radius-full);
     font-size: var(--smrt-typography-body-large-size, 1.1rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
   .camera-area :global(.capture-btn--pill:disabled) {
-    background: var(--smrt-color-outline-variant, #444);
-    color: var(--smrt-color-outline, #888);
+    background: var(--smrt-color-outline-variant);
+    color: var(--smrt-color-outline);
   }
 
   .error-panel {
     text-align: center;
     padding: 2rem;
-    background: var(--smrt-color-surface-container, #1a1a1a);
-    border-radius: var(--smrt-radius-md, 6px);
+    background: var(--smrt-color-surface-container);
+    border-radius: var(--smrt-radius-md);
   }
 
   .error-panel p {
-    color: var(--smrt-color-error, #ef4444);
+    color: var(--smrt-color-error);
     margin-bottom: 1rem;
   }
 
   /* 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);
+    background: var(--smrt-color-surface-container-high);
     color: white;
-    border: 1px solid var(--smrt-color-outline-variant, #444);
+    border: 1px solid var(--smrt-color-outline-variant);
     padding: 0.5rem 1rem;
-    border-radius: var(--smrt-radius-sm, 4px);
+    border-radius: var(--smrt-radius-sm);
   }
 
   /* External Tab */
@@ -719,7 +721,7 @@ onDestroy(() => {
   }
 
   .hint {
-    color: var(--smrt-color-outline, #888);
+    color: var(--smrt-color-outline);
     margin-bottom: 2rem;
     text-align: center;
   }
@@ -743,13 +745,13 @@ onDestroy(() => {
      (see #1589 scoping rule). */
   .input-group :global(.submit-btn--inline) {
     padding: 0 1.5rem;
-    border-radius: var(--smrt-radius-md, 6px);
+    border-radius: var(--smrt-radius-md);
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
   .input-group :global(.submit-btn--inline:disabled) {
-    background: var(--smrt-color-surface-container-highest, #333);
-    color: var(--smrt-color-outline, #666);
+    background: var(--smrt-color-surface-container-highest);
+    color: var(--smrt-color-outline);
   }
 
   /* --- Back Button --- */
@@ -759,10 +761,10 @@ onDestroy(() => {
     display: flex;
     align-items: center;
     gap: 0.35rem;
-    color: var(--smrt-color-primary, #3b82f6);
+    color: var(--smrt-color-primary);
     font-weight: var(--smrt-typography-weight-medium, 500);
     padding: 0.25rem 0.5rem;
-    border-radius: var(--smrt-radius-sm, 4px);
+    border-radius: var(--smrt-radius-sm);
     transition: background 0.15s;
   }
 
@@ -793,9 +795,9 @@ onDestroy(() => {
     max-width: 100%;
     max-height: 400px;
     object-fit: contain;
-    border-radius: var(--smrt-radius-md, 6px);
-    border: 1px solid var(--smrt-color-outline-variant, #333);
-    background-color: var(--smrt-color-surface-container-high, #242424);
+    border-radius: var(--smrt-radius-md);
+    border: 1px solid var(--smrt-color-outline-variant);
+    background-color: var(--smrt-color-surface-container-high);
   }
 
   .confirm-info {
@@ -812,7 +814,7 @@ onDestroy(() => {
 
   .confirm-meta {
     font-size: var(--smrt-typography-label-large-size, 0.85rem);
-    color: var(--smrt-color-outline, #888);
+    color: var(--smrt-color-outline);
   }
 
   .confirm-actions {
@@ -820,7 +822,7 @@ onDestroy(() => {
     display: flex;
     gap: 0.75rem;
     flex-wrap: wrap;
-    border-top: 1px solid var(--smrt-color-outline-variant, #333);
+    border-top: 1px solid var(--smrt-color-outline-variant);
     margin-top: 0.5rem;
   }
 
@@ -828,7 +830,7 @@ onDestroy(() => {
      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);
+    border-radius: var(--smrt-radius-full);
     font-weight: var(--smrt-typography-weight-medium, 500);
     transition: filter 0.15s;
   }
@@ -841,22 +843,22 @@ onDestroy(() => {
     display: flex;
     align-items: center;
     gap: 0.4rem;
-    background: var(--smrt-color-surface-container-highest, #333);
-    color: var(--smrt-color-on-surface-variant, #ccc);
-    border: 1px solid var(--smrt-color-outline-variant, #444);
+    background: var(--smrt-color-surface-container-highest);
+    color: var(--smrt-color-on-surface-variant);
+    border: 1px solid var(--smrt-color-outline-variant);
     padding: 0.65rem 1.25rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     font-weight: var(--smrt-typography-weight-medium, 500);
     transition: all 0.2s;
   }
 
   .confirm-actions :global(.variation-toggle--chip:hover) {
-    background: var(--smrt-color-surface-container-high, #3f3f3f);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .confirm-actions :global(.variation-toggle--active) {
-    color: var(--smrt-color-primary, #3b82f6);
-    border-color: var(--smrt-color-primary, #3b82f6);
+    color: var(--smrt-color-primary);
+    border-color: var(--smrt-color-primary);
     background: color-mix(in srgb, var(--smrt-color-primary) 8%, transparent);
   }
 
@@ -867,22 +869,22 @@ onDestroy(() => {
     gap: 0.75rem;
     padding: 1.25rem;
     margin: 0 1.5rem 1.5rem;
-    background: var(--smrt-color-surface-container-high, #242424);
-    border-radius: var(--smrt-radius-md, 6px);
-    border: 1px solid var(--smrt-color-outline-variant, #333);
+    background: var(--smrt-color-surface-container-high);
+    border-radius: var(--smrt-radius-md);
+    border: 1px solid var(--smrt-color-outline-variant);
   }
 
   .variation-hint {
     font-size: var(--smrt-typography-body-medium-size, 0.85rem);
-    color: var(--smrt-color-outline, #888);
+    color: var(--smrt-color-outline);
     margin: 0;
   }
 
   .variation-error {
-    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 0.75rem;
-    border-radius: var(--smrt-radius-sm, 4px);
+    border-radius: var(--smrt-radius-sm);
     font-size: var(--smrt-typography-body-medium-size, 0.85rem);
   }
 
@@ -891,7 +893,7 @@ onDestroy(() => {
   .variation-form :global(.generate-btn--pill) {
     align-self: flex-start;
     padding: 0.65rem 1.5rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     font-weight: var(--smrt-typography-weight-medium, 500);
     transition: filter 0.15s, opacity 0.15s;
   }
@@ -910,7 +912,8 @@ onDestroy(() => {
     height: 14px;
     border: 2px solid color-mix(in srgb, var(--smrt-color-on-primary) 30%, transparent);
     border-top-color: white;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     animation: spin 0.6s linear infinite;
   }
+}
 </style>

package/dist/svelte/components/PhotoCutoutSetup.svelte

@@ -370,7 +370,7 @@ async function playSpeech() {
 }
 </script>
 
-<section class="setup" aria-busy={busy !== null} aria-labelledby="cutout-title">
+<section class="setup" aria-busy={busy !== null} aria-labelledby="cutout-title" data-smrt-component="PhotoCutoutSetup">
   <h2 id="cutout-title">{t(M['images.photo_cutout_setup.title'])}</h2>
   <ol class="steps" aria-label={t(M['images.photo_cutout_setup.steps_label'])}>
     <li class:current={!source && !ready} class:complete={source !== null || ready} aria-current={!source && !ready ? 'step' : undefined}>{t(M['images.photo_cutout_setup.step_choose'])}</li>
@@ -406,15 +406,17 @@ async function playSpeech() {
 </section>
 
 <style>
-.setup { max-width: 42rem; margin: var(--smrt-spacing-6, 1.5rem) auto; padding: var(--smrt-spacing-5, 1.25rem); border: 1px solid var(--smrt-color-outline-variant, #64748b); border-radius: var(--smrt-radius-xl, 12px); }
-.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--smrt-spacing-2, .5rem); padding: 0; margin: var(--smrt-spacing-4, 1rem) 0; list-style: none; color: var(--smrt-color-on-surface-variant, #475569); font-size: var(--smrt-typography-body-small-size, .875rem); }
-.steps li { padding-bottom: var(--smrt-spacing-1, .25rem); border-bottom: 2px solid var(--smrt-color-outline-variant, #64748b); }
-.steps .current { color: var(--smrt-color-primary, #1d4ed8); border-color: var(--smrt-color-primary, #1d4ed8); font-weight: var(--smrt-typography-weight-semibold, 600); }
-.steps .complete { color: var(--smrt-color-success, #166534); }
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+.setup { max-width: 42rem; margin: var(--smrt-spacing-6, 1.5rem) auto; padding: var(--smrt-spacing-5, 1.25rem); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-xl); }
+.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--smrt-spacing-2, .5rem); padding: 0; margin: var(--smrt-spacing-4, 1rem) 0; list-style: none; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-small-size, .875rem); }
+.steps li { padding-bottom: var(--smrt-spacing-1, .25rem); border-bottom: 2px solid var(--smrt-color-outline-variant); }
+.steps .current { color: var(--smrt-color-primary); border-color: var(--smrt-color-primary); font-weight: var(--smrt-typography-weight-semibold, 600); }
+.steps .complete { color: var(--smrt-color-success); }
 .workflow-actions { margin: var(--smrt-spacing-4, 1rem) 0; }
 .primary-action, .secondary-actions, .speech { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smrt-spacing-3, .75rem); }
 .secondary-actions { margin-top: var(--smrt-spacing-3, .75rem); }
-.save-hint { margin: var(--smrt-spacing-2, .5rem) 0 0; color: var(--smrt-color-on-surface-variant, #475569); font-size: var(--smrt-typography-body-small-size, .875rem); }
+.save-hint { margin: var(--smrt-spacing-2, .5rem) 0 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-small-size, .875rem); }
 .speech { margin-top: var(--smrt-spacing-4, 1rem); }
 .previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--smrt-spacing-4, 1rem); align-items: start; }
 figure { margin: 0; }
@@ -422,11 +424,12 @@ figure figcaption { margin-bottom: var(--smrt-spacing-2, .5rem); font-size: var(
 .setup img, .preview :global(svg) { display: block; width: 100%; height: auto; max-height: 18rem; object-fit: contain; }
 .preview, .preview-target { min-width: 0; }
 .preview-target:not(.preview) { display: none; }
-.checkerboard { background-color: var(--smrt-color-surface, #fff); background-image: linear-gradient(45deg, var(--smrt-color-surface-container-highest, #ddd) 25%, transparent 25%), linear-gradient(-45deg, var(--smrt-color-surface-container-highest, #ddd) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--smrt-color-surface-container-highest, #ddd) 75%), linear-gradient(-45deg, transparent 75%, var(--smrt-color-surface-container-highest, #ddd) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
-.error { color: var(--smrt-color-error, #b91c1c); font-weight: var(--smrt-typography-weight-semibold, 600); }
-.success { color: var(--smrt-color-success, #166534); }
-.spinner { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--smrt-radius-full, 9999px); animation: spin .7s linear infinite; }
+.checkerboard { background-color: var(--smrt-color-surface); background-image: linear-gradient(45deg, var(--smrt-color-surface-container-highest) 25%, transparent 25%), linear-gradient(-45deg, var(--smrt-color-surface-container-highest) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--smrt-color-surface-container-highest) 75%), linear-gradient(-45deg, transparent 75%, var(--smrt-color-surface-container-highest) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
+.error { color: var(--smrt-color-error); font-weight: var(--smrt-typography-weight-semibold, 600); }
+.success { color: var(--smrt-color-success); }
+.spinner { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--smrt-radius-full); animation: spin .7s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
 @media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-right-color: currentColor; } }
 @media (max-width: 40rem) { .steps { grid-template-columns: repeat(2, 1fr); } .previews { grid-template-columns: 1fr; } }
+}
 </style>

package/dist/svelte/routes/ImageStudioRoute.svelte

@@ -138,6 +138,8 @@ function handleEditorSave(image: StudioImage) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .images-route {
     max-width: 1440px;
     margin: 0 auto;
@@ -145,16 +147,16 @@ function handleEditorSave(image: StudioImage) {
     display: flex;
     flex-direction: column;
     gap: 1.75rem;
-    color: var(--smrt-color-on-surface, #e2e8f0);
+    color: var(--smrt-color-on-surface);
     background:
       radial-gradient(circle at top, color-mix(in srgb, var(--smrt-color-primary) 22%, transparent), transparent 40%),
-      var(--smrt-color-background, #020617);
+      var(--smrt-color-background);
     min-height: 100vh;
   }
 
   .images-route__eyebrow {
     margin: 0 0 0.5rem;
-    color: var(--smrt-color-primary, #7dd3fc);
+    color: var(--smrt-color-primary);
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-bold, 700);
     letter-spacing: var(--smrt-typography-label-medium-tracking, 0.08em);
@@ -173,7 +175,7 @@ function handleEditorSave(image: StudioImage) {
   .images-route__lede,
   .images-route__section-copy p {
     margin: 0.75rem 0 0;
-    color: var(--smrt-color-on-surface-variant, #cbd5e1);
+    color: var(--smrt-color-on-surface-variant);
     line-height: 1.6;
     max-width: 60rem;
   }
@@ -191,7 +193,7 @@ function handleEditorSave(image: StudioImage) {
     border-radius: 0.85rem;
     background: color-mix(in srgb, var(--smrt-color-surface-container) 72%, transparent);
     border: 1px solid color-mix(in srgb, var(--smrt-color-primary) 20%, transparent);
-    color: var(--smrt-color-on-surface, #e0f2fe);
+    color: var(--smrt-color-on-surface);
   }
 
   .images-route__workspace-grid {
@@ -231,4 +233,5 @@ function handleEditorSave(image: StudioImage) {
       min-height: 560px;
     }
   }
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-images",
-  "version": "0.55.16",
+  "version": "0.55.17",
   "description": "Image asset management with AI-powered categorization, search, editing, and metadata extraction for SMRT framework",
   "type": "module",
   "smrtRawPrimitives": "strict",
@@ -41,12 +41,12 @@
     "@happyvertical/animation": "0.5.0",
     "@happyvertical/ai": "^0.103.4",
     "@happyvertical/images": "^0.103.4",
-    "@happyvertical/smrt-assets": "0.55.16",
-    "@happyvertical/smrt-core": "0.55.16",
-    "@happyvertical/smrt-prompts": "0.55.16",
-    "@happyvertical/smrt-tenancy": "0.55.16",
-    "@happyvertical/smrt-types": "0.55.16",
-    "@happyvertical/smrt-ui": "0.55.16",
+    "@happyvertical/smrt-assets": "0.55.17",
+    "@happyvertical/smrt-core": "0.55.17",
+    "@happyvertical/smrt-prompts": "0.55.17",
+    "@happyvertical/smrt-tenancy": "0.55.17",
+    "@happyvertical/smrt-types": "0.55.17",
+    "@happyvertical/smrt-ui": "0.55.17",
     "@happyvertical/utils": "^0.103.4",
     "jimp": "^1.6.1",
     "sharp": "^0.35.5"
@@ -55,9 +55,9 @@
     "svelte": "^5.57.0"
   },
   "devDependencies": {
-    "@happyvertical/smrt-playground": "0.55.16",
-    "@happyvertical/smrt-profiles": "0.55.16",
-    "@happyvertical/smrt-vitest": "0.55.16",
+    "@happyvertical/smrt-playground": "0.55.17",
+    "@happyvertical/smrt-profiles": "0.55.17",
+    "@happyvertical/smrt-vitest": "0.55.17",
     "@happyvertical/sql": "^0.103.4",
     "@sveltejs/kit": "2.69.1",
     "@sveltejs/package": "^2.5.8",