@ciridae/ui 0.16.1 → 1.0.1

package/dist/components/settings.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Settings pages. `SettingsLayout` puts a column of sections beside the open one, which turns into
+ * a row of text tabs above it on a phone; each section can be a link (`href`, or a router's link as
+ * `render`) or a choice reported through `onValueChange`. `SettingsColumn` stacks a section's
+ * `SettingsPanel`s, and `SettingsRow` is one label and its value inside a panel.
+ */
+import { css, cx } from "#primitives/css";
+import { Text } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Panel, PanelHeader } from "./panel.js";
+import { SidebarItem, SidebarNavigation, SidebarSection } from "./sidebar.js";
+import { TabsList, TabsRoot, TabsTab } from "./tabs.js";
+const layout = css({
+    display: "grid",
+    gridTemplateColumns: "token(sizes.overlay.menu) minmax(0, 1fr)",
+    alignItems: "start",
+    gap: "layout.sectionGap",
+    _phone: { gridTemplateColumns: "minmax(0, 1fr)", gap: "layout.clusterGap" },
+});
+const sectionColumn = css({ position: "sticky", top: "0", _phone: { display: "none" } });
+const sectionTabs = css({ display: "none", minWidth: "0", _phone: { display: "block" } });
+const content = css({ minWidth: "0" });
+const column = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "layout.clusterGap",
+    maxWidth: "settings.column",
+});
+const row = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.contentGap",
+    paddingBlock: "control.compactBlock",
+});
+export function SettingsLayout({ sections, value, onValueChange, children, labels: ownLabels, className, ...props }) {
+    const labels = { ...useCiridaeLocale().labels.settings, ...ownLabels };
+    return (_jsxs("div", { ...props, className: cx(layout, className), "data-ciridae-ui": "", children: [_jsx(SidebarNavigation, { className: sectionColumn, "aria-label": labels.navigation, children: _jsx(SidebarSection, { children: sections.map((section) => (_jsx(SidebarItem, { icon: section.icon, active: section.value === value, href: section.href, render: section.render, onClick: () => onValueChange?.(section.value), children: section.label }, section.value))) }) }), _jsx(TabsRoot, { className: sectionTabs, value: value, onValueChange: (next) => {
+                    const chosen = sections.find((section) => section.value === next);
+                    if (chosen && !chosen.href && !chosen.render)
+                        onValueChange?.(chosen.value);
+                }, children: _jsx(TabsList, { variant: "text", "aria-label": labels.navigation, children: sections.map((section) => (_jsx(TabsTab, { value: section.value, href: section.href, render: section.render, onClick: section.href || section.render ? () => onValueChange?.(section.value) : undefined, children: section.label }, section.value))) }) }), _jsx("div", { className: content, children: children })] }));
+}
+/** A settings section's single column of panels; the shell header carries the page's title. */
+export function SettingsColumn({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx(column, className), "data-ciridae-ui": "" });
+}
+/** One group of settings, under an optional heading with an optional action beside it. */
+export function SettingsPanel({ title, action, children, ...props }) {
+    return (_jsxs(Panel, { ...props, tone: "outline", children: [(title || action) && (_jsx(PanelHeader, { title: title, actions: action, level: title ? 2 : undefined })), children] }));
+}
+/** A label and its value or control on one line inside a settings panel. */
+export function SettingsRow({ label, children, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cx(row, className), "data-ciridae-ui": "", children: [_jsx(Text, { tone: "muted", children: label }), _jsx("span", { children: children })] }));
+}

package/dist/components/shell-skeleton.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps, ReactNode } from "react";
+export type ShellSkeletonProps = ComponentProps<"div"> & {
+    /** The main panel's placeholder; a panel of rows by default. */
+    children?: ReactNode;
+};
+/** Names itself for assistive tech with the locale's "Loading" unless given an `aria-label`. */
+export declare function ShellSkeleton({ children, ...props }: ShellSkeletonProps): import("@types/react").JSX.Element;

package/dist/components/shell-skeleton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * The app shell while nothing is ready to draw, such as before a session or the first page's data:
+ * the sidebar's search and button, its rail icons, a section of rows and the account line, then the
+ * header's title over a panel, all as placeholders at the real chrome's sizes.
+ */
+import { useCiridaeLocale } from "./locale.js";
+import { AppContent, AppHeader, AppMain, AppShell, AppSidebar, AppSidebarFooter, AppSidebarGroup, AppSidebarNav, AppSidebarRail, } from "./shell.js";
+import { Skeleton } from "./skeleton.js";
+import { PanelSkeleton, SidebarRowsSkeleton } from "./skeletons.js";
+/** Names itself for assistive tech with the locale's "Loading" unless given an `aria-label`. */
+export function ShellSkeleton({ children, ...props }) {
+    const { labels } = useCiridaeLocale();
+    return (_jsxs(AppShell, { "aria-busy": "true", "aria-label": labels.common.loading, ...props, children: [_jsxs(AppSidebar, { children: [_jsxs(AppSidebarGroup, { children: [_jsx(Skeleton, { height: "control" }), _jsx(Skeleton, { height: "control" })] }), _jsxs(AppSidebarRail, { children: [_jsx(Skeleton, { shape: "circle" }), _jsx(Skeleton, { shape: "circle" })] }), _jsx(AppSidebarNav, { children: _jsx(SidebarRowsSkeleton, {}) }), _jsx(AppSidebarFooter, { children: _jsx(Skeleton, { shape: "text", width: "70%" }) })] }), _jsxs(AppMain, { children: [_jsx(AppHeader, { children: _jsx(Skeleton, { shape: "text", width: "medium" }) }), _jsx(AppContent, { children: children ?? _jsx(PanelSkeleton, { rows: 6 }) })] })] }));
+}

package/dist/components/shell.d.ts

@@ -0,0 +1,62 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ReactNode } from "react";
+export declare function AppShell({ className, children, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+export declare function AppSidebar({ className, collapsed, onClickCapture, ...props }: ComponentProps<"aside"> & {
+    collapsed?: boolean;
+}): import("@types/react").JSX.Element;
+export declare function AppMain({ className, ...props }: ComponentProps<"main">): import("@types/react").JSX.Element;
+export declare function AppHeader({ className, children, actions, ...props }: ComponentProps<"header"> & {
+    actions?: ReactNode;
+}): import("@types/react").JSX.Element;
+export declare function AppContent({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+/** Content of the expanded sidebar, such as search and its buttons; hidden while it is a rail. */
+export declare function AppSidebarGroup({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+/**
+ * The icon column shown in place of the expanded content while the sidebar is a rail. Its icon
+ * buttons are large unless they set their own size.
+ */
+export declare function AppSidebarRail({ className, children, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+/** The sidebar's navigation, which scrolls on its own between the top and the footer. */
+export declare function AppSidebarNav({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+/** Pinned to the sidebar's bottom; holds both expanded and rail content. */
+export declare function AppSidebarFooter({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+export declare function AppSidebarFootnote({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+/** Shows its content only in the expanded sidebar, or with `rail` only while it is a rail. */
+export declare function AppSidebarOnly({ rail, children, }: {
+    rail?: boolean;
+    children: ReactNode;
+}): import("@types/react").JSX.Element;
+/** Keep parent links on larger screens and a caller-owned compact ancestor menu on phones. */
+export declare function AppBreadcrumbParents({ children, compact, }: {
+    children: ReactNode;
+    compact: ReactNode;
+}): import("@types/react").JSX.Element;
+export declare function AppHeaderActions({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+/** Header controls that stand in for the sidebar once the window is too narrow to show it. */
+export declare function AppHeaderCompact({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+/** The header's trail of where the page sits; the last crumb truncates first. */
+export declare function AppBreadcrumbs({ className, ...props }: ComponentProps<"nav">): import("@types/react").JSX.Element;
+/** The slash between two crumbs. */
+export declare function AppBreadcrumbSeparator(): import("@types/react").JSX.Element;
+/** The crumb for the page itself, which ends the trail and is the page's heading. */
+export declare function AppBreadcrumbCurrent({ className, ...props }: ComponentProps<"h1">): import("@types/react").JSX.Element;
+export type AppBreadcrumbButtonProps = useRender.ComponentProps<"button"> & {
+    /** Makes the crumb a link to this address; `render` takes a router's link instead. */
+    href?: string;
+};
+/**
+ * A crumb that opens something: a button, such as a switcher menu's trigger; a link with `href`;
+ * or the element `render` gives, such as a router's `<Link to="...">`.
+ */
+export declare function AppBreadcrumbButton({ className, render, href, ...props }: AppBreadcrumbButtonProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+/**
+ * The signed-in account as a menu trigger: avatar, name, and a detail line, or with `compact` the
+ * avatar alone.
+ */
+export declare function AppAccountButton({ avatar, name, detail, trailing, compact, className, ...props }: ComponentProps<"button"> & {
+    avatar: ReactNode;
+    name?: ReactNode;
+    detail?: ReactNode;
+    trailing?: ReactNode;
+    compact?: boolean;
+}): import("@types/react").JSX.Element;

package/dist/components/shell.js

@@ -0,0 +1,415 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { ListIcon } from "@phosphor-icons/react";
+import { createContext, useContext, useMemo, useState } from "react";
+import { css, cx } from "#primitives/css";
+import { IconButton, IconButtonSizeContext } from "./button.js";
+import { PageHotkeys, useHotkey } from "./hotkeys.js";
+import { icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+// The sidebar sits flush against the window; only the main panel is inset from the edges.
+const shell = css({
+    display: "flex",
+    height: "100dvh",
+    paddingBlock: "panel.compact",
+    paddingInlineEnd: "panel.compact",
+    overflow: "hidden",
+    background: "bg.canvas",
+    color: "fg.primary",
+    // Compact line height leaves clipped text room for its descenders throughout the app frame.
+    textStyle: "body",
+    _phone: { display: "block", padding: "none" },
+});
+const sidebar = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "sidebar.groupGap",
+    paddingBlock: "panel.sidebarBlock",
+    // The first row, a control's height such as the workspace switcher, centres on the header's
+    // line beside it: half the difference, plus the main panel's 1px edge.
+    _notPhone: {
+        paddingTop: "calc((token(sizes.shell.header) - token(sizes.control.default)) / 2 + 1px)",
+    },
+    paddingInline: "sidebar.inline",
+    width: "shell.sidebar",
+    flexShrink: "0",
+    overflowY: "auto",
+    // The rail swaps every expanded control for its `data-compact-sidebar` icon twin.
+    "& [data-compact-sidebar]": { display: "none" },
+    "&[data-collapsed]": {
+        width: "shell.collapsed",
+        alignItems: "center",
+        "& [data-expanded-sidebar]": { display: "none" },
+        "& [data-compact-sidebar]": { display: "flex" },
+    },
+    _rail: {
+        width: "shell.collapsed",
+        alignItems: "center",
+        // A phone keeps the expanded content for its menu, laid out as on desktop.
+        _notPhone: {
+            "& [data-expanded-sidebar]": { display: "none" },
+            "& [data-compact-sidebar]": { display: "flex" },
+        },
+    },
+    // On a phone the sidebar leaves the layout and slides in over the page from the header's menu
+    // button, with its full labelled content rather than the rail.
+    _phone: {
+        position: "fixed",
+        insetBlock: "0",
+        insetInlineStart: "0",
+        zIndex: "drawer",
+        width: "shell.sidebar",
+        alignItems: "stretch",
+        background: "bg.canvas",
+        borderInlineEnd: "1px solid token(colors.border.panel)",
+        boxShadow: "card",
+        transform: "translateX(-100%)",
+        _rtl: { transform: "translateX(100%)" },
+        visibility: "hidden",
+        transitionProperty: "transform, visibility",
+        transitionDuration: "fast",
+        "&[data-menu-open]": { transform: "none", visibility: "visible" },
+    },
+});
+const menuBackdrop = css({
+    display: "none",
+    _phone: {
+        display: "block",
+        position: "fixed",
+        inset: "0",
+        zIndex: "drawer",
+        background: "bg.backdrop",
+    },
+});
+const menuButton = css({ display: "none", _phone: { display: "inline-flex", flexShrink: "0" } });
+const main = css({
+    display: "flex",
+    flexDirection: "column",
+    flex: "1",
+    minWidth: "0",
+    border: "1px solid token(colors.border.panel)",
+    borderRadius: "action",
+    background: "bg.panel",
+    overflow: "hidden",
+    // Only once the panel spans the whole window does rounding read as a gap.
+    _phone: {
+        borderRadius: "0",
+        height: "100dvh",
+        border: "0",
+    },
+});
+const header = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.controlGap",
+    height: "shell.header",
+    flexShrink: "0",
+    paddingInlineEnd: "control.compactInline",
+    paddingInlineStart: "control.inline",
+    borderBottom: "1px solid token(colors.border.panel)",
+    "& > :last-child": { minWidth: "0", maxWidth: "100%" },
+    // Once the sidebar is gone the header stays one row: the title truncates, the actions keep
+    // their width.
+    _phone: {
+        gap: "layout.controlGap",
+        padding: "panel.default",
+        "& > [data-header-title]": {
+            minWidth: "0",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis",
+            lineHeight: "compact",
+        },
+        // The actions hold one line: a slicer keeps its value and drops the dimension it names.
+        "& > :last-child": { flexShrink: "0", flexWrap: "nowrap" },
+        "& [data-slicer-label]": { srOnly: true },
+    },
+});
+const headerTitle = css({
+    flex: "1",
+    minWidth: "0",
+    color: "fg.muted",
+    fontSize: "caption",
+    fontWeight: "medium",
+});
+const content = css({
+    flex: "1",
+    minHeight: "0",
+    overflow: "auto",
+    // Exposed so sticky descendants (table headers) can pin to the scroller's edge, not its padding.
+    "--app-content-inset": "token(spacing.page.inline)",
+    padding: "var(--app-content-inset)",
+    _phone: { "--app-content-inset": "token(spacing.panel.default)" },
+});
+/** Whether the phone menu (the sidebar slid in over the page) is open. */
+const ShellMenuContext = createContext({
+    open: false,
+    setOpen: () => undefined,
+});
+/** In the page's scope, so Escape in an overlay over the menu closes only the overlay. */
+function CloseShellMenuOnEscape() {
+    const menu = useContext(ShellMenuContext);
+    useHotkey("Escape", () => menu.setOpen(false), {
+        enabled: menu.open,
+        // The page's own Escape, such as a list's, is off while the menu covers it.
+        conflictBehavior: "allow",
+    });
+    return null;
+}
+export function AppShell({ className, children, ...props }) {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const menu = useMemo(() => ({ open: menuOpen, setOpen: setMenuOpen }), [menuOpen]);
+    return (_jsx(ShellMenuContext, { value: menu, children: _jsxs("div", { ...props, className: cx(shell, className), "data-ciridae-ui": "", children: [menuOpen && _jsx("div", { className: menuBackdrop, onClick: () => setMenuOpen(false) }), _jsxs(PageHotkeys, { children: [_jsx(CloseShellMenuOnEscape, {}), children] })] }) }));
+}
+export function AppSidebar({ className, collapsed, onClickCapture, ...props }) {
+    const menu = useContext(ShellMenuContext);
+    // Choosing a page from the phone menu closes it, as does an item of a menu opened from it, such
+    // as the account menu; a row's action, such as a pin, and a menu's own trigger do not.
+    const closeMenuOnNavigation = (event) => {
+        onClickCapture?.(event);
+        const target = event.target instanceof Element ? event.target : null;
+        if (menu.open &&
+            target?.closest("a, button, [role=menuitem]") &&
+            !target.closest("[data-sidebar-action], [aria-haspopup]")) {
+            menu.setOpen(false);
+        }
+    };
+    return (_jsx("aside", { ...props, className: cx(sidebar, className), "data-collapsed": collapsed || undefined, "data-menu-open": menu.open || undefined, onClickCapture: closeMenuOnNavigation }));
+}
+/** Opens the sidebar as a menu on a phone; hidden at any width that shows the sidebar. */
+function AppMenuButton() {
+    const menu = useContext(ShellMenuContext);
+    const { labels } = useCiridaeLocale();
+    return (_jsx("span", { className: menuButton, children: _jsx(IconButton, { "aria-label": labels.shell.menu, "aria-expanded": menu.open, variant: "ghost", onClick: () => menu.setOpen(!menu.open), children: _jsx(ListIcon, { className: icon({ size: "small" }) }) }) }));
+}
+export function AppMain({ className, ...props }) {
+    return _jsx("main", { ...props, className: cx(main, className), "data-ciridae-ui": "" });
+}
+export function AppHeader({ className, children, actions, ...props }) {
+    return (_jsxs("header", { ...props, className: cx(header, className), "data-ciridae-ui": "", children: [_jsx(AppMenuButton, {}), _jsx("div", { className: headerTitle, "data-header-title": "", children: children }), actions] }));
+}
+export function AppContent({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx(content, className), "data-ciridae-ui": "" });
+}
+// Sidebar pieces. The sidebar shows either its expanded content or, as a rail, its compact twins;
+// `AppSidebar` does the switching through these data attributes.
+const sidebarGroup = css({ display: "flex", flexDirection: "column", gap: "layout.controlGap" });
+const sidebarRail = css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "layout.tightGap",
+});
+/* One sidebar's content stacks at its container's own gap, so a footer's controls keep their room. */
+const sidebarOnly = css({ display: "flex", flexDirection: "column", gap: "inherit" });
+const sidebarNav = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "layout.controlGap",
+    minHeight: "0",
+    overflowY: "auto",
+    // Scrolling would clip the ring of anything outer-ringed placed among the items.
+    ringRoom: true,
+});
+const sidebarFooter = css({
+    marginTop: "auto",
+    // Room above the footer's first control, so it never sits tight under the last nav row.
+    paddingTop: "layout.contentGap",
+    display: "flex",
+    flexDirection: "column",
+    gap: "layout.contentGap",
+    // A phone shows the footer in its menu at full width, as the expanded sidebar does.
+    _rail: { _notPhone: { alignItems: "center" } },
+});
+/** A line of small print, such as build and status, with a leading button flush beside it. */
+const sidebarFootnote = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.tightGap",
+    paddingInline: "layout.tightGap",
+    color: "fg.muted",
+    fontSize: "caption",
+    "& > button:first-child": {
+        width: "auto",
+        marginInlineEnd: "auto",
+        paddingInline: "layout.tightGap",
+    },
+});
+/** Content of the expanded sidebar, such as search and its buttons; hidden while it is a rail. */
+export function AppSidebarGroup({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx(sidebarGroup, className), "data-expanded-sidebar": "" });
+}
+/**
+ * The icon column shown in place of the expanded content while the sidebar is a rail. Its icon
+ * buttons are large unless they set their own size.
+ */
+export function AppSidebarRail({ className, children, ...props }) {
+    return (_jsx("div", { ...props, className: cx(sidebarRail, className), "data-compact-sidebar": "", children: _jsx(IconButtonSizeContext, { value: "large", children: children }) }));
+}
+/** The sidebar's navigation, which scrolls on its own between the top and the footer. */
+export function AppSidebarNav({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx(sidebarNav, className), "data-expanded-sidebar": "" });
+}
+/** Pinned to the sidebar's bottom; holds both expanded and rail content. */
+export function AppSidebarFooter({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx(sidebarFooter, className) });
+}
+export function AppSidebarFootnote({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx(sidebarFootnote, className), "data-expanded-sidebar": "" });
+}
+/** Shows its content only in the expanded sidebar, or with `rail` only while it is a rail. */
+export function AppSidebarOnly({ rail = false, children, }) {
+    return rail ? (_jsx("div", { className: sidebarOnly, "data-compact-sidebar": "", children: _jsx(IconButtonSizeContext, { value: "large", children: children }) })) : (_jsx("div", { className: sidebarOnly, "data-expanded-sidebar": "", children: children }));
+}
+// Header pieces.
+const headerActions = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: "layout.contentGap",
+    minWidth: "0",
+});
+/** The header's copy of the rail, for widths where the sidebar is gone altogether. */
+const headerCompact = css({
+    display: "none",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    minWidth: "0",
+    gap: "layout.contentGap",
+    _phone: { display: "flex" },
+});
+const crumbs = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    minWidth: "0",
+    whiteSpace: "nowrap",
+    "& > :last-child": {
+        minWidth: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        lineHeight: "compact",
+    },
+    _phone: { gap: "layout.tightGap" },
+    "& a:hover": { textDecoration: "underline" },
+});
+const breadcrumbParents = css({ display: "contents", _phone: { display: "none" } });
+const breadcrumbParentsCompact = css({
+    display: "none",
+    flexShrink: "0",
+    _phone: { display: "inline-flex" },
+});
+/** Keep parent links on larger screens and a caller-owned compact ancestor menu on phones. */
+export function AppBreadcrumbParents({ children, compact, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: breadcrumbParents, children: children }), _jsx("span", { className: breadcrumbParentsCompact, children: compact })] }));
+}
+const crumbButton = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "inherit",
+    font: "inherit",
+    cursor: "pointer",
+    _hover: { textDecoration: "underline" },
+});
+export function AppHeaderActions({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx(headerActions, className) });
+}
+/** Header controls that stand in for the sidebar once the window is too narrow to show it. */
+export function AppHeaderCompact({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx(headerCompact, className) });
+}
+/** The header's trail of where the page sits; the last crumb truncates first. */
+export function AppBreadcrumbs({ className, ...props }) {
+    const { labels } = useCiridaeLocale();
+    return _jsx("nav", { "aria-label": labels.shell.breadcrumb, ...props, className: cx(crumbs, className) });
+}
+const crumbSeparator = css({ color: "fg.muted" });
+// The page's title, as its one h1, set in the trail's own type.
+const crumbCurrent = css({
+    margin: "none",
+    // The page's heading, but read as a crumb, so it stays on the body face.
+    fontFamily: "sans",
+    color: "fg.primary",
+    fontSize: "inherit",
+    fontWeight: "medium",
+    lineHeight: "inherit",
+});
+/** The slash between two crumbs. */
+export function AppBreadcrumbSeparator() {
+    return (_jsx("span", { className: crumbSeparator, "aria-hidden": "true", children: "/" }));
+}
+/** The crumb for the page itself, which ends the trail and is the page's heading. */
+export function AppBreadcrumbCurrent({ className, ...props }) {
+    return _jsx("h1", { "aria-current": "page", ...props, className: cx(crumbCurrent, className) });
+}
+/**
+ * A crumb that opens something: a button, such as a switcher menu's trigger; a link with `href`;
+ * or the element `render` gives, such as a router's `<Link to="...">`.
+ */
+export function AppBreadcrumbButton({ className, render, href, ...props }) {
+    const link = href !== undefined || render !== undefined;
+    return useRender({
+        defaultTagName: href !== undefined ? "a" : "button",
+        render,
+        props: {
+            ...(link ? {} : { type: "button" }),
+            ...(href !== undefined ? { href } : {}),
+            ...props,
+            className: cx(crumbButton, className),
+        },
+    });
+}
+// Account trigger, for a menu at the sidebar's foot or the compact header's end.
+const account = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "sidebar.markGap",
+    width: "100%",
+    padding: "layout.tightGap",
+    border: "0",
+    borderRadius: "action",
+    background: "transparent",
+    color: "inherit",
+    font: "inherit",
+    textAlign: "start",
+    cursor: "pointer",
+    "&:hover, &[data-popup-open]": { background: "bg.hover" },
+    _focusVisible: { focusRing: "inset" },
+});
+const accountAvatarOnly = css({
+    display: "inline-flex",
+    padding: "none",
+    border: "0",
+    borderRadius: "round",
+    background: "transparent",
+    cursor: "pointer",
+    _focusVisible: { focusRing: "outer" },
+});
+const accountCopy = css({
+    display: "grid",
+    flex: "1",
+    minWidth: "0",
+    "& > *": {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        lineHeight: "compact",
+    },
+    "& > :last-child": { color: "fg.muted", fontSize: "caption" },
+});
+/**
+ * The signed-in account as a menu trigger: avatar, name, and a detail line, or with `compact` the
+ * avatar alone.
+ */
+export function AppAccountButton({ avatar, name, detail, trailing, compact = false, className, ...props }) {
+    if (compact) {
+        return (_jsx("button", { type: "button", ...props, className: cx(accountAvatarOnly, className), children: avatar }));
+    }
+    return (_jsxs("button", { type: "button", ...props, className: cx(account, className), children: [avatar, _jsxs("span", { className: accountCopy, children: [_jsx("strong", { children: name }), _jsx("span", { children: detail })] }), trailing] }));
+}

package/dist/components/side-panel.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentProps, type ReactNode } from "react";
+export type SidePanelProps = Omit<ComponentProps<"aside">, "title"> & {
+    title: ReactNode;
+    /** A muted line above the title, such as where the item sits in its list; the title then drops under the header row. */
+    eyebrow?: ReactNode;
+    subtitle?: ReactNode;
+    /** Beside the title, such as a status badge. */
+    titleAccessory?: ReactNode;
+    /** Header controls before the close button, such as a menu. */
+    actions?: ReactNode;
+    /** Under the title in the header; the sheet puts it first in its body. */
+    headerContent?: ReactNode;
+    footer?: ReactNode;
+    /** Clears the open item, from the close button or by dismissing the sheet. */
+    onClose: () => void;
+    /** Adds previous / next buttons; a missing handler disables its button. */
+    stepper?: boolean;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    /** Drops the body's padding, for content that runs edge to edge such as tabs. */
+    flushBody?: boolean;
+    /** The aside's body class; the sheet's body takes it too. */
+    bodyClassName?: string;
+};
+/**
+ * A list's preview panel: the open item's header (an eyebrow, title, accessory, subtitle), an
+ * optional previous / next stepper, actions and close, a scrolling body and a footer. Put it beside
+ * the list in a `SidePanelLayout`.
+ */
+export declare function SidePanel({ title, eyebrow, subtitle, titleAccessory, actions, headerContent, footer, onClose, stepper, onPrevious, onNext, flushBody, bodyClassName, className, children, ...props }: SidePanelProps): import("@types/react").JSX.Element;
+/** A list and its `SidePanel` side by side; the list takes the room the panel leaves. */
+export declare function SidePanelLayout({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+/** A labelled block of a side panel's body. */
+export declare function SidePanelSection({ label, className, children, ...props }: Omit<ComponentProps<"section">, "title"> & {
+    label: ReactNode;
+}): import("@types/react").JSX.Element;