@happyvertical/smrt-assets 0.55.11 → 0.55.18

package/dist/svelte/CreateAssetModal.svelte

@@ -229,12 +229,14 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
 </Modal>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .create-error {
     margin: var(--smrt-spacing-2, 0.5rem) 0 0;
     padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
     border-radius: var(--smrt-radius-medium, 0.5rem);
-    background: var(--smrt-color-error-container, #fde8e6);
-    color: var(--smrt-color-on-error-container, #410002);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
     font-size: var(--smrt-typography-body-small-size, 0.8rem);
   }
 
@@ -245,7 +247,7 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
     align-items: center;
     justify-content: center;
     padding: var(--smrt-spacing-8, 2rem);
-    border: 2px dashed var(--smrt-color-outline-variant, #d1d5db);
+    border: 2px dashed var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     cursor: pointer;
     transition: all 150ms ease;
@@ -253,25 +255,25 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
   }
 
   .dropzone:hover, .dropzone--active {
-    border-color: var(--smrt-color-primary, #005ac1);
+    border-color: var(--smrt-color-primary);
     background: var(--smrt-color-primary-container, rgba(0, 90, 193, 0.05));
   }
 
   .dropzone__icon {
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     margin-bottom: var(--smrt-spacing-3, 0.75rem);
   }
 
   .dropzone__text {
     margin: 0;
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
   }
 
   .dropzone__hint {
     margin: var(--smrt-spacing-1, 0.25rem) 0 0;
     font-size: var(--smrt-typography-body-small-size, 0.8rem);
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .dropzone__input {
@@ -284,7 +286,7 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
     align-items: center;
     gap: var(--smrt-spacing-3, 0.75rem);
     padding: var(--smrt-spacing-3, 0.75rem);
-    background: var(--smrt-color-surface-container-low, #f9fafb);
+    background: var(--smrt-color-surface-container-low);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     margin-bottom: var(--smrt-spacing-4, 1rem);
   }
@@ -303,7 +305,7 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
     align-items: center;
     justify-content: center;
     font-size: var(--smrt-typography-headline-small-size, 1.5rem);
-    background: var(--smrt-color-surface-container, #f3f4f6);
+    background: var(--smrt-color-surface-container);
     border-radius: var(--smrt-radius-small, 0.25rem);
   }
 
@@ -324,14 +326,14 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
   .file-preview__size {
     display: block;
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .file-preview__warning {
     display: block;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-error, #dc2626);
-    margin-top: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-error);
+    margin-top: var(--smrt-spacing-1);
   }
 
   /* file-preview__remove renders via <Button class="file-preview__remove">
@@ -344,13 +346,13 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
     padding: 0;
     border: none;
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
-    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-color-on-surface-variant);
+    border-radius: var(--smrt-radius-full);
   }
 
   .file-preview :global(.file-preview__remove:hover) {
-    background: var(--smrt-color-surface-container, #f3f4f6);
-    color: var(--smrt-color-error, #dc2626);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-error);
   }
 
   /* Form fields */
@@ -369,14 +371,14 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
   .form-label {
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
   }
 
   .form-label__warning {
     font-weight: var(--smrt-typography-weight-normal, 400);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-error, #dc2626);
-    margin-left: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-error);
+    margin-left: var(--smrt-spacing-1);
   }
-
+}
 </style>

package/dist/svelte/components/AttachmentList.svelte

@@ -93,7 +93,7 @@ async function confirmRemove() {
   </div>
 {/snippet}
 
-<section class="attachment-list" aria-label={title ?? t(M['assets.attachments.title'])} aria-busy={loading}>
+<section class="attachment-list" aria-label={title ?? t(M['assets.attachments.title'])} aria-busy={loading} data-smrt-component="AttachmentList">
   <h3>{title ?? t(M['assets.attachments.title'])}</h3>
   {#if message}<p role="alert">{message}</p>{/if}
   {#if loading}<p role="status">{t(M['assets.attachments.loading'])}</p>{/if}
@@ -137,6 +137,8 @@ async function confirmRemove() {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .attachment-list { min-width: 0; overflow-wrap: anywhere; }
   ul { list-style: none; padding: 0; }
   ul, ol { display: grid; gap: var(--smrt-spacing-4); }
@@ -146,4 +148,5 @@ async function confirmRemove() {
   .metadata { color: var(--smrt-color-on-surface-variant); }
   h3, h4, p { margin: 0; }
   .links :global(a) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
+}
 </style>

package/dist/svelte/components/AttachmentPanel.svelte

@@ -6,8 +6,13 @@ import AttachmentUpload from './AttachmentUpload.svelte';
 export interface Props extends AttachmentPanelProps {}
 let { upload, ...list }: Props = $props();
 </script>
-<div class="attachment-panel">
+<div class="attachment-panel" data-smrt-component="AttachmentPanel">
   <AttachmentList {...list} />
   {#if upload}<AttachmentUpload {...upload} />{/if}
 </div>
-<style>.attachment-panel { display: grid; gap: var(--smrt-spacing-4); min-width: 0; }</style>
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+.attachment-panel { display: grid; gap: var(--smrt-spacing-4); min-width: 0; }
+}
+</style>

package/dist/svelte/components/AttachmentUpload.svelte

@@ -72,10 +72,13 @@ const fileHelp = $derived(
     </div>
   </Form>
 {:else}
-  <p>{t(M['assets.attachments.readonly'])}</p>
+  <p data-smrt-component="AttachmentUpload">{t(M['assets.attachments.readonly'])}</p>
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .upload-fields { display: grid; gap: var(--smrt-spacing-3); min-width: 0; overflow-wrap: anywhere; }
   p { margin: 0; }
+}
 </style>

package/dist/svelte/playground/AssetDetailPreview.svelte

@@ -85,6 +85,8 @@ function handleEdit() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .preview-shell {
     display: grid;
     gap: 1rem;
@@ -110,7 +112,7 @@ function handleEdit() {
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     letter-spacing: var(--smrt-typography-label-medium-tracking, 0.12em);
     text-transform: uppercase;
-    color: var(--smrt-color-primary, #0f766e);
+    color: var(--smrt-color-primary);
   }
 
   /* The open-preview button renders via <Button variant="primary"> (issue
@@ -119,13 +121,14 @@ function handleEdit() {
   .preview-card :global(.preview-open) {
     justify-self: start;
     border: 0;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     padding: 0.75rem 1rem;
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
   .status {
-    color: var(--smrt-color-primary, #0f766e);
+    color: var(--smrt-color-primary);
     font-size: var(--smrt-typography-body-large-size, 0.95rem);
   }
+}
 </style>

package/dist/svelte/playground/AttachmentPanelPreview.svelte

@@ -19,4 +19,9 @@ function submit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
   <AttachmentPanel attachments={assetAttachmentMockAttachments}
     upload={{ action: '', canUpload, description, message, help: 'Preview accepts a local file but never sends it.', hiddenFields: [{ name: 'requestId', value: 'preview-request-retained' }], onsubmit: submit }} />
 </div>
-<style>.preview { display: grid; gap: var(--smrt-spacing-4); }</style>
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+.preview { display: grid; gap: var(--smrt-spacing-4); }
+}
+</style>

package/dist/svelte/playground/CreateAssetModalPreview.svelte

@@ -80,6 +80,8 @@ function handleCreate(data: {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .preview-shell {
     display: grid;
     gap: 1rem;
@@ -108,7 +110,7 @@ function handleCreate(data: {
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     letter-spacing: var(--smrt-typography-label-medium-tracking, 0.12em);
     text-transform: uppercase;
-    color: var(--smrt-color-primary, #0f766e);
+    color: var(--smrt-color-primary);
   }
 
   /* The open-modal button renders via <Button variant="primary"> (issue #1589).
@@ -117,13 +119,13 @@ function handleCreate(data: {
   .preview-card :global(.preview-open) {
     justify-self: start;
     border: 0;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     padding: 0.75rem 1rem;
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
   .status {
-    color: var(--smrt-color-primary, #0f766e);
+    color: var(--smrt-color-primary);
     font-size: var(--smrt-typography-body-large-size, 0.95rem);
   }
 
@@ -142,10 +144,11 @@ function handleCreate(data: {
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     letter-spacing: var(--smrt-typography-label-medium-tracking, 0.08em);
     text-transform: uppercase;
-    color: var(--smrt-color-on-surface-variant, #5b6574);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .summary dd {
-    color: var(--smrt-color-on-surface, #172033);
+    color: var(--smrt-color-on-surface);
   }
+}
 </style>

package/dist/svelte/routes/AssetManagerRoute.svelte

@@ -90,6 +90,8 @@ const customActions = [
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .assets-route {
     max-width: 1440px;
     margin: 0 auto;
@@ -108,7 +110,7 @@ const customActions = [
 
   .assets-route__eyebrow {
     margin: 0 0 0.5rem;
-    color: var(--smrt-color-primary, #0f766e);
+    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);
@@ -123,7 +125,7 @@ const customActions = [
   .assets-route__lede {
     max-width: 56rem;
     margin: 0.75rem 0 0;
-    color: var(--smrt-color-on-surface-variant, #475569);
+    color: var(--smrt-color-on-surface-variant);
     line-height: 1.6;
   }
 
@@ -145,8 +147,8 @@ const customActions = [
   }
 
   .assets-route__panel {
-    background: var(--smrt-color-surface, #fff);
-    border: 1px solid var(--smrt-color-outline-variant, #dbe3ef);
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: 1rem;
     padding: 1.25rem;
     box-shadow: var(--smrt-elevation-5, 0 10px 30px color-mix(in srgb, var(--smrt-color-shadow) 6%, transparent));
@@ -159,15 +161,15 @@ const customActions = [
 
   .assets-route__empty {
     margin: 0;
-    color: var(--smrt-color-on-surface-variant, #64748b);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .assets-route__message {
     margin: 0.75rem 0 0;
     padding: 0.75rem 0.875rem;
     border-radius: 0.75rem;
-    background: var(--smrt-color-primary-container, #ecfeff);
-    color: var(--smrt-color-on-primary-container, #155e75);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
   }
 
   .assets-route__selection-list {
@@ -184,13 +186,13 @@ const customActions = [
     gap: 0.25rem;
     padding: 0.625rem 0.75rem;
     border-radius: 0.75rem;
-    background: var(--smrt-color-surface-container, #f8fafc);
-    border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
+    background: var(--smrt-color-surface-container);
+    border: 1px solid var(--smrt-color-outline-variant);
   }
 
   .assets-route__selection-list code {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-primary-container, #155e75);
+    color: var(--smrt-color-on-primary-container);
   }
 
   @media (max-width: 960px) {
@@ -206,4 +208,5 @@ const customActions = [
       min-height: 640px;
     }
   }
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-assets",
-  "version": "0.55.11",
+  "version": "0.55.18",
   "smrtJsdoc": "strict",
   "description": "Asset management system with versioning, metadata, and AI-powered operations for SMRT framework",
   "type": "module",
@@ -44,16 +44,16 @@
     }
   },
   "dependencies": {
-    "@happyvertical/ai": "^0.103.1",
-    "@happyvertical/files": "^0.103.1",
-    "@happyvertical/logger": "^0.103.1",
-    "@happyvertical/smrt-core": "0.55.11",
-    "@happyvertical/smrt-tags": "0.55.11",
-    "@happyvertical/smrt-tenancy": "0.55.11",
-    "@happyvertical/smrt-types": "0.55.11",
-    "@happyvertical/smrt-ui": "0.55.11",
-    "@happyvertical/sql": "^0.103.1",
-    "@happyvertical/utils": "^0.103.1"
+    "@happyvertical/ai": "^0.103.4",
+    "@happyvertical/files": "^0.103.4",
+    "@happyvertical/logger": "^0.103.4",
+    "@happyvertical/smrt-core": "0.55.18",
+    "@happyvertical/smrt-tags": "0.55.18",
+    "@happyvertical/smrt-tenancy": "0.55.18",
+    "@happyvertical/smrt-types": "0.55.18",
+    "@happyvertical/smrt-ui": "0.55.18",
+    "@happyvertical/sql": "^0.103.4",
+    "@happyvertical/utils": "^0.103.4"
   },
   "peerDependencies": {
     "svelte": "^5.57.0"
@@ -64,8 +64,8 @@
     }
   },
   "devDependencies": {
-    "@happyvertical/smrt-playground": "0.55.11",
-    "@happyvertical/smrt-vitest": "0.55.11",
+    "@happyvertical/smrt-playground": "0.55.18",
+    "@happyvertical/smrt-vitest": "0.55.18",
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/kit": "2.69.1",
     "@sveltejs/package": "^2.5.8",