@happyvertical/smrt-content 0.55.16 → 0.55.17

package/dist/svelte/components/ContentAgentChat.svelte

@@ -449,7 +449,7 @@ async function handleSendMessage(content: string) {
 }
 </script>
 
-<div class="content-agent-chat-container">
+<div class="content-agent-chat-container" data-smrt-component="ContentAgentChat">
   {#if loadingSession && !threads.length}
     <div class="loading-state">{t(M['content.content_agent_chat.loading_ai_assistant'])}</div>
   {:else if error && !session}
@@ -530,11 +530,13 @@ async function handleSendMessage(content: string) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .content-agent-chat-container {
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: var(--smrt-color-surface, #fefbff);
+    background: var(--smrt-color-surface);
     overflow: hidden;
   }
 
@@ -546,18 +548,18 @@ async function handleSendMessage(content: string) {
     height: 100%;
     padding: 2rem;
     text-align: center;
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   .spinner {
     display: inline-block;
     width: 16px;
     height: 16px;
-    border: 2px solid var(--smrt-color-outline-variant, #c4c6d0);
-    border-top-color: var(--smrt-color-primary, #005ac1);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border: 2px solid var(--smrt-color-outline-variant);
+    border-top-color: var(--smrt-color-primary);
+    border-radius: var(--smrt-radius-full);
     animation: spin 1s linear infinite;
-    margin-right: var(--smrt-spacing-2, 8px);
+    margin-right: var(--smrt-spacing-2);
     vertical-align: middle;
   }
   
@@ -566,31 +568,31 @@ async function handleSendMessage(content: string) {
   }
 
   .model-bar {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    background: var(--smrt-color-surface-container-lowest, #ffffff);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    background: var(--smrt-color-surface-container-lowest);
   }
 
   .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);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-md);
     border: none;
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    background: var(--smrt-color-surface-container-low);
+    color: var(--smrt-color-on-surface);
     font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
     outline: none;
     cursor: pointer;
   }
 
   .content-agent-chat-container :global(.smrt-select:disabled) {
-    background: var(--smrt-color-surface-container, #f3f4f9);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface-variant);
     cursor: not-allowed;
     opacity: 0.7;
   }
 
   .content-agent-chat-container :global(.smrt-select:focus) {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
   }
 
   .chat-main {
@@ -613,9 +615,9 @@ async function handleSendMessage(content: string) {
   .topic-footer {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    background: var(--smrt-color-surface-container-lowest, #ffffff);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    background: var(--smrt-color-surface-container-lowest);
   }
 
   .topic-footer :global(.smrt-select) {
@@ -625,12 +627,12 @@ async function handleSendMessage(content: string) {
   .topic-footer :global(.topic-action-btn) {
     display: inline-flex;
     align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
-    border-radius: var(--smrt-radius-sm, 4px);
+    gap: var(--smrt-spacing-1);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-sm);
     background: none;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     cursor: pointer;
     white-space: nowrap;
@@ -638,35 +640,36 @@ async function handleSendMessage(content: string) {
   }
 
   .topic-footer :global(.topic-action-btn:hover:not(:disabled)) {
-    background: var(--smrt-color-surface-variant, #e1e2e8);
-    color: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-surface-variant);
+    color: var(--smrt-color-primary);
   }
 
   .topic-footer :global(.topic-cancel-btn) {
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
     border: none;
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   .new-topic-row {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     width: 100%;
   }
 
   .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);
-    border-radius: var(--smrt-radius-sm, 4px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-sm);
     font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
     outline: none;
-    background: var(--smrt-color-surface, #ffffff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
   }
 
   .new-topic-row :global(.new-topic-input:focus) {
-    border-color: var(--smrt-color-primary, #005ac1);
+    border-color: var(--smrt-color-primary);
   }
+}
 </style>

package/dist/svelte/components/ContentBodyEditor.svelte

@@ -1633,7 +1633,7 @@ function handleEditorDragEnd() {
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div bind:this={rootElement} class="content-body-editor" onpointerleave={handleRootPointerLeave}>
+<div bind:this={rootElement} class="content-body-editor" onpointerleave={handleRootPointerLeave} data-smrt-component="ContentBodyEditor">
   <div class="body-editor-toolbar" aria-label={t(M['content.content_body_editor.toolbar'])}>
     <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>
@@ -1929,6 +1929,8 @@ function handleEditorDragEnd() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .content-body-editor {
     position: relative;
     display: flex;
@@ -2210,16 +2212,16 @@ function handleEditorDragEnd() {
     block-size: 44px;
     padding: 0;
     border: 1px solid var(--smrt-color-outline-variant);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     background: color-mix(in srgb, var(--smrt-color-surface) 94%, transparent);
-    color: var(--smrt-color-primary, #3558d6);
+    color: var(--smrt-color-primary);
     box-shadow: var(--smrt-elevation-3, 0 0.4rem 1rem color-mix(in srgb, var(--smrt-color-shadow) 20%, transparent));
     cursor: pointer;
   }
 
   .image-change-badge:hover,
   .image-change-badge:focus-visible {
-    background: var(--smrt-color-primary-container, #dde3ff);
+    background: var(--smrt-color-primary-container);
   }
 
   .image-control-popover :global(.editor-popover-button.editor-popover-button--change) {
@@ -2229,7 +2231,7 @@ function handleEditorDragEnd() {
     padding: 0 0.7rem 0 0.55rem;
     gap: 0.3rem;
     display: inline-flex;
-    color: var(--smrt-color-primary, #3558d6);
+    color: var(--smrt-color-primary);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
@@ -2254,7 +2256,7 @@ function handleEditorDragEnd() {
     gap: 0.1rem;
     padding: 0.25rem;
     border: 1px solid var(--smrt-color-outline-variant);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     background: color-mix(in srgb, var(--smrt-color-surface) 96%, transparent);
     color: var(--smrt-color-on-surface);
     box-shadow: var(--smrt-elevation-5, 0 0.75rem 1.75rem color-mix(in srgb, var(--smrt-color-shadow) 18%, transparent));
@@ -2277,7 +2279,7 @@ function handleEditorDragEnd() {
     height: 2rem;
     min-width: 2rem;
     padding: 0;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
   }
 
   /* Move up / Move down: full 44px touch targets. */
@@ -2298,7 +2300,7 @@ function handleEditorDragEnd() {
     left: 1rem;
     right: 1rem;
     height: 4px;
-    border-radius: var(--smrt-radius-sm, 2px);
+    border-radius: var(--smrt-radius-sm);
     background: var(--smrt-color-primary);
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--smrt-color-primary) 25%, transparent);
     pointer-events: none;
@@ -2323,7 +2325,7 @@ function handleEditorDragEnd() {
     width: 1.45rem;
     height: 1.45rem;
     border: 1px solid var(--smrt-color-outline-variant);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-surface);
     box-shadow: var(--smrt-elevation-4, 0 0.45rem 1rem color-mix(in srgb, var(--smrt-color-shadow) 18%, transparent));
     cursor: nwse-resize;
@@ -2332,4 +2334,5 @@ function handleEditorDragEnd() {
   .image-resize-handle:hover {
     color: var(--smrt-color-primary);
   }
+}
 </style>

package/dist/svelte/components/ContentBodyRenderer.svelte

@@ -33,12 +33,14 @@ const safeHtml = $derived(
 </script>
 
 <div
-  class="content-body-renderer {resolvedFormat === 'markdown' ? 'markdown-content' : ''} {className}"
+  class="content-body-renderer {resolvedFormat === 'markdown' ? 'markdown-content' : ''} {className}" data-smrt-component="ContentBodyRenderer"
 >
   {@html safeHtml}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .content-body-renderer {
     font-size: var(--smrt-typography-body-large-size, 1rem);
     line-height: var(--smrt-typography-body-large-line-height, 1.5);
@@ -54,21 +56,21 @@ const safeHtml = $derived(
 
   .content-body-renderer :global(h1) {
     font-size: var(--smrt-typography-headline-large-size, 2rem);
-    margin: var(--spacing-2xl, 2rem) 0 var(--spacing-lg, 1rem);
+    margin: var(--smrt-spacing-2xl, 2rem) 0 var(--smrt-spacing-lg, 1rem);
   }
 
   .content-body-renderer :global(h2) {
     font-size: var(--smrt-typography-headline-medium-size, 1.75rem);
-    margin: var(--spacing-xl, 1.5rem) 0 var(--spacing-md, 0.75rem);
+    margin: var(--smrt-spacing-xl, 1.5rem) 0 var(--smrt-spacing-md, 0.75rem);
   }
 
   .content-body-renderer :global(h3) {
     font-size: var(--smrt-typography-headline-small-size, 1.5rem);
-    margin: var(--spacing-lg, 1rem) 0 var(--spacing-sm, 0.5rem);
+    margin: var(--smrt-spacing-lg, 1rem) 0 var(--smrt-spacing-sm, 0.5rem);
   }
 
   .content-body-renderer :global(p) {
-    margin: var(--spacing-md, 0.75rem) 0;
+    margin: var(--smrt-spacing-md, 0.75rem) 0;
   }
 
   .content-body-renderer :global(p:first-child) {
@@ -87,8 +89,8 @@ const safeHtml = $derived(
 
   .content-body-renderer :global(ul),
   .content-body-renderer :global(ol) {
-    margin: var(--spacing-md, 0.75rem) 0;
-    padding-left: var(--spacing-xl, 1.5rem);
+    margin: var(--smrt-spacing-md, 0.75rem) 0;
+    padding-left: var(--smrt-spacing-xl, 1.5rem);
   }
 
   .content-body-renderer :global(a) {
@@ -101,15 +103,15 @@ const safeHtml = $derived(
     display: block;
     width: min(100%, 48rem);
     height: auto;
-    margin: var(--spacing-lg, 1rem) 0;
-    border-radius: var(--smrt-radius-medium, 8px);
+    margin: var(--smrt-spacing-lg, 1rem) 0;
+    border-radius: var(--smrt-radius-medium);
   }
 
   .content-body-renderer :global(figure[data-smrt-inline-image]) {
     display: block;
     width: min(100%, 32rem);
     max-width: 100%;
-    margin: var(--spacing-lg, 1rem) 0;
+    margin: var(--smrt-spacing-lg, 1rem) 0;
   }
 
   .content-body-renderer :global(figure[data-smrt-inline-image] img) {
@@ -122,14 +124,14 @@ const safeHtml = $derived(
   .content-body-renderer :global(img[data-smrt-placement='left']) {
     float: left;
     width: min(45%, 22rem);
-    margin: 0.35rem var(--spacing-lg, 1rem) var(--spacing-sm, 0.5rem) 0;
+    margin: 0.35rem var(--smrt-spacing-lg, 1rem) var(--smrt-spacing-sm, 0.5rem) 0;
   }
 
   .content-body-renderer :global(figure[data-smrt-placement='right']),
   .content-body-renderer :global(img[data-smrt-placement='right']) {
     float: right;
     width: min(45%, 22rem);
-    margin: 0.35rem 0 var(--spacing-sm, 0.5rem) var(--spacing-lg, 1rem);
+    margin: 0.35rem 0 var(--smrt-spacing-sm, 0.5rem) var(--smrt-spacing-lg, 1rem);
   }
 
   .content-body-renderer :global(figure[data-smrt-placement='center']),
@@ -174,7 +176,8 @@ const safeHtml = $derived(
     .content-body-renderer :global(img[data-smrt-placement='right']) {
       float: none;
       width: 100% !important;
-      margin: var(--spacing-md, 0.75rem) 0;
+      margin: var(--smrt-spacing-md, 0.75rem) 0;
     }
   }
+}
 </style>

package/dist/svelte/components/ContentClaimAuditTool.svelte

@@ -186,7 +186,7 @@ async function recheckFactClaims(claimIds: string[]) {
 }
 </script>
 
-<div class="governance-tool">
+<div class="governance-tool" data-smrt-component="ContentClaimAuditTool">
   {#if error}
     <p class="tool-error" role="alert" aria-live="assertive">{error}</p>
   {/if}
@@ -320,6 +320,8 @@ async function recheckFactClaims(claimIds: string[]) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /* The tool lays itself out by its own width, not the viewport, so it
      fits a full page, a side panel, the assistant dock or a phone. */
   .governance-tool {
@@ -396,7 +398,7 @@ async function recheckFactClaims(claimIds: string[]) {
   }
 
   .pill {
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     padding: 0.2rem 0.55rem;
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-bold, 700);
@@ -476,4 +478,5 @@ async function recheckFactClaims(claimIds: string[]) {
       flex-wrap: wrap;
     }
   }
+}
 </style>

package/dist/svelte/components/ContentContributionForm.svelte

@@ -127,7 +127,7 @@ function handleSubmit(event: SubmitEvent) {
 }
 </script>
 
-<div class="contribution-form-shell">
+<div class="contribution-form-shell" data-smrt-component="ContentContributionForm">
   <Form
     class="contribution-form"
     method="post"
@@ -207,6 +207,8 @@ function handleSubmit(event: SubmitEvent) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .contribution-form-shell :global(.contribution-form) {
     display: grid;
     gap: 0.85rem;
@@ -236,4 +238,5 @@ function handleSubmit(event: SubmitEvent) {
     gap: 0.75rem;
     flex-wrap: wrap;
   }
+}
 </style>

package/dist/svelte/components/ContentContributionInbox.svelte

@@ -127,7 +127,7 @@ $effect(() => {
 });
 </script>
 
-<section class="inbox">
+<section class="inbox" data-smrt-component="ContentContributionInbox">
   <header class="inbox__header">
     <div>
       <h3>{t(M['content.contribution_inbox.heading'])}</h3>
@@ -259,6 +259,8 @@ $effect(() => {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .inbox,
   .inbox__header,
   .inbox__layout,
@@ -323,7 +325,7 @@ $effect(() => {
     justify-content: center;
     min-width: 1.75rem;
     padding: 0.15rem 0.5rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-primary-container);
   }
 
@@ -332,4 +334,5 @@ $effect(() => {
       grid-template-columns: 1fr;
     }
   }
+}
 </style>

package/dist/svelte/components/ContentContributionPortal.svelte

@@ -40,7 +40,7 @@ function canWithdraw(contribution: ContentContributionData) {
 }
 </script>
 
-<section class="portal">
+<section class="portal" data-smrt-component="ContentContributionPortal">
   <header class="portal__header">
     <div>
       <h3>{t(M['content.contribution_portal.heading'])}</h3>
@@ -109,6 +109,8 @@ function canWithdraw(contribution: ContentContributionData) {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .portal {
     display: grid;
     gap: 1rem;
@@ -171,7 +173,7 @@ function canWithdraw(contribution: ContentContributionData) {
     justify-content: center;
     min-width: 1.75rem;
     padding: 0.15rem 0.5rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-primary-container);
   }
 
@@ -186,4 +188,5 @@ function canWithdraw(contribution: ContentContributionData) {
       grid-template-columns: 1fr;
     }
   }
+}
 </style>

package/dist/svelte/components/ContentContributionTypeManager.svelte

@@ -115,7 +115,7 @@ function handleSubmit() {
 }
 </script>
 
-<section class="manager">
+<section class="manager" data-smrt-component="ContentContributionTypeManager">
   <header>
     <div>
       <h3>{t(M['content.contribution_type_manager.heading'])}</h3>
@@ -268,6 +268,8 @@ function handleSubmit() {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .manager,
   .layout,
   .list,
@@ -308,4 +310,5 @@ function handleSubmit() {
       grid-template-columns: 1fr;
     }
   }
+}
 </style>

package/dist/svelte/components/ContentContributorManager.svelte

@@ -44,7 +44,7 @@ function handleSubmit() {
 }
 </script>
 
-<section class="manager">
+<section class="manager" data-smrt-component="ContentContributorManager">
   <header>
     <div>
       <h3>Contributors</h3>
@@ -105,6 +105,8 @@ function handleSubmit() {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .manager,
   .layout,
   .list,
@@ -144,4 +146,5 @@ function handleSubmit() {
       grid-template-columns: 1fr;
     }
   }
+}
 </style>

package/dist/svelte/components/ContentCorrectionsTool.svelte

@@ -166,7 +166,7 @@ async function issueCorrection() {
 }
 </script>
 
-<div class="governance-tool">
+<div class="governance-tool" data-smrt-component="ContentCorrectionsTool">
   {#if error}
     <p class="tool-error" role="alert" aria-live="assertive">{error}</p>
   {/if}
@@ -254,6 +254,8 @@ async function issueCorrection() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /* The tool lays itself out by its own width, not the viewport, so it
      fits a full page, a side panel, the assistant dock or a phone. */
   .governance-tool {
@@ -312,7 +314,7 @@ async function issueCorrection() {
   }
 
   .pill {
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     padding: 0.2rem 0.55rem;
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-bold, 700);
@@ -362,4 +364,5 @@ async function issueCorrection() {
       flex-wrap: wrap;
     }
   }
+}
 </style>