@happyvertical/smrt-content 0.34.5 → 0.34.7

package/dist/manifest.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
-  "timestamp": 1782261340993,
+  "timestamp": 1782290175450,
   "packageName": "@happyvertical/smrt-content",
-  "packageVersion": "0.34.5",
+  "packageVersion": "0.34.7",
   "objects": {
     "@happyvertical/smrt-content:ContentAsset": {
       "name": "contentasset",

package/dist/smrt-knowledge.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-06-24T00:35:44.470Z",
+  "generatedAt": "2026-06-24T08:36:16.418Z",
   "packageName": "@happyvertical/smrt-content",
-  "packageVersion": "0.34.5",
+  "packageVersion": "0.34.7",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "985bc4b7d20ec4031979656ff88317a703180e278811f1c488017dae30c756e8",
-    "packageJson": "6a840763505ced7c9309c146e9b49e1358c96ce469c07c03224eb223f037458e",
+    "manifest": "43cf986f548e44679e46d3aa7f5aac5d82cfc41721c5a19465ec15cd86145005",
+    "packageJson": "eb13884b3fb83b76e1818ee4ae5f0cca5c437f1d62223e23dc5a3b4f6914fad8",
     "agents": "d3e1fdba8cf8c8f393e682616c56fefcc789c44018407bbdf7332d5f06cfbb5c"
   },
   "exports": [

package/dist/svelte/components/ContentAgentChat.svelte

@@ -6,7 +6,9 @@
  */
 
 import { AgentChat } from '@happyvertical/smrt-chat/svelte';
+import { Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type {
   ContentEditorAssistantContext,
   ContentEditorAssistantFieldUpdateAllowList,
@@ -426,16 +428,16 @@ async function handleSendMessage(content: string) {
     <div class="error-state">
       <p>{error}</p>
       {#if canRetrySessionLoad}
-        <button onclick={loadSession}>Retry</button>
+        <Button variant="primary" type="button" onclick={loadSession}>Retry</Button>
       {/if}
     </div>
   {:else if session}
     <div class="model-bar">
-      <select class="smrt-select model-select" bind:value={selectedModelId}>
+      <Select class="smrt-select model-select" bind:value={selectedModelId}>
         {#each availableAIModels as model}
           <option value={model.id}>{model.label}</option>
         {/each}
-      </select>
+      </Select>
     </div>
     
     <div class="chat-main">
@@ -464,22 +466,22 @@ async function handleSendMessage(content: string) {
     <div class="topic-footer">
       {#if showNewTopicInput}
         <div class="new-topic-row">
-          <input 
-            class="new-topic-input" 
-            type="text" 
+          <Input
+            class="new-topic-input"
+            type="text"
             placeholder={t(M['content.content_agent_chat.topic_name_placeholder'])}
             bind:value={newTopicTitle}
             onkeydown={(e: KeyboardEvent) => { if (e.key === 'Enter') { createNewTopic(); showNewTopicInput = false; } }}
           />
-          <button class="topic-action-btn" onclick={() => { createNewTopic(); showNewTopicInput = false; }} disabled={isCreatingTopic}>
+          <Button variant="ghost" size="sm" type="button" class="topic-action-btn" onclick={() => { createNewTopic(); showNewTopicInput = false; }} disabled={isCreatingTopic}>
             {isCreatingTopic ? '...' : 'Create'}
-          </button>
-          <button class="topic-action-btn topic-cancel-btn" onclick={() => { showNewTopicInput = false; }}>✕</button>
+          </Button>
+          <Button variant="ghost" size="sm" type="button" class="topic-action-btn topic-cancel-btn" onclick={() => { showNewTopicInput = false; }} aria-label={t(M['content.content_agent_chat.cancel'])} title={t(M['content.content_agent_chat.cancel'])}>✕</Button>
         </div>
       {:else}
-        <select 
-          class="smrt-select topic-select" 
-          bind:value={activeThreadId} 
+        <Select
+          class="smrt-select topic-select"
+          value={activeThreadId ?? ''}
           onchange={(e: Event) => loadThread((e.currentTarget as HTMLSelectElement).value)}
           disabled={!threads.length}
         >
@@ -489,11 +491,11 @@ async function handleSendMessage(content: string) {
           {#each threads as thread}
             <option value={thread.id}>{thread.title || t(M['content.content_agent_chat.untitled_topic'])}</option>
           {/each}
-        </select>
-        <button class="topic-action-btn" onclick={() => { showNewTopicInput = true; newTopicTitle = ''; }} title={t(M['content.content_agent_chat.new_topic'])}>
+        </Select>
+        <Button variant="ghost" size="sm" type="button" class="topic-action-btn" onclick={() => { showNewTopicInput = true; newTopicTitle = ''; }} title={t(M['content.content_agent_chat.new_topic'])}>
           <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><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_agent_chat.new'])}
-        </button>
+        </Button>
       {/if}
     </div>
   {/if}
@@ -535,22 +537,12 @@ async function handleSendMessage(content: string) {
     to { transform: rotate(360deg); }
   }
 
-  .error-state button {
-    margin-top: 1rem;
-    padding: 0.5rem 1rem;
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #ffffff);
-    border: none;
-    border-radius: var(--smrt-radius-sm, 4px);
-    cursor: pointer;
-  }
-
   .model-bar {
     padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
     background: var(--smrt-color-surface-container-lowest, #ffffff);
   }
 
-  .smrt-select {
+  .content-agent-chat-container :global(.smrt-select) {
     width: 100%;
     padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
     border-radius: var(--smrt-radius-md, 8px);
@@ -561,15 +553,15 @@ async function handleSendMessage(content: string) {
     outline: none;
     cursor: pointer;
   }
-  
-  .smrt-select:disabled {
+
+  .content-agent-chat-container :global(.smrt-select:disabled) {
     background: var(--smrt-color-surface-container, #f3f4f9);
     color: var(--smrt-color-on-surface-variant, #43474e);
     cursor: not-allowed;
     opacity: 0.7;
   }
 
-  .smrt-select:focus {
+  .content-agent-chat-container :global(.smrt-select:focus) {
     background: var(--smrt-color-surface-variant, #e1e2ec);
   }
 
@@ -598,11 +590,11 @@ async function handleSendMessage(content: string) {
     background: var(--smrt-color-surface-container-lowest, #ffffff);
   }
 
-  .topic-footer .smrt-select {
+  .topic-footer :global(.smrt-select) {
     flex: 1;
   }
 
-  .topic-action-btn {
+  .topic-footer :global(.topic-action-btn) {
     display: inline-flex;
     align-items: center;
     gap: var(--smrt-spacing-1, 4px);
@@ -617,12 +609,12 @@ async function handleSendMessage(content: string) {
     transition: background 0.15s;
   }
 
-  .topic-action-btn:hover:not(:disabled) {
+  .topic-footer :global(.topic-action-btn:hover:not(:disabled)) {
     background: var(--smrt-color-surface-variant, #e1e2e8);
     color: var(--smrt-color-primary, #005ac1);
   }
 
-  .topic-cancel-btn {
+  .topic-footer :global(.topic-cancel-btn) {
     padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
     border: none;
     color: var(--smrt-color-outline, #74777f);
@@ -635,7 +627,7 @@ async function handleSendMessage(content: string) {
     width: 100%;
   }
 
-  .new-topic-input {
+  .new-topic-row :global(.new-topic-input) {
     flex: 1;
     padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
     border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
@@ -646,7 +638,7 @@ async function handleSendMessage(content: string) {
     color: var(--smrt-color-on-surface, #1a1c1e);
   }
 
-  .new-topic-input:focus {
+  .new-topic-row :global(.new-topic-input:focus) {
     border-color: var(--smrt-color-primary, #005ac1);
   }
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"ContentAgentChat.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentAgentChat.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,6BAA6B,EAC7B,0CAA0C,EAC3C,MAAM,gCAAgC,CAAC;AASxC,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,6BAA6B,GAAG,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,0CAA0C,CAAC;IACrE,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAkdD,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ContentAgentChat.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentAgentChat.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,6BAA6B,EAC7B,0CAA0C,EAC3C,MAAM,gCAAgC,CAAC;AASxC,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,6BAA6B,GAAG,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,0CAA0C,CAAC;IACrE,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAodD,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/ContentBodyEditor.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 import type { ImageLike } from '@happyvertical/smrt-images/svelte';
+import { Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import {
   bodyToEditorHtml,
   type ContentBodyFormat,
@@ -996,16 +998,16 @@ function handleEditorDragEnd() {
 
 <div bind:this={rootElement} class="content-body-editor">
   <div class="body-editor-toolbar" aria-label={t(M['content.content_body_editor.toolbar'])}>
-    <button type="button" title={t(M['content.content_body_editor.bold'])} aria-label={t(M['content.content_body_editor.bold'])} onclick={() => runCommand('bold')}>
+    <Button variant="ghost" size="sm" class="editor-toolbar-button" type="button" title={t(M['content.content_body_editor.bold'])} aria-label={t(M['content.content_body_editor.bold'])} onclick={() => runCommand('bold')}>
       <strong>B</strong>
-    </button>
-    <button type="button" title={t(M['content.content_body_editor.italic'])} aria-label={t(M['content.content_body_editor.italic'])} onclick={() => runCommand('italic')}>
+    </Button>
+    <Button variant="ghost" size="sm" class="editor-toolbar-button" type="button" title={t(M['content.content_body_editor.italic'])} aria-label={t(M['content.content_body_editor.italic'])} onclick={() => runCommand('italic')}>
       <em>I</em>
-    </button>
-    <button type="button" title={t(M['content.content_body_editor.heading'])} aria-label={t(M['content.content_body_editor.heading'])} onclick={() => runCommand('formatBlock', 'h2')}>
+    </Button>
+    <Button variant="ghost" size="sm" class="editor-toolbar-button" type="button" title={t(M['content.content_body_editor.heading'])} aria-label={t(M['content.content_body_editor.heading'])} onclick={() => runCommand('formatBlock', 'h2')}>
       H2
-    </button>
-    <button type="button" title={t(M['content.content_body_editor.bulleted_list'])} aria-label={t(M['content.content_body_editor.bulleted_list'])} onclick={() => runCommand('insertUnorderedList')}>
+    </Button>
+    <Button variant="ghost" size="sm" class="editor-toolbar-button" type="button" title={t(M['content.content_body_editor.bulleted_list'])} aria-label={t(M['content.content_body_editor.bulleted_list'])} onclick={() => runCommand('insertUnorderedList')}>
       <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
         <line x1="9" y1="6" x2="21" y2="6"></line>
         <line x1="9" y1="12" x2="21" y2="12"></line>
@@ -1014,24 +1016,24 @@ function handleEditorDragEnd() {
         <circle cx="4" cy="12" r="1"></circle>
         <circle cx="4" cy="18" r="1"></circle>
       </svg>
-    </button>
-    <button type="button" title={t(M['content.content_body_editor.insert_image'])} aria-label={t(M['content.content_body_editor.insert_image'])} onclick={() => onOpenImageChooser?.()}>
+    </Button>
+    <Button variant="ghost" size="sm" class="editor-toolbar-button" type="button" title={t(M['content.content_body_editor.insert_image'])} aria-label={t(M['content.content_body_editor.insert_image'])} onclick={() => onOpenImageChooser?.()}>
       <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <rect x="3" y="3" width="18" height="18" rx="2"></rect>
         <circle cx="8.5" cy="8.5" r="1.5"></circle>
         <polyline points="21 15 16 10 5 21"></polyline>
       </svg>
-    </button>
+    </Button>
 
     <label class="format-select">
       <span>{t(M['content.content_body_editor.save_as'])}</span>
-      <select
+      <Select
         value={currentFormat}
         onchange={(event) => setBodyFormat((event.currentTarget as HTMLSelectElement).value as ContentBodyFormat)}
       >
         <option value="html">HTML</option>
         <option value="markdown">Markdown</option>
-      </select>
+      </Select>
     </label>
   </div>
 
@@ -1041,7 +1043,7 @@ function handleEditorDragEnd() {
       style={`top: ${Math.max(44, selectedImageBox.top + 8)}px; left: ${selectedImageBox.left + selectedImageBox.width / 2}px;`}
       aria-label={t(M['content.content_body_editor.selected_image_controls'])}
     >
-      <button type="button" title={t(M['content.content_body_editor.move_image'])} aria-label={t(M['content.content_body_editor.move_image'])} onpointerdown={startImageMove}>
+      <Button variant="ghost" size="sm" class="editor-popover-button" type="button" title={t(M['content.content_body_editor.move_image'])} aria-label={t(M['content.content_body_editor.move_image'])} onpointerdown={startImageMove}>
         <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M12 2v20"></path>
           <path d="M2 12h20"></path>
@@ -1050,13 +1052,16 @@ function handleEditorDragEnd() {
           <path d="m9 5 3-3 3 3"></path>
           <path d="m9 19 3 3 3-3"></path>
         </svg>
-      </button>
+      </Button>
       <span class="image-control-divider"></span>
-      <button
+      <Button
+        variant="ghost"
+        size="sm"
+        class={`editor-popover-button${selectedImagePlacement === 'left' ? ' editor-popover-button--active' : ''}`}
         type="button"
         title={t(M['content.content_body_editor.wrap_text_on_right'])}
         aria-label={t(M['content.content_body_editor.wrap_text_on_right'])}
-        class:active={selectedImagePlacement === 'left'}
+        aria-pressed={selectedImagePlacement === 'left'}
         onclick={() => applyImagePlacement('left')}
       >
         <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
@@ -1066,12 +1071,15 @@ function handleEditorDragEnd() {
           <path d="M3 17h18"></path>
           <path d="M3 21h14"></path>
         </svg>
-      </button>
-      <button
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={`editor-popover-button${selectedImagePlacement === 'center' || selectedImagePlacement === 'block' ? ' editor-popover-button--active' : ''}`}
         type="button"
         title={t(M['content.content_body_editor.center_image'])}
         aria-label={t(M['content.content_body_editor.center_image'])}
-        class:active={selectedImagePlacement === 'center' || selectedImagePlacement === 'block'}
+        aria-pressed={selectedImagePlacement === 'center' || selectedImagePlacement === 'block'}
         onclick={() => applyImagePlacement('center')}
       >
         <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
@@ -1079,12 +1087,15 @@ function handleEditorDragEnd() {
           <rect x="7" y="9" width="10" height="6" rx="1"></rect>
           <path d="M4 18h16"></path>
         </svg>
-      </button>
-      <button
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={`editor-popover-button${selectedImagePlacement === 'right' ? ' editor-popover-button--active' : ''}`}
         type="button"
         title={t(M['content.content_body_editor.wrap_text_on_left'])}
         aria-label={t(M['content.content_body_editor.wrap_text_on_left'])}
-        class:active={selectedImagePlacement === 'right'}
+        aria-pressed={selectedImagePlacement === 'right'}
         onclick={() => applyImagePlacement('right')}
       >
         <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
@@ -1094,12 +1105,15 @@ function handleEditorDragEnd() {
           <path d="M3 17h18"></path>
           <path d="M7 21h14"></path>
         </svg>
-      </button>
-      <button
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={`editor-popover-button${selectedImagePlacement === 'full' ? ' editor-popover-button--active' : ''}`}
         type="button"
         title={t(M['content.content_body_editor.full_width'])}
         aria-label={t(M['content.content_body_editor.full_width'])}
-        class:active={selectedImagePlacement === 'full'}
+        aria-pressed={selectedImagePlacement === 'full'}
         onclick={() => applyImagePlacement('full')}
       >
         <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -1107,38 +1121,39 @@ function handleEditorDragEnd() {
           <rect x="4" y="8" width="16" height="8" rx="1"></rect>
           <path d="M3 19h18"></path>
         </svg>
-      </button>
+      </Button>
       <span class="image-control-divider"></span>
-      <button type="button" title={t(M['content.content_body_editor.make_smaller'])} aria-label={t(M['content.content_body_editor.make_image_smaller'])} onclick={() => resizeSelectedImage(-IMAGE_WIDTH_STEP)}>
+      <Button variant="ghost" size="sm" class="editor-popover-button" type="button" title={t(M['content.content_body_editor.make_smaller'])} aria-label={t(M['content.content_body_editor.make_image_smaller'])} onclick={() => resizeSelectedImage(-IMAGE_WIDTH_STEP)}>
         <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
           <path d="M5 12h14"></path>
           <path d="M9 8 5 12l4 4"></path>
           <path d="m15 8 4 4-4 4"></path>
         </svg>
-      </button>
-      <button type="button" title={t(M['content.content_body_editor.make_larger'])} aria-label={t(M['content.content_body_editor.make_image_larger'])} onclick={() => resizeSelectedImage(IMAGE_WIDTH_STEP)}>
+      </Button>
+      <Button variant="ghost" size="sm" class="editor-popover-button" type="button" title={t(M['content.content_body_editor.make_larger'])} aria-label={t(M['content.content_body_editor.make_image_larger'])} onclick={() => resizeSelectedImage(IMAGE_WIDTH_STEP)}>
         <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
           <path d="M3 12h18"></path>
           <path d="m7 8-4 4 4 4"></path>
           <path d="m17 8 4 4-4 4"></path>
         </svg>
-      </button>
+      </Button>
       {#if selectedImageAssetId && onUseImageAsThumbnail}
-        <button type="button" title={t(M['content.content_body_editor.use_as_primary_image'])} aria-label={t(M['content.content_body_editor.use_as_primary_image'])} onclick={useSelectedImageAsThumbnail}>
+        <Button variant="ghost" size="sm" class="editor-popover-button" type="button" title={t(M['content.content_body_editor.use_as_primary_image'])} aria-label={t(M['content.content_body_editor.use_as_primary_image'])} onclick={useSelectedImageAsThumbnail}>
           <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
             <path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2 7.5 14 3 9.6l6.2-.9L12 3Z"></path>
           </svg>
-        </button>
+        </Button>
       {/if}
-      <button type="button" title={t(M['content.content_body_editor.remove_image'])} aria-label={t(M['content.content_body_editor.remove_image'])} onclick={removeSelectedImage}>
+      <Button variant="ghost" size="sm" class="editor-popover-button" type="button" title={t(M['content.content_body_editor.remove_image'])} aria-label={t(M['content.content_body_editor.remove_image'])} onclick={removeSelectedImage}>
         <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M3 6h18"></path>
           <path d="M8 6V4h8v2"></path>
           <path d="M19 6l-1 14H6L5 6"></path>
         </svg>
-      </button>
+      </Button>
     </div>
 
+    <!-- raw-primitive-allow: custom press-and-drag image resize handle driven by onpointerdown pointer-capture gesture and absolute positioning; no Button primitive owns this draggable resize grabber -->
     <button
       type="button"
       class="image-resize-handle"
@@ -1207,7 +1222,7 @@ function handleEditorDragEnd() {
     background: var(--smrt-color-surface-container-low, var(--smrt-color-surface-container));
   }
 
-  .body-editor-toolbar button {
+  .body-editor-toolbar :global(.editor-toolbar-button) {
     width: 2rem;
     height: 2rem;
     display: inline-grid;
@@ -1219,7 +1234,7 @@ function handleEditorDragEnd() {
     cursor: pointer;
   }
 
-  .body-editor-toolbar button:hover {
+  .body-editor-toolbar :global(.editor-toolbar-button:hover) {
     border-color: var(--smrt-color-outline-variant);
     background: var(--smrt-color-surface-container);
   }
@@ -1233,7 +1248,7 @@ function handleEditorDragEnd() {
     color: var(--smrt-color-on-surface-variant);
   }
 
-  .format-select select {
+  .format-select :global(.select) {
     min-height: 2rem;
     border: 1px solid var(--smrt-color-outline-variant);
     border-radius: 0.45rem;
@@ -1399,7 +1414,7 @@ function handleEditorDragEnd() {
     backdrop-filter: blur(10px);
   }
 
-  .image-control-popover button,
+  .image-control-popover :global(.editor-popover-button),
   .image-resize-handle {
     display: inline-grid;
     place-items: center;
@@ -1409,14 +1424,14 @@ function handleEditorDragEnd() {
     cursor: pointer;
   }
 
-  .image-control-popover button {
+  .image-control-popover :global(.editor-popover-button) {
     width: 1.85rem;
     height: 1.85rem;
     border-radius: var(--smrt-radius-full, 9999px);
   }
 
-  .image-control-popover button:hover,
-  .image-control-popover button.active {
+  .image-control-popover :global(.editor-popover-button:hover),
+  .image-control-popover :global(.editor-popover-button.editor-popover-button--active) {
     background: var(--smrt-color-surface-container);
     color: var(--smrt-color-primary);
   }

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

@@ -1 +1 @@
-{"version":3,"file":"ContentBodyEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentBodyEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAEnE,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAOtB,MAAM,mBAAmB,CAAC;AAI3B,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,iBAAiB,CAAC;IAC9B,MAAM,EAAE,gBAAgB,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACrD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,CACf,QAAQ,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,KAChC,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC;CACvC;AAqlCD,QAAA,MAAM,iBAAiB;8BApdW,GAAG;wBAIT,MAAM;MAgd6B,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ContentBodyEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentBodyEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAInE,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAOtB,MAAM,mBAAmB,CAAC;AAI3B,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,iBAAiB,CAAC;IAC9B,MAAM,EAAE,gBAAgB,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACrD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,CACf,QAAQ,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,KAChC,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC;CACvC;AAwlCD,QAAA,MAAM,iBAAiB;8BArdW,GAAG;wBAIT,MAAM;MAid6B,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/ContentClaimAuditTool.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type {
   FactAuditClaimData,
   FactAuditStateData,
@@ -197,22 +198,22 @@ async function recheckFactClaims(claimIds: string[]) {
         <span><strong>{factAudit?.counts.contradicted ?? 0}</strong> contradicted</span>
         <span><strong>{factAudit?.counts.needs_review ?? 0}</strong> review</span>
       </div>
-      <button
+      <Button
+        variant="secondary"
         type="button"
-        class="secondary-button"
         disabled={busy || selectedClaimCount === 0}
         onclick={() => void recheckFactClaims(selectedClaimIds)}
       >
         {busy ? 'Checking...' : `Recheck selected (${selectedClaimCount})`}
-      </button>
-      <button
+      </Button>
+      <Button
+        variant="secondary"
         type="button"
-        class="secondary-button"
         disabled={busy}
         onclick={() => void repairFactAudit()}
       >
         {busy ? 'Working...' : 'Repair audit'}
-      </button>
+      </Button>
     </div>
     <p class="empty-copy">
       {t(M['content.claim_audit_tool.article_claims_help'])}
@@ -244,6 +245,7 @@ async function recheckFactClaims(claimIds: string[]) {
               <details class="tool-card">
                 <summary>
                   <label class="claim-audit-select">
+                    <!-- 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={isClaimSelected(claim)}
@@ -258,9 +260,9 @@ async function recheckFactClaims(claimIds: string[]) {
                 </summary>
                 <div class="tool-card-body">
                   <div class="claim-audit-actions">
-                    <button
+                    <Button
+                      variant="secondary"
                       type="button"
-                      class="secondary-button"
                       disabled={busy || !getClaimId(claim)}
                       onclick={() => {
                         const claimId = getClaimId(claim);
@@ -268,7 +270,7 @@ async function recheckFactClaims(claimIds: string[]) {
                       }}
                     >
                       {t(M['content.claim_audit_tool.recheck_support'])}
-                    </button>
+                    </Button>
                   </div>
                   {#if claim.claimQuote}
                     <p><strong>{t(M['content.claim_audit_tool.article_claim_label'])}</strong> {claim.claimQuote}</p>
@@ -377,21 +379,6 @@ async function recheckFactClaims(claimIds: string[]) {
     line-height: 1;
   }
 
-  .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/ContentClaimAuditTool.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentClaimAuditTool.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentClaimAuditTool.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAEV,kBAAkB,EACnB,MAAM,wBAAwB,CAAC;AAMhC,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;CAChE;AA8RD,QAAA,MAAM,qBAAqB;;MAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ContentClaimAuditTool.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentClaimAuditTool.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,kBAAkB,EACnB,MAAM,wBAAwB,CAAC;AAMhC,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;CAChE;AAgSD,QAAA,MAAM,qBAAqB;;MAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}