@floegence/floe-webapp-core 0.86.60 → 0.86.62

package/dist/components/layout/Shell.js

@@ -1,5 +1,5 @@
-import { createComponent as r, Dynamic as V, insert as d, use as j, effect as P, setStyleProperty as G, memo as k, className as A, setAttribute as w, mergeProps as ze, template as g, delegateEvents as Fe } from "solid-js/web";
-import { createSignal as M, onMount as He, onCleanup as Ee, createEffect as B, createMemo as x, For as J, Show as h, batch as Ve } from "solid-js";
+import { createComponent as r, Dynamic as V, insert as d, use as j, effect as P, setStyleProperty as G, memo as k, className as A, setAttribute as w, mergeProps as ze, template as h, delegateEvents as Fe } from "solid-js/web";
+import { createSignal as M, onMount as He, onCleanup as Ee, createEffect as B, createMemo as I, For as J, Show as g, batch as Ve } from "solid-js";
 import { observeViewport as _e } from "../../viewport.js";
 import { useLayout as De } from "../../context/LayoutContext.js";
 import { useResolvedFloeConfig as qe } from "../../context/FloeConfigContext.js";
@@ -9,7 +9,7 @@ import { useResizeObserver as je } from "../../hooks/useResizeObserver.js";
 import { Dialog as Ge } from "../ui/Dialog.js";
 import { DialogPlacementProvider as Je } from "../ui/DialogPlacementContext.js";
 import { useOverlayMask as Qe } from "../../hooks/useOverlayMask.js";
-import { cn as I } from "../../utils/cn.js";
+import { cn as x } from "../../utils/cn.js";
 import { deferAfterPaint as Xe, deferNonBlocking as Ye } from "../../utils/defer.js";
 import { useComponentRegistry as Ze } from "../../context/ComponentRegistry.js";
 import { Sidebar as et } from "./Sidebar.js";
@@ -24,15 +24,15 @@ import { resolveMobileTabActiveId as lt, resolveMobileTabSelect as st } from "./
 import { KeepAliveStack as dt } from "./KeepAliveStack.js";
 import { resolveShellSidebarActiveTabChange as ct } from "./sidebarVisibilityMotion.js";
 import { createUIFirstSelection as bt } from "../../utils/uiFirstSelection.js";
-var de = /* @__PURE__ */ g('<div class="flex items-center gap-2">'), ut = /* @__PURE__ */ g('<div class="h-full min-h-0 overflow-auto">'), mt = /* @__PURE__ */ g('<div class="flex shrink-0 min-h-0">'), ft = /* @__PURE__ */ g('<div class="h-full min-h-0"style=max-width:100%>'), vt = /* @__PURE__ */ g("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), ht = /* @__PURE__ */ g('<div data-floe-shell-slot=mobile-sidebar-drawer tabindex=-1 role=dialog aria-modal=true><div class="h-full overflow-auto overscroll-contain">'), gt = /* @__PURE__ */ g("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), St = /* @__PURE__ */ g('<div data-floe-shell-slot=mobile-accessory class="relative shrink-0">'), yt = /* @__PURE__ */ g('<div data-floe-shell><a></a><div class="relative flex min-h-0 flex-1 flex-col overflow-hidden"data-floe-shell-slot=mobile-content-boundary><div data-floe-shell-slot=main-layout class="flex-1 min-h-0 flex overflow-hidden relative"><div data-floe-shell-slot=content-area><main data-floe-shell-slot=main tabindex=-1>');
+var de = /* @__PURE__ */ h('<div class="flex items-center gap-2">'), ut = /* @__PURE__ */ h('<div class="h-full min-h-0 overflow-auto">'), ft = /* @__PURE__ */ h('<div class="flex shrink-0 min-h-0">'), mt = /* @__PURE__ */ h('<div class="h-full min-h-0"style=max-width:100%>'), vt = /* @__PURE__ */ h("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), gt = /* @__PURE__ */ h('<div data-floe-shell-slot=mobile-sidebar-drawer tabindex=-1 role=dialog aria-modal=true><div class="h-full overflow-auto overscroll-contain">'), ht = /* @__PURE__ */ h("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), St = /* @__PURE__ */ h('<div data-floe-shell-slot=mobile-accessory class="relative shrink-0">'), yt = /* @__PURE__ */ h('<div data-floe-shell><a></a><div class="relative flex min-h-0 flex-1 flex-col overflow-hidden"data-floe-shell-slot=mobile-content-boundary><div data-floe-shell-slot=main-layout class="flex-1 min-h-0 flex overflow-hidden relative"><div data-floe-shell-slot=content-area><main data-floe-shell-slot=main tabindex=-1>');
 function Ut(i) {
   const [ce, be] = M(!1);
   He(() => {
     Ee(_e(window, (e) => be(e.keyboardOpen)));
   });
-  const o = De(), ue = qe(), l = o.isMobile, [me, fe] = M(), [ve, he] = M(), ge = je(ve), W = /* @__PURE__ */ new Map(), [_, L] = M(!1), [Se, ye] = M(!1), Ce = Ue({
-    container: me,
-    sidebarWidth: () => (D() ?? o.sidebarWidth()) + (ge()?.width ?? 0),
+  const o = De(), ue = qe(), l = o.isMobile, [fe, me] = M(), [ve, ge] = M(), he = je(ve), W = /* @__PURE__ */ new Map(), [_, L] = M(!1), [Se, ye] = M(!1), Ce = Ue({
+    container: fe,
+    sidebarWidth: () => (D() ?? o.sidebarWidth()) + (he()?.width ?? 0),
     minContentWidth: () => i.sidebarMinContentWidth ?? 0
   }), S = () => !l() && !!i.sidebarMinContentWidth && !u() && Ce() === "overlay";
   B(() => {
@@ -100,13 +100,13 @@ function Ut(i) {
     const e = o.sidebarVisibilityMotion(), a = o.sidebarVisibilityMotionRevision();
     e === "instant" && Xe(() => o.clearSidebarVisibilityMotion(a));
   });
-  const T = x(() => i.activityItems ? i.activityItems : c ? c.sidebarItems().filter((e) => !!e.icon).filter((e) => !(l() && e.sidebar?.hiddenOnMobile)).map((e) => ({
+  const T = I(() => i.activityItems ? i.activityItems : c ? c.sidebarItems().filter((e) => !!e.icon).filter((e) => !(l() && e.sidebar?.hiddenOnMobile)).map((e) => ({
     id: e.id,
     icon: e.icon,
     label: e.name,
     badge: e.sidebar?.badge,
     collapseBehavior: e.sidebar?.collapseBehavior ?? (e.sidebar?.fullScreen ? "preserve" : "toggle")
-  })) : []), Ae = x(() => T().map((e) => ({
+  })) : []), Ae = I(() => T().map((e) => ({
     ...e,
     buttonRef: (a) => {
       a ? W.set(e.id, a) : W.delete(e.id), e.buttonRef?.(a);
@@ -119,25 +119,25 @@ function Ut(i) {
     S() ? (e || W.get(o.sidebarActiveTab())?.focus({
       preventScroll: !0
     }), L(!e)) : o.setSidebarCollapsed(e);
-  }, xe = x(() => u() ? [] : i.sidebarContent ? [] : c ? c.sidebarItems().filter((e) => !(l() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
+  }, Ie = I(() => u() ? [] : i.sidebarContent ? [] : c ? c.sidebarItems().filter((e) => !(l() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
     id: e.id,
     render: () => r(V, {
       get component() {
         return e.component;
       }
     })
-  })) : []), Ie = (e) => {
+  })) : []), xe = (e) => {
     if (!u()) {
       if (i.sidebarContent) return i.sidebarContent(e);
       if (c)
         return r(dt, {
           get views() {
-            return xe();
+            return Ie();
           },
           activeId: e
         });
     }
-  }, N = x(() => u() ? !0 : c ? c.getComponent(o.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), Pe = x(() => {
+  }, N = I(() => u() ? !0 : c ? c.getComponent(o.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), Pe = I(() => {
     if (u()) return !0;
     if (!c) return !1;
     const e = c.getComponent(o.sidebarActiveTab());
@@ -146,7 +146,7 @@ function Ut(i) {
   B(() => {
     l() && N() && y(!1);
   });
-  const Te = x(() => {
+  const Te = I(() => {
     if (l() || i.bottomBarMode === "hidden") return;
     if (i.bottomBarItems) return i.bottomBarItems;
     if (!c) return;
@@ -209,7 +209,7 @@ function Ut(i) {
       return;
     }
     X(e.id);
-  }, Oe = x(() => {
+  }, Oe = I(() => {
     const e = i.topBarActions;
     if (!l() || (i.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
     const s = i.activityBottomItems ?? [];
@@ -230,7 +230,7 @@ function Ut(i) {
         }
       })
     }), e] : e;
-  }), Re = () => u() || (S() ? !_() : o.sidebarCollapsed()), Y = () => D() ?? o.sidebarWidth(), f = () => ue.config.accessibility, We = () => {
+  }), Re = () => u() || (S() ? !_() : o.sidebarCollapsed()), Y = () => D() ?? o.sidebarWidth(), m = () => ue.config.accessibility, We = () => {
     q(o.sidebarWidth());
   }, Le = (e) => {
     q((a) => o.clampSidebarWidth((a ?? o.sidebarWidth()) + e));
@@ -253,7 +253,7 @@ function Ut(i) {
   });
   const pe = () => {
     if (typeof document > "u") return;
-    const e = document.getElementById(f().mainContentId);
+    const e = document.getElementById(m().mainContentId);
     if (!(!e || !(e instanceof HTMLElement)))
       try {
         e.focus();
@@ -261,11 +261,11 @@ function Ut(i) {
       }
   }, U = Ke(() => (() => {
     var e = ut();
-    return d(e, () => Ie(o.sidebarActiveTab())), e;
+    return d(e, () => xe(o.sidebarActiveTab())), e;
   })());
   return (() => {
     var e = yt(), a = e.firstChild, s = a.nextSibling, n = s.firstChild, b = n.firstChild, E = b.firstChild;
-    return a.$$click = () => pe(), d(a, () => f().skipLinkLabel), d(e, r(h, {
+    return a.$$click = () => pe(), d(a, () => m().skipLinkLabel), d(e, r(g, {
       get when() {
         return !l() || i.topBarMobileMode !== "hidden";
       },
@@ -278,25 +278,25 @@ function Ut(i) {
             return Oe();
           },
           get ariaLabel() {
-            return f().topBarLabel;
+            return m().topBarLabel;
           },
           get class() {
             return i.slotClassNames?.topBar;
           }
         });
       }
-    }), s), j(fe, n), d(n, r(h, {
+    }), s), j(me, n), d(n, r(g, {
       get when() {
         return !l();
       },
       get children() {
-        return [r(h, {
+        return [r(g, {
           get when() {
             return T().length > 0;
           },
           get children() {
-            var t = mt();
-            return j(he, t), d(t, r(at, {
+            var t = ft();
+            return j(ge, t), d(t, r(at, {
               get items() {
                 return Ae();
               },
@@ -314,19 +314,19 @@ function Ut(i) {
                 return u() ? void 0 : Be;
               },
               get ariaLabel() {
-                return f().primaryNavigationLabel;
+                return m().primaryNavigationLabel;
               },
               get class() {
                 return i.slotClassNames?.activityBar;
               }
             })), t;
           }
-        }), r(h, {
+        }), r(g, {
           get when() {
             return !u();
           },
           get children() {
-            return r(h, {
+            return r(g, {
               get when() {
                 return S();
               },
@@ -342,7 +342,7 @@ function Ut(i) {
                     return o.sidebarVisibilityMotion();
                   },
                   get ariaLabel() {
-                    return f().sidebarLabel;
+                    return m().sidebarLabel;
                   },
                   get resizer() {
                     return r(se, {
@@ -373,13 +373,13 @@ function Ut(i) {
                       presentation: "side-drawer",
                       drawerSide: "left",
                       get title() {
-                        return f().sidebarLabel;
+                        return m().sidebarLabel;
                       },
                       class: "floe-adaptive-shell-sidebar w-fit max-w-[calc(100%-48px)]",
                       contentClass: "flex-1 min-h-0 overflow-hidden p-0",
                       get children() {
-                        var t = ft();
-                        return d(t, r(U, {})), P((m) => G(t, "width", `${Y()}px`)), t;
+                        var t = mt();
+                        return d(t, r(U, {})), P((f) => G(t, "width", `${Y()}px`)), t;
                       }
                     });
                   }
@@ -389,18 +389,18 @@ function Ut(i) {
           }
         })];
       }
-    }), b), d(n, r(h, {
+    }), b), d(n, r(g, {
       get when() {
         return k(() => !!(l() && $()))() && !u();
       },
       get children() {
         return [(() => {
           var t = vt();
-          return t.$$click = () => y(!1), P(() => A(t, I("absolute inset-0 z-40 bg-black/30 cursor-pointer", i.slotClassNames?.mobileSidebarBackdrop))), t;
+          return t.$$click = () => y(!1), P(() => A(t, x("absolute inset-0 z-40 bg-black/30 cursor-pointer", i.slotClassNames?.mobileSidebarBackdrop))), t;
         })(), (() => {
-          var t = ht(), m = t.firstChild, C = K;
-          return typeof C == "function" ? j(C, t) : K = t, d(m, r(U, {})), P((v) => {
-            var O = I("absolute left-0 top-0 bottom-0 z-50", "w-72 max-w-[80vw]", "bg-sidebar border-r border-sidebar-border", "shadow-xl", "animate-in slide-in-from-left duration-200", i.slotClassNames?.mobileSidebarDrawer), R = f().sidebarLabel;
+          var t = gt(), f = t.firstChild, C = K;
+          return typeof C == "function" ? j(C, t) : K = t, d(f, r(U, {})), P((v) => {
+            var O = x("absolute left-0 top-0 bottom-0 z-50", "w-72 max-w-[80vw]", "bg-sidebar border-r border-sidebar-border", "shadow-[var(--floe-elevation-float-strong)]", "animate-in slide-in-from-left duration-[var(--floe-duration-base)]", i.slotClassNames?.mobileSidebarDrawer), R = m().sidebarLabel;
             return O !== v.e && A(t, v.e = O), R !== v.t && w(t, "aria-label", v.t = R), v;
           }, {
             e: void 0,
@@ -408,24 +408,24 @@ function Ut(i) {
           }), t;
         })()];
       }
-    }), b), d(E, () => i.children), d(b, r(h, {
+    }), b), d(E, () => i.children), d(b, r(g, {
       get when() {
         return k(() => !!(!l() && o.terminalOpened()))() && i.terminalPanel;
       },
       get children() {
-        var t = gt();
+        var t = ht();
         return d(t, r(se, {
           direction: "vertical",
-          onResize: (m) => o.setTerminalHeight(o.terminalHeight() - m)
-        }), null), d(t, () => i.terminalPanel, null), P((m) => {
-          var C = I("relative shrink-0 border-t border-border bg-terminal-background overflow-hidden", i.slotClassNames?.terminalPanel), v = `${o.terminalHeight()}px`;
-          return C !== m.e && A(t, m.e = C), v !== m.t && G(t, "height", m.t = v), m;
+          onResize: (f) => o.setTerminalHeight(o.terminalHeight() - f)
+        }), null), d(t, () => i.terminalPanel, null), P((f) => {
+          var C = x("relative shrink-0 border-t border-[var(--floe-line)] bg-terminal-background overflow-hidden", i.slotClassNames?.terminalPanel), v = `${o.terminalHeight()}px`;
+          return C !== f.e && A(t, f.e = C), v !== f.t && G(t, "height", f.t = v), f;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
-    }), null), d(s, r(h, {
+    }), null), d(s, r(g, {
       get when() {
         return k(() => !!l())() && i.mobileAccessory;
       },
@@ -433,7 +433,7 @@ function Ut(i) {
         var t = St();
         return d(t, () => i.mobileAccessory), P(() => t.inert = p()), t;
       }
-    }), null), d(s, r(h, {
+    }), null), d(s, r(g, {
       get when() {
         return k(() => !!l())() && i.mobileNavigationPanel;
       },
@@ -445,7 +445,7 @@ function Ut(i) {
           }
         }));
       }
-    }), null), d(e, r(h, {
+    }), null), d(e, r(g, {
       get when() {
         return k(() => !l())() && i.bottomBarMode !== "hidden";
       },
@@ -462,7 +462,7 @@ function Ut(i) {
           }
         });
       }
-    }), null), d(e, r(h, {
+    }), null), d(e, r(g, {
       get when() {
         return k(() => !!l())() && (T().length > 0 || i.mobileNavigationActions?.length);
       },
@@ -493,7 +493,7 @@ function Ut(i) {
           },
           onSelect: X,
           get ariaLabel() {
-            return f().mobileNavigationLabel;
+            return m().mobileNavigationLabel;
           },
           get class() {
             return i.slotClassNames?.mobileTabBar;
@@ -501,7 +501,7 @@ function Ut(i) {
         });
       }
     }), null), P((t) => {
-      var m = i.fillParent ? "100%" : void 0, C = I(
+      var f = i.fillParent ? "100%" : void 0, C = x(
         // Use dvh when supported to avoid mobile browser UI causing layout jumps.
         "h-screen h-[100dvh] w-full flex flex-col overflow-hidden",
         "bg-background text-foreground",
@@ -510,8 +510,8 @@ function Ut(i) {
         l() && i.topBarMobileMode === "hidden" && "safe-top",
         i.slotClassNames?.root,
         i.class
-      ), v = `#${f().mainContentId}`, O = I("fixed left-3 top-3 z-[120] rounded-md bg-primary px-3 py-2 text-xs font-medium text-primary-foreground shadow-md", "transition-transform duration-150 motion-reduce:transition-none", "-translate-y-[200%] focus:translate-y-0"), R = p(), Z = p() ? "true" : void 0, ee = i.sidebarMinContentWidth ? "true" : void 0, te = i.sidebarMinContentWidth ? "true" : void 0, ie = S() ? "overlay" : "inline", re = Se(), ne = I("flex-1 min-w-0 flex flex-col overflow-hidden", i.slotClassNames?.contentArea), oe = I("flex-1 min-h-0 overflow-auto overscroll-contain", i.slotClassNames?.main), ae = f().mainContentId, le = f().mainLabel;
-      return m !== t.e && G(e, "height", t.e = m), C !== t.t && A(e, t.t = C), v !== t.a && w(a, "href", t.a = v), O !== t.o && A(a, t.o = O), R !== t.i && (n.inert = t.i = R), Z !== t.n && w(n, "aria-hidden", t.n = Z), ee !== t.s && w(n, "data-floe-dialog-surface-host", t.s = ee), te !== t.h && w(n, "data-floe-surface-portal-layer", t.h = te), ie !== t.r && w(n, "data-floe-shell-sidebar-presentation", t.r = ie), re !== t.d && (b.inert = t.d = re), ne !== t.l && A(b, t.l = ne), oe !== t.u && A(E, t.u = oe), ae !== t.c && w(E, "id", t.c = ae), le !== t.w && w(E, "aria-label", t.w = le), t;
+      ), v = `#${m().mainContentId}`, O = x("fixed left-3 top-3 z-[120] rounded-md bg-primary px-3 py-2 text-xs font-medium text-primary-foreground shadow-[var(--floe-elevation-raised)]", "transition-transform duration-[var(--floe-duration-fast)] motion-reduce:transition-none", "-translate-y-[200%] focus:translate-y-0"), R = p(), Z = p() ? "true" : void 0, ee = i.sidebarMinContentWidth ? "true" : void 0, te = i.sidebarMinContentWidth ? "true" : void 0, ie = S() ? "overlay" : "inline", re = Se(), ne = x("flex-1 min-w-0 flex flex-col overflow-hidden", i.slotClassNames?.contentArea), oe = x("flex-1 min-h-0 overflow-auto overscroll-contain", i.slotClassNames?.main), ae = m().mainContentId, le = m().mainLabel;
+      return f !== t.e && G(e, "height", t.e = f), C !== t.t && A(e, t.t = C), v !== t.a && w(a, "href", t.a = v), O !== t.o && A(a, t.o = O), R !== t.i && (n.inert = t.i = R), Z !== t.n && w(n, "aria-hidden", t.n = Z), ee !== t.s && w(n, "data-floe-dialog-surface-host", t.s = ee), te !== t.h && w(n, "data-floe-surface-portal-layer", t.h = te), ie !== t.r && w(n, "data-floe-shell-sidebar-presentation", t.r = ie), re !== t.d && (b.inert = t.d = re), ne !== t.l && A(b, t.l = ne), oe !== t.u && A(E, t.u = oe), ae !== t.c && w(E, "id", t.c = ae), le !== t.w && w(E, "aria-label", t.w = le), t;
     }, {
       e: void 0,
       t: void 0,

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/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
 };