@floegence/floe-webapp-core 0.86.62 → 0.86.64

package/dist/app/FloeRegistryContributions.js

@@ -24,9 +24,6 @@ function h(r) {
     get commands() {
       return t.current.commands;
     },
-    get statusBar() {
-      return t.current.statusBar;
-    },
     async onMount(o) {
       const e = t.current;
       t.mountedDefinition = e, await e.onMount?.(o);

package/dist/components/icons/ActivityRailIcons.d.ts

@@ -0,0 +1,30 @@
+import type { Component, JSX } from 'solid-js';
+export interface ActivityRailIconProps extends JSX.SvgSVGAttributes<SVGSVGElement> {
+    size?: number | string;
+}
+/** Launchpad — four rounded tiles in a 2x2 field. */
+export declare const RailLaunchpad: Component<ActivityRailIconProps>;
+/** Notes — a page with a folded corner and writing rules. */
+export declare const RailNotes: Component<ActivityRailIconProps>;
+/** Showcase — a workspace frame with chrome and a side rail. */
+export declare const RailShowcase: Component<ActivityRailIconProps>;
+/** Files — a tabbed folder. */
+export declare const RailFiles: Component<ActivityRailIconProps>;
+/** Search — lens. */
+export declare const RailSearch: Component<ActivityRailIconProps>;
+/** Settings — two rails with a knob each. Legible where a gear is not. */
+export declare const RailSettings: Component<ActivityRailIconProps>;
+/** Chat — speech bubble with a tail. */
+export declare const RailChat: Component<ActivityRailIconProps>;
+/** Design tokens — sheets stacked behind a front card. */
+export declare const RailDesignTokens: Component<ActivityRailIconProps>;
+export declare const ActivityRailIcons: {
+    readonly launchpad: Component<ActivityRailIconProps>;
+    readonly notes: Component<ActivityRailIconProps>;
+    readonly showcase: Component<ActivityRailIconProps>;
+    readonly files: Component<ActivityRailIconProps>;
+    readonly search: Component<ActivityRailIconProps>;
+    readonly settings: Component<ActivityRailIconProps>;
+    readonly chat: Component<ActivityRailIconProps>;
+    readonly designTokens: Component<ActivityRailIconProps>;
+};

package/dist/components/icons/ActivityRailIcons.js

@@ -0,0 +1,68 @@
+import { createComponent as s, mergeProps as a, insert as c, effect as f, setAttribute as h, template as e } from "solid-js/web";
+var u = /* @__PURE__ */ e('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true>'), d = /* @__PURE__ */ e("<svg><rect x=3.5 y=3.5 width=7.5 height=7.5 rx=2.2></svg>", !1, !0, !1), o = /* @__PURE__ */ e("<svg><rect x=13 y=3.5 width=7.5 height=7.5 rx=2.2></svg>", !1, !0, !1), p = /* @__PURE__ */ e("<svg><rect x=3.5 y=13 width=7.5 height=7.5 rx=2.2></svg>", !1, !0, !1), m = /* @__PURE__ */ e("<svg><rect x=13 y=13 width=7.5 height=7.5 rx=2.2></svg>", !1, !0, !1), _ = /* @__PURE__ */ e('<svg><path d="M7 3.5h6.75a1.5 1.5 0 0 1 1.06.44l5.25 5.25a1.5 1.5 0 0 1 .44 1.06V18.5a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2Z"></svg>', !1, !0, !1), $ = /* @__PURE__ */ e('<svg><path d="M13.75 3.5v5.25a1.5 1.5 0 0 0 1.5 1.5H20.5"></svg>', !1, !0, !1), x = /* @__PURE__ */ e('<svg><path d="M8.5 13h9"></svg>', !1, !0, !1), w = /* @__PURE__ */ e('<svg><path d="M8.5 16.75h5.5"></svg>', !1, !0, !1), M = /* @__PURE__ */ e("<svg><rect x=3.5 y=4.5 width=17 height=15 rx=2.5></svg>", !1, !0, !1), y = /* @__PURE__ */ e('<svg><path d="M3.5 8.75h17"></svg>', !1, !0, !1), R = /* @__PURE__ */ e('<svg><path d="M9.5 8.75v10.75"></svg>', !1, !0, !1), k = /* @__PURE__ */ e('<svg><path d="M3.5 17.5V6.5a2 2 0 0 1 2-2h3.35a2 2 0 0 1 1.6.8l1 1.35a2 2 0 0 0 1.6.8h3.45a2 2 0 0 1 2 2v8.05a2 2 0 0 1-2 2H5.5a2 2 0 0 1-2-2Z"></svg>', !1, !0, !1), H = /* @__PURE__ */ e("<svg><circle cx=10.75 cy=10.75 r=6.25></svg>", !1, !0, !1), C = /* @__PURE__ */ e('<svg><path d="m15.25 15.25 5.25 5.25"></svg>', !1, !0, !1), S = /* @__PURE__ */ e('<svg><path d="M3.5 6.5h3.25"></svg>', !1, !0, !1), Z = /* @__PURE__ */ e('<svg><path d="M12.75 6.5h7.75"></svg>', !1, !0, !1), z = /* @__PURE__ */ e("<svg><circle cx=9.75 cy=6.5 r=2.75></svg>", !1, !0, !1), A = /* @__PURE__ */ e('<svg><path d="M3.5 17.5h8.75"></svg>', !1, !0, !1), B = /* @__PURE__ */ e('<svg><path d="M18.25 17.5h2.25"></svg>', !1, !0, !1), L = /* @__PURE__ */ e("<svg><circle cx=15.25 cy=17.5 r=2.75></svg>", !1, !0, !1), T = /* @__PURE__ */ e('<svg><path d="M20.5 7.5a3 3 0 0 0-3-3h-11a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h1.5v3.5L11.5 16.5H17.5a3 3 0 0 0 3-3Z"></svg>', !1, !0, !1), V = /* @__PURE__ */ e("<svg><rect x=6.5 y=3.5 width=14 height=14 rx=3.5></svg>", !1, !0, !1), b = /* @__PURE__ */ e('<svg><path d="M3.5 8.5v8a4 4 0 0 0 4 4h6"></svg>', !1, !0, !1);
+function l(t) {
+  return (() => {
+    var g = u();
+    return c(g, () => t.children), f((r) => {
+      var v = t.size ?? 24, i = t.size ?? 24, n = t.class;
+      return v !== r.e && h(g, "width", r.e = v), i !== r.t && h(g, "height", r.t = i), n !== r.a && h(g, "class", r.a = n), r;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), g;
+  })();
+}
+const j = (t) => s(l, a(t, {
+  get children() {
+    return [d(), o(), p(), m()];
+  }
+})), D = (t) => s(l, a(t, {
+  get children() {
+    return [_(), $(), x(), w()];
+  }
+})), F = (t) => s(l, a(t, {
+  get children() {
+    return [M(), y(), R()];
+  }
+})), I = (t) => s(l, a(t, {
+  get children() {
+    return k();
+  }
+})), N = (t) => s(l, a(t, {
+  get children() {
+    return [H(), C()];
+  }
+})), P = (t) => s(l, a(t, {
+  get children() {
+    return [S(), Z(), z(), A(), B(), L()];
+  }
+})), q = (t) => s(l, a(t, {
+  get children() {
+    return T();
+  }
+})), E = (t) => s(l, a(t, {
+  get children() {
+    return [V(), b()];
+  }
+})), J = {
+  launchpad: j,
+  notes: D,
+  showcase: F,
+  files: I,
+  search: N,
+  settings: P,
+  chat: q,
+  designTokens: E
+};
+export {
+  J as ActivityRailIcons,
+  q as RailChat,
+  E as RailDesignTokens,
+  I as RailFiles,
+  j as RailLaunchpad,
+  D as RailNotes,
+  N as RailSearch,
+  P as RailSettings,
+  F as RailShowcase
+};

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

@@ -3,6 +3,7 @@ import type { JSX } from 'solid-js';
 export interface IconProps extends JSX.SvgSVGAttributes<SVGSVGElement> {
     size?: number | string;
 }
+export { ActivityRailIcons, RailLaunchpad, RailNotes, RailShowcase, RailFiles, RailSearch, RailSettings, RailChat, RailDesignTokens, } from './ActivityRailIcons';
 export { DockTerminal, DockFolder, DockCpu, DockActivity, DockFileCode, DockSearch, DockGlobe, DockSparkles, DockBot, DockCode, DockMessageSquare, DockRegion, DockText, DockLayoutDashboard, DockLayers, } from './DockIcons';
 export declare const Region: (props?: IconProps) => JSX.Element;
 export declare const TextTool: (props?: IconProps) => JSX.Element;

package/dist/components/layout/ActivityBar.js

@@ -1,111 +1,113 @@
-import { insert as v, createComponent as o, effect as x, className as s, setAttribute as u, template as h, use as E, Dynamic as R, memo as j, delegateEvents as q } from "solid-js/web";
-import { createMemo as b, For as B, Show as D, onMount as P, onCleanup as T } from "solid-js";
-import { cn as d } from "../../utils/cn.js";
-import { deferNonBlocking as _ } from "../../utils/defer.js";
-import { Tooltip as K } from "../ui/Tooltip.js";
-import { resolveActivityBarClick as N } from "./activityBarBehavior.js";
-import { isBarItemContextMenuKey as X, keyboardBarItemContextMenuRequest as Y } from "./barItemContextMenu.js";
-var F = /* @__PURE__ */ h('<div class="flex flex-col">'), H = /* @__PURE__ */ h('<nav data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), L = /* @__PURE__ */ h("<span>"), V = /* @__PURE__ */ h("<button type=button data-floe-interactive=press><span aria-hidden=true></span><span aria-hidden=true>");
-function Z(t) {
-  const l = b(() => t.activeId), c = b(() => t.collapsed ?? !1), f = b(() => t.onActiveChange), y = b(() => t.onCollapsedChange), m = (e) => {
+import { insert as d, createComponent as o, effect as x, className as g, setAttribute as u, template as b, use as D, Dynamic as E, memo as R, delegateEvents as S } from "solid-js/web";
+import { createMemo as m, For as M, Show as B, onMount as j, onCleanup as q } from "solid-js";
+import { cn as v } from "../../utils/cn.js";
+import { deferNonBlocking as P } from "../../utils/defer.js";
+import { Tooltip as T } from "../ui/Tooltip.js";
+import { resolveActivityBarClick as _ } from "./activityBarBehavior.js";
+import { isBarItemContextMenuKey as K, keyboardBarItemContextMenuRequest as N } from "./barItemContextMenu.js";
+var X = /* @__PURE__ */ b('<div class="flex flex-col">'), Y = /* @__PURE__ */ b('<nav data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), F = /* @__PURE__ */ b("<span>"), H = /* @__PURE__ */ b("<button type=button data-floe-interactive=press><span aria-hidden=true>");
+function U(t) {
+  const r = m(() => t.activeId), c = m(() => t.collapsed ?? !1), s = m(() => t.onActiveChange), h = m(() => t.onCollapsedChange), f = (e) => {
     if (e.onClick) {
-      _(() => e.onClick());
+      P(() => e.onClick());
       return;
     }
-    const a = N({
+    const a = _({
       clickedId: e.id,
-      activeId: l(),
+      activeId: r(),
       collapsed: c(),
       behavior: e.collapseBehavior
     });
-    a.nextActiveId !== l() && (typeof a.openSidebar == "boolean" ? f()(a.nextActiveId, {
+    a.nextActiveId !== r() && (typeof a.openSidebar == "boolean" ? s()(a.nextActiveId, {
       openSidebar: a.openSidebar
-    }) : f()(a.nextActiveId)), typeof a.nextCollapsed == "boolean" && y()?.(a.nextCollapsed);
+    }) : s()(a.nextActiveId)), typeof a.nextCollapsed == "boolean" && h()?.(a.nextCollapsed);
   };
   return (() => {
-    var e = H(), a = e.firstChild;
-    return v(a, o(B, {
+    var e = Y(), a = e.firstChild;
+    return d(a, o(M, {
       get each() {
         return t.items;
       },
-      children: (n) => o(S, {
+      children: (n) => o($, {
         item: n,
         get isActive() {
-          return l() === n.id;
+          return r() === n.id;
         },
-        onClick: () => m(n)
+        onClick: () => f(n)
       })
-    })), v(e, o(D, {
+    })), d(e, o(B, {
       get when() {
         return t.bottomItems?.length;
       },
       get children() {
-        var n = F();
-        return v(n, o(B, {
+        var n = X();
+        return d(n, o(M, {
           get each() {
             return t.bottomItems;
           },
-          children: (r) => o(S, {
-            item: r,
-            isActive: !1,
-            onClick: () => m(r)
+          children: (i) => o($, {
+            item: i,
+            get isActive() {
+              return r() === i.id;
+            },
+            onClick: () => f(i)
           })
         })), n;
       }
     }), null), x((n) => {
-      var r = d("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-[var(--floe-line-quiet)]", t.class), i = t.ariaLabel;
-      return r !== n.e && s(e, n.e = r), i !== n.t && u(e, "aria-label", n.t = i), n;
+      var i = v("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-[var(--floe-line-quiet)]", t.class), l = t.ariaLabel;
+      return i !== n.e && g(e, n.e = i), l !== n.t && u(e, "aria-label", n.t = l), n;
     }, {
       e: void 0,
       t: void 0
     }), e;
   })();
 }
-function S(t) {
-  let l;
-  const c = () => typeof t.item.badge == "function" ? t.item.badge() : t.item.badge, f = () => typeof t.item.ariaExpanded == "function" ? t.item.ariaExpanded() : t.item.ariaExpanded;
-  P(() => t.item.buttonRef?.(l ?? null)), T(() => t.item.buttonRef?.(null));
-  const y = (e) => {
+function $(t) {
+  let r;
+  const c = () => typeof t.item.badge == "function" ? t.item.badge() : t.item.badge, s = () => typeof t.item.ariaExpanded == "function" ? t.item.ariaExpanded() : t.item.ariaExpanded;
+  j(() => t.item.buttonRef?.(r ?? null)), q(() => t.item.buttonRef?.(null));
+  const h = (e) => {
     t.item.onContextMenu && (e.preventDefault(), e.stopPropagation(), t.item.onContextMenu({
       trigger: e.currentTarget,
       clientX: e.clientX,
       clientY: e.clientY,
       source: "pointer"
     }));
-  }, m = (e) => {
-    !t.item.onContextMenu || !X(e) || (e.preventDefault(), e.stopPropagation(), t.item.onContextMenu(Y(e.currentTarget)));
+  }, f = (e) => {
+    !t.item.onContextMenu || !K(e) || (e.preventDefault(), e.stopPropagation(), t.item.onContextMenu(N(e.currentTarget)));
   };
-  return o(K, {
+  return o(T, {
     get content() {
       return t.item.label;
     },
     placement: "right",
     delay: 0,
     get children() {
-      var e = V(), a = e.firstChild, n = a.nextSibling;
-      e.$$keydown = m, e.$$contextmenu = y, e.$$click = () => t.onClick();
-      var r = l;
-      return typeof r == "function" ? E(r, e) : l = e, v(e, o(R, {
+      var e = H(), a = e.firstChild;
+      e.$$keydown = f, e.$$contextmenu = h, e.$$click = () => t.onClick();
+      var n = r;
+      return typeof n == "function" ? D(n, e) : r = e, d(e, o(E, {
         get component() {
           return t.item.icon;
         },
         get class() {
-          return d("relative w-5 h-5 transition-[color,transform] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", t.isActive ? "text-activity-bar-foreground-active" : "group-hover/activity-item:text-activity-bar-foreground-active group-hover/activity-item:-translate-y-px");
+          return v("relative w-5 h-5 transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", t.isActive ? "text-activity-bar-foreground-active" : "group-hover/activity-item:text-activity-bar-foreground-active");
         }
-      }), null), v(e, o(D, {
+      }), null), d(e, o(B, {
         get when() {
           return c();
         },
         get children() {
-          var i = L();
-          return v(i, (() => {
-            var g = j(() => typeof c() == "number" && c() > 99);
-            return () => g() ? "99+" : c();
-          })()), x(() => s(i, d("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[length:var(--floe-type-caption)] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), i;
+          var i = F();
+          return d(i, (() => {
+            var l = R(() => typeof c() == "number" && c() > 99);
+            return () => l() ? "99+" : c();
+          })()), x(() => g(i, v("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[length:var(--floe-type-caption)] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), i;
         }
       }), null), x((i) => {
-        var g = d("group/activity-item relative w-full aspect-square flex items-center justify-center cursor-pointer", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", "text-activity-bar-foreground", t.isActive && "text-activity-bar-foreground-active"), C = t.item.label, k = t.isActive, A = f(), w = t.item.ariaControls, I = t.item.ariaHasPopup ?? (t.item.onContextMenu ? "menu" : void 0), M = d("absolute inset-1 rounded-md", "transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", t.isActive ? "bg-[var(--floe-state-selected)]" : "bg-transparent group-hover/activity-item:bg-[var(--floe-state-hover)]"), $ = d("absolute left-0 top-1/2 -translate-y-1/2 w-[2px] rounded-full", "transition-[height,background-color] duration-[var(--floe-duration-base)] ease-[var(--floe-ease-out)]", t.isActive ? "h-4 bg-[var(--activity-bar-foreground-active)]" : "h-1.5 bg-transparent group-hover/activity-item:h-2.5 group-hover/activity-item:bg-[var(--floe-line-strong)]");
-        return g !== i.e && s(e, i.e = g), C !== i.t && u(e, "aria-label", i.t = C), k !== i.a && u(e, "aria-pressed", i.a = k), A !== i.o && u(e, "aria-expanded", i.o = A), w !== i.i && u(e, "aria-controls", i.i = w), I !== i.n && u(e, "aria-haspopup", i.n = I), M !== i.s && s(a, i.s = M), $ !== i.h && s(n, i.h = $), i;
+        var l = v("group/activity-item relative w-full aspect-square flex items-center justify-center cursor-pointer", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", "text-activity-bar-foreground", t.isActive && "text-activity-bar-foreground-active"), y = t.item.label, C = t.isActive, k = s(), A = t.item.ariaControls, w = t.item.ariaHasPopup ?? (t.item.onContextMenu ? "menu" : void 0), I = v("absolute inset-1 rounded-md", "transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", t.isActive ? "bg-[var(--floe-state-selected)]" : "bg-transparent group-hover/activity-item:bg-[var(--floe-state-hover)]");
+        return l !== i.e && g(e, i.e = l), y !== i.t && u(e, "aria-label", i.t = y), C !== i.a && u(e, "aria-pressed", i.a = C), k !== i.o && u(e, "aria-expanded", i.o = k), A !== i.i && u(e, "aria-controls", i.i = A), w !== i.n && u(e, "aria-haspopup", i.n = w), I !== i.s && g(a, i.s = I), i;
       }, {
         e: void 0,
         t: void 0,
@@ -113,13 +115,12 @@ function S(t) {
         o: void 0,
         i: void 0,
         n: void 0,
-        s: void 0,
-        h: void 0
+        s: void 0
       }), e;
     }
   });
 }
-q(["click", "contextmenu", "keydown"]);
+S(["click", "contextmenu", "keydown"]);
 export {
-  Z as ActivityBar
+  U as ActivityBar
 };

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

@@ -3,5 +3,15 @@ export declare function sanitizeDisplayMode(value: unknown, fallback?: DisplayMo
 export interface DisplayModeSwitcherProps {
     mode: DisplayMode;
     onChange: (mode: DisplayMode) => void;
+    class?: string;
 }
+/**
+ * Display-mode switcher.
+ *
+ * The three modes are peer views of the same workspace, so the control is a
+ * segmented rail rather than three buttons: one travelling pill marks the
+ * current mode and slides to the next one. The pill is the selection — the
+ * faces under it stay flat — which keeps a single thing moving and lets the
+ * eye follow it across the bar.
+ */
 export declare function DisplayModeSwitcher(props: DisplayModeSwitcherProps): import("solid-js").JSX.Element;

package/dist/components/layout/DisplayModeSwitcher.js

@@ -1,52 +1,121 @@
-import { insert as a, createComponent as m, memo as h, effect as v, setAttribute as y, template as o, delegateEvents as p } from "solid-js/web";
-import { For as _ } from "solid-js";
-import { Bookmark as u, LayoutDashboard as k, Grid3x3 as f } from "../icons/index.js";
-var w = /* @__PURE__ */ o('<div class=display-mode-switcher role=tablist aria-label="Display mode">'), D = /* @__PURE__ */ o("<button type=button class=display-mode-switcher__pill role=tab><span class=display-mode-switcher__label>"), $ = /* @__PURE__ */ o("<span class=display-mode-switcher__pill-bg>");
-const g = /* @__PURE__ */ new Set(["activity", "deck", "workbench"]);
-function E(i, r = "activity") {
-  return typeof i == "string" && g.has(i) ? i : r;
+import { insert as b, memo as z, effect as y, setStyleProperty as p, createComponent as k, use as D, setAttribute as A, className as R, template as x, delegateEvents as B } from "solid-js/web";
+import { createSignal as C, createEffect as M, onCleanup as $, For as F } from "solid-js";
+import { cn as E } from "../../utils/cn.js";
+import { Bookmark as I, LayoutDashboard as O, Grid3x3 as P } from "../icons/index.js";
+var N = /* @__PURE__ */ x('<div role=tablist aria-label="Display mode"data-floe-surface=inset data-floe-surface-part=rail>'), q = /* @__PURE__ */ x('<span aria-hidden=true data-floe-surface=raised data-floe-surface-part=segment-pill class="display-mode-switcher__pill pointer-events-none absolute top-0.5 bottom-0.5 left-0 rounded-[calc(var(--floe-radius-control)-2px)]">'), W = /* @__PURE__ */ x('<button type=button role=tab><span class="display-mode-switcher__label whitespace-nowrap">');
+const G = /* @__PURE__ */ new Set(["activity", "deck", "workbench"]);
+function Q(r, s = "activity") {
+  return typeof r == "string" && G.has(r) ? r : s;
 }
-const A = [{
+const H = [{
   id: "activity",
   label: "Activity",
-  icon: u
+  icon: I
 }, {
   id: "deck",
   label: "Deck",
-  icon: k
+  icon: O
 }, {
   id: "workbench",
   label: "Workbench",
-  icon: f
-}];
-function L(i) {
+  icon: P
+}], L = {
+  x: 0,
+  width: 0,
+  visible: !1
+};
+let h;
+function T(r) {
+  let s;
+  const d = /* @__PURE__ */ new Map(), [g, f] = C(L), [w, S] = C(!1), _ = () => {
+    const o = s, v = d.get(r.mode);
+    if (!o || !v) {
+      f(L);
+      return;
+    }
+    const n = o.getBoundingClientRect();
+    if (n.width <= 0)
+      return;
+    const l = (a) => {
+      const e = d.get(a);
+      if (!e) return;
+      const c = e.offsetParent === o && Number.isFinite(e.offsetLeft), u = c ? e.offsetLeft : e.getBoundingClientRect().left - n.left, m = c ? e.offsetWidth : e.getBoundingClientRect().width;
+      return {
+        x: u,
+        width: m
+      };
+    }, t = l(r.mode);
+    if (!t || t.width <= 0) return;
+    const i = h !== void 0 && h !== r.mode ? l(h) : void 0;
+    if (w())
+      f({
+        ...t,
+        visible: t.width > 0
+      });
+    else {
+      const a = i ?? t;
+      f({
+        ...a,
+        visible: a.width > 0
+      }), requestAnimationFrame(() => {
+        w() || (S(!0), requestAnimationFrame(() => {
+          i && f({
+            ...t,
+            visible: t.width > 0
+          });
+        }));
+      });
+    }
+    h = r.mode;
+  };
+  if (M(() => {
+    r.mode, _();
+  }), typeof ResizeObserver < "u") {
+    const o = new ResizeObserver(() => _());
+    M(() => {
+      s && o.observe(s);
+    }), $(() => o.disconnect());
+  }
   return (() => {
-    var r = w();
-    return a(r, m(_, {
-      each: A,
-      children: (l) => {
-        const b = l.icon, c = () => i.mode === l.id;
+    var o = N(), v = s;
+    return typeof v == "function" ? D(v, o) : s = o, b(o, (() => {
+      var n = z(() => !!g().visible);
+      return () => n() ? (() => {
+        var l = q();
+        return y((t) => {
+          var i = `translate3d(${g().x}px, 0, 0)`, a = `${g().width}px`, e = w() ? void 0 : "none";
+          return i !== t.e && p(l, "transform", t.e = i), a !== t.t && p(l, "width", t.t = a), e !== t.a && p(l, "transition-property", t.a = e), t;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        }), l;
+      })() : null;
+    })(), null), b(o, k(F, {
+      each: H,
+      children: (n) => {
+        const l = n.icon, t = () => r.mode === n.id;
         return (() => {
-          var e = D(), s = e.firstChild;
-          return e.$$click = () => i.onChange(l.id), a(e, (() => {
-            var t = h(() => !!c());
-            return () => t() ? $() : null;
-          })(), s), a(e, m(b, {
-            class: "display-mode-switcher__icon"
-          }), s), a(s, () => l.label), v((t) => {
-            var n = !!c(), d = c();
-            return n !== t.e && e.classList.toggle("is-active", t.e = n), d !== t.t && y(e, "aria-selected", t.t = d), t;
+          var i = W(), a = i.firstChild;
+          return i.$$click = () => r.onChange(n.id), D((e) => {
+            d.set(n.id, e), $(() => d.delete(n.id));
+          }, i), b(i, k(l, {
+            class: "display-mode-switcher__icon h-3 w-3 shrink-0"
+          }), a), b(a, () => n.label), y((e) => {
+            var c = t(), u = t() ? 0 : -1, m = E("display-mode-switcher__option relative z-10 inline-flex cursor-pointer items-center", "gap-1.5 rounded-sm px-2", "transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--floe-plane)]", t() ? "text-foreground" : "text-[var(--floe-ink-soft)] hover:text-foreground");
+            return c !== e.e && A(i, "aria-selected", e.e = c), u !== e.t && A(i, "tabindex", e.t = u), m !== e.a && R(i, e.a = m), e;
           }, {
             e: void 0,
-            t: void 0
-          }), e;
+            t: void 0,
+            a: void 0
+          }), i;
         })();
       }
-    })), r;
+    }), null), y(() => R(o, E("display-mode-switcher relative inline-flex items-stretch", "h-[var(--floe-control-height-sm)] rounded-control border border-[var(--floe-line)] p-0.5", "text-[length:var(--floe-type-caption)] leading-[var(--floe-line-control)]", r.class))), o;
   })();
 }
-p(["click"]);
+B(["click"]);
 export {
-  L as DisplayModeSwitcher,
-  E as sanitizeDisplayMode
+  T as DisplayModeSwitcher,
+  Q as sanitizeDisplayMode
 };

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

@@ -21,9 +21,6 @@ export interface ShellSlotClassNames {
     contentArea?: string;
     main?: string;
     terminalPanel?: string;
-    bottomBar?: string;
-    /** Height class for the bottom bar, defaults to 'h-5' (20px). Use Tailwind height classes like 'h-7' (28px). */
-    bottomBarHeight?: string;
     mobileTabBar?: string;
 }
 export interface ShellProps {
@@ -52,9 +49,6 @@ export interface ShellProps {
      */
     activityBottomItemsMobileMode?: 'hidden' | 'topBar';
     topBarActions?: JSX.Element;
-    /** Defaults to visible. Hidden omits the desktop status bar and its content without reserving space. Mobile navigation is unchanged. */
-    bottomBarMode?: 'visible' | 'hidden';
-    bottomBarItems?: JSX.Element;
     /** Stable content directly above mobile navigation, such as a composer anchor. */
     mobileAccessory?: JSX.Element;
     /** Hide navigation only while a focused editor is occluded by the soft keyboard. */