@floegence/floe-webapp-core 0.35.9 → 0.35.11

package/dist/chat.css

@@ -246,8 +246,8 @@
 }
 
 .chat-message-bubble-error {
-  border-color: rgb(239 68 68 / 0.3);
-  background-color: rgb(239 68 68 / 0.05);
+  border-color: color-mix(in srgb, var(--error) 30%, transparent);
+  background-color: color-mix(in srgb, var(--error) 5%, transparent);
 }
 
 .chat-message-error {
@@ -256,7 +256,7 @@
   gap: 0.5rem;
   margin-top: 0.5rem;
   font-size: 0.75rem;
-  color: rgb(239 68 68);
+  color: var(--error);
 }
 
 /* ============================================
@@ -368,7 +368,7 @@
   padding: 0.125rem 0.375rem;
   border-radius: 0.25rem;
   background-color: color-mix(in srgb, var(--muted) 70%, transparent);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.6875rem;
   color: var(--primary);
 }
@@ -486,7 +486,7 @@ pre.chat-md-code-block code {
   font-size: 0.75rem;
   font-weight: 500;
   color: #e6edf3;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
 }
 
 .chat-code-language {
@@ -526,7 +526,7 @@ pre.chat-md-code-block code {
 
 .chat-code-content code {
   font-size: 0.6875rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   line-height: 1.5;
   color: #e6edf3;
 }
@@ -539,7 +539,7 @@ pre.chat-md-code-block code {
   padding: 0.875rem 1rem;
   background-color: #0d1117;
   font-size: 0.6875rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   overflow-x: auto;
   color: #e6edf3;
 }
@@ -581,12 +581,12 @@ pre.chat-md-code-block code {
   font-size: 0.75rem;
   font-weight: 500;
   color: #e6edf3;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
 }
 
 .chat-code-diff-stats {
   font-size: 0.75rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   color: #e6edf3;
 }
 
@@ -630,7 +630,7 @@ pre.chat-md-code-block code {
 .chat-code-diff-content {
   overflow-x: auto;
   font-size: 0.6875rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   line-height: 1.5;
   color: #e6edf3;
   background-color: #0d1117;
@@ -759,14 +759,14 @@ pre.chat-md-code-block code {
 
 .chat-shell-prompt {
   color: #58a6ff;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.6875rem;
   font-weight: 500;
 }
 
 .chat-shell-command-text {
   flex: 1;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.6875rem;
   color: #e6edf3;
 }
@@ -778,7 +778,7 @@ pre.chat-md-code-block code {
 .chat-shell-output {
   padding: 0.75rem 0.875rem;
   font-size: 0.75rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   overflow-x: auto;
   max-height: 16rem;
   overflow-y: auto;
@@ -797,7 +797,7 @@ pre.chat-md-code-block code {
 .chat-shell-exit-code {
   padding: 0.375rem 0.875rem;
   font-size: 0.6875rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   border-top: 1px solid #30363d;
   background-color: #161b22;
 }
@@ -833,7 +833,7 @@ pre.chat-md-code-block code {
 }
 
 .chat-mermaid-error {
-  color: rgb(239 68 68);
+  color: var(--error);
 }
 
 .chat-mermaid-content {
@@ -965,7 +965,7 @@ pre.chat-md-code-block code {
   margin-top: 0.5rem;
   font-size: 0.6875rem;
   color: var(--muted-foreground);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   white-space: pre-wrap;
   font-style: italic;
 }
@@ -1022,7 +1022,7 @@ pre.chat-md-code-block code {
 .chat-tool-name {
   font-size: 0.6875rem;
   font-weight: 600;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
 }
 
 .chat-tool-approval-actions {
@@ -1052,8 +1052,8 @@ pre.chat-md-code-block code {
 }
 
 .chat-tool-approval-btn-reject {
-  color: rgb(239 68 68);
-  border-color: color-mix(in srgb, rgb(239 68 68) 40%, var(--border));
+  color: var(--error);
+  border-color: color-mix(in srgb, var(--error) 40%, var(--border));
 }
 
 .chat-tool-summary {
@@ -1137,7 +1137,7 @@ pre.chat-md-code-block code {
 .chat-tool-args,
 .chat-tool-result {
   font-size: 0.75rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   background-color: color-mix(in srgb, var(--muted) 30%, transparent);
   border-radius: 0.375rem;
   padding: 0.625rem 0.75rem;
@@ -1149,12 +1149,12 @@ pre.chat-md-code-block code {
 }
 
 .chat-tool-error-section {
-  background-color: rgb(239 68 68 / 0.05);
+  background-color: color-mix(in srgb, var(--error) 5%, transparent);
 }
 
 .chat-tool-error {
   font-size: 0.6875rem;
-  color: rgb(239 68 68);
+  color: var(--error);
 }
 
 .chat-tool-children {
@@ -1523,7 +1523,7 @@ pre.chat-md-code-block code {
   border-radius: 0.25rem;
   background-color: color-mix(in srgb, var(--muted) 60%, transparent);
   border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.5625rem;
 }
 
@@ -1610,7 +1610,7 @@ pre.chat-md-code-block code {
 }
 
 .chat-attachment-error {
-  color: rgb(239 68 68);
+  color: var(--error);
 }
 
 .chat-attachment-remove-btn {
@@ -1627,9 +1627,9 @@ pre.chat-md-code-block code {
 }
 
 .chat-attachment-remove-btn:hover {
-  background-color: rgb(239 68 68);
-  border-color: rgb(239 68 68);
-  color: white;
+  background-color: var(--error);
+  border-color: var(--error);
+  color: var(--error-foreground);
 }
 
 /* ============================================
@@ -1718,11 +1718,11 @@ pre.chat-md-code-block code {
 
    Design notes:
    1. These rules live in @layer components so they can override the global @layer base selection styles in floe.css.
-   2. Code blocks use hard-coded colors because they always have a fixed dark background (#0d1117).
+   2. Code blocks consume dedicated selection tokens because they always sit on a fixed dark surface.
    3. User message bubbles use theme variables because bubble colors vary by theme.
 
    Color scheme:
-   - Code blocks: bright blue background (#57a5ff) + dark text (#0d1117)
+   - Code blocks: dedicated code selection tokens
    - User bubbles (light theme): yellow background + black text (bubble background is dark)
    - User bubbles (dark theme): dark blue background + white text (bubble background is light)
 */
@@ -1734,8 +1734,7 @@ pre.chat-md-code-block code {
 }
 
 /* Code-block selection
-   Code blocks always use a dark background (#0d1117), so we use a fixed bright selection style.
-   Hard-coded colors ensure visibility in all cases. */
+   Code blocks always use a dark background, so they consume dedicated selection tokens. */
 .chat-code-block ::selection,
 .chat-code-block *::selection,
 .chat-code-diff-block ::selection,
@@ -1744,8 +1743,8 @@ pre.chat-md-code-block ::selection,
 pre.chat-md-code-block *::selection,
 .chat-shell-block ::selection,
 .chat-shell-block *::selection {
-  background-color: #57a5ff;
-  color: #0d1117;
+  background-color: var(--selection-code-bg);
+  color: var(--selection-code-fg);
 }
 
 /* User message bubble selection

package/dist/components/chat/blocks/CodeDiffBlock.js

@@ -1,50 +1,50 @@
-import { insert as d, createComponent as o, effect as x, className as w, setAttribute as U, template as h, addEventListener as A, use as H, setStyleProperty as L, delegateEvents as z } from "solid-js/web";
+import { insert as d, createComponent as o, effect as y, className as w, setAttribute as U, template as h, addEventListener as A, use as H, setStyleProperty as L, delegateEvents as z } from "solid-js/web";
 import { createSignal as I, onCleanup as G, createEffect as O, createMemo as E, Show as m, For as B } from "solid-js";
-import { cn as y } from "../../../utils/cn.js";
+import { cn as x } from "../../../utils/cn.js";
 import { deferAfterPaint as X } from "../../../utils/defer.js";
 import { useVirtualWindow as N } from "../../../hooks/useVirtualWindow.js";
 import { hasDiffWorker as V, computeCodeDiff as j, computeCodeDiffSync as q } from "../hooks/useCodeDiff.js";
-var J = /* @__PURE__ */ h("<span class=chat-code-diff-filename>"), K = /* @__PURE__ */ h('<span class=chat-code-diff-stats><span style="color:rgb(34 197 94)">+</span><span style="color:rgb(239 68 68);margin-left:0.5rem">-'), Q = /* @__PURE__ */ h("<div><div class=chat-code-diff-header><div class=chat-code-diff-info></div><div class=chat-code-diff-actions><div class=chat-code-diff-view-toggle><button type=button>Unified</button><button type=button>Split</button></div><button type=button class=chat-code-copy-btn>"), Y = /* @__PURE__ */ h('<span class="chat-code-diff-stats text-muted-foreground">...'), Z = /* @__PURE__ */ h('<div class="p-3 text-xs text-muted-foreground">Computing diff...'), ee = /* @__PURE__ */ h('<div class="p-3 text-xs text-muted-foreground">Diff is too large to render without a worker. Configure `configureDiffWorker(createDiffWorker())`.'), te = /* @__PURE__ */ h("<div class=chat-code-diff-content>"), ne = /* @__PURE__ */ h("<div class=chat-code-diff-content><div><div class=chat-diff-unified>"), ie = /* @__PURE__ */ h("<div style=height:18px><span class=chat-diff-line-number></span><span class=chat-diff-line-sign></span><span class=chat-diff-line-content>"), re = /* @__PURE__ */ h("<div class=chat-code-diff-content><div><div class=chat-diff-split><div class=chat-diff-split-side></div><div class=chat-diff-split-side>"), le = /* @__PURE__ */ h("<div style=height:18px><span class=chat-diff-line-number></span><span class=chat-diff-line-content>"), oe = /* @__PURE__ */ h('<svg width=14 height=14 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><rect x=9 y=9 width=13 height=13 rx=2 ry=2></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1">'), de = /* @__PURE__ */ h('<svg width=14 height=14 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><polyline points="20 6 9 17 4 12">');
-const ce = 8e4, P = 18, Ce = (s) => {
-  const [t, r] = I("unified"), [c, l] = I(!1), [i, f] = I(null), [n, u] = I(!0);
-  let g = 0;
+var J = /* @__PURE__ */ h("<span class=chat-code-diff-filename>"), K = /* @__PURE__ */ h("<span class=chat-code-diff-stats><span class=text-success>+</span><span class=text-error style=margin-left:0.5rem>-"), Q = /* @__PURE__ */ h("<div><div class=chat-code-diff-header><div class=chat-code-diff-info></div><div class=chat-code-diff-actions><div class=chat-code-diff-view-toggle><button type=button>Unified</button><button type=button>Split</button></div><button type=button class=chat-code-copy-btn>"), Y = /* @__PURE__ */ h('<span class="chat-code-diff-stats text-muted-foreground">...'), Z = /* @__PURE__ */ h('<div class="p-3 text-xs text-muted-foreground">Computing diff...'), ee = /* @__PURE__ */ h('<div class="p-3 text-xs text-muted-foreground">Diff is too large to render without a worker. Configure `configureDiffWorker(createDiffWorker())`.'), te = /* @__PURE__ */ h("<div class=chat-code-diff-content>"), ne = /* @__PURE__ */ h("<div class=chat-code-diff-content><div><div class=chat-diff-unified>"), ie = /* @__PURE__ */ h("<div style=height:18px><span class=chat-diff-line-number></span><span class=chat-diff-line-sign></span><span class=chat-diff-line-content>"), re = /* @__PURE__ */ h("<div class=chat-code-diff-content><div><div class=chat-diff-split><div class=chat-diff-split-side></div><div class=chat-diff-split-side>"), le = /* @__PURE__ */ h("<div style=height:18px><span class=chat-diff-line-number></span><span class=chat-diff-line-content>"), oe = /* @__PURE__ */ h('<svg width=14 height=14 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><rect x=9 y=9 width=13 height=13 rx=2 ry=2></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1">'), de = /* @__PURE__ */ h('<svg width=14 height=14 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><polyline points="20 6 9 17 4 12">');
+const se = 8e4, P = 18, Ce = (c) => {
+  const [t, r] = I("unified"), [s, l] = I(!1), [i, f] = I(null), [n, u] = I(!0);
+  let v = 0;
   G(() => {
-    g += 1;
+    v += 1;
   }), O(() => {
-    const v = s.oldCode ?? "", R = s.newCode ?? "", p = ++g;
+    const g = c.oldCode ?? "", R = c.newCode ?? "", p = ++v;
     u(!0), f(null);
-    const C = v, $ = R;
+    const C = g, $ = R;
     X(() => {
-      if (p !== g) return;
-      if (C.length + $.length > ce && !V()) {
+      if (p !== v) return;
+      if (C.length + $.length > se && !V()) {
         u(!1);
         return;
       }
       (V() ? j(C, $) : Promise.resolve(q(C, $))).then((e) => {
-        p === g && f(e);
+        p === v && f(e);
       }).catch((e) => {
-        console.error("Diff compute error:", e), p === g && f(null);
+        console.error("Diff compute error:", e), p === v && f(null);
       }).finally(() => {
-        p === g && u(!1);
+        p === v && u(!1);
       });
     });
   });
   const a = E(() => i()?.stats), k = async () => {
     try {
-      await navigator.clipboard.writeText(s.newCode), l(!0), setTimeout(() => l(!1), 2e3);
-    } catch (v) {
-      console.error("Failed to copy:", v);
+      await navigator.clipboard.writeText(c.newCode), l(!0), setTimeout(() => l(!1), 2e3);
+    } catch (g) {
+      console.error("Failed to copy:", g);
     }
   };
   return (() => {
-    var v = Q(), R = v.firstChild, p = R.firstChild, C = p.nextSibling, $ = C.firstChild, S = $.firstChild, F = S.nextSibling, D = $.nextSibling;
+    var g = Q(), R = g.firstChild, p = R.firstChild, C = p.nextSibling, $ = C.firstChild, S = $.firstChild, F = S.nextSibling, D = $.nextSibling;
     return d(p, o(m, {
       get when() {
-        return s.filename;
+        return c.filename;
       },
       get children() {
         var e = J();
-        return d(e, () => s.filename), e;
+        return d(e, () => c.filename), e;
       }
     }), null), d(p, o(m, {
       get when() {
@@ -61,7 +61,7 @@ const ce = 8e4, P = 18, Ce = (s) => {
       }
     }), null), S.$$click = () => r("unified"), F.$$click = () => r("split"), D.$$click = k, d(D, o(m, {
       get when() {
-        return c();
+        return s();
       },
       get fallback() {
         return o(ue, {});
@@ -69,7 +69,7 @@ const ce = 8e4, P = 18, Ce = (s) => {
       get children() {
         return o(he, {});
       }
-    })), d(v, o(m, {
+    })), d(g, o(m, {
       get when() {
         return i();
       },
@@ -106,7 +106,7 @@ const ce = 8e4, P = 18, Ce = (s) => {
             });
           },
           get children() {
-            return o(se, {
+            return o(ce, {
               get model() {
                 return i();
               }
@@ -114,23 +114,23 @@ const ce = 8e4, P = 18, Ce = (s) => {
           }
         });
       }
-    }), null), x((e) => {
-      var _ = y("chat-code-diff-block", s.class), b = y("chat-code-diff-view-btn", t() === "unified" && "active"), M = y("chat-code-diff-view-btn", t() === "split" && "active"), T = c() ? "Copied!" : "Copy new code";
-      return _ !== e.e && w(v, e.e = _), b !== e.t && w(S, e.t = b), M !== e.a && w(F, e.a = M), T !== e.o && U(D, "title", e.o = T), e;
+    }), null), y((e) => {
+      var _ = x("chat-code-diff-block", c.class), b = x("chat-code-diff-view-btn", t() === "unified" && "active"), M = x("chat-code-diff-view-btn", t() === "split" && "active"), T = s() ? "Copied!" : "Copy new code";
+      return _ !== e.e && w(g, e.e = _), b !== e.t && w(S, e.t = b), M !== e.a && w(F, e.a = M), T !== e.o && U(D, "title", e.o = T), e;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), v;
+    }), g;
   })();
 };
-function se(s) {
-  const t = () => s.model.unifiedLines, r = N({
+function ce(c) {
+  const t = () => c.model.unifiedLines, r = N({
     count: () => t().length,
     itemSize: () => P,
     overscan: 12
-  }), c = E(() => {
+  }), s = E(() => {
     const {
       start: l,
       end: i
@@ -142,31 +142,31 @@ function se(s) {
     var l = ne(), i = l.firstChild, f = i.firstChild;
     return A(l, "scroll", r.onScroll), H((n) => r.scrollRef(n), l), d(f, o(B, {
       get each() {
-        return c();
+        return s();
       },
       children: (n) => o(ae, {
         get line() {
           return t()[n];
         }
       })
-    })), x((n) => {
-      var u = `${r.paddingTop()}px`, g = `${r.paddingBottom()}px`;
-      return u !== n.e && L(i, "padding-top", n.e = u), g !== n.t && L(i, "padding-bottom", n.t = g), n;
+    })), y((n) => {
+      var u = `${r.paddingTop()}px`, v = `${r.paddingBottom()}px`;
+      return u !== n.e && L(i, "padding-top", n.e = u), v !== n.t && L(i, "padding-bottom", n.t = v), n;
     }, {
       e: void 0,
       t: void 0
     }), l;
   })();
 }
-function ae(s) {
-  const t = () => s.line;
+function ae(c) {
+  const t = () => c.line;
   return (() => {
-    var r = ie(), c = r.firstChild, l = c.nextSibling, i = l.nextSibling;
-    return d(c, () => t()?.lineNumber ?? ""), d(l, () => t()?.sign ?? " "), d(i, () => t()?.content ?? " "), x(() => w(r, y("chat-diff-line", t()?.type === "added" && "chat-diff-line-added", t()?.type === "removed" && "chat-diff-line-removed"))), r;
+    var r = ie(), s = r.firstChild, l = s.nextSibling, i = l.nextSibling;
+    return d(s, () => t()?.lineNumber ?? ""), d(l, () => t()?.sign ?? " "), d(i, () => t()?.content ?? " "), y(() => w(r, x("chat-diff-line", t()?.type === "added" && "chat-diff-line-added", t()?.type === "removed" && "chat-diff-line-removed"))), r;
   })();
 }
-function fe(s) {
-  const t = () => s.model.split.left, r = () => s.model.split.right, c = N({
+function fe(c) {
+  const t = () => c.model.split.left, r = () => c.model.split.right, s = N({
     count: () => t().length,
     itemSize: () => P,
     overscan: 12
@@ -174,13 +174,13 @@ function fe(s) {
     const {
       start: i,
       end: f
-    } = c.range(), n = [];
+    } = s.range(), n = [];
     for (let u = i; u < f; u += 1) n.push(u);
     return n;
   });
   return (() => {
-    var i = re(), f = i.firstChild, n = f.firstChild, u = n.firstChild, g = u.nextSibling;
-    return A(i, "scroll", c.onScroll), H((a) => c.scrollRef(a), i), d(u, o(B, {
+    var i = re(), f = i.firstChild, n = f.firstChild, u = n.firstChild, v = u.nextSibling;
+    return A(i, "scroll", s.onScroll), H((a) => s.scrollRef(a), i), d(u, o(B, {
       get each() {
         return l();
       },
@@ -189,7 +189,7 @@ function fe(s) {
           return t()[a];
         }
       })
-    })), d(g, o(B, {
+    })), d(v, o(B, {
       get each() {
         return l();
       },
@@ -198,20 +198,20 @@ function fe(s) {
           return r()[a];
         }
       })
-    })), x((a) => {
-      var k = `${c.paddingTop()}px`, v = `${c.paddingBottom()}px`;
-      return k !== a.e && L(f, "padding-top", a.e = k), v !== a.t && L(f, "padding-bottom", a.t = v), a;
+    })), y((a) => {
+      var k = `${s.paddingTop()}px`, g = `${s.paddingBottom()}px`;
+      return k !== a.e && L(f, "padding-top", a.e = k), g !== a.t && L(f, "padding-bottom", a.t = g), a;
     }, {
       e: void 0,
       t: void 0
     }), i;
   })();
 }
-function W(s) {
-  const t = () => s.line;
+function W(c) {
+  const t = () => c.line;
   return (() => {
-    var r = le(), c = r.firstChild, l = c.nextSibling;
-    return d(c, () => t()?.lineNumber ?? ""), d(l, () => t()?.content ?? " "), x(() => w(r, y("chat-diff-line", t()?.type === "added" && "chat-diff-line-added", t()?.type === "removed" && "chat-diff-line-removed", t()?.type === "empty" && "chat-diff-line-empty"))), r;
+    var r = le(), s = r.firstChild, l = s.nextSibling;
+    return d(s, () => t()?.lineNumber ?? ""), d(l, () => t()?.content ?? " "), y(() => w(r, x("chat-diff-line", t()?.type === "added" && "chat-diff-line-added", t()?.type === "removed" && "chat-diff-line-removed", t()?.type === "empty" && "chat-diff-line-empty"))), r;
   })();
 }
 const ue = () => oe(), he = () => de();

package/dist/components/chat/blocks/ToolCallBlock.js

@@ -17,11 +17,11 @@ const It = (t) => {
       case "pending":
         return "text-muted-foreground";
       case "running":
-        return "text-blue-500";
+        return "text-info";
       case "success":
-        return "text-green-500";
+        return "text-success";
       case "error":
-        return "text-red-500";
+        return "text-error";
       default:
         return "text-muted-foreground";
     }

package/dist/components/chat/message/MessageMeta.js

@@ -1,7 +1,7 @@
 import { insert as o, createComponent as i, memo as l, effect as m, className as u, template as n } from "solid-js/web";
 import { Show as g } from "solid-js";
 import { cn as h } from "../../../utils/cn.js";
-var d = /* @__PURE__ */ n("<span class=chat-message-status>"), w = /* @__PURE__ */ n("<div><span class=chat-message-time>"), f = /* @__PURE__ */ n('<svg width=12 height=12 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 class=animate-pulse><circle cx=12 cy=12 r=10>'), x = /* @__PURE__ */ n('<svg width=12 height=12 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 class=animate-spin><path d="M21 12a9 9 0 1 1-6.219-8.56">'), p = /* @__PURE__ */ n('<svg width=12 height=12 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 class=text-red-500><circle cx=12 cy=12 r=10></circle><line x1=15 y1=9 x2=9 y2=15></line><line x1=9 y1=9 x2=15 y2=15>');
+var d = /* @__PURE__ */ n("<span class=chat-message-status>"), w = /* @__PURE__ */ n("<div><span class=chat-message-time>"), f = /* @__PURE__ */ n('<svg width=12 height=12 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 class=animate-pulse><circle cx=12 cy=12 r=10>'), x = /* @__PURE__ */ n('<svg width=12 height=12 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 class=animate-spin><path d="M21 12a9 9 0 1 1-6.219-8.56">'), p = /* @__PURE__ */ n('<svg width=12 height=12 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 class=text-error><circle cx=12 cy=12 r=10></circle><line x1=15 y1=9 x2=9 y2=15></line><line x1=9 y1=9 x2=15 y2=15>');
 const D = (e) => {
   const a = (t) => {
     const r = new Date(t), s = /* @__PURE__ */ new Date();

package/dist/components/chat/status/ConnectionStatus.js

@@ -1,4 +1,4 @@
-import { insert as d, effect as m, className as a, template as f } from "solid-js/web";
+import { insert as d, effect as m, className as l, template as f } from "solid-js/web";
 import "solid-js";
 import { cn as s } from "../../../utils/cn.js";
 var b = /* @__PURE__ */ f("<div><span></span><span class=chat-connection-label>");
@@ -8,12 +8,12 @@ const h = (t) => {
       case "connecting":
         return {
           label: "Connecting...",
-          color: "text-yellow-500"
+          color: "text-warning"
         };
       case "connected":
         return {
           label: "Connected",
-          color: "text-green-500"
+          color: "text-success"
         };
       case "disconnected":
         return {
@@ -23,7 +23,7 @@ const h = (t) => {
       case "error":
         return {
           label: "Connection Error",
-          color: "text-red-500"
+          color: "text-error"
         };
       default:
         return {
@@ -35,8 +35,8 @@ const h = (t) => {
   return (() => {
     var n = b(), r = n.firstChild, u = r.nextSibling;
     return d(u, () => o().label), m((e) => {
-      var c = s("chat-connection-status", o().color, t.class), l = s("chat-connection-dot", t.state === "connecting" && "animate-pulse");
-      return c !== e.e && a(n, e.e = c), l !== e.t && a(r, e.t = l), e;
+      var c = s("chat-connection-status", o().color, t.class), a = s("chat-connection-dot", t.state === "connecting" && "animate-pulse");
+      return c !== e.e && l(n, e.e = c), a !== e.t && l(r, e.t = a), e;
     }, {
       e: void 0,
       t: void 0

package/dist/components/deck/DropZonePreview.js

@@ -1,41 +1,33 @@
-import { effect as v, className as i, setStyleProperty as b, template as m } from "solid-js/web";
-import { cn as n } from "../../utils/cn.js";
-import { positionToGridArea as f } from "../../utils/gridLayout.js";
-var g = /* @__PURE__ */ m("<div><div>");
-function _(a) {
-  const s = () => f(a.position);
+import { effect as m, className as c, setStyleProperty as i, template as b } from "solid-js/web";
+import { cn as f } from "../../utils/cn.js";
+import { positionToGridArea as g } from "../../utils/gridLayout.js";
+var u = /* @__PURE__ */ b('<div><div class="absolute inset-0 rounded-md">');
+function V(o) {
+  const v = () => g(o.position), a = () => o.isValid !== !1 ? "--info" : "--error";
   return (() => {
-    var e = g(), l = e.firstChild;
-    return v((r) => {
-      var t = n(
+    var e = u(), l = e.firstChild;
+    return m((r) => {
+      var n = f(
         "pointer-events-none rounded-md relative",
         "border-2 border-dashed",
-        // Theme-adaptive colors
-        a.isValid !== !1 ? [
-          // Light mode: darker colors for contrast
-          "border-slate-400 bg-slate-200/60",
-          // Dark mode: lighter colors for contrast
-          "dark:border-slate-400 dark:bg-slate-600/40"
-        ] : ["border-red-400 bg-red-200/60", "dark:border-red-400 dark:bg-red-500/30"],
-        // Theme-adaptive shadow
-        "shadow-[0_4px_16px_rgba(0,0,0,0.12)]",
-        "dark:shadow-[0_4px_16px_rgba(255,255,255,0.08)]",
+        o.isValid !== !1 ? "border-info/50 bg-info/10" : "border-error/50 bg-error/10",
         // Subtle animation
         "animate-in fade-in duration-150"
-      ), d = s(), o = n("absolute inset-0 rounded-md", a.isValid !== !1 ? [
-        // Light mode: subtle dark gradient
-        "bg-gradient-to-br from-slate-300/40 via-transparent to-slate-400/20",
-        // Dark mode: subtle light gradient
-        "dark:from-slate-400/20 dark:via-transparent dark:to-slate-300/10"
-      ] : ["bg-gradient-to-br from-red-300/40 via-transparent to-red-400/20", "dark:from-red-400/20 dark:via-transparent dark:to-red-300/10"]);
-      return t !== r.e && i(e, r.e = t), d !== r.t && b(e, "grid-area", r.t = d), o !== r.a && i(l, r.a = o), r;
+      ), t = v(), d = `0 4px 16px color-mix(in srgb, var(${a()}) 18%, transparent)`, s = `linear-gradient(
+            135deg,
+            color-mix(in srgb, var(${a()}) 18%, transparent) 0%,
+            transparent 55%,
+            color-mix(in srgb, var(${a()}) 10%, var(--card)) 100%
+          )`;
+      return n !== r.e && c(e, r.e = n), t !== r.t && i(e, "grid-area", r.t = t), d !== r.a && i(e, "box-shadow", r.a = d), s !== r.o && i(l, "background", r.o = s), r;
     }, {
       e: void 0,
       t: void 0,
-      a: void 0
+      a: void 0,
+      o: void 0
     }), e;
   })();
 }
 export {
-  _ as DropZonePreview
+  V as DropZonePreview
 };