@floegence/floe-webapp-core 0.36.74 → 0.36.76

package/dist/components/layout/Shell.js

@@ -1,113 +1,129 @@
-import { createComponent as o, Dynamic as T, insert as c, memo as p, effect as N, className as h, setAttribute as L, setStyleProperty as ie, template as x, use as ne, delegateEvents as oe } from "solid-js/web";
-import { createSignal as D, createEffect as I, createMemo as w, For as P, Show as S } from "solid-js";
-import { useLayout as ae } from "../../context/LayoutContext.js";
-import { useResolvedFloeConfig as le } from "../../context/FloeConfigContext.js";
-import { useMediaQuery as se } from "../../hooks/useMediaQuery.js";
-import { useOverlayMask as de } from "../../hooks/useOverlayMask.js";
+import { createComponent as a, Dynamic as L, insert as c, memo as O, effect as z, className as S, setAttribute as $, setStyleProperty as ae, template as k, use as le, delegateEvents as se } from "solid-js/web";
+import { createSignal as Q, batch as de, createEffect as I, createMemo as M, For as W, Show as y } from "solid-js";
+import { useLayout as ce } from "../../context/LayoutContext.js";
+import { useResolvedFloeConfig as be } from "../../context/FloeConfigContext.js";
+import { useMediaQuery as ue } from "../../hooks/useMediaQuery.js";
+import { useOverlayMask as me } from "../../hooks/useOverlayMask.js";
 import { cn as C } from "../../utils/cn.js";
-import { deferAfterPaint as ce, deferNonBlocking as be } from "../../utils/defer.js";
-import { useComponentRegistry as ue } from "../../context/ComponentRegistry.js";
-import { Sidebar as me } from "./Sidebar.js";
-import { TopBar as fe } from "./TopBar.js";
-import { TopBarIconButton as ve } from "./TopBarIconButton.js";
-import { BottomBar as ge } from "./BottomBar.js";
-import { MobileTabBar as he } from "./MobileTabBar.js";
-import { ActivityBar as Se } from "./ActivityBar.js";
-import { ResizeHandle as Q } from "./ResizeHandle.js";
-import { resolveMobileTabActiveId as Ce, resolveMobileTabSelect as ye } from "./mobileTabs.js";
-import { KeepAliveStack as Ie } from "./KeepAliveStack.js";
-import { resolveShellSidebarActiveTabChange as we } from "./sidebarVisibilityMotion.js";
-var q = /* @__PURE__ */ x('<div class="flex items-center gap-2">'), Be = /* @__PURE__ */ x("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), Me = /* @__PURE__ */ x('<div data-floe-shell-slot=mobile-sidebar-drawer tabindex=-1 role=dialog aria-modal=true><div class="h-full overflow-auto overscroll-contain">'), ke = /* @__PURE__ */ x("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), xe = /* @__PURE__ */ x('<div data-floe-shell><a></a><div data-floe-shell-slot=main-layout class="flex-1 min-h-0 flex overflow-hidden relative"><div data-floe-shell-slot=content-area><main data-floe-shell-slot=main tabindex=-1>');
-function Ke(r) {
-  const i = ae(), W = le(), s = se(W.config.layout.mobileQuery), [A, y] = D(!1), [F, z] = D(null);
-  let $;
-  const b = () => r.sidebarMode === "hidden", d = (() => {
+import { deferAfterPaint as fe, deferNonBlocking as ve } from "../../utils/defer.js";
+import { useComponentRegistry as ge } from "../../context/ComponentRegistry.js";
+import { Sidebar as he } from "./Sidebar.js";
+import { TopBar as Se } from "./TopBar.js";
+import { TopBarIconButton as ye } from "./TopBarIconButton.js";
+import { BottomBar as Ce } from "./BottomBar.js";
+import { MobileTabBar as Ie } from "./MobileTabBar.js";
+import { ActivityBar as Me } from "./ActivityBar.js";
+import { ResizeHandle as K } from "./ResizeHandle.js";
+import { resolveMobileTabActiveId as we, resolveMobileTabSelect as Be } from "./mobileTabs.js";
+import { KeepAliveStack as Ae } from "./KeepAliveStack.js";
+import { resolveShellSidebarActiveTabChange as ke } from "./sidebarVisibilityMotion.js";
+import { createUIFirstSelection as xe } from "../../utils/uiFirstSelection.js";
+var U = /* @__PURE__ */ k('<div class="flex items-center gap-2">'), Te = /* @__PURE__ */ k("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), pe = /* @__PURE__ */ k('<div data-floe-shell-slot=mobile-sidebar-drawer tabindex=-1 role=dialog aria-modal=true><div class="h-full overflow-auto overscroll-contain">'), Ne = /* @__PURE__ */ k("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), Le = /* @__PURE__ */ k('<div data-floe-shell><a></a><div data-floe-shell-slot=main-layout class="flex-1 min-h-0 flex overflow-hidden relative"><div data-floe-shell-slot=content-area><main data-floe-shell-slot=main tabindex=-1>');
+function Ye(r) {
+  const i = ce(), H = be(), d = ue(H.config.layout.mobileQuery), [x, h] = Q(!1), [V, R] = Q(null);
+  let F;
+  const b = () => r.sidebarMode === "hidden", s = (() => {
     try {
-      return ue();
+      return ge();
     } catch {
       return null;
     }
-  })(), O = (e, a) => {
-    const l = d?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
+  })(), T = (e, o) => {
+    const l = s?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
       openSidebar: n,
       visibilityMotion: u
-    } = we({
+    } = ke({
       currentActiveId: i.sidebarActiveTab(),
       nextActiveId: e,
-      requestedOpenSidebar: a?.openSidebar,
+      requestedOpenSidebar: o?.openSidebar,
       sidebarHidden: b(),
       nextActiveFullScreen: l,
-      isMobile: s(),
+      isMobile: d(),
       resolveSidebarVisibilityMotion: r.resolveSidebarVisibilityMotion
     });
     i.setSidebarActiveTab(e, {
       openSidebar: n,
       visibilityMotion: u
     });
+  }, p = xe({
+    committed: i.sidebarActiveTab,
+    commit: (e, o) => {
+      de(() => {
+        T(e, o?.opts), typeof o?.mobileSidebarOpen == "boolean" && h(o.mobileSidebarOpen);
+      });
+    }
+  }), N = () => r.activitySelectionMode === "ui-first" ? p.visual() : i.sidebarActiveTab(), j = (e, o) => {
+    if (r.activitySelectionMode === "ui-first") {
+      p.request(e, {
+        opts: o
+      });
+      return;
+    }
+    T(e, o);
   };
   I(() => {
-    b() && y(!1);
+    b() && h(!1);
   }), I(() => {
-    const e = s();
+    const e = d();
     i.isMobile() !== e && i.setIsMobile(e);
   }), I(() => {
-    s() || y(!1);
+    d() || h(!1);
   }), I(() => {
-    const e = i.sidebarVisibilityMotion(), a = i.sidebarVisibilityMotionRevision();
-    e === "instant" && ce(() => i.clearSidebarVisibilityMotion(a));
+    const e = i.sidebarVisibilityMotion(), o = i.sidebarVisibilityMotionRevision();
+    e === "instant" && fe(() => i.clearSidebarVisibilityMotion(o));
   });
-  const B = w(() => r.activityItems ? r.activityItems : d ? d.sidebarItems().filter((e) => !!e.icon).filter((e) => !(s() && e.sidebar?.hiddenOnMobile)).map((e) => ({
+  const w = M(() => r.activityItems ? r.activityItems : s ? s.sidebarItems().filter((e) => !!e.icon).filter((e) => !(d() && 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")
-  })) : []), K = w(() => b() ? [] : r.sidebarContent ? [] : d ? d.sidebarItems().filter((e) => !(s() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
+  })) : []), G = M(() => b() ? [] : r.sidebarContent ? [] : s ? s.sidebarItems().filter((e) => !(d() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
     id: e.id,
-    render: () => o(T, {
+    render: () => a(L, {
       get component() {
         return e.component;
       }
     })
-  })) : []), H = (e) => {
+  })) : []), E = (e) => {
     if (!b()) {
       if (r.sidebarContent) return r.sidebarContent(e);
-      if (d)
-        return o(Ie, {
+      if (s)
+        return a(Ae, {
           get views() {
-            return K();
+            return G();
           },
           activeId: e
         });
     }
-  }, R = w(() => b() ? !0 : d ? d.getComponent(i.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), j = w(() => {
+  }, P = M(() => b() ? !0 : s ? s.getComponent(i.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), J = M(() => {
     if (b()) return !0;
-    if (!d) return !1;
-    const e = d.getComponent(i.sidebarActiveTab());
+    if (!s) return !1;
+    const e = s.getComponent(i.sidebarActiveTab());
     return e?.sidebar ? e.sidebar.fullScreen === !0 || e.sidebar.renderIn === "main" : !1;
   });
   I(() => {
-    s() && R() && y(!1);
+    d() && P() && h(!1);
   });
-  const G = w(() => {
+  const X = M(() => {
     if (r.bottomBarItems) return r.bottomBarItems;
-    if (!d) return;
-    const e = [...d.statusBarItems()].sort((n, u) => (n.order ?? 100) - (u.order ?? 100)), a = e.filter((n) => n.position === "left"), l = e.filter((n) => n.position === "right");
+    if (!s) return;
+    const e = [...s.statusBarItems()].sort((n, u) => (n.order ?? 100) - (u.order ?? 100)), o = e.filter((n) => n.position === "left"), l = e.filter((n) => n.position === "right");
     return [(() => {
-      var n = q();
-      return c(n, o(P, {
-        each: a,
-        children: (u) => o(T, {
+      var n = U();
+      return c(n, a(W, {
+        each: o,
+        children: (u) => a(L, {
           get component() {
             return u.component;
           }
         })
       })), n;
     })(), (() => {
-      var n = q();
-      return c(n, o(P, {
+      var n = U();
+      return c(n, a(W, {
         each: l,
-        children: (u) => o(T, {
+        children: (u) => a(L, {
           get component() {
             return u.component;
           }
@@ -116,44 +132,53 @@ function Ke(r) {
     })()];
   });
   I(() => {
-    const e = B();
+    const e = w();
     if (!e.length) return;
     if (!i.sidebarActiveTab()) {
       const l = e.find((n) => !n.onClick);
       if (!l) return;
-      O(l.id);
+      T(l.id);
     }
   });
-  const V = (e) => {
-    const a = b() ? !0 : d?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
+  const _ = (e) => {
+    const o = b() ? !0 : s?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
       nextActiveId: l,
       nextMobileSidebarOpen: n
-    } = ye({
+    } = Be({
       clickedId: e,
       activeId: i.sidebarActiveTab(),
-      mobileSidebarOpen: A(),
-      clickedIsFullScreen: a
+      mobileSidebarOpen: x(),
+      clickedIsFullScreen: o
     });
-    i.sidebarActiveTab() !== l && O(l), y(n);
-  }, J = (e) => {
+    if (i.sidebarActiveTab() !== l) {
+      if (r.activitySelectionMode === "ui-first") {
+        p.request(l, {
+          mobileSidebarOpen: n
+        });
+        return;
+      }
+      T(l);
+    }
+    h(n);
+  }, Y = (e) => {
     if (e.onClick) {
-      be(() => e.onClick());
+      ve(() => e.onClick());
       return;
     }
-    V(e.id);
-  }, U = w(() => {
+    _(e.id);
+  }, Z = M(() => {
     const e = r.topBarActions;
-    if (!s() || (r.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
+    if (!d() || (r.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
     const l = r.activityBottomItems ?? [];
-    return l.length ? [o(P, {
+    return l.length ? [a(W, {
       each: l,
-      children: (n) => o(ve, {
+      children: (n) => a(ye, {
         get label() {
           return n.label;
         },
-        onClick: () => J(n),
+        onClick: () => Y(n),
         get children() {
-          return o(T, {
+          return a(L, {
             get component() {
               return n.icon;
             },
@@ -162,18 +187,18 @@ function Ke(r) {
         }
       })
     }), e] : e;
-  }), X = () => b() ? !0 : i.sidebarCollapsed(), Y = () => F() ?? i.sidebarWidth(), v = () => W.config.accessibility, Z = () => {
-    z(i.sidebarWidth());
-  }, ee = (e) => {
-    z((a) => i.clampSidebarWidth((a ?? i.sidebarWidth()) + e));
-  }, te = () => {
-    const e = F();
-    e !== null && (i.setSidebarWidth(e), z(null));
+  }), ee = () => b() ? !0 : i.sidebarCollapsed(), te = () => V() ?? i.sidebarWidth(), v = () => H.config.accessibility, re = () => {
+    R(i.sidebarWidth());
+  }, ie = (e) => {
+    R((o) => i.clampSidebarWidth((o ?? i.sidebarWidth()) + e));
+  }, ne = () => {
+    const e = V();
+    e !== null && (i.setSidebarWidth(e), R(null));
   };
-  de({
-    open: () => s() && A() && !b(),
-    root: () => $,
-    onClose: () => y(!1),
+  me({
+    open: () => d() && x() && !b(),
+    root: () => F,
+    onClose: () => h(!1),
     lockBodyScroll: !0,
     trapFocus: !0,
     closeOnEscape: !0,
@@ -183,7 +208,7 @@ function Ke(r) {
     autoFocus: !1,
     restoreFocus: !0
   });
-  const re = () => {
+  const oe = () => {
     if (typeof document > "u") return;
     const e = document.getElementById(v().mainContentId);
     if (!(!e || !(e instanceof HTMLElement)))
@@ -193,13 +218,13 @@ function Ke(r) {
       }
   };
   return (() => {
-    var e = xe(), a = e.firstChild, l = a.nextSibling, n = l.firstChild, u = n.firstChild;
-    return a.$$click = () => re(), c(a, () => v().skipLinkLabel), c(e, o(fe, {
+    var e = Le(), o = e.firstChild, l = o.nextSibling, n = l.firstChild, u = n.firstChild;
+    return o.$$click = () => oe(), c(o, () => v().skipLinkLabel), c(e, a(Se, {
       get logo() {
         return r.logo;
       },
       get actions() {
-        return U();
+        return Z();
       },
       get ariaLabel() {
         return v().topBarLabel;
@@ -207,32 +232,32 @@ function Ke(r) {
       get class() {
         return r.slotClassNames?.topBar;
       }
-    }), l), c(l, o(S, {
+    }), l), c(l, a(y, {
       get when() {
-        return !s();
+        return !d();
       },
       get children() {
-        return [o(S, {
+        return [a(y, {
           get when() {
-            return B().length > 0;
+            return w().length > 0;
           },
           get children() {
-            return o(Se, {
+            return a(Me, {
               get items() {
-                return B();
+                return w();
               },
               get bottomItems() {
                 return r.activityBottomItems;
               },
               get activeId() {
-                return i.sidebarActiveTab();
+                return N();
               },
-              onActiveChange: O,
+              onActiveChange: j,
               get collapsed() {
-                return X();
+                return ee();
               },
               get onCollapsedChange() {
-                return p(() => !!b())() ? void 0 : i.setSidebarCollapsed;
+                return O(() => !!b())() ? void 0 : i.setSidebarCollapsed;
               },
               get ariaLabel() {
                 return v().primaryNavigationLabel;
@@ -242,17 +267,17 @@ function Ke(r) {
               }
             });
           }
-        }), o(S, {
+        }), a(y, {
           get when() {
             return !b();
           },
           get children() {
-            return o(me, {
+            return a(he, {
               get width() {
-                return Y();
+                return te();
               },
               get collapsed() {
-                return i.sidebarCollapsed() || R();
+                return i.sidebarCollapsed() || P();
               },
               get visibilityMotion() {
                 return i.sidebarVisibilityMotion();
@@ -261,65 +286,65 @@ function Ke(r) {
                 return v().sidebarLabel;
               },
               get resizer() {
-                return o(Q, {
+                return a(K, {
                   direction: "horizontal",
-                  onResize: ee,
-                  onResizeStart: Z,
-                  onResizeEnd: te
+                  onResize: ie,
+                  onResizeStart: re,
+                  onResizeEnd: ne
                 });
               },
               get class() {
                 return r.slotClassNames?.sidebar;
               },
               get children() {
-                return H(i.sidebarActiveTab());
+                return E(i.sidebarActiveTab());
               }
             });
           }
         })];
       }
-    }), n), c(l, o(S, {
+    }), n), c(l, a(y, {
       get when() {
-        return p(() => !!(s() && A()))() && !b();
+        return O(() => !!(d() && x()))() && !b();
       },
       get children() {
         return [(() => {
-          var t = Be();
-          return t.$$click = () => y(!1), N(() => h(t, C("absolute inset-0 z-40 bg-black/30 cursor-pointer", r.slotClassNames?.mobileSidebarBackdrop))), t;
+          var t = Te();
+          return t.$$click = () => h(!1), z(() => S(t, C("absolute inset-0 z-40 bg-black/30 cursor-pointer", r.slotClassNames?.mobileSidebarBackdrop))), t;
         })(), (() => {
-          var t = Me(), m = t.firstChild, g = $;
-          return typeof g == "function" ? ne(g, t) : $ = t, c(m, () => H(i.sidebarActiveTab())), N((f) => {
-            var M = C("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), k = v().sidebarLabel;
-            return M !== f.e && h(t, f.e = M), k !== f.t && L(t, "aria-label", f.t = k), f;
+          var t = pe(), m = t.firstChild, g = F;
+          return typeof g == "function" ? le(g, t) : F = t, c(m, () => E(i.sidebarActiveTab())), z((f) => {
+            var B = C("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), A = v().sidebarLabel;
+            return B !== f.e && S(t, f.e = B), A !== f.t && $(t, "aria-label", f.t = A), f;
           }, {
             e: void 0,
             t: void 0
           }), t;
         })()];
       }
-    }), n), c(u, () => r.children), c(n, o(S, {
+    }), n), c(u, () => r.children), c(n, a(y, {
       get when() {
-        return p(() => !!(!s() && i.terminalOpened()))() && r.terminalPanel;
+        return O(() => !!(!d() && i.terminalOpened()))() && r.terminalPanel;
       },
       get children() {
-        var t = ke();
-        return c(t, o(Q, {
+        var t = Ne();
+        return c(t, a(K, {
           direction: "vertical",
           onResize: (m) => i.setTerminalHeight(i.terminalHeight() - m)
-        }), null), c(t, () => r.terminalPanel, null), N((m) => {
+        }), null), c(t, () => r.terminalPanel, null), z((m) => {
           var g = C("relative shrink-0 border-t border-border bg-terminal-background overflow-hidden", r.slotClassNames?.terminalPanel), f = `${i.terminalHeight()}px`;
-          return g !== m.e && h(t, m.e = g), f !== m.t && ie(t, "height", m.t = f), m;
+          return g !== m.e && S(t, m.e = g), f !== m.t && ae(t, "height", m.t = f), m;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
-    }), null), c(e, o(S, {
+    }), null), c(e, a(y, {
       get when() {
-        return !s();
+        return !d();
       },
       get children() {
-        return o(ge, {
+        return a(Ce, {
           get class() {
             return r.slotClassNames?.bottomBar;
           },
@@ -327,28 +352,31 @@ function Ke(r) {
             return r.slotClassNames?.bottomBarHeight;
           },
           get children() {
-            return G();
+            return X();
           }
         });
       }
-    }), null), c(e, o(S, {
+    }), null), c(e, a(y, {
       get when() {
-        return p(() => !!s())() && B().length > 0;
+        return O(() => !!d())() && w().length > 0;
       },
       get children() {
-        return o(he, {
+        return a(Ie, {
           get items() {
-            return B();
+            return w();
           },
           get activeId() {
-            return Ce({
-              activeId: i.sidebarActiveTab(),
-              mobileSidebarOpen: A(),
-              activeIsFullScreen: R(),
-              activeIsPage: j()
+            return we({
+              activeId: N(),
+              mobileSidebarOpen: p.pending() ? !0 : x(),
+              activeIsFullScreen: s?.getComponent(N())?.sidebar?.fullScreen ?? P(),
+              activeIsPage: (() => {
+                const t = s?.getComponent(N())?.sidebar;
+                return t ? t.fullScreen === !0 || t.renderIn === "main" : J();
+              })()
             });
           },
-          onSelect: V,
+          onSelect: _,
           get ariaLabel() {
             return v().mobileNavigationLabel;
           },
@@ -357,7 +385,7 @@ function Ke(r) {
           }
         });
       }
-    }), null), N((t) => {
+    }), null), z((t) => {
       var m = C(
         // Use dvh when supported to avoid mobile browser UI causing layout jumps.
         "h-screen h-[100dvh] w-full flex flex-col overflow-hidden",
@@ -366,8 +394,8 @@ function Ke(r) {
         "overscroll-none",
         r.slotClassNames?.root,
         r.class
-      ), g = `#${v().mainContentId}`, f = C("fixed left-3 top-3 z-[120] rounded-md bg-primary px-3 py-2 text-xs font-medium text-primary-foreground shadow-md", "transition-transform duration-150 motion-reduce:transition-none", "-translate-y-[200%] focus:translate-y-0"), M = C("flex-1 min-w-0 flex flex-col overflow-hidden", r.slotClassNames?.contentArea), k = C("flex-1 min-h-0 overflow-auto overscroll-contain", r.slotClassNames?.main), E = v().mainContentId, _ = v().mainLabel;
-      return m !== t.e && h(e, t.e = m), g !== t.t && L(a, "href", t.t = g), f !== t.a && h(a, t.a = f), M !== t.o && h(n, t.o = M), k !== t.i && h(u, t.i = k), E !== t.n && L(u, "id", t.n = E), _ !== t.s && L(u, "aria-label", t.s = _), t;
+      ), g = `#${v().mainContentId}`, f = C("fixed left-3 top-3 z-[120] rounded-md bg-primary px-3 py-2 text-xs font-medium text-primary-foreground shadow-md", "transition-transform duration-150 motion-reduce:transition-none", "-translate-y-[200%] focus:translate-y-0"), B = C("flex-1 min-w-0 flex flex-col overflow-hidden", r.slotClassNames?.contentArea), A = C("flex-1 min-h-0 overflow-auto overscroll-contain", r.slotClassNames?.main), q = v().mainContentId, D = v().mainLabel;
+      return m !== t.e && S(e, t.e = m), g !== t.t && $(o, "href", t.t = g), f !== t.a && S(o, t.a = f), B !== t.o && S(n, t.o = B), A !== t.i && S(u, t.i = A), q !== t.n && $(u, "id", t.n = q), D !== t.s && $(u, "aria-label", t.s = D), t;
     }, {
       e: void 0,
       t: void 0,
@@ -379,7 +407,7 @@ function Ke(r) {
     }), e;
   })();
 }
-oe(["click"]);
+se(["click"]);
 export {
-  Ke as Shell
+  Ye as Shell
 };