@floegence/floe-webapp-core 0.26.0 → 0.26.2

package/dist/app/ActivityAppsMain.d.ts

@@ -11,7 +11,7 @@ export interface ActivityAppsMainProps<TProtocol = unknown> {
      */
     views?: KeepAliveView[];
     /**
-     * Registry-driven filter (default: sidebar.fullScreen === true).
+     * Registry-driven filter (default: sidebar.fullScreen === true OR sidebar.renderIn === 'main').
      * Only used when `views` is not provided.
      */
     include?: (component: FloeComponent<TProtocol>) => boolean;

package/dist/app/ActivityAppsMain.js

@@ -4,7 +4,7 @@ import { useLayout as l } from "../context/LayoutContext.js";
 import { useComponentRegistry as v } from "../context/ComponentRegistry.js";
 import { KeepAliveStack as f } from "../components/layout/KeepAliveStack.js";
 function y(e) {
-  return e.sidebar?.fullScreen === !0;
+  return e.sidebar?.fullScreen === !0 || e.sidebar?.renderIn === "main";
 }
 function A(e) {
   const i = l(), r = (() => {
@@ -16,7 +16,7 @@ function A(e) {
   })();
   if (!d(() => !!e.views) && !r)
     throw new Error("ActivityAppsMain requires ComponentRegistryProvider when `views` is not provided.");
-  const o = () => e.activeId ? e.activeId() : i.sidebarActiveTab(), c = m(() => {
+  const o = () => e.activeId ? e.activeId() : i.sidebarActiveTab(), u = m(() => {
     if (!r) return [];
     const s = e.include ?? y;
     return r.sidebarItems().filter((t) => s(t)).map((t) => ({
@@ -27,10 +27,10 @@ function A(e) {
         }
       })
     }));
-  }), u = () => e.views ?? c();
+  }), c = () => e.views ?? u();
   return n(f, {
     get views() {
-      return u();
+      return c();
     },
     get activeId() {
       return o();

package/dist/components/launchpad/LaunchpadModal.d.ts

@@ -0,0 +1,28 @@
+import { type JSX } from 'solid-js';
+import { type LaunchpadItemData } from './Launchpad';
+export interface LaunchpadModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    items: LaunchpadItemData[];
+    additionalItems?: LaunchpadItemData[];
+    itemsPerPage?: number;
+    columns?: number;
+    showSearch?: boolean;
+    class?: string;
+    style?: JSX.CSSProperties;
+    /** Called after the modal reacts (closes first when closeOnSelect is enabled). */
+    onSelect?: (item: LaunchpadItemData) => void;
+    /**
+     * Whether to close the modal when an item is selected (default: true).
+     * Use a function for per-item control.
+     */
+    closeOnSelect?: boolean | ((item: LaunchpadItemData) => boolean);
+}
+/**
+ * Modal wrapper for Launchpad.
+ *
+ * Guarantees "mask semantics":
+ * - Wheel keeps Launchpad pagination working but prevents background scroll.
+ * - Escape closes the modal and does not leak to underlying global shortcuts.
+ */
+export declare function LaunchpadModal(props: LaunchpadModalProps): JSX.Element;

package/dist/components/launchpad/LaunchpadModal.js

@@ -0,0 +1,113 @@
+import { createComponent as f, Portal as P, insert as T, template as D, use as M } from "solid-js/web";
+import { createMemo as s, createEffect as x, onCleanup as B, Show as I } from "solid-js";
+import { lockBodyStyle as O } from "../../utils/bodyStyleLock.js";
+import { deferNonBlocking as A } from "../../utils/defer.js";
+import { Launchpad as F } from "./Launchpad.js";
+var H = /* @__PURE__ */ D("<div role=dialog aria-modal=true tabindex=-1>");
+function y(n) {
+  const c = ["a[href]", "button:not([disabled])", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", '[tabindex]:not([tabindex="-1"])', '[contenteditable="true"]'].join(",");
+  return Array.from(n.querySelectorAll(c)).filter((u) => u instanceof HTMLElement);
+}
+function N(n) {
+  let c;
+  const u = s(() => n.onOpenChange), w = s(() => n.onSelect), i = () => u()(!1), L = s(() => n.items.map((t) => ({
+    ...t,
+    onClick: void 0
+  }))), k = s(() => n.additionalItems?.map((t) => ({
+    ...t,
+    onClick: void 0
+  }))), C = (t) => {
+    const o = n.closeOnSelect;
+    return typeof o == "function" ? o(t) : o !== !1;
+  }, S = (t) => {
+    C(t) && i();
+    const o = w();
+    o && A(() => o(t));
+  };
+  return x(() => {
+    if (!n.open || typeof document > "u") return;
+    const t = document.activeElement instanceof HTMLElement ? document.activeElement : null, o = O({
+      overflow: "hidden"
+    });
+    setTimeout(() => {
+      const e = c;
+      if (!e) return;
+      const r = e.querySelector(".launchpad-search input");
+      if (r) {
+        r.focus();
+        return;
+      }
+      (y(e)[0] ?? e).focus();
+    }, 0);
+    const m = (e) => {
+      if (e.key !== "Tab") return;
+      const r = c;
+      if (!r) return;
+      const a = y(r);
+      if (!a.length) {
+        e.preventDefault(), r.focus();
+        return;
+      }
+      const d = a[0], b = a[a.length - 1], l = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      e.shiftKey ? (l === d || !l || !r.contains(l)) && (e.preventDefault(), b.focus()) : l === b && (e.preventDefault(), d.focus());
+    }, v = (e) => {
+      e.key === "Escape" && (e.preventDefault(), e.stopImmediatePropagation(), i());
+    }, h = (e) => {
+      e.stopPropagation();
+    }, p = (e) => {
+      e.cancelable && e.preventDefault();
+    }, g = (e) => {
+      e.stopPropagation();
+    }, E = (e) => {
+      e.cancelable && e.preventDefault();
+    };
+    document.addEventListener("keydown", m, !0), window.addEventListener("keydown", v, !0), document.addEventListener("keydown", h), document.addEventListener("wheel", p, {
+      capture: !0,
+      passive: !1
+    }), document.addEventListener("wheel", g), document.addEventListener("touchmove", E, {
+      capture: !0,
+      passive: !1
+    }), B(() => {
+      document.removeEventListener("keydown", m, !0), window.removeEventListener("keydown", v, !0), document.removeEventListener("keydown", h), document.removeEventListener("wheel", p, !0), document.removeEventListener("wheel", g), document.removeEventListener("touchmove", E, !0), o(), t?.focus();
+    });
+  }), f(I, {
+    get when() {
+      return n.open;
+    },
+    get children() {
+      return f(P, {
+        get children() {
+          var t = H(), o = c;
+          return typeof o == "function" ? M(o, t) : c = t, T(t, f(F, {
+            get items() {
+              return L();
+            },
+            get additionalItems() {
+              return k();
+            },
+            get itemsPerPage() {
+              return n.itemsPerPage;
+            },
+            get columns() {
+              return n.columns;
+            },
+            get showSearch() {
+              return n.showSearch;
+            },
+            get class() {
+              return n.class;
+            },
+            get style() {
+              return n.style;
+            },
+            onItemClick: S,
+            onClose: i
+          })), t;
+        }
+      });
+    }
+  });
+}
+export {
+  N as LaunchpadModal
+};

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

@@ -1,5 +1,7 @@
 export { Launchpad } from './Launchpad';
 export type { LaunchpadProps, LaunchpadItemData } from './Launchpad';
+export { LaunchpadModal } from './LaunchpadModal';
+export type { LaunchpadModalProps } from './LaunchpadModal';
 export { LaunchpadItem } from './LaunchpadItem';
 export type { LaunchpadItemProps } from './LaunchpadItem';
 export { LaunchpadGrid } from './LaunchpadGrid';

package/dist/components/layout/Shell.js

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

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

@@ -5,6 +5,12 @@ export interface ResolveMobileTabActiveIdArgs {
     mobileSidebarOpen: boolean;
     /** Whether the active component is marked as fullScreen. */
     activeIsFullScreen: boolean;
+    /**
+     * Whether the active tab should be treated as a page, even if it isn't fullScreen.
+     *
+     * This is useful for "main view + sidebar panel" tabs.
+     */
+    activeIsPage?: boolean;
 }
 /**
  * Determine which tab should appear active in the mobile tab bar.

package/dist/components/layout/mobileTabs.js

@@ -1,5 +1,5 @@
 function i(e) {
-  return e.activeIsFullScreen || e.mobileSidebarOpen ? e.activeId : "";
+  return e.activeIsFullScreen || e.activeIsPage || e.mobileSidebarOpen ? e.activeId : "";
 }
 function t(e) {
   return e.clickedIsFullScreen ? { nextActiveId: e.clickedId, nextMobileSidebarOpen: !1 } : e.clickedId === e.activeId && e.mobileSidebarOpen ? { nextActiveId: e.clickedId, nextMobileSidebarOpen: !1 } : { nextActiveId: e.clickedId, nextMobileSidebarOpen: !0 };

package/dist/context/ComponentRegistry.d.ts

@@ -56,6 +56,15 @@ export interface FloeComponent<TProtocol = unknown> {
     sidebar?: {
         order?: number;
         badge?: () => number | string | undefined;
+        /**
+         * Where this component should render when active.
+         *
+         * - `sidebar` (default): render inside Shell's sidebar panel.
+         * - `main`: render in the main content area (typically via ActivityAppsMain).
+         *
+         * Note: `fullScreen: true` implies `renderIn: 'main'` and also hides the sidebar.
+         */
+        renderIn?: 'sidebar' | 'main';
         /** When true, this component uses the full content area without sidebar */
         fullScreen?: boolean;
         /** When true, this component is hidden in the activity bar on mobile */