@happyvertical/smrt-chat 0.55.15 → 0.55.17

package/dist/svelte/components/tabs/ChatTabList.svelte

@@ -24,7 +24,7 @@ const { tabs, onselect, onclose }: Props = $props();
 </script>
 
 {#if tabs.length > 0}
-  <nav class="tab-list" aria-label={t(M['chat.chat_tab_list.minimized_chats'])}>
+  <nav class="tab-list" aria-label={t(M['chat.chat_tab_list.minimized_chats'])} data-smrt-component="ChatTabList">
     {#each tabs as tab (tab.roomId)}
       <div class="tab-list__item">
         <!-- raw-primitive-allow: pressable circular avatar tab wrapping rich content (room avatar component and overlaid unread badge) that opens the chat on click; no Button primitive owns this structural avatar-tab pattern -->
@@ -65,10 +65,12 @@ const { tabs, onselect, onclose }: Props = $props();
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .tab-list {
     display: flex;
     align-items: flex-end;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     pointer-events: auto;
   }
 
@@ -84,10 +86,10 @@ const { tabs, onselect, onclose }: Props = $props();
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-2);
     border: none;
-    background: var(--smrt-color-surface-container, #f0f0f4);
-    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface-container);
+    border-radius: var(--smrt-radius-full);
     cursor: pointer;
     transition: background var(--smrt-duration-short2, 150ms),
       box-shadow var(--smrt-duration-short2, 150ms);
@@ -95,12 +97,12 @@ const { tabs, onselect, onclose }: Props = $props();
   }
 
   .tab-list__btn:hover {
-    background: var(--smrt-color-surface-container-high, #e6e6ea);
+    background: var(--smrt-color-surface-container-high);
     box-shadow: var(--smrt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.15));
   }
 
   .tab-list__btn:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: 2px;
   }
 
@@ -113,14 +115,14 @@ const { tabs, onselect, onclose }: Props = $props();
     justify-content: center;
     min-width: 16px;
     height: 16px;
-    padding: 0 var(--smrt-spacing-1, 4px);
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-error, #ba1a1a);
-    color: var(--smrt-color-on-error, #ffffff);
+    padding: 0 var(--smrt-spacing-1);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-error);
+    color: var(--smrt-color-on-error);
     font-size: var(--smrt-typography-label-small-size, 0.625rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
     line-height: 1;
-    border: 2px solid var(--smrt-color-surface, #fefbff);
+    border: 2px solid var(--smrt-color-surface);
   }
 
   /* :global() pierces into the Button child's rendered <button> (see #1589). */
@@ -131,9 +133,9 @@ const { tabs, onselect, onclose }: Props = $props();
     right: -4px;
     width: 18px;
     height: 18px;
-    background: var(--smrt-color-surface-variant, #e1e2ec);
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface-variant);
+    color: var(--smrt-color-on-surface-variant);
+    border-radius: var(--smrt-radius-full);
     padding: 0;
     font-size: 0;
   }
@@ -149,8 +151,8 @@ const { tabs, onselect, onclose }: Props = $props();
   }
 
   .tab-list__item :global(.tab-list__close:hover) {
-    background: var(--smrt-color-error-container, #ffdad6);
-    color: var(--smrt-color-on-error-container, #410002);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -158,4 +160,5 @@ const { tabs, onselect, onclose }: Props = $props();
       transition: none;
     }
   }
+}
 </style>

package/dist/svelte/components/tabs/ChatTabs.svelte

@@ -42,7 +42,7 @@ const expandedTabs = $derived(tabs.filter((t) => t.isExpanded));
 const collapsedTabs = $derived(tabs.filter((t) => !t.isExpanded));
 </script>
 
-<div class="chat-tabs" aria-label={t(M['chat.chat_tabs.tabs_label'])}>
+<div class="chat-tabs" aria-label={t(M['chat.chat_tabs.tabs_label'])} data-smrt-component="ChatTabs">
   <div class="chat-tabs__expanded">
     {#each expandedTabs as tab (tab.roomId)}
       <ChatTab
@@ -67,14 +67,16 @@ const collapsedTabs = $derived(tabs.filter((t) => !t.isExpanded));
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .chat-tabs {
     position: fixed;
     bottom: 0;
     right: 0;
     display: flex;
     align-items: flex-end;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: 0 var(--smrt-spacing-4, 16px);
+    gap: var(--smrt-spacing-2);
+    padding: 0 var(--smrt-spacing-4);
     z-index: var(--smrt-z-index-sticky, 1100);
     pointer-events: none;
   }
@@ -82,7 +84,8 @@ const collapsedTabs = $derived(tabs.filter((t) => !t.isExpanded));
   .chat-tabs__expanded {
     display: flex;
     align-items: flex-end;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     pointer-events: auto;
   }
+}
 </style>

package/dist/svelte/components/tabs/MiniChat.svelte

@@ -56,7 +56,7 @@ $effect(() => {
 });
 </script>
 
-<div class="mini-chat">
+<div class="mini-chat" data-smrt-component="MiniChat">
   <div
     class="mini-chat__messages"
     style:max-height="{maxHeight}px"
@@ -111,6 +111,8 @@ $effect(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .mini-chat {
     display: flex;
     flex-direction: column;
@@ -120,17 +122,17 @@ $effect(() => {
   .mini-chat__messages {
     flex: 1;
     overflow-y: auto;
-    padding: var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-2);
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     scroll-behavior: smooth;
   }
 
   .mini-chat__msg {
     display: flex;
     align-items: flex-end;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     max-width: 85%;
   }
 
@@ -142,23 +144,23 @@ $effect(() => {
   .mini-chat__bubble {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-medium, 8px);
-    background: var(--smrt-color-surface-container, #f0f0f4);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    gap: var(--smrt-spacing-1);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface);
     word-break: break-word;
   }
 
   .mini-chat__bubble--own {
-    background: var(--smrt-color-primary-container, #d6e3ff);
-    color: var(--smrt-color-on-primary-container, #001a41);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
   }
 
   .mini-chat__sender {
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
     line-height: 1;
   }
 
@@ -168,7 +170,7 @@ $effect(() => {
 
   .mini-chat__time {
     font-size: var(--smrt-typography-label-small-size, 0.625rem);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
     align-self: flex-end;
     line-height: 1;
   }
@@ -183,24 +185,24 @@ $effect(() => {
 
   .mini-chat__empty-text {
     font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   /* :global() targets the Form primitive's rendered <form> (see #1589 scoping trap). */
   :global(.mini-chat__input-bar) {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
-    padding: var(--smrt-spacing-2, 8px);
-    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
-    background: var(--smrt-color-surface, #fefbff);
+    gap: var(--smrt-spacing-1);
+    padding: var(--smrt-spacing-2);
+    border-top: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface);
   }
 
   /* Layout for the Input primitive's rendered <input> (tokenised styling comes
      from the primitive; this only sizes/shapes it within the input bar). */
   :global(.mini-chat__input) {
     flex: 1;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
   }
 
   /* :global() pierces into the Button child's rendered <button> (see #1589).
@@ -209,9 +211,9 @@ $effect(() => {
     width: 32px;
     height: 32px;
     padding: 0;
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #ffffff);
-    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+    border-radius: var(--smrt-radius-full);
     flex-shrink: 0;
     transition: opacity var(--smrt-duration-short2, 150ms);
   }
@@ -221,7 +223,7 @@ $effect(() => {
   }
 
   :global(.mini-chat__input-bar .mini-chat__send-btn:not(:disabled):hover) {
-    background: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary);
     opacity: 0.85;
   }
 
@@ -234,4 +236,5 @@ $effect(() => {
       transition: none;
     }
   }
+}
 </style>

package/dist/sveltekit.js

@@ -1,5 +1,5 @@
 import { i as clientRequestMessageId, n as ChatService, t as ChatClientRequestConflictError } from "./chunks/ChatService-DjGf2AoJ.js";
-import { D as runAssistantTurn, E as createSessionContinuationStore, P as buildManifestToolCatalog, j as MAX_CLIENT_TOOL_RESULT_CHARS, v as ASSISTANT_TURN_GENERIC_ERROR, w as createAssistantTurnResponse, z as sanitizeClientToolDeclarations } from "./chunks/chat-stream-CXWE2vjb.js";
+import { D as runAssistantTurn, E as createSessionContinuationStore, P as buildManifestToolCatalog, j as MAX_CLIENT_TOOL_RESULT_CHARS, v as ASSISTANT_TURN_GENERIC_ERROR, w as createAssistantTurnResponse, z as sanitizeClientToolDeclarations } from "./chunks/chat-stream-D1xCl9IM.js";
 import { getCurrentSessionPermissionContext, getRequestScopedDatabase } from "@happyvertical/smrt-users";
 import { getConfig, loadConfig, resolveConfiguredAIProvider, toAIClientOptions } from "@happyvertical/smrt-config";
 //#region src/sveltekit.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-chat",
-  "version": "0.55.15",
+  "version": "0.55.17",
   "smrtJsdoc": "strict",
   "description": "Chat rooms, DMs, threads, and agent conversations for the SMRT framework",
   "type": "module",
@@ -85,18 +85,18 @@
     "@happyvertical/animation": "0.5.0",
     "@happyvertical/ai": "^0.103.4",
     "@happyvertical/speech": "^0.103.4",
-    "@happyvertical/smrt-images": "0.55.15",
-    "@happyvertical/smrt-agents": "0.55.15",
-    "@happyvertical/smrt-assets": "0.55.15",
-    "@happyvertical/smrt-config": "0.55.15",
-    "@happyvertical/smrt-core": "0.55.15",
-    "@happyvertical/smrt-personas": "0.55.15",
-    "@happyvertical/smrt-profiles": "0.55.15",
-    "@happyvertical/smrt-reports": "0.55.15",
-    "@happyvertical/smrt-tenancy": "0.55.15",
-    "@happyvertical/smrt-types": "0.55.15",
-    "@happyvertical/smrt-ui": "0.55.15",
-    "@happyvertical/smrt-users": "0.55.15",
+    "@happyvertical/smrt-images": "0.55.17",
+    "@happyvertical/smrt-agents": "0.55.17",
+    "@happyvertical/smrt-assets": "0.55.17",
+    "@happyvertical/smrt-config": "0.55.17",
+    "@happyvertical/smrt-core": "0.55.17",
+    "@happyvertical/smrt-personas": "0.55.17",
+    "@happyvertical/smrt-profiles": "0.55.17",
+    "@happyvertical/smrt-reports": "0.55.17",
+    "@happyvertical/smrt-tenancy": "0.55.17",
+    "@happyvertical/smrt-types": "0.55.17",
+    "@happyvertical/smrt-ui": "0.55.17",
+    "@happyvertical/smrt-users": "0.55.17",
     "@happyvertical/sql": "^0.103.4",
     "@happyvertical/images": "^0.103.4",
     "gsap": "^3.13.0"
@@ -110,10 +110,10 @@
     }
   },
   "devDependencies": {
-    "@happyvertical/smrt-playground": "0.55.15",
-    "@happyvertical/smrt-scanner": "0.55.15",
-    "@happyvertical/smrt-vitest": "0.55.15",
-    "@happyvertical/smrt-web": "0.55.15",
+    "@happyvertical/smrt-playground": "0.55.17",
+    "@happyvertical/smrt-scanner": "0.55.17",
+    "@happyvertical/smrt-vitest": "0.55.17",
+    "@happyvertical/smrt-web": "0.55.17",
     "@mlc-ai/web-llm": "^0.2.85",
     "bitgpu": "0.19.1",
     "@sveltejs/kit": "2.69.1",