@tonycodes-ui/mortar 0.0.0-stage → 0.12.0

package/dist/application.d.ts

@@ -0,0 +1,340 @@
+import { type ItemGroup, type LinkItem } from "./navigation.js";
+import { type ReactNode } from "react";
+import { type Tone } from "./primitives.js";
+import { type SignInProvider } from "./auth.js";
+import { type HeadingLevel } from "./heading.js";
+/**
+ * A navigation link; `icon` replaces the default marker in the sidebar. With
+ * `children` the item becomes a disclosure: its own `href` is the first link
+ * inside it, and it opens when it or a child is current.
+ */
+export interface NavigationItem extends LinkItem {
+    /** Sub-pages; the item becomes a disclosure, open when it or a child is current. */
+    children?: NavigationItem[];
+}
+export interface AppShellProps {
+    brand: string;
+    /** Logo node shown in place of the placeholder brand mark. */
+    logo?: ReactNode;
+    workspace?: string;
+    /** Destination for the brand link; defaults to the first navigation item. */
+    homeHref?: string;
+    /** Account menu or other content pinned to the bottom of the sidebar. */
+    footer?: ReactNode;
+    navigation: NavigationItem[];
+    /** Labelled groups of links under the main navigation. */
+    sections?: ItemGroup<NavigationItem>[];
+    header?: ReactNode;
+    actions?: ReactNode;
+    /** Secondary column beside the main content (multi-column layout). */
+    aside?: ReactNode;
+    /** Accessible name for the secondary column. */
+    asideLabel?: string;
+    children: ReactNode;
+    className?: string;
+}
+export interface SidebarProps {
+    brand?: string;
+    logo?: ReactNode;
+    workspace?: string;
+    /** Destination for the brand link; defaults to the first navigation item. */
+    homeHref?: string;
+    navigation: NavigationItem[];
+    /** Labelled groups of links under the main navigation. */
+    sections?: ItemGroup<NavigationItem>[];
+    /** Account menu or other content pinned to the bottom. */
+    footer?: ReactNode;
+    /** Accessible name of the navigation landmark. */
+    label?: string;
+    className?: string;
+}
+/** Vertical application navigation; AppShell composes the same content. */
+export declare function Sidebar({ className, ...props }: SidebarProps): import("react").JSX.Element;
+export declare function AppShell({ brand, logo, workspace, homeHref, footer, navigation, sections, header, actions, aside, asideLabel, children, className, }: AppShellProps): import("react").JSX.Element;
+export interface StackedShellProps {
+    brand: string;
+    logo?: ReactNode;
+    homeHref?: string;
+    navigation: LinkItem[];
+    actions?: ReactNode;
+    /** Page heading shown above the content, e.g. a PageHeading. */
+    header?: ReactNode;
+    width?: "md" | "lg" | "xl" | "full";
+    children: ReactNode;
+    className?: string;
+}
+/** Top navigation with a centred page column: Tailwind's stacked application layout. */
+export declare function StackedShell({ brand, logo, homeHref, navigation, actions, header, width, children, className, }: StackedShellProps): import("react").JSX.Element;
+export interface NavbarProps {
+    brand: string;
+    logo?: ReactNode;
+    homeHref?: string;
+    /** Top-level links; the navbar has no sub-menus. */
+    items: LinkItem[];
+    actions?: ReactNode;
+    /** Accessible name of the navigation landmark. */
+    label?: string;
+    className?: string;
+}
+/** Horizontal application navigation that collapses into a menu on narrow screens. */
+export declare function Navbar({ brand, logo, homeHref, items, actions, label, className, }: NavbarProps): import("react").JSX.Element;
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    label?: string;
+    separator?: "slash" | "chevron";
+    className?: string;
+}
+/** Trail to the current page; the item without an href is the current page. */
+export declare function Breadcrumbs({ items, label, separator, className, }: BreadcrumbsProps): import("react").JSX.Element;
+export type TabNavItem = LinkItem;
+export interface TabNavProps {
+    label: string;
+    items: TabNavItem[];
+    /** Underlined tabs (default) or filled pills. */
+    variant?: "underline" | "pills";
+    /** Stretch the tabs to share the full width. */
+    fullWidth?: boolean;
+    className?: string;
+}
+/** Tabs that link between pages, e.g. settings sections. Uses links, not ARIA tabs. */
+export declare function TabNav({ label, items, variant, fullWidth, className, }: TabNavProps): import("react").JSX.Element;
+export interface ProgressStep {
+    id: string;
+    name: string;
+    description?: string;
+    /** Lets people revisit the step, e.g. a completed form page. */
+    href?: string;
+    status: "complete" | "current" | "upcoming";
+}
+export interface ProgressStepsProps {
+    steps: ProgressStep[];
+    label?: string;
+    /**
+     * simple: bars with step numbers; circles: vertical with descriptions;
+     * bullets: "Step 2 of 4" with dots; bar: one track filled up to the current
+     * step with the names beneath, e.g. an order's delivery progress.
+     */
+    variant?: "simple" | "circles" | "bullets" | "bar";
+    /**
+     * `false` renders a labelled group instead of a navigation landmark, for
+     * progress that reports status rather than offering wayfinding, e.g. an
+     * order tracker (default true).
+     */
+    navigation?: boolean;
+    className?: string;
+}
+/** Where someone is in a multi-step flow. The current step is marked aria-current="step". */
+export declare function ProgressSteps({ steps, label, variant, navigation, className, }: ProgressStepsProps): import("react").JSX.Element;
+export interface ActionPanelProps {
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    children?: ReactNode;
+    /** `danger` marks a destructive action, e.g. deleting an account. */
+    tone?: "default" | "danger";
+    headingLevel?: HeadingLevel;
+    id?: string;
+    className?: string;
+}
+/** Card with a title, explanation and one decisive action, e.g. deleting an account. */
+export declare function ActionPanel({ title, description, action, children, tone, headingLevel, id, className, }: ActionPanelProps): import("react").JSX.Element;
+export interface PageHeadingProps {
+    title: string;
+    description?: string;
+    eyebrow?: string;
+    actions?: ReactNode;
+    breadcrumbs?: BreadcrumbItem[];
+    /** The page's h1 by default; use 2 when the page already has one. */
+    headingLevel?: HeadingLevel;
+    /** Facts under the title, e.g. "Full-time", "Remote", "Closes 9 January". */
+    meta?: {
+        label: string;
+        icon?: ReactNode;
+    }[];
+    /** Avatar or logo beside the title (decorative). */
+    avatar?: ReactNode;
+    id?: string;
+    className?: string;
+}
+export declare function PageHeading({ title, description, eyebrow, actions, breadcrumbs, headingLevel, meta, avatar, id, className, }: PageHeadingProps): import("react").JSX.Element;
+export interface MetricGroupProps {
+    label: string;
+    items: {
+        label: string;
+        value: string;
+        change?: string;
+        tone?: Tone;
+        /** Decorative icon before the label. */
+        icon?: ReactNode;
+        /** Direction of the change: adds an arrow and announces "Increased by" or "Decreased by". */
+        trend?: "up" | "down";
+        /** Prior value for comparison, shown as "from …" after the value. */
+        previous?: string;
+    }[];
+    /** `shared` joins metrics with shared borders; `cards` separates them into individual cards. */
+    variant?: "shared" | "cards";
+    className?: string;
+}
+export declare function MetricGroup({ label, items, variant, className, }: MetricGroupProps): import("react").JSX.Element;
+export type SortDirection = "ascending" | "descending";
+export interface TableSort {
+    key: string;
+    direction: SortDirection;
+}
+export interface DataTableColumn<T> {
+    key: string;
+    label: string;
+    render: (row: T) => ReactNode;
+    /** `end` aligns numbers and amounts to the trailing edge. */
+    align?: "start" | "end";
+    /** Enable header sorting. Supply sortValue unless row[key] is a string, number or Date. */
+    sortable?: boolean;
+    sortValue?: (row: T) => string | number | Date | null | undefined;
+    /** CSS width, e.g. "12rem" or "30%". */
+    width?: string;
+    /** Clip long values to one line with an ellipsis. */
+    truncate?: boolean;
+}
+export interface DataTableProps<T extends {
+    id: string;
+}> {
+    caption: string;
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    /** Selected row ids, which may include rows on other pages. */
+    selectedIds?: string[];
+    onSelectionChange?: (ids: string[]) => void;
+    rowLabel: (row: T) => string;
+    /** Link each row's first cell to a detail page; the whole row becomes the click target. */
+    rowHref?: (row: T) => string | undefined;
+    /** Initial sort when the table sorts locally. */
+    defaultSort?: TableSort;
+    /** Controlled sort. With onSortChange the consumer orders rows (e.g. server-side). */
+    sort?: TableSort | null;
+    onSortChange?: (sort: TableSort) => void;
+    /** Group rows under full-width header rows. Groups keep the order in which they first appear in rows; sorting applies within each group. */
+    groupBy?: (row: T) => string;
+    /** Scroll height; the header sticks while rows scroll. */
+    maxHeight?: string;
+    density?: "default" | "compact";
+    striped?: boolean;
+    toolbar?: ReactNode;
+    bulkActions?: ReactNode;
+    /** Rendered under the rows inside the table card, e.g. Pagination. */
+    footer?: ReactNode;
+    /** Shown when there are no rows. */
+    empty?: {
+        title: string;
+        description?: string;
+        action?: ReactNode;
+    };
+    /** Level of the empty state's heading. */
+    headingLevel?: HeadingLevel;
+    loading?: boolean;
+    error?: string;
+    id?: string;
+    className?: string;
+}
+/** Stable sort; empty values always sort last regardless of direction. */
+export declare function sortRows<T>(rows: T[], column: Pick<DataTableColumn<T>, "key" | "sortValue">, direction: SortDirection): T[];
+export declare function DataTable<T extends {
+    id: string;
+}>({ caption, columns, rows, selectedIds, onSelectionChange, rowLabel, rowHref, defaultSort, sort: controlledSort, onSortChange, groupBy, maxHeight, density, striped, toolbar, bulkActions, footer, empty, headingLevel, loading, error, id, className, }: DataTableProps<T>): import("react").JSX.Element;
+export interface TableProps {
+    caption: string;
+    captionVisible?: boolean;
+    /** `align: "end"` aligns numbers and amounts to the trailing edge. */
+    columns: {
+        key: string;
+        label: string;
+        align?: "start" | "end";
+    }[];
+    rows?: Record<string, ReactNode>[];
+    /** Labelled row groups, each its own tbody under a full-width header row. Ungrouped rows render first. */
+    groups?: {
+        label: string;
+        rows: Record<string, ReactNode>[];
+    }[];
+    /** Treat the first column as row headers. */
+    rowHeaders?: boolean;
+    striped?: boolean;
+    id?: string;
+    className?: string;
+}
+/** Plain semantic table for documents, settings summaries and comparisons without row actions. */
+export declare function Table({ caption, captionVisible, columns, rows, groups, rowHeaders, striped, id, className, }: TableProps): import("react").JSX.Element;
+export interface PaginationProps {
+    page: number;
+    pageCount: number;
+    onChange: (page: number) => void;
+    /** Show individual page buttons between Previous and Next. */
+    numbered?: boolean;
+    /** "Showing 51 to 60 of 114 results". */
+    summary?: {
+        from: number;
+        to: number;
+        total: number;
+        noun?: string;
+    };
+    /** Accessible name; give each pagination on a page a distinct one. */
+    label?: string;
+    className?: string;
+}
+export declare function Pagination({ page, pageCount, onChange, numbered, summary, label, className, }: PaginationProps): import("react").JSX.Element;
+export interface SettingsSectionProps {
+    title: string;
+    description?: string;
+    children: ReactNode;
+    headingLevel?: HeadingLevel;
+    id?: string;
+    className?: string;
+}
+export declare function SettingsSection({ title, description, children, headingLevel, id, className, }: SettingsSectionProps): import("react").JSX.Element;
+export interface ActivityFeedProps {
+    label: string;
+    items: {
+        id: string;
+        title: string;
+        description?: string;
+        time: string;
+        tone?: Tone;
+        /** Avatar of who acted; replaces the tone dot. */
+        actor?: ReactNode;
+        /** Comment text, shown as a quote under the title. */
+        body?: ReactNode;
+    }[];
+    className?: string;
+}
+export declare function ActivityFeed({ label, items, className }: ActivityFeedProps): import("react").JSX.Element;
+export type { SignInProvider };
+export interface SignInPanelProps {
+    title: string;
+    /** The page's h1 by default; use 2 when the panel sits inside a page that already has one. */
+    headingLevel?: HeadingLevel;
+    /** Image or quote beside the form on wide screens (split-screen layout). */
+    aside?: ReactNode;
+    description?: string;
+    logo?: ReactNode;
+    providers?: SignInProvider[];
+    email?: {
+        onSubmit: (email: string) => void;
+        label?: string;
+        placeholder?: string;
+        submitLabel?: string;
+        status?: "idle" | "submitting" | "success" | "error";
+        message?: string;
+    };
+    footer?: ReactNode;
+    dividerLabel?: string;
+    id?: string;
+    className?: string;
+}
+/**
+ * Brand-consistent sign-in surface. Mortar renders the form; the consumer's auth
+ * SDK supplies provider redirects and the email-link request through callbacks.
+ */
+export declare function SignInPanel({ title, description, logo, providers, email, footer, dividerLabel, headingLevel, aside, id, className, }: SignInPanelProps): import("react").JSX.Element;

package/dist/application.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { KitLink } from "./navigation.js";
+import { useId, useRef, useEffect, useState, } from "react";
+import { Button, EmptyState, Input, Notice } from "./primitives.js";
+import { BrandMark, Divider } from "./layout.js";
+import { AuthHeader, ProviderButtons } from "./auth.js";
+import { ArrowDown, ArrowUp, Check, SortArrows } from "./icons.js";
+import { LinkContent, NavGroups, NavTreeLinks, MobileNavDialog, TermList, cx, componentRoot, classedIntroSlots, useDomId, } from "./internal.js";
+function SidebarContent({ brand, logo, workspace, homeHref, navigation, sections = [], footer, label = "Primary", onNavigate, }) {
+    return (_jsxs(_Fragment, { children: [brand && (_jsxs(KitLink, { className: "m-workspace", href: homeHref || navigation[0]?.href || "#", children: [_jsx(BrandMark, { logo: logo }), _jsxs("span", { children: [_jsx("strong", { children: brand }), workspace && _jsx("small", { children: workspace })] })] })), _jsxs("nav", { "aria-label": label, children: [_jsx(NavTreeLinks, { items: navigation, marker: true, onNavigate: onNavigate }), _jsx(NavGroups, { groups: sections, marker: true, onNavigate: onNavigate })] }), footer && _jsx("div", { className: "m-user", children: footer })] }));
+}
+/** Vertical application navigation; AppShell composes the same content. */
+export function Sidebar({ className, ...props }) {
+    return (_jsx("div", { ...componentRoot("Sidebar"), className: cx("m-sidebar-panel", className), children: _jsx(SidebarContent, { ...props }) }));
+}
+export function AppShell({ brand, logo, workspace, homeHref, footer, navigation, sections = [], header, actions, aside, asideLabel = "Details", children, className, }) {
+    const [open, setOpen] = useState(false);
+    const contentId = useDomId("m-content-");
+    const sidebar = {
+        brand,
+        logo,
+        workspace,
+        homeHref,
+        navigation,
+        sections,
+        footer,
+    };
+    const main = (_jsx("main", { id: contentId, tabIndex: -1, children: children }));
+    return (_jsxs("div", { ...componentRoot("AppShell"), className: cx("m-app-shell", className), children: [_jsx(KitLink, { className: "m-skip", href: `#${contentId}`, children: "Skip to content" }), _jsx("aside", { className: "m-sidebar", children: _jsx(SidebarContent, { ...sidebar }) }), _jsxs("div", { className: "m-app-main", children: [_jsxs("header", { className: "m-app-header", children: [_jsx(Button, { variant: "ghost", className: "m-menu-trigger", "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen(true), children: "Menu" }), _jsx("div", { className: "m-header-context", children: header || workspace || brand }), _jsx("div", { className: "m-actions", children: actions })] }), aside ? (_jsxs("div", { className: "m-app-columns", children: [main, _jsx("aside", { className: "m-app-aside", "aria-label": asideLabel, children: aside })] })) : (main)] }), _jsx(MobileNavDialog, { open: open, onClose: () => setOpen(false), title: brand, children: _jsx(SidebarContent, { ...sidebar, onNavigate: () => setOpen(false) }) })] }));
+}
+/** Top navigation with a centred page column: Tailwind's stacked application layout. */
+export function StackedShell({ brand, logo, homeHref, navigation, actions, header, width = "lg", children, className, }) {
+    const contentId = useDomId("m-stacked-");
+    return (_jsxs("div", { ...componentRoot("StackedShell"), className: cx("m-stacked-shell", className), children: [_jsx(KitLink, { className: "m-skip", href: `#${contentId}`, children: "Skip to content" }), _jsx(Navbar, { brand: brand, logo: logo, homeHref: homeHref, items: navigation, actions: actions }), _jsxs("main", { id: contentId, tabIndex: -1, "data-width": width, children: [header && _jsx("div", { className: "m-stacked-header", children: header }), children] })] }));
+}
+/** Horizontal application navigation that collapses into a menu on narrow screens. */
+export function Navbar({ brand, logo, homeHref = "/", items, actions, label = "Primary", className, }) {
+    const [open, setOpen] = useState(false);
+    const id = useId();
+    return (_jsxs("header", { ...componentRoot("Navbar"), className: cx("m-navbar", className), children: [_jsxs(KitLink, { className: "m-brand", href: homeHref, children: [_jsx(BrandMark, { logo: logo }), brand] }), _jsx(Button, { variant: "ghost", className: "m-navbar-toggle", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen(!open), children: "Menu" }), _jsx("nav", { id: id, "aria-label": label, "data-open": open || undefined, children: items.map((item, index) => (_jsx(KitLink, { href: item.href, "aria-current": item.current ? "page" : undefined, onClick: () => setOpen(false), children: _jsx(LinkContent, { prefix: "nav", icon: item.icon, label: item.label, count: item.count }) }, `${item.label}:${item.href}:${index}`))) }), actions && _jsx("div", { className: "m-actions", children: actions })] }));
+}
+/** Trail to the current page; the item without an href is the current page. */
+export function Breadcrumbs({ items, label = "Breadcrumb", separator = "slash", className, }) {
+    return (_jsx("nav", { ...componentRoot("Breadcrumbs"), className: cx("m-breadcrumbs", className), "aria-label": label, "data-separator": separator === "slash" ? undefined : separator, children: _jsx("ol", { children: items.map((b, i) => (_jsx("li", { children: b.href ? (_jsx(KitLink, { href: b.href, children: b.label })) : (_jsx("span", { "aria-current": "page", children: b.label })) }, i))) }) }));
+}
+/** Tabs that link between pages, e.g. settings sections. Uses links, not ARIA tabs. */
+export function TabNav({ label, items, variant = "underline", fullWidth = false, className, }) {
+    return (_jsx("nav", { ...componentRoot("TabNav"), className: cx("m-tab-nav", className), "aria-label": label, "data-variant": variant === "underline" ? undefined : variant, "data-full-width": fullWidth || undefined, children: _jsx("ul", { children: items.map((item) => (_jsx("li", { children: _jsx(KitLink, { href: item.href, "aria-current": item.current ? "page" : undefined, children: _jsx(LinkContent, { prefix: "tab", icon: item.icon, label: item.label, count: item.count }) }) }, item.href))) }) }));
+}
+/** Where someone is in a multi-step flow. The current step is marked aria-current="step". */
+export function ProgressSteps({ steps, label = "Progress", variant = "simple", navigation = true, className, }) {
+    const current = steps.findIndex((step) => step.status === "current");
+    const Root = navigation ? "nav" : "div";
+    return (_jsxs(Root, { ...componentRoot("ProgressSteps"), className: cx("m-progress-steps", className), role: navigation ? undefined : "group", "aria-label": label, "data-variant": variant === "simple" ? undefined : variant, children: [variant === "bullets" && current >= 0 && (_jsxs("p", { children: ["Step ", current + 1, " of ", steps.length] })), _jsx("ol", { children: steps.map((step, index) => {
+                    const body = (_jsxs(_Fragment, { children: [(variant === "circles" || variant === "bullets") && (_jsx("span", { className: "m-progress-step-marker", "aria-hidden": "true", children: variant === "circles" && step.status === "complete" && (_jsx(Check, { variant: "step" })) })), _jsxs("span", { className: variant === "bullets" ? "m-sr-only" : "m-progress-step-text", children: [variant === "simple" && (_jsxs("span", { className: "m-progress-step-number", children: ["Step ", index + 1] })), _jsx("span", { className: "m-progress-step-name", children: step.name }), step.description && variant === "circles" && (_jsx("span", { className: "m-progress-step-description", children: step.description })), step.status === "complete" && (_jsx("span", { className: "m-sr-only", children: " (completed)" }))] })] }));
+                    const ariaCurrent = step.status === "current" ? "step" : undefined;
+                    return (_jsx("li", { "data-status": step.status, children: step.href ? (_jsx(KitLink, { href: step.href, "aria-current": ariaCurrent, children: body })) : (_jsx("span", { "aria-current": ariaCurrent, children: body })) }, step.id));
+                }) })] }));
+}
+/** Card with a title, explanation and one decisive action, e.g. deleting an account. */
+export function ActionPanel({ title, description, action, children, tone = "default", headingLevel = 2, id, className, }) {
+    const headingId = useId();
+    const [, headingSlot, descriptionSlot] = classedIntroSlots({
+        title,
+        description,
+        id: headingId,
+        headingLevel,
+        descriptionClassName: null,
+    }, "m-action-panel-title");
+    return (_jsxs("section", { id: id, ...componentRoot("ActionPanel"), className: cx("m-action-panel", className), "aria-labelledby": headingId, "data-tone": tone === "default" ? undefined : tone, children: [_jsxs("div", { className: "m-action-panel-text", children: [headingSlot, descriptionSlot, children] }), action && _jsx("div", { className: "m-action-panel-action", children: action })] }));
+}
+export function PageHeading({ title, description, eyebrow, actions, breadcrumbs, headingLevel = 1, meta = [], avatar, id, className, }) {
+    const text = (_jsxs("div", { children: [...classedIntroSlots({
+                eyebrow,
+                title,
+                description,
+                headingLevel,
+                descriptionClassName: null,
+            }, "m-page-title"), meta.length > 0 && (_jsx("ul", { className: "m-heading-meta", children: meta.map((item, index) => (_jsxs("li", { children: [item.icon && _jsx("span", { "aria-hidden": "true", children: item.icon }), item.label] }, `${item.label}:${index}`))) }))] }));
+    return (_jsxs("header", { id: id, ...componentRoot("PageHeading"), className: cx("m-page-heading", className), children: [breadcrumbs && _jsx(Breadcrumbs, { items: breadcrumbs }), _jsxs("div", { className: "m-heading-row", children: [avatar ? (_jsxs("div", { className: "m-heading-main", children: [_jsx("span", { className: "m-heading-avatar", "aria-hidden": "true", children: avatar }), text] })) : (text), actions && _jsx("div", { className: "m-actions", children: actions })] })] }));
+}
+export function MetricGroup({ label, items, variant = "shared", className, }) {
+    return (_jsx(TermList, { ...componentRoot("MetricGroup"), className: cx("m-metrics", className), "aria-label": label, "data-variant": variant === "cards" ? "cards" : undefined, items: items.map((item) => ({
+            key: item.label,
+            term: (_jsxs(_Fragment, { children: [item.icon && (_jsx("span", { className: "m-metric-icon", "aria-hidden": "true", children: item.icon })), item.label] })),
+            details: (_jsxs(_Fragment, { children: [_jsx("strong", { children: item.value }), item.previous && (_jsxs("span", { className: "m-metric-previous", children: ["from ", item.previous] })), item.change && (_jsxs("span", { className: "m-metric-change", "data-tone": item.tone && item.tone !== "neutral" ? item.tone : undefined, "data-trend": item.trend, children: [item.trend && (_jsxs(_Fragment, { children: [item.trend === "up" ? _jsx(ArrowUp, {}) : _jsx(ArrowDown, {}), _jsx("span", { className: "m-sr-only", children: item.trend === "up" ? "Increased by " : "Decreased by " })] })), item.change] }))] })),
+        })) }));
+}
+const collator = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: "base",
+});
+const isEmpty = (v) => v === null || v === undefined || v === "";
+function compareValues(a, b) {
+    if (isEmpty(a) || isEmpty(b))
+        return isEmpty(a) === isEmpty(b) ? 0 : isEmpty(a) ? 1 : -1;
+    if (a instanceof Date && b instanceof Date)
+        return a.getTime() - b.getTime();
+    if (typeof a === "number" && typeof b === "number")
+        return a - b;
+    return collator.compare(String(a), String(b));
+}
+/** Stable sort; empty values always sort last regardless of direction. */
+export function sortRows(rows, column, direction) {
+    const value = column.sortValue ||
+        ((row) => row[column.key]);
+    const sign = direction === "ascending" ? 1 : -1;
+    return rows
+        .map((row, index) => ({ row, index, v: value(row) }))
+        .sort((a, b) => 
+    // Empty values sort last in both directions, so only real values flip.
+    (isEmpty(a.v) || isEmpty(b.v) ? 1 : sign) * compareValues(a.v, b.v) ||
+        a.index - b.index)
+        .map((entry) => entry.row);
+}
+function SelectAll({ checked, partial, onChange, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current)
+            ref.current.indeterminate = partial;
+    }, [partial]);
+    return (_jsx("input", { ref: ref, type: "checkbox", "aria-label": "Select all rows", checked: checked, onChange: onChange }));
+}
+/** Buckets ordered rows by group; groups keep their first-appearance order in the unsorted rows. */
+function groupRows(rows, ordered, groupBy) {
+    const groups = new Map(rows.map((row) => [groupBy(row), []]));
+    ordered.forEach((row) => groups.get(groupBy(row)).push(row));
+    return [...groups];
+}
+/** Full-width header row that labels the rows of its tbody. */
+function TableGroupRow({ label, span }) {
+    return (_jsx("tr", { className: "m-table-group", children: _jsx("th", { colSpan: span, scope: "rowgroup", children: label }) }));
+}
+const columnAlign = (align) => align === "end" ? "end" : undefined;
+export function DataTable({ caption, columns, rows, selectedIds = [], onSelectionChange, rowLabel, rowHref, defaultSort, sort: controlledSort, onSortChange, groupBy, maxHeight, density = "default", striped = false, toolbar, bulkActions, footer, empty = {
+    title: "No records",
+    description: "Records will appear here when they are available.",
+}, headingLevel = 3, loading, error, id, className, }) {
+    const [localSort, setLocalSort] = useState(defaultSort || null);
+    const sort = controlledSort !== undefined ? controlledSort : localSort;
+    const sortColumn = sort && columns.find((c) => c.key === sort.key);
+    const visibleRows = sort && sortColumn && !onSortChange
+        ? sortRows(rows, sortColumn, sort.direction)
+        : rows;
+    const toggleSort = (key) => {
+        const next = {
+            key,
+            direction: sort?.key === key && sort.direction === "ascending"
+                ? "descending"
+                : "ascending",
+        };
+        if (controlledSort === undefined)
+            setLocalSort(next);
+        onSortChange?.(next);
+    };
+    const pageIds = rows.map((row) => row.id);
+    const selectedHere = pageIds.filter((rowId) => selectedIds.includes(rowId));
+    const allHere = rows.length > 0 && selectedHere.length === rows.length;
+    // Select all adds or removes this page's rows and keeps selections made on
+    // other pages.
+    const toggleAll = () => onSelectionChange?.(allHere
+        ? selectedIds.filter((rowId) => !pageIds.includes(rowId))
+        : [
+            ...selectedIds,
+            ...pageIds.filter((rowId) => !selectedIds.includes(rowId)),
+        ]);
+    const span = columns.length + (onSelectionChange ? 1 : 0);
+    const renderRow = (row) => {
+        const href = rowHref?.(row);
+        return (_jsxs("tr", { "data-selected": selectedIds.includes(row.id) || undefined, "data-linked": href ? true : undefined, children: [onSelectionChange && (_jsx("td", { children: _jsx("input", { type: "checkbox", "aria-label": `Select ${rowLabel(row)}`, checked: selectedIds.includes(row.id), onChange: () => onSelectionChange(selectedIds.includes(row.id)
+                            ? selectedIds.filter((rowId) => rowId !== row.id)
+                            : [...selectedIds, row.id]) }) })), columns.map((col, index) => {
+                    const content = col.truncate ? (_jsx("span", { className: "m-truncate", children: col.render(row) })) : (col.render(row));
+                    return index === 0 ? (_jsx("th", { scope: "row", "data-align": columnAlign(col.align), "data-truncate": col.truncate || undefined, children: href ? (_jsx(KitLink, { className: "m-row-link", href: href, children: content })) : (content) }, col.key)) : (_jsx("td", { "data-align": columnAlign(col.align), "data-truncate": col.truncate || undefined, children: content }, col.key));
+                })] }, row.id));
+    };
+    return (_jsxs("section", { id: id, ...componentRoot("DataTable"), className: cx("m-data-table", className), "aria-label": caption, "data-density": density === "default" ? undefined : density, "data-striped": striped || undefined, children: [(toolbar || selectedIds.length > 0) && (_jsx("div", { className: "m-table-toolbar", children: selectedIds.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("strong", { children: [selectedIds.length, " selected"] }), _jsxs("div", { className: "m-actions", children: [bulkActions, _jsx(Button, { variant: "ghost", onClick: () => onSelectionChange?.([]), children: "Clear selection" })] })] })) : (toolbar) })), _jsx("p", { className: loading ? "m-table-state" : "m-sr-only", role: "status", "data-loading": loading || undefined, children: loading ? "Loading records…" : "" }), loading ? null : error ? (_jsx(Notice, { title: "Unable to load records", tone: "danger", announce: true, children: error })) : !rows.length ? (_jsx(EmptyState, { title: empty.title, description: empty.description, action: empty.action, headingLevel: headingLevel })) : (_jsx("div", { className: "m-table-scroll", role: "region", "aria-label": `${caption} scroll area`, tabIndex: 0, style: maxHeight ? { maxHeight } : undefined, "data-sticky": maxHeight ? true : undefined, children: _jsxs("table", { children: [_jsx("caption", { className: "m-sr-only", children: caption }), columns.some((col) => col.width) && (_jsxs("colgroup", { children: [onSelectionChange && _jsx("col", { className: "m-table-select-col" }), columns.map((col) => (_jsx("col", { style: col.width ? { width: col.width } : undefined }, col.key)))] })), _jsx("thead", { children: _jsxs("tr", { children: [onSelectionChange && (_jsx("th", { scope: "col", children: _jsx(SelectAll, { checked: allHere, partial: selectedHere.length > 0 && !allHere, onChange: toggleAll }) })), columns.map((col) => {
+                                        const direction = sort?.key === col.key ? sort.direction : undefined;
+                                        return (_jsx("th", { scope: "col", "data-align": columnAlign(col.align), "aria-sort": col.sortable ? direction || "none" : undefined, children: col.sortable ? (_jsxs("button", { type: "button", className: "m-sort-button", onClick: () => toggleSort(col.key), children: [col.label, _jsx(SortArrows, { direction: direction })] })) : (col.label) }, col.key));
+                                    })] }) }), groupBy ? (groupRows(rows, visibleRows, groupBy).map(([label, group]) => (_jsxs("tbody", { children: [_jsx(TableGroupRow, { label: label, span: span }), group.map(renderRow)] }, label)))) : (_jsx("tbody", { children: visibleRows.map(renderRow) }))] }) })), footer && _jsx("div", { className: "m-table-footer", children: footer })] }));
+}
+/** Plain semantic table for documents, settings summaries and comparisons without row actions. */
+export function Table({ caption, captionVisible = false, columns, rows = [], groups, rowHeaders = true, striped = false, id, className, }) {
+    const renderRow = (row, i) => (_jsx("tr", { children: columns.map((col, index) => index === 0 && rowHeaders ? (_jsx("th", { scope: "row", "data-align": columnAlign(col.align), children: row[col.key] }, col.key)) : (_jsx("td", { "data-align": columnAlign(col.align), children: row[col.key] }, col.key))) }, i));
+    return (_jsx("div", { id: id, ...componentRoot("Table"), className: cx("m-table", className), role: "region", "aria-label": caption, tabIndex: 0, "data-striped": striped || undefined, children: _jsxs("table", { children: [_jsx("caption", { className: captionVisible ? undefined : "m-sr-only", children: caption }), _jsx("thead", { children: _jsx("tr", { children: columns.map((col) => (_jsx("th", { scope: "col", "data-align": columnAlign(col.align), children: col.label }, col.key))) }) }), (!groups || rows.length > 0) && _jsx("tbody", { children: rows.map(renderRow) }), groups?.map((group, g) => (_jsxs("tbody", { children: [_jsx(TableGroupRow, { label: group.label, span: columns.length }), group.rows.map(renderRow)] }, g)))] }) }));
+}
+/** Page numbers to show: first, last and the current page's neighbours, with gaps. */
+function pageWindow(page, count) {
+    const pages = new Set([1, count, page - 1, page, page + 1]);
+    const shown = [...pages]
+        .filter((n) => n >= 1 && n <= count)
+        .sort((a, b) => a - b);
+    const out = [];
+    shown.forEach((n, i) => {
+        if (i && n - shown[i - 1] > 1)
+            out.push("gap");
+        out.push(n);
+    });
+    return out;
+}
+export function Pagination({ page, pageCount, onChange, numbered = false, summary, label = "Pagination", className, }) {
+    const count = Math.max(1, pageCount);
+    const atStart = page <= 1;
+    const atEnd = page >= count;
+    // Previous and Next use aria-disabled rather than disabled at the ends, so
+    // the button someone just pressed keeps focus instead of dropping it to the
+    // page body.
+    return (_jsxs("nav", { ...componentRoot("Pagination"), className: cx("m-pagination", className), "aria-label": label, children: [summary ? (_jsxs("p", { "aria-live": "polite", children: ["Showing ", _jsx("strong", { children: summary.from }), " to", " ", _jsx("strong", { children: summary.to }), " of ", _jsx("strong", { children: summary.total }), " ", summary.noun ?? "results"] })) : (_jsxs("span", { "aria-live": "polite", children: ["Page ", page, " of ", count] })), _jsxs("div", { className: "m-actions", children: [_jsx(Button, { variant: "secondary", "aria-disabled": atStart || undefined, onClick: () => !atStart && onChange(page - 1), children: "Previous" }), numbered && (_jsx("div", { className: "m-pagination-pages", children: pageWindow(page, count).map((n, i) => n === "gap" ? (_jsx("span", { className: "m-pagination-gap", "aria-hidden": "true", children: "\u2026" }, `gap-${i}`)) : (_jsx("button", { type: "button", "aria-current": n === page ? "page" : undefined, "aria-label": `Page ${n}`, onClick: () => onChange(n), children: n }, n))) })), _jsx(Button, { variant: "secondary", "aria-disabled": atEnd || undefined, onClick: () => !atEnd && onChange(page + 1), children: "Next" })] })] }));
+}
+export function SettingsSection({ title, description, children, headingLevel = 2, id, className, }) {
+    const headingId = useId();
+    return (_jsxs("section", { id: id, ...componentRoot("SettingsSection"), className: cx("m-settings-section", className), "aria-labelledby": headingId, children: [_jsxs("div", { children: [...classedIntroSlots({
+                        title,
+                        description,
+                        id: headingId,
+                        headingLevel,
+                        descriptionClassName: null,
+                    }, "m-settings-title")] }), _jsx("div", { className: "m-stack", children: children })] }));
+}
+export function ActivityFeed({ label, items, className }) {
+    return (_jsx("ol", { ...componentRoot("ActivityFeed"), className: cx("m-activity", className), "aria-label": label, children: items.map((item) => (_jsxs("li", { children: [item.actor ? (_jsx("span", { className: "m-activity-actor", children: item.actor })) : (_jsx("span", { "aria-hidden": "true", className: "m-activity-dot", "data-tone": item.tone && item.tone !== "neutral" ? item.tone : undefined })), _jsxs("div", { children: [_jsx("strong", { children: item.title }), item.description && _jsx("p", { children: item.description }), item.body && (_jsx("blockquote", { className: "m-activity-body", children: item.body }))] }), _jsx("span", { children: item.time })] }, item.id))) }));
+}
+/**
+ * Brand-consistent sign-in surface. Mortar renders the form; the consumer's auth
+ * SDK supplies provider redirects and the email-link request through callbacks.
+ */
+export function SignInPanel({ title, description, logo, providers = [], email, footer, dividerLabel = "or", headingLevel = 1, aside, id, className, }) {
+    const [value, setValue] = useState("");
+    const headingId = useId();
+    const submit = (e) => {
+        e.preventDefault();
+        if (email?.status !== "submitting")
+            email?.onSubmit(value);
+    };
+    const success = email?.status === "success";
+    const panel = (_jsxs("section", { id: aside ? undefined : id, ...componentRoot("SignInPanel", !aside), className: cx("m-sign-in", !aside && className), "aria-labelledby": headingId, children: [_jsx(AuthHeader, { titleClassName: "m-sign-in-title", logo: logo, title: title, description: description, headingLevel: headingLevel, headingId: headingId }), providers.length > 0 && _jsx(ProviderButtons, { providers: providers }), providers.length > 0 && email && (_jsx(Divider, { label: dividerLabel, soft: true, spacing: "none" })), email && (_jsxs("form", { onSubmit: submit, "aria-busy": email.status === "submitting", children: [_jsx(Input, { label: email.label || "Email address", type: "email", autoComplete: "email", placeholder: email.placeholder, required: true, value: value, onChange: (e) => setValue(e.target.value), error: email.status === "error" ? email.message : undefined, disabled: email.status === "submitting" }), _jsx("p", { role: "status", className: success ? undefined : "m-sr-only", children: success
+                            ? email.message || "Check your inbox for a sign-in link."
+                            : "" }), _jsx(Button, { type: "submit", loading: email.status === "submitting", children: email.submitLabel || "Email me a sign-in link" })] })), footer && _jsx("footer", { children: footer })] }));
+    return aside ? (_jsxs("div", { id: id, ...componentRoot("SignInPanel"), className: cx("m-sign-in-split", className), children: [panel, _jsx("div", { className: "m-sign-in-aside", children: aside })] })) : (panel);
+}