@floegence/floe-webapp-core 0.86.38 → 0.86.40

package/dist/chat.css

@@ -365,12 +365,39 @@
 }
 
 .chat-md-inline-code {
-  padding: 0.125rem 0.375rem;
+  padding: 0.12em 0.36em;
+  border: 0;
   border-radius: 0.25rem;
-  background-color: color-mix(in srgb, var(--muted) 70%, transparent);
+  background-color: var(--inline-code-background);
+  color: var(--inline-code-foreground);
   font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  color: var(--primary);
+  font-size: 0.91em;
+  font-weight: 400;
+  line-height: inherit;
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+  word-break: normal;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.chat-container .chat-md-inline-code::selection,
+.chat-message-bubble-user .chat-md-inline-code::selection {
+  background-color: var(--inline-code-foreground);
+  color: var(--inline-code-background);
+}
+
+@media (forced-colors: active) {
+  .chat-md-inline-code {
+    background-color: Canvas;
+    color: CanvasText;
+  }
+
+  .chat-container .chat-md-inline-code::selection,
+  .chat-message-bubble-user .chat-md-inline-code::selection {
+    background-color: Highlight;
+    color: HighlightText;
+  }
 }
 
 /* Markdown code blocks - always dark background

package/dist/components/ui/Tabs.js

@@ -1,17 +1,18 @@
 import { createComponent as v, spread as ue, mergeProps as fe, insert as f, effect as y, className as k, setStyleProperty as ae, memo as le, use as ie, setAttribute as p, template as w, delegateEvents as Re } from "solid-js/web";
-import { splitProps as ve, Show as B, createSignal as L, untrack as de, createEffect as X, For as Te, onCleanup as ce } from "solid-js";
+import { splitProps as ve, Show as B, createSignal as L, untrack as de, createEffect as X, onCleanup as ce } from "solid-js";
 import { cn as g } from "../../utils/cn.js";
 import { deferAfterPaint as _ } from "../../utils/defer.js";
+import { KeyedFor as Te } from "./KeyedFor.js";
 import { createUIFirstSelection as ze } from "../../utils/uiFirstSelection.js";
 import { useViewActivation as Ee } from "../../context/ViewActivationContext.js";
 import { X as He, Plus as Pe, ChevronRight as De } from "../icons/index.js";
-var Me = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), _e = /* @__PURE__ */ w('<button type=button aria-label="Scroll left">'), Oe = /* @__PURE__ */ w("<div>"), We = /* @__PURE__ */ w('<button type=button aria-label="Add new tab">'), Fe = /* @__PURE__ */ w('<button type=button aria-label="Scroll right">'), je = /* @__PURE__ */ w("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), Ge = /* @__PURE__ */ w("<span class=flex-shrink-0>"), Ue = /* @__PURE__ */ w("<button type=button>"), Xe = /* @__PURE__ */ w('<div role=tab data-floe-surface-part=tab><span class="truncate max-w-32">'), Ve = /* @__PURE__ */ w("<div role=tabpanel>");
-const V = {
+var Me = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), _e = /* @__PURE__ */ w('<button type=button aria-label="Scroll left">'), Oe = /* @__PURE__ */ w("<div>"), We = /* @__PURE__ */ w('<button type=button aria-label="Add new tab">'), Fe = /* @__PURE__ */ w('<button type=button aria-label="Scroll right">'), je = /* @__PURE__ */ w("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), Ge = /* @__PURE__ */ w("<span class=flex-shrink-0>"), Ue = /* @__PURE__ */ w("<button type=button>"), Xe = /* @__PURE__ */ w('<div role=tab data-floe-surface-part=tab><span class="truncate max-w-32">'), Ke = /* @__PURE__ */ w("<div role=tabpanel>");
+const K = {
   x: 0,
   width: 0,
   visible: !1
 };
-function qe(i, e, h) {
+function Ve(i, e, h) {
   const d = i.filter((x) => !x.disabled);
   if (!d.length) return null;
   const C = d.findIndex((x) => x.id === e);
@@ -37,7 +38,7 @@ function qe(i, e, h) {
   }
   return d[b]?.id ?? null;
 }
-function Ke(i) {
+function qe(i) {
   return i === 1 || i === 2 || i === 3 || i === 4 ? i : 2;
 }
 function Ye(i) {
@@ -105,18 +106,18 @@ function Ze(i) {
     visible: z > 0
   };
 }
-function it(i) {
-  const [e, h] = ve(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), d = () => e.features?.indicator?.mode ?? "activeBorder", C = () => Ke(e.features?.indicator?.thicknessPx), b = () => e.features?.indicator?.colorToken ?? "primary", x = () => e.features?.indicator?.animated ?? !0, R = () => e.features?.containerBorder ?? !0, I = () => e.features?.scrollButtons ?? "auto", T = () => e.features?.closeButton?.dangerHover ?? !0, z = () => e.features?.closeButton?.enabledByDefault ?? e.closable ?? !1, he = () => e.features?.addButton?.enabled ?? e.showAdd ?? !1, q = () => Ye(C()), O = () => Je(b());
+function dt(i) {
+  const [e, h] = ve(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), d = () => e.features?.indicator?.mode ?? "activeBorder", C = () => qe(e.features?.indicator?.thicknessPx), b = () => e.features?.indicator?.colorToken ?? "primary", x = () => e.features?.indicator?.animated ?? !0, R = () => e.features?.containerBorder ?? !0, I = () => e.features?.scrollButtons ?? "auto", T = () => e.features?.closeButton?.dangerHover ?? !0, z = () => e.features?.closeButton?.enabledByDefault ?? e.closable ?? !1, he = () => e.features?.addButton?.enabled ?? e.showAdd ?? !1, V = () => Ye(C()), O = () => Je(b());
   let u;
-  const K = (() => {
+  const q = (() => {
     try {
       return Ee();
     } catch {
       return null;
     }
-  })(), S = () => K ? K.active() : !0;
+  })(), S = () => q ? q.active() : !0;
   let W = !1;
-  const [E, F] = L(V), H = /* @__PURE__ */ new Map();
+  const [E, F] = L(K), H = /* @__PURE__ */ new Map();
   let j = !1;
   const P = () => d() === "slider", Y = (s) => {
     if (!u || !P()) return !1;
@@ -129,10 +130,10 @@ function it(i) {
     return F(a), a.visible;
   }, be = () => {
     if (!P()) {
-      F(V);
+      F(K);
       return;
     }
-    Y(G()) || F(V);
+    Y(G()) || F(K);
   }, D = () => {
     j || (j = !0, _(() => {
       j = !1, de(() => {
@@ -200,7 +201,7 @@ function it(i) {
       inline: "nearest"
     });
   }, Ae = (s, o) => {
-    const a = qe(e.items, o.id, s.key);
+    const a = Ve(e.items, o.id, s.key);
     a && (s.preventDefault(), Se(a));
   }, $e = (s, o) => {
     s.stopPropagation();
@@ -216,7 +217,7 @@ function it(i) {
       const c = d();
       return c === "none" || c === "slider" && E().visible ? "border-transparent" : O().tabBorderClass;
     })();
-    return g(a, t, Ne[e.size ?? "md"], "rounded-t", q().tabBorderClass, s ? g(r, "text-foreground bg-background", e.slotClassNames?.tabActive) : g("border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", e.slotClassNames?.tabInactive), o && "hover:bg-transparent hover:text-muted-foreground hover:border-transparent", e.slotClassNames?.tab);
+    return g(a, t, Ne[e.size ?? "md"], "rounded-t", V().tabBorderClass, s ? g(r, "text-foreground bg-background", e.slotClassNames?.tabActive) : g("border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", e.slotClassNames?.tabInactive), o && "hover:bg-transparent hover:text-muted-foreground hover:border-transparent", e.slotClassNames?.tab);
   };
   return (() => {
     var s = je(), o = s.firstChild;
@@ -249,7 +250,7 @@ function it(i) {
       get children() {
         var t = Oe();
         return y((r) => {
-          var c = g("pointer-events-none absolute bottom-0 left-0 z-10", q().sliderHeightClass, O().sliderBgClass, x() ? "transition-[transform,width] duration-200 ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", e.slotClassNames?.indicator), l = `translate3d(${E().x}px, 0, 0)`, A = `${E().width}px`;
+          var c = g("pointer-events-none absolute bottom-0 left-0 z-10", V().sliderHeightClass, O().sliderBgClass, x() ? "transition-[transform,width] duration-200 ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", e.slotClassNames?.indicator), l = `translate3d(${E().x}px, 0, 0)`, A = `${E().width}px`;
           return c !== r.e && k(t, r.e = c), l !== r.t && ae(t, "transform", r.t = l), A !== r.a && ae(t, "width", r.a = A), r;
         }, {
           e: void 0,
@@ -261,36 +262,37 @@ function it(i) {
       get each() {
         return e.items;
       },
+      by: (t) => t.id,
       children: (t) => {
-        const r = () => t.id === G(), c = () => t.closable ?? z();
+        const r = () => t().id === G(), c = () => t().closable ?? z();
         return (() => {
           var l = Xe(), A = l.firstChild;
           return l.$$keydown = (n) => {
             if (n.key === "Enter" || n.key === " ") {
-              n.preventDefault(), U(t.id, t.disabled);
+              n.preventDefault(), U(t().id, t().disabled);
               return;
             }
-            Ae(n, t);
-          }, l.$$click = () => U(t.id, t.disabled), ie((n) => {
-            H.set(t.id, n), ce(() => H.delete(t.id));
+            Ae(n, t());
+          }, l.$$click = () => U(t().id, t().disabled), ie((n) => {
+            H.set(t().id, n), ce(() => H.delete(t().id));
           }, l), f(l, v(B, {
             get when() {
-              return t.icon;
+              return t().icon;
             },
             get children() {
               var n = Ge();
-              return f(n, () => t.icon), n;
+              return f(n, () => t().icon), n;
             }
-          }), A), f(A, () => t.label), f(l, v(B, {
+          }), A), f(A, () => t().label), f(l, v(B, {
             get when() {
-              return le(() => !!c())() && !t.disabled;
+              return le(() => !!c())() && !t().disabled;
             },
             get children() {
               var n = Ue();
-              return n.$$click = (m) => $e(m, t.id), f(n, v(He, {
+              return n.$$click = (m) => $e(m, t().id), f(n, v(He, {
                 class: "w-3 h-3"
               })), y((m) => {
-                var $ = g("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded cursor-pointer", "bg-transparent text-muted-foreground", T() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-muted/80 hover:text-foreground", "transition-colors duration-120", "ml-1.5", e.slotClassNames?.closeButton), N = `Close ${t.label}`;
+                var $ = g("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded cursor-pointer", "bg-transparent text-muted-foreground", T() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-muted/80 hover:text-foreground", "transition-colors duration-120", "ml-1.5", e.slotClassNames?.closeButton), N = `Close ${t().label}`;
                 return $ !== m.e && k(n, m.e = $), N !== m.t && p(n, "aria-label", m.t = N), m;
               }, {
                 e: void 0,
@@ -298,7 +300,7 @@ function it(i) {
               }), n;
             }
           }), null), y((n) => {
-            var m = Le(r(), t.disabled), $ = t.domId, N = t.panelId, re = r() ? "raised" : "flat", oe = r(), ne = t.disabled, se = t.disabled ? -1 : r() ? 0 : -1;
+            var m = Le(r(), t().disabled), $ = t().domId, N = t().panelId, re = r() ? "raised" : "flat", oe = r(), ne = t().disabled, se = t().disabled ? -1 : r() ? 0 : -1;
             return m !== n.e && k(l, n.e = m), $ !== n.t && p(l, "id", n.t = $), N !== n.a && p(l, "aria-controls", n.a = N), re !== n.o && p(l, "data-floe-surface", n.o = re), oe !== n.i && p(l, "aria-selected", n.i = oe), ne !== n.n && p(l, "aria-disabled", n.n = ne), se !== n.s && p(l, "tabindex", n.s = se), n;
           }, {
             e: void 0,
@@ -357,14 +359,14 @@ function it(i) {
     }), s;
   })();
 }
-function dt(i) {
+function ct(i) {
   const [e, h] = ve(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
   return v(B, {
     get when() {
       return e.keepMounted || e.active;
     },
     get children() {
-      var d = Ve();
+      var d = Ke();
       return ue(d, fe({
         get "aria-labelledby"() {
           return e.labelledBy;
@@ -384,7 +386,7 @@ function dt(i) {
 }
 Re(["click", "keydown"]);
 export {
-  dt as TabPanel,
-  it as Tabs,
-  qe as resolveTabNavigationTargetId
+  ct as TabPanel,
+  dt as Tabs,
+  Ve as resolveTabNavigationTargetId
 };

package/dist/styles/themes/classicSemanticTokens.d.ts

@@ -3,6 +3,8 @@ export declare const CLASSIC_LIGHT_CSS_TOKENS: {
     '--floe-window-titlebar-background': "var(--popover)";
     '--background': "#f8f7f2";
     '--foreground': "#303a34";
+    '--inline-code-foreground': "#4C6544";
+    '--inline-code-background': "#EAEBE4";
     '--primary': "#465a43";
     '--primary-foreground': "#f8faf5";
     '--secondary': "#eeefe8";
@@ -74,6 +76,8 @@ export declare const CLASSIC_DARK_CSS_TOKENS: {
     '--floe-window-titlebar-background': "var(--popover)";
     '--background': "#202223";
     '--foreground': "#e5e6e2";
+    '--inline-code-foreground': "#BBC9AF";
+    '--inline-code-background': "#2E3130";
     '--primary': "#bccbb8";
     '--primary-foreground': "#20291f";
     '--secondary': "#303435";

package/dist/styles/themes/classicSemanticTokens.js

@@ -1,22 +1,24 @@
 import { createProgressTokens as b } from "./progressTokens.js";
-import { LIGHT_WINDOW_TOKENS as l, DARK_WINDOW_TOKENS as h } from "./windowTokens.js";
+import { LIGHT_WINDOW_TOKENS as l, DARK_WINDOW_TOKENS as g } from "./windowTokens.js";
 function f(c) {
   const a = {}, n = (r, o = /* @__PURE__ */ new Set()) => {
     const e = c[r];
     if (!e || o.has(r)) return e;
-    const t = /^var\((--[\w-]+)\)$/u.exec(e)?.[1];
-    return t ? (o.add(r), n(t, o)) : e;
+    const i = /^var\((--[\w-]+)\)$/u.exec(e)?.[1];
+    return i ? (o.add(r), n(i, o)) : e;
   };
   for (const r of Object.keys(c))
     a[r] = n(r);
   return Object.freeze(a);
 }
-const i = {
+const d = {
   ...l,
   "--floe-window-background": "var(--popover)",
   "--floe-window-titlebar-background": "var(--popover)",
   "--background": "#f8f7f2",
   "--foreground": "#303a34",
+  "--inline-code-foreground": "#4C6544",
+  "--inline-code-background": "#EAEBE4",
   "--primary": "#465a43",
   "--primary-foreground": "#f8faf5",
   "--secondary": "#eeefe8",
@@ -78,12 +80,14 @@ const i = {
   "--selection-code-bg": "hsl(212 100% 67%)",
   "--selection-code-fg": "hsl(220 20% 8%)",
   "--glow": "#465a43"
-}, d = {
-  ...h,
+}, t = {
+  ...g,
   "--floe-window-background": "var(--popover)",
   "--floe-window-titlebar-background": "var(--popover)",
   "--background": "#202223",
   "--foreground": "#e5e6e2",
+  "--inline-code-foreground": "#BBC9AF",
+  "--inline-code-background": "#2E3130",
   "--primary": "#bccbb8",
   "--primary-foreground": "#20291f",
   "--secondary": "#303435",
@@ -145,10 +149,10 @@ const i = {
   "--selection-code-bg": "hsl(212 100% 67%)",
   "--selection-code-fg": "hsl(220 20% 8%)",
   "--glow": "hsl(217 65% 52%)"
-}, g = { ...i, ...b("light", i) }, s = { ...d, ...b("dark", d) }, p = f(g), v = f(s);
+}, h = { ...d, ...b("light", d) }, s = { ...t, ...b("dark", t) }, p = f(h), v = f(s);
 export {
   s as CLASSIC_DARK_CSS_TOKENS,
   v as CLASSIC_DARK_SEMANTIC_TOKENS,
-  g as CLASSIC_LIGHT_CSS_TOKENS,
+  h as CLASSIC_LIGHT_CSS_TOKENS,
   p as CLASSIC_LIGHT_SEMANTIC_TOKENS
 };

package/dist/styles/themes/presets.d.ts

@@ -6,7 +6,7 @@ export interface FloeShellThemeSelection {
     dark?: string;
 }
 export type FloeShellThemeDefaults = Partial<Record<FloeShellThemeMode, string>>;
-type ShellThemeTokenName = '--floe-window-background' | '--floe-window-foreground' | '--floe-window-muted-foreground' | '--floe-window-titlebar-background' | '--floe-window-border' | '--floe-window-shadow' | '--background' | '--foreground' | '--primary' | '--primary-foreground' | '--secondary' | '--secondary-foreground' | '--muted' | '--muted-foreground' | '--accent' | '--accent-foreground' | '--border' | '--input' | '--ring' | '--chrome-border' | '--top-bar-border' | '--activity-bar-border' | '--bottom-bar-border' | '--terminal-panel-border' | '--card' | '--card-foreground' | '--popover' | '--popover-foreground' | '--success' | '--success-foreground' | '--warning' | '--warning-foreground' | '--error' | '--error-foreground' | '--info' | '--info-foreground' | '--highlight-block-info-accent' | '--highlight-block-warning-accent' | '--highlight-block-success-accent' | '--highlight-block-error-accent' | '--highlight-block-note-accent' | '--highlight-block-tip-accent' | '--sidebar' | '--sidebar-foreground' | '--sidebar-primary' | '--sidebar-primary-foreground' | '--sidebar-accent' | '--sidebar-accent-foreground' | '--sidebar-border' | '--sidebar-ring' | '--activity-bar' | '--activity-bar-foreground' | '--activity-bar-foreground-active' | '--activity-bar-badge' | '--activity-bar-badge-foreground' | '--terminal-background' | '--terminal-foreground' | '--chart-1' | '--chart-2' | '--chart-3' | '--chart-4' | '--chart-5' | '--selection-bg' | '--selection-fg' | '--selection-on-primary-bg' | '--selection-on-primary-fg' | '--selection-code-bg' | '--selection-code-fg' | '--glow';
+type ShellThemeTokenName = '--floe-window-background' | '--floe-window-foreground' | '--floe-window-muted-foreground' | '--floe-window-titlebar-background' | '--floe-window-border' | '--floe-window-shadow' | '--background' | '--foreground' | '--inline-code-foreground' | '--inline-code-background' | '--primary' | '--primary-foreground' | '--secondary' | '--secondary-foreground' | '--muted' | '--muted-foreground' | '--accent' | '--accent-foreground' | '--border' | '--input' | '--ring' | '--chrome-border' | '--top-bar-border' | '--activity-bar-border' | '--bottom-bar-border' | '--terminal-panel-border' | '--card' | '--card-foreground' | '--popover' | '--popover-foreground' | '--success' | '--success-foreground' | '--warning' | '--warning-foreground' | '--error' | '--error-foreground' | '--info' | '--info-foreground' | '--highlight-block-info-accent' | '--highlight-block-warning-accent' | '--highlight-block-success-accent' | '--highlight-block-error-accent' | '--highlight-block-note-accent' | '--highlight-block-tip-accent' | '--sidebar' | '--sidebar-foreground' | '--sidebar-primary' | '--sidebar-primary-foreground' | '--sidebar-accent' | '--sidebar-accent-foreground' | '--sidebar-border' | '--sidebar-ring' | '--activity-bar' | '--activity-bar-foreground' | '--activity-bar-foreground-active' | '--activity-bar-badge' | '--activity-bar-badge-foreground' | '--terminal-background' | '--terminal-foreground' | '--chart-1' | '--chart-2' | '--chart-3' | '--chart-4' | '--chart-5' | '--selection-bg' | '--selection-fg' | '--selection-on-primary-bg' | '--selection-on-primary-fg' | '--selection-code-bg' | '--selection-code-fg' | '--glow';
 export declare const REQUIRED_SHELL_THEME_TOKENS: readonly ShellThemeTokenName[];
 interface ShellThemePaletteDefinition {
     name: string;
@@ -15,6 +15,11 @@ interface ShellThemePaletteDefinition {
     mode: FloeShellThemeMode;
     background: string;
     foreground: string;
+    /** Paired colors for inline code on reading surfaces. */
+    inlineCode?: {
+        foreground: string;
+        background: string;
+    };
     card: string;
     muted: string;
     accent?: string;