@happyvertical/smrt-content 0.34.5 → 0.34.7

package/dist/svelte/components/ContentGovernancePanel.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 import { ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
+import { Input, Select, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import {
   type ContentCorrectionData,
   type ContentGovernanceDefinitionsData,
@@ -1078,22 +1080,22 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
             <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={factAuditBusy || selectedClaimCount === 0}
             onclick={() => void recheckSelectedClaims()}
           >
             {factAuditBusy ? 'Checking...' : `Recheck selected (${selectedClaimCount})`}
-          </button>
-          <button
+          </Button>
+          <Button
+            variant="secondary"
             type="button"
-            class="secondary-button"
             disabled={factAuditBusy}
             onclick={() => void repairFactAudit()}
           >
             {factAuditBusy ? 'Repairing...' : 'Repair audit'}
-          </button>
+          </Button>
         </div>
         <p class="claim-audit-help">
           {t(M['content.governance_panel.article_claims_help'])}
@@ -1127,6 +1129,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                   <details class="claim-audit-item">
                     <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)}
@@ -1141,9 +1144,9 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                     </summary>
                     <div class="claim-audit-item__body">
                       <div class="claim-audit-item__actions">
-                        <button
+                        <Button
+                          variant="secondary"
                           type="button"
-                          class="secondary-button"
                           disabled={factAuditBusy || !getClaimId(claim)}
                           onclick={() => {
                             const claimId = getClaimId(claim);
@@ -1151,7 +1154,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                           }}
                         >
                           {t(M['content.governance_panel.recheck_support'])}
-                        </button>
+                        </Button>
                       </div>
                       {#if claim.claimQuote}
                         <p><strong>{t(M['content.governance_panel.article_claim_label'])}</strong> {claim.claimQuote}</p>
@@ -1233,13 +1236,15 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                         {fact.status} · confidence {formatPercent(fact.confidence)}
                       </span>
                     </div>
-                    <button
+                    <Button
+                      variant="ghost"
+                      size="sm"
                       type="button"
                       class="fact-chip__remove"
                       onclick={() => fact.id && removeFact(fact.id)}
                     >
                       Remove
-                    </button>
+                    </Button>
                   </div>
                 {/each}
               </div>
@@ -1248,14 +1253,14 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
 
           {#if showFactCatalog}
             <div class="fact-search">
-              <input
+              <Input
                 type="text"
                 bind:value={factQuery}
                 placeholder={t(M['content.governance_panel.search_fact_catalog'])}
               />
-              <button type="button" onclick={searchFactsFirstPage}>
+              <Button variant="primary" type="button" onclick={searchFactsFirstPage}>
                 Search
-              </button>
+              </Button>
             </div>
 
             {#if catalogError}
@@ -1278,13 +1283,15 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                           {fact.status} · {fact.domain || 'general'} · confidence {formatPercent(fact.confidence)}
                         </span>
                       </div>
-                      <button
+                      <Button
+                        variant="ghost"
+                        size="sm"
                         type="button"
                         disabled={!fact.id || selectedFactIds.includes(fact.id ?? '')}
                         onclick={() => addFact(fact)}
                       >
                         {!fact.id || selectedFactIds.includes(fact.id ?? '') ? 'Selected' : 'Add'}
-                      </button>
+                      </Button>
                     </div>
                   {/each}
                 </div>
@@ -1299,22 +1306,24 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                     {/if}
                   </span>
                   <div class="fact-pagination__actions">
-                    <button
+                    <Button
+                      variant="ghost"
+                      size="sm"
                       type="button"
-                      class="secondary-button"
                       disabled={catalogLoading || catalogPage <= 1}
                       onclick={browsePreviousFacts}
                     >
                       Previous
-                    </button>
-                    <button
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
                       type="button"
-                      class="secondary-button"
                       disabled={catalogLoading || !catalogHasNextPage}
                       onclick={browseNextFacts}
                     >
                       Next
-                    </button>
+                    </Button>
                   </div>
                 </div>
               {/if}
@@ -1354,13 +1363,13 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
       {#if reviewProfiles.length > 0}
         <label class="workflow-field">
           {t(M['content.governance_panel.review_profile'])}
-          <select bind:value={activeReviewProfileKey}>
+          <Select bind:value={activeReviewProfileKey}>
             {#each reviewProfiles as profile (profile.profileKey)}
               <option value={profile.profileKey}>
                 {formatProfileLabel(profile.profileKey)}
               </option>
             {/each}
-          </select>
+          </Select>
         </label>
       {/if}
 
@@ -1414,7 +1423,8 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
 
       <div class="review-actions">
         {#each activeProfileReviewActions as action (action.policyKey ?? action.kind)}
-          <button
+          <Button
+            variant="primary"
             type="button"
             disabled={reviewBusy !== null}
             onclick={() => void runReview(action)}
@@ -1424,7 +1434,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
             {:else}
               Run {action.label}
             {/if}
-          </button>
+          </Button>
         {/each}
       </div>
 
@@ -1432,25 +1442,26 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
         {#if availableCustomPolicies.length > 0}
           <label class="workflow-field">
             {t(M['content.governance_panel.app_review_policy'])}
-            <select bind:value={activeCustomPolicyKey}>
+            <Select bind:value={activeCustomPolicyKey}>
               {#each availableCustomPolicies as policy (policy.key)}
                 <option value={policy.key}>
                   {policy.label}
                 </option>
               {/each}
-            </select>
+            </Select>
           </label>
         {/if}
 
         <label class="workflow-field">
           {customReviewButtonLabel}
-          <textarea
-            rows="3"
+          <Textarea
+            rows={3}
             bind:value={customReviewText}
             placeholder={t(M['content.governance_panel.optional_review_instructions'])}
-          ></textarea>
+          ></Textarea>
         </label>
-        <button
+        <Button
+          variant="primary"
           type="button"
           disabled={reviewBusy !== null || !canRunCustomReview()}
           onclick={() =>
@@ -1468,7 +1479,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
           {:else}
             Run {customReviewButtonLabel}
           {/if}
-        </button>
+        </Button>
       </div>
 
       <div class="review-list">
@@ -1657,7 +1668,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
 
         <label class="workflow-field">
           Summary
-          <input
+          <Input
             type="text"
             bind:value={correctionSummary}
             placeholder={t(M['content.governance_panel.what_was_wrong'])}
@@ -1666,44 +1677,46 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
 
         <label class="workflow-field">
           {t(M['content.governance_panel.related_fact'])}
-          <select bind:value={correctionFactId}>
+          <Select bind:value={correctionFactId}>
             <option value="">{t(M['content.governance_panel.general_correction'])}</option>
             {#each selectedFactsResolved as fact (fact.id)}
               <option value={fact.id ?? ''}>{fact.textRefined}</option>
             {/each}
-          </select>
+          </Select>
         </label>
 
         <label class="workflow-field">
           {t(M['content.governance_panel.corrected_fact_text'])}
-          <textarea
-            rows="4"
+          <Textarea
+            rows={4}
             bind:value={correctedFactText}
             placeholder={t(M['content.governance_panel.provide_corrected_wording'])}
-          ></textarea>
+          ></Textarea>
         </label>
 
         <label class="workflow-field">
           {t(M['content.governance_panel.public_note'])}
-          <textarea
-            rows="3"
+          <Textarea
+            rows={3}
             bind:value={correctionPublicNote}
             placeholder={t(M['content.governance_panel.optional_public_correction_note'])}
-          ></textarea>
+          ></Textarea>
         </label>
 
         <label class="checkbox-row">
+          <!-- 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={publishCorrection} />
           {t(M['content.governance_panel.publish_immediately'])}
         </label>
 
-        <button
+        <Button
+          variant="primary"
           type="button"
           disabled={correctionBusy || correctionSummary.trim().length === 0}
           onclick={() => void issueCorrection()}
         >
           {correctionBusy ? 'Issuing correction...' : 'Issue Correction'}
-        </button>
+        </Button>
 
         <div class="review-list">
           <div class="section-caption">{t(M['content.governance_panel.published_history'])}</div>
@@ -1736,14 +1749,14 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
             <div style="display: flex; align-items: center; gap: 0.5rem;">
               Versions
             </div>
-            <button
+            <Button
+              variant="secondary"
               type="button"
-              class="secondary-button"
               disabled={versionBusy}
               onclick={(e) => { e.preventDefault(); void createSnapshot(); }}
             >
               {versionBusy ? 'Working...' : 'Create Snapshot'}
-            </button>
+            </Button>
           </div>
           <svg class="drawer-icon" style="margin-left: 1rem;" viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
         </summary>
@@ -1765,9 +1778,9 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                 {/if}
                 <div class="version-card__footer">
                   <span>{formatTimestamp(version.createdAt)}</span>
-                  <button
+                  <Button
+                    variant="secondary"
                     type="button"
-                    class="secondary-button"
                     disabled={versionBusy || version.version === null || version.version === undefined}
                     onclick={() => {
                       if (
@@ -1779,7 +1792,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                     }}
                   >
                     Restore
-                  </button>
+                  </Button>
                 </div>
               </div>
             {/each}
@@ -1920,20 +1933,6 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
     font-size: var(--smrt-typography-body-medium-size, 0.85rem);
   }
 
-  .fact-search input,
-  .workflow-field input,
-  .workflow-field textarea,
-  .workflow-field select {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-    border: 1px solid var(--smrt-color-outline);
-    background: var(--smrt-color-surface);
-    color: var(--smrt-color-on-surface);
-    font-family: inherit;
-  }
-
   .workflow-field {
     display: flex;
     flex-direction: column;
@@ -1943,30 +1942,6 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
-  .fact-search button,
-  .review-actions 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);
-  }
-
-  .fact-search button:disabled,
-  .review-actions button:disabled,
-  .fact-pagination button:disabled {
-    cursor: not-allowed;
-    opacity: 0.65;
-  }
-
-  .secondary-button {
-    background: var(--smrt-color-surface);
-    color: var(--smrt-color-on-surface);
-    border: 1px solid var(--smrt-color-outline-variant);
-  }
-
   .fact-chip-list,
   .fact-catalog__list,
   .claim-audit-group,
@@ -2060,7 +2035,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
     gap: 0.25rem;
   }
 
-  .fact-chip__remove {
+  .fact-chip :global(.fact-chip__remove) {
     background: transparent !important;
     color: var(--smrt-color-error) !important;
     padding: 0 !important;

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

@@ -1 +1 @@
-{"version":3,"file":"ContentGovernancePanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernancePanel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAIL,KAAK,0BAA0B,EAQ/B,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EAEd,MAAM,wBAAwB,CAAC;AAMhC,MAAM,MAAM,6BAA6B,GACrC,WAAW,GACX,OAAO,GACP,SAAS,GACT,cAAc,GACd,aAAa,GACb,UAAU,CAAC;AASf,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAC/D,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7E,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,cAAc,CAAC,EAAE,6BAA6B,EAAE,CAAC;CAClD;AAgoDD,QAAA,MAAM,sBAAsB;gCA34Bc,MAAM;MA24BoB,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ContentGovernancePanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernancePanel.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAIL,KAAK,0BAA0B,EAQ/B,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EAEd,MAAM,wBAAwB,CAAC;AAMhC,MAAM,MAAM,6BAA6B,GACrC,WAAW,GACX,OAAO,GACP,SAAS,GACT,cAAc,GACd,aAAa,GACb,UAAU,CAAC;AASf,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAC/D,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7E,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,cAAc,CAAC,EAAE,6BAA6B,EAAE,CAAC;CAClD;AAooDD,QAAA,MAAM,sBAAsB;gCA74Bc,MAAM;MA64BoB,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/ContentGovernancePolicyEditor.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+import { Form, Input, Select, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { ContentReviewPolicyData } from '../../mock-smrt-client';
 import { M } from '../i18n.tools.js';
 
@@ -41,46 +43,49 @@ function handleSubmit() {
 }
 </script>
 
-<form class="governance-editor" onsubmit={(event) => {
-  event.preventDefault();
-  handleSubmit();
-}}>
-  <label>
-    Key
-    <input type="text" bind:value={draft.key} required />
-  </label>
-  <label>
-    Label
-    <input type="text" bind:value={draft.label} />
-  </label>
-  <label>
-    Kind
-    <select bind:value={draft.kind}>
-      <option value="facts">Facts</option>
-      <option value="safety">Safety</option>
-      <option value="custom">Custom</option>
-    </select>
-  </label>
-  <label>
-    Instructions
-    <textarea rows="4" bind:value={draft.instructions}></textarea>
-  </label>
-  <label class="checkbox">
-    <input type="checkbox" bind:checked={draft.enabled} />
-    Enabled
-  </label>
-  <div class="actions">
-    <button type="submit">{t(M['content.governance_policy_editor.save_policy'])}</button>
-    {#if onCancel}
-      <button type="button" class="secondary" onclick={() => onCancel?.()}>
-        Cancel
-      </button>
-    {/if}
-  </div>
-</form>
+<div class="governance-editor-shell">
+  <Form class="governance-editor" onsubmit={(event) => {
+    event.preventDefault();
+    handleSubmit();
+  }}>
+    <label>
+      Key
+      <Input type="text" bind:value={draft.key} required />
+    </label>
+    <label>
+      Label
+      <Input type="text" bind:value={draft.label} />
+    </label>
+    <label>
+      Kind
+      <Select bind:value={draft.kind}>
+        <option value="facts">Facts</option>
+        <option value="safety">Safety</option>
+        <option value="custom">Custom</option>
+      </Select>
+    </label>
+    <label>
+      Instructions
+      <Textarea rows={4} bind:value={draft.instructions}></Textarea>
+    </label>
+    <label class="checkbox">
+      <!-- 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={draft.enabled} />
+      Enabled
+    </label>
+    <div class="actions">
+      <Button variant="primary" type="submit">{t(M['content.governance_policy_editor.save_policy'])}</Button>
+      {#if onCancel}
+        <Button variant="secondary" type="button" onclick={() => onCancel?.()}>
+          Cancel
+        </Button>
+      {/if}
+    </div>
+  </Form>
+</div>
 
 <style>
-  .governance-editor {
+  .governance-editor-shell :global(.governance-editor) {
     display: grid;
     gap: 0.75rem;
   }
@@ -91,12 +96,6 @@ function handleSubmit() {
     font-size: var(--smrt-typography-label-large-size, 0.9rem);
   }
 
-  input,
-  select,
-  textarea {
-    width: 100%;
-  }
-
   .checkbox {
     display: flex;
     align-items: center;

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

@@ -1 +1 @@
-{"version":3,"file":"ContentGovernancePolicyEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernancePolicyEditor.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAItE,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAiFD,QAAA,MAAM,6BAA6B,2CAAwC,CAAC;AAC5E,KAAK,6BAA6B,GAAG,UAAU,CAAC,OAAO,6BAA6B,CAAC,CAAC;AACtF,eAAe,6BAA6B,CAAC"}
+{"version":3,"file":"ContentGovernancePolicyEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernancePolicyEditor.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAItE,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAsFD,QAAA,MAAM,6BAA6B,2CAAwC,CAAC;AAC5E,KAAK,6BAA6B,GAAG,UAAU,CAAC,OAAO,6BAA6B,CAAC,CAAC;AACtF,eAAe,6BAA6B,CAAC"}