@happyvertical/smrt-content 0.34.4 → 0.34.6

package/dist/svelte/components/ContentList.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { Snippet } from 'svelte';
 import { untrack } from 'svelte';
 import { M } from '../i18n.contribution.js';
@@ -176,10 +177,14 @@ function cancelDelete() {
     
     <div class="actions-group">
       <div class="view-toggles">
-        <button 
+        <Button
+          variant="ghost"
+          size="sm"
           type="button"
-          class:active={viewMode === 'grid'} 
+          class={`view-toggle-btn${viewMode === 'grid' ? ' view-toggle-btn--active' : ''}`}
+          aria-pressed={viewMode === 'grid'}
           onclick={() => viewMode = 'grid'}
+          aria-label={t(M['content.content_list.grid_view'])}
           title={t(M['content.content_list.grid_view'])}
         >
           <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none">
@@ -188,11 +193,15 @@ function cancelDelete() {
             <rect x="14" y="14" width="7" height="7"></rect>
             <rect x="3" y="14" width="7" height="7"></rect>
           </svg>
-        </button>
-        <button 
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
           type="button"
-          class:active={viewMode === 'detailed'} 
+          class={`view-toggle-btn${viewMode === 'detailed' ? ' view-toggle-btn--active' : ''}`}
+          aria-pressed={viewMode === 'detailed'}
           onclick={() => viewMode = 'detailed'}
+          aria-label={t(M['content.content_list.detailed_list'])}
           title={t(M['content.content_list.detailed_list'])}
         >
           <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none">
@@ -203,11 +212,15 @@ function cancelDelete() {
             <line x1="3" y1="12" x2="3.01" y2="12"></line>
             <line x1="3" y1="18" x2="3.01" y2="18"></line>
           </svg>
-        </button>
-        <button 
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
           type="button"
-          class:active={viewMode === 'compact'} 
+          class={`view-toggle-btn${viewMode === 'compact' ? ' view-toggle-btn--active' : ''}`}
+          aria-pressed={viewMode === 'compact'}
           onclick={() => viewMode = 'compact'}
+          aria-label={t(M['content.content_list.compact_list'])}
           title={t(M['content.content_list.compact_list'])}
         >
           <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none">
@@ -215,16 +228,16 @@ function cancelDelete() {
             <line x1="3" y1="12" x2="21" y2="12"></line>
             <line x1="3" y1="18" x2="21" y2="18"></line>
           </svg>
-        </button>
+        </Button>
       </div>
-      
-      <button class="add-button" type="button" onclick={() => onAdd()}>
+
+      <Button variant="ghost" class="add-button" type="button" onclick={() => onAdd()}>
         <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none">
           <line x1="12" y1="5" x2="12" y2="19"></line>
           <line x1="5" y1="12" x2="19" y2="12"></line>
         </svg>
         {t(M['content.content_list.add_content'])}
-      </button>
+      </Button>
     </div>
   </div>
 
@@ -261,8 +274,8 @@ function cancelDelete() {
                 {#if getViewHref?.(content)}
                   <a class="icon-btn" href={getViewHref(content) || '#'} title={t(M['content.content_list.view_published_article'])} aria-label={t(M['content.content_list.view_published_article'])}>🔎</a>
                 {/if}
-                <button class="icon-btn" type="button" onclick={() => onEdit(content)} title={t(M['content.content_list.edit'])} aria-label={t(M['content.content_list.edit'])}>✏️</button>
-                <button class="icon-btn delete-icon" type="button" onclick={() => handleDeleteContent(content)} title={t(M['content.content_list.delete'])} aria-label={t(M['content.content_list.delete'])}>🗑️</button>
+                <Button variant="ghost" size="sm" class="icon-btn" type="button" onclick={() => onEdit(content)} title={t(M['content.content_list.edit'])} aria-label={t(M['content.content_list.edit'])}>✏️</Button>
+                <Button variant="ghost" size="sm" class="icon-btn delete-icon" type="button" onclick={() => handleDeleteContent(content)} title={t(M['content.content_list.delete'])} aria-label={t(M['content.content_list.delete'])}>🗑️</Button>
               </td>
             </tr>
           {/each}
@@ -314,14 +327,15 @@ function cancelDelete() {
             {#if getViewHref?.(content)}
               <a href={getViewHref(content) || '#'} class="quiet-action">{t(M['content.content_list.view_article'])}</a>
             {/if}
-            <button type="button" class="quiet-action" onclick={() => onEdit(content)}>{t(M['content.content_list.edit'])}</button>
-            <button
+            <Button variant="ghost" type="button" class="quiet-action" onclick={() => onEdit(content)}>{t(M['content.content_list.edit'])}</Button>
+            <Button
+              variant="ghost"
               type="button"
               class="quiet-action quiet-action--danger"
               onclick={() => handleDeleteContent(content)}
             >
               {t(M['content.content_list.delete'])}
-            </button>
+            </Button>
           </div>
         </article>
       {/each}
@@ -374,8 +388,8 @@ function cancelDelete() {
               {#if getViewHref?.(content)}
                 <a href={getViewHref(content) || '#'} class="view-btn">{t(M['content.content_list.view_article_button'])}</a>
               {/if}
-              <button onclick={() => onEdit(content)}>{t(M['content.content_list.edit'])}</button>
-              <button onclick={() => handleDeleteContent(content)} class="delete-btn">{t(M['content.content_list.delete'])}</button>
+              <Button variant="ghost" type="button" class="content-action-btn" onclick={() => onEdit(content)}>{t(M['content.content_list.edit'])}</Button>
+              <Button variant="ghost" type="button" class="content-action-btn delete-btn" onclick={() => handleDeleteContent(content)}>{t(M['content.content_list.delete'])}</Button>
             </div>
           </div>
         </div>
@@ -457,7 +471,7 @@ function cancelDelete() {
     border: 1px solid var(--smrt-color-outline-variant);
   }
 
-  .view-toggles button {
+  .view-toggles :global(.view-toggle-btn) {
     background: transparent;
     border: none;
     padding: 0.4rem;
@@ -470,18 +484,18 @@ function cancelDelete() {
     transition: all 0.2s;
   }
 
-  .view-toggles button:hover {
+  .view-toggles :global(.view-toggle-btn:hover) {
     color: var(--smrt-color-on-surface);
     background: color-mix(in srgb, var(--smrt-color-shadow) 5%, transparent);
   }
 
-  .view-toggles button.active {
+  .view-toggles :global(.view-toggle-btn.view-toggle-btn--active) {
     background: var(--smrt-color-surface);
     color: var(--smrt-color-on-surface);
     box-shadow: var(--smrt-elevation-1, 0 1px 2px rgba(0,0,0,0.1));
   }
 
-  .add-button {
+  .actions-group :global(.add-button) {
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -500,7 +514,7 @@ function cancelDelete() {
     transition: transform 0.2s, box-shadow 0.2s;
   }
 
-  .add-button:hover {
+  .actions-group :global(.add-button:hover) {
     transform: translateY(-1px);
     box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--smrt-color-primary) 50%, transparent);
   }
@@ -660,7 +674,7 @@ function cancelDelete() {
     padding-top: 1rem;
   }
 
-  .content-actions button,
+  .content-actions :global(.content-action-btn),
   .content-actions a {
     flex: 1;
     padding: 0.5rem 1rem;
@@ -676,7 +690,7 @@ function cancelDelete() {
     text-decoration: none;
   }
 
-  .content-actions button:hover,
+  .content-actions :global(.content-action-btn:hover),
   .content-actions a:hover {
     background: var(--smrt-color-surface-variant);
     border-color: var(--smrt-color-outline);
@@ -686,11 +700,11 @@ function cancelDelete() {
     color: var(--smrt-color-primary) !important;
   }
 
-  .delete-btn {
+  .content-actions :global(.delete-btn) {
     color: var(--smrt-color-error) !important;
   }
 
-  .delete-btn:hover {
+  .content-actions :global(.delete-btn:hover) {
     background: var(--smrt-color-error-container) !important;
     border-color: var(--smrt-color-error) !important;
   }
@@ -754,7 +768,7 @@ function cancelDelete() {
     min-width: 8.5rem;
   }
 
-  .quiet-action {
+  .content-row__actions :global(.quiet-action) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -769,11 +783,11 @@ function cancelDelete() {
     cursor: pointer;
   }
 
-  .quiet-action:hover {
+  .content-row__actions :global(.quiet-action:hover) {
     background: var(--smrt-color-surface-container-low);
   }
 
-  .quiet-action--danger {
+  .content-row__actions :global(.quiet-action--danger) {
     color: var(--smrt-color-error);
   }
 
@@ -855,7 +869,7 @@ function cancelDelete() {
     white-space: nowrap;
   }
 
-  .icon-btn {
+  .actions-cell :global(.icon-btn) {
     background: transparent;
     border: none;
     cursor: pointer;
@@ -866,12 +880,12 @@ function cancelDelete() {
     opacity: 0.7;
   }
 
-  .icon-btn:hover {
+  .actions-cell :global(.icon-btn:hover) {
     background: var(--smrt-color-surface-variant);
     opacity: 1;
   }
 
-  .delete-icon:hover {
+  .actions-cell :global(.delete-icon:hover) {
     background: var(--smrt-color-error-container);
   }
 

package/dist/svelte/components/ContentList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentList.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKrC,KAAK,gBAAgB,GAAG;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IAClD,MAAM,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;CAC/C,CAAC;AA4WF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ContentList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentList.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKrC,KAAK,gBAAgB,GAAG;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IAClD,MAAM,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;CAC/C,CAAC;AA6WF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/ContentReferencesPanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { Snippet } from 'svelte';
 import type { ContentEditorReference } from '../content-editor-form';
 import { M } from '../i18n.editor.js';
@@ -99,7 +100,11 @@ function removeReference(id: string) {
             {/if}
           </div>
           {#if referenceId}
-            <button type="button" onclick={() => removeReference(referenceId)}>Remove</button>
+            <Button
+              variant="ghost"
+              type="button"
+              class="reference-button"
+              onclick={() => removeReference(referenceId)}>Remove</Button>
           {/if}
         </div>
       {/each}
@@ -121,7 +126,11 @@ function removeReference(id: string) {
         }
       }}
     />
-    <button type="button" onclick={addReference}>Add</button>
+    <Button
+      variant="ghost"
+      type="button"
+      class="reference-button"
+      onclick={addReference}>Add</Button>
   </div>
 
   {#if children}
@@ -199,7 +208,7 @@ function removeReference(id: string) {
   }
 
   input,
-  button {
+  .content-references-panel :global(.reference-button) {
     min-height: 2.5rem;
     border: 1px solid color-mix(in srgb, var(--smrt-color-outline) 50%, transparent);
     border-radius: 0.5rem;
@@ -209,13 +218,13 @@ function removeReference(id: string) {
     padding: 0.55rem 0.875rem;
   }
 
-  button {
+  .content-references-panel :global(.reference-button) {
     background: var(--smrt-color-surface-container);
     cursor: pointer;
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
-  button:hover {
+  .content-references-panel :global(.reference-button:hover) {
     background: var(--smrt-color-surface-container-high);
   }
 </style>

package/dist/svelte/components/ContentReferencesPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentReferencesPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentReferencesPanel.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,MAAM,WAAW,KAAK;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACtC,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxD;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsHD,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ContentReferencesPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentReferencesPanel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,MAAM,WAAW,KAAK;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACtC,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxD;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuHD,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/ContentReviewStatusTray.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { Button } from '@happyvertical/smrt-ui/ui';
+
 export type ContentReviewStatusTone =
   | 'neutral'
   | 'danger'
@@ -64,18 +66,20 @@ let {
 {#if items.length > 0}
   <div class="content-review-status-tray" role="group" aria-label={label}>
     {#each items as item (item.id)}
-      <button
+      <Button
+        variant="ghost"
         type="button"
         aria-pressed={activeId === item.id && open}
-        class={`tray-button tray-button--${item.tone}`}
-        class:active={activeId === item.id && open}
+        class={`tray-button tray-button--${item.tone}${
+          activeId === item.id && open ? ' tray-button--active' : ''
+        }`}
         title={`${item.label}: ${item.status}`}
         onclick={() => onSelect?.(item)}
       >
         {@render trayIcon(item.icon)}
         <span class="tray-button__indicator" aria-hidden="true"></span>
         <span class="sr-only">{item.label}: {item.status}</span>
-      </button>
+      </Button>
     {/each}
   </div>
 {/if}
@@ -88,7 +92,7 @@ let {
     min-height: 2.5rem;
   }
 
-  .tray-button {
+  .content-review-status-tray :global(.tray-button) {
     position: relative;
     display: inline-grid;
     place-items: center;
@@ -102,13 +106,13 @@ let {
     padding: 0;
   }
 
-  .tray-button:hover,
-  .tray-button.active {
+  .content-review-status-tray :global(.tray-button:hover),
+  .content-review-status-tray :global(.tray-button.tray-button--active) {
     background: var(--smrt-color-surface-container);
     color: var(--smrt-color-on-surface);
   }
 
-  .tray-button svg {
+  .content-review-status-tray :global(.tray-button svg) {
     width: 1.15rem;
     height: 1.15rem;
     fill: none;
@@ -118,7 +122,7 @@ let {
     stroke-linejoin: round;
   }
 
-  .tray-button__indicator {
+  .content-review-status-tray :global(.tray-button__indicator) {
     position: absolute;
     right: 0.35rem;
     bottom: 0.35rem;
@@ -128,19 +132,19 @@ let {
     background: var(--smrt-color-outline);
   }
 
-  .tray-button--danger .tray-button__indicator {
+  .content-review-status-tray :global(.tray-button--danger .tray-button__indicator) {
     background: var(--smrt-color-error);
   }
 
-  .tray-button--warning .tray-button__indicator {
+  .content-review-status-tray :global(.tray-button--warning .tray-button__indicator) {
     background: var(--smrt-color-tertiary, #d97706);
   }
 
-  .tray-button--success .tray-button__indicator {
+  .content-review-status-tray :global(.tray-button--success .tray-button__indicator) {
     background: var(--smrt-color-primary);
   }
 
-  .sr-only {
+  .content-review-status-tray :global(.sr-only) {
     position: absolute;
     width: 1px;
     height: 1px;

package/dist/svelte/components/ContentReviewStatusTray.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentReviewStatusTray.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentReviewStatusTray.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,uBAAuB,GAC/B,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AACd,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhF,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,uBAAuB,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,uBAAuB,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,2BAA2B,EAAE,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,2BAA2B,KAAK,IAAI,CAAC;CACxD;AA8DD,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ContentReviewStatusTray.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentReviewStatusTray.svelte.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,uBAAuB,GAC/B,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AACd,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhF,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,uBAAuB,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,uBAAuB,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,2BAA2B,EAAE,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,2BAA2B,KAAK,IAAI,CAAC;CACxD;AAiED,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/svelte/components/ContentVersionsTool.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { ContentVersionData } from '../../mock-smrt-client';
 import { createClient } from '../../mock-smrt-client';
 import { normalizeApiBaseUrl } from '../api';
@@ -165,14 +166,14 @@ async function restoreVersion(versionNumber: number) {
 
 <div class="governance-tool">
   <div class="tool-toolbar">
-    <button
+    <Button
+      variant="secondary"
       type="button"
-      class="secondary-button"
       disabled={busy || !savedContentId}
       onclick={() => void createSnapshot()}
     >
       {busy ? 'Working...' : 'Create snapshot'}
-    </button>
+    </Button>
   </div>
 
   {#if error}
@@ -201,9 +202,9 @@ async function restoreVersion(versionNumber: number) {
           {/if}
           <div class="tool-card-footer">
             <span>{formatTimestamp(version.createdAt)}</span>
-            <button
+            <Button
+              variant="secondary"
               type="button"
-              class="secondary-button"
               disabled={busy || version.version === null || version.version === undefined}
               onclick={() => {
                 if (version.version !== null && version.version !== undefined) {
@@ -212,7 +213,7 @@ async function restoreVersion(versionNumber: number) {
               }}
             >
               Restore
-            </button>
+            </Button>
           </div>
         </div>
       {/each}
@@ -271,21 +272,6 @@ async function restoreVersion(versionNumber: number) {
     font-size: var(--smrt-typography-body-medium-size, 0.85rem);
   }
 
-  .secondary-button {
-    border-radius: 0.5rem;
-    padding: 0.65rem 0.85rem;
-    border: 1px solid var(--smrt-color-outline-variant);
-    background: var(--smrt-color-surface);
-    color: var(--smrt-color-on-surface);
-    cursor: pointer;
-    font-weight: var(--smrt-typography-weight-semibold, 600);
-  }
-
-  .secondary-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.65;
-  }
-
   .pill {
     border-radius: var(--smrt-radius-full, 9999px);
     padding: 0.2rem 0.55rem;

package/dist/svelte/components/ContentVersionsTool.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentVersionsTool.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentVersionsTool.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAMjE,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;CAC7D;AAwND,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ContentVersionsTool.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentVersionsTool.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAMjE,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;CAC7D;AAyND,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/i18n.editor.d.ts

@@ -5,6 +5,7 @@ export declare const M: {
     readonly 'content.content_agent_chat.no_topics': "content.content_agent_chat.no_topics";
     readonly 'content.content_agent_chat.topic_name_placeholder': "content.content_agent_chat.topic_name_placeholder";
     readonly 'content.content_agent_chat.new_topic': "content.content_agent_chat.new_topic";
+    readonly 'content.content_agent_chat.cancel': "content.content_agent_chat.cancel";
     readonly 'content.content_agent_chat.new': "content.content_agent_chat.new";
     readonly 'content.content_agent_chat.untitled_topic': "content.content_agent_chat.untitled_topic";
     readonly 'content.content_body_editor.toolbar': "content.content_body_editor.toolbar";

package/dist/svelte/i18n.editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.editor.d.ts","sourceRoot":"","sources":["../../src/svelte/i18n.editor.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGZ,CAAC"}
+{"version":3,"file":"i18n.editor.d.ts","sourceRoot":"","sources":["../../src/svelte/i18n.editor.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGZ,CAAC"}

package/dist/svelte/i18n.editor.js

@@ -14,6 +14,7 @@ export const M = defineMessages({
     'content.content_agent_chat.no_topics': 'No topics...',
     'content.content_agent_chat.topic_name_placeholder': 'Topic name...',
     'content.content_agent_chat.new_topic': 'New Topic',
+    'content.content_agent_chat.cancel': 'Cancel',
     'content.content_agent_chat.new': 'New',
     'content.content_agent_chat.untitled_topic': 'Untitled Topic',
     // ContentBodyEditor

package/dist/svelte/routes/ContentContributionsRoute.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { onMount } from 'svelte';
 import {
   type ContentContributionData,
@@ -413,13 +414,14 @@ async function handleDeleteContributor(data: Record<string, any>) {
                 bind:value={portalEmail}
                 placeholder={t(M['content.contributions.portal_email_placeholder'])}
               />
-              <button
+              <Button
+                variant="ghost"
                 type="submit"
-                class="secondary"
+                class="load-button"
                 disabled={refreshingPortal}
               >
                 {refreshingPortal ? 'Loading...' : 'Load'}
-              </button>
+              </Button>
             </form>
           </div>
 
@@ -721,8 +723,7 @@ async function handleDeleteContributor(data: Record<string, any>) {
     color: var(--smrt-color-on-surface);
   }
 
-  .inline-form button,
-  .secondary {
+  .inline-form :global(.load-button) {
     border-radius: var(--smrt-radius-full, 9999px);
     border: 1px solid color-mix(
       in srgb,

package/dist/svelte/routes/ContentContributionsRoute.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentContributionsRoute.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/routes/ContentContributionsRoute.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,EAGL,KAAK,0BAA0B,EAChC,MAAM,aAAa,CAAC;AAGrB,UAAU,8BAA8B;IACtC,UAAU,CAAC,EAAE,0BAA0B,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkcD,QAAA,MAAM,yBAAyB,oEAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"ContentContributionsRoute.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/routes/ContentContributionsRoute.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,EAGL,KAAK,0BAA0B,EAChC,MAAM,aAAa,CAAC;AAGrB,UAAU,8BAA8B;IACtC,UAAU,CAAC,EAAE,0BAA0B,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmcD,QAAA,MAAM,yBAAyB,oEAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/svelte/routes/ContentFactsRoute.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { onMount } from 'svelte';
 import { createClient, type FactData } from '../../mock-smrt-client.js';
 import { M } from '../i18n.routes.js';
@@ -145,9 +146,9 @@ onMount(() => {
           <span>{t(M['content.facts.include_superseded'])}</span>
         </label>
 
-        <button class="refresh-button" type="submit" disabled={refreshing}>
+        <Button variant="primary" class="refresh-button" type="submit" disabled={refreshing}>
           {refreshing ? 'Refreshing…' : 'Refresh'}
-        </button>
+        </Button>
       </form>
     </section>
 
@@ -416,7 +417,7 @@ onMount(() => {
     color: var(--smrt-color-on-surface);
   }
 
-  .refresh-button {
+  .filters :global(.refresh-button) {
     min-height: 2.85rem;
     border-radius: 0.85rem;
     border: none;

package/dist/svelte/routes/ContentFactsRoute.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentFactsRoute.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/routes/ContentFactsRoute.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAGL,KAAK,0BAA0B,EAChC,MAAM,aAAa,CAAC;AAGrB,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,0BAA0B,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiND,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ContentFactsRoute.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/routes/ContentFactsRoute.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAGL,KAAK,0BAA0B,EAChC,MAAM,aAAa,CAAC;AAGrB,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,0BAA0B,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkND,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/routes/ContentWorkspaceRoute.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { onMount } from 'svelte';
 import type { ContentData } from '../../mock-smrt-client.js';
 import { createClient } from '../../mock-smrt-client.js';
@@ -195,7 +196,7 @@ function closeForms() {
     {:else if error}
       <section class="panel panel--error">
         <p><strong>Error:</strong> {error}</p>
-        <button type="button" onclick={loadContents}>{t(M['content.workspace.try_again'])}</button>
+        <Button variant="secondary" type="button" onclick={loadContents}>{t(M['content.workspace.try_again'])}</Button>
       </section>
     {:else if showAddForm || editingContent}
       <section class="panel">
@@ -230,13 +231,14 @@ function closeForms() {
         >
           {#snippet controls()}
             <div class="workspace-controls">
-              <button
+              <Button
+                variant="ghost"
                 type="button"
                 class="secondary-action"
                 onclick={handleAddGovernedContent}
               >
                 {t(M['content.workspace.create_governed'])}
-              </button>
+              </Button>
               <a class="inline-link" href={governanceHref}>
                 {t(M['content.workspace.review_governance'])}
               </a>
@@ -404,7 +406,7 @@ function closeForms() {
     gap: 0.75rem;
   }
 
-  .secondary-action {
+  .workspace-controls :global(.secondary-action) {
     border: 1px solid color-mix(
       in srgb,
       var(--smrt-color-primary) 30%,

package/dist/svelte/routes/ContentWorkspaceRoute.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentWorkspaceRoute.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/routes/ContentWorkspaceRoute.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAM7D,OAAO,EAIL,KAAK,0BAA0B,EAEhC,MAAM,aAAa,CAAC;AAGrB,UAAU,0BAA0B;IAClC,UAAU,CAAC,EAAE,0BAA0B,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,GAAG,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwND,QAAA,MAAM,qBAAqB,gEAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ContentWorkspaceRoute.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/routes/ContentWorkspaceRoute.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAM7D,OAAO,EAIL,KAAK,0BAA0B,EAEhC,MAAM,aAAa,CAAC;AAGrB,UAAU,0BAA0B;IAClC,UAAU,CAAC,EAAE,0BAA0B,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,GAAG,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyND,QAAA,MAAM,qBAAqB,gEAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}