@broberg/app-shell 0.1.1 → 0.2.1

package/dist/preact.d.ts

@@ -10,6 +10,12 @@ interface NavItem<Icon = unknown> {
     icon?: Icon;
     /** A count shown on the item (99+ above 99). 0/undefined shows nothing. */
     badge?: number;
+    /**
+     * Sub-items, ONE level (F092.5). An item with children is a toggle that opens
+     * and closes them, not a link; its own `href` is used only to decide whether
+     * it is on the current path.
+     */
+    children?: NavItem<Icon>[];
 }
 interface NavGroup<Icon = unknown> {
     label: string;
@@ -26,6 +32,12 @@ declare function isActivePath(href: string, currentPath: string): boolean;
  * http(s) URL is followed; anything else returns null and the row just closes.
  */
 declare function safeNavigate(target: string | null | undefined): string | null;
+/**
+ * The label of the nav item the user is on, for the content header (F092.4).
+ * Sub-items count, and the most specific match wins: on "/models/genesis" a
+ * "Genesis" child beats its "Models" parent.
+ */
+declare function activeNavLabel<Icon>(groups: NavGroup<Icon>[], footer: NavItem<Icon>[] | undefined, currentPath: string): string | undefined;
 /** "99+" above 99, nothing for 0 or less. */
 declare function badgeLabel(n: number | undefined): string | null;
 /** Read a boolean flag from localStorage; storage errors read as `fallback`. */
@@ -86,6 +98,8 @@ declare function relativeTime(ts: string | number, lang: "da" | "en", now?: numb
 declare const TEXT: {
     readonly da: {
         readonly openMenu: "Åbn menu";
+        readonly closeMenu: "Luk menu";
+        readonly home: "Forside";
         readonly collapse: "Skjul sidemenu";
         readonly expand: "Vis sidemenu";
         readonly notifications: "Notifikationer";
@@ -110,6 +124,8 @@ declare const TEXT: {
     };
     readonly en: {
         readonly openMenu: "Open menu";
+        readonly closeMenu: "Close menu";
+        readonly home: "Home";
         readonly collapse: "Hide sidebar";
         readonly expand: "Show sidebar";
         readonly notifications: "Notifications";
@@ -149,9 +165,20 @@ interface SidebarProps {
     footer?: PreactNavItem[];
     currentPath: string;
     onNavigate?: Navigate;
-    /** Desktop: collapsed to nothing (drawer mode) or to the icon rail (rail mode). */
+    /** Desktop: is the sidebar folded (to nothing, or to the icon rail — see `collapse`). */
     collapsed?: boolean;
-    onToggleCollapse?: () => void;
+    /**
+     * F092.6 — what "folded" means on desktop, as shadcn's `collapsible`:
+     * "offcanvas" hides the sidebar, "icon" keeps a 48px rail of item icons with
+     * `brandMark` on top. Default: "icon" when `mobile` is "rail", else "offcanvas".
+     */
+    collapse?: "offcanvas" | "icon";
+    /** The app's logo icon, shown at the top of the icon rail. */
+    brandMark?: ComponentChildren;
+    /** F092.7 — the app's start page: `header` and `brandMark` become links to it. */
+    homeHref?: string;
+    /** Accessible name of the brandMark link (it has no visible text). Default "Forside"/"Home". */
+    homeLabel?: string;
     /** Phone, drawer mode: is the drawer open. */
     mobileOpen?: boolean;
     onClose?: () => void;
@@ -160,6 +187,8 @@ interface SidebarProps {
     header?: ComponentChildren;
     /** localStorage key for which groups are folded. */
     groupsKey?: string;
+    /** localStorage key for which items with children are open (F092.5). */
+    itemsKey?: string;
     lang: Lang;
 }
 declare function Sidebar(p: SidebarProps): JSX.Element;
@@ -201,6 +230,10 @@ declare function Avatar({ user, size }: {
 }): JSX.Element;
 declare function UserMenu(p: UserMenuProps): JSX.Element;
 interface TopBarProps {
+    /** F092.7 — when set, the brand is a link to the app's start page. */
+    homeHref?: string;
+    /** Called after the brand link was followed (AppShell closes the drawer). */
+    onHome?: () => void;
     brand?: ComponentChildren;
     /** Anything app-specific (project switcher, search) between brand and bell. */
     actions?: ComponentChildren;
@@ -214,9 +247,14 @@ interface TopBarProps {
 }
 /** Brand left, actions, then the notification bell and the user menu ALWAYS last, in that order. */
 declare function TopBar(p: TopBarProps): JSX.Element;
+/**
+ * Optional `title` (0.2.1): inside AppShell the page title already sits in the
+ * content header, so a page can use PageHeader for its description and actions
+ * alone — no second, and no empty, <h1>.
+ */
 declare function PageHeader(p: {
     eyebrow?: ComponentChildren;
-    title: ComponentChildren;
+    title?: ComponentChildren;
     description?: ComponentChildren;
     actions?: ComponentChildren;
 }): JSX.Element;
@@ -247,9 +285,25 @@ interface AppShellProps {
     notifications?: NotificationSource;
     user?: ShellUser;
     userMenu?: Omit<UserMenuProps, "user" | "lang" | "onNavigate">;
-    /** Phone behaviour: a slide-in drawer behind a hamburger, or a 60px icon rail. */
+    /** Phone behaviour: a slide-in drawer, or a 60px icon rail. */
     mobile?: "drawer" | "rail";
-    /** localStorage key prefix for the collapsed sidebar and folded groups. */
+    /**
+     * F092.6 — desktop fold: "offcanvas" hides the sidebar, "icon" keeps a 48px
+     * icon rail with `brandMark` on top. Default: "icon" when `mobile` is "rail".
+     */
+    collapse?: "offcanvas" | "icon";
+    /** The app's logo icon for the top of the icon rail. */
+    brandMark?: ComponentChildren;
+    /** F092.7 — the app's start page. Brand and brandMark become links to it; on a phone the click closes the drawer. */
+    homeHref?: string;
+    /** Accessible name for the brandMark link. Default "Forside"/"Home". */
+    homeLabel?: string;
+    /**
+     * F092.4 — the page title in the content header, after the sidebar button.
+     * Absent: the label of the active nav item (a sub-item wins over its parent).
+     */
+    title?: ComponentChildren;
+    /** localStorage key prefix for the folded sidebar, folded groups and open items. */
     storageKey?: string;
     /** Required: the shell ships no default language (see @broberg/notifications/shell). */
     lang: Lang;
@@ -257,4 +311,4 @@ interface AppShellProps {
 }
 declare function AppShell(p: AppShellProps): JSX.Element;
 
-export { AppShell, type AppShellProps, Avatar, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, badgeLabel, createFetchNotificationSource, createMemoryNotificationSource, initials, isActivePath, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AppShell, type AppShellProps, Avatar, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, activeNavLabel, badgeLabel, createFetchNotificationSource, createMemoryNotificationSource, initials, isActivePath, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.js

@@ -23,6 +23,19 @@ function safeNavigate(target) {
     return null;
   }
 }
+function activeNavLabel(groups, footer, currentPath) {
+  let best;
+  const visit = (it) => {
+    if (it.href && isActivePath(it.href, currentPath)) {
+      const len = it.href.length;
+      if (!best || len > best.len) best = { label: it.label, len };
+    }
+    it.children?.forEach(visit);
+  };
+  for (const g of groups) g.items.forEach(visit);
+  footer?.forEach(visit);
+  return best?.label;
+}
 function badgeLabel(n) {
   if (!n || n <= 0) return null;
   return n > 99 ? "99+" : String(n);
@@ -157,6 +170,8 @@ function relativeTime(ts, lang, now = Date.now()) {
 var TEXT = {
   da: {
     openMenu: "\xC5bn menu",
+    closeMenu: "Luk menu",
+    home: "Forside",
     collapse: "Skjul sidemenu",
     expand: "Vis sidemenu",
     notifications: "Notifikationer",
@@ -181,6 +196,8 @@ var TEXT = {
   },
   en: {
     openMenu: "Open menu",
+    closeMenu: "Close menu",
+    home: "Home",
     collapse: "Hide sidebar",
     expand: "Show sidebar",
     notifications: "Notifications",
@@ -238,8 +255,10 @@ function NavLink(props) {
 var svg = (d, size = 18) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", stroke: "currentColor", "stroke-width": "1.9", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: d });
 var IconMenu = () => svg(/* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" }), 20);
 var IconChevron = ({ open }) => /* @__PURE__ */ jsx("span", { class: "bas-chev" + (open ? " is-open" : ""), children: svg(/* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }), 12) });
-var IconCollapse = () => svg(/* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }), 15);
-var IconExpand = () => svg(/* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }), 15);
+var IconPanelLeft = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 3v18" })
+] }), 16);
 var IconBell = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
   /* @__PURE__ */ jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
@@ -254,8 +273,12 @@ var IconUser = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx("path", { d: "M4 21a8 8 0 0 1 16 0" })
 ] }), 14);
 function Sidebar(p) {
-  const t = TEXT[p.lang];
   const key = p.groupsKey ?? "broberg-app-shell.groups";
+  const itemsKey = p.itemsKey ?? "broberg-app-shell.items";
+  const mode = p.mobile ?? "drawer";
+  const collapseMode = p.collapse ?? (mode === "rail" ? "icon" : "offcanvas");
+  const isMobile = useIsMobile();
+  const railed = isMobile ? mode === "rail" : !!p.collapsed && collapseMode === "icon";
   const [folded, setFolded] = useState(() => readSet(key));
   const toggleGroup = (label) => {
     const next = new Set(folded);
@@ -263,9 +286,47 @@ function Sidebar(p) {
     setFolded(next);
     writeSet(key, next);
   };
-  const mode = p.mobile ?? "drawer";
-  const close = () => p.onClose?.();
-  const item = (it) => {
+  const all = [...p.groups.flatMap((g) => g.items), ...p.footer ?? []];
+  const childActive = (it) => !!it.children?.some((c) => isActivePath(c.href, p.currentPath));
+  const [openItems, setOpenItems] = useState(() => {
+    const s = readSet(itemsKey);
+    for (const it of all) if (childActive(it)) s.add(it.id);
+    return s;
+  });
+  const toggleItem = (id) => {
+    const next = new Set(openItems);
+    next.has(id) ? next.delete(id) : next.add(id);
+    setOpenItems(next);
+    writeSet(itemsKey, next);
+  };
+  const [flyout, setFlyout] = useState(null);
+  const flyoutRef = useRef(null);
+  useEffect(() => {
+    if (!flyout) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setFlyout(null);
+    };
+    const onDown = (e) => {
+      const t = e.target;
+      if (flyoutRef.current && t && flyoutRef.current.contains(t)) return;
+      if (t instanceof Element && t.closest(`[data-flyout-for="${flyout.id}"]`)) return;
+      setFlyout(null);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onDown);
+    };
+  }, [flyout]);
+  useEffect(() => {
+    if (!railed) setFlyout(null);
+  }, [railed]);
+  const close = () => {
+    setFlyout(null);
+    p.onClose?.();
+  };
+  const leaf = (it, sub = false) => {
     const active = isActivePath(it.href, p.currentPath);
     const badge = badgeLabel(it.badge);
     return /* @__PURE__ */ jsxs(
@@ -274,12 +335,13 @@ function Sidebar(p) {
         href: it.href,
         onNavigate: p.onNavigate,
         onAfter: close,
-        class: "bas-item" + (active ? " is-active" : ""),
+        class: "bas-item" + (sub ? " bas-item--sub" : "") + (active ? " is-active" : ""),
         "data-testid": `sidebar-item-${it.id}`,
         "aria-current": active ? "page" : void 0,
+        "aria-label": railed && !sub ? it.label : void 0,
         title: it.label,
         children: [
-          active ? /* @__PURE__ */ jsx("span", { class: "bas-item__bar" }) : null,
+          active && !sub ? /* @__PURE__ */ jsx("span", { class: "bas-item__bar" }) : null,
           it.icon ? /* @__PURE__ */ jsx("span", { class: "bas-item__icon", children: it.icon }) : null,
           /* @__PURE__ */ jsx("span", { class: "bas-item__label", children: it.label }),
           badge ? /* @__PURE__ */ jsx("span", { class: "bas-item__count", "data-testid": `sidebar-badge-${it.id}`, children: badge }) : null
@@ -288,22 +350,84 @@ function Sidebar(p) {
       it.id
     );
   };
+  const parent = (it) => {
+    const children = it.children;
+    const onPage = childActive(it) || isActivePath(it.href, p.currentPath);
+    const open = railed ? flyout?.id === it.id : openItems.has(it.id);
+    const onClick = (e) => {
+      if (!railed) return toggleItem(it.id);
+      if (flyout?.id === it.id) return setFlyout(null);
+      const r = e.currentTarget.getBoundingClientRect();
+      setFlyout({ id: it.id, top: r.top, left: r.right + 6 });
+    };
+    return /* @__PURE__ */ jsxs("div", { class: "bas-itemgroup", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          class: "bas-item bas-item--parent" + (onPage ? " is-parent-active" : ""),
+          "data-testid": `sidebar-item-${it.id}-toggle`,
+          "data-flyout-for": it.id,
+          "aria-expanded": open,
+          "aria-label": railed ? it.label : void 0,
+          title: it.label,
+          onClick,
+          children: [
+            onPage && railed ? /* @__PURE__ */ jsx("span", { class: "bas-item__bar" }) : null,
+            it.icon ? /* @__PURE__ */ jsx("span", { class: "bas-item__icon", children: it.icon }) : null,
+            /* @__PURE__ */ jsx("span", { class: "bas-item__label", children: it.label }),
+            /* @__PURE__ */ jsx("span", { class: "bas-item__chev", children: /* @__PURE__ */ jsx(IconChevron, { open }) })
+          ]
+        }
+      ),
+      !railed && open ? /* @__PURE__ */ jsx("div", { class: "bas-sub", children: children.map((c) => leaf(c, true)) }) : null,
+      railed && flyout?.id === it.id ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: flyoutRef,
+          class: "bas-flyout",
+          "data-testid": `sidebar-flyout-${it.id}`,
+          role: "menu",
+          "aria-label": it.label,
+          style: { top: `${flyout.top}px`, left: `${flyout.left}px` },
+          children: [
+            /* @__PURE__ */ jsx("div", { class: "bas-flyout__title", children: it.label }),
+            children.map((c) => leaf(c, true))
+          ]
+        }
+      ) : null
+    ] }, it.id);
+  };
+  const item = (it) => it.children?.length ? parent(it) : leaf(it);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     mode === "drawer" ? /* @__PURE__ */ jsx("div", { class: "bas-backdrop" + (p.mobileOpen ? " is-open" : ""), "data-testid": "sidebar-backdrop", onClick: close }) : null,
     /* @__PURE__ */ jsxs(
       "aside",
       {
-        class: `bas-sidebar is-mobile-${mode}` + (p.mobileOpen ? " is-open" : "") + (p.collapsed ? " is-collapsed" : ""),
+        class: `bas-sidebar is-mobile-${mode}` + (p.mobileOpen ? " is-open" : "") + (p.collapsed ? " is-collapsed" : "") + (railed ? " is-railed" : ""),
         "data-testid": "sidebar-root",
         "data-mobile": mode,
+        "data-collapse": collapseMode,
         "aria-label": "Navigation",
         children: [
-          /* @__PURE__ */ jsxs("div", { class: "bas-sidebar__head", children: [
-            p.header ? /* @__PURE__ */ jsx("div", { class: "bas-sidebar__brand", children: p.header }) : /* @__PURE__ */ jsx("span", {}),
-            p.onToggleCollapse ? /* @__PURE__ */ jsx("button", { type: "button", class: "bas-iconbtn bas-collapse", "data-testid": "sidebar-collapse", "aria-label": t.collapse, title: t.collapse, onClick: p.onToggleCollapse, children: /* @__PURE__ */ jsx(IconCollapse, {}) }) : null
-          ] }),
+          p.header || p.brandMark ? /* @__PURE__ */ jsxs("div", { class: "bas-sidebar__head", children: [
+            p.header ? /* @__PURE__ */ jsx("div", { class: "bas-sidebar__brand", children: p.homeHref ? /* @__PURE__ */ jsx(NavLink, { href: p.homeHref, onNavigate: p.onNavigate, onAfter: close, class: "bas-home", "data-testid": "sidebar-brand-home", children: p.header }) : p.header }) : null,
+            p.brandMark ? /* @__PURE__ */ jsx("div", { class: "bas-sidebar__mark", "data-testid": "sidebar-brand-mark", children: p.homeHref ? /* @__PURE__ */ jsx(
+              NavLink,
+              {
+                href: p.homeHref,
+                onNavigate: p.onNavigate,
+                onAfter: close,
+                class: "bas-home",
+                "data-testid": "brand-mark-home",
+                "aria-label": p.homeLabel ?? TEXT[p.lang].home,
+                title: p.homeLabel ?? TEXT[p.lang].home,
+                children: p.brandMark
+              }
+            ) : p.brandMark }) : null
+          ] }) : null,
           /* @__PURE__ */ jsx("nav", { class: "bas-sidebar__nav", children: p.groups.map((g) => {
-            const open = !folded.has(g.label);
+            const open = railed || !folded.has(g.label);
             const slug = g.label.toLowerCase().replace(/[^a-z0-9]+/g, "-");
             return /* @__PURE__ */ jsxs("div", { class: "bas-group", children: [
               /* @__PURE__ */ jsxs("button", { type: "button", class: "bas-group__label", "data-testid": `sidebar-group-${slug}`, "aria-expanded": open, onClick: () => toggleGroup(g.label), children: [
@@ -591,7 +715,7 @@ function TopBar(p) {
   const t = TEXT[p.lang];
   return /* @__PURE__ */ jsx("header", { class: "bas-topbar", "data-testid": "topbar-root", children: /* @__PURE__ */ jsxs("div", { class: "bas-topbar__inner", children: [
     p.onOpenMenu ? /* @__PURE__ */ jsx("button", { type: "button", class: "bas-iconbtn bas-hamburger", "data-testid": "sidebar-toggle", "aria-label": t.openMenu, onClick: p.onOpenMenu, children: /* @__PURE__ */ jsx(IconMenu, {}) }) : null,
-    p.brand ? /* @__PURE__ */ jsx("div", { class: "bas-topbar__brand", children: p.brand }) : null,
+    p.brand ? /* @__PURE__ */ jsx("div", { class: "bas-topbar__brand", children: p.homeHref ? /* @__PURE__ */ jsx(NavLink, { href: p.homeHref, onNavigate: p.onNavigate, onAfter: p.onHome, class: "bas-home", "data-testid": "brand-home", children: p.brand }) : p.brand }) : null,
     p.actions ? /* @__PURE__ */ jsx("div", { class: "bas-topbar__actions", children: p.actions }) : null,
     /* @__PURE__ */ jsx("div", { class: "bas-spacer" }),
     /* @__PURE__ */ jsx(NotificationBell, { source: p.notifications, onNavigate: p.onNavigate, lang: p.lang }),
@@ -602,7 +726,7 @@ function PageHeader(p) {
   return /* @__PURE__ */ jsxs("div", { class: "bas-pagehead", "data-testid": "page-header", children: [
     /* @__PURE__ */ jsxs("div", { class: "bas-pagehead__text", children: [
       p.eyebrow ? /* @__PURE__ */ jsx("div", { class: "bas-pagehead__eyebrow", children: p.eyebrow }) : null,
-      /* @__PURE__ */ jsx("h1", { class: "bas-pagehead__title", children: p.title }),
+      p.title != null && p.title !== "" ? /* @__PURE__ */ jsx("h1", { class: "bas-pagehead__title", children: p.title }) : null,
       p.description ? /* @__PURE__ */ jsx("p", { class: "bas-pagehead__desc", children: p.description }) : null
     ] }),
     p.actions ? /* @__PURE__ */ jsx("div", { class: "bas-pagehead__actions", children: p.actions }) : null
@@ -626,21 +750,29 @@ function PageTabs(p) {
 function AppShell(p) {
   const prefix = p.storageKey ?? "broberg-app-shell";
   const mode = p.mobile ?? "drawer";
+  const collapse = p.collapse ?? (mode === "rail" ? "icon" : "offcanvas");
   const [collapsed, setCollapsed] = useState(() => readFlag(`${prefix}.collapsed`, false));
   const [drawer, setDrawer] = useState(false);
+  const isMobile = useIsMobile();
   const t = TEXT[p.lang];
   const toggle = () => {
     const next = !collapsed;
     setCollapsed(next);
     writeFlag(`${prefix}.collapsed`, next);
   };
+  const drawerMode = isMobile && mode === "drawer";
+  const onTrigger = () => drawerMode ? setDrawer(!drawer) : toggle();
+  const expanded = drawerMode ? drawer : !collapsed;
+  const triggerLabel = drawerMode ? drawer ? t.closeMenu : t.openMenu : collapsed ? t.expand : t.collapse;
+  const heading = p.title ?? activeNavLabel(p.groups, p.footer, p.currentPath);
   return /* @__PURE__ */ jsxs("div", { class: "bas-root", "data-testid": "app-shell", "data-mobile": mode, children: [
     /* @__PURE__ */ jsx(
       TopBar,
       {
         brand: p.brand,
+        homeHref: p.homeHref,
+        onHome: () => setDrawer(false),
         actions: p.actions,
-        onOpenMenu: mode === "drawer" ? () => setDrawer(true) : void 0,
         notifications: p.notifications,
         user: p.user,
         userMenu: p.userMenu,
@@ -657,21 +789,45 @@ function AppShell(p) {
           currentPath: p.currentPath,
           onNavigate: p.onNavigate,
           collapsed,
-          onToggleCollapse: toggle,
+          collapse,
+          brandMark: p.brandMark,
+          homeHref: p.homeHref,
+          homeLabel: p.homeLabel,
           mobileOpen: drawer,
           onClose: () => setDrawer(false),
           mobile: mode,
           header: mode === "drawer" ? p.brand : void 0,
           groupsKey: `${prefix}.groups`,
+          itemsKey: `${prefix}.items`,
           lang: p.lang
         }
       ),
-      collapsed && mode === "drawer" ? /* @__PURE__ */ jsx("button", { type: "button", class: "bas-iconbtn bas-expand", "data-testid": "sidebar-expand", "aria-label": t.expand, title: t.expand, onClick: toggle, children: /* @__PURE__ */ jsx(IconExpand, {}) }) : null,
-      /* @__PURE__ */ jsx("main", { class: "bas-main", "data-testid": "app-content", children: p.children })
+      /* @__PURE__ */ jsxs("main", { class: "bas-main", "data-testid": "app-content", children: [
+        /* @__PURE__ */ jsxs("div", { class: "bas-contenthead", "data-testid": "content-header", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              class: "bas-iconbtn bas-trigger",
+              "data-testid": "sidebar-trigger",
+              "aria-label": triggerLabel,
+              "aria-expanded": expanded,
+              title: triggerLabel,
+              onClick: onTrigger,
+              children: /* @__PURE__ */ jsx(IconPanelLeft, {})
+            }
+          ),
+          heading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { class: "bas-contenthead__sep", "data-testid": "content-header-separator", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("h1", { class: "bas-contenthead__title", "data-testid": "content-header-title", children: heading })
+          ] }) : null
+        ] }),
+        p.children
+      ] })
     ] })
   ] });
 }
 
-export { AppShell, Avatar, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TopBar, UserMenu, badgeLabel, createFetchNotificationSource, createMemoryNotificationSource, initials, isActivePath, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AppShell, Avatar, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TopBar, UserMenu, activeNavLabel, badgeLabel, createFetchNotificationSource, createMemoryNotificationSource, initials, isActivePath, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
 //# sourceMappingURL=preact.js.map
 //# sourceMappingURL=preact.js.map