@happyvertical/smrt-content 0.34.4 → 0.34.6

package/dist/svelte/components/ContentContributorManager.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { ContentContributorData } from '../../mock-smrt-client';
 import { M } from '../i18n.contribution.js';
 
@@ -45,7 +46,7 @@ function handleSubmit() {
       <h3>Contributors</h3>
       <p>{t(M['content.contributor_manager.intro'])}</p>
     </div>
-    <button type="button" onclick={() => (editing = {})}>{t(M['content.contributor_manager.add_contributor'])}</button>
+    <Button variant="ghost" type="button" onclick={() => (editing = {})}>{t(M['content.contributor_manager.add_contributor'])}</Button>
   </header>
 
   <div class="layout">
@@ -57,9 +58,9 @@ function handleSubmit() {
             <div>{contributor.trustLevel || 'standard'}</div>
           </div>
           <div class="actions">
-            <button type="button" class="secondary" onclick={() => (editing = contributor)}>Edit</button>
+            <Button variant="secondary" type="button" onclick={() => (editing = contributor)}>Edit</Button>
             {#if onDelete}
-              <button type="button" class="danger" onclick={() => onDelete?.(contributor)}>Delete</button>
+              <Button variant="danger" type="button" onclick={() => onDelete?.(contributor)}>Delete</Button>
             {/if}
           </div>
         </article>
@@ -91,7 +92,7 @@ function handleSubmit() {
       </label>
 
       <div class="actions">
-        <button type="submit">{t(M['content.contributor_manager.save_contributor'])}</button>
+        <Button variant="primary" type="submit">{t(M['content.contributor_manager.save_contributor'])}</Button>
       </div>
     </form>
   </div>

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

@@ -1 +1 @@
-{"version":3,"file":"ContentContributorManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentContributorManager.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,MAAM,WAAW,KAAK;IACpB,YAAY,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACxC,MAAM,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,sBAAsB,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC1D;AAgGD,QAAA,MAAM,yBAAyB,2CAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"ContentContributorManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentContributorManager.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,MAAM,WAAW,KAAK;IACpB,YAAY,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACxC,MAAM,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,sBAAsB,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC1D;AAiGD,QAAA,MAAM,yBAAyB,2CAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/svelte/components/ContentCorrectionsTool.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { ContentCorrectionData, FactData } from '../../mock-smrt-client';
 import { createClient } from '../../mock-smrt-client';
 import { normalizeApiBaseUrl } from '../api';
@@ -212,13 +213,14 @@ async function issueCorrection() {
       {t(M['content.corrections_tool.publish_immediately'])}
     </label>
 
-    <button
+    <Button
+      variant="primary"
       type="button"
       disabled={busy || correctionSummary.trim().length === 0}
       onclick={() => void issueCorrection()}
     >
       {busy ? 'Issuing correction...' : 'Issue correction'}
-    </button>
+    </Button>
 
     <div class="tool-list">
       <div class="section-caption">{t(M['content.corrections_tool.published_history'])}</div>
@@ -271,21 +273,6 @@ async function issueCorrection() {
     font-family: inherit;
   }
 
-  button {
-    border: none;
-    border-radius: 0.5rem;
-    padding: 0.7rem 0.95rem;
-    background: var(--smrt-color-primary);
-    color: var(--smrt-color-on-primary, white);
-    cursor: pointer;
-    font-weight: var(--smrt-typography-weight-semibold, 600);
-  }
-
-  button:disabled {
-    cursor: not-allowed;
-    opacity: 0.65;
-  }
-
   .tool-card {
     display: flex;
     flex-direction: column;

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

@@ -1 +1 @@
-{"version":3,"file":"ContentCorrectionsTool.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentCorrectionsTool.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAY,MAAM,wBAAwB,CAAC;AAM9E,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,qBAAqB,EAAE,KAAK,IAAI,CAAC;CACtE;AAoOD,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ContentCorrectionsTool.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentCorrectionsTool.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAY,MAAM,wBAAwB,CAAC;AAM9E,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,qBAAqB,EAAE,KAAK,IAAI,CAAC;CACtE;AAqOD,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/ContentEditor.svelte

@@ -2,6 +2,7 @@
 import type { ImageLike } from '@happyvertical/smrt-images/svelte';
 import { ImageUploader } from '@happyvertical/smrt-images/svelte';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { untrack } from 'svelte';
 import { extractBodyImages, resolveBodyFormat } from '../../body-format';
 import type {
@@ -929,7 +930,9 @@ function removeAsset(id: string) {
       {#if editorError}
         <div class="editor-message editor-message--error" role="alert" aria-live="assertive">
           <span>{editorError}</span>
-          <button
+          <Button
+            variant="ghost"
+            size="sm"
             type="button"
             class="editor-message__dismiss"
             onclick={() => {
@@ -938,7 +941,7 @@ function removeAsset(id: string) {
             aria-label={t(M['content.content_editor.dismiss_message'])}
           >
             ×
-          </button>
+          </Button>
         </div>
       {/if}
       <div class="editor-toolbar">
@@ -974,10 +977,10 @@ function removeAsset(id: string) {
         </div>
         {#if showActions}
           <div class="editor-toolbar-right">
-            <button type="submit" class="save-button" disabled={saveDisabled}>{content ? 'Update Content' : 'Save Content'}</button>
-            <button type="button" class="cancel-button" onclick={handleCancel}>
+            <Button variant="primary" type="submit" class="save-button" disabled={saveDisabled}>{content ? 'Update Content' : 'Save Content'}</Button>
+            <Button variant="secondary" type="button" onclick={handleCancel}>
               Cancel
-            </button>
+            </Button>
           </div>
         {/if}
       </div>
@@ -1008,9 +1011,9 @@ function removeAsset(id: string) {
               fields: lastAppliedFields.join(', '),
             })}
           </span>
-          <button type="button" class="undo-banner__btn" onclick={undoLastApply}>
+          <Button variant="ghost" size="sm" type="button" class="undo-banner__btn" onclick={undoLastApply}>
             Undo{fieldUndoStack.length > 1 ? ` (${fieldUndoStack.length})` : ''}
-          </button>
+          </Button>
         </div>
       {/if}
 
@@ -1083,14 +1086,14 @@ function removeAsset(id: string) {
                         <img class="media-item-image" src={getAssetImageSource(asset)} alt={asset.name || 'Asset image'} />
                         <div class="media-item-overlay">
                            {#if assetId && assetId !== formData.thumbnailAssetId}
-                             <button type="button" class="btn-make-thumbnail" title={t(M['content.content_editor.make_thumbnail'])} onclick={() => setThumbnail(assetId)}>
+                             <Button variant="ghost" size="sm" type="button" class="btn-make-thumbnail" aria-label={t(M['content.content_editor.make_thumbnail'])} title={t(M['content.content_editor.make_thumbnail'])} onclick={() => setThumbnail(assetId)}>
                                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
-                             </button>
+                             </Button>
                            {/if}
                            {#if assetId}
-                             <button type="button" class="btn-remove-asset" title={t(M['content.content_editor.remove'])} onclick={() => removeAsset(assetId)}>
+                             <Button variant="ghost" size="sm" type="button" class="btn-remove-asset" aria-label={t(M['content.content_editor.remove'])} title={t(M['content.content_editor.remove'])} onclick={() => removeAsset(assetId)}>
                                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
-                             </button>
+                             </Button>
                            {/if}
                         </div>
                         {#if assetId === formData.thumbnailAssetId}
@@ -1103,14 +1106,14 @@ function removeAsset(id: string) {
                   <p class="no-media-text">{t(M['content.content_editor.no_images_attached'])}</p>
                 {/if}
                 {#if !showImageUploader}
-                  <button type="button" class="add-image-btn" onclick={() => showImageUploader = true} style="margin-top: 1rem;">
+                  <Button variant="ghost" type="button" class="add-image-btn" onclick={() => showImageUploader = true} style="margin-top: 1rem;">
                     <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                       <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                       <circle cx="8.5" cy="8.5" r="1.5"></circle>
                       <polyline points="21 15 16 10 5 21"></polyline>
                     </svg>
                     {t(M['content.content_editor.add_image'])}
-                  </button>
+                  </Button>
                 {/if}
 
                 {#if showImageUploader}
@@ -1178,7 +1181,7 @@ function removeAsset(id: string) {
                   {#each formData.referenceIds as refId}
                     <div class="reference-badge">
                       <span class="ref-id">{refId}</span>
-                      <button type="button" class="remove-ref-btn" onclick={() => removeReference(refId)}>×</button>
+                      <Button variant="ghost" size="sm" type="button" class="remove-ref-btn" aria-label={t(M['content.content_editor.remove'])} title={t(M['content.content_editor.remove'])} onclick={() => removeReference(refId)}>×</Button>
                     </div>
                   {/each}
                   {#if formData.referenceIds.length === 0 && auditReferences.length === 0}
@@ -1207,20 +1210,26 @@ function removeAsset(id: string) {
                          <option value={status}>{status}</option>
                        {/each}
                      </select>
-                     <button
+                     <Button
+                       variant="ghost"
+                       size="sm"
                        type="button"
+                       class="evidence-action-button"
                        disabled={selectedEvidenceCount === 0 || Boolean(evidenceBusy)}
                        onclick={() => void updateSelectedEvidenceStatus()}
                      >
                        Mark
-                     </button>
-                     <button
+                     </Button>
+                     <Button
+                       variant="ghost"
+                       size="sm"
                        type="button"
+                       class="evidence-action-button"
                        disabled={selectedEvidenceCount === 0 || Boolean(evidenceBusy)}
                        onclick={() => void repairSelectedReferenceEvidence()}
                      >
                        {t(M['content.content_editor.repair_resources'])}
-                     </button>
+                     </Button>
                    </div>
                    {#each auditReferences as reference, referenceIndex (reference._auditSourceId ?? reference.id ?? reference.url ?? reference.title)}
                      {@const resourceClaims = getResourceClaimsForReference(reference)}
@@ -1245,13 +1254,16 @@ function removeAsset(id: string) {
                                  : M['content.content_editor.evidence_claim_plural'],
                              ),
                            })}</span>
-                           <button
+                           <Button
+                             variant="ghost"
+                             size="sm"
                              type="button"
+                             class="evidence-action-button"
                              disabled={Boolean(evidenceBusy)}
                              onclick={() => void repairReferenceEvidence(reference)}
                            >
                              {evidenceBusy === `repair:${reference.id}` ? 'Repairing...' : 'Repair'}
-                           </button>
+                           </Button>
                          </div>
                        </div>
                        {#if resourceClaims.length > 0}
@@ -1311,26 +1323,31 @@ function removeAsset(id: string) {
                                  {/each}
                                  <div class="resource-claim-actions">
                                    {#each evidenceStatuses as status}
-                                     <button
+                                     <Button
+                                       variant="ghost"
+                                       size="sm"
                                        type="button"
+                                       class="evidence-action-button"
                                        disabled={evidenceIds.length === 0 || Boolean(evidenceBusy)}
                                        onclick={() => void updateEvidenceStatus(evidenceIds, status)}
                                      >
                                        {status}
-                                     </button>
+                                     </Button>
                                    {/each}
                                  </div>
                                </div>
                              </details>
                            {/each}
                            {#if resourceClaims.length > 6}
-                             <button
+                             <Button
+                               variant="ghost"
+                               size="sm"
                                type="button"
                                class="resource-claim-more"
                                onclick={() => toggleReferenceClaims(reference, referenceIndex)}
                              >
                                {resourceClaimsExpanded ? 'Show fewer' : `+ ${resourceClaims.length - 6} more`}
-                             </button>
+                             </Button>
                            {/if}
                          </div>
                        {/if}
@@ -1340,7 +1357,7 @@ function removeAsset(id: string) {
                {/if}
                <div class="add-reference-row">
                   <input type="text" bind:value={newReferenceId} placeholder={t(M['content.content_editor.reference_id_or_url_placeholder'])} />
-                  <button type="button" onclick={addReference}>Add</button>
+                  <Button variant="ghost" type="button" class="add-reference-button" onclick={addReference}>Add</Button>
                </div>
             </div>
 
@@ -1664,7 +1681,7 @@ function removeAsset(id: string) {
     color: var(--smrt-color-on-surface);
   }
 
-  .remove-ref-btn {
+  .reference-badge :global(.remove-ref-btn) {
     background: none;
     border: none;
     color: var(--smrt-color-outline);
@@ -1675,7 +1692,7 @@ function removeAsset(id: string) {
     margin-left: 0.25rem;
   }
 
-  .remove-ref-btn:hover {
+  .reference-badge :global(.remove-ref-btn:hover) {
     color: var(--smrt-color-error);
   }
 
@@ -1725,9 +1742,7 @@ function removeAsset(id: string) {
     white-space: nowrap;
   }
 
-  .reference-detail-actions button,
-  .resource-claim-actions button,
-  .evidence-bulk-toolbar button {
+  .references-section :global(.evidence-action-button) {
     background: var(--smrt-color-surface);
     border: 1px solid var(--smrt-color-outline-variant);
     border-radius: 0.375rem;
@@ -1738,9 +1753,7 @@ function removeAsset(id: string) {
     padding: 0.25rem 0.5rem;
   }
 
-  .reference-detail-actions button:disabled,
-  .resource-claim-actions button:disabled,
-  .evidence-bulk-toolbar button:disabled {
+  .references-section :global(.evidence-action-button:disabled) {
     cursor: not-allowed;
     opacity: 0.55;
   }
@@ -1796,7 +1809,7 @@ function removeAsset(id: string) {
     background: color-mix(in srgb, var(--smrt-color-error) 12%, transparent);
   }
 
-  .editor-message__dismiss {
+  .editor-message :global(.editor-message__dismiss) {
     border: none;
     background: transparent;
     color: inherit;
@@ -1808,18 +1821,19 @@ function removeAsset(id: string) {
 
   .reference-detail-header a,
   .reference-detail-header span,
-  .resource-claim-body,
-  .resource-claim-more {
+  .resource-claim-body {
     color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
   }
 
-  .resource-claim-more {
+  .references-section :global(.resource-claim-more) {
     align-self: flex-start;
     border: 0;
     background: transparent;
     padding: 0;
     cursor: pointer;
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
@@ -1943,7 +1957,7 @@ function removeAsset(id: string) {
     flex: 1;
   }
 
-  .add-reference-row button {
+  .add-reference-row :global(.add-reference-button) {
     background: var(--smrt-color-surface);
     border: 1px solid var(--smrt-color-outline);
     color: var(--smrt-color-on-surface-variant);
@@ -1953,11 +1967,11 @@ function removeAsset(id: string) {
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
-  .add-reference-row button:hover {
+  .add-reference-row :global(.add-reference-button:hover) {
     background: var(--smrt-color-surface-container-low, #f1f5f9);
   }
   
-  .add-image-btn {
+  .media-gallery :global(.add-image-btn) {
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -1970,14 +1984,14 @@ function removeAsset(id: string) {
     cursor: pointer;
     transition: all 0.2s;
   }
-  
-  .add-image-btn:hover {
+
+  .media-gallery :global(.add-image-btn:hover) {
     border-color: var(--smrt-color-primary, #94a3b8);
     color: var(--smrt-color-on-surface, #1e293b);
     background: var(--smrt-color-surface-container-low, #f1f5f9);
   }
 
-  .save-button {
+  .editor-toolbar-right :global(.save-button) {
     background: linear-gradient(
       135deg,
       var(--smrt-color-primary) 0%,
@@ -1992,27 +2006,17 @@ function removeAsset(id: string) {
     transition: transform 0.2s, box-shadow 0.2s;
   }
 
-  .save-button:hover {
+  .editor-toolbar-right :global(.save-button:hover) {
     transform: translateY(-1px);
     box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--smrt-color-primary) 40%, transparent);
   }
 
-  .save-button:disabled {
+  .editor-toolbar-right :global(.save-button:disabled) {
     opacity: 0.65;
     transform: none;
     box-shadow: none;
   }
 
-  .cancel-button {
-    background: var(--smrt-color-surface);
-    color: var(--smrt-color-on-surface);
-    border: 1px solid var(--smrt-color-outline-variant);
-    padding: 0.75rem 1.25rem;
-    border-radius: 0.5rem;
-    font-weight: var(--smrt-typography-weight-semibold, 600);
-    cursor: pointer;
-  }
-
   .save-notice {
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     color: var(--smrt-color-primary, #3b82f6);
@@ -2069,7 +2073,7 @@ function removeAsset(id: string) {
     flex-shrink: 0;
   }
 
-  .undo-banner__btn {
+  .undo-banner :global(.undo-banner__btn) {
     background: var(--smrt-color-surface);
     color: var(--smrt-color-primary);
     border: 1px solid var(--smrt-color-outline);
@@ -2082,7 +2086,7 @@ function removeAsset(id: string) {
     transition: all 0.15s ease;
   }
 
-  .undo-banner__btn:hover {
+  .undo-banner :global(.undo-banner__btn:hover) {
     background: var(--smrt-color-surface-variant);
     border-color: var(--smrt-color-primary);
   }
@@ -2138,7 +2142,8 @@ function removeAsset(id: string) {
     opacity: 1;
   }
 
-  .media-item-overlay button {
+  .media-item-overlay :global(.btn-make-thumbnail),
+  .media-item-overlay :global(.btn-remove-asset) {
     padding: 0.4rem;
     border: none;
     border-radius: 0.375rem;
@@ -2151,12 +2156,13 @@ function removeAsset(id: string) {
     justify-content: center;
   }
 
-  .media-item-overlay button:hover {
+  .media-item-overlay :global(.btn-make-thumbnail:hover),
+  .media-item-overlay :global(.btn-remove-asset:hover) {
     transform: scale(1.1);
     background: var(--smrt-color-surface);
   }
 
-  .btn-remove-asset:hover {
+  .media-item-overlay :global(.btn-remove-asset:hover) {
     background: var(--smrt-color-error-container) !important;
     color: var(--smrt-color-error) !important;
     border-color: var(--smrt-color-error) !important;

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentEditor.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAEV,mCAAmC,EACnC,0CAA0C,EAE3C,MAAM,gCAAgC,CAAC;AAKxC,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,wBAAwB,CAAC;AAiBhC,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,0CAA0C,CAAC;IACrE,wBAAwB,CAAC,EAAE,mCAAmC,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,MAAM,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAuuCD,QAAA,MAAM,aAAa;;MAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ContentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentEditor.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAEV,mCAAmC,EACnC,0CAA0C,EAE3C,MAAM,gCAAgC,CAAC;AAKxC,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,wBAAwB,CAAC;AAiBhC,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,0CAA0C,CAAC;IACrE,wBAAwB,CAAC,EAAE,mCAAmC,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,MAAM,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAwuCD,QAAA,MAAM,aAAa;;MAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/ContentGovernanceAssignmentEditor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type {
   ContentGovernanceAssignmentData,
   ContentGovernanceProfileData,
@@ -158,11 +159,11 @@ function handleSubmit() {
   </div>
 
   <div class="actions">
-    <button type="submit">{t(M['content.governance_assignment_editor.save_assignment'])}</button>
+    <Button variant="primary" type="submit">{t(M['content.governance_assignment_editor.save_assignment'])}</Button>
     {#if onCancel}
-      <button type="button" class="secondary" onclick={() => onCancel?.()}>
+      <Button variant="secondary" type="button" onclick={() => onCancel?.()}>
         Cancel
-      </button>
+      </Button>
     {/if}
   </div>
 </form>

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

@@ -1 +1 @@
-{"version":3,"file":"ContentGovernanceAssignmentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernanceAssignmentEditor.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,+BAA+B,EAC/B,4BAA4B,EAC7B,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC,+BAA+B,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAC1C,MAAM,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,+BAA+B,CAAC,KAAK,IAAI,CAAC;IACvE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAqKD,QAAA,MAAM,iCAAiC,2CAAwC,CAAC;AAChF,KAAK,iCAAiC,GAAG,UAAU,CAAC,OAAO,iCAAiC,CAAC,CAAC;AAC9F,eAAe,iCAAiC,CAAC"}
+{"version":3,"file":"ContentGovernanceAssignmentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernanceAssignmentEditor.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,+BAA+B,EAC/B,4BAA4B,EAC7B,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC,+BAA+B,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAC1C,MAAM,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,+BAA+B,CAAC,KAAK,IAAI,CAAC;IACvE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAsKD,QAAA,MAAM,iCAAiC,2CAAwC,CAAC;AAChF,KAAK,iCAAiC,GAAG,UAAU,CAAC,OAAO,iCAAiC,CAAC,CAAC;AAC9F,eAAe,iCAAiC,CAAC"}

package/dist/svelte/components/ContentGovernanceManager.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 ContentGovernanceAssignmentData,
@@ -141,9 +142,9 @@ function cancelEditing() {
       <h3>{t(M['content.governance_manager.content_governance'])}</h3>
       <p>{t(M['content.governance_manager.manage_governed_content'])}</p>
     </div>
-    <button type="button" class="secondary" onclick={() => void loadDefinitions()}>
+    <Button variant="secondary" type="button" onclick={() => void loadDefinitions()}>
       Refresh
-    </button>
+    </Button>
   </div>
 
   {#if loading}
@@ -155,12 +156,12 @@ function cancelEditing() {
       <section>
         <div class="section-header">
           <h4>Policies</h4>
-          <button type="button" onclick={() => {
+          <Button variant="primary" type="button" onclick={() => {
             editMode = 'policy';
             editingPolicy = null;
           }}>
             {t(M['content.governance_manager.add_policy'])}
-          </button>
+          </Button>
         </div>
         {#if editMode === 'policy'}
           {#key editingPolicy?.id ?? editingPolicy?.key ?? 'new-policy'}
@@ -179,16 +180,16 @@ function cancelEditing() {
                 <span>{policy.key} · {policy.kind}</span>
               </div>
               <div class="actions">
-                <button type="button" class="secondary" onclick={() => {
+                <Button variant="secondary" type="button" onclick={() => {
                   editMode = 'policy';
                   editingPolicy = policy;
                 }}>
                   Edit
-                </button>
+                </Button>
                 {#if definitions.persisted.policies.some((item) => item.key === policy.key)}
-                  <button type="button" class="secondary" onclick={() => void deletePolicy(policy.id)}>
+                  <Button variant="danger" type="button" onclick={() => void deletePolicy(policy.id)}>
                     {t(M['content.governance_manager.delete_override'])}
-                  </button>
+                  </Button>
                 {/if}
               </div>
             </article>
@@ -199,12 +200,12 @@ function cancelEditing() {
       <section>
         <div class="section-header">
           <h4>Profiles</h4>
-          <button type="button" onclick={() => {
+          <Button variant="primary" type="button" onclick={() => {
             editMode = 'profile';
             editingProfile = null;
           }}>
             {t(M['content.governance_manager.add_profile'])}
-          </button>
+          </Button>
         </div>
         {#if editMode === 'profile'}
           {#key editingProfile?.id ?? editingProfile?.key ?? 'new-profile'}
@@ -224,16 +225,16 @@ function cancelEditing() {
                 <span>{profile.key} · {profile.requirements.length} requirement(s)</span>
               </div>
               <div class="actions">
-                <button type="button" class="secondary" onclick={() => {
+                <Button variant="secondary" type="button" onclick={() => {
                   editMode = 'profile';
                   editingProfile = profile;
                 }}>
                   Edit
-                </button>
+                </Button>
                 {#if definitions.persisted.profiles.some((item) => item.key === profile.key)}
-                  <button type="button" class="secondary" onclick={() => void deleteProfile(profile.id)}>
+                  <Button variant="danger" type="button" onclick={() => void deleteProfile(profile.id)}>
                     {t(M['content.governance_manager.delete_override'])}
-                  </button>
+                  </Button>
                 {/if}
               </div>
             </article>
@@ -244,12 +245,12 @@ function cancelEditing() {
       <section>
         <div class="section-header">
           <h4>Assignments</h4>
-          <button type="button" onclick={() => {
+          <Button variant="primary" type="button" onclick={() => {
             editMode = 'assignment';
             editingAssignment = null;
           }}>
             {t(M['content.governance_manager.add_assignment'])}
-          </button>
+          </Button>
         </div>
         {#if editMode === 'assignment'}
           {#key editingAssignment?.id ?? editingAssignment?.key ?? 'new-assignment'}
@@ -272,16 +273,16 @@ function cancelEditing() {
                 </span>
               </div>
               <div class="actions">
-                <button type="button" class="secondary" onclick={() => {
+                <Button variant="secondary" type="button" onclick={() => {
                   editMode = 'assignment';
                   editingAssignment = assignment;
                 }}>
                   Edit
-                </button>
+                </Button>
                 {#if assignment.id}
-                  <button type="button" class="secondary" onclick={() => void deleteAssignment(assignment.id)}>
+                  <Button variant="danger" type="button" onclick={() => void deleteAssignment(assignment.id)}>
                     Delete
-                  </button>
+                  </Button>
                 {/if}
               </div>
             </article>

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

@@ -1 +1 @@
-{"version":3,"file":"ContentGovernanceManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernanceManager.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,gCAAgC,EAItC,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AASnF,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,8BAA8B,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,gCAAgC,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3E;AAiRD,QAAA,MAAM,wBAAwB,2CAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"ContentGovernanceManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernanceManager.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,gCAAgC,EAItC,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AASnF,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,8BAA8B,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,gCAAgC,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3E;AAkRD,QAAA,MAAM,wBAAwB,2CAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}