@floegence/floe-webapp-core 0.34.0 → 0.35.0

package/dist/components/layout/Shell.js

@@ -1,278 +1,307 @@
-import { createComponent as r, Dynamic as S, insert as c, memo as C, effect as T, className as M, setStyleProperty as E, template as h, delegateEvents as N } from "solid-js/web";
-import { createSignal as Q, createEffect as v, createMemo as f, For as $, Show as m } from "solid-js";
-import { useLayout as D } from "../../context/LayoutContext.js";
-import { useResolvedFloeConfig as K } from "../../context/FloeConfigContext.js";
-import { useMediaQuery as L } from "../../hooks/useMediaQuery.js";
-import { cn as x } from "../../utils/cn.js";
-import { deferNonBlocking as V } from "../../utils/defer.js";
-import { useComponentRegistry as j } from "../../context/ComponentRegistry.js";
-import { Sidebar as q } from "./Sidebar.js";
-import { TopBar as G } from "./TopBar.js";
-import { TopBarIconButton as J } from "./TopBarIconButton.js";
-import { BottomBar as U } from "./BottomBar.js";
-import { MobileTabBar as X } from "./MobileTabBar.js";
-import { ActivityBar as Y } from "./ActivityBar.js";
+import { createComponent as n, Dynamic as y, insert as c, memo as T, effect as A, className as f, setStyleProperty as E, template as B, delegateEvents as Q } from "solid-js/web";
+import { createSignal as K, createEffect as w, createMemo as v, For as p, Show as u } from "solid-js";
+import { useLayout as L } from "../../context/LayoutContext.js";
+import { useResolvedFloeConfig as V } from "../../context/FloeConfigContext.js";
+import { useMediaQuery as j } from "../../hooks/useMediaQuery.js";
+import { cn as g } from "../../utils/cn.js";
+import { deferNonBlocking as q } from "../../utils/defer.js";
+import { useComponentRegistry as G } from "../../context/ComponentRegistry.js";
+import { Sidebar as J } from "./Sidebar.js";
+import { TopBar as U } from "./TopBar.js";
+import { TopBarIconButton as X } from "./TopBarIconButton.js";
+import { BottomBar as Y } from "./BottomBar.js";
+import { MobileTabBar as Z } from "./MobileTabBar.js";
+import { ActivityBar as ee } from "./ActivityBar.js";
 import { ResizeHandle as _ } from "./ResizeHandle.js";
-import { resolveMobileTabActiveId as Z, resolveMobileTabSelect as ee } from "./mobileTabs.js";
-import { KeepAliveStack as te } from "./KeepAliveStack.js";
-var k = /* @__PURE__ */ h('<div class="flex items-center gap-2">'), re = /* @__PURE__ */ h('<div class="absolute inset-0 z-40 bg-black/30 cursor-pointer">'), ie = /* @__PURE__ */ h('<div><div class="h-full overflow-auto overscroll-contain">'), ne = /* @__PURE__ */ h('<div class="relative shrink-0 border-t border-border bg-terminal-background overflow-hidden">'), oe = /* @__PURE__ */ h('<div><div class="flex-1 min-h-0 flex overflow-hidden relative"><div class="flex-1 min-w-0 flex flex-col overflow-hidden"><main class="flex-1 min-h-0 overflow-auto overscroll-contain">');
-function Be(o) {
-  const i = D(), O = K(), d = L(O.config.layout.mobileQuery), [I, b] = Q(!1), u = () => o.sidebarMode === "hidden", a = (() => {
+import { resolveMobileTabActiveId as te, resolveMobileTabSelect as re } from "./mobileTabs.js";
+import { KeepAliveStack as ie } from "./KeepAliveStack.js";
+var O = /* @__PURE__ */ B('<div class="flex items-center gap-2">'), ne = /* @__PURE__ */ B("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), le = /* @__PURE__ */ B('<div data-floe-shell-slot=mobile-sidebar-drawer><div class="h-full overflow-auto overscroll-contain">'), oe = /* @__PURE__ */ B("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), ae = /* @__PURE__ */ B('<div data-floe-shell><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>');
+function Ae(r) {
+  const l = L(), z = V(), m = j(z.config.layout.mobileQuery), [k, h] = K(!1), b = () => r.sidebarMode === "hidden", a = (() => {
     try {
-      return j();
+      return G();
     } catch {
       return null;
     }
-  })(), w = (e, s) => {
-    const l = a?.getComponent(e)?.sidebar?.fullScreen ?? !1, t = u() ? !1 : s?.openSidebar ?? !l;
-    i.setSidebarActiveTab(e, {
-      openSidebar: t
+  })(), M = (e, s) => {
+    const o = a?.getComponent(e)?.sidebar?.fullScreen ?? !1, i = b() ? !1 : s?.openSidebar ?? !o;
+    l.setSidebarActiveTab(e, {
+      openSidebar: i
     });
   };
-  v(() => {
-    u() && b(!1);
-  }), v(() => {
-    const e = d();
-    i.isMobile() !== e && i.setIsMobile(e);
-  }), v(() => {
-    d() || b(!1);
+  w(() => {
+    b() && h(!1);
+  }), w(() => {
+    const e = m();
+    l.isMobile() !== e && l.setIsMobile(e);
+  }), w(() => {
+    m() || h(!1);
   });
-  const g = f(() => o.activityItems ? o.activityItems : a ? a.sidebarItems().filter((e) => !!e.icon).filter((e) => !(d() && e.sidebar?.hiddenOnMobile)).map((e) => ({
+  const C = v(() => r.activityItems ? r.activityItems : a ? a.sidebarItems().filter((e) => !!e.icon).filter((e) => !(m() && 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")
-  })) : []), z = f(() => u() ? [] : o.sidebarContent ? [] : a ? a.sidebarItems().filter((e) => !(d() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
+  })) : []), P = v(() => b() ? [] : r.sidebarContent ? [] : a ? a.sidebarItems().filter((e) => !(m() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
     id: e.id,
-    render: () => r(S, {
+    render: () => n(y, {
       get component() {
         return e.component;
       }
     })
-  })) : []), y = (e) => {
-    if (!u()) {
-      if (o.sidebarContent) return o.sidebarContent(e);
+  })) : []), N = (e) => {
+    if (!b()) {
+      if (r.sidebarContent) return r.sidebarContent(e);
       if (a)
-        return r(te, {
+        return n(ie, {
           get views() {
-            return z();
+            return P();
           },
           activeId: e
         });
     }
-  }, B = f(() => u() ? !0 : a ? a.getComponent(i.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), F = f(() => {
-    if (u()) return !0;
+  }, x = v(() => b() ? !0 : a ? a.getComponent(l.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), F = v(() => {
+    if (b()) return !0;
     if (!a) return !1;
-    const e = a.getComponent(i.sidebarActiveTab());
+    const e = a.getComponent(l.sidebarActiveTab());
     return e?.sidebar ? e.sidebar.fullScreen === !0 || e.sidebar.renderIn === "main" : !1;
   });
-  v(() => {
-    d() && B() && b(!1);
+  w(() => {
+    m() && x() && h(!1);
   });
-  const H = f(() => {
-    if (o.bottomBarItems) return o.bottomBarItems;
+  const H = v(() => {
+    if (r.bottomBarItems) return r.bottomBarItems;
     if (!a) return;
-    const e = [...a.statusBarItems()].sort((t, n) => (t.order ?? 100) - (n.order ?? 100)), s = e.filter((t) => t.position === "left"), l = e.filter((t) => t.position === "right");
+    const e = [...a.statusBarItems()].sort((i, t) => (i.order ?? 100) - (t.order ?? 100)), s = e.filter((i) => i.position === "left"), o = e.filter((i) => i.position === "right");
     return [(() => {
-      var t = k();
-      return c(t, r($, {
+      var i = O();
+      return c(i, n(p, {
         each: s,
-        children: (n) => r(S, {
+        children: (t) => n(y, {
           get component() {
-            return n.component;
+            return t.component;
           }
         })
-      })), t;
+      })), i;
     })(), (() => {
-      var t = k();
-      return c(t, r($, {
-        each: l,
-        children: (n) => r(S, {
+      var i = O();
+      return c(i, n(p, {
+        each: o,
+        children: (t) => n(y, {
           get component() {
-            return n.component;
+            return t.component;
           }
         })
-      })), t;
+      })), i;
     })()];
   });
-  v(() => {
-    const e = g();
+  w(() => {
+    const e = C();
     if (!e.length) return;
-    if (!i.sidebarActiveTab()) {
-      const l = e.find((t) => !t.onClick);
-      if (!l) return;
-      w(l.id);
+    if (!l.sidebarActiveTab()) {
+      const o = e.find((i) => !i.onClick);
+      if (!o) return;
+      M(o.id);
     }
   });
-  const A = (e) => {
-    const s = u() ? !0 : a?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
-      nextActiveId: l,
-      nextMobileSidebarOpen: t
-    } = ee({
+  const $ = (e) => {
+    const s = b() ? !0 : a?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
+      nextActiveId: o,
+      nextMobileSidebarOpen: i
+    } = re({
       clickedId: e,
-      activeId: i.sidebarActiveTab(),
-      mobileSidebarOpen: I(),
+      activeId: l.sidebarActiveTab(),
+      mobileSidebarOpen: k(),
       clickedIsFullScreen: s
     });
-    i.sidebarActiveTab() !== l && w(l), b(t);
-  }, P = (e) => {
+    l.sidebarActiveTab() !== o && M(o), h(i);
+  }, R = (e) => {
     if (e.onClick) {
-      V(() => e.onClick());
+      q(() => e.onClick());
       return;
     }
-    A(e.id);
-  }, R = f(() => {
-    const e = o.topBarActions;
-    if (!d() || (o.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
-    const l = o.activityBottomItems ?? [];
-    return l.length ? [r($, {
-      each: l,
-      children: (t) => r(J, {
+    $(e.id);
+  }, W = v(() => {
+    const e = r.topBarActions;
+    if (!m() || (r.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
+    const o = r.activityBottomItems ?? [];
+    return o.length ? [n(p, {
+      each: o,
+      children: (i) => n(X, {
         get label() {
-          return t.label;
+          return i.label;
         },
-        onClick: () => P(t),
+        onClick: () => R(i),
         get children() {
-          return r(S, {
+          return n(y, {
             get component() {
-              return t.icon;
+              return i.icon;
             },
             class: "w-4 h-4"
           });
         }
       })
     }), e] : e;
-  }), W = () => u() ? !0 : i.sidebarCollapsed();
+  }), D = () => b() ? !0 : l.sidebarCollapsed();
   return (() => {
-    var e = oe(), s = e.firstChild, l = s.firstChild, t = l.firstChild;
-    return c(e, r(G, {
+    var e = ae(), s = e.firstChild, o = s.firstChild, i = o.firstChild;
+    return c(e, n(U, {
       get logo() {
-        return o.logo;
+        return r.logo;
       },
       get actions() {
-        return R();
+        return W();
+      },
+      get class() {
+        return r.slotClassNames?.topBar;
       }
-    }), s), c(s, r(m, {
+    }), s), c(s, n(u, {
       get when() {
-        return !d();
+        return !m();
       },
       get children() {
-        return [r(m, {
+        return [n(u, {
           get when() {
-            return g().length > 0;
+            return C().length > 0;
           },
           get children() {
-            return r(Y, {
+            return n(ee, {
               get items() {
-                return g();
+                return C();
               },
               get bottomItems() {
-                return o.activityBottomItems;
+                return r.activityBottomItems;
               },
               get activeId() {
-                return i.sidebarActiveTab();
+                return l.sidebarActiveTab();
               },
-              onActiveChange: w,
+              onActiveChange: M,
               get collapsed() {
-                return W();
+                return D();
               },
               get onCollapsedChange() {
-                return C(() => !!u())() ? void 0 : i.setSidebarCollapsed;
+                return T(() => !!b())() ? void 0 : l.setSidebarCollapsed;
+              },
+              get class() {
+                return r.slotClassNames?.activityBar;
               }
             });
           }
-        }), r(m, {
+        }), n(u, {
           get when() {
-            return !u();
+            return !b();
           },
           get children() {
-            return r(q, {
+            return n(J, {
               get width() {
-                return i.sidebarWidth();
+                return l.sidebarWidth();
               },
               get collapsed() {
-                return i.sidebarCollapsed() || B();
+                return l.sidebarCollapsed() || x();
               },
               get resizer() {
-                return r(_, {
+                return n(_, {
                   direction: "horizontal",
-                  onResize: (n) => i.setSidebarWidth(i.sidebarWidth() + n)
+                  onResize: (t) => l.setSidebarWidth(l.sidebarWidth() + t)
                 });
               },
+              get class() {
+                return r.slotClassNames?.sidebar;
+              },
               get children() {
-                return y(i.sidebarActiveTab());
+                return N(l.sidebarActiveTab());
               }
             });
           }
         })];
       }
-    }), l), c(s, r(m, {
+    }), o), c(s, n(u, {
       get when() {
-        return C(() => !!(d() && I()))() && !u();
+        return T(() => !!(m() && k()))() && !b();
       },
       get children() {
         return [(() => {
-          var n = re();
-          return n.$$click = () => b(!1), n;
+          var t = ne();
+          return t.$$click = () => h(!1), A(() => f(t, g("absolute inset-0 z-40 bg-black/30 cursor-pointer", r.slotClassNames?.mobileSidebarBackdrop))), t;
         })(), (() => {
-          var n = ie(), p = n.firstChild;
-          return c(p, () => y(i.sidebarActiveTab())), T(() => M(n, x("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"))), n;
+          var t = le(), d = t.firstChild;
+          return c(d, () => N(l.sidebarActiveTab())), A(() => f(t, g("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", r.slotClassNames?.mobileSidebarDrawer))), t;
         })()];
       }
-    }), l), c(t, () => o.children), c(l, r(m, {
+    }), o), c(i, () => r.children), c(o, n(u, {
       get when() {
-        return C(() => !!(!d() && i.terminalOpened()))() && o.terminalPanel;
+        return T(() => !!(!m() && l.terminalOpened()))() && r.terminalPanel;
       },
       get children() {
-        var n = ne();
-        return c(n, r(_, {
+        var t = oe();
+        return c(t, n(_, {
           direction: "vertical",
-          onResize: (p) => i.setTerminalHeight(i.terminalHeight() - p)
-        }), null), c(n, () => o.terminalPanel, null), T((p) => E(n, "height", `${i.terminalHeight()}px`)), n;
+          onResize: (d) => l.setTerminalHeight(l.terminalHeight() - d)
+        }), null), c(t, () => r.terminalPanel, null), A((d) => {
+          var S = g("relative shrink-0 border-t border-border bg-terminal-background overflow-hidden", r.slotClassNames?.terminalPanel), I = `${l.terminalHeight()}px`;
+          return S !== d.e && f(t, d.e = S), I !== d.t && E(t, "height", d.t = I), d;
+        }, {
+          e: void 0,
+          t: void 0
+        }), t;
       }
-    }), null), c(e, r(m, {
+    }), null), c(e, n(u, {
       get when() {
-        return !d();
+        return !m();
       },
       get children() {
-        return r(U, {
+        return n(Y, {
+          get class() {
+            return r.slotClassNames?.bottomBar;
+          },
           get children() {
             return H();
           }
         });
       }
-    }), null), c(e, r(m, {
+    }), null), c(e, n(u, {
       get when() {
-        return C(() => !!d())() && g().length > 0;
+        return T(() => !!m())() && C().length > 0;
       },
       get children() {
-        return r(X, {
+        return n(Z, {
           get items() {
-            return g();
+            return C();
           },
           get activeId() {
-            return Z({
-              activeId: i.sidebarActiveTab(),
-              mobileSidebarOpen: I(),
-              activeIsFullScreen: B(),
+            return te({
+              activeId: l.sidebarActiveTab(),
+              mobileSidebarOpen: k(),
+              activeIsFullScreen: x(),
               activeIsPage: F()
             });
           },
-          onSelect: A
+          onSelect: $,
+          get class() {
+            return r.slotClassNames?.mobileTabBar;
+          }
         });
       }
-    }), null), T(() => M(e, 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",
-      // Prevent overscroll on the shell container
-      "overscroll-none",
-      o.class
-    ))), e;
+    }), null), A((t) => {
+      var d = g(
+        // 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",
+        // Prevent overscroll on the shell container
+        "overscroll-none",
+        r.slotClassNames?.root,
+        r.class
+      ), S = g("flex-1 min-w-0 flex flex-col overflow-hidden", r.slotClassNames?.contentArea), I = g("flex-1 min-h-0 overflow-auto overscroll-contain", r.slotClassNames?.main);
+      return d !== t.e && f(e, t.e = d), S !== t.t && f(o, t.t = S), I !== t.a && f(i, t.a = I), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), e;
   })();
 }
-N(["click"]);
+Q(["click"]);
 export {
-  Be as Shell
+  Ae as Shell
 };

package/dist/components/layout/Sidebar.js

@@ -1,12 +1,12 @@
-import { insert as l, effect as d, className as o, setStyleProperty as u, memo as h, template as c, delegateEvents as $ } from "solid-js/web";
+import { insert as l, effect as c, className as o, setStyleProperty as u, memo as h, template as d, delegateEvents as $ } from "solid-js/web";
 import "solid-js";
 import { cn as s } from "../../utils/cn.js";
-var g = /* @__PURE__ */ c('<aside><div class="flex-1 overflow-auto overscroll-contain">'), m = /* @__PURE__ */ c("<div>"), _ = /* @__PURE__ */ c("<section><div class=flex-1>"), w = /* @__PURE__ */ c('<div class="flex items-center justify-between px-2.5 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60"><span>'), y = /* @__PURE__ */ c('<button type=button><span class="flex-1 truncate text-left">'), S = /* @__PURE__ */ c('<span class="flex-shrink-0 w-4 h-4 opacity-60">');
+var g = /* @__PURE__ */ d('<aside data-floe-shell-slot=sidebar><div class="flex-1 overflow-auto overscroll-contain">'), m = /* @__PURE__ */ d("<div>"), _ = /* @__PURE__ */ d("<section><div class=flex-1>"), w = /* @__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>'), y = /* @__PURE__ */ d('<button type=button><span class="flex-1 truncate text-left">'), S = /* @__PURE__ */ d('<span class="flex-shrink-0 w-4 h-4 opacity-60">');
 function j(e) {
   const t = () => e.collapsed ?? !1, a = () => e.width ?? 350;
   return (() => {
     var i = g(), n = i.firstChild;
-    return l(n, () => e.children), l(i, () => e.resizer, null), d((r) => {
+    return l(n, () => e.children), l(i, () => e.resizer, null), c((r) => {
       var v = s("relative h-full flex flex-col shrink-0 min-h-0", "bg-sidebar text-sidebar-foreground", "border-r border-sidebar-border", "overflow-hidden", "transition-[width] duration-150 ease-out", e.class), f = t() ? "0px" : `${a()}px`, b = t() ? "hidden" : "visible", x = t() ? "0px" : void 0;
       return v !== r.e && o(i, r.e = v), f !== r.t && u(i, "width", r.t = f), b !== r.a && u(i, "visibility", r.a = b), x !== r.o && u(i, "border-right-width", r.o = x), r;
     }, {
@@ -20,13 +20,13 @@ function j(e) {
 function z(e) {
   return (() => {
     var t = m();
-    return l(t, () => e.children), d(() => o(t, s("p-2.5 space-y-3", e.class))), t;
+    return l(t, () => e.children), c(() => o(t, s("p-2.5 space-y-3", e.class))), t;
   })();
 }
 function E(e) {
   return (() => {
     var t = m();
-    return l(t, () => e.children), d(() => o(t, s("space-y-0.5", e.class))), t;
+    return l(t, () => e.children), c(() => o(t, s("space-y-0.5", e.class))), t;
   })();
 }
 function L(e) {
@@ -38,7 +38,7 @@ function L(e) {
         var n = w(), r = n.firstChild;
         return l(r, () => e.title), l(n, () => e.actions, null), n;
       })();
-    })(), a), l(a, () => e.children), d(() => o(t, s("flex flex-col", e.class))), t;
+    })(), a), l(a, () => e.children), c(() => o(t, s("flex flex-col", e.class))), t;
   })();
 }
 function N(e) {
@@ -50,7 +50,7 @@ function N(e) {
         var n = S();
         return l(n, () => e.icon), n;
       })();
-    })(), a), l(a, () => e.children), d((i) => {
+    })(), a), l(a, () => e.children), c((i) => {
       var n = s("w-full flex items-center gap-2 px-2.5 py-1.5 text-xs 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), r = e.indent ? `${10 + e.indent * 10}px` : void 0;
       return n !== i.e && o(t, i.e = n), r !== i.t && u(t, "padding-left", i.t = r), i;
     }, {

package/dist/components/layout/TopBar.js

@@ -1,40 +1,40 @@
-import { insert as t, createComponent as a, effect as $, className as g, template as i, delegateEvents as k } from "solid-js/web";
+import { insert as t, createComponent as d, effect as $, className as g, template as l, delegateEvents as k } from "solid-js/web";
 import { Show as h } from "solid-js";
-import { cn as x } from "../../utils/cn.js";
+import { cn as p } from "../../utils/cn.js";
 import { useCommand as y } from "../../context/CommandContext.js";
 import { Search as _ } from "../icons/index.js";
 import { useResolvedFloeConfig as w } from "../../context/FloeConfigContext.js";
-var C = /* @__PURE__ */ i('<span class="font-medium text-xs hidden sm:inline">'), S = /* @__PURE__ */ i('<kbd class="hidden md:inline text-[10px] px-1 py-0.5 rounded bg-background/80 border border-border/50 font-mono shrink-0">'), B = /* @__PURE__ */ i('<header><div class="h-10 flex items-center gap-3 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-1">'), E = /* @__PURE__ */ i('<div class="w-6 h-6 rounded bg-primary flex items-center justify-center text-primary-foreground text-xs font-bold">F');
-function R(n) {
-  const c = y(), l = w(), o = () => l.config.commands.palette.enabled;
+var C = /* @__PURE__ */ l('<span class="font-medium text-xs hidden sm:inline">'), S = /* @__PURE__ */ l('<kbd class="hidden md:inline text-[10px] px-1 py-0.5 rounded bg-background/80 border border-border/50 font-mono shrink-0">'), B = /* @__PURE__ */ l('<header data-floe-shell-slot=top-bar style=border-bottom-color:var(--top-bar-border)><div class="h-10 flex items-center gap-3 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-1">'), E = /* @__PURE__ */ l('<div class="w-6 h-6 rounded bg-primary flex items-center justify-center text-primary-foreground text-xs font-bold">F');
+function R(o) {
+  const c = y(), i = w(), n = () => i.config.commands.palette.enabled;
   return (() => {
-    var s = B(), p = s.firstChild, d = p.firstChild, r = d.nextSibling, m = r.firstChild, v = r.nextSibling;
-    return t(d, () => n.logo || E(), null), t(d, a(h, {
+    var s = B(), x = s.firstChild, a = x.firstChild, r = a.nextSibling, m = r.firstChild, v = r.nextSibling;
+    return t(a, () => o.logo || E(), null), t(a, d(h, {
       get when() {
-        return n.title;
+        return o.title;
       },
       get children() {
         var e = C();
-        return t(e, () => n.title), e;
+        return t(e, () => o.title), e;
       }
-    }), null), r.$$click = () => o() && c.open(), t(r, a(_, {
+    }), null), r.$$click = () => n() && c.open(), t(r, d(_, {
       class: "w-3.5 h-3.5 shrink-0"
-    }), m), t(m, () => l.config.strings.topBar.searchPlaceholder), t(r, a(h, {
+    }), m), t(m, () => i.config.strings.topBar.searchPlaceholder), t(r, d(h, {
       get when() {
-        return o();
+        return n();
       },
       get children() {
         var e = S();
-        return t(e, () => c.getKeybindDisplay(l.config.commands.palette.keybind)), e;
+        return t(e, () => c.getKeybindDisplay(i.config.commands.palette.keybind)), e;
       }
-    }), null), t(v, () => n.actions), $((e) => {
-      var f = x(
+    }), null), t(v, () => o.actions), $((e) => {
+      var f = 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",
-        n.class
-      ), u = !o(), b = x("flex-1 max-w-sm flex items-center gap-2 h-7 px-2.5", o() ? "cursor-pointer" : "cursor-not-allowed", "text-xs text-muted-foreground", "bg-muted/40 hover:bg-muted/70 rounded", "border border-transparent hover:border-border/50", "transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", !o() && "opacity-60 hover:bg-muted/40");
-      return f !== e.e && g(s, e.e = f), u !== e.t && (r.disabled = e.t = u), b !== e.a && g(r, e.a = b), e;
+        o.class
+      ), b = !n(), u = p("flex-1 max-w-sm flex items-center gap-2 h-7 px-2.5", n() ? "cursor-pointer" : "cursor-not-allowed", "text-xs text-muted-foreground", "bg-muted/40 hover:bg-muted/70 rounded", "border border-transparent hover:border-border/50", "transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", !n() && "opacity-60 hover:bg-muted/40");
+      return f !== e.e && g(s, e.e = f), b !== e.t && (r.disabled = e.t = b), u !== e.a && g(r, e.a = u), e;
     }, {
       e: void 0,
       t: void 0,

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

@@ -1,4 +1,4 @@
-export { Shell, type ShellProps } from './Shell';
+export { Shell, type ShellProps, type ShellSlotClassNames } from './Shell';
 export { ActivityBar, type ActivityBarItem, type ActivityBarProps } from './ActivityBar';
 export { Sidebar, SidebarContent, SidebarItemList, SidebarSection, SidebarItem, type SidebarProps, type SidebarContentProps, type SidebarItemListProps, type SidebarSectionProps, type SidebarItemProps, } from './Sidebar';
 export { TopBar, type TopBarProps } from './TopBar';

package/dist/context/FloeConfigContext.d.ts

@@ -1,4 +1,5 @@
 import { type JSX } from 'solid-js';
+import type { FloeThemeTokenOverrides, ThemeType } from '../styles/themes';
 export interface FloeStorageAdapter {
     getItem: (key: string) => string | null;
     setItem: (key: string, value: string) => void;
@@ -71,7 +72,13 @@ export interface FloeLayoutConfig {
 }
 export interface FloeThemeConfig {
     storageKey: string;
-    defaultTheme: 'light' | 'dark' | 'system';
+    defaultTheme: ThemeType;
+    /**
+     * Optional CSS variable overrides applied at the document root.
+     * `shared` applies to both themes, while `light` / `dark` only apply
+     * when that resolved theme is active.
+     */
+    tokens?: FloeThemeTokenOverrides;
 }
 export interface FloeDeckConfig {
     storageKey: string;