@kismet-ux/constellation 1.11.0 → 1.12.0

package/dist/index.js

@@ -1,14 +1,19 @@
+export { Logo } from './brand/Logo/logo.js';
+export { Checkbox } from './form/Checkbox/checkbox.js';
+export { Combobox } from './form/Combobox/combobox.js';
+export { DatePicker } from './form/DatePicker/date-picker.js';
+export { Input } from './form/Input/input.js';
+export { Label } from './form/Label/label.js';
+export { Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectSeparator, SelectTrigger, SelectValue, __Surface } from './form/Select/select.js';
 export { useFlip } from './hooks/layout/use-flip.js';
 export { useSidebar } from './hooks/layout/use-sidebar.js';
 export { useAlerts } from './hooks/ui/use-alerts.js';
 export { useTableSorting } from './hooks/ui/use-table-sorting.js';
 export { initializeTheme, useAppearance } from './hooks/use-appearance.js';
 export { useInitials } from './hooks/use-initials.js';
+export { useKeyboardInset } from './hooks/use-keyboard-inset.js';
 export { useBreakpoint, useIsMobile } from './hooks/use-mobile.js';
 export { initializeMotion, prefersReducedMotion, useMotion, useReducedMotion } from './hooks/use-motion.js';
-import './index.css';
-export { Alert, AlertBanner, AlertDescription, AlertTitle } from './ui/Alert/alert.js';
-export { AlertProvider } from './ui/Alert/alert-provider.js';
 export { AppContent } from './layout/AppContent/app-content.js';
 export { AppContentFooter } from './layout/AppContentFooter/app-content-footer.js';
 export { AppContentMain } from './layout/AppContentMain/app-content-main.js';
@@ -16,44 +21,43 @@ export { AppFooter } from './layout/AppFooter/app-footer.js';
 export { AppShell } from './layout/AppShell/app-shell.js';
 export { AppSidebar } from './layout/AppSidebar/app-sidebar.js';
 export { AppSidebarHeader } from './layout/AppSidebarHeader/app-sidebar-header.js';
-export { AppearanceTabs } from './settings/AppearanceTabs/appearance-tabs.js';
+export { Collapse } from './layout/Collapse/collapse.js';
+export { Column } from './layout/Column/column.js';
+export { Container } from './layout/Container/container.js';
+export { Grid } from './layout/Grid/grid.js';
+export { Row } from './layout/Row/row.js';
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger } from './layout/Sidebar/sidebar.js';
+export { Skeleton } from './layout/Skeleton/skeleton.js';
+export { Breadcrumbs } from './navigation/Breadcrumbs/breadcrumbs.js';
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './navigation/DropdownMenu/dropdown-menu.js';
+export { Link } from './navigation/Link/link.js';
+export { NavUser } from './navigation/NavUser/nav-user.js';
+export { RouterProvider, useRouterAdapter } from './navigation/Router/router-context.js';
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './navigation/Sheet/sheet.js';
 export { AppearanceToggleDropdown } from './settings/AppearanceDropdown/appearance-dropdown.js';
+export { AppearanceTabs } from './settings/AppearanceTabs/appearance-tabs.js';
+import './index.css';
+export { Heading } from './typography/Heading/heading.js';
+export { TruncatedText } from './typography/TruncatedText/truncated-text.js';
+export { Typography } from './typography/Typography/typography.js';
+export { Alert, AlertBanner, AlertDescription, AlertTitle } from './ui/Alert/alert.js';
+export { persistAlert } from './ui/Alert/alert-persist.js';
+export { AlertProvider } from './ui/Alert/alert-provider.js';
 export { Avatar, AvatarFallback, AvatarImage } from './ui/Avatar/avatar.js';
-export { Breadcrumbs } from './navigation/Breadcrumbs/breadcrumbs.js';
 export { Button } from './ui/Button/button.js';
-export { CONSTELLATION_PORTAL_SELECTOR, isInConstellationPortal } from './utils/portal.js';
-export { Checkbox } from './form/Checkbox/checkbox.js';
 export { Chip } from './ui/Chip/chip.js';
 export { CodeBlock } from './ui/CodeBlock/code-block.js';
-export { Collapse } from './layout/Collapse/collapse.js';
-export { Column } from './layout/Column/column.js';
-export { Combobox } from './form/Combobox/combobox.js';
-export { Container } from './layout/Container/container.js';
-export { DatePicker } from './form/DatePicker/date-picker.js';
 export { DevIndicator } from './ui/DevIndicator/dev-indicator.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './ui/Dialog/dialog.js';
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './navigation/DropdownMenu/dropdown-menu.js';
 export { EmptyState } from './ui/EmptyState/empty-state.js';
-export { Grid } from './layout/Grid/grid.js';
-export { Heading } from './typography/Heading/heading.js';
 export { Icon } from './ui/Icon/icon.js';
-export { Input } from './form/Input/input.js';
-export { Label } from './form/Label/label.js';
-export { Link } from './navigation/Link/link.js';
 export { List, ListItem } from './ui/List/list.js';
-export { Logo } from './brand/Logo/logo.js';
-export { NavUser } from './navigation/NavUser/nav-user.js';
 export { Pagination } from './ui/Pagination/pagination.js';
 export { ProgressBar } from './ui/ProgressBar/progress-bar.js';
-export { RouterProvider, useRouterAdapter } from './navigation/Router/router-context.js';
-export { Row } from './layout/Row/row.js';
-export { Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectSeparator, SelectTrigger, SelectValue, __Surface } from './form/Select/select.js';
 export { Separator } from './ui/Separator/separator.js';
-export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './navigation/Sheet/sheet.js';
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger } from './layout/Sidebar/sidebar.js';
-export { Skeleton } from './layout/Skeleton/skeleton.js';
 export { StatCard } from './ui/StatCard/stat-card.js';
 export { StatusDot } from './ui/StatusDot/status-dot.js';
+export { statusDotVariants } from './ui/StatusDot/status-dot-variants.js';
 export { StepProgress } from './ui/StepProgress/step-progress.js';
 export { Switch } from './ui/Switch/switch.js';
 export { Table, TableBody, TableCard, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSortableHeader } from './ui/Table/table.js';
@@ -62,11 +66,8 @@ export { TableToolbar } from './ui/TableToolbar/table-toolbar.js';
 export { Toggle } from './ui/Toggle/toggle.js';
 export { ToggleGroup } from './ui/ToggleGroup/toggle-group.js';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/Tooltip/tooltip.js';
-export { TruncatedText } from './typography/TruncatedText/truncated-text.js';
-export { Typography } from './typography/Typography/typography.js';
 export { UserInfo } from './user/UserInfo/user-info.js';
 export { UserMenuContent } from './user/UserMenuContent/user-menu-content.js';
 export { getCsrfToken } from './utils/csrf.js';
-export { persistAlert } from './ui/Alert/alert-persist.js';
-export { statusDotVariants } from './ui/StatusDot/status-dot-variants.js';
+export { CONSTELLATION_PORTAL_SELECTOR, isInConstellationPortal } from './utils/portal.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/layout/AppContentFooter/app-content-footer.css

@@ -1,9 +1,26 @@
+@charset "UTF-8";
 .app-content-footer-module_app-content-footer__B1kjp {
   backdrop-filter: blur(12px);
   background-color: color-mix(in srgb, var(--background-default) 88%, transparent);
   border-top: 1px solid var(--divider);
   flex: 0 0 auto;
   margin-top: auto;
-  padding-bottom: env(safe-area-inset-bottom);
+  /*
+   * Clear of the home indicator, and clear of the keyboard.
+   *
+   * `--kb` is how far an on-screen keyboard reaches up the screen, published
+   * by `useKeyboardInset` (mounted by `AppShell`, so every app gets it). It is
+   * 0 whenever the keyboard is down.
+   *
+   * ⚠️ `max()`, never a sum: while the keyboard is up it covers the home
+   * indicator, so the two insets describe the same strip of screen and adding
+   * them lifts the band a thumb's width too high.
+   *
+   * The band grows UPWARD as this grows — it is the last row of a column whose
+   * middle row takes the slack — so its contents come to rest exactly on top
+   * of the keyboard and the scrolling band keeps what is left.
+   */
+  padding-bottom: max(env(safe-area-inset-bottom), var(--kb, 0px));
+  transition: padding-bottom 180ms ease-out;
   z-index: var(--z-sticky);
 }

package/dist/layout/AppContentMain/app-content-main.css

@@ -1,6 +1,15 @@
+@charset "UTF-8";
 .app-content-main-module_app-content-main__5IeB4 {
   flex: 1 1 auto;
   min-height: 0;
   overflow-x: hidden;
   overflow-y: auto;
+  /*
+   * Room at the foot of the scroll for whatever the keyboard is covering.
+   * A browser scrolls a focused field into view against the LAYOUT viewport,
+   * which on iOS does not shrink for the keyboard — so a field low in a long
+   * page is scrolled to a position that is behind it. `--kb` is 0 with the
+   * keyboard down, which makes this a no-op on a desktop.
+   */
+  scroll-padding-bottom: var(--kb, 0px);
 }

package/dist/layout/AppShell/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../src/layout/AppShell/app-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,kBAAyB,EAAE,EAAE,aAAa,qBAM9E"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../src/layout/AppShell/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,kBAAyB,EAAE,EAAE,aAAa,qBAgB9E"}

package/dist/layout/AppShell/app-shell.js

@@ -1,7 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
+import { useKeyboardInset } from '../../hooks/use-keyboard-inset.js';
 import { SidebarProvider } from '../Sidebar/sidebar.js';
 
 function AppShell({ children, defaultSidebarOpen = true }) {
+    /*
+     * Publishes `--kb` — how far an on-screen keyboard reaches up the screen —
+     * so the footer band can sit on top of it and the scrolling band can leave
+     * room for it. Mounted here because the shell is the one component every app
+     * renders exactly once, and because a phone keyboard is a fact about the
+     * platform rather than a decision an app should have to re-make. It is inert
+     * where `visualViewport` does not exist, which includes the server.
+     */
+    useKeyboardInset();
     return (jsx(SidebarProvider, { "data-slot": 'app-shell', defaultOpen: defaultSidebarOpen, children: children }));
 }
 

package/dist/layout/AppShell/app-shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.js","sources":["../../../src/layout/AppShell/app-shell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SidebarProvider } from '../Sidebar';\n\nexport interface AppShellProps {\n  children: React.ReactNode;\n  /**\n   * Initial sidebar state. Persist this server-side (cookie, session) or in\n   * localStorage and pass it in, so the sidebar doesn't flash open on load.\n   */\n  defaultSidebarOpen?: boolean;\n}\n\nexport function AppShell({ children, defaultSidebarOpen = true }: AppShellProps) {\n  return (\n    <SidebarProvider data-slot={'app-shell'} defaultOpen={defaultSidebarOpen}>\n      {children}\n    </SidebarProvider>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;AAYM,SAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,kBAAkB,GAAG,IAAI,EAAiB,EAAA;AAC7E,IAAA,QACEA,GAAA,CAAC,eAAe,EAAA,EAAA,WAAA,EAAY,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAA,QAAA,EACrE,QAAQ,EAAA,CACO;AAEtB;;"}
+{"version":3,"file":"app-shell.js","sources":["../../../src/layout/AppShell/app-shell.tsx"],"sourcesContent":["import { useKeyboardInset } from '@constellation/hooks/use-keyboard-inset';\nimport * as React from 'react';\nimport { SidebarProvider } from '../Sidebar';\n\nexport interface AppShellProps {\n  children: React.ReactNode;\n  /**\n   * Initial sidebar state. Persist this server-side (cookie, session) or in\n   * localStorage and pass it in, so the sidebar doesn't flash open on load.\n   */\n  defaultSidebarOpen?: boolean;\n}\n\nexport function AppShell({ children, defaultSidebarOpen = true }: AppShellProps) {\n  /*\n   * Publishes `--kb` — how far an on-screen keyboard reaches up the screen —\n   * so the footer band can sit on top of it and the scrolling band can leave\n   * room for it. Mounted here because the shell is the one component every app\n   * renders exactly once, and because a phone keyboard is a fact about the\n   * platform rather than a decision an app should have to re-make. It is inert\n   * where `visualViewport` does not exist, which includes the server.\n   */\n  useKeyboardInset();\n\n  return (\n    <SidebarProvider data-slot={'app-shell'} defaultOpen={defaultSidebarOpen}>\n      {children}\n    </SidebarProvider>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;AAaM,SAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,kBAAkB,GAAG,IAAI,EAAiB,EAAA;AAC7E;;;;;;;AAOG;AACH,IAAA,gBAAgB,EAAE;AAElB,IAAA,QACEA,GAAA,CAAC,eAAe,EAAA,EAAA,WAAA,EAAY,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAA,QAAA,EACrE,QAAQ,EAAA,CACO;AAEtB;;"}

package/dist/layout/AppSidebar/app-sidebar.js

@@ -61,7 +61,7 @@ function AppSidebar({ logo, homeHref = '/dashboard', currentPath = '', linkCompo
     return (jsxs(Fragment, { children: [jsxs(Sidebar, { "data-slot": 'app-sidebar', collapsible: 'icon', variant: 'inset', children: [jsx(SidebarHeader, { children: jsx(SidebarMenu, { children: jsx(SidebarMenuItem, { children: jsx(SidebarMenuButton, { size: 'lg', asChild: true, children: LinkComp ? (jsx(LinkComp, { href: homeHref, onClick: handleNavigation, children: logo })) : (jsx("a", { href: homeHref, onClick: handleNavigation, children: logo })) }) }) }) }), jsx(SidebarContent, { children: sections.map(section => (jsxs(SidebarGroup, { children: [jsx(SidebarGroupLabel, { children: section.label }), jsx(SidebarMenu, { children: section.items.map(item => {
                                         const isActive = item.href === bestMatch;
                                         if (section.renderItem) {
-                                            return (jsx(SidebarMenuItem, { children: section.renderItem(item, { isActive }) }, item.title));
+                                            return (jsx(SidebarMenuItem, { children: section.renderItem(item, { isActive, onNavigate: handleNavigation }) }, item.title));
                                         }
                                         return (jsx(SidebarMenuItem, { children: jsx(SidebarMenuButton, { asChild: true, isActive: isActive, tooltip: { children: item.title }, children: jsx(NavLink, { item: item, linkComponent: LinkComp, onNavigate: handleNavigation }) }) }, item.title));
                                     }) })] }, section.label))) }), footerItems?.length ? (jsxs(Fragment, { children: [footerSeparator && jsx(Separator, {}), jsx(SidebarFooter, { children: jsx(SidebarMenu, { children: footerItems.map(item => (jsx(SidebarMenuItem, { children: jsx(SidebarMenuButton, { asChild: true, isActive: item.href === bestMatch, tooltip: { children: item.title }, children: jsx(NavLink, { item: item, linkComponent: LinkComp, onNavigate: handleNavigation }) }) }, item.title))) }) })] })) : null] }), children] }));

package/dist/layout/AppSidebar/app-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.js","sources":["../../../src/layout/AppSidebar/app-sidebar.tsx"],"sourcesContent":["import { useSidebar } from '@constellation/hooks';\nimport { useMobileNavigation } from '@constellation/hooks/use-mobile-navigation';\nimport { useRouterAdapter } from '@constellation/navigation/Router';\nimport { type SidebarNavItem, type SidebarSection } from '@constellation/types';\nimport { Separator } from '@constellation/ui/Separator';\nimport * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '../Sidebar';\n\nexport interface AppSidebarProps {\n  logo: React.ReactNode;\n  homeHref?: string;\n  currentPath?: string;\n  linkComponent?: React.ElementType;\n  sections: SidebarSection[];\n  footerItems?: SidebarNavItem[];\n  footerSeparator?: boolean;\n  children?: React.ReactNode;\n}\n\ntype NavLinkProps = {\n  item: SidebarNavItem;\n  linkComponent?: React.ElementType;\n  onNavigate?: (event: React.MouseEvent<HTMLAnchorElement>) => void;\n} & React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nfunction NavLink({ item, linkComponent: LinkComp, onNavigate, onClick, ...props }: NavLinkProps) {\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    onNavigate?.(event);\n  };\n\n  if (item.href.startsWith('http')) {\n    return (\n      <a\n        href={item.href}\n        target={'_blank'}\n        rel={'noopener noreferrer'}\n        onClick={handleClick}\n        {...props}\n      >\n        {item.icon}\n        <span>{item.title}</span>\n        <span className={'srOnly'}>(opens in new tab)</span>\n      </a>\n    );\n  }\n\n  if (!LinkComp) {\n    return (\n      <a href={item.href} onClick={handleClick} {...props}>\n        {item.icon}\n        <span>{item.title}</span>\n      </a>\n    );\n  }\n\n  return (\n    <LinkComp href={item.href} onClick={handleClick} {...props}>\n      {item.icon}\n      <span>{item.title}</span>\n    </LinkComp>\n  );\n}\n\nexport function AppSidebar({\n  logo,\n  homeHref = '/dashboard',\n  currentPath = '',\n  linkComponent,\n  sections,\n  footerItems,\n  footerSeparator,\n  children,\n}: AppSidebarProps) {\n  const { isMobile, openMobile, setOpenMobile } = useSidebar();\n  // Falls back to the RouterProvider's link component, so configuring the\n  // router once upgrades the whole sidebar without threading a prop here.\n  const { linkComponent: adapterLink } = useRouterAdapter();\n  const LinkComp = linkComponent ?? adapterLink;\n  const cleanupMobileNavigation = useMobileNavigation();\n  const allHrefs = [\n    ...sections.flatMap(s => s.items.map(i => i.href)),\n    ...(footerItems ?? []).map(i => i.href),\n  ];\n  const bestMatch =\n    allHrefs\n      .filter(\n        href =>\n          currentPath === href ||\n          currentPath.startsWith(href + '/') ||\n          currentPath.startsWith(href + '?'),\n      )\n      .sort((a, b) => b.length - a.length)[0] ?? '';\n\n  const handleNavigation = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    if (!isMobile || !openMobile || event.button !== 0) {\n      return;\n    }\n\n    if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n      return;\n    }\n\n    const currentTarget = event.currentTarget;\n    const target = currentTarget.getAttribute('target');\n    if ((target && target.toLowerCase() !== '_self') || currentTarget.hasAttribute('download')) {\n      return;\n    }\n\n    flushSync(() => {\n      setOpenMobile(false);\n    });\n    cleanupMobileNavigation();\n  };\n\n  return (\n    <>\n      <Sidebar data-slot={'app-sidebar'} collapsible={'icon'} variant={'inset'}>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size={'lg'} asChild>\n                {LinkComp ? (\n                  <LinkComp href={homeHref} onClick={handleNavigation}>\n                    {logo}\n                  </LinkComp>\n                ) : (\n                  <a href={homeHref} onClick={handleNavigation}>\n                    {logo}\n                  </a>\n                )}\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          {sections.map(section => (\n            <SidebarGroup key={section.label}>\n              <SidebarGroupLabel>{section.label}</SidebarGroupLabel>\n              <SidebarMenu>\n                {section.items.map(item => {\n                  const isActive = item.href === bestMatch;\n\n                  if (section.renderItem) {\n                    return (\n                      <SidebarMenuItem key={item.title}>\n                        {section.renderItem(item, { isActive })}\n                      </SidebarMenuItem>\n                    );\n                  }\n\n                  return (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton\n                        asChild\n                        isActive={isActive}\n                        tooltip={{ children: item.title }}\n                      >\n                        <NavLink\n                          item={item}\n                          linkComponent={LinkComp}\n                          onNavigate={handleNavigation}\n                        />\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  );\n                })}\n              </SidebarMenu>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        {footerItems?.length ? (\n          <>\n            {footerSeparator && <Separator />}\n            <SidebarFooter>\n              <SidebarMenu>\n                {footerItems.map(item => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      asChild\n                      isActive={item.href === bestMatch}\n                      tooltip={{ children: item.title }}\n                    >\n                      <NavLink item={item} linkComponent={LinkComp} onNavigate={handleNavigation} />\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarFooter>\n          </>\n        ) : null}\n      </Sidebar>\n      {children}\n    </>\n  );\n}\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"app-sidebar.js","sources":["../../../src/layout/AppSidebar/app-sidebar.tsx"],"sourcesContent":["import { useSidebar } from '@constellation/hooks';\nimport { useMobileNavigation } from '@constellation/hooks/use-mobile-navigation';\nimport { useRouterAdapter } from '@constellation/navigation/Router';\nimport { type SidebarNavItem, type SidebarSection } from '@constellation/types';\nimport { Separator } from '@constellation/ui/Separator';\nimport * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '../Sidebar';\n\nexport interface AppSidebarProps {\n  logo: React.ReactNode;\n  homeHref?: string;\n  currentPath?: string;\n  linkComponent?: React.ElementType;\n  sections: SidebarSection[];\n  footerItems?: SidebarNavItem[];\n  footerSeparator?: boolean;\n  children?: React.ReactNode;\n}\n\ntype NavLinkProps = {\n  item: SidebarNavItem;\n  linkComponent?: React.ElementType;\n  onNavigate?: (event: React.MouseEvent<HTMLAnchorElement>) => void;\n} & React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nfunction NavLink({ item, linkComponent: LinkComp, onNavigate, onClick, ...props }: NavLinkProps) {\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    onNavigate?.(event);\n  };\n\n  if (item.href.startsWith('http')) {\n    return (\n      <a\n        href={item.href}\n        target={'_blank'}\n        rel={'noopener noreferrer'}\n        onClick={handleClick}\n        {...props}\n      >\n        {item.icon}\n        <span>{item.title}</span>\n        <span className={'srOnly'}>(opens in new tab)</span>\n      </a>\n    );\n  }\n\n  if (!LinkComp) {\n    return (\n      <a href={item.href} onClick={handleClick} {...props}>\n        {item.icon}\n        <span>{item.title}</span>\n      </a>\n    );\n  }\n\n  return (\n    <LinkComp href={item.href} onClick={handleClick} {...props}>\n      {item.icon}\n      <span>{item.title}</span>\n    </LinkComp>\n  );\n}\n\nexport function AppSidebar({\n  logo,\n  homeHref = '/dashboard',\n  currentPath = '',\n  linkComponent,\n  sections,\n  footerItems,\n  footerSeparator,\n  children,\n}: AppSidebarProps) {\n  const { isMobile, openMobile, setOpenMobile } = useSidebar();\n  // Falls back to the RouterProvider's link component, so configuring the\n  // router once upgrades the whole sidebar without threading a prop here.\n  const { linkComponent: adapterLink } = useRouterAdapter();\n  const LinkComp = linkComponent ?? adapterLink;\n  const cleanupMobileNavigation = useMobileNavigation();\n  const allHrefs = [\n    ...sections.flatMap(s => s.items.map(i => i.href)),\n    ...(footerItems ?? []).map(i => i.href),\n  ];\n  const bestMatch =\n    allHrefs\n      .filter(\n        href =>\n          currentPath === href ||\n          currentPath.startsWith(href + '/') ||\n          currentPath.startsWith(href + '?'),\n      )\n      .sort((a, b) => b.length - a.length)[0] ?? '';\n\n  const handleNavigation = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    if (!isMobile || !openMobile || event.button !== 0) {\n      return;\n    }\n\n    if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n      return;\n    }\n\n    const currentTarget = event.currentTarget;\n    const target = currentTarget.getAttribute('target');\n    if ((target && target.toLowerCase() !== '_self') || currentTarget.hasAttribute('download')) {\n      return;\n    }\n\n    flushSync(() => {\n      setOpenMobile(false);\n    });\n    cleanupMobileNavigation();\n  };\n\n  return (\n    <>\n      <Sidebar data-slot={'app-sidebar'} collapsible={'icon'} variant={'inset'}>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size={'lg'} asChild>\n                {LinkComp ? (\n                  <LinkComp href={homeHref} onClick={handleNavigation}>\n                    {logo}\n                  </LinkComp>\n                ) : (\n                  <a href={homeHref} onClick={handleNavigation}>\n                    {logo}\n                  </a>\n                )}\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          {sections.map(section => (\n            <SidebarGroup key={section.label}>\n              <SidebarGroupLabel>{section.label}</SidebarGroupLabel>\n              <SidebarMenu>\n                {section.items.map(item => {\n                  const isActive = item.href === bestMatch;\n\n                  if (section.renderItem) {\n                    return (\n                      <SidebarMenuItem key={item.title}>\n                        {section.renderItem(item, { isActive, onNavigate: handleNavigation })}\n                      </SidebarMenuItem>\n                    );\n                  }\n\n                  return (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton\n                        asChild\n                        isActive={isActive}\n                        tooltip={{ children: item.title }}\n                      >\n                        <NavLink\n                          item={item}\n                          linkComponent={LinkComp}\n                          onNavigate={handleNavigation}\n                        />\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  );\n                })}\n              </SidebarMenu>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        {footerItems?.length ? (\n          <>\n            {footerSeparator && <Separator />}\n            <SidebarFooter>\n              <SidebarMenu>\n                {footerItems.map(item => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      asChild\n                      isActive={item.href === bestMatch}\n                      tooltip={{ children: item.title }}\n                    >\n                      <NavLink item={item} linkComponent={LinkComp} onNavigate={handleNavigation} />\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarFooter>\n          </>\n        ) : null}\n      </Sidebar>\n      {children}\n    </>\n  );\n}\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;;;;AAoCA,SAAS,OAAO,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,KAAK,EAAgB,EAAA;AAC7F,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AACjE,QAAA,OAAO,GAAG,KAAK,CAAC;AAChB,QAAA,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B;QACF;AAEA,QAAA,UAAU,GAAG,KAAK,CAAC;AACrB,IAAA,CAAC;IAED,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;AAChC,QAAA,QACEA,IAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,QAAQ,EAChB,GAAG,EAAE,qBAAqB,EAC1B,OAAO,EAAE,WAAW,EAAA,GAChB,KAAK,aAER,IAAI,CAAC,IAAI,EACVC,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,IAAI,CAAC,KAAK,EAAA,CAAQ,EACzBA,cAAM,SAAS,EAAE,QAAQ,EAAA,QAAA,EAAA,oBAAA,EAAA,CAA2B,CAAA,EAAA,CAClD;IAER;IAEA,IAAI,CAAC,QAAQ,EAAE;QACb,QACED,IAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAA,GAAM,KAAK,EAAA,QAAA,EAAA,CAChD,IAAI,CAAC,IAAI,EACVC,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,IAAI,CAAC,KAAK,EAAA,CAAQ,CAAA,EAAA,CACvB;IAER;IAEA,QACED,IAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAA,GAAM,KAAK,EAAA,QAAA,EAAA,CACvD,IAAI,CAAC,IAAI,EACVC,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,IAAI,CAAC,KAAK,EAAA,CAAQ,CAAA,EAAA,CAChB;AAEf;AAEM,SAAU,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,GAAG,YAAY,EACvB,WAAW,GAAG,EAAE,EAChB,aAAa,EACb,QAAQ,EACR,WAAW,EACX,eAAe,EACf,QAAQ,GACQ,EAAA;IAChB,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,UAAU,EAAE;;;IAG5D,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,gBAAgB,EAAE;AACzD,IAAA,MAAM,QAAQ,GAAG,aAAa,IAAI,WAAW;AAC7C,IAAA,MAAM,uBAAuB,GAAG,mBAAmB,EAAE;AACrD,IAAA,MAAM,QAAQ,GAAG;QACf,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAClD,QAAA,GAAG,CAAC,WAAW,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;KACxC;IACD,MAAM,SAAS,GACb;AACG,SAAA,MAAM,CACL,IAAI,IACF,WAAW,KAAK,IAAI;AACpB,QAAA,WAAW,CAAC,UAAU,CAAC,IAAI,GAAG,GAAG,CAAC;AAClC,QAAA,WAAW,CAAC,UAAU,CAAC,IAAI,GAAG,GAAG,CAAC;SAErC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;AAEjD,IAAA,MAAM,gBAAgB,GAAG,CAAC,KAA0C,KAAI;AACtE,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YAClD;QACF;AAEA,QAAA,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,EAAE;YACpE;QACF;AAEA,QAAA,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa;QACzC,MAAM,MAAM,GAAG,aAAa,CAAC,YAAY,CAAC,QAAQ,CAAC;AACnD,QAAA,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,WAAW,EAAE,KAAK,OAAO,KAAK,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;YAC1F;QACF;QAEA,SAAS,CAAC,MAAK;YACb,aAAa,CAAC,KAAK,CAAC;AACtB,QAAA,CAAC,CAAC;AACF,QAAA,uBAAuB,EAAE;AAC3B,IAAA,CAAC;IAED,QACED,4BACEA,IAAA,CAAC,OAAO,iBAAY,aAAa,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAA,QAAA,EAAA,CACtEC,GAAA,CAAC,aAAa,EAAA,EAAA,QAAA,EACZA,IAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACdA,GAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,kBACnC,QAAQ,IACPA,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAA,QAAA,EAChD,IAAI,EAAA,CACI,KAEXA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAA,QAAA,EACzC,IAAI,EAAA,CACH,CACL,EAAA,CACiB,EAAA,CACJ,EAAA,CACN,EAAA,CACA,EAChBA,GAAA,CAAC,cAAc,EAAA,EAAA,QAAA,EACZ,QAAQ,CAAC,GAAG,CAAC,OAAO,KACnBD,IAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EAAA,CACXC,IAAC,iBAAiB,EAAA,EAAA,QAAA,EAAE,OAAO,CAAC,KAAK,EAAA,CAAqB,EACtDA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACT,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAG;AACxB,wCAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS;AAExC,wCAAA,IAAI,OAAO,CAAC,UAAU,EAAE;4CACtB,QACEA,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACb,OAAO,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC,EAAA,EADjD,IAAI,CAAC,KAAK,CAEd;wCAEtB;wCAEA,QACEA,IAAC,eAAe,EAAA,EAAA,QAAA,EACdA,IAAC,iBAAiB,EAAA,EAChB,OAAO,EAAA,IAAA,EACP,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,YAEjCA,GAAA,CAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,QAAQ,EACvB,UAAU,EAAE,gBAAgB,GAC5B,EAAA,CACgB,EAAA,EAXA,IAAI,CAAC,KAAK,CAYd;oCAEtB,CAAC,CAAC,GACU,CAAA,EAAA,EA9BG,OAAO,CAAC,KAAK,CA+BjB,CAChB,CAAC,EAAA,CACa,EAChB,WAAW,EAAE,MAAM,IAClBD,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,eAAe,IAAID,GAAA,CAAC,SAAS,EAAA,EAAA,CAAG,EACjCA,GAAA,CAAC,aAAa,cACZA,GAAA,CAAC,WAAW,cACT,WAAW,CAAC,GAAG,CAAC,IAAI,KACnBA,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACdA,GAAA,CAAC,iBAAiB,EAAA,EAChB,OAAO,EAAA,IAAA,EACP,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,EACjC,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,EAAA,QAAA,EAEjCA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,GAAI,EAAA,CAC5D,EAAA,EAPA,IAAI,CAAC,KAAK,CAQd,CACnB,CAAC,EAAA,CACU,GACA,CAAA,EAAA,CACf,IACD,IAAI,IACA,EACT,QAAQ,CAAA,EAAA,CACR;AAEP;;"}

package/dist/layout/AppSidebarHeader/app-sidebar-header.css

@@ -1,12 +1,25 @@
+@charset "UTF-8";
 .app-sidebar-header-module_app-sidebar-header__h-3UU {
   border-bottom: 1px solid var(--sidebar-border);
   flex-shrink: 0;
   padding: 0 var(--size-0-5);
+  /*
+   * THE TOP BAND MEETS THE NOTCH, SO THE TOP BAND PAYS FOR IT.
+   *
+   * On a phone with `viewport-fit=cover` — which an installed web app needs,
+   * or every inset reads 0 and iOS letterboxes it in landscape — the page owns
+   * the strip behind the status bar. Padding rather than a margin so the
+   * header's ground runs up behind the clock the way a native navigation bar
+   * does, while its CONTENT clears it. Zero everywhere there is no inset.
+   */
+  padding-top: env(safe-area-inset-top);
   transition: all var(--sidebar-transition-duration) var(--sidebar-transition-ease);
 }
 @media (min-width: 769px) {
   .app-sidebar-header-module_app-sidebar-header__h-3UU {
-    padding: 0 var(--size-1);
+    /* ⚠️ Inline only. The shorthand here used to reset `padding-top` to 0 and
+       take the safe-area inset with it. */
+    padding-inline: var(--size-1);
   }
 }
 .app-sidebar-header-module_app-sidebar-header__h-3UU {

package/dist/layout/AppSidebarHeader/app-sidebar-header.js

@@ -7,9 +7,37 @@ import { Row } from '../Row/row.js';
 import { SidebarTrigger } from '../Sidebar/sidebar.js';
 import { Breadcrumbs } from '../../navigation/Breadcrumbs/breadcrumbs.js';
 import { NavUser } from '../../navigation/NavUser/nav-user.js';
+import { AppearanceToggleDropdown } from '../../settings/AppearanceDropdown/appearance-dropdown.js';
+import '../../ui/Alert/alert.js';
+import 'react-dom';
+import '../../ui/Alert/alert.css';
+import '../../ui/Avatar/avatar.js';
+import '../../ui/Button/button.js';
+import '../../ui/Chip/chip.js';
+import '../../ui/CodeBlock/code-block.js';
 import cn from 'clsx';
+import '../../ui/DevIndicator/dev-indicator.css';
+import '../../ui/Dialog/dialog.js';
+import '../../ui/EmptyState/empty-state.js';
+import '../../ui/Icon/icon.js';
+import '../../ui/List/list.js';
+import '../../ui/Pagination/pagination.js';
+import '../../ui/ProgressBar/progress-bar.js';
+import '../../ui/Separator/separator.js';
+import '../../ui/StatCard/stat-card.js';
+import '../../ui/StatusDot/status-dot.js';
+import '../../ui/StatusDot/status-dot-variants.js';
+import '../../ui/StepProgress/step-progress.js';
+import '../../ui/Switch/switch.js';
+import '../../ui/Table/table.js';
+import '../../ui/TableActionCell/table-action-cell.js';
+import '../../ui/TableToolbar/table-toolbar.js';
+import '../../ui/Toggle/toggle.js';
+import '../../ui/ToggleGroup/toggle-group.js';
+import '../../ui/Tooltip/tooltip.js';
+import 'lucide-react';
+import '../../settings/AppearanceTabs/appearance-tabs.css';
 import s from './app-sidebar-header.module.scss.js';
-import { AppearanceToggleDropdown } from '../../settings/AppearanceDropdown/appearance-dropdown.js';
 
 /**
  * The header band of a content area.

package/dist/layout/AppSidebarHeader/app-sidebar-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar-header.js","sources":["../../../src/layout/AppSidebarHeader/app-sidebar-header.tsx"],"sourcesContent":["import { useSidebar } from '@constellation/hooks';\nimport { Row } from '@constellation/layout/Row';\nimport { SidebarTrigger } from '@constellation/layout/Sidebar';\nimport { Breadcrumbs } from '@constellation/navigation/Breadcrumbs';\nimport { NavUser, type NavUserProps } from '@constellation/navigation/NavUser';\nimport { AppearanceToggleDropdown } from '@constellation/settings';\nimport { type BreadcrumbItemData } from '@constellation/types';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport s from './app-sidebar-header.module.scss';\n\nexport interface AppSidebarHeaderProps extends React.HTMLAttributes<HTMLElement> {\n  breadcrumbs?: BreadcrumbItemData[];\n  /** Omit to hide the account menu (e.g. on signed-out chrome). */\n  user?: NavUserProps['user'];\n  userMenu?: Omit<NavUserProps, 'user'>;\n  /** Extra controls between the appearance toggle and the account menu. */\n  actions?: React.ReactNode;\n}\n\n/**\n * The header band of a content area.\n *\n * `className` and any other DOM props reach the `header` element. They used to\n * be dropped on the floor — the component took four named props and spread\n * nothing — so a caller passing `className` got no error and no class, and\n * spent the difference looking at its own stylesheet.\n */\nexport function AppSidebarHeader({\n  breadcrumbs = [],\n  user,\n  userMenu,\n  actions,\n  className,\n  ...props\n}: AppSidebarHeaderProps) {\n  const { state } = useSidebar();\n\n  return (\n    <Row\n      data-slot={'app-sidebar-header'}\n      el={'header'}\n      align={'center'}\n      gap={1}\n      justify={'space-between'}\n      className={cn(\n        s['app-sidebar-header'],\n        state === 'collapsed' && s['sidebar-header-collapsed'],\n        className,\n      )}\n      {...props}\n    >\n      <Row gap={1}>\n        <SidebarTrigger />\n        <Breadcrumbs breadcrumbs={breadcrumbs} />\n      </Row>\n      <Row gap={1} align={'center'}>\n        {actions}\n        <AppearanceToggleDropdown />\n        {user && <NavUser user={user} {...userMenu} />}\n      </Row>\n    </Row>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;AAoBA;;;;;;;AAOG;SACa,gBAAgB,CAAC,EAC/B,WAAW,GAAG,EAAE,EAChB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACc,EAAA;AACtB,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE;IAE9B,QACEA,KAAC,GAAG,EAAA,EAAA,WAAA,EACS,oBAAoB,EAC/B,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,QAAQ,EACf,GAAG,EAAE,CAAC,EACN,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,EAAE,CACX,CAAC,CAAC,oBAAoB,CAAC,EACvB,KAAK,KAAK,WAAW,IAAI,CAAC,CAAC,0BAA0B,CAAC,EACtD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,QAAA,EAAA,CAETA,IAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAC,aACTC,GAAA,CAAC,cAAc,KAAG,EAClBA,GAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAE,WAAW,EAAA,CAAI,IACrC,EACND,IAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAA,QAAA,EAAA,CACzB,OAAO,EACRC,GAAA,CAAC,wBAAwB,EAAA,EAAA,CAAG,EAC3B,IAAI,IAAIA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,GAAM,QAAQ,EAAA,CAAI,CAAA,EAAA,CAC1C,CAAA,EAAA,CACF;AAEV;;"}
+{"version":3,"file":"app-sidebar-header.js","sources":["../../../src/layout/AppSidebarHeader/app-sidebar-header.tsx"],"sourcesContent":["import { useSidebar } from '@constellation/hooks';\nimport { Row } from '@constellation/layout/Row';\nimport { SidebarTrigger } from '@constellation/layout/Sidebar';\nimport { Breadcrumbs } from '@constellation/navigation/Breadcrumbs';\nimport { NavUser, type NavUserProps } from '@constellation/navigation/NavUser';\nimport { AppearanceToggleDropdown } from '@constellation/settings';\nimport { type BreadcrumbItemData } from '@constellation/types';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport s from './app-sidebar-header.module.scss';\n\nexport interface AppSidebarHeaderProps extends React.HTMLAttributes<HTMLElement> {\n  breadcrumbs?: BreadcrumbItemData[];\n  /** Omit to hide the account menu (e.g. on signed-out chrome). */\n  user?: NavUserProps['user'];\n  userMenu?: Omit<NavUserProps, 'user'>;\n  /** Extra controls between the appearance toggle and the account menu. */\n  actions?: React.ReactNode;\n}\n\n/**\n * The header band of a content area.\n *\n * `className` and any other DOM props reach the `header` element. They used to\n * be dropped on the floor — the component took four named props and spread\n * nothing — so a caller passing `className` got no error and no class, and\n * spent the difference looking at its own stylesheet.\n */\nexport function AppSidebarHeader({\n  breadcrumbs = [],\n  user,\n  userMenu,\n  actions,\n  className,\n  ...props\n}: AppSidebarHeaderProps) {\n  const { state } = useSidebar();\n\n  return (\n    <Row\n      data-slot={'app-sidebar-header'}\n      el={'header'}\n      align={'center'}\n      gap={1}\n      justify={'space-between'}\n      className={cn(\n        s['app-sidebar-header'],\n        state === 'collapsed' && s['sidebar-header-collapsed'],\n        className,\n      )}\n      {...props}\n    >\n      <Row gap={1}>\n        <SidebarTrigger />\n        <Breadcrumbs breadcrumbs={breadcrumbs} />\n      </Row>\n      <Row gap={1} align={'center'}>\n        {actions}\n        <AppearanceToggleDropdown />\n        {user && <NavUser user={user} {...userMenu} />}\n      </Row>\n    </Row>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA;;;;;;;AAOG;SACa,gBAAgB,CAAC,EAC/B,WAAW,GAAG,EAAE,EAChB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACc,EAAA;AACtB,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE;IAE9B,QACEA,KAAC,GAAG,EAAA,EAAA,WAAA,EACS,oBAAoB,EAC/B,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,QAAQ,EACf,GAAG,EAAE,CAAC,EACN,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,EAAE,CACX,CAAC,CAAC,oBAAoB,CAAC,EACvB,KAAK,KAAK,WAAW,IAAI,CAAC,CAAC,0BAA0B,CAAC,EACtD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,QAAA,EAAA,CAETA,IAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAC,aACTC,GAAA,CAAC,cAAc,KAAG,EAClBA,GAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAE,WAAW,EAAA,CAAI,IACrC,EACND,IAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAA,QAAA,EAAA,CACzB,OAAO,EACRC,GAAA,CAAC,wBAAwB,EAAA,EAAA,CAAG,EAC3B,IAAI,IAAIA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,GAAM,QAAQ,EAAA,CAAI,CAAA,EAAA,CAC1C,CAAA,EAAA,CACF;AAEV;;"}

package/dist/layout/Sidebar/sidebar.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 :root {
   --sidebar-collapsed-gap: 0.5rem;
   --sidebar-transition-duration: 200ms;
@@ -8,6 +9,28 @@
   display: flex;
   min-height: 100svh;
   width: 100%;
+  /*
+   * INSTALLED, THE SHELL IS PINNED RATHER THAN SIZED.
+   *
+   * WebKit in iOS 26 undercounts `100dvh`, `innerHeight` and
+   * `visualViewport.height` by exactly the top safe-area inset when a site is
+   * running as a home-screen app — so a shell sized in viewport units comes up
+   * 47-59px short and everything anchored to the bottom (a docked search band,
+   * a toolbar) sits above the real edge of the screen. A box pinned by both
+   * edges has no height to get wrong.
+   *
+   * Scoped to `display-mode` on purpose. In a browser tab the shell stays in
+   * normal flow, because a consumer may well have page chrome above or below
+   * it and `position: fixed` would take the whole document out from under
+   * them; installed, there is nothing else on the screen by definition.
+   */
+}
+@media (display-mode: standalone), (display-mode: fullscreen) {
+  .sidebar-module_sidebar-wrapper__vmUud {
+    inset: 0;
+    min-height: 0;
+    position: fixed;
+  }
 }
 .sidebar-module_sidebar-wrapper__vmUud.sidebar-module_inset__I909E {
   background: var(--sidebar);
@@ -99,6 +122,15 @@
   flex: 1 1 auto;
   flex-direction: column;
   height: 100svh;
+  /* Fills the pinned wrapper above rather than measuring the viewport a second
+     time — `100svh` is the measurement iOS 26 gets wrong. */
+}
+@media (display-mode: standalone), (display-mode: fullscreen) {
+  .sidebar-module_sidebar-inset__DVzuf {
+    height: 100%;
+  }
+}
+.sidebar-module_sidebar-inset__DVzuf {
   max-width: 100%;
   min-width: 0;
   position: relative;

package/dist/layout.d.ts

@@ -1,10 +1,10 @@
-export { A as AppContent, a as AppContentFooter, b as AppContentFooterProps, c as AppContentMain, d as AppContentMainProps, e as AppFooter, f as AppFooterProps, g as AppShell, h as AppShellProps, i as AppSidebar, j as AppSidebarHeader, k as AppSidebarHeaderProps, l as AppSidebarProps, C as Collapse, m as CollapseProps, n as Column, o as ColumnProps, p as Container, G as Grid, R as Row, t as Sidebar, u as SidebarContent, v as SidebarFooter, w as SidebarGroup, x as SidebarGroupAction, y as SidebarGroupContent, z as SidebarGroupLabel, B as SidebarHeader, D as SidebarInput, E as SidebarInset, F as SidebarMenu, H as SidebarMenuAction, I as SidebarMenuBadge, J as SidebarMenuButton, K as SidebarMenuItem, L as SidebarMenuSkeleton, M as SidebarMenuSub, N as SidebarMenuSubButton, O as SidebarMenuSubItem, P as SidebarProvider, Q as SidebarRail, T as SidebarTrigger, V as Skeleton } from './index-BWTwKQsp.js';
+export { A as AppContent, a as AppContentFooter, b as AppContentFooterProps, c as AppContentMain, d as AppContentMainProps, e as AppFooter, f as AppFooterProps, g as AppShell, h as AppShellProps, i as AppSidebar, j as AppSidebarHeader, k as AppSidebarHeaderProps, l as AppSidebarProps, C as Collapse, m as CollapseProps, n as Column, o as ColumnProps, p as Container, G as Grid, R as Row, t as Sidebar, u as SidebarContent, v as SidebarFooter, w as SidebarGroup, x as SidebarGroupAction, y as SidebarGroupContent, z as SidebarGroupLabel, B as SidebarHeader, D as SidebarInput, E as SidebarInset, F as SidebarMenu, H as SidebarMenuAction, I as SidebarMenuBadge, J as SidebarMenuButton, K as SidebarMenuItem, L as SidebarMenuSkeleton, M as SidebarMenuSub, N as SidebarMenuSubButton, O as SidebarMenuSubItem, P as SidebarProvider, Q as SidebarRail, T as SidebarTrigger, V as Skeleton } from './index-DOKRFZ3I.js';
 export { R as RowProps } from './row-CuhTBQhK.js';
 import 'react';
-import './nav-user-CJIcWKyY.js';
+import './nav-user-CilmWvtr.js';
 import 'lucide-react';
 import './user-menu-content-D0Ldzigm.js';
 import './input-Cp5LET5i.js';
-import './tooltip-BpAJwi3K.js';
+import './tooltip-540OmbEG.js';
 import 'class-variance-authority';
 import 'class-variance-authority/types';

package/dist/nav-user-CilmWvtr.d.ts

@@ -0,0 +1,52 @@
+import { LucideIcon } from 'lucide-react';
+import * as React$1 from 'react';
+import { ReactNode } from 'react';
+import { U as UserMenuContentProps, a as User } from './user-menu-content-D0Ldzigm.js';
+
+interface BreadcrumbItemData {
+    title: string;
+    href: string;
+}
+interface NavGroup {
+    title: string;
+    items: NavItem[];
+}
+interface NavItem {
+    title: string;
+    href: string;
+    icon?: LucideIcon | null;
+    isActive?: boolean;
+}
+interface SidebarNavItem {
+    title: string;
+    href: string;
+    icon?: ReactNode;
+    [key: string]: unknown;
+}
+interface SidebarSection {
+    label: string;
+    items: SidebarNavItem[];
+    /**
+     * Render an item yourself — for a badge, a count, anything the default row
+     * has no slot for.
+     *
+     * ⚠️ Wire `onNavigate` to your link's `onClick`. It is what closes the
+     * offcanvas sidebar after a tap on a phone, and a custom renderer that
+     * leaves it off silently loses that: the menu stays open over the page it
+     * just navigated to. The default row wires it for you, which is exactly why
+     * overriding the row is where it goes missing.
+     */
+    renderItem?: (item: SidebarNavItem, props: {
+        isActive: boolean;
+        onNavigate: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    }) => ReactNode;
+}
+
+interface NavUserProps extends Omit<UserMenuContentProps, 'user'> {
+    user: User;
+}
+/** Sidebar footer control: the signed-in user plus their account menu. */
+declare function NavUser({ user, ...menuProps }: NavUserProps): React$1.JSX.Element;
+
+export { NavUser as b };
+export type { BreadcrumbItemData as B, NavGroup as N, SidebarNavItem as S, NavItem as a, NavUserProps as c, SidebarSection as d };

package/dist/navigation/NavUser/nav-user.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { SidebarMenuButton } from '../../layout/Sidebar/sidebar.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '../DropdownMenu/dropdown-menu.js';
-import { ChevronsUpDownIcon } from 'lucide-react';
-import s from './nav-user.module.scss.js';
 import { UserInfo } from '../../user/UserInfo/user-info.js';
 import { UserMenuContent } from '../../user/UserMenuContent/user-menu-content.js';
+import { ChevronsUpDownIcon } from 'lucide-react';
+import s from './nav-user.module.scss.js';
 
 /** Sidebar footer control: the signed-in user plus their account menu. */
 function NavUser({ user, ...menuProps }) {

package/dist/navigation/Sheet/sheet.css

@@ -128,6 +128,17 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  /*
+   * A sheet is its own layer over the whole page, pinned edge to edge, so it
+   * meets the notch and the home indicator itself — nothing above it in the
+   * tree can pay for them on its behalf. Without this the title of a
+   * full-height sheet sits under the status bar on a phone.
+   *
+   * Padding, so the sheet's ground still runs all the way to the edge of the
+   * screen. Zero everywhere there is no inset, which is every desktop.
+   */
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-top: env(safe-area-inset-top);
   position: fixed;
   z-index: var(--z-modal);
 }
@@ -137,6 +148,15 @@
   min-height: 0;
   overflow-y: auto;
   padding: 0 1rem 1rem;
+  /*
+   * Room for the keyboard, for the same reason `AppContentMain` has it: a
+   * browser scrolls a focused field into view against the LAYOUT viewport,
+   * which on iOS does not shrink for the keyboard — so a field low in a long
+   * sheet is scrolled to a position behind it. `--kb` is 0 with the keyboard
+   * down, so this is a no-op on a desktop.
+   */
+  padding-bottom: calc(1rem + var(--kb, 0px));
+  scroll-padding-bottom: var(--kb, 0px);
 }
 
 .sheet-module_content-right__pLrfN {

package/dist/navigation/Sheet/sheet.js

@@ -1,14 +1,39 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import cn from 'clsx';
-import { XIcon } from 'lucide-react';
+import '../../ui/Alert/alert.js';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
+import '../../ui/Alert/alert-context.js';
+import '../../ui/Alert/alert.css';
+import '../../ui/Avatar/avatar.js';
+import { Button } from '../../ui/Button/button.js';
+import '../../ui/Chip/chip.js';
+import '../../ui/CodeBlock/code-block.js';
+import cn from 'clsx';
+import '../../ui/DevIndicator/dev-indicator.css';
+import '../../ui/Dialog/dialog.js';
+import '../../ui/EmptyState/empty-state.js';
+import '../../ui/Icon/icon.js';
+import '../../ui/List/list.js';
+import '../../ui/Pagination/pagination.js';
+import '../../ui/ProgressBar/progress-bar.js';
+import '../../ui/Separator/separator.js';
+import '../../ui/StatCard/stat-card.js';
+import '../../ui/StatusDot/status-dot.js';
+import '../../ui/StatusDot/status-dot-variants.js';
+import '../../ui/StepProgress/step-progress.js';
+import '../../ui/Switch/switch.js';
+import '../../ui/Table/table.js';
+import '../../ui/TableActionCell/table-action-cell.js';
+import '../../ui/TableToolbar/table-toolbar.js';
+import '../../ui/Toggle/toggle.js';
+import '../../ui/ToggleGroup/toggle-group.js';
+import '../../ui/Tooltip/tooltip.js';
+import { XIcon } from 'lucide-react';
 import { Slot } from '../../internal/slot.js';
 import { useAnimationState } from '../../internal/use-animation-state.js';
 import { useFocusTrap } from '../../internal/use-focus-trap.js';
 import { useScrollLock } from '../../internal/use-scroll-lock.js';
 import s from './sheet.module.scss.js';
-import { Button } from '../../ui/Button/button.js';
 
 const SheetContext = React.createContext(null);
 function useSheet() {