@floegence/floe-webapp-core 0.25.0 → 0.26.0

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

@@ -1,4 +1,5 @@
 import { type Component } from 'solid-js';
+import { type ActivityBarCollapseBehavior } from './activityBarBehavior';
 export interface ActivityBarItem {
     id: string;
     icon: Component<{
@@ -7,12 +8,21 @@ export interface ActivityBarItem {
     label: string;
     badge?: number | string | (() => number | string | undefined);
     onClick?: () => void;
+    /**
+     * How this item should affect the sidebar collapsed state when clicked.
+     *
+     * - `toggle` (default): VSCode-style behavior (change tab, open sidebar; click active tab to collapse).
+     * - `preserve`: change tab without mutating the collapsed state (useful for fullScreen pages).
+     */
+    collapseBehavior?: ActivityBarCollapseBehavior;
 }
 export interface ActivityBarProps {
     items: ActivityBarItem[];
     bottomItems?: ActivityBarItem[];
     activeId: string;
-    onActiveChange: (id: string) => void;
+    onActiveChange: (id: string, opts?: {
+        openSidebar?: boolean;
+    }) => void;
     collapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
     class?: string;

package/dist/components/layout/ActivityBar.js

@@ -1,91 +1,95 @@
-import { insert as o, createComponent as r, effect as f, className as g, template as d, Dynamic as w, memo as A, setAttribute as y, delegateEvents as k } from "solid-js/web";
-import { createMemo as s, For as x, Show as m } from "solid-js";
-import { cn as b } from "../../utils/cn.js";
-import { deferNonBlocking as $ } from "../../utils/defer.js";
-import { Tooltip as _ } from "../ui/Tooltip.js";
-var I = /* @__PURE__ */ d('<div class="flex flex-col">'), B = /* @__PURE__ */ d('<div><div class="flex flex-col">'), j = /* @__PURE__ */ d('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), N = /* @__PURE__ */ d("<span>"), q = /* @__PURE__ */ d("<button type=button>");
-function T(e) {
-  const c = s(() => e.activeId), n = s(() => e.collapsed ?? !1), t = s(() => e.onActiveChange), a = s(() => e.onCollapsedChange), u = (i) => {
+import { insert as a, createComponent as l, effect as f, className as b, template as s, Dynamic as A, memo as k, setAttribute as x, delegateEvents as w } from "solid-js/web";
+import { createMemo as v, For as y, Show as m } from "solid-js";
+import { cn as g } from "../../utils/cn.js";
+import { deferNonBlocking as I } from "../../utils/defer.js";
+import { Tooltip as $ } from "../ui/Tooltip.js";
+import { resolveActivityBarClick as _ } from "./activityBarBehavior.js";
+var B = /* @__PURE__ */ s('<div class="flex flex-col">'), p = /* @__PURE__ */ s('<div><div class="flex flex-col">'), S = /* @__PURE__ */ s('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), j = /* @__PURE__ */ s("<span>"), N = /* @__PURE__ */ s("<button type=button>");
+function V(e) {
+  const o = v(() => e.activeId), n = v(() => e.collapsed ?? !1), t = v(() => e.onActiveChange), c = v(() => e.onCollapsedChange), u = (i) => {
     if (i.onClick) {
-      $(() => i.onClick());
+      I(() => i.onClick());
       return;
     }
-    const v = c() === i.id, l = n();
-    if (v && !l) {
-      a()?.(!0);
-      return;
-    }
-    t()(i.id), a()?.(!1);
+    const r = _({
+      clickedId: i.id,
+      activeId: o(),
+      collapsed: n(),
+      behavior: i.collapseBehavior
+    });
+    r.nextActiveId !== o() && (typeof r.openSidebar == "boolean" ? t()(r.nextActiveId, {
+      openSidebar: r.openSidebar
+    }) : t()(r.nextActiveId)), typeof r.nextCollapsed == "boolean" && c()?.(r.nextCollapsed);
   };
   return (() => {
-    var i = B(), v = i.firstChild;
-    return o(v, r(x, {
+    var i = p(), r = i.firstChild;
+    return a(r, l(y, {
       get each() {
         return e.items;
       },
-      children: (l) => r(C, {
-        item: l,
+      children: (d) => l(C, {
+        item: d,
         get isActive() {
-          return c() === l.id;
+          return o() === d.id;
         },
-        onClick: () => u(l)
+        onClick: () => u(d)
       })
-    })), o(i, r(m, {
+    })), a(i, l(m, {
       get when() {
         return e.bottomItems?.length;
       },
       get children() {
-        var l = I();
-        return o(l, r(x, {
+        var d = B();
+        return a(d, l(y, {
           get each() {
             return e.bottomItems;
           },
-          children: (h) => r(C, {
+          children: (h) => l(C, {
             item: h,
             isActive: !1,
             onClick: () => u(h)
           })
-        })), l;
+        })), d;
       }
-    }), null), f(() => g(i, b("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", e.class))), i;
+    }), null), f(() => b(i, g("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", e.class))), i;
   })();
 }
 function C(e) {
-  const c = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
-  return r(_, {
+  const o = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
+  return l($, {
     get content() {
       return e.item.label;
     },
     placement: "right",
     delay: 0,
     get children() {
-      var n = q();
-      return n.$$click = () => e.onClick(), o(n, r(m, {
+      var n = N();
+      return n.$$click = () => e.onClick(), a(n, l(m, {
         get when() {
           return e.isActive;
         },
         get children() {
-          return j();
+          return S();
         }
-      }), null), o(n, r(w, {
+      }), null), a(n, l(A, {
         get component() {
           return e.item.icon;
         },
         class: "w-5 h-5"
-      }), null), o(n, r(m, {
+      }), null), a(n, l(m, {
         get when() {
-          return c();
+          return o();
         },
         get children() {
-          var t = N();
-          return o(t, (() => {
-            var a = A(() => typeof c() == "number" && c() > 99);
-            return () => a() ? "99+" : c();
-          })()), f(() => g(t, b("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), t;
+          var t = j();
+          return a(t, (() => {
+            var c = k(() => typeof o() == "number" && o() > 99);
+            return () => c() ? "99+" : o();
+          })()), f(() => b(t, g("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), t;
         }
       }), null), f((t) => {
-        var a = b("relative w-full aspect-square flex items-center justify-center cursor-pointer", "transition-all duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", e.isActive ? "text-activity-bar-foreground-active bg-accent/80" : "text-activity-bar-foreground hover:text-activity-bar-foreground-active hover:bg-accent/40"), u = e.item.label, i = e.isActive;
-        return a !== t.e && g(n, t.e = a), u !== t.t && y(n, "aria-label", t.t = u), i !== t.a && y(n, "aria-pressed", t.a = i), t;
+        var c = g("relative w-full aspect-square flex items-center justify-center cursor-pointer", "transition-all duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", e.isActive ? "text-activity-bar-foreground-active bg-accent/80" : "text-activity-bar-foreground hover:text-activity-bar-foreground-active hover:bg-accent/40"), u = e.item.label, i = e.isActive;
+        return c !== t.e && b(n, t.e = c), u !== t.t && x(n, "aria-label", t.t = u), i !== t.a && x(n, "aria-pressed", t.a = i), t;
       }, {
         e: void 0,
         t: void 0,
@@ -94,7 +98,7 @@ function C(e) {
     }
   });
 }
-k(["click"]);
+w(["click"]);
 export {
-  T as ActivityBar
+  V as ActivityBar
 };

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

@@ -5,6 +5,16 @@ export interface ShellProps {
     logo?: JSX.Element;
     activityItems?: ActivityBarItem[];
     activityBottomItems?: ActivityBarItem[];
+    /**
+     * Where to render `activityBottomItems` on mobile.
+     *
+     * The ActivityBar isn't rendered on mobile (MobileTabBar is used instead),
+     * so bottom items are hidden unless explicitly enabled.
+     *
+     * - `hidden` (default): do not render bottom items on mobile.
+     * - `topBar`: render them as icon buttons in the TopBar actions area.
+     */
+    activityBottomItemsMobileMode?: 'hidden' | 'topBar';
     topBarActions?: JSX.Element;
     bottomBarItems?: JSX.Element;
     sidebarContent?: (activeTab: string) => JSX.Element;

package/dist/components/layout/Shell.js

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

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

@@ -0,0 +1,12 @@
+import { type JSX } from 'solid-js';
+import { type TooltipProps } from '../ui/Tooltip';
+export interface TopBarIconButtonProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> {
+    /** Used for aria-label and as the default tooltip content. */
+    label: string;
+    children: JSX.Element;
+    /** Defaults to `label`. Set to `false` to disable the tooltip wrapper. */
+    tooltip?: TooltipProps['content'] | false;
+    tooltipPlacement?: TooltipProps['placement'];
+    tooltipDelay?: number;
+}
+export declare function TopBarIconButton(props: TopBarIconButtonProps): JSX.Element;

package/dist/components/layout/TopBarIconButton.js

@@ -0,0 +1,44 @@
+import { spread as i, mergeProps as s, insert as a, createComponent as r, template as c } from "solid-js/web";
+import { splitProps as p, Show as u } 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(l) {
+  const [e, n] = p(l, ["label", "children", "tooltip", "tooltipPlacement", "tooltipDelay", "class", "disabled"]), o = (() => {
+    var t = m();
+    return i(t, s({
+      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);
+      },
+      get "aria-label"() {
+        return e.label;
+      },
+      get disabled() {
+        return e.disabled;
+      }
+    }, n), !1, !0), a(t, () => e.children), t;
+  })();
+  return r(u, {
+    get when() {
+      return e.tooltip !== !1;
+    },
+    fallback: o,
+    get children() {
+      return r(b, {
+        get content() {
+          return e.tooltip ?? e.label;
+        },
+        get placement() {
+          return e.tooltipPlacement ?? "bottom";
+        },
+        get delay() {
+          return e.tooltipDelay ?? 0;
+        },
+        children: o
+      });
+    }
+  });
+}
+export {
+  y as TopBarIconButton
+};

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

@@ -0,0 +1,24 @@
+export type ActivityBarCollapseBehavior = 'toggle' | 'preserve';
+export interface ResolveActivityBarClickArgs {
+    clickedId: string;
+    activeId: string;
+    collapsed: boolean;
+    /**
+     * How the clicked item should affect the sidebar collapsed state.
+     *
+     * - `toggle` (default): VSCode-like behavior for sidebar-backed tabs.
+     * - `preserve`: navigate without mutating the collapsed state (useful for fullScreen pages).
+     */
+    behavior?: ActivityBarCollapseBehavior;
+}
+export interface ResolveActivityBarClickResult {
+    nextActiveId: string;
+    /** When undefined, the click should not change the collapsed state. */
+    nextCollapsed?: boolean;
+    /**
+     * Hint for LayoutContext.setSidebarActiveTab({ openSidebar }).
+     * Only meaningful when the click causes a tab change.
+     */
+    openSidebar?: boolean;
+}
+export declare function resolveActivityBarClick(args: ResolveActivityBarClickArgs): ResolveActivityBarClickResult;

package/dist/components/layout/activityBarBehavior.js

@@ -0,0 +1,6 @@
+function c(e) {
+  return (e.behavior ?? "toggle") === "preserve" ? e.clickedId === e.activeId ? { nextActiveId: e.activeId } : { nextActiveId: e.clickedId, openSidebar: !1 } : e.clickedId === e.activeId && !e.collapsed ? { nextActiveId: e.activeId, nextCollapsed: !0 } : { nextActiveId: e.clickedId, nextCollapsed: !1, openSidebar: !0 };
+}
+export {
+  c as resolveActivityBarClick
+};

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

@@ -2,6 +2,7 @@ export { Shell, type ShellProps } 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';
+export { TopBarIconButton, type TopBarIconButtonProps } from './TopBarIconButton';
 export { BottomBar, BottomBarItem, StatusIndicator, type BottomBarProps, type BottomBarItemProps, type StatusIndicatorProps } from './BottomBar';
 export { MobileTabBar, type MobileTabBarItem, type MobileTabBarProps } from './MobileTabBar';
 export { ResizeHandle, type ResizeHandleProps } from './ResizeHandle';

package/dist/full.js

@@ -1,6 +1,6 @@
 import { FloeProvider as r } from "./app/FloeProvider.js";
 import { applyTheme as i, builtInThemes as n, getSystemTheme as a } from "./styles/themes/index.js";
-import { Activity as m, ActivityIcon as p, AlertCircle as l, AlertTriangle as f, ArchiveIcon as s, ArrowDown as d, ArrowLeft as x, ArrowRight as I, ArrowRightLeft as g, ArrowUp as C, AtSign as u, AwardIcon as k, BarChart as h, BatteryIcon as S, Bell as F, BellIcon as P, Bookmark as B, BookmarkIcon as D, Bot as y, BotIcon as M, BugIcon as T, Calendar as w, CalendarIcon as v, Camera as W, CameraIcon as L, ChartIcon as b, Check as A, CheckCircle as R, CheckIcon as G, ChevronDown as H, ChevronLeft as V, ChevronRight as E, ChevronUp as O, ChevronsUpDown as U, Clock as N, ClockIcon as z, CloseIcon as K, Cloud as _, CloudIcon as Q, Code as Z, CodeIcon as X, CompassIcon as q, Copy as j, CopyCheck as J, CopyCheckIcon as Y, CopyIcon as $, Cpu as ee, CreditCardIcon as oe, Database as re, DatabaseIcon as te, DollarIcon as ie, Download as ne, DownloadIcon as ae, EditIcon as ce, ErrorIcon as me, ExternalLink as pe, Eye as le, EyeIcon as fe, EyeOff as se, FileCode as de, FilePlus as xe, FilePlusIcon as Ie, FileText as ge, Files as Ce, Filter as ue, FilterIcon as ke, FireIcon as he, Folder as Se, FolderOpen as Fe, FolderPlus as Pe, FolderPlusIcon as Be, GiftIcon as De, GitBranch as ye, GitBranchIcon as Me, Globe as Te, GlobeIcon as we, Grid as ve, Grid3x3 as We, GripVertical as Le, Hash as be, HeadphonesIcon as Ae, Heart as Re, HeartIcon as Ge, HelpIcon as He, Highlighter as Ve, History as Ee, Home as Oe, HomeIcon as Ue, Image as Ne, ImageIcon as ze, Info as Ke, InfoIcon as _e, Key as Qe, KeyIcon as Ze, Layers as Xe, LayersIcon as qe, LayoutDashboard as je, Link as Je, LinkIcon as Ye, Loader2 as $e, LoadingIcon as eo, Lock as oo, LockIcon as ro, MagicIcon as to, Mail as io, MailIcon as no, MapPinIcon as ao, Maximize as co, Menu as mo, MessageIcon as po, MessageSquare as lo, Mic as fo, MicIcon as so, MicOff as xo, Minus as Io, MinusIcon as go, Moon as Co, MoonIcon as uo, MoreHorizontal as ko, MoreVertical as ho, MuteIcon as So, Package as Fo, PackageIcon as Po, Paperclip as Bo, Paste as Do, PasteIcon as yo, Pause as Mo, PauseIcon as To, Pencil as wo, Phone as vo, PieChart as Wo, Pin as Lo, PinIcon as bo, Play as Ao, PlayIcon as Ro, Plus as Go, PlusIcon as Ho, PowerIcon as Vo, PrinterIcon as Eo, Quote as Oo, Refresh as Uo, RefreshIcon as No, Restore as zo, RocketIcon as Ko, Save as _o, SaveIcon as Qo, Search as Zo, SearchIcon as Xo, Send as qo, SendIcon as jo, Settings as Jo, SettingsIcon as Yo, ShareIcon as $o, Shield as er, ShieldCheck as or, ShieldIcon as rr, SparkleIcon as tr, Sparkles as ir, Star as nr, StarIcon as ar, Stop as cr, SuccessIcon as mr, Sun as pr, SunIcon as lr, Tag as fr, TagIcon as sr, TargetIcon as dr, Terminal as xr, TerminalIcon as Ir, ThumbsDownIcon as gr, ThumbsUpIcon as Cr, Timer as ur, Trash as kr, TrashIcon as hr, TrendingDown as Sr, TrendingUp as Fr, Unlock as Pr, Upload as Br, UploadIcon as Dr, User as yr, UserIcon as Mr, Video as Tr, VideoIcon as wr, Volume as vr, VolumeIcon as Wr, VolumeOff as Lr, Wand as br, WarningIcon as Ar, WifiIcon as Rr, WifiOffIcon as Gr, Workflow as Hr, X as Vr, XCircle as Er, Zap as Or, ZapIcon as Ur } from "./components/icons/index.js";
+import { Activity as m, ActivityIcon as p, AlertCircle as l, AlertTriangle as f, ArchiveIcon as s, ArrowDown as d, ArrowLeft as x, ArrowRight as I, ArrowRightLeft as g, ArrowUp as C, AtSign as u, AwardIcon as k, BarChart as h, BatteryIcon as S, Bell as F, BellIcon as B, Bookmark as P, BookmarkIcon as D, Bot as y, BotIcon as T, BugIcon as M, Calendar as w, CalendarIcon as v, Camera as W, CameraIcon as L, ChartIcon as b, Check as A, CheckCircle as R, CheckIcon as G, ChevronDown as H, ChevronLeft as V, ChevronRight as E, ChevronUp as O, ChevronsUpDown as U, Clock as N, ClockIcon as z, CloseIcon as K, Cloud as _, CloudIcon as Q, Code as Z, CodeIcon as X, CompassIcon as q, Copy as j, CopyCheck as J, CopyCheckIcon as Y, CopyIcon as $, Cpu as ee, CreditCardIcon as oe, Database as re, DatabaseIcon as te, DollarIcon as ie, Download as ne, DownloadIcon as ae, EditIcon as ce, ErrorIcon as me, ExternalLink as pe, Eye as le, EyeIcon as fe, EyeOff as se, FileCode as de, FilePlus as xe, FilePlusIcon as Ie, FileText as ge, Files as Ce, Filter as ue, FilterIcon as ke, FireIcon as he, Folder as Se, FolderOpen as Fe, FolderPlus as Be, FolderPlusIcon as Pe, GiftIcon as De, GitBranch as ye, GitBranchIcon as Te, Globe as Me, GlobeIcon as we, Grid as ve, Grid3x3 as We, GripVertical as Le, Hash as be, HeadphonesIcon as Ae, Heart as Re, HeartIcon as Ge, HelpIcon as He, Highlighter as Ve, History as Ee, Home as Oe, HomeIcon as Ue, Image as Ne, ImageIcon as ze, Info as Ke, InfoIcon as _e, Key as Qe, KeyIcon as Ze, Layers as Xe, LayersIcon as qe, LayoutDashboard as je, Link as Je, LinkIcon as Ye, Loader2 as $e, LoadingIcon as eo, Lock as oo, LockIcon as ro, MagicIcon as to, Mail as io, MailIcon as no, MapPinIcon as ao, Maximize as co, Menu as mo, MessageIcon as po, MessageSquare as lo, Mic as fo, MicIcon as so, MicOff as xo, Minus as Io, MinusIcon as go, Moon as Co, MoonIcon as uo, MoreHorizontal as ko, MoreVertical as ho, MuteIcon as So, Package as Fo, PackageIcon as Bo, Paperclip as Po, Paste as Do, PasteIcon as yo, Pause as To, PauseIcon as Mo, Pencil as wo, Phone as vo, PieChart as Wo, Pin as Lo, PinIcon as bo, Play as Ao, PlayIcon as Ro, Plus as Go, PlusIcon as Ho, PowerIcon as Vo, PrinterIcon as Eo, Quote as Oo, Refresh as Uo, RefreshIcon as No, Restore as zo, RocketIcon as Ko, Save as _o, SaveIcon as Qo, Search as Zo, SearchIcon as Xo, Send as qo, SendIcon as jo, Settings as Jo, SettingsIcon as Yo, ShareIcon as $o, Shield as er, ShieldCheck as or, ShieldIcon as rr, SparkleIcon as tr, Sparkles as ir, Star as nr, StarIcon as ar, Stop as cr, SuccessIcon as mr, Sun as pr, SunIcon as lr, Tag as fr, TagIcon as sr, TargetIcon as dr, Terminal as xr, TerminalIcon as Ir, ThumbsDownIcon as gr, ThumbsUpIcon as Cr, Timer as ur, Trash as kr, TrashIcon as hr, TrendingDown as Sr, TrendingUp as Fr, Unlock as Br, Upload as Pr, UploadIcon as Dr, User as yr, UserIcon as Tr, Video as Mr, VideoIcon as wr, Volume as vr, VolumeIcon as Wr, VolumeOff as Lr, Wand as br, WarningIcon as Ar, WifiIcon as Rr, WifiOffIcon as Gr, Workflow as Hr, X as Vr, XCircle as Er, Zap as Or, ZapIcon as Ur } from "./components/icons/index.js";
 import { ActivityAppsMain as zr } from "./app/ActivityAppsMain.js";
 import { ActivityBar as _r } from "./components/layout/ActivityBar.js";
 import { AffixInput as Zr, Input as Xr, NumberInput as qr, Textarea as jr } from "./components/ui/Input.js";
@@ -9,9 +9,9 @@ import { AreaChart as pt, DataBarChart as lt, DataPieChart as ft, LineChart as s
 import { AttachmentPreview as It } from "./components/chat/input/AttachmentPreview.js";
 import { BlockRenderer as Ct } from "./components/chat/blocks/BlockRenderer.js";
 import { BottomBar as kt, BottomBarItem as ht, StatusIndicator as St } from "./components/layout/BottomBar.js";
-import { Breadcrumb as Pt } from "./components/file-browser/Breadcrumb.js";
+import { Breadcrumb as Bt } from "./components/file-browser/Breadcrumb.js";
 import { Button as Dt } from "./components/ui/Button.js";
-import { ChatContainer as Mt } from "./components/chat/ChatContainer.js";
+import { ChatContainer as Tt } from "./components/chat/ChatContainer.js";
 import { ChatInput as wt } from "./components/chat/input/ChatInput.js";
 import { ChatProvider as Wt, useChatContext as Lt } from "./components/chat/ChatProvider.js";
 import { Checkbox as At, CheckboxGroup as Rt, CheckboxList as Gt } from "./components/ui/Checkbox.js";
@@ -25,8 +25,8 @@ import { CommandProvider as ci, createCommandService as mi, useCommand as pi } f
 import { ComponentRegistryProvider as fi, createComponentRegistry as si, useComponentContextFactory as di, useComponentRegistry as xi } from "./context/ComponentRegistry.js";
 import { ConfirmDialog as gi, Dialog as Ci } from "./components/ui/Dialog.js";
 import { ConnectionStatus as ki } from "./components/chat/status/ConnectionStatus.js";
-import { DECK_GRID_CONFIG as Si, DeckGrid as Fi, getGridConfigFromElement as Pi } from "./components/deck/DeckGrid.js";
-import { DEFAULT_FLOE_CONFIG as Di, FloeConfigProvider as yi, useFloeConfig as Mi, useResolvedFloeConfig as Ti } from "./context/FloeConfigContext.js";
+import { DECK_GRID_CONFIG as Si, DeckGrid as Fi, getGridConfigFromElement as Bi } from "./components/deck/DeckGrid.js";
+import { DEFAULT_FLOE_CONFIG as Di, FloeConfigProvider as yi, useFloeConfig as Ti, useResolvedFloeConfig as Mi } from "./context/FloeConfigContext.js";
 import { DEFAULT_VIRTUAL_LIST_CONFIG as vi } from "./components/chat/types.js";
 import { DeckCell as Li } from "./components/deck/DeckCell.js";
 import { DeckProvider as Ai, createDeckService as Ri, useDeck as Gi } from "./context/DeckContext.js";
@@ -44,9 +44,9 @@ import { FileBrowserProvider as xn, useFileBrowser as In } from "./components/fi
 import { FileBrowserToolbar as Cn } from "./components/file-browser/FileBrowserToolbar.js";
 import { FileContextMenu as kn } from "./components/file-browser/FileContextMenu.js";
 import { FileGridView as Sn } from "./components/file-browser/FileGridView.js";
-import { FileListView as Pn } from "./components/file-browser/FileListView.js";
+import { FileListView as Bn } from "./components/file-browser/FileListView.js";
 import { FileSavePicker as Dn } from "./components/ui/FileSavePicker.js";
-import { FilesSidebarWidget as Mn, SearchSidebarWidget as Tn, SettingsSidebarWidget as wn, ShowcaseSidebarWidget as vn, SidebarWidget as Wn } from "./widgets/SidebarWidget.js";
+import { FilesSidebarWidget as Tn, SearchSidebarWidget as Mn, SettingsSidebarWidget as wn, ShowcaseSidebarWidget as vn, SidebarWidget as Wn } from "./widgets/SidebarWidget.js";
 import { FloatingWindow as bn } from "./components/ui/FloatingWindow.js";
 import { FloeApp as Rn } from "./app/FloeApp.js";
 import { FloeRegistryRuntime as Hn } from "./app/FloeRegistryRuntime.js";
@@ -63,9 +63,9 @@ import { LayoutSelector as Ia } from "./components/deck/LayoutSelector.js";
 import { LoadingOverlay as Ca } from "./components/loading/LoadingOverlay.js";
 import { MarkdownBlock as ka } from "./components/chat/blocks/MarkdownBlock.js";
 import { MermaidBlock as Sa } from "./components/chat/blocks/MermaidBlock.js";
-import { MessageActions as Pa } from "./components/chat/message/MessageActions.js";
+import { MessageActions as Ba } from "./components/chat/message/MessageActions.js";
 import { MessageAvatar as Da } from "./components/chat/message/MessageAvatar.js";
-import { MessageBubble as Ma } from "./components/chat/message/MessageBubble.js";
+import { MessageBubble as Ta } from "./components/chat/message/MessageBubble.js";
 import { MessageItem as wa } from "./components/chat/message/MessageItem.js";
 import { MessageMeta as Wa } from "./components/chat/message/MessageMeta.js";
 import { MetricsWidget as ba } from "./widgets/MetricsWidget.js";
@@ -83,8 +83,8 @@ import { ShellBlock as mc } from "./components/chat/blocks/ShellBlock.js";
 import { Sidebar as lc, SidebarContent as fc, SidebarItem as sc, SidebarItemList as dc, SidebarSection as xc } from "./components/layout/Sidebar.js";
 import { Skeleton as gc, SkeletonCard as Cc, SkeletonList as uc, SkeletonText as kc } from "./components/loading/Skeleton.js";
 import { SnakeLoader as Sc } from "./components/loading/SnakeLoader.js";
-import { Stepper as Pc, Wizard as Bc, useWizard as Dc } from "./components/ui/Stepper.js";
-import { StreamingCursor as Mc } from "./components/chat/status/StreamingCursor.js";
+import { Stepper as Bc, Wizard as Pc, useWizard as Dc } from "./components/ui/Stepper.js";
+import { StreamingCursor as Tc } from "./components/chat/status/StreamingCursor.js";
 import { SvgBlock as wc } from "./components/chat/blocks/SvgBlock.js";
 import { Switch as Wc } from "./components/ui/Switch.js";
 import { TabPanel as bc, Tabs as Ac } from "./components/ui/Tabs.js";
@@ -95,38 +95,39 @@ import { ThinkingBlock as Kc } from "./components/chat/blocks/ThinkingBlock.js";
 import { ToolCallBlock as Qc } from "./components/chat/blocks/ToolCallBlock.js";
 import { Tooltip as Xc } from "./components/ui/Tooltip.js";
 import { TopBar as jc } from "./components/layout/TopBar.js";
-import { ViewActivationProvider as Yc, useViewActivation as $c } from "./context/ViewActivationContext.js";
-import { VirtualMessageList as om } from "./components/chat/message-list/VirtualMessageList.js";
-import { WidgetFrame as tm } from "./components/deck/WidgetFrame.js";
-import { WidgetPalette as nm } from "./components/deck/WidgetPalette.js";
-import { WidgetRegistryProvider as cm, createWidgetRegistry as mm, useWidgetRegistry as pm } from "./context/WidgetRegistry.js";
-import { WidgetResizeHandle as fm } from "./components/deck/WidgetResizeHandle.js";
-import { WidgetStateProvider as dm, useCurrentWidgetId as xm, useWidgetState as Im, useWidgetStateContext as gm } from "./context/WidgetStateContext.js";
-import { WidgetTypeSwitcher as um } from "./components/deck/WidgetTypeSwitcher.js";
-import { WorkingIndicator as hm } from "./components/chat/status/WorkingIndicator.js";
-import { applyDragDelta as Fm, applyResizeDelta as Pm, getGridCellSize as Bm, pixelDeltaToGridDelta as Dm, positionToGridArea as ym, snapToGrid as Mm } from "./utils/gridLayout.js";
-import { checkCollision as wm, constrainPosition as vm, findFreePosition as Wm, hasCollision as Lm } from "./utils/gridCollision.js";
-import { cn as Am } from "./utils/cn.js";
-import { computeCodeDiff as Gm, computeCodeDiffSync as Hm, configureDiffWorker as Vm, createDiffWorker as Em, hasDiffWorker as Om, terminateDiffWorker as Um, waitForDiffWorker as Nm } from "./components/chat/hooks/useCodeDiff.js";
-import { configureMarkdownWorker as Km, createMarkdownWorker as _m, hasMarkdownWorker as Qm, renderMarkdown as Zm, renderMarkdownSync as Xm, terminateMarkdownWorker as qm, waitForMarkdownWorker as jm } from "./components/chat/hooks/useMarkdown.js";
-import { configureMermaidWorker as Ym, configureSyncMermaid as $m, renderMermaid as ep, terminateMermaidWorker as op, useMermaid as rp } from "./components/chat/hooks/useMermaid.js";
-import { configureShikiWorker as ip, configureSyncHighlighter as np, highlightCode as ap, terminateShikiWorker as cp, useCodeHighlight as mp } from "./components/chat/hooks/useCodeHighlight.js";
-import { createSimpleContext as lp } from "./context/createSimpleContext.js";
-import { deferAfterPaint as sp, deferNonBlocking as dp } from "./utils/defer.js";
-import { duration as Ip, easing as gp, fadeIn as Cp, listContainer as up, listItem as kp, panelResize as hp, popIn as Sp, scaleIn as Fp, sidebarVariants as Pp, slideInFromBottom as Bp, slideInFromLeft as Dp, slideInFromRight as yp, slideInFromTop as Mp, springConfig as Tp } from "./utils/animations.js";
-import { formatKeybind as vp, matchKeybind as Wp, parseKeybind as Lp } from "./utils/keybind.js";
-import { isTypingElement as Ap, shouldIgnoreHotkeys as Rp } from "./utils/dom.js";
-import { lockBodyStyle as Hp } from "./utils/bodyStyleLock.js";
-import { useAttachments as Ep } from "./components/chat/hooks/useAttachments.js";
-import { useAutoScroll as Up } from "./components/chat/hooks/useAutoScroll.js";
-import { useDebounce as zp } from "./hooks/useDebounce.js";
-import { useDeckDrag as _p } from "./hooks/useDeckDrag.js";
-import { useFileBrowserDropTarget as Zp, useFileBrowserItemDrag as Xp } from "./hooks/useFileBrowserDrag.js";
-import { useKeybind as jp } from "./hooks/useKeybind.js";
-import { useMediaQuery as Yp } from "./hooks/useMediaQuery.js";
-import { usePersisted as el } from "./hooks/usePersisted.js";
-import { useResizeObserver as rl } from "./hooks/useResizeObserver.js";
-import { useVirtualList as il } from "./components/chat/hooks/useVirtualList.js";
+import { TopBarIconButton as Yc } from "./components/layout/TopBarIconButton.js";
+import { ViewActivationProvider as em, useViewActivation as om } from "./context/ViewActivationContext.js";
+import { VirtualMessageList as tm } from "./components/chat/message-list/VirtualMessageList.js";
+import { WidgetFrame as nm } from "./components/deck/WidgetFrame.js";
+import { WidgetPalette as cm } from "./components/deck/WidgetPalette.js";
+import { WidgetRegistryProvider as pm, createWidgetRegistry as lm, useWidgetRegistry as fm } from "./context/WidgetRegistry.js";
+import { WidgetResizeHandle as dm } from "./components/deck/WidgetResizeHandle.js";
+import { WidgetStateProvider as Im, useCurrentWidgetId as gm, useWidgetState as Cm, useWidgetStateContext as um } from "./context/WidgetStateContext.js";
+import { WidgetTypeSwitcher as hm } from "./components/deck/WidgetTypeSwitcher.js";
+import { WorkingIndicator as Fm } from "./components/chat/status/WorkingIndicator.js";
+import { applyDragDelta as Pm, applyResizeDelta as Dm, getGridCellSize as ym, pixelDeltaToGridDelta as Tm, positionToGridArea as Mm, snapToGrid as wm } from "./utils/gridLayout.js";
+import { checkCollision as Wm, constrainPosition as Lm, findFreePosition as bm, hasCollision as Am } from "./utils/gridCollision.js";
+import { cn as Gm } from "./utils/cn.js";
+import { computeCodeDiff as Vm, computeCodeDiffSync as Em, configureDiffWorker as Om, createDiffWorker as Um, hasDiffWorker as Nm, terminateDiffWorker as zm, waitForDiffWorker as Km } from "./components/chat/hooks/useCodeDiff.js";
+import { configureMarkdownWorker as Qm, createMarkdownWorker as Zm, hasMarkdownWorker as Xm, renderMarkdown as qm, renderMarkdownSync as jm, terminateMarkdownWorker as Jm, waitForMarkdownWorker as Ym } from "./components/chat/hooks/useMarkdown.js";
+import { configureMermaidWorker as ep, configureSyncMermaid as op, renderMermaid as rp, terminateMermaidWorker as tp, useMermaid as ip } from "./components/chat/hooks/useMermaid.js";
+import { configureShikiWorker as ap, configureSyncHighlighter as cp, highlightCode as mp, terminateShikiWorker as pp, useCodeHighlight as lp } from "./components/chat/hooks/useCodeHighlight.js";
+import { createSimpleContext as sp } from "./context/createSimpleContext.js";
+import { deferAfterPaint as xp, deferNonBlocking as Ip } from "./utils/defer.js";
+import { duration as Cp, easing as up, fadeIn as kp, listContainer as hp, listItem as Sp, panelResize as Fp, popIn as Bp, scaleIn as Pp, sidebarVariants as Dp, slideInFromBottom as yp, slideInFromLeft as Tp, slideInFromRight as Mp, slideInFromTop as wp, springConfig as vp } from "./utils/animations.js";
+import { formatKeybind as Lp, matchKeybind as bp, parseKeybind as Ap } from "./utils/keybind.js";
+import { isTypingElement as Gp, shouldIgnoreHotkeys as Hp } from "./utils/dom.js";
+import { lockBodyStyle as Ep } from "./utils/bodyStyleLock.js";
+import { useAttachments as Up } from "./components/chat/hooks/useAttachments.js";
+import { useAutoScroll as zp } from "./components/chat/hooks/useAutoScroll.js";
+import { useDebounce as _p } from "./hooks/useDebounce.js";
+import { useDeckDrag as Zp } from "./hooks/useDeckDrag.js";
+import { useFileBrowserDropTarget as qp, useFileBrowserItemDrag as jp } from "./hooks/useFileBrowserDrag.js";
+import { useKeybind as Yp } from "./hooks/useKeybind.js";
+import { useMediaQuery as el } from "./hooks/useMediaQuery.js";
+import { usePersisted as rl } from "./hooks/usePersisted.js";
+import { useResizeObserver as il } from "./hooks/useResizeObserver.js";
+import { useVirtualList as al } from "./components/chat/hooks/useVirtualList.js";
 export {
   m as Activity,
   zr as ActivityAppsMain,
@@ -149,16 +150,16 @@ export {
   h as BarChart,
   S as BatteryIcon,
   F as Bell,
-  P as BellIcon,
+  B as BellIcon,
   Ct as BlockRenderer,
-  B as Bookmark,
+  P as Bookmark,
   D as BookmarkIcon,
   y as Bot,
-  M as BotIcon,
+  T as BotIcon,
   kt as BottomBar,
   ht as BottomBarItem,
-  Pt as Breadcrumb,
-  T as BugIcon,
+  Bt as Breadcrumb,
+  M as BugIcon,
   Dt as Button,
   w as Calendar,
   v as CalendarIcon,
@@ -171,7 +172,7 @@ export {
   tt as CardHeader,
   it as CardTitle,
   b as ChartIcon,
-  Mt as ChatContainer,
+  Tt as ChatContainer,
   wt as ChatInput,
   Wt as ChatProvider,
   A as Check,
@@ -247,13 +248,13 @@ export {
   kn as FileContextMenu,
   Sn as FileGridView,
   Yt as FileIcon,
-  Pn as FileListView,
+  Bn as FileListView,
   xe as FilePlus,
   Ie as FilePlusIcon,
   Dn as FileSavePicker,
   ge as FileText,
   Ce as Files,
-  Mn as FilesSidebarWidget,
+  Tn as FilesSidebarWidget,
   ue as Filter,
   ke as FilterIcon,
   he as FireIcon,
@@ -266,8 +267,8 @@ export {
   $t as FolderIcon,
   Fe as FolderOpen,
   ei as FolderOpenIcon,
-  Pe as FolderPlus,
-  Be as FolderPlusIcon,
+  Be as FolderPlus,
+  Pe as FolderPlusIcon,
   En as Form,
   On as FormActions,
   Un as FormControl,
@@ -280,8 +281,8 @@ export {
   Xn as FormSection,
   De as GiftIcon,
   ye as GitBranch,
-  Me as GitBranchIcon,
-  Te as Globe,
+  Te as GitBranchIcon,
+  Me as Globe,
   we as GlobeIcon,
   ve as Grid,
   We as Grid3x3,
@@ -335,9 +336,9 @@ export {
   co as Maximize,
   mo as Menu,
   Sa as MermaidBlock,
-  Pa as MessageActions,
+  Ba as MessageActions,
   Da as MessageAvatar,
-  Ma as MessageBubble,
+  Ta as MessageBubble,
   po as MessageIcon,
   wa as MessageItem,
   Wa as MessageMeta,
@@ -362,16 +363,16 @@ export {
   Va as NotificationProvider,
   qr as NumberInput,
   Fo as Package,
-  Po as PackageIcon,
+  Bo as PackageIcon,
   Na as Pagination,
   Ka as Panel,
   _a as PanelContent,
   Qa as PanelHeader,
-  Bo as Paperclip,
+  Po as Paperclip,
   Do as Paste,
   yo as PasteIcon,
-  Mo as Pause,
-  To as PauseIcon,
+  To as Pause,
+  Mo as PauseIcon,
   wo as Pencil,
   vo as Phone,
   Wo as PieChart,
@@ -398,7 +399,7 @@ export {
   Qo as SaveIcon,
   Zo as Search,
   Xo as SearchIcon,
-  Tn as SearchSidebarWidget,
+  Mn as SearchSidebarWidget,
   ic as SegmentedControl,
   Nt as SegmentedProgress,
   qi as Select,
@@ -430,10 +431,10 @@ export {
   nr as Star,
   ar as StarIcon,
   St as StatusIndicator,
-  Pc as Stepper,
+  Bc as Stepper,
   zt as StepsProgress,
   cr as Stop,
-  Mc as StreamingCursor,
+  Tc as StreamingCursor,
   ri as StyleFileIcon,
   on as SuccessBlock,
   mr as SuccessIcon,
@@ -460,139 +461,140 @@ export {
   Qc as ToolCallBlock,
   Xc as Tooltip,
   jc as TopBar,
+  Yc as TopBarIconButton,
   kr as Trash,
   hr as TrashIcon,
   Sr as TrendingDown,
   Fr as TrendingUp,
-  Pr as Unlock,
-  Br as Upload,
+  Br as Unlock,
+  Pr as Upload,
   Dr as UploadIcon,
   yr as User,
-  Mr as UserIcon,
-  Tr as Video,
+  Tr as UserIcon,
+  Mr as Video,
   wr as VideoIcon,
-  Yc as ViewActivationProvider,
-  om as VirtualMessageList,
+  em as ViewActivationProvider,
+  tm as VirtualMessageList,
   vr as Volume,
   Wr as VolumeIcon,
   Lr as VolumeOff,
   br as Wand,
   tn as WarningBlock,
   Ar as WarningIcon,
-  tm as WidgetFrame,
-  nm as WidgetPalette,
-  cm as WidgetRegistryProvider,
-  fm as WidgetResizeHandle,
-  dm as WidgetStateProvider,
-  um as WidgetTypeSwitcher,
+  nm as WidgetFrame,
+  cm as WidgetPalette,
+  pm as WidgetRegistryProvider,
+  dm as WidgetResizeHandle,
+  Im as WidgetStateProvider,
+  hm as WidgetTypeSwitcher,
   Rr as WifiIcon,
   Gr as WifiOffIcon,
-  Bc as Wizard,
+  Pc as Wizard,
   Hr as Workflow,
-  hm as WorkingIndicator,
+  Fm as WorkingIndicator,
   Vr as X,
   Er as XCircle,
   Or as Zap,
   Ur as ZapIcon,
-  Fm as applyDragDelta,
-  Pm as applyResizeDelta,
+  Pm as applyDragDelta,
+  Dm as applyResizeDelta,
   i as applyTheme,
   n as builtInThemes,
-  wm as checkCollision,
-  Am as cn,
-  Gm as computeCodeDiff,
-  Hm as computeCodeDiffSync,
-  Vm as configureDiffWorker,
-  Km as configureMarkdownWorker,
-  Ym as configureMermaidWorker,
-  ip as configureShikiWorker,
-  np as configureSyncHighlighter,
-  $m as configureSyncMermaid,
-  vm as constrainPosition,
+  Wm as checkCollision,
+  Gm as cn,
+  Vm as computeCodeDiff,
+  Em as computeCodeDiffSync,
+  Om as configureDiffWorker,
+  Qm as configureMarkdownWorker,
+  ep as configureMermaidWorker,
+  ap as configureShikiWorker,
+  cp as configureSyncHighlighter,
+  op as configureSyncMermaid,
+  Lm as constrainPosition,
   mi as createCommandService,
   si as createComponentRegistry,
   Ri as createDeckService,
-  Em as createDiffWorker,
+  Um as createDiffWorker,
   sa as createLayoutService,
-  _m as createMarkdownWorker,
+  Zm as createMarkdownWorker,
   Ea as createNotificationService,
-  lp as createSimpleContext,
+  sp as createSimpleContext,
   Uc as createThemeService,
-  mm as createWidgetRegistry,
-  sp as deferAfterPaint,
-  dp as deferNonBlocking,
-  Ip as duration,
-  gp as easing,
-  Cp as fadeIn,
-  Wm as findFreePosition,
-  vp as formatKeybind,
+  lm as createWidgetRegistry,
+  xp as deferAfterPaint,
+  Ip as deferNonBlocking,
+  Cp as duration,
+  up as easing,
+  kp as fadeIn,
+  bm as findFreePosition,
+  Lp as formatKeybind,
   ti as getFileIcon,
-  Bm as getGridCellSize,
-  Pi as getGridConfigFromElement,
+  ym as getGridCellSize,
+  Bi as getGridConfigFromElement,
   a as getSystemTheme,
-  Lm as hasCollision,
-  Om as hasDiffWorker,
+  Am as hasCollision,
+  Nm as hasDiffWorker,
   fn as hasFileBrowserDragContext,
-  Qm as hasMarkdownWorker,
-  ap as highlightCode,
-  Ap as isTypingElement,
-  up as listContainer,
-  kp as listItem,
-  Hp as lockBodyStyle,
-  Wp as matchKeybind,
-  hp as panelResize,
-  Lp as parseKeybind,
-  Dm as pixelDeltaToGridDelta,
-  Sp as popIn,
-  ym as positionToGridArea,
-  Zm as renderMarkdown,
-  Xm as renderMarkdownSync,
-  ep as renderMermaid,
-  Fp as scaleIn,
-  Rp as shouldIgnoreHotkeys,
-  Pp as sidebarVariants,
-  Bp as slideInFromBottom,
-  Dp as slideInFromLeft,
-  yp as slideInFromRight,
-  Mp as slideInFromTop,
-  Mm as snapToGrid,
-  Tp as springConfig,
-  Um as terminateDiffWorker,
-  qm as terminateMarkdownWorker,
-  op as terminateMermaidWorker,
-  cp as terminateShikiWorker,
-  Ep as useAttachments,
-  Up as useAutoScroll,
+  Xm as hasMarkdownWorker,
+  mp as highlightCode,
+  Gp as isTypingElement,
+  hp as listContainer,
+  Sp as listItem,
+  Ep as lockBodyStyle,
+  bp as matchKeybind,
+  Fp as panelResize,
+  Ap as parseKeybind,
+  Tm as pixelDeltaToGridDelta,
+  Bp as popIn,
+  Mm as positionToGridArea,
+  qm as renderMarkdown,
+  jm as renderMarkdownSync,
+  rp as renderMermaid,
+  Pp as scaleIn,
+  Hp as shouldIgnoreHotkeys,
+  Dp as sidebarVariants,
+  yp as slideInFromBottom,
+  Tp as slideInFromLeft,
+  Mp as slideInFromRight,
+  wp as slideInFromTop,
+  wm as snapToGrid,
+  vp as springConfig,
+  zm as terminateDiffWorker,
+  Jm as terminateMarkdownWorker,
+  tp as terminateMermaidWorker,
+  pp as terminateShikiWorker,
+  Up as useAttachments,
+  zp as useAutoScroll,
   Lt as useChatContext,
-  mp as useCodeHighlight,
+  lp as useCodeHighlight,
   pi as useCommand,
   di as useComponentContextFactory,
   xi as useComponentRegistry,
-  xm as useCurrentWidgetId,
-  zp as useDebounce,
+  gm as useCurrentWidgetId,
+  _p as useDebounce,
   Gi as useDeck,
-  _p as useDeckDrag,
+  Zp as useDeckDrag,
   In as useFileBrowser,
   sn as useFileBrowserDrag,
-  Zp as useFileBrowserDropTarget,
-  Xp as useFileBrowserItemDrag,
-  Mi as useFloeConfig,
+  qp as useFileBrowserDropTarget,
+  jp as useFileBrowserItemDrag,
+  Ti as useFloeConfig,
   qn as useFormSubmitting,
-  jp as useKeybind,
+  Yp as useKeybind,
   da as useLayout,
-  Yp as useMediaQuery,
-  rp as useMermaid,
+  el as useMediaQuery,
+  ip as useMermaid,
   Oa as useNotification,
-  el as usePersisted,
-  rl as useResizeObserver,
-  Ti as useResolvedFloeConfig,
+  rl as usePersisted,
+  il as useResizeObserver,
+  Mi as useResolvedFloeConfig,
   Nc as useTheme,
-  $c as useViewActivation,
-  il as useVirtualList,
-  pm as useWidgetRegistry,
-  Im as useWidgetState,
-  gm as useWidgetStateContext,
+  om as useViewActivation,
+  al as useVirtualList,
+  fm as useWidgetRegistry,
+  Cm as useWidgetState,
+  um as useWidgetStateContext,
   Dc as useWizard,
-  Nm as waitForDiffWorker,
-  jm as waitForMarkdownWorker
+  Km as waitForDiffWorker,
+  Ym as waitForMarkdownWorker
 };

package/dist/layout.js

@@ -1,28 +1,30 @@
-import { ActivityBar as o } from "./components/layout/ActivityBar.js";
+import { ActivityBar as r } from "./components/layout/ActivityBar.js";
 import { BottomBar as a, BottomBarItem as m, StatusIndicator as i } from "./components/layout/BottomBar.js";
 import { KeepAliveStack as n } from "./components/layout/KeepAliveStack.js";
 import { MobileTabBar as x } from "./components/layout/MobileTabBar.js";
-import { Panel as d, PanelContent as l, PanelHeader as b } from "./components/layout/Panel.js";
+import { Panel as S, PanelContent as d, PanelHeader as l } from "./components/layout/Panel.js";
 import { ResizeHandle as c } from "./components/layout/ResizeHandle.js";
 import { Shell as s } from "./components/layout/Shell.js";
-import { Sidebar as v, SidebarContent as A, SidebarItem as C, SidebarItemList as H, SidebarSection as T } from "./components/layout/Sidebar.js";
-import { TopBar as k } from "./components/layout/TopBar.js";
+import { Sidebar as T, SidebarContent as u, SidebarItem as v, SidebarItemList as A, SidebarSection as C } from "./components/layout/Sidebar.js";
+import { TopBar as h } from "./components/layout/TopBar.js";
+import { TopBarIconButton as y } from "./components/layout/TopBarIconButton.js";
 export {
-  o as ActivityBar,
+  r as ActivityBar,
   a as BottomBar,
   m as BottomBarItem,
   n as KeepAliveStack,
   x as MobileTabBar,
-  d as Panel,
-  l as PanelContent,
-  b as PanelHeader,
+  S as Panel,
+  d as PanelContent,
+  l as PanelHeader,
   c as ResizeHandle,
   s as Shell,
-  v as Sidebar,
-  A as SidebarContent,
-  C as SidebarItem,
-  H as SidebarItemList,
-  T as SidebarSection,
+  T as Sidebar,
+  u as SidebarContent,
+  v as SidebarItem,
+  A as SidebarItemList,
+  C as SidebarSection,
   i as StatusIndicator,
-  k as TopBar
+  h as TopBar,
+  y as TopBarIconButton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",