@happyvertical/smrt-content 0.34.5 → 0.34.7

package/dist/svelte/components/ContentMetadataFields.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Input, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../i18n.editor.js';
 
@@ -33,7 +34,7 @@ function updateTags(value: string) {
 <div class="content-metadata-fields">
   <label>
     <span>Author</span>
-    <input
+    <Input
       type="text"
       value={data.author || ''}
       oninput={(event) => updateField('author', event.currentTarget.value)}
@@ -41,15 +42,15 @@ function updateTags(value: string) {
   </label>
   <label>
     <span>Description</span>
-    <textarea
-      rows="4"
+    <Textarea
+      rows={4}
       value={data.description || ''}
       oninput={(event) => updateField('description', event.currentTarget.value)}
-    ></textarea>
+    ></Textarea>
   </label>
   <label>
     <span>Tags</span>
-    <input
+    <Input
       type="text"
       value={tagsValue}
       placeholder={t(M['content.content_metadata_fields.tags_placeholder'])}
@@ -58,7 +59,7 @@ function updateTags(value: string) {
   </label>
   <label>
     <span>URL</span>
-    <input
+    <Input
       type="url"
       value={data.url || ''}
       oninput={(event) => updateField('url', event.currentTarget.value)}
@@ -66,7 +67,7 @@ function updateTags(value: string) {
   </label>
   <label>
     <span>{t(M['content.content_metadata_fields.file_key'])}</span>
-    <input
+    <Input
       type="text"
       value={data.fileKey || ''}
       oninput={(event) => updateField('fileKey', event.currentTarget.value)}
@@ -88,20 +89,4 @@ function updateTags(value: string) {
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
-  input,
-  textarea {
-    width: 100%;
-    box-sizing: border-box;
-    border: 1px solid color-mix(in srgb, var(--smrt-color-outline) 50%, transparent);
-    border-radius: 0.5rem;
-    background: var(--smrt-color-surface-container-low);
-    color: var(--smrt-color-on-surface);
-    font: inherit;
-    padding: 0.75rem 0.875rem;
-  }
-
-  textarea {
-    min-height: 7rem;
-    resize: vertical;
-  }
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"ContentMetadataFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentMetadataFields.svelte.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AAwDD,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ContentMetadataFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentMetadataFields.svelte.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AAyDD,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/svelte/components/ContentReferencesPanel.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+import { Input } from '@happyvertical/smrt-ui/forms';
 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 +101,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}
@@ -109,7 +115,7 @@ function removeReference(id: string) {
   {/if}
 
   <div class="reference-input-row">
-    <input
+    <Input
       type="text"
       aria-label={t(M['content.content_references_panel.add_reference_by_id_or_url'])}
       placeholder={t(M['content.content_references_panel.reference_id_or_url_placeholder'])}
@@ -121,7 +127,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}
@@ -198,24 +208,27 @@ function removeReference(id: string) {
     gap: 0.65rem;
   }
 
-  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;
-    background: var(--smrt-color-surface-container-low);
+    background: var(--smrt-color-surface-container);
     color: var(--smrt-color-on-surface);
     font: inherit;
     padding: 0.55rem 0.875rem;
-  }
-
-  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);
   }
+
+  /* Match the Input primitive's height/radius to the sibling reference-button so
+     the two grid columns of .reference-input-row align (the primitive's base
+     .input has no min-height). */
+  .content-references-panel :global(.input) {
+    min-height: 2.5rem;
+    border-radius: 0.5rem;
+  }
 </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":"AAMA,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;AAwHD,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/ContentStatusFields.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../i18n.editor.js';
 
@@ -19,33 +20,33 @@ function updateField(key: string, value: unknown) {
 <div class="content-status-fields">
   <label>
     <span>Type</span>
-    <select value={data.type || 'article'} onchange={(event) => updateField('type', event.currentTarget.value)}>
+    <Select value={data.type || 'article'} onchange={(event) => updateField('type', event.currentTarget.value)}>
       <option value="article">Article</option>
       <option value="document">Document</option>
       <option value="mirror">Mirror</option>
       <option value="video-segment">{t(M['content.content_status_fields.video_segment'])}</option>
-    </select>
+    </Select>
   </label>
   <label>
     <span>State</span>
-    <select value={data.state || 'active'} onchange={(event) => updateField('state', event.currentTarget.value)}>
+    <Select value={data.state || 'active'} onchange={(event) => updateField('state', event.currentTarget.value)}>
       <option value="active">Active</option>
       <option value="highlighted">Highlighted</option>
       <option value="deprecated">Deprecated</option>
-    </select>
+    </Select>
   </label>
   <label>
     <span>Status</span>
-    <select value={data.status || 'draft'} onchange={(event) => updateField('status', event.currentTarget.value)}>
+    <Select value={data.status || 'draft'} onchange={(event) => updateField('status', event.currentTarget.value)}>
       <option value="draft">Draft</option>
       <option value="review">Review</option>
       <option value="published">Published</option>
       <option value="archived">Archived</option>
-    </select>
+    </Select>
   </label>
   <label>
     <span>Published</span>
-    <input
+    <Input
       type="datetime-local"
       value={data.publish_date || ''}
       onchange={(event) => updateField('publish_date', event.currentTarget.value)}
@@ -70,16 +71,4 @@ function updateField(key: string, value: unknown) {
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
-  select,
-  input {
-    min-height: 2.5rem;
-    border: 1px solid color-mix(in srgb, var(--smrt-color-outline) 50%, transparent);
-    border-radius: 0.5rem;
-    background: var(--smrt-color-surface-container-low);
-    color: var(--smrt-color-on-surface);
-    font: inherit;
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    font-weight: var(--smrt-typography-weight-medium, 500);
-    padding: 0.55rem 0.75rem;
-  }
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"ContentStatusFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentStatusFields.svelte.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AAoDD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ContentStatusFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentStatusFields.svelte.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AAqDD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/ContentTitleField.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { Input } from '@happyvertical/smrt-ui/forms';
+
 export interface Props {
   value?: string;
   placeholder?: string;
@@ -14,17 +16,19 @@ let {
 }: Props = $props();
 </script>
 
-<input
-  class="content-title-field"
-  type="text"
-  {placeholder}
-  {required}
-  value={value || ''}
-  oninput={(event) => onChange?.(event.currentTarget.value)}
-/>
+<div class="content-title-field-shell">
+  <Input
+    class="content-title-field"
+    type="text"
+    {placeholder}
+    {required}
+    value={value || ''}
+    oninput={(event) => onChange?.(event.currentTarget.value)}
+  />
+</div>
 
 <style>
-  .content-title-field {
+  .content-title-field-shell :global(.content-title-field) {
     width: 100%;
     box-sizing: border-box;
     border: 0;
@@ -39,15 +43,15 @@ let {
     padding: 0;
   }
 
-  .content-title-field::placeholder {
+  .content-title-field-shell :global(.content-title-field)::placeholder {
     color: color-mix(in srgb, var(--smrt-color-on-surface-variant) 70%, transparent);
   }
 
-  .content-title-field:focus {
+  .content-title-field-shell :global(.content-title-field):focus {
     outline: none;
   }
 
-  .content-title-field:focus-visible {
+  .content-title-field-shell :global(.content-title-field):focus-visible {
     outline: 2px solid var(--smrt-color-primary, #005ac1);
     outline-offset: 0.35rem;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"ContentTitleField.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentTitleField.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAkBD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ContentTitleField.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentTitleField.svelte.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAqBD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,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,7 @@
 <script lang="ts">
+import { Form, Input } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { onMount } from 'svelte';
 import {
   type ContentContributionData,
@@ -401,26 +403,29 @@ async function handleDeleteContributor(data: Record<string, any>) {
                 {t(M['content.contributions.portal_body'])}
               </p>
             </div>
-            <form
-              class="inline-form"
-              onsubmit={(event) => {
-                event.preventDefault();
-                void refreshPortalOnly();
-              }}
-            >
-              <input
-                type="email"
-                bind:value={portalEmail}
-                placeholder={t(M['content.contributions.portal_email_placeholder'])}
-              />
-              <button
-                type="submit"
-                class="secondary"
-                disabled={refreshingPortal}
+            <div class="inline-form-shell">
+              <Form
+                class="inline-form"
+                onsubmit={(event) => {
+                  event.preventDefault();
+                  void refreshPortalOnly();
+                }}
               >
-                {refreshingPortal ? 'Loading...' : 'Load'}
-              </button>
-            </form>
+                <Input
+                  type="email"
+                  bind:value={portalEmail}
+                  placeholder={t(M['content.contributions.portal_email_placeholder'])}
+                />
+                <Button
+                  variant="ghost"
+                  type="submit"
+                  class="load-button"
+                  disabled={refreshingPortal}
+                >
+                  {refreshingPortal ? 'Loading...' : 'Load'}
+                </Button>
+              </Form>
+            </div>
           </div>
 
           <ContentContributionPortal
@@ -705,14 +710,14 @@ async function handleDeleteContributor(data: Record<string, any>) {
     color: var(--smrt-color-on-surface-variant);
   }
 
-  .inline-form {
+  .inline-form-shell :global(.inline-form) {
     display: flex;
     gap: 0.5rem;
     flex-wrap: wrap;
     align-items: center;
   }
 
-  .inline-form input {
+  .inline-form-shell :global(.input) {
     min-width: min(22rem, 100%);
     padding: 0.7rem 0.85rem;
     border-radius: 0.75rem;
@@ -721,8 +726,7 @@ async function handleDeleteContributor(data: Record<string, any>) {
     color: var(--smrt-color-on-surface);
   }
 
-  .inline-form button,
-  .secondary {
+  .inline-form-shell :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":"AAqBA,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;AAscD,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,7 @@
 <script lang="ts">
+import { Form, Input } from '@happyvertical/smrt-ui/forms';
 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';
@@ -117,10 +119,10 @@ onMount(() => {
 
   <main class="container page-main">
     <section class="filters-panel">
-      <form class="filters" onsubmit={handleSubmit}>
+      <Form class="filters" onsubmit={handleSubmit}>
         <label class="search-field">
           <span>Search</span>
-          <input
+          <Input
             type="search"
             bind:value={query}
             placeholder={t(M['content.facts.search_placeholder'])}
@@ -128,6 +130,7 @@ onMount(() => {
         </label>
 
         <label class="toggle">
+          <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
           <input
             type="checkbox"
             bind:checked={latestOnly}
@@ -137,6 +140,7 @@ onMount(() => {
         </label>
 
         <label class="toggle">
+          <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
           <input
             type="checkbox"
             bind:checked={includeSuperseded}
@@ -145,10 +149,10 @@ 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>
-      </form>
+        </Button>
+      </Form>
     </section>
 
     {#if error}
@@ -378,7 +382,7 @@ onMount(() => {
     border-color: color-mix(in srgb, var(--smrt-color-error) 30%, transparent);
   }
 
-  .filters {
+  .filters-panel :global(.filters) {
     display: grid;
     grid-template-columns: minmax(0, 1.8fr) repeat(2, auto) auto;
     gap: 0.75rem;
@@ -396,7 +400,7 @@ onMount(() => {
     color: var(--smrt-color-on-surface-variant);
   }
 
-  .search-field input {
+  .search-field :global(.input) {
     min-height: 2.85rem;
     border-radius: 0.85rem;
     border: 1px solid var(--smrt-color-outline-variant);
@@ -416,7 +420,7 @@ onMount(() => {
     color: var(--smrt-color-on-surface);
   }
 
-  .refresh-button {
+  .filters-panel :global(.refresh-button) {
     min-height: 2.85rem;
     border-radius: 0.85rem;
     border: none;
@@ -605,7 +609,7 @@ onMount(() => {
       justify-content: flex-start;
     }
 
-    .filters {
+    .filters-panel :global(.filters) {
       grid-template-columns: 1fr;
     }
   }