@happyvertical/smrt-assets 0.55.15 → 0.55.17

package/dist/manifest.json

@@ -2,7 +2,7 @@
   "version": "1.0.0",
   "timestamp": 0,
   "packageName": "@happyvertical/smrt-assets",
-  "packageVersion": "0.55.15",
+  "packageVersion": "0.55.17",
   "objects": {
     "@happyvertical/smrt-assets:AssetAssociation": {
       "name": "assetassociation",

package/dist/smrt-knowledge.json

@@ -3,12 +3,12 @@
   "sensitiveFieldsExcluded": true,
   "generatedAt": "1970-01-01T00:00:00.000Z",
   "packageName": "@happyvertical/smrt-assets",
-  "packageVersion": "0.55.15",
+  "packageVersion": "0.55.17",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "44626cad73b76b2bf497f635afa58f7467228016fbf163cecdd851504573fdda",
-    "packageJson": "a5eab964f6c61f773af5962465a7d838b4cd71e4c0ca956f34cb6f7e77ac9358",
+    "manifest": "2b9de54d928b2fdacc797dc51770f8ba3c86bbd2c5405eae62a754c2fa41ab2c",
+    "packageJson": "1186f460abc7c4456e7af10c0d866071b1cfce478736aa54ac7086645ee91c59",
     "agents": "4e84d65324e346f9c6072da7ccee6753289efb95ffb2faf5e999081502189737"
   },
   "exports": [

package/dist/svelte/ActionBar.svelte

@@ -54,7 +54,7 @@ const count = $derived(selectedAssets.length);
 </script>
 
 {#if count > 0}
-  <div class="action-bar">
+  <div class="action-bar" data-smrt-component="ActionBar">
     <div class="action-bar__left">
       <span class="action-bar__count">{count} selected</span>
       <Button
@@ -116,14 +116,16 @@ const count = $derived(selectedAssets.length);
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .action-bar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--smrt-spacing-3, 0.75rem);
     padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-4, 1rem);
-    background: var(--smrt-color-primary-container, #dbeafe);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background: var(--smrt-color-primary-container);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
     animation: slideDown 200ms ease;
   }
 
@@ -141,7 +143,7 @@ const count = $derived(selectedAssets.length);
   .action-bar__count {
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-primary-container, #002d6c);
+    color: var(--smrt-color-on-primary-container);
   }
 
   .action-bar__actions {
@@ -155,4 +157,5 @@ const count = $derived(selectedAssets.length);
       animation: none;
     }
   }
+}
 </style>

package/dist/svelte/AssetDetail.svelte

@@ -309,6 +309,8 @@ function formatDate(date: Date | string | undefined): string {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /* Body — negative margin cancels Modal's .modal__body padding so the section
      dividers stay full-bleed (Modal owns the dialog shell + scroll container). */
   .detail__body {
@@ -317,7 +319,7 @@ function formatDate(date: Date | string | undefined): string {
 
   .detail__section {
     padding: var(--smrt-spacing-4, 1rem) var(--smrt-spacing-5, 1.25rem);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #f3f4f6);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .detail__section:last-child {
@@ -327,7 +329,7 @@ function formatDate(date: Date | string | undefined): string {
   .section-heading {
     margin: 0 0 var(--smrt-spacing-3, 0.75rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     text-transform: uppercase;
     letter-spacing: var(--smrt-typography-label-medium-tracking, 0.05em);
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
@@ -337,7 +339,7 @@ function formatDate(date: Date | string | undefined): string {
   .detail__preview {
     border-radius: var(--smrt-radius-medium, 0.5rem);
     overflow: hidden;
-    background: var(--smrt-color-surface-container-low, #f9fafb);
+    background: var(--smrt-color-surface-container-low);
   }
 
   .preview-image {
@@ -372,7 +374,7 @@ function formatDate(date: Date | string | undefined): string {
   }
 
   .preview-document__link {
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
     font-weight: var(--smrt-typography-weight-medium, 500);
     text-decoration: none;
   }
@@ -383,7 +385,7 @@ function formatDate(date: Date | string | undefined): string {
 
   .preview-generic__mime {
     font-size: var(--smrt-typography-body-small-size, 0.8rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   /* Form */
@@ -402,14 +404,14 @@ function formatDate(date: Date | string | undefined): string {
   .form-label {
     font-size: var(--smrt-typography-label-medium-size, 0.8rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
   }
 
   .label-warning {
     font-weight: var(--smrt-typography-weight-normal, 400);
     font-size: var(--smrt-typography-label-small-size, 0.7rem);
-    color: var(--smrt-color-error, #dc2626);
-    margin-left: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-error);
+    margin-left: var(--smrt-spacing-1);
   }
 
   /* Metadata */
@@ -422,7 +424,7 @@ function formatDate(date: Date | string | undefined): string {
   .metadata-item {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .metadata-label {
@@ -430,12 +432,12 @@ function formatDate(date: Date | string | undefined): string {
     font-weight: var(--smrt-typography-weight-semibold, 600);
     text-transform: uppercase;
     letter-spacing: var(--smrt-typography-label-small-tracking, 0.05em);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .metadata-value {
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     word-break: break-word;
   }
 
@@ -450,25 +452,25 @@ function formatDate(date: Date | string | undefined): string {
      bespoke bordered-surface look (vs. the transparent ghost variant), so the
      overrides reach the child-rendered <button> through :global() scoping. */
   .quick-actions :global(.quick-btn) {
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     height: 32px;
     padding: 0 var(--smrt-spacing-3, 0.75rem);
     font-size: var(--smrt-typography-label-medium-size, 0.8rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
-    background: var(--smrt-color-surface, #ffffff);
-    color: var(--smrt-color-on-surface, #111827);
+    border: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
   }
 
   .quick-actions :global(.quick-btn:hover:not(:disabled)) {
-    background: var(--smrt-color-surface-container-low, #f9fafb);
+    background: var(--smrt-color-surface-container-low);
     box-shadow: var(--smrt-elevation-1);
   }
 
   .copy-feedback {
     margin-top: var(--smrt-spacing-2, 0.5rem);
     font-size: var(--smrt-typography-label-medium-size, 0.8rem);
-    color: var(--smrt-color-success, #22c55e);
+    color: var(--smrt-color-success);
     font-weight: var(--smrt-typography-weight-medium, 500);
     animation: fadeIn 150ms ease;
   }
@@ -499,4 +501,5 @@ function formatDate(date: Date | string | undefined): string {
     display: flex;
     gap: var(--smrt-spacing-2, 0.5rem);
   }
+}
 </style>

package/dist/svelte/AssetGrid.svelte

@@ -79,7 +79,7 @@ function getAltText(asset: PersistedAsset): string {
 }
 </script>
 
-<div class="asset-grid" class:asset-grid--loading={loading}>
+<div class="asset-grid" class:asset-grid--loading={loading} data-smrt-component="AssetGrid">
   {#if loading}
     <div class="asset-grid__loading">
       <span class="spinner"></span>
@@ -165,6 +165,8 @@ function getAltText(asset: PersistedAsset): string {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .asset-grid {
     padding: var(--smrt-spacing-4, 1rem);
   }
@@ -185,8 +187,8 @@ function getAltText(asset: PersistedAsset): string {
     position: relative;
     display: flex;
     flex-direction: column;
-    background: var(--smrt-color-surface, #ffffff);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     overflow: hidden;
     cursor: pointer;
@@ -215,14 +217,14 @@ function getAltText(asset: PersistedAsset): string {
   }
 
   .asset-card__open:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     /* Inset so the card's `overflow: hidden` doesn't clip the focus ring. */
     outline-offset: -2px;
   }
 
   .asset-card--selected {
-    border-color: var(--smrt-color-primary, #005ac1);
-    background: var(--smrt-color-primary-container, #dbeafe);
+    border-color: var(--smrt-color-primary);
+    background: var(--smrt-color-primary-container);
   }
 
   /* Checkbox */
@@ -244,7 +246,7 @@ function getAltText(asset: PersistedAsset): string {
     width: 18px;
     height: 18px;
     cursor: pointer;
-    accent-color: var(--smrt-color-primary, #005ac1);
+    accent-color: var(--smrt-color-primary);
   }
 
   /* Thumbnail */
@@ -253,7 +255,7 @@ function getAltText(asset: PersistedAsset): string {
     align-items: center;
     justify-content: center;
     height: 140px;
-    background: var(--smrt-color-surface-container-low, #f9fafb);
+    background: var(--smrt-color-surface-container-low);
     overflow: hidden;
   }
 
@@ -276,7 +278,7 @@ function getAltText(asset: PersistedAsset): string {
     display: block;
     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);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -286,13 +288,13 @@ function getAltText(asset: PersistedAsset): string {
     display: flex;
     align-items: center;
     gap: var(--smrt-spacing-1, 0.25rem);
-    margin-top: var(--smrt-spacing-1, 4px);
+    margin-top: var(--smrt-spacing-1);
   }
 
   .asset-card__type {
     font-size: var(--smrt-typography-label-small-size, 0.7rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     text-transform: uppercase;
     letter-spacing: var(--smrt-typography-label-small-tracking, 0.05em);
   }
@@ -302,7 +304,7 @@ function getAltText(asset: PersistedAsset): string {
     position: absolute;
     top: var(--smrt-spacing-2, 0.5rem);
     right: var(--smrt-spacing-2, 0.5rem);
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
     font-size: var(--smrt-typography-label-small-size, 0.65rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
     border-radius: var(--smrt-radius-small, 0.25rem);
@@ -313,8 +315,8 @@ function getAltText(asset: PersistedAsset): string {
   }
 
   .asset-card__badge--warning {
-    background: var(--smrt-color-error-container, #fef2f2);
-    color: var(--smrt-color-on-error-container, #991b1b);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
   }
 
   /* Loading */
@@ -324,15 +326,15 @@ function getAltText(asset: PersistedAsset): string {
     justify-content: center;
     gap: var(--smrt-spacing-2, 0.5rem);
     padding: var(--smrt-spacing-8, 2rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .spinner {
     width: 20px;
     height: 20px;
-    border: 2px solid var(--smrt-color-outline-variant, #e5e7eb);
-    border-top-color: var(--smrt-color-primary, #005ac1);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border: 2px solid var(--smrt-color-outline-variant);
+    border-top-color: var(--smrt-color-primary);
+    border-radius: var(--smrt-radius-full);
     animation: spin 0.8s linear infinite;
   }
 
@@ -356,4 +358,5 @@ function getAltText(asset: PersistedAsset): string {
       height: 100px;
     }
   }
+}
 </style>

package/dist/svelte/AssetList.svelte

@@ -106,7 +106,7 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
 }
 </script>
 
-<div class="asset-list" class:asset-list--loading={loading}>
+<div class="asset-list" class:asset-list--loading={loading} data-smrt-component="AssetList">
   <table class="list-table">
     <thead class="list-table__head">
       <tr>
@@ -221,6 +221,8 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .asset-list {
     overflow-x: auto;
   }
@@ -234,15 +236,15 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     width: 100%;
     border-collapse: collapse;
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
   }
 
   .list-table__head {
-    background: var(--smrt-color-surface-container, #f3f4f6);
+    background: var(--smrt-color-surface-container);
   }
 
   .list-table__head tr {
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .list-table__head th {
@@ -250,20 +252,21 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     text-align: left;
     font-weight: var(--smrt-typography-weight-semibold, 600);
     white-space: nowrap;
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
   }
 
   .list-table__row {
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
     transition: background 150ms ease;
   }
 
   .list-table__row:hover {
-    background: var(--smrt-color-surface-container-low, #f9fafb);
+    background: var(--smrt-color-surface-container-low);
   }
 
-  .list-table__row--selected {
-    background: var(--smrt-color-primary-container, #dbeafe) !important;
+  /* Doubled class: ties :hover above on specificity and wins by source order. */
+  .list-table__row.list-table__row--selected {
+    background: var(--smrt-color-primary-container);
   }
 
   .list-table__row td {
@@ -280,7 +283,7 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     width: 16px;
     height: 16px;
     cursor: pointer;
-    accent-color: var(--smrt-color-primary, #005ac1);
+    accent-color: var(--smrt-color-primary);
   }
 
   .col-thumb {
@@ -300,11 +303,11 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     justify-content: center;
     width: 40px;
     height: 40px;
-    background: var(--smrt-color-surface-container, #f3f4f6);
+    background: var(--smrt-color-surface-container);
     border-radius: var(--smrt-radius-small, 0.25rem);
     font-size: var(--smrt-typography-label-small-size, 0.6rem);
     font-weight: var(--smrt-typography-weight-bold, 700);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .col-name {
@@ -340,7 +343,7 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
   .row-desc {
     display: block;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -349,19 +352,19 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
 
   .type-badge {
     display: inline-block;
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
     font-size: var(--smrt-typography-label-small-size, 0.65rem);
     font-weight: var(--smrt-typography-weight-bold, 700);
     text-transform: uppercase;
-    background: var(--smrt-color-surface-container, #f3f4f6);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface-variant);
     border-radius: var(--smrt-radius-small, 0.25rem);
     letter-spacing: var(--smrt-typography-label-small-tracking, 0.05em);
   }
 
   .col-date {
     white-space: nowrap;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .col-status {
@@ -373,20 +376,20 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     display: inline-block;
     width: 8px;
     height: 8px;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-outline, #9ca3af);
-    margin-right: var(--smrt-spacing-1, 4px);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-outline);
+    margin-right: var(--smrt-spacing-1);
     vertical-align: middle;
   }
 
   .status-dot--active {
-    background: var(--smrt-color-success, #22c55e);
+    background: var(--smrt-color-success);
   }
 
   /* Sort — renders via <Button class="sort-btn"> (issue #1589). Overrides reset
      it to an inline header-text button and reach the child <button> via :global(). */
   .list-table__head :global(.sort-btn) {
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     padding: 0;
     border: none;
     background: transparent;
@@ -396,7 +399,7 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
   }
 
   .list-table__head :global(.sort-btn:hover) {
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
   }
 
   .sort-indicator {
@@ -411,15 +414,15 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     justify-content: center;
     gap: var(--smrt-spacing-2, 0.5rem);
     padding: var(--smrt-spacing-8, 2rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .spinner {
     width: 20px;
     height: 20px;
-    border: 2px solid var(--smrt-color-outline-variant, #e5e7eb);
-    border-top-color: var(--smrt-color-primary, #005ac1);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border: 2px solid var(--smrt-color-outline-variant);
+    border-top-color: var(--smrt-color-primary);
+    border-radius: var(--smrt-radius-full);
     animation: spin 0.8s linear infinite;
   }
 
@@ -432,4 +435,5 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
       animation: none;
     }
   }
+}
 </style>

package/dist/svelte/AssetManager.svelte

@@ -251,7 +251,7 @@ function handleManagerDrop(event: DragEvent) {
   onpaste={handlePaste}
   ondragover={handleManagerDragOver}
   ondragleave={handleManagerDragLeave}
-  ondrop={handleManagerDrop}
+  ondrop={handleManagerDrop} data-smrt-component="AssetManager"
 >
   {#if actionError}
     <p class="asset-manager__error" role="alert" aria-live="assertive">
@@ -349,12 +349,14 @@ function handleManagerDrop(event: DragEvent) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .asset-manager__error {
     margin: 0 0 var(--smrt-spacing-2, 0.5rem);
     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);
   }
 
@@ -364,15 +366,15 @@ function handleManagerDrop(event: DragEvent) {
     flex-direction: column;
     height: 100%;
     min-height: 400px;
-    background: var(--smrt-color-surface, #ffffff);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-large, 0.75rem);
     overflow: hidden;
     font-family: var(--smrt-font-family, inherit);
   }
 
   .asset-manager--drag-over {
-    border-color: var(--smrt-color-primary, #005ac1);
+    border-color: var(--smrt-color-primary);
   }
 
   .asset-manager__content {
@@ -388,7 +390,7 @@ function handleManagerDrop(event: DragEvent) {
     align-items: center;
     justify-content: center;
     background: color-mix(in srgb, var(--smrt-color-primary) 8%, transparent);
-    border: 2px dashed var(--smrt-color-primary, #005ac1);
+    border: 2px dashed var(--smrt-color-primary);
     border-radius: var(--smrt-radius-large, 0.75rem);
     z-index: 10;
     pointer-events: none;
@@ -399,7 +401,7 @@ function handleManagerDrop(event: DragEvent) {
     flex-direction: column;
     align-items: center;
     gap: var(--smrt-spacing-2, 0.5rem);
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
@@ -407,4 +409,5 @@ function handleManagerDrop(event: DragEvent) {
     margin: 0;
     font-size: var(--smrt-typography-body-large-size, 1.1rem);
   }
+}
 </style>