@happyvertical/smrt-assets 0.34.5 → 0.34.7

package/dist/manifest.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
-  "timestamp": 1782261266180,
+  "timestamp": 1782290126880,
   "packageName": "@happyvertical/smrt-assets",
-  "packageVersion": "0.34.5",
+  "packageVersion": "0.34.7",
   "objects": {
     "@happyvertical/smrt-assets:AssetAssociation": {
       "name": "assetassociation",

package/dist/smrt-knowledge.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-06-24T00:34:27.319Z",
+  "generatedAt": "2026-06-24T08:35:27.278Z",
   "packageName": "@happyvertical/smrt-assets",
-  "packageVersion": "0.34.5",
+  "packageVersion": "0.34.7",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "ab0e3eae0ead7cb064b3c7c0ca97f06e41566cabec46c969292bfbe889f40066",
-    "packageJson": "4c41e96836ea11748a47b472f126dda15a4f67dff18751cf4d833b45ee3fd358",
+    "manifest": "3eeb0753f504c9d471c1a82b87d300736bd7ce3e31f7080328cab84146365aa8",
+    "packageJson": "3db257c374c45bad45521f65b910648b3b41fb02b4f132fa9534702cd586681e",
     "agents": "a034545874fb7767b31168d98aa2b1b8cac205b14f2f04fb5a8e5acf33690eef"
   },
   "exports": [

package/dist/svelte/ActionBar.svelte

@@ -8,6 +8,7 @@
 
 import { ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from './i18n.js';
 import type { ActionBarProps } from './types';
 
@@ -56,34 +57,33 @@ const count = $derived(selectedAssets.length);
   <div class="action-bar">
     <div class="action-bar__left">
       <span class="action-bar__count">{count} selected</span>
-      <button
-        type="button"
-        class="action-bar__clear"
+      <Button
+        variant="ghost"
+        size="sm"
         onclick={() => (onclearselection ?? onClearSelection)()}
       >
         Clear
-      </button>
+      </Button>
     </div>
 
     <div class="action-bar__actions">
       {#each customActions as ca (ca.label)}
         {#if ca.multi !== false || count === 1}
-          <button
-            type="button"
-            class="action-btn"
-            class:action-btn--destructive={ca.destructive}
+          <Button
+            variant={ca.destructive ? 'danger' : 'secondary'}
+            size="sm"
             onclick={() => handleCustomAction(ca.action)}
           >
             {#if ca.icon}
               {@render ca.icon()}
             {/if}
             {ca.label}
-          </button>
+          </Button>
         {/if}
       {/each}
 
       <!-- Default: Delete -->
-      <button type="button" class="action-btn action-btn--destructive" onclick={handleDelete}>
+      <Button variant="danger" size="sm" onclick={handleDelete}>
         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <polyline points="3 6 5 6 21 6"></polyline>
           <path d="M19 6l-2 14H7L5 6"></path>
@@ -92,7 +92,7 @@ const count = $derived(selectedAssets.length);
           <path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"></path>
         </svg>
         Delete
-      </button>
+      </Button>
     </div>
   </div>
 
@@ -144,57 +144,12 @@ const count = $derived(selectedAssets.length);
     color: var(--smrt-color-on-primary-container, #002d6c);
   }
 
-  .action-bar__clear {
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
-    border: none;
-    background: transparent;
-    font-family: inherit;
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-primary, #005ac1);
-    cursor: pointer;
-    border-radius: var(--smrt-radius-small, 0.25rem);
-  }
-
-  .action-bar__clear:hover {
-    background: color-mix(in srgb, var(--smrt-color-shadow) 5%, transparent);
-  }
-
   .action-bar__actions {
     display: flex;
     align-items: center;
     gap: var(--smrt-spacing-2, 0.5rem);
   }
 
-  .action-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
-    height: 32px;
-    padding: 0 var(--smrt-spacing-3, 0.75rem);
-    font-family: inherit;
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    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-radius: var(--smrt-radius-medium, 0.5rem);
-    cursor: pointer;
-    transition: all 150ms ease;
-  }
-
-  .action-btn:hover {
-    box-shadow: var(--smrt-elevation-1, 0 1px 2px rgba(0,0,0,0.05));
-  }
-
-  .action-btn--destructive {
-    border-color: var(--smrt-color-error, #dc2626);
-    color: var(--smrt-color-error, #dc2626);
-  }
-
-  .action-btn--destructive:hover {
-    background: var(--smrt-color-error-container, #fef2f2);
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .action-bar {
       animation: none;

package/dist/svelte/ActionBar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/ActionBar.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAmG9C,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ActionBar.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/ActionBar.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAoG9C,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/AssetDetail.svelte

@@ -7,6 +7,7 @@
  */
 
 import { Modal } from '@happyvertical/smrt-ui/feedback';
+import { Input, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import type { Snippet } from 'svelte';
@@ -202,7 +203,7 @@ function formatDate(date: Date | string | undefined): string {
           <div class="detail__form">
             <div class="form-field">
               <label for="detail-name" class="form-label">Name</label>
-              <input id="detail-name" type="text" class="form-input" bind:value={editName} />
+              <Input id="detail-name" type="text" bind:value={editName} />
             </div>
 
             {#if isImage}
@@ -213,13 +214,13 @@ function formatDate(date: Date | string | undefined): string {
                     <span class="label-warning">{t(M['assets.asset_detail.alt_text_missing_warning'])}</span>
                   {/if}
                 </label>
-                <input id="detail-alt" type="text" class="form-input" bind:value={editAlt} placeholder={t(M['assets.asset_detail.alt_text_placeholder'])} />
+                <Input id="detail-alt" type="text" bind:value={editAlt} placeholder={t(M['assets.asset_detail.alt_text_placeholder'])} />
               </div>
             {/if}
 
             <div class="form-field">
               <label for="detail-desc" class="form-label">Description</label>
-              <textarea id="detail-desc" class="form-textarea" bind:value={editDescription} rows="3" placeholder={t(M['assets.asset_detail.description_placeholder'])}></textarea>
+              <Textarea id="detail-desc" bind:value={editDescription} rows={3} placeholder={t(M['assets.asset_detail.description_placeholder'])} />
             </div>
           </div>
         </section>
@@ -261,18 +262,18 @@ function formatDate(date: Date | string | undefined): string {
         <section class="detail__section">
           <h3 class="section-heading">{t(M['assets.asset_detail.quick_actions'])}</h3>
           <div class="quick-actions">
-            <button type="button" class="quick-btn" onclick={copyUrl} disabled={!asset.sourceUri}>
+            <Button variant="ghost" size="sm" class="quick-btn" onclick={copyUrl} disabled={!asset.sourceUri}>
               {t(M['assets.asset_detail.copy_url'])}
-            </button>
+            </Button>
             {#if isImage}
-              <button type="button" class="quick-btn" onclick={copyMarkdown} disabled={!asset.sourceUri}>
+              <Button variant="ghost" size="sm" class="quick-btn" onclick={copyMarkdown} disabled={!asset.sourceUri}>
                 {t(M['assets.asset_detail.copy_markdown'])}
-              </button>
+              </Button>
             {/if}
             {#if onedit && isImage}
-              <button type="button" class="quick-btn" onclick={handleEdit}>
+              <Button variant="ghost" size="sm" class="quick-btn" onclick={handleEdit}>
                 {t(M['assets.asset_detail.edit_image'])}
-              </button>
+              </Button>
             {/if}
           </div>
           <div class="copy-feedback" role="status" aria-live="polite">{copyFeedback}</div>
@@ -405,29 +406,6 @@ function formatDate(date: Date | string | undefined): string {
     margin-left: var(--smrt-spacing-1, 4px);
   }
 
-  .form-input, .form-textarea {
-    width: 100%;
-    padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
-    border-radius: var(--smrt-radius-medium, 0.5rem);
-    font-family: inherit;
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface, #111827);
-    background: var(--smrt-color-surface, #ffffff);
-    box-sizing: border-box;
-  }
-
-  .form-input:focus, .form-textarea:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-    box-shadow: 0 0 0 2px var(--smrt-color-primary-container, rgba(0, 90, 193, 0.1));
-  }
-
-  .form-textarea {
-    resize: vertical;
-    min-height: 60px;
-  }
-
   /* Metadata */
   .metadata-grid {
     display: grid;
@@ -462,33 +440,25 @@ function formatDate(date: Date | string | undefined): string {
     gap: var(--smrt-spacing-2, 0.5rem);
   }
 
-  .quick-btn {
-    display: inline-flex;
-    align-items: center;
+  /* The quick-action buttons render via <Button> (issue #1589). They keep a
+     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);
     height: 32px;
     padding: 0 var(--smrt-spacing-3, 0.75rem);
-    font-family: inherit;
     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-radius: var(--smrt-radius-medium, 0.5rem);
-    cursor: pointer;
-    transition: all 150ms ease;
   }
 
-  .quick-btn:hover:not(:disabled) {
+  .quick-actions :global(.quick-btn:hover:not(:disabled)) {
     background: var(--smrt-color-surface-container-low, #f9fafb);
     box-shadow: var(--smrt-elevation-1);
   }
 
-  .quick-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   .copy-feedback {
     margin-top: var(--smrt-spacing-2, 0.5rem);
     font-size: var(--smrt-typography-label-medium-size, 0.8rem);

package/dist/svelte/AssetDetail.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetDetail.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/AssetDetail.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B,sCAAsC;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,MAAM,CAAC,EAAE,CACP,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,kBAAkB,KACxB,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,CACP,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,kBAAkB,KACxB,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,wCAAwC;IACxC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CACpD;AAqQD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"AssetDetail.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/AssetDetail.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B,sCAAsC;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,MAAM,CAAC,EAAE,CACP,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,kBAAkB,KACxB,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,CACP,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,kBAAkB,KACxB,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,wCAAwC;IACxC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CACpD;AAsQD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/AssetGrid.svelte

@@ -107,6 +107,7 @@ function getAltText(asset: PersistedAsset): string {
                inside an interactive control (axe nested-interactive). It sits
                above the non-interactive content but below the checkbox (z-index),
                and is keyboard-activatable natively (Enter/Space). -->
+          <!-- raw-primitive-allow: stretched transparent click-catching card overlay positioned absolute inset 0, layered under the checkbox by z-index; not a styled action button -->
           <button
             type="button"
             class="asset-card__open"
@@ -118,6 +119,7 @@ function getAltText(asset: PersistedAsset): string {
 
           <!-- Selection checkbox -->
           <div class="asset-card__checkbox">
+            <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
             <input
               type="checkbox"
               checked={selected}

package/dist/svelte/AssetGrid.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetGrid.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/AssetGrid.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,SAAS,CAAC;AA+I9D,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AssetGrid.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/AssetGrid.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,SAAS,CAAC;AAiJ9D,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/AssetList.svelte

@@ -7,6 +7,7 @@
  */
 
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from './i18n.js';
 import type {
   AssetListProps,
@@ -110,6 +111,7 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     <thead class="list-table__head">
       <tr>
         <th class="col-checkbox">
+          <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
           <input
             type="checkbox"
             checked={allSelected}
@@ -120,15 +122,15 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
         </th>
         <th class="col-thumb">Preview</th>
         <th class="col-name">
-          <button type="button" class="sort-btn" onclick={() => handleSort('name')}>
+          <Button variant="ghost" size="sm" class="sort-btn" onclick={() => handleSort('name')}>
             Name <span class="sort-indicator">{getSortIndicator('name')}</span>
-          </button>
+          </Button>
         </th>
         <th class="col-type">Type</th>
         <th class="col-date">
-          <button type="button" class="sort-btn" onclick={() => handleSort('createdAt')}>
+          <Button variant="ghost" size="sm" class="sort-btn" onclick={() => handleSort('createdAt')}>
             Created <span class="sort-indicator">{getSortIndicator('createdAt')}</span>
-          </button>
+          </Button>
         </th>
         <th class="col-status">Status</th>
       </tr>
@@ -170,6 +172,7 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
             class:list-table__row--selected={selected}
           >
             <td class="col-checkbox">
+              <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
               <input
                 type="checkbox"
                 checked={selected}
@@ -187,15 +190,15 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
             </td>
             <td class="col-name">
               <!-- The name is the row's open action (a button, not a
-                   role="button" on the <tr> nesting the checkbox → avoids axe
+                   role="button" on the row nesting the checkbox, which avoids axe
                    nested-interactive). -->
-              <button
-                type="button"
+              <Button
+                variant="ghost"
                 class="row-name"
                 onclick={() => onAssetClick(asset)}
               >
                 {asset.name || 'Untitled'}
-              </button>
+              </Button>
               {#if asset.description}
                 <span class="row-desc">{asset.description}</span>
               {/if}
@@ -308,7 +311,10 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     min-width: 150px;
   }
 
-  .row-name {
+  /* The row name renders via <Button class="row-name"> (issue #1589). The
+     overrides reset it to inline name text and must reach the child-rendered
+     <button> through :global() scoping. */
+  .col-name :global(.row-name) {
     display: block;
     font-weight: var(--smrt-typography-weight-medium, 500);
     white-space: nowrap;
@@ -327,16 +333,10 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     cursor: pointer;
   }
 
-  .row-name:hover {
+  .col-name :global(.row-name:hover) {
     text-decoration: underline;
   }
 
-  .row-name:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: 2px;
-    border-radius: var(--smrt-radius-small, 0.25rem);
-  }
-
   .row-desc {
     display: block;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
@@ -383,10 +383,9 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     background: var(--smrt-color-success, #22c55e);
   }
 
-  /* Sort */
-  .sort-btn {
-    display: inline-flex;
-    align-items: center;
+  /* 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);
     padding: 0;
     border: none;
@@ -394,10 +393,9 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
     font: inherit;
     font-weight: var(--smrt-typography-weight-semibold, 600);
     color: inherit;
-    cursor: pointer;
   }
 
-  .sort-btn:hover {
+  .list-table__head :global(.sort-btn:hover) {
     color: var(--smrt-color-primary, #005ac1);
   }
 

package/dist/svelte/AssetList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetList.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/AssetList.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,cAAc,EAIf,MAAM,SAAS,CAAC;AAkMjB,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AssetList.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/AssetList.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,cAAc,EAIf,MAAM,SAAS,CAAC;AAqMjB,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/AssetToolbar.svelte

@@ -7,7 +7,9 @@ import { onDestroy } from 'svelte';
  * and an upload button.
  */
 
+import { Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from './i18n.js';
 import type {
   AssetFilters,
@@ -107,7 +109,7 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
           <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
         </svg>
       </span>
-      <input
+      <Input
         type="search"
         class="search-field"
         placeholder={t(M['assets.asset_toolbar.search_placeholder'])}
@@ -116,42 +118,41 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
         aria-label={t(M['assets.asset_toolbar.search_assets'])}
       />
       {#if searchValue}
-        <button type="button" class="search-clear" onclick={handleClearSearch} aria-label={t(M['assets.asset_toolbar.clear_search'])}>
+        <Button variant="ghost" size="sm" class="search-clear" onclick={handleClearSearch} aria-label={t(M['assets.asset_toolbar.clear_search'])}>
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <line x1="18" y1="6" x2="6" y2="18"></line>
             <line x1="6" y1="6" x2="18" y2="18"></line>
           </svg>
-        </button>
+        </Button>
       {/if}
     </div>
 
     <!-- Type Filter -->
-    <select class="asset-toolbar__select" value={typeValue} onchange={handleTypeFilter} aria-label={t(M['assets.asset_toolbar.filter_by_type'])}>
+    <Select class="asset-toolbar__select" value={typeValue} onchange={handleTypeFilter} aria-label={t(M['assets.asset_toolbar.filter_by_type'])}>
       <option value="">{t(M['assets.asset_toolbar.all_types'])}</option>
       <option value="image">Images</option>
       <option value="video">Videos</option>
       <option value="document">Documents</option>
       <option value="audio">Audio</option>
-    </select>
+    </Select>
 
     <!-- Sort -->
-    <select class="asset-toolbar__select" value={sortValue} onchange={handleSortChange} aria-label={t(M['assets.asset_toolbar.sort_assets'])}>
+    <Select class="asset-toolbar__select" value={sortValue} onchange={handleSortChange} aria-label={t(M['assets.asset_toolbar.sort_assets'])}>
       <option value="createdAt:desc">{t(M['assets.asset_toolbar.newest_first'])}</option>
       <option value="createdAt:asc">{t(M['assets.asset_toolbar.oldest_first'])}</option>
       <option value="name:asc">{t(M['assets.asset_toolbar.name_a_z'])}</option>
       <option value="name:desc">{t(M['assets.asset_toolbar.name_z_a'])}</option>
       <option value="updatedAt:desc">{t(M['assets.asset_toolbar.recently_updated'])}</option>
-    </select>
+    </Select>
   </div>
 
   <div class="asset-toolbar__right">
     <!-- View Toggle -->
     <div class="view-toggle" role="group" aria-label={t(M['assets.asset_toolbar.view_mode'])}>
       {#each views as v (v.key)}
-        <button
-          type="button"
+        <Button
+          variant={view === v.key ? 'primary' : 'ghost'}
           class="view-toggle__btn"
-          class:view-toggle__btn--active={view === v.key}
           onclick={() => (onviewchange ?? onViewChange)(v.key)}
           aria-label={t(M['assets.asset_toolbar.view_label'], { label: v.label })}
           aria-pressed={view === v.key}
@@ -173,13 +174,13 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
               <line x1="3" y1="18" x2="3.01" y2="18"></line>
             </svg>
           {/if}
-        </button>
+        </Button>
       {/each}
     </div>
 
     <!-- Upload Button -->
-    <button
-      type="button"
+    <Button
+      variant="primary"
       class="upload-btn"
       onclick={() => (onupload ?? onUpload)()}
     >
@@ -189,7 +190,7 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
         <line x1="12" y1="3" x2="12" y2="15"></line>
       </svg>
       Upload
-    </button>
+    </Button>
   </div>
 </div>
 
@@ -247,10 +248,16 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
     color: var(--smrt-color-on-surface-variant, #6b7280);
   }
 
-  .search-field {
+  /* The search field renders via <Input class="search-field"> (issue #1589). It
+     sits inside the bordered .asset-toolbar__search shell, so the overrides strip
+     the primitive's own border/background/box-shadow to keep it transparent and
+     reach the child <input> through :global() scoping. */
+  .asset-toolbar__search :global(.search-field) {
     flex: 1;
     border: none;
+    border-radius: 0;
     background: transparent;
+    box-shadow: none;
     padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-2, 0.5rem);
     font-family: inherit;
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
@@ -259,18 +266,23 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
     min-width: 0;
   }
 
-  .search-field::placeholder {
+  .asset-toolbar__search :global(.search-field:focus) {
+    border: none;
+    box-shadow: none;
+  }
+
+  .asset-toolbar__search :global(.search-field::placeholder) {
     color: var(--smrt-color-on-surface-variant, #9ca3af);
   }
 
-  .search-field::-webkit-search-cancel-button {
+  .asset-toolbar__search :global(.search-field::-webkit-search-cancel-button) {
     display: none;
   }
 
-  .search-clear {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  /* search-clear renders via <Button class="search-clear"> (issue #1589). The
+     overrides shape it into a small round icon button and reach the child
+     <button> via :global() scoping. */
+  .asset-toolbar__search :global(.search-clear) {
     width: 24px;
     height: 24px;
     margin-right: var(--smrt-spacing-1, 0.25rem);
@@ -278,20 +290,23 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
     border: none;
     background: transparent;
     color: var(--smrt-color-on-surface-variant, #6b7280);
-    cursor: pointer;
     border-radius: var(--smrt-radius-full, 9999px);
   }
 
-  .search-clear:hover {
+  .asset-toolbar__search :global(.search-clear:hover) {
     color: var(--smrt-color-on-surface, #111827);
     background: var(--smrt-color-surface-container, #f3f4f6);
   }
 
-  /* Selects */
-  .asset-toolbar__select {
+  /* Selects render via <Select class="asset-toolbar__select"> (issue #1589). The
+     base .select primitive owns the chevron + focus ring; these overrides pin the
+     toolbar-matching 36px height, container-low fill, and width, and reach the
+     child <select> through :global() scoping. */
+  .asset-toolbar__left :global(.asset-toolbar__select) {
+    width: auto;
     height: 36px;
-    padding: 0 var(--smrt-spacing-3, 0.75rem);
-    background: var(--smrt-color-surface-container-low, #f9fafb);
+    padding: 0 var(--smrt-spacing-8, 2rem) 0 var(--smrt-spacing-3, 0.75rem);
+    background-color: var(--smrt-color-surface-container-low, #f9fafb);
     border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     font-family: inherit;
@@ -300,11 +315,6 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
     cursor: pointer;
   }
 
-  .asset-toolbar__select:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-  }
-
   /* View Toggle */
   .view-toggle {
     display: flex;
@@ -313,58 +323,32 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
     overflow: hidden;
   }
 
-  .view-toggle__btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  /* view-toggle__btn renders via <Button> (issue #1589); the active state is the
+     `primary` variant, the inactive state the `ghost` variant. These overrides
+     give the buttons their square icon footprint and the segmented divider, and
+     reach the child <button> via :global() scoping. */
+  .view-toggle :global(.view-toggle__btn) {
     width: 36px;
     height: 36px;
     padding: 0;
     border: none;
-    background: var(--smrt-color-surface, #ffffff);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
-    cursor: pointer;
-    transition: all 150ms ease;
+    border-radius: 0;
   }
 
-  .view-toggle__btn:not(:last-child) {
+  .view-toggle :global(.view-toggle__btn:not(:last-child)) {
     border-right: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
   }
 
-  .view-toggle__btn:hover {
-    background: var(--smrt-color-surface-container-low, #f9fafb);
-  }
-
-  .view-toggle__btn--active {
-    background: var(--smrt-color-primary-container, #dbeafe);
-    color: var(--smrt-color-on-primary-container, #002d6c);
-  }
-
-  /* Upload Button */
-  .upload-btn {
-    display: inline-flex;
-    align-items: center;
+  /* Upload Button — renders via <Button variant="primary" class="upload-btn">
+     (issue #1589). The primary variant owns the fill/hover; the override only
+     pins the toolbar-matching 36px height and gap, reaching the child <button>
+     via :global() scoping. */
+  .asset-toolbar__right :global(.upload-btn) {
     gap: var(--smrt-spacing-1, 0.25rem);
     height: 36px;
     padding: 0 var(--smrt-spacing-3, 0.75rem);
-    font-family: inherit;
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-primary, #ffffff);
-    background: var(--smrt-color-primary, #005ac1);
-    border: none;
-    border-radius: var(--smrt-radius-medium, 0.5rem);
-    cursor: pointer;
-    transition: box-shadow 150ms ease;
-  }
-
-  .upload-btn:hover {
-    box-shadow: var(--smrt-elevation-2, 0 1px 3px rgba(0,0,0,0.1));
-  }
-
-  .upload-btn:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: 2px;
   }
 
   @media (max-width: 640px) {

package/dist/svelte/AssetToolbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/AssetToolbar.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAIV,iBAAiB,EAElB,MAAM,SAAS,CAAC;AA4KjB,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AssetToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/AssetToolbar.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAIV,iBAAiB,EAElB,MAAM,SAAS,CAAC;AA8KjB,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/CreateAssetModal.svelte

@@ -12,6 +12,7 @@
 // entire smrt-svelte surface — including optional peers like smrt-agents /
 // smrt-users — just to compile this modal.
 import { Modal } from '@happyvertical/smrt-ui/feedback';
+import { Input, 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';
@@ -167,6 +168,7 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
           </svg>
           <p class="dropzone__text">{t(M['assets.create_asset_modal.dropzone_text'])}</p>
           <p class="dropzone__hint">{t(M['assets.create_asset_modal.dropzone_hint'])}</p>
+          <!-- raw-primitive-allow: hidden native file input behind the custom drop zone, triggered programmatically; styled Input is unwanted here (visually hidden, opened via the dropzone click/keydown) -->
           <input id="file-input" type="file" class="dropzone__input" onchange={handleFileSelect} />
         </div>
       {:else}
@@ -184,20 +186,20 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
               <span class="file-preview__warning">{t(M['assets.create_asset_modal.large_file_warning'])}</span>
             {/if}
           </div>
-          <button type="button" class="file-preview__remove" onclick={() => { file = null; }} aria-label={t(M['assets.create_asset_modal.remove_file'])}>
+          <Button variant="ghost" size="sm" class="file-preview__remove" onclick={() => { file = null; }} aria-label={t(M['assets.create_asset_modal.remove_file'])}>
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
+          </Button>
         </div>
 
         <div class="form-fields">
           <div class="form-field">
             <label for="asset-name" class="form-label">Name</label>
-            <input id="asset-name" type="text" class="form-input" bind:value={name} placeholder={t(M['assets.create_asset_modal.name_placeholder'])} />
+            <Input id="asset-name" type="text" bind:value={name} placeholder={t(M['assets.create_asset_modal.name_placeholder'])} />
           </div>
 
           <div class="form-field">
             <label for="asset-desc" class="form-label">Description</label>
-            <textarea id="asset-desc" class="form-textarea" bind:value={description} placeholder={t(M['assets.create_asset_modal.description_placeholder'])} rows="2"></textarea>
+            <Textarea id="asset-desc" bind:value={description} placeholder={t(M['assets.create_asset_modal.description_placeholder'])} rows={2} />
           </div>
 
           {#if isImage}
@@ -208,7 +210,7 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
                   <span class="form-label__warning">{t(M['assets.create_asset_modal.alt_text_recommended_warning'])}</span>
                 {/if}
               </label>
-              <input id="asset-alt" type="text" class="form-input" bind:value={altText} placeholder={t(M['assets.create_asset_modal.alt_text_placeholder'])} />
+              <Input id="asset-alt" type="text" bind:value={altText} placeholder={t(M['assets.create_asset_modal.alt_text_placeholder'])} />
             </div>
           {/if}
         </div>
@@ -332,10 +334,10 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
     margin-top: var(--smrt-spacing-1, 4px);
   }
 
-  .file-preview__remove {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  /* file-preview__remove renders via <Button class="file-preview__remove">
+     (issue #1589). The overrides shape it into a small round icon button and
+     reach the child <button> via :global() scoping. */
+  .file-preview :global(.file-preview__remove) {
     width: 28px;
     height: 28px;
     flex-shrink: 0;
@@ -343,11 +345,10 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
     border: none;
     background: transparent;
     color: var(--smrt-color-on-surface-variant, #6b7280);
-    cursor: pointer;
     border-radius: var(--smrt-radius-full, 9999px);
   }
 
-  .file-preview__remove:hover {
+  .file-preview :global(.file-preview__remove:hover) {
     background: var(--smrt-color-surface-container, #f3f4f6);
     color: var(--smrt-color-error, #dc2626);
   }
@@ -378,27 +379,4 @@ const isLargeFile = $derived((file?.size ?? 0) > 2 * 1024 * 1024);
     margin-left: var(--smrt-spacing-1, 4px);
   }
 
-  .form-input, .form-textarea {
-    width: 100%;
-    padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
-    border-radius: var(--smrt-radius-medium, 0.5rem);
-    font-family: inherit;
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface, #111827);
-    background: var(--smrt-color-surface, #ffffff);
-    box-sizing: border-box;
-  }
-
-  .form-input:focus, .form-textarea:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-    box-shadow: 0 0 0 2px var(--smrt-color-primary-container, rgba(0, 90, 193, 0.1));
-  }
-
-  .form-textarea {
-    resize: vertical;
-    min-height: 60px;
-  }
-
 </style>

package/dist/svelte/CreateAssetModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateAssetModal.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/CreateAssetModal.svelte.ts"],"names":[],"mappings":"AAoBA,MAAM,WAAW,qBAAqB;IACpC,gCAAgC;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B;4EACwE;IACxE,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,IAAI,EAAE,IAAI,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,MAAM,CAAC;KACjB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAyMD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CreateAssetModal.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/CreateAssetModal.svelte.ts"],"names":[],"mappings":"AAqBA,MAAM,WAAW,qBAAqB;IACpC,gCAAgC;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B;4EACwE;IACxE,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,IAAI,EAAE,IAAI,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,MAAM,CAAC;KACjB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA2MD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/playground/AssetDetailPreview.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { AssetDetailUpdates } from '../AssetDetail.svelte';
 import AssetDetail from '../AssetDetail.svelte';
 import { M } from '../i18n.js';
@@ -67,7 +68,7 @@ function handleEdit() {
     <p class="eyebrow">{t(M['assets.asset_detail_preview.modal_preview'])}</p>
     <h4>{previewAsset?.name ?? asset.name}</h4>
     <p>{t(M['assets.asset_detail_preview.description'])}</p>
-    <button type="button" onclick={openPreview}>{t(M['assets.asset_detail_preview.open_asset_detail'])}</button>
+    <Button variant="primary" class="preview-open" onclick={openPreview}>{t(M['assets.asset_detail_preview.open_asset_detail'])}</Button>
     {#if statusMessage}
       <p class="status">{statusMessage}</p>
     {/if}
@@ -112,16 +113,15 @@ function handleEdit() {
     color: var(--smrt-color-primary, #0f766e);
   }
 
-  button {
+  /* The open-preview button renders via <Button variant="primary"> (issue
+     #1589). The primary variant owns the fill/color; this override keeps the
+     pill shape and grid placement, reaching the child <button> via :global(). */
+  .preview-card :global(.preview-open) {
     justify-self: start;
     border: 0;
     border-radius: var(--smrt-radius-full, 9999px);
     padding: 0.75rem 1rem;
-    font: inherit;
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    background: var(--smrt-color-primary, #0f766e);
-    color: var(--smrt-color-on-primary, white);
-    cursor: pointer;
   }
 
   .status {

package/dist/svelte/playground/AssetDetailPreview.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetDetailPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/AssetDetailPreview.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE9C,KAAK,gBAAgB,GAAI;IAAE,KAAK,EAAE,cAAc,CAAA;CAAE,CAAC;AAmFpD,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"AssetDetailPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/AssetDetailPreview.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE9C,KAAK,gBAAgB,GAAI;IAAE,KAAK,EAAE,cAAc,CAAA;CAAE,CAAC;AAoFpD,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/playground/CreateAssetModalPreview.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import CreateAssetModal from '../CreateAssetModal.svelte';
 import { M } from '../i18n.js';
 
@@ -47,7 +48,7 @@ function handleCreate(data: {
     <p class="eyebrow">{t(M['assets.create_asset_modal_preview.modal_preview'])}</p>
     <h4>{t(M['assets.create_asset_modal_preview.title'])}</h4>
     <p>{t(M['assets.create_asset_modal_preview.description'])}</p>
-    <button type="button" onclick={openPreview}>{t(M['assets.create_asset_modal_preview.open_upload_modal'])}</button>
+    <Button variant="primary" class="preview-open" onclick={openPreview}>{t(M['assets.create_asset_modal_preview.open_upload_modal'])}</Button>
 
     {#if statusMessage}
       <p class="status">{statusMessage}</p>
@@ -110,16 +111,15 @@ function handleCreate(data: {
     color: var(--smrt-color-primary, #0f766e);
   }
 
-  button {
+  /* The open-modal button renders via <Button variant="primary"> (issue #1589).
+     The primary variant owns the fill/color; this override keeps the pill shape
+     and grid placement, reaching the child <button> via :global(). */
+  .preview-card :global(.preview-open) {
     justify-self: start;
     border: 0;
     border-radius: var(--smrt-radius-full, 9999px);
     padding: 0.75rem 1rem;
-    font: inherit;
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    background: var(--smrt-color-primary, #0f766e);
-    color: var(--smrt-color-on-primary, white);
-    cursor: pointer;
   }
 
   .status {

package/dist/svelte/playground/CreateAssetModalPreview.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateAssetModalPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/CreateAssetModalPreview.svelte.ts"],"names":[],"mappings":"AA2FA,QAAA,MAAM,uBAAuB,2DAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"CreateAssetModalPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/CreateAssetModalPreview.svelte.ts"],"names":[],"mappings":"AA6FA,QAAA,MAAM,uBAAuB,2DAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@happyvertical/smrt-assets",
-  "version": "0.34.5",
+  "version": "0.34.7",
   "description": "Asset management system with versioning, metadata, and AI-powered operations for SMRT framework",
   "type": "module",
+  "smrtRawPrimitives": "strict",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -38,11 +39,11 @@
     "@happyvertical/logger": "^0.74.7",
     "@happyvertical/sql": "^0.74.7",
     "@happyvertical/utils": "^0.74.7",
-    "@happyvertical/smrt-core": "0.34.5",
-    "@happyvertical/smrt-types": "0.34.5",
-    "@happyvertical/smrt-ui": "0.34.5",
-    "@happyvertical/smrt-tenancy": "0.34.5",
-    "@happyvertical/smrt-tags": "0.34.5"
+    "@happyvertical/smrt-core": "0.34.7",
+    "@happyvertical/smrt-tags": "0.34.7",
+    "@happyvertical/smrt-tenancy": "0.34.7",
+    "@happyvertical/smrt-types": "0.34.7",
+    "@happyvertical/smrt-ui": "0.34.7"
   },
   "peerDependencies": {
     "svelte": "^5.18.0"
@@ -64,8 +65,8 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.17",
-    "@happyvertical/smrt-playground": "0.34.5",
-    "@happyvertical/smrt-vitest": "0.34.5"
+    "@happyvertical/smrt-playground": "0.34.7",
+    "@happyvertical/smrt-vitest": "0.34.7"
   },
   "keywords": [
     "ai",