@happyvertical/smrt-assets 0.34.4 → 0.34.6

package/dist/manifest.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
-  "timestamp": 1782257824701,
+  "timestamp": 1782278439359,
   "packageName": "@happyvertical/smrt-assets",
-  "packageVersion": "0.34.4",
+  "packageVersion": "0.34.6",
   "objects": {
     "@happyvertical/smrt-assets:AssetAssociation": {
       "name": "assetassociation",

package/dist/smrt-knowledge.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-06-23T23:37:06.168Z",
+  "generatedAt": "2026-06-24T05:20:39.916Z",
   "packageName": "@happyvertical/smrt-assets",
-  "packageVersion": "0.34.4",
+  "packageVersion": "0.34.6",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "d940ee88361833c65d3a3ba0423c40359dccc8552cf4303c1361f9673252af5f",
-    "packageJson": "f5ca4940cf312dfdb2d89b163b549015037db829728dba81546e13ca3d230479",
+    "manifest": "37c93b8225560c459942aecd64dc56cdddba2763dcfb4d1533fd23ea6155aa5c",
+    "packageJson": "fbb530de68a6cc8e154c7d6a4a61eb98d83387b740abf0b2fedb55cf7410c729",
     "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

@@ -261,18 +261,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>
@@ -462,33 +462,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/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"

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;AAgJ9D,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,
@@ -120,15 +121,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>
@@ -187,15 +188,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 +309,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 +331,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 +381,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 +391,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;AAmMjB,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/AssetToolbar.svelte

@@ -8,6 +8,7 @@ import { onDestroy } from 'svelte';
  */
 
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from './i18n.js';
 import type {
   AssetFilters,
@@ -116,12 +117,12 @@ 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>
 
@@ -148,10 +149,9 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
     <!-- 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 +173,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 +189,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>
 
@@ -267,10 +267,10 @@ const views: { key: AssetViewMode; label: string; icon: string }[] = [
     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,11 +278,10 @@ 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);
   }
@@ -313,58 +312,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":"AAaA,OAAO,KAAK,EAIV,iBAAiB,EAElB,MAAM,SAAS,CAAC;AA6KjB,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/CreateAssetModal.svelte

@@ -184,9 +184,9 @@ 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">
@@ -332,10 +332,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 +343,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);
   }

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.4",
+  "version": "0.34.6",
   "description": "Asset management system with versioning, metadata, and AI-powered operations for SMRT framework",
   "type": "module",
+  "smrtRawPrimitives": "strict-buttons",
   "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-tenancy": "0.34.4",
-    "@happyvertical/smrt-ui": "0.34.4",
-    "@happyvertical/smrt-core": "0.34.4",
-    "@happyvertical/smrt-tags": "0.34.4",
-    "@happyvertical/smrt-types": "0.34.4"
+    "@happyvertical/smrt-core": "0.34.6",
+    "@happyvertical/smrt-tags": "0.34.6",
+    "@happyvertical/smrt-tenancy": "0.34.6",
+    "@happyvertical/smrt-types": "0.34.6",
+    "@happyvertical/smrt-ui": "0.34.6"
   },
   "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.4",
-    "@happyvertical/smrt-vitest": "0.34.4"
+    "@happyvertical/smrt-playground": "0.34.6",
+    "@happyvertical/smrt-vitest": "0.34.6"
   },
   "keywords": [
     "ai",