@floegence/floe-webapp-core 0.71.0 → 0.73.0

package/dist/components/layout/Shell.js

@@ -1,119 +1,124 @@
-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 { createComponent as a, Dynamic as L, insert as d, memo as x, effect as $, className as y, setAttribute as z, setStyleProperty as U, template as M, use as ce, delegateEvents as be } from "solid-js/web";
+import { createSignal as F, onMount as ue, onCleanup as me, batch as fe, createEffect as w, createMemo as I, For as H, Show as g } from "solid-js";
+import { observeViewport as ve } from "../../viewport.js";
+import { useLayout as he } from "../../context/LayoutContext.js";
+import { useResolvedFloeConfig as ge } from "../../context/FloeConfigContext.js";
+import { useMediaQuery as Se } from "../../hooks/useMediaQuery.js";
+import { useOverlayMask as ye } from "../../hooks/useOverlayMask.js";
 import { cn as C } from "../../utils/cn.js";
-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), [E, R] = Q(null);
-  let F;
+import { deferAfterPaint as Ce, deferNonBlocking as we } from "../../utils/defer.js";
+import { useComponentRegistry as Ie } from "../../context/ComponentRegistry.js";
+import { Sidebar as Me } from "./Sidebar.js";
+import { TopBar as Ae } from "./TopBar.js";
+import { TopBarIconButton as Be } from "./TopBarIconButton.js";
+import { BottomBar as ke } from "./BottomBar.js";
+import { MobileTabBar as xe } from "./MobileTabBar.js";
+import { ActivityBar as Te } from "./ActivityBar.js";
+import { ResizeHandle as j } from "./ResizeHandle.js";
+import { resolveMobileTabActiveId as Oe, resolveMobileTabSelect as Ne } from "./mobileTabs.js";
+import { KeepAliveStack as pe } from "./KeepAliveStack.js";
+import { resolveShellSidebarActiveTabChange as Le } from "./sidebarVisibilityMotion.js";
+import { createUIFirstSelection as $e } from "../../utils/uiFirstSelection.js";
+var G = /* @__PURE__ */ M('<div class="flex items-center gap-2">'), ze = /* @__PURE__ */ M("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), Pe = /* @__PURE__ */ M('<div data-floe-shell-slot=mobile-sidebar-drawer tabindex=-1 role=dialog aria-modal=true><div class="h-full overflow-auto overscroll-contain">'), Re = /* @__PURE__ */ M("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), We = /* @__PURE__ */ M('<div data-floe-shell-slot=mobile-accessory class="relative shrink-0">'), Fe = /* @__PURE__ */ M('<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 at(r) {
+  const [J, X] = F(!1);
+  ue(() => {
+    me(ve(window, (e) => X(e.keyboardOpen)));
+  });
+  const i = he(), V = ge(), c = Se(V.config.layout.mobileQuery), [T, S] = F(!1), [E, P] = F(null);
+  let R;
   const b = () => r.sidebarMode === "hidden", s = (() => {
     try {
-      return ge();
+      return Ie();
     } catch {
       return null;
     }
-  })(), T = (e, o) => {
+  })(), O = (e, o) => {
     const l = s?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
       openSidebar: n,
       visibilityMotion: u
-    } = ke({
+    } = Le({
       currentActiveId: i.sidebarActiveTab(),
       nextActiveId: e,
       requestedOpenSidebar: o?.openSidebar,
       sidebarHidden: b(),
       nextActiveFullScreen: l,
-      isMobile: d(),
+      isMobile: c(),
       resolveSidebarVisibilityMotion: r.resolveSidebarVisibilityMotion
     });
     i.setSidebarActiveTab(e, {
       openSidebar: n,
       visibilityMotion: u
     });
-  }, p = xe({
+  }, N = $e({
     committed: i.sidebarActiveTab,
     commit: (e, o) => {
-      de(() => {
-        T(e, o?.opts), typeof o?.mobileSidebarOpen == "boolean" && h(o.mobileSidebarOpen);
+      fe(() => {
+        O(e, o?.opts), typeof o?.mobileSidebarOpen == "boolean" && S(o.mobileSidebarOpen);
       });
     },
     onEvent: (e) => r.onActivitySelectionEvent?.(e)
-  }), N = () => r.activitySelectionMode === "ui-first" ? p.visual() : i.sidebarActiveTab(), j = (e, o) => {
+  }), p = () => r.activitySelectionMode === "ui-first" ? N.visual() : i.sidebarActiveTab(), Y = (e, o) => {
     if (r.activitySelectionMode === "ui-first") {
-      p.request(e, {
+      N.request(e, {
         source: "activity-bar",
         opts: o
       });
       return;
     }
-    T(e, o);
+    O(e, o);
   };
-  I(() => {
-    b() && h(!1);
-  }), I(() => {
-    const e = d();
+  w(() => {
+    b() && S(!1);
+  }), w(() => {
+    const e = c();
     i.isMobile() !== e && i.setIsMobile(e);
-  }), I(() => {
-    d() || h(!1);
-  }), I(() => {
+  }), w(() => {
+    c() || S(!1);
+  }), w(() => {
     const e = i.sidebarVisibilityMotion(), o = i.sidebarVisibilityMotionRevision();
-    e === "instant" && fe(() => i.clearSidebarVisibilityMotion(o));
+    e === "instant" && Ce(() => i.clearSidebarVisibilityMotion(o));
   });
-  const w = M(() => r.activityItems ? r.activityItems : s ? s.sidebarItems().filter((e) => !!e.icon).filter((e) => !(d() && e.sidebar?.hiddenOnMobile)).map((e) => ({
+  const A = I(() => r.activityItems ? r.activityItems : s ? s.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,
     collapseBehavior: e.sidebar?.collapseBehavior ?? (e.sidebar?.fullScreen ? "preserve" : "toggle")
-  })) : []), 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) => ({
+  })) : []), Z = I(() => b() ? [] : r.sidebarContent ? [] : s ? s.sidebarItems().filter((e) => !(c() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
     id: e.id,
     render: () => a(L, {
       get component() {
         return e.component;
       }
     })
-  })) : []), V = (e) => {
+  })) : []), _ = (e) => {
     if (!b()) {
       if (r.sidebarContent) return r.sidebarContent(e);
       if (s)
-        return a(Ae, {
+        return a(pe, {
           get views() {
-            return G();
+            return Z();
           },
           activeId: e
         });
     }
-  }, P = M(() => b() ? !0 : s ? s.getComponent(i.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), J = M(() => {
+  }, W = I(() => b() ? !0 : s ? s.getComponent(i.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), ee = I(() => {
     if (b()) return !0;
     if (!s) return !1;
     const e = s.getComponent(i.sidebarActiveTab());
     return e?.sidebar ? e.sidebar.fullScreen === !0 || e.sidebar.renderIn === "main" : !1;
   });
-  I(() => {
-    d() && P() && h(!1);
+  w(() => {
+    c() && W() && S(!1);
   });
-  const X = M(() => {
+  const te = I(() => {
     if (r.bottomBarItems) return r.bottomBarItems;
     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 = U();
-      return c(n, a(W, {
+      var n = G();
+      return d(n, a(H, {
         each: o,
         children: (u) => a(L, {
           get component() {
@@ -122,8 +127,8 @@ function Ye(r) {
         })
       })), n;
     })(), (() => {
-      var n = U();
-      return c(n, a(W, {
+      var n = G();
+      return d(n, a(H, {
         each: l,
         children: (u) => a(L, {
           get component() {
@@ -133,53 +138,53 @@ function Ye(r) {
       })), n;
     })()];
   });
-  I(() => {
-    const e = w();
+  w(() => {
+    const e = A();
     if (!e.length) return;
     if (!i.sidebarActiveTab()) {
       const l = e.find((n) => !n.onClick);
       if (!l) return;
-      T(l.id);
+      O(l.id);
     }
   });
-  const _ = (e) => {
+  const q = (e) => {
     const o = b() ? !0 : s?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
       nextActiveId: l,
       nextMobileSidebarOpen: n
-    } = Be({
+    } = Ne({
       clickedId: e,
       activeId: i.sidebarActiveTab(),
-      mobileSidebarOpen: x(),
+      mobileSidebarOpen: T(),
       clickedIsFullScreen: o
     });
     if (i.sidebarActiveTab() !== l) {
       if (r.activitySelectionMode === "ui-first") {
-        p.request(l, {
+        N.request(l, {
           source: "mobile-tab-bar",
           mobileSidebarOpen: n
         });
         return;
       }
-      T(l);
+      O(l);
     }
-    h(n);
-  }, Y = (e) => {
+    S(n);
+  }, re = (e) => {
     if (e.onClick) {
-      ve(() => e.onClick());
+      we(() => e.onClick());
       return;
     }
-    _(e.id);
-  }, Z = M(() => {
+    q(e.id);
+  }, ie = I(() => {
     const e = r.topBarActions;
-    if (!d() || (r.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
+    if (!c() || (r.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
     const l = r.activityBottomItems ?? [];
-    return l.length ? [a(W, {
+    return l.length ? [a(H, {
       each: l,
-      children: (n) => a(ye, {
+      children: (n) => a(Be, {
         get label() {
           return n.label;
         },
-        onClick: () => Y(n),
+        onClick: () => re(n),
         get children() {
           return a(L, {
             get component() {
@@ -190,18 +195,18 @@ function Ye(r) {
         }
       })
     }), e] : e;
-  }), ee = () => b() ? !0 : i.sidebarCollapsed(), te = () => E() ?? i.sidebarWidth(), v = () => H.config.accessibility, re = () => {
-    R(i.sidebarWidth());
-  }, ie = (e) => {
-    R((o) => i.clampSidebarWidth((o ?? i.sidebarWidth()) + e));
-  }, ne = () => {
+  }), ne = () => b() ? !0 : i.sidebarCollapsed(), oe = () => E() ?? i.sidebarWidth(), v = () => V.config.accessibility, ae = () => {
+    P(i.sidebarWidth());
+  }, le = (e) => {
+    P((o) => i.clampSidebarWidth((o ?? i.sidebarWidth()) + e));
+  }, se = () => {
     const e = E();
-    e !== null && (i.setSidebarWidth(e), R(null));
+    e !== null && (i.setSidebarWidth(e), P(null));
   };
-  me({
-    open: () => d() && x() && !b(),
-    root: () => F,
-    onClose: () => h(!1),
+  ye({
+    open: () => c() && T() && !b(),
+    root: () => R,
+    onClose: () => S(!1),
     lockBodyScroll: !0,
     trapFocus: !0,
     closeOnEscape: !0,
@@ -211,7 +216,7 @@ function Ye(r) {
     autoFocus: !1,
     restoreFocus: !0
   });
-  const oe = () => {
+  const de = () => {
     if (typeof document > "u") return;
     const e = document.getElementById(v().mainContentId);
     if (!(!e || !(e instanceof HTMLElement)))
@@ -221,13 +226,13 @@ function Ye(r) {
       }
   };
   return (() => {
-    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, {
+    var e = Fe(), o = e.firstChild, l = o.nextSibling, n = l.firstChild, u = n.firstChild;
+    return o.$$click = () => de(), d(o, () => v().skipLinkLabel), d(e, a(Ae, {
       get logo() {
         return r.logo;
       },
       get actions() {
-        return Z();
+        return ie();
       },
       get ariaLabel() {
         return v().topBarLabel;
@@ -235,32 +240,32 @@ function Ye(r) {
       get class() {
         return r.slotClassNames?.topBar;
       }
-    }), l), c(l, a(y, {
+    }), l), d(l, a(g, {
       get when() {
-        return !d();
+        return !c();
       },
       get children() {
-        return [a(y, {
+        return [a(g, {
           get when() {
-            return w().length > 0;
+            return A().length > 0;
           },
           get children() {
-            return a(Me, {
+            return a(Te, {
               get items() {
-                return w();
+                return A();
               },
               get bottomItems() {
                 return r.activityBottomItems;
               },
               get activeId() {
-                return N();
+                return p();
               },
-              onActiveChange: j,
+              onActiveChange: Y,
               get collapsed() {
-                return ee();
+                return ne();
               },
               get onCollapsedChange() {
-                return O(() => !!b())() ? void 0 : i.setSidebarCollapsed;
+                return x(() => !!b())() ? void 0 : i.setSidebarCollapsed;
               },
               get ariaLabel() {
                 return v().primaryNavigationLabel;
@@ -270,17 +275,17 @@ function Ye(r) {
               }
             });
           }
-        }), a(y, {
+        }), a(g, {
           get when() {
             return !b();
           },
           get children() {
-            return a(he, {
+            return a(Me, {
               get width() {
-                return te();
+                return oe();
               },
               get collapsed() {
-                return i.sidebarCollapsed() || P();
+                return i.sidebarCollapsed() || W();
               },
               get visibilityMotion() {
                 return i.sidebarVisibilityMotion();
@@ -289,65 +294,73 @@ function Ye(r) {
                 return v().sidebarLabel;
               },
               get resizer() {
-                return a(K, {
+                return a(j, {
                   direction: "horizontal",
-                  onResize: ie,
-                  onResizeStart: re,
-                  onResizeEnd: ne
+                  onResize: le,
+                  onResizeStart: ae,
+                  onResizeEnd: se
                 });
               },
               get class() {
                 return r.slotClassNames?.sidebar;
               },
               get children() {
-                return V(i.sidebarActiveTab());
+                return _(i.sidebarActiveTab());
               }
             });
           }
         })];
       }
-    }), n), c(l, a(y, {
+    }), n), d(l, a(g, {
       get when() {
-        return O(() => !!(d() && x()))() && !b();
+        return x(() => !!(c() && T()))() && !b();
       },
       get children() {
         return [(() => {
-          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 = ze();
+          return t.$$click = () => S(!1), $(() => y(t, C("absolute inset-0 z-40 bg-black/30 cursor-pointer", r.slotClassNames?.mobileSidebarBackdrop))), t;
         })(), (() => {
-          var t = pe(), m = t.firstChild, g = F;
-          return typeof g == "function" ? le(g, t) : F = t, c(m, () => V(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;
+          var t = Pe(), m = t.firstChild, h = R;
+          return typeof h == "function" ? ce(h, t) : R = t, d(m, () => _(i.sidebarActiveTab())), $((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), k = v().sidebarLabel;
+            return B !== f.e && y(t, f.e = B), k !== f.t && z(t, "aria-label", f.t = k), f;
           }, {
             e: void 0,
             t: void 0
           }), t;
         })()];
       }
-    }), n), c(u, () => r.children), c(n, a(y, {
+    }), n), d(u, () => r.children), d(n, a(g, {
       get when() {
-        return O(() => !!(!d() && i.terminalOpened()))() && r.terminalPanel;
+        return x(() => !!(!c() && i.terminalOpened()))() && r.terminalPanel;
       },
       get children() {
-        var t = Ne();
-        return c(t, a(K, {
+        var t = Re();
+        return d(t, a(j, {
           direction: "vertical",
           onResize: (m) => i.setTerminalHeight(i.terminalHeight() - 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 && S(t, m.e = g), f !== m.t && ae(t, "height", m.t = f), m;
+        }), null), d(t, () => r.terminalPanel, null), $((m) => {
+          var h = C("relative shrink-0 border-t border-border bg-terminal-background overflow-hidden", r.slotClassNames?.terminalPanel), f = `${i.terminalHeight()}px`;
+          return h !== m.e && y(t, m.e = h), f !== m.t && U(t, "height", m.t = f), m;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
-    }), null), c(e, a(y, {
+    }), null), d(e, a(g, {
+      get when() {
+        return x(() => !!c())() && r.mobileAccessory;
+      },
+      get children() {
+        var t = We();
+        return d(t, () => r.mobileAccessory), t;
+      }
+    }), null), d(e, a(g, {
       get when() {
-        return !d();
+        return !c();
       },
       get children() {
-        return a(Ce, {
+        return a(ke, {
           get class() {
             return r.slotClassNames?.bottomBar;
           },
@@ -355,31 +368,34 @@ function Ye(r) {
             return r.slotClassNames?.bottomBarHeight;
           },
           get children() {
-            return X();
+            return te();
           }
         });
       }
-    }), null), c(e, a(y, {
+    }), null), d(e, a(g, {
       get when() {
-        return O(() => !!d())() && w().length > 0;
+        return x(() => !!c())() && A().length > 0;
       },
       get children() {
-        return a(Ie, {
+        return a(xe, {
+          get hidden() {
+            return !!(r.hideMobileNavigationWhenKeyboardOpen && J());
+          },
           get items() {
-            return w();
+            return A();
           },
           get activeId() {
-            return we({
-              activeId: N(),
-              mobileSidebarOpen: p.pending() ? !0 : x(),
-              activeIsFullScreen: s?.getComponent(N())?.sidebar?.fullScreen ?? P(),
+            return Oe({
+              activeId: p(),
+              mobileSidebarOpen: N.pending() ? !0 : T(),
+              activeIsFullScreen: s?.getComponent(p())?.sidebar?.fullScreen ?? W(),
               activeIsPage: (() => {
-                const t = s?.getComponent(N())?.sidebar;
-                return t ? t.fullScreen === !0 || t.renderIn === "main" : J();
+                const t = s?.getComponent(p())?.sidebar;
+                return t ? t.fullScreen === !0 || t.renderIn === "main" : ee();
               })()
             });
           },
-          onSelect: _,
+          onSelect: q,
           get ariaLabel() {
             return v().mobileNavigationLabel;
           },
@@ -388,8 +404,8 @@ function Ye(r) {
           }
         });
       }
-    }), null), z((t) => {
-      var m = C(
+    }), null), $((t) => {
+      var m = r.fillParent ? "100%" : void 0, h = C(
         // 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",
@@ -397,8 +413,8 @@ function Ye(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"), 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;
+      ), f = `#${v().mainContentId}`, B = 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"), k = C("flex-1 min-w-0 flex flex-col overflow-hidden", r.slotClassNames?.contentArea), D = C("flex-1 min-h-0 overflow-auto overscroll-contain", r.slotClassNames?.main), K = v().mainContentId, Q = v().mainLabel;
+      return m !== t.e && U(e, "height", t.e = m), h !== t.t && y(e, t.t = h), f !== t.a && z(o, "href", t.a = f), B !== t.o && y(o, t.o = B), k !== t.i && y(n, t.i = k), D !== t.n && y(u, t.n = D), K !== t.s && z(u, "id", t.s = K), Q !== t.h && z(u, "aria-label", t.h = Q), t;
     }, {
       e: void 0,
       t: void 0,
@@ -406,11 +422,12 @@ function Ye(r) {
       o: void 0,
       i: void 0,
       n: void 0,
-      s: void 0
+      s: void 0,
+      h: void 0
     }), e;
   })();
 }
-se(["click"]);
+be(["click"]);
 export {
-  Ye as Shell
+  at as Shell
 };

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

@@ -13,3 +13,4 @@ export { Panel, PanelHeader, PanelContent, type PanelProps, type PanelHeaderProp
 export { KeepAliveStack, type KeepAliveStackProps, type KeepAliveView } from './KeepAliveStack';
 export { DisplayModeSwitcher, sanitizeDisplayMode, type DisplayMode, type DisplayModeSwitcherProps, } from './DisplayModeSwitcher';
 export { DisplayModePageShell, type DisplayModePageShellProps } from './DisplayModePageShell';
+export { AppViewport, type AppViewportProps } from './AppViewport';

package/dist/components/ui/Dialog.d.ts

@@ -16,8 +16,8 @@ export interface DialogProps {
     children: JSX.Element;
     footer?: JSX.Element;
     class?: string;
-    /** Bottom drawers retain the same modal and surface-placement contract. */
-    presentation?: 'dialog' | 'bottom-drawer';
+    /** Drawers retain the same modal, visible-viewport and surface-placement contract. */
+    presentation?: 'dialog' | 'bottom-drawer' | 'side-drawer';
     /** Undefined uses the default header; null leaves only the accessible title. */
     header?: JSX.Element;
     contentClass?: string;