@floegence/floe-webapp-core 0.86.60 → 0.86.63

package/dist/components/layout/Sidebar.js

@@ -1,14 +1,14 @@
-import { insert as l, effect as s, setAttribute as f, className as c, setStyleProperty as u, memo as w, template as d, delegateEvents as S } from "solid-js/web";
+import { insert as n, effect as d, setAttribute as f, className as s, setStyleProperty as u, memo as $, template as c, delegateEvents as _ } from "solid-js/web";
 import "solid-js";
 import { cn as v } from "../../utils/cn.js";
-var k = /* @__PURE__ */ d('<aside data-floe-shell-slot=sidebar data-floe-geometry-surface=shell-sidebar><div class="flex-1 overflow-auto overscroll-contain">'), _ = /* @__PURE__ */ d("<div>"), C = /* @__PURE__ */ d("<section><div class=flex-1>"), I = /* @__PURE__ */ d('<div class="flex items-center justify-between px-2.5 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60"><span>'), L = /* @__PURE__ */ d('<button type=button><span class="flex-1 truncate text-left">'), M = /* @__PURE__ */ d('<span class="flex-shrink-0 w-4 h-4 opacity-60">');
-function E(e) {
-  const t = () => e.collapsed ?? !1, a = () => e.width ?? 350, n = () => e.visibilityMotion ?? "animated";
+var S = /* @__PURE__ */ c('<aside data-floe-shell-slot=sidebar data-floe-geometry-surface=shell-sidebar><div class="flex-1 overflow-auto overscroll-contain">'), k = /* @__PURE__ */ c("<div>"), C = /* @__PURE__ */ c("<section><div class=flex-1>"), q = /* @__PURE__ */ c('<div class="flex items-center justify-between px-2.5 py-2 text-caption font-semibold uppercase tracking-wider text-[var(--floe-ink-quiet)]"><span>'), I = /* @__PURE__ */ c('<button type=button data-floe-interactive=row><span class="flex-1 truncate text-left">'), L = /* @__PURE__ */ c("<span>");
+function A(e) {
+  const t = () => e.collapsed ?? !1, a = () => e.width ?? 350, l = () => e.visibilityMotion ?? "animated";
   return (() => {
-    var i = k(), o = i.firstChild;
-    return l(o, () => e.children), l(i, () => e.resizer, null), s((r) => {
-      var b = n(), h = v("relative h-full flex flex-col shrink-0 min-h-0", "bg-sidebar text-sidebar-foreground", "border-r border-sidebar-border", "overflow-hidden", n() === "animated" && "transition-[width] duration-150 ease-out", e.class), m = t() ? "0px" : `${a()}px`, x = t() ? "hidden" : "visible", g = t() ? "0px" : void 0, y = e.ariaLabel, $ = t() ? "true" : void 0;
-      return b !== r.e && f(i, "data-floe-sidebar-visibility-motion", r.e = b), h !== r.t && c(i, r.t = h), m !== r.a && u(i, "width", r.a = m), x !== r.o && u(i, "visibility", r.o = x), g !== r.i && u(i, "border-right-width", r.i = g), y !== r.n && f(i, "aria-label", r.n = y), $ !== r.s && f(i, "aria-hidden", r.s = $), r;
+    var i = S(), o = i.firstChild;
+    return n(o, () => e.children), n(i, () => e.resizer, null), d((r) => {
+      var b = l(), h = v("relative h-full flex flex-col shrink-0 min-h-0", "bg-sidebar text-sidebar-foreground", "border-r border-sidebar-border", "overflow-hidden", l() === "animated" && "transition-[width] duration-[var(--floe-duration-fast)] ease-out", e.class), m = t() ? "0px" : `${a()}px`, x = t() ? "hidden" : "visible", g = t() ? "0px" : void 0, w = e.ariaLabel, y = t() ? "true" : void 0;
+      return b !== r.e && f(i, "data-floe-sidebar-visibility-motion", r.e = b), h !== r.t && s(i, r.t = h), m !== r.a && u(i, "width", r.a = m), x !== r.o && u(i, "visibility", r.o = x), g !== r.i && u(i, "border-right-width", r.i = g), w !== r.n && f(i, "aria-label", r.n = w), y !== r.s && f(i, "aria-hidden", r.s = y), r;
     }, {
       e: void 0,
       t: void 0,
@@ -20,53 +20,54 @@ function E(e) {
     }), i;
   })();
 }
-function N(e) {
+function E(e) {
   return (() => {
-    var t = _();
-    return l(t, () => e.children), s(() => c(t, v("p-2.5 space-y-3", e.class))), t;
+    var t = k();
+    return n(t, () => e.children), d(() => s(t, v("p-2.5 space-y-3", e.class))), t;
   })();
 }
-function P(e) {
+function N(e) {
   return (() => {
-    var t = _();
-    return l(t, () => e.children), s(() => c(t, v("space-y-0.5", e.class))), t;
+    var t = k();
+    return n(t, () => e.children), d(() => s(t, v("space-y-0.5", e.class))), t;
   })();
 }
-function q(e) {
+function P(e) {
   return (() => {
     var t = C(), a = t.firstChild;
-    return l(t, (() => {
-      var n = w(() => !!e.title);
-      return () => n() && (() => {
-        var i = I(), o = i.firstChild;
-        return l(o, () => e.title), l(i, () => e.actions, null), i;
+    return n(t, (() => {
+      var l = $(() => !!e.title);
+      return () => l() && (() => {
+        var i = q(), o = i.firstChild;
+        return n(o, () => e.title), n(i, () => e.actions, null), i;
       })();
-    })(), a), l(a, () => e.children), s(() => c(t, v("flex flex-col", e.class))), t;
+    })(), a), n(a, () => e.children), d(() => s(t, v("flex flex-col", e.class))), t;
   })();
 }
 function B(e) {
   return (() => {
-    var t = L(), a = t.firstChild;
-    return t.$$click = () => e.onClick?.(), l(t, (() => {
-      var n = w(() => !!e.icon);
-      return () => n() && (() => {
-        var i = M();
-        return l(i, () => e.icon), i;
+    var t = I(), a = t.firstChild;
+    return t.$$click = () => e.onClick?.(), n(t, (() => {
+      var l = $(() => !!e.icon);
+      return () => l() && (() => {
+        var i = L();
+        return n(i, () => e.icon), d(() => s(i, v("flex-shrink-0 w-4 h-4 transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", e.active ? "text-[var(--floe-ink-soft)]" : "text-[var(--floe-ink-quiet)] group-hover:text-[var(--floe-ink)]"))), i;
       })();
-    })(), a), l(a, () => e.children), s((n) => {
-      var i = v("w-full min-h-[var(--floe-row-height)] flex items-center gap-2 px-2.5 py-1 text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)] cursor-pointer", "transition-colors duration-75", "hover:bg-sidebar-accent/80 hover:text-sidebar-accent-foreground", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring", e.active && "bg-sidebar-accent text-sidebar-accent-foreground font-medium", e.class), o = e.indent ? `${10 + e.indent * 10}px` : void 0;
-      return i !== n.e && c(t, n.e = i), o !== n.t && u(t, "padding-left", n.t = o), n;
+    })(), a), n(a, () => e.children), d((l) => {
+      var i = e.active ? "true" : void 0, o = v("group w-full min-h-[var(--floe-row-height)] flex items-center gap-2 pl-2.5 pr-2 mx-1 rounded-sm", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)] cursor-pointer", "text-[var(--floe-ink-soft)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", e.active && "text-foreground font-medium", e.class), r = e.indent ? `${10 + e.indent * 10}px` : void 0;
+      return i !== l.e && f(t, "data-selected", l.e = i), o !== l.t && s(t, l.t = o), r !== l.a && u(t, "padding-left", l.a = r), l;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0
     }), t;
   })();
 }
-S(["click"]);
+_(["click"]);
 export {
-  E as Sidebar,
-  N as SidebarContent,
+  A as Sidebar,
+  E as SidebarContent,
   B as SidebarItem,
-  P as SidebarItemList,
-  q as SidebarSection
+  N as SidebarItemList,
+  P as SidebarSection
 };

package/dist/components/layout/SidebarPane.js

@@ -1,43 +1,43 @@
-import { insert as r, createComponent as o, use as E, effect as S, className as d, setStyleProperty as _, setAttribute as f, template as a, delegateEvents as L } from "solid-js/web";
-import { Show as s } from "solid-js";
+import { insert as o, createComponent as r, use as E, effect as S, className as d, setStyleProperty as _, setAttribute as b, template as s, delegateEvents as L } from "solid-js/web";
+import { Show as a } from "solid-js";
 import { useLayout as O } from "../../context/LayoutContext.js";
 import { cn as c } from "../../utils/cn.js";
 import { ResizeHandle as P } from "./ResizeHandle.js";
-var H = /* @__PURE__ */ a('<div class="min-w-0 flex items-center gap-1.5">'), N = /* @__PURE__ */ a('<button type=button class="flex items-center justify-center w-5 h-5 rounded cursor-pointer hover:bg-sidebar-accent/80 transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-sidebar-ring focus-visible:ring-inset"aria-label="Close sidebar"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="w-3.5 h-3.5"><path d="M18 6 6 18"></path><path d="m6 6 12 12">'), q = /* @__PURE__ */ a('<div class="flex min-w-0 items-center gap-1.5">'), D = /* @__PURE__ */ a('<aside data-floe-geometry-surface=sidebar-pane><div><div class="flex items-center justify-between px-3 py-2 border-b border-sidebar-border"><span class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60"></span></div><div>'), F = /* @__PURE__ */ a("<div>");
+var q = /* @__PURE__ */ s('<div class="min-w-0 flex items-center gap-1.5">'), H = /* @__PURE__ */ s('<button type=button class="flex items-center justify-center w-5 h-5 rounded-xs cursor-pointer hover:bg-[var(--floe-state-hover)] focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset"aria-label="Close sidebar"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="w-3.5 h-3.5"><path d="M18 6 6 18"></path><path d="m6 6 12 12">'), N = /* @__PURE__ */ s('<div class="flex min-w-0 items-center gap-1.5">'), D = /* @__PURE__ */ s('<aside data-floe-geometry-surface=sidebar-pane><div><div class="flex items-center justify-between px-3 py-2 border-b border-sidebar-border"><span class="text-caption font-semibold uppercase tracking-wider text-[var(--floe-ink-quiet)]"></span></div><div>'), F = /* @__PURE__ */ s("<div>");
 function T(t) {
-  const A = O(), m = () => A.isMobile(), g = () => t.width ?? 240, u = () => t.open ?? !0, l = () => m() && t.mobileOverlay !== !1 && u(), w = () => l() && typeof t.onClose == "function", B = () => l() && t.mobileBackdrop !== !1 && typeof t.onClose == "function", M = () => t.resizable && u() && !m() && typeof t.onResize == "function";
+  const A = O(), m = () => A.isMobile(), w = () => t.width ?? 240, u = () => t.open ?? !0, l = () => m() && t.mobileOverlay !== !1 && u(), g = () => l() && typeof t.onClose == "function", B = () => l() && t.mobileBackdrop !== !1 && typeof t.onClose == "function", M = () => t.resizable && u() && !m() && typeof t.onResize == "function";
   return [(() => {
-    var i = D(), h = i.firstChild, v = h.firstChild, j = v.firstChild, b = v.nextSibling;
-    return r(j, () => t.title), r(v, o(s, {
+    var i = D(), v = i.firstChild, f = v.firstChild, j = f.firstChild, h = f.nextSibling;
+    return o(j, () => t.title), o(f, r(a, {
       get when() {
-        return t.headerActions || w();
+        return t.headerActions || g();
       },
       get children() {
-        var e = q();
-        return r(e, o(s, {
+        var e = N();
+        return o(e, r(a, {
           get when() {
             return t.headerActions;
           },
           get children() {
-            var n = H();
-            return r(n, () => t.headerActions), n;
+            var n = q();
+            return o(n, () => t.headerActions), n;
           }
-        }), null), r(e, o(s, {
+        }), null), o(e, r(a, {
           get when() {
-            return w();
+            return g();
           },
           get children() {
-            var n = N();
+            var n = H();
             return n.$$click = () => t.onClose?.(), n;
           }
         }), null), e;
       }
-    }), null), E((e) => t.bodyRef?.(e), b), r(b, () => t.children), r(i, o(s, {
+    }), null), E((e) => t.bodyRef?.(e), h), o(h, () => t.children), o(i, r(a, {
       get when() {
         return M();
       },
       get children() {
-        return o(P, {
+        return r(P, {
           direction: "horizontal",
           onResize: (e) => t.onResize?.(e),
           get onResizeStart() {
@@ -49,8 +49,8 @@ function T(t) {
         });
       }
     }), null), S((e) => {
-      var n = c("flex-shrink-0 border-r border-border bg-sidebar relative", "transition-[width,transform,box-shadow] duration-200 ease-out", "overflow-hidden", l() && "absolute inset-y-0 left-0 z-10 shadow-lg", t.class), x = u() ? `${g()}px` : "0px", y = l() ? "dialog" : void 0, k = l() ? "true" : void 0, C = t.ariaLabel, z = c("h-full flex flex-col", t.innerClass), $ = `${g()}px`, R = c("flex-1 min-h-0 overflow-auto", t.bodyClass);
-      return n !== e.e && d(i, e.e = n), x !== e.t && _(i, "width", e.t = x), y !== e.a && f(i, "role", e.a = y), k !== e.o && f(i, "aria-modal", e.o = k), C !== e.i && f(i, "aria-label", e.i = C), z !== e.n && d(h, e.n = z), $ !== e.s && _(h, "width", e.s = $), R !== e.h && d(b, e.h = R), e;
+      var n = c("flex-shrink-0 border-r border-[var(--floe-line)] bg-sidebar relative", "transition-[width,transform,box-shadow] duration-[var(--floe-duration-base)] ease-out", "overflow-hidden", l() && "absolute inset-y-0 left-0 z-10 shadow-[var(--floe-elevation-float)]", t.class), x = u() ? `${w()}px` : "0px", y = l() ? "dialog" : void 0, k = l() ? "true" : void 0, C = t.ariaLabel, z = c("h-full flex flex-col", t.innerClass), $ = `${w()}px`, R = c("flex-1 min-h-0 overflow-auto", t.bodyClass);
+      return n !== e.e && d(i, e.e = n), x !== e.t && _(i, "width", e.t = x), y !== e.a && b(i, "role", e.a = y), k !== e.o && b(i, "aria-modal", e.o = k), C !== e.i && b(i, "aria-label", e.i = C), z !== e.n && d(v, e.n = z), $ !== e.s && _(v, "width", e.s = $), R !== e.h && d(h, e.h = R), e;
     }, {
       e: void 0,
       t: void 0,
@@ -61,7 +61,7 @@ function T(t) {
       s: void 0,
       h: void 0
     }), i;
-  })(), o(s, {
+  })(), r(a, {
     get when() {
       return B();
     },

package/dist/components/layout/ThemeToggle.d.ts

@@ -0,0 +1,19 @@
+export interface ThemeToggleProps {
+    /** Box class for the button; defaults to the 32px icon control. */
+    class?: string;
+    /** Box class for the 16px icon frame. */
+    glyphClass?: string;
+    /** Overrides the accessible name. Defaults to the action the click performs. */
+    label?: string;
+    disabled?: boolean;
+}
+/**
+ * Light/dark toggle.
+ *
+ * The two states are one control, so the icon performs the change rather than
+ * being swapped between frames: the outgoing glyph rotates a quarter turn and
+ * leaves upward while the incoming one arrives from below. Both live in the
+ * same 16px frame, so the button never changes size and nothing else on the
+ * bar moves. Reduced-motion users get the instant swap.
+ */
+export declare function ThemeToggle(props: ThemeToggleProps): import("solid-js").JSX.Element;

package/dist/components/layout/ThemeToggle.js

@@ -0,0 +1,39 @@
+import { insert as k, createComponent as w, effect as T, setAttribute as x, className as a, template as p, delegateEvents as C } from "solid-js/web";
+import { cn as r } from "../../utils/cn.js";
+import { useTheme as S } from "../../context/ThemeContext.js";
+import { Sun as j, Moon as A } from "../icons/index.js";
+var D = /* @__PURE__ */ p("<button type=button data-floe-interactive=icon><span aria-hidden=true><span></span><span>");
+function q(o) {
+  const s = S(), n = () => s.resolvedTheme() === "dark", c = () => o.label ?? (n() ? "Switch to light theme" : "Switch to dark theme"), f = (t, i) => r(
+    "absolute inset-0 flex items-center justify-center",
+    /* Tailwind's rotate/translate utilities write the individual properties,
+     * so the transition list has to name them; `transform` alone would leave
+     * the glyphs swapping instead of gliding. */
+    "transition-[opacity,rotate,translate] duration-[var(--floe-duration-base)] ease-[var(--floe-ease-out)]",
+    "motion-reduce:transition-none",
+    t ? "opacity-100 rotate-0 translate-y-0" : r("opacity-0", i === "up" ? "-translate-y-2 rotate-90" : "translate-y-2 -rotate-90")
+  );
+  return (() => {
+    var t = D(), i = t.firstChild, l = i.firstChild, v = l.nextSibling;
+    return t.$$click = () => s.toggleTheme(), k(l, w(j, {
+      class: "h-full w-full"
+    })), k(v, w(A, {
+      class: "h-full w-full"
+    })), T((e) => {
+      var d = o.disabled, u = c(), h = c(), m = r("inline-flex h-[var(--floe-control-height-md)] w-[var(--floe-control-height-md)] shrink-0 items-center justify-center rounded-control cursor-pointer", "text-[var(--floe-ink-soft)] hover:bg-[var(--floe-state-hover)] hover:text-foreground", "transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--floe-plane)]", "disabled:pointer-events-none disabled:opacity-50", o.class), b = r("relative block h-4 w-4 overflow-hidden", o.glyphClass), g = f(!n(), "up"), y = f(n(), "down");
+      return d !== e.e && (t.disabled = e.e = d), u !== e.t && x(t, "aria-label", e.t = u), h !== e.a && x(t, "title", e.a = h), m !== e.o && a(t, e.o = m), b !== e.i && a(i, e.i = b), g !== e.n && a(l, e.n = g), y !== e.s && a(v, e.s = y), e;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0
+    }), t;
+  })();
+}
+C(["click"]);
+export {
+  q as ThemeToggle
+};

package/dist/components/layout/TopBar.js

@@ -1,15 +1,15 @@
-import { insert as t, createComponent as s, effect as y, className as h, setAttribute as $, template as l, delegateEvents as _ } from "solid-js/web";
-import { Show as v } from "solid-js";
-import { cn as x } from "../../utils/cn.js";
-import { useCommand as w } from "../../context/CommandContext.js";
+import { insert as t, createComponent as d, effect as y, className as v, setAttribute as $, template as i, delegateEvents as w } from "solid-js/web";
+import { Show as h } from "solid-js";
+import { cn as p } from "../../utils/cn.js";
+import { useCommand as _ } from "../../context/CommandContext.js";
 import { Search as C } from "../icons/index.js";
 import { useResolvedFloeConfig as S } from "../../context/FloeConfigContext.js";
-var B = /* @__PURE__ */ l('<span class="font-medium text-[11px] tracking-tight hidden sm:inline">'), E = /* @__PURE__ */ l('<kbd class="hidden md:inline text-[10px] px-1 py-0.5 rounded bg-background/60 border border-border/40 font-mono shrink-0 leading-none">'), F = /* @__PURE__ */ l('<header data-floe-shell-slot=top-bar style=background-color:var(--activity-bar);border-bottom-color:var(--top-bar-border)><div class="h-10 flex items-center gap-2 px-3"><div class="flex items-center gap-2 flex-shrink-0"></div><button type=button><span class="flex-1 text-left hidden sm:inline truncate"></span></button><div class="flex items-center gap-0.5">'), j = /* @__PURE__ */ l('<div class="w-6 h-6 rounded bg-primary flex items-center justify-center text-primary-foreground text-xs font-bold">F');
+var B = /* @__PURE__ */ i('<span class="font-medium text-caption tracking-tight hidden sm:inline">'), E = /* @__PURE__ */ i('<kbd class="hidden md:inline text-caption px-1 py-0.5 rounded-xs bg-background/60 border border-[var(--floe-line)] font-mono shrink-0 leading-none">'), F = /* @__PURE__ */ i('<header data-floe-shell-slot=top-bar style=background-color:var(--activity-bar);border-bottom-color:var(--top-bar-border)><div class="h-10 flex items-center gap-2 px-3"><div class="flex items-center gap-2 flex-shrink-0"></div><button type=button><span class="flex-1 text-left hidden sm:inline truncate"></span></button><div class="flex items-center gap-0.5">'), j = /* @__PURE__ */ i('<div class="w-6 h-6 rounded-xs bg-primary flex items-center justify-center text-primary-foreground text-xs font-bold">F');
 function R(o) {
-  const c = w(), a = S(), n = () => a.config.commands.palette.enabled;
+  const c = _(), a = S(), n = () => a.config.commands.palette.enabled;
   return (() => {
-    var i = F(), p = i.firstChild, d = p.firstChild, r = d.nextSibling, m = r.firstChild, k = r.nextSibling;
-    return t(d, () => o.logo || j(), null), t(d, s(v, {
+    var l = F(), x = l.firstChild, s = x.firstChild, r = s.nextSibling, f = r.firstChild, k = r.nextSibling;
+    return t(s, () => o.logo || j(), null), t(s, d(h, {
       get when() {
         return o.title;
       },
@@ -17,9 +17,9 @@ function R(o) {
         var e = B();
         return t(e, () => o.title), e;
       }
-    }), null), r.$$click = () => n() && c.open(), t(r, s(C, {
+    }), null), r.$$click = () => n() && c.open(), t(r, d(C, {
       class: "w-3 h-3 shrink-0"
-    }), m), t(m, () => a.config.strings.topBar.searchPlaceholder), t(r, s(v, {
+    }), f), t(f, () => a.config.strings.topBar.searchPlaceholder), t(r, d(h, {
       get when() {
         return n();
       },
@@ -28,22 +28,22 @@ function R(o) {
         return t(e, () => c.getKeybindDisplay(a.config.commands.palette.keybind)), e;
       }
     }), null), t(k, () => o.actions), y((e) => {
-      var b = x(
+      var m = p(
         // Safe-area padding must not be applied on a fixed-height element (border-box),
         // otherwise the content gets squeezed on iOS notch devices.
-        "shrink-0 bg-background border-b border-border safe-top safe-left safe-right",
+        "shrink-0 bg-background border-b border-[var(--floe-line)] safe-top safe-left safe-right",
         o.class
-      ), f = o.ariaLabel, u = !n(), g = x("flex-1 max-w-sm flex items-center gap-2 h-[26px] px-2.5", n() ? "cursor-pointer" : "cursor-not-allowed", "text-[11px] text-muted-foreground tracking-tight", "bg-muted/30 hover:bg-muted/60 rounded-md", "border border-border/40 hover:border-border/70", "transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", !n() && "opacity-50 hover:bg-muted/30");
-      return b !== e.e && h(i, e.e = b), f !== e.t && $(i, "aria-label", e.t = f), u !== e.a && (r.disabled = e.a = u), g !== e.o && h(r, e.o = g), e;
+      ), b = o.ariaLabel, g = !n(), u = p("flex-1 max-w-sm flex items-center gap-2 h-[26px] px-2.5", n() ? "cursor-pointer" : "cursor-not-allowed", "text-caption text-[var(--floe-ink-soft)] tracking-tight", "bg-[var(--floe-well)] hover:bg-[var(--floe-well-strong)] rounded-control", "border border-[var(--floe-line)]", "transition-[background-color,border-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-in-out)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", !n() && "opacity-50 hover:bg-transparent");
+      return m !== e.e && v(l, e.e = m), b !== e.t && $(l, "aria-label", e.t = b), g !== e.a && (r.disabled = e.a = g), u !== e.o && v(r, e.o = u), e;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), i;
+    }), l;
   })();
 }
-_(["click"]);
+w(["click"]);
 export {
   R as TopBar
 };

package/dist/components/layout/TopBarIconButton.js

@@ -1,14 +1,14 @@
-import { createComponent as o, spread as i, mergeProps as s, insert as a, template as c } from "solid-js/web";
-import { splitProps as u, Show as p } from "solid-js";
-import { cn as d } from "../../utils/cn.js";
-import { Tooltip as b } from "../ui/Tooltip.js";
-var m = /* @__PURE__ */ c("<button type=button>");
-function y(n) {
-  const [e, l] = u(n, ["label", "children", "tooltip", "tooltipPlacement", "tooltipDelay", "class", "disabled"]), r = () => (() => {
-    var t = m();
-    return i(t, s({
+import { createComponent as r, spread as i, mergeProps as a, insert as s, template as c } from "solid-js/web";
+import { splitProps as u, Show as d } from "solid-js";
+import { cn as p } from "../../utils/cn.js";
+import { Tooltip as f } from "../ui/Tooltip.js";
+var b = /* @__PURE__ */ c("<button type=button>");
+function y(l) {
+  const [e, n] = u(l, ["label", "children", "tooltip", "tooltipPlacement", "tooltipDelay", "class", "disabled"]), o = () => (() => {
+    var t = b();
+    return i(t, a({
       get class() {
-        return d("inline-flex items-center justify-center", "w-8 h-8 rounded cursor-pointer", "hover:bg-muted/60 active:bg-muted/80 transition-colors", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", e.class);
+        return p("inline-flex items-center justify-center", "w-[var(--floe-control-height-md)] h-[var(--floe-control-height-md)]", "rounded-control cursor-pointer", "text-[var(--floe-ink-soft)] hover:bg-[var(--floe-state-hover)]", "active:bg-[var(--floe-state-press)]", "transition-[background-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", e.class);
       },
       get "aria-label"() {
         return e.label;
@@ -16,17 +16,17 @@ function y(n) {
       get disabled() {
         return e.disabled;
       }
-    }, l), !1, !0), a(t, () => e.children), t;
+    }, n), !1, !0), s(t, () => e.children), t;
   })();
-  return o(p, {
+  return r(d, {
     get when() {
       return e.tooltip !== !1;
     },
     get fallback() {
-      return r();
+      return o();
     },
     get children() {
-      return o(b, {
+      return r(f, {
         get content() {
           return e.tooltip ?? e.label;
         },
@@ -37,7 +37,7 @@ function y(n) {
           return e.tooltipDelay ?? 0;
         },
         get children() {
-          return r();
+          return o();
         }
       });
     }

package/dist/components/layout/index.d.ts

@@ -5,7 +5,6 @@ export type { BarItemContextMenuHandler, BarItemContextMenuRequest, BarItemConte
 export { Sidebar, SidebarContent, SidebarItemList, SidebarSection, SidebarItem, type SidebarProps, type SidebarContentProps, type SidebarItemListProps, type SidebarSectionProps, type SidebarItemProps, } from './Sidebar';
 export { TopBar, type TopBarProps } from './TopBar';
 export { TopBarIconButton, type TopBarIconButtonProps } from './TopBarIconButton';
-export { BottomBar, BottomBarItem, StatusIndicator, type BottomBarProps, type BottomBarItemProps, type StatusIndicatorProps, } from './BottomBar';
 export { BottomBarCompanion, type BottomBarCompanionDismissReason, type BottomBarCompanionPhase, type BottomBarCompanionProps, } from './BottomBarCompanion';
 export { MobileTabBar, type MobileTabBarItem, type MobileTabBarProps } from './MobileTabBar';
 export { ResizeHandle, type ResizeHandleProps } from './ResizeHandle';
@@ -14,4 +13,5 @@ export { Panel, PanelHeader, PanelContent, type PanelProps, type PanelHeaderProp
 export { KeepAliveStack, type KeepAliveStackProps, type KeepAliveView } from './KeepAliveStack';
 export { DisplayModeSwitcher, sanitizeDisplayMode, type DisplayMode, type DisplayModeSwitcherProps, } from './DisplayModeSwitcher';
 export { DisplayModePageShell, type DisplayModePageShellProps } from './DisplayModePageShell';
+export { ThemeToggle, type ThemeToggleProps } from './ThemeToggle';
 export { AppViewport, type AppViewportProps } from './AppViewport';

package/dist/components/loading/LoadingOverlay.js

@@ -1,12 +1,12 @@
-import { insert as n, createComponent as r, effect as o, className as d, Portal as m, template as c } from "solid-js/web";
+import { insert as n, createComponent as r, effect as o, className as m, Portal as d, template as c } from "solid-js/web";
 import { Show as l } from "solid-js";
-import { cn as u } from "../../utils/cn.js";
-import { SnakeLoader as f } from "./SnakeLoader.js";
-var g = /* @__PURE__ */ c('<p class="text-sm text-muted-foreground processing-text-glow">'), b = /* @__PURE__ */ c('<div><div class=relative><div class="absolute -inset-8 rounded-full floe-loader-ambient"style="background:radial-gradient(circle, color-mix(in srgb, var(--primary) 12%, transparent) 0%, transparent 70%)">');
-function k(e) {
+import { cn as f } from "../../utils/cn.js";
+import { SnakeLoader as u } from "./SnakeLoader.js";
+var g = /* @__PURE__ */ c('<p class="text-sm text-[var(--floe-ink-soft)] processing-text-glow">'), b = /* @__PURE__ */ c('<div><div class=relative><div class="absolute -inset-8 rounded-full floe-loader-ambient"style="background:radial-gradient(circle, color-mix(in srgb, var(--primary) 12%, transparent) 0%, transparent 70%)">');
+function p(e) {
   const a = (() => {
     var t = b(), i = t.firstChild;
-    return i.firstChild, n(i, r(f, {
+    return i.firstChild, n(i, r(u, {
       size: "lg"
     }), null), n(t, r(l, {
       get when() {
@@ -16,7 +16,7 @@ function k(e) {
         var s = g();
         return n(s, () => e.message), s;
       }
-    }), null), o(() => d(t, u("flex flex-col items-center justify-center gap-4", "bg-background/80 backdrop-blur-sm", e.fullscreen ? "fixed inset-0 z-50" : "absolute inset-0", "animate-in fade-in", e.class))), t;
+    }), null), o(() => m(t, f("flex flex-col items-center justify-center gap-4", "bg-background/80 backdrop-blur-sm", e.fullscreen ? "fixed inset-0 z-50" : "absolute inset-0", "animate-in fade-in", e.class))), t;
   })();
   return r(l, {
     get when() {
@@ -29,7 +29,7 @@ function k(e) {
         },
         fallback: a,
         get children() {
-          return r(m, {
+          return r(d, {
             children: a
           });
         }
@@ -38,5 +38,5 @@ function k(e) {
   });
 }
 export {
-  k as LoadingOverlay
+  p as LoadingOverlay
 };

package/dist/components/loading/Skeleton.js

@@ -1,14 +1,14 @@
 import { effect as i, className as u, insert as s, createComponent as r, template as f } from "solid-js/web";
 import { For as h } from "solid-js";
 import { cn as o } from "../../utils/cn.js";
-var m = /* @__PURE__ */ f("<div>"), p = /* @__PURE__ */ f('<div><div class="flex items-center gap-3"><div class="space-y-2 flex-1">'), _ = /* @__PURE__ */ f('<div class="flex items-center gap-3"><div class="flex-1 space-y-1">');
+var m = /* @__PURE__ */ f("<div>"), p = /* @__PURE__ */ f('<div><div class="flex items-center gap-3"><div class="space-y-2 flex-1">'), v = /* @__PURE__ */ f('<div class="flex items-center gap-3"><div class="flex-1 space-y-1">');
 function c(n) {
   return (() => {
     var l = m();
     return i(() => u(l, o("rounded-md floe-skeleton", n.class))), l;
   })();
 }
-function v(n) {
+function _(n) {
   const l = () => n.lines ?? 3, a = () => Array.from({
     length: l()
   }, (e, t) => t);
@@ -26,7 +26,7 @@ function v(n) {
     })), i(() => u(e, o("space-y-2", n.class))), e;
   })();
 }
-function y(n) {
+function x(n) {
   return (() => {
     var l = p(), a = l.firstChild, e = a.firstChild;
     return s(a, r(c, {
@@ -35,12 +35,12 @@ function y(n) {
       class: "h-4 w-1/3"
     }), null), s(e, r(c, {
       class: "h-3 w-1/4"
-    }), null), s(l, r(v, {
+    }), null), s(l, r(_, {
       lines: 2
-    }), null), i(() => u(l, o("rounded-lg border border-border p-4 space-y-4", n.class))), l;
+    }), null), i(() => u(l, o("rounded-control border border-[var(--floe-line)] p-4 space-y-4", n.class))), l;
   })();
 }
-function x(n) {
+function y(n) {
   const l = () => n.count ?? 5, a = () => Array.from({
     length: l()
   }, (e, t) => t);
@@ -51,9 +51,9 @@ function x(n) {
         return a();
       },
       children: () => (() => {
-        var t = _(), d = t.firstChild;
+        var t = v(), d = t.firstChild;
         return s(t, r(c, {
-          class: "h-8 w-8 rounded"
+          class: "h-8 w-8 rounded-xs"
         }), d), s(d, r(c, {
           class: "h-4 w-2/3"
         }), null), s(d, r(c, {
@@ -65,7 +65,7 @@ function x(n) {
 }
 export {
   c as Skeleton,
-  y as SkeletonCard,
-  x as SkeletonList,
-  v as SkeletonText
+  x as SkeletonCard,
+  y as SkeletonList,
+  _ as SkeletonText
 };