@lerianstudio/sindarian-ui 1.2.0-beta.13 → 1.2.0-beta.14

package/dist/esm/enterprise/alert-banner/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * AlertBanner — the console's semantic message box. A rounded, hairline-bordered
+ * panel with a tinted background whose tone escalates by severity. The title
+ * carries the tone color (font-medium); the body stays foreground for
+ * readability; an optional `detail` slot renders mono diagnostic text (an error
+ * code, a failed id) below the body.
+ *
+ *   <AlertBanner tone="destructive" title="Import failed">
+ *     The file could not be parsed. No rows were ingested.
+ *   </AlertBanner>
+ *
+ * Renders `role="alert"`. Tones map to sindarian-ui's `system-*` semantic token
+ * families, so they track the active light/dark palette automatically.
+ */
+import type { ReactNode } from 'react';
+export type AlertBannerTone = 'destructive' | 'warning' | 'info' | 'success' | 'neutral';
+export type AlertBannerProps = {
+    tone?: AlertBannerTone;
+    /** Bold lead line, carries the tone color. */
+    title?: ReactNode;
+    /** Body copy (foreground, for readability). */
+    children?: ReactNode;
+    /** Optional mono diagnostic detail rendered below the body. */
+    detail?: ReactNode;
+    /** Optional leading icon (e.g. a lucide glyph), aligned to the title. */
+    icon?: ReactNode;
+    className?: string;
+};
+export declare function AlertBanner({ tone, title, children, detail, icon, className }: AlertBannerProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/alert-banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/alert-banner/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,MAAM,eAAe,GACzB,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAoB5D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,yEAAyE;IACzE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,SAAS,EACV,EAAE,gBAAgB,+BAmClB"}

package/dist/esm/enterprise/alert-banner/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/** Container tint + border per tone. The title color is applied separately so
+ *  the body copy stays high-contrast foreground. */
+const TONE_CONTAINER = {
+    destructive: 'border-system-error-border bg-system-error-surface',
+    warning: 'border-system-alert-border bg-system-alert-surface',
+    info: 'border-system-info-border bg-system-info-surface',
+    success: 'border-system-success-border bg-system-success-surface',
+    neutral: 'border-border bg-muted/50'
+};
+const TONE_TITLE = {
+    destructive: 'text-system-error-text',
+    warning: 'text-system-alert-text',
+    info: 'text-system-info-text',
+    success: 'text-system-success-text',
+    neutral: 'text-foreground'
+};
+export function AlertBanner({ tone = 'neutral', title, children, detail, icon, className }) {
+    return (_jsxs("div", { role: "alert", "data-tone": tone, className: cn('flex gap-3 rounded-md border px-4 py-3', TONE_CONTAINER[tone], className), children: [icon != null ? (_jsx("span", { className: cn('mt-0.5 shrink-0', TONE_TITLE[tone]), "aria-hidden": true, children: icon })) : null, _jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [title != null ? (_jsx("p", { className: cn('text-sm font-medium', TONE_TITLE[tone]), children: title })) : null, children != null ? (_jsx("div", { className: "text-foreground text-xs leading-relaxed", children: children })) : null, detail != null ? (_jsx("pre", { className: "text-muted-foreground overflow-x-auto font-mono text-xs break-words whitespace-pre-wrap", children: detail })) : null] })] }));
+}

package/dist/esm/enterprise/app-shell/index.d.ts

@@ -0,0 +1,61 @@
+/**
+ * AppShell — the console frame: a sidebar rail, an optional sticky header row,
+ * and a centered, scrollable content column. This is the whole screen, not a
+ * fragment, so it deliberately OWNS the SidebarProvider — the consumer drops a
+ * sindarian-ui sidebar (`SidebarRoot` + its parts) into `sidebar` and a
+ * `SidebarExpandButton` into `header`, and the collapse behavior comes free,
+ * no extra wrapper required.
+ *
+ * Landmark contract (the a11y-correct frame):
+ *   SidebarProvider
+ *     div (the shell ROW — carries `className`)
+ *       a.sr-only (skip link, if labelled)    // FIRST focusable in the document,
+ *                                             //   targets <main> — bypasses the nav
+ *       {sidebar}
+ *       div[data-slot=sidebar-inset]          // the inset COLUMN — a plain div
+ *         header (banner, if given)           // SIBLING of <main>, not nested
+ *         main#<id> tabIndex=-1               // the ONE main: skip-linkable + ref-able
+ *           div (centered content container) → {children}
+ *
+ * The skip link is the FIRST child inside the shell row — before the sidebar —
+ * so a keyboard user's very first Tab lands on it and Enter jumps past the
+ * entire nav to the content <main>. That is the whole point of WCAG 2.4.1
+ * "Bypass Blocks": a skip link placed AFTER the nav would be reached only after
+ * tabbing through every nav item, defeating its purpose. The inset column is a
+ * <div>, not a <main>, so AppShell can own the single inner <main> for the
+ * content. The page header passed via `header` becomes a top-level banner
+ * SIBLING of <main> (one banner); a PageHeader rendered inside `children` lands
+ * inside <main> and is content, not a top-level landmark.
+ *
+ * Client by construction: it calls React.useId() to wire the skip link to the
+ * content <main>, and forwards a ref to that <main> so a consumer can focus it
+ * on route change — both are client concerns, hence the "use client" directive.
+ */
+import * as React from 'react';
+export type AppShellProps = {
+    sidebar?: React.ReactNode;
+    /**
+     * App-bar CONTENT, rendered INSIDE the shell's <header> banner landmark. Pass
+     * banner content only — the sidebar trigger, a screen title, header actions.
+     *
+     * Do NOT pass an element that renders its OWN <header>/landmark (e.g.
+     * <PageHeader>, which is itself a <header>). Nesting a <header> in this banner
+     * produces a SECOND banner — a <header> is not sectioning content, so the
+     * inner one stays body-scoped — which violates WCAG's at-most-one-banner rule.
+     * Page-level title blocks (<PageHeader>) belong in `children`, where they land
+     * inside <main> and are correctly page content, not a top-level landmark.
+     */
+    header?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    contentClassName?: string;
+    /**
+     * When set, renders a "skip to content" link as the FIRST focusable element;
+     * activating it jumps focus to the content <main>. Omit it and no skip link
+     * renders. The link/target wiring (the <main> id) is internal — generated with
+     * React.useId() so it is stable and unique without a required id prop.
+     */
+    skipToContentLabel?: string;
+};
+export declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/app-shell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/app-shell/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,QAAQ,mFAgEpB,CAAA"}

package/dist/esm/enterprise/app-shell/index.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AppShell — the console frame: a sidebar rail, an optional sticky header row,
+ * and a centered, scrollable content column. This is the whole screen, not a
+ * fragment, so it deliberately OWNS the SidebarProvider — the consumer drops a
+ * sindarian-ui sidebar (`SidebarRoot` + its parts) into `sidebar` and a
+ * `SidebarExpandButton` into `header`, and the collapse behavior comes free,
+ * no extra wrapper required.
+ *
+ * Landmark contract (the a11y-correct frame):
+ *   SidebarProvider
+ *     div (the shell ROW — carries `className`)
+ *       a.sr-only (skip link, if labelled)    // FIRST focusable in the document,
+ *                                             //   targets <main> — bypasses the nav
+ *       {sidebar}
+ *       div[data-slot=sidebar-inset]          // the inset COLUMN — a plain div
+ *         header (banner, if given)           // SIBLING of <main>, not nested
+ *         main#<id> tabIndex=-1               // the ONE main: skip-linkable + ref-able
+ *           div (centered content container) → {children}
+ *
+ * The skip link is the FIRST child inside the shell row — before the sidebar —
+ * so a keyboard user's very first Tab lands on it and Enter jumps past the
+ * entire nav to the content <main>. That is the whole point of WCAG 2.4.1
+ * "Bypass Blocks": a skip link placed AFTER the nav would be reached only after
+ * tabbing through every nav item, defeating its purpose. The inset column is a
+ * <div>, not a <main>, so AppShell can own the single inner <main> for the
+ * content. The page header passed via `header` becomes a top-level banner
+ * SIBLING of <main> (one banner); a PageHeader rendered inside `children` lands
+ * inside <main> and is content, not a top-level landmark.
+ *
+ * Client by construction: it calls React.useId() to wire the skip link to the
+ * content <main>, and forwards a ref to that <main> so a consumer can focus it
+ * on route change — both are client concerns, hence the "use client" directive.
+ */
+import * as React from 'react';
+import { SidebarProvider } from '../../components/ui/sidebar/index.js';
+import { cn } from '../../lib/utils.js';
+export const AppShell = React.forwardRef(function AppShell({ sidebar, header, children, className, contentClassName, skipToContentLabel }, ref) {
+    // The content <main> id — wires the skip link to its target and gives the
+    // <main> a stable, focusable anchor. Internal: no consumer-facing id prop.
+    const mainId = React.useId();
+    // sindarian-ui's SidebarProvider is context-only (it renders no DOM and
+    // takes no className), so the shell owns the flex row itself and `className`
+    // lands on it — the same element the legacy provider's className reached.
+    return (_jsx(SidebarProvider, { children: _jsxs("div", { className: cn('flex h-svh w-full overflow-hidden', className), children: [skipToContentLabel ? (_jsx("a", { href: `#${mainId}`, className: "focus:bg-background focus:text-foreground sr-only focus:not-sr-only focus:absolute focus:z-50 focus:m-2 focus:rounded focus:px-3 focus:py-2 focus:shadow", children: skipToContentLabel })) : null, sidebar, _jsxs("div", { "data-slot": "sidebar-inset", className: "bg-background relative flex w-full min-w-0 flex-1 flex-col", children: [header ? (_jsx("header", { className: "border-border bg-background sticky top-0 z-10 flex items-center gap-3 border-b px-6 py-3", children: header })) : null, _jsx("main", { id: mainId, ref: ref, tabIndex: -1, 
+                            // min-h-0 lets this flex child shrink below its content height —
+                            // without it `flex-1` keeps min-height:auto and nothing scrolls.
+                            className: "min-h-0 flex-1 overflow-y-auto outline-none", children: _jsx("div", { className: cn('mx-auto w-full max-w-7xl px-6 py-8 lg:px-8', contentClassName), children: children }) })] })] }) }));
+});
+AppShell.displayName = 'AppShell';

package/dist/esm/enterprise/cursor-pager/index.d.ts

@@ -0,0 +1,21 @@
+export type CursorPagerProps = {
+    /** From the page envelope: more pages exist after this one. */
+    hasMore?: boolean;
+    /** From the page envelope: cursor for the next page. */
+    nextCursor?: string | null;
+    /** From the page envelope: cursor for the previous page. */
+    prevCursor?: string | null;
+    /** Called with the cursor to load (undefined => first page). */
+    onCursorChange: (cursor: string | undefined) => void;
+    /** Disable both controls (e.g. while fetching). */
+    disabled?: boolean;
+    /** Optional summary, e.g. "50 per page" or a loaded-count string. */
+    summary?: string;
+    /** Label for the previous-page control. Defaults to "Previous". */
+    previousLabel?: string;
+    /** Label for the next-page control. Defaults to "Next". */
+    nextLabel?: string;
+    className?: string;
+};
+export declare function CursorPager({ hasMore, nextCursor, prevCursor, onCursorChange, disabled, summary, previousLabel, nextLabel, className }: CursorPagerProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/cursor-pager/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/cursor-pager/index.tsx"],"names":[],"mappings":"AAoBA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,gEAAgE;IAChE,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IACpD,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,UAAU,EACV,UAAU,EACV,cAAc,EACd,QAAgB,EAChB,OAAO,EACP,aAA0B,EAC1B,SAAkB,EAClB,SAAS,EACV,EAAE,gBAAgB,+BAmClB"}

package/dist/esm/enterprise/cursor-pager/index.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CursorPager drives the cursor-pagination envelope
+ *   { items, hasMore, nextCursor, prevCursor, limit }
+ * shared by the console's cursor-paged list endpoints (do not use it on
+ * offset-based endpoints).
+ *
+ * It is controlled: the parent owns the active cursor (the value it passes to
+ * the list hook) and reacts to `onCursorChange`. Pass the page envelope's
+ * `hasMore`, `nextCursor`, `prevCursor`. "Previous" is enabled when the page
+ * reports a `prevCursor`; "Next" when `hasMore` and a `nextCursor` exist.
+ *
+ * `onCursorChange(undefined)` requests the first page (no cursor).
+ */
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '../../components/ui/button/index.js';
+import { cn } from '../../lib/utils.js';
+export function CursorPager({ hasMore, nextCursor, prevCursor, onCursorChange, disabled = false, summary, previousLabel = 'Previous', nextLabel = 'Next', className }) {
+    const canPrev = !disabled && !!prevCursor;
+    const canNext = !disabled && !!hasMore && !!nextCursor;
+    return (_jsxs("div", { className: cn('flex items-center justify-between gap-4 pt-3', className), children: [_jsx("p", { className: "text-muted-foreground text-xs", children: summary ?? '' }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "small", icon: _jsx(ChevronLeft, { "aria-hidden": true }), iconPlacement: "start", disabled: !canPrev, onClick: () => onCursorChange(prevCursor ?? undefined), children: previousLabel }), _jsx(Button, { type: "button", variant: "outline", size: "small", icon: _jsx(ChevronRight, { "aria-hidden": true }), iconPlacement: "end", disabled: !canNext, onClick: () => onCursorChange(nextCursor ?? undefined), children: nextLabel })] })] }));
+}

package/dist/esm/enterprise/data-table/index.d.ts

@@ -0,0 +1,88 @@
+import { type ColumnDef, type OnChangeFn, type RowData, type RowSelectionState } from '@tanstack/react-table';
+import { type EmptyStateProps } from '../empty-state/index.js';
+/**
+ * Per-column opt-in for ledger numeric alignment. Set `meta: { numeric: true }`
+ * on a money/number `ColumnDef` and DataTable right-aligns both the header and
+ * its body cells (mono tabular figures).
+ */
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        numeric?: boolean;
+    }
+}
+/**
+ * Row selection is CONTROLLED-ONLY — the contract sindarian-x shipped: the
+ * component holds no selection state and only mirrors `rowSelection` back into
+ * TanStack. Legacy typed all three props as independently optional, so opting
+ * into `enableRowSelection` without wiring the other two compiled fine and then
+ * rendered checkboxes that could never toggle (state pinned to a constant `{}`,
+ * no updater). Same runtime contract here, honest types: enabling selection
+ * requires the controlled pair, and leaving it off forbids them.
+ */
+type RowSelectionProps<TData> = {
+    enableRowSelection?: false;
+    rowSelection?: never;
+    onRowSelectionChange?: never;
+    getRowSelectionLabel?: never;
+} | {
+    enableRowSelection: true;
+    /** Controlled selection state (TanStack `RowSelectionState`, keyed by row id). */
+    rowSelection: RowSelectionState;
+    /** Controlled selection updater (TanStack `OnChangeFn`). */
+    onRowSelectionChange: OnChangeFn<RowSelectionState>;
+    /**
+     * Accessible name for a row's checkbox. Defaults to `Select row <id>`,
+     * which announces the raw row id (`Select row 0` with the default index
+     * ids) — pass a builder to name the record the way a user recognises it,
+     * e.g. ``(row) => `Select settlement ${row.reference}` ``.
+     */
+    getRowSelectionLabel?: (row: TData) => string;
+};
+type DataTableBaseProps<TData> = {
+    columns: ColumnDef<TData, unknown>[];
+    data: TData[];
+    /** Show skeleton rows instead of data/empty state. */
+    loading?: boolean;
+    /** Number of skeleton rows when loading. Defaults to 8. */
+    skeletonRows?: number;
+    /** Announced by the persistent status region while loading. Defaults to "Loading table rows". */
+    loadingLabel?: string;
+    /** Empty-state config when data resolves to zero rows. */
+    empty?: EmptyStateProps;
+    /** Stable row id accessor; defaults to TanStack's index-based id. */
+    getRowId?: (row: TData, index: number) => string;
+    /**
+     * Drop the rounded-card framing (radius, hairline border, bg-card) so the
+     * table runs full-bleed inside an already-framed surface. Margin tweaks like
+     * `-mx-5` stay the caller's job via `className`.
+     */
+    flush?: boolean;
+    /**
+     * Row density. `comfortable` (default) keeps the table's standard padding;
+     * `compact` tightens cell padding for the veteran "more rows per screen"
+     * view. Applied as a per-cell padding override on THIS table only.
+     */
+    density?: 'comfortable' | 'compact';
+    /**
+     * Opt into the roving-focus keyboard layer. Presence of this callback
+     * enables row tabIndex/focus/keydown handling; Enter calls it with the
+     * focused row's data. DataTable stays router-agnostic — consumers
+     * navigate inside the callback. Default off: rows render exactly as
+     * before, with no tabIndex and no handlers.
+     */
+    onRowActivate?: (row: TData) => void;
+    /**
+     * Optional href builder pairing with `onRowActivate`: when present,
+     * Cmd/Ctrl+Enter on a focused row opens the built href in a new tab via
+     * `window.open(href, '_blank', 'noopener,noreferrer')` — the keyboard twin
+     * of cmd-clicking the row's in-cell link. Build hrefs with the router's
+     * own URL builder, never string concatenation. Sheet-based tables (no
+     * routable destination) simply omit it and keep modified Enter a no-op.
+     */
+    rowHref?: (row: TData) => string;
+    className?: string;
+};
+export type DataTableProps<TData> = DataTableBaseProps<TData> & RowSelectionProps<TData>;
+export declare function DataTable<TData>({ columns, data, loading, skeletonRows, loadingLabel, empty, getRowId, flush, density, enableRowSelection, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className }: DataTableProps<TData>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/data-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/data-table/index.tsx"],"names":[],"mappings":"AAmCA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,UAAU,EAEf,KAAK,OAAO,EACZ,KAAK,iBAAiB,EAEvB,MAAM,uBAAuB,CAAA;AAY9B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEjE;;;;GAIG;AACH,OAAO,QAAQ,uBAAuB,CAAC;IAIrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB;CACF;AAED;;;;;;;;GAQG;AACH,KAAK,iBAAiB,CAAC,KAAK,IACxB;IACE,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,oBAAoB,CAAC,EAAE,KAAK,CAAA;IAC5B,oBAAoB,CAAC,EAAE,KAAK,CAAA;CAC7B,GACD;IACE,kBAAkB,EAAE,IAAI,CAAA;IACxB,kFAAkF;IAClF,YAAY,EAAE,iBAAiB,CAAA;IAC/B,4DAA4D;IAC5D,oBAAoB,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACnD;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;CAC9C,CAAA;AAEL,KAAK,kBAAkB,CAAC,KAAK,IAAI;IAC/B,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iGAAiG;IACjG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IACnC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IACpC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI,kBAAkB,CAAC,KAAK,CAAC,GAC3D,iBAAiB,CAAC,KAAK,CAAC,CAAA;AA4E1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,OAAO,EACP,IAAI,EACJ,OAAe,EACf,YAAgB,EAChB,YAAmC,EACnC,KAAK,EACL,QAAQ,EACR,KAAa,EACb,OAAuB,EACvB,kBAA0B,EAC1B,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,OAAO,EACP,SAAS,EACV,EAAE,cAAc,CAAC,KAAK,CAAC,+BA+RvB"}

package/dist/esm/enterprise/data-table/index.js

@@ -0,0 +1,242 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataTable — a typed, generic wrapper over TanStack Table v8.
+ *
+ * Pairs with CursorPager (server-driven pagination): pass the page's `items`
+ * as `data`; this component does no client-side paging or sorting by default.
+ * It owns the three render states the list screens need:
+ *   - loading  → header + skeleton rows
+ *   - empty    → EmptyState (data resolved, zero rows)
+ *   - data     → semantic table rows; cells own any links/actions
+ *
+ * Columns are standard TanStack `ColumnDef<T>`; cells receive the row's
+ * `original` value, so screens compose money / date / status cells directly in
+ * their column `cell` renderers.
+ *
+ * Row selection is opt-in and controlled: pass `enableRowSelection` plus
+ * `rowSelection` / `onRowSelectionChange` (TanStack-native types). When
+ * enabled, a checkbox column is prepended — header checkbox selects the
+ * page (indeterminate for partial), checkbox-cell clicks never bubble to
+ * row-level handlers. With the flag off (the default), nothing changes.
+ *
+ * Keyboard navigation is opt-in via `onRowActivate`: when present, rows get
+ * a roving tabindex (Tab enters the table once at the anchor row; the next
+ * Tab moves to the row's first tabbable child if it has one, otherwise out
+ * of the table — no trap), ArrowUp/Down move row focus clamped to the page,
+ * Home/End jump to the page edges, Enter activates the row through the
+ * callback, and Space toggles selection when `enableRowSelection` is on.
+ * Cmd/Ctrl+Enter opens the row's destination in a new tab when the optional
+ * `rowHref` builder is provided (window.open with noopener,noreferrer);
+ * without it, modified Enter stays a deliberate no-op — never a same-tab
+ * activation. Keydown events originating from interactive children (links,
+ * buttons, checkboxes, form fields) are never hijacked.
+ */
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../components/ui/table/index.js';
+import { Skeleton } from '../../components/ui/skeleton/index.js';
+import { cn } from '../../lib/utils.js';
+import { EmptyState } from '../empty-state/index.js';
+const SELECTION_COLUMN_ID = '__select__';
+const CHECKBOX_CLASS = 'accent-primary block size-4';
+/** Right-aligned mono treatment for `meta: { numeric: true }` columns. */
+const NUMERIC_CELL_CLASS = 'text-right font-mono tabular-nums';
+/**
+ * Keydown events whose target sits inside one of these are never hijacked
+ * by the row-level keyboard handler — Space in a checkbox and Enter on an
+ * in-cell link keep their native behavior.
+ */
+const INTERACTIVE_CHILD_SELECTOR = 'a, button, input, select, textarea, [role="checkbox"]';
+/**
+ * Inset focus outline for keyboard-navigable rows. Outline, not Tailwind
+ * ring: ring is box-shadow, which renders unreliably on display: table-row.
+ * `focus-visible`-gated, so mouse users (and visual baselines) see nothing.
+ */
+const ROW_FOCUS_CLASS = 'focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring';
+function stopPropagation(event) {
+    event.stopPropagation();
+}
+function SelectAllCheckbox({ table }) {
+    const allSelected = table.getIsAllPageRowsSelected();
+    const someSelected = table.getIsSomePageRowsSelected();
+    return (_jsx("input", { type: "checkbox", className: CHECKBOX_CLASS, "aria-label": "Select all rows on this page", checked: allSelected, ref: (el) => {
+            if (el)
+                el.indeterminate = !allSelected && someSelected;
+        }, onChange: table.getToggleAllPageRowsSelectedHandler() }));
+}
+function RowSelectionCheckbox({ row, getLabel }) {
+    return (_jsx("input", { type: "checkbox", className: CHECKBOX_CLASS, "aria-label": getLabel ? getLabel(row.original) : `Select row ${row.id}`, checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler() }));
+}
+function createSelectionColumn(getLabel) {
+    return {
+        id: SELECTION_COLUMN_ID,
+        header: ({ table }) => _jsx(SelectAllCheckbox, { table: table }),
+        cell: ({ row }) => _jsx(RowSelectionCheckbox, { row: row, getLabel: getLabel })
+    };
+}
+export function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className }) {
+    const tableColumns = useMemo(() => enableRowSelection
+        ? [createSelectionColumn(getRowSelectionLabel), ...columns]
+        : columns, [columns, enableRowSelection, getRowSelectionLabel]);
+    const table = useReactTable({
+        data,
+        columns: tableColumns,
+        getCoreRowModel: getCoreRowModel(),
+        getRowId,
+        enableRowSelection,
+        // Controlled-only, exactly as sindarian-x shipped it: this component holds
+        // no selection state. The `?? {}` is the JS-consumer safety net; the prop
+        // types make the TS path require the controlled pair whenever selection is
+        // enabled, so the dead-checkbox configuration is now unrepresentable.
+        onRowSelectionChange: enableRowSelection ? onRowSelectionChange : undefined,
+        state: {
+            rowSelection: enableRowSelection ? (rowSelection ?? {}) : undefined
+        }
+    });
+    const colCount = tableColumns.length;
+    const dataRows = table.getRowModel().rows;
+    const rowCount = dataRows.length;
+    // Compact density overrides only THIS table's cell padding (tailwind-merge
+    // lets the later utility win over TableHead/TableCell's defaults).
+    // Comfortable passes nothing, so the default render is unchanged.
+    const compact = density === 'compact';
+    const headDensityClass = compact ? 'h-8 px-2' : undefined;
+    const cellDensityClass = compact ? 'px-2 py-1.5' : undefined;
+    // --- Roving row focus (active only when onRowActivate is provided) ---
+    const keyboardNav = onRowActivate !== undefined;
+    const [focusedIndex, setFocusedIndex] = useState(0);
+    // ponytail: rowRefs is keyed by render index, while rows are id-keyed
+    // (`key={row.id}`). This holds only because DataTable is server-driven with
+    // no in-place client reorder, and React 19's per-render ref cleanup defuses
+    // stale entries. If client-side reorder is ever added, re-key this Map by
+    // row.id to keep focus targets aligned with their rows.
+    const rowRefs = useRef(new Map());
+    const focusWithinRef = useRef(false);
+    const containerRef = useRef(null);
+    // Render-time clamp: exactly one anchor row (tabIndex=0) even on the
+    // frame where data shrank but state has not caught up yet.
+    const anchorIndex = rowCount > 0 ? Math.min(focusedIndex, rowCount - 1) : 0;
+    // Data changes clamp the anchor but never steal focus: DOM focus moves
+    // only if focus was already inside the table and the focused row vanished
+    // (e.g. page flip removed it). Never autofocus on mount.
+    useEffect(() => {
+        if (!keyboardNav)
+            return;
+        // Clamp the focus target ONCE and drive both the state setter and the
+        // .focus() call from the same value — reading `focusedIndex` separately
+        // after the functional update would use the stale pre-clamp closure value
+        // and try to focus an unmounted row, dropping focus to <body>.
+        const max = Math.max(rowCount - 1, 0);
+        const target = Math.min(focusedIndex, max);
+        setFocusedIndex(target);
+        if (!focusWithinRef.current)
+            return;
+        const active = document.activeElement;
+        if (active && containerRef.current?.contains(active))
+            return;
+        // The target row may have unmounted on a data-shrink frame; walk down to
+        // the nearest existing lower index, falling back to the container, so
+        // focus never escapes the table.
+        for (let i = target; i >= 0; i--) {
+            const rowEl = rowRefs.current.get(i);
+            if (rowEl) {
+                rowEl.focus();
+                return;
+            }
+        }
+        containerRef.current?.focus();
+    }, [keyboardNav, rowCount, focusedIndex, data]);
+    const focusRow = (index) => {
+        rowRefs.current.get(index)?.focus();
+    };
+    const handleRowBlur = (event) => {
+        const next = event.relatedTarget;
+        if (!next || !containerRef.current?.contains(next)) {
+            focusWithinRef.current = false;
+        }
+    };
+    const handleRowKeyDown = (event, row, rowIndex) => {
+        const target = event.target;
+        if (target !== event.currentTarget &&
+            target.closest(INTERACTIVE_CHILD_SELECTOR) !== null) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                focusRow(Math.min(rowIndex + 1, rowCount - 1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                focusRow(Math.max(rowIndex - 1, 0));
+                break;
+            case 'Home':
+                event.preventDefault();
+                focusRow(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                focusRow(rowCount - 1);
+                break;
+            case 'Enter':
+                // Modified Enter (Cmd/Ctrl) means "open elsewhere" — a same-tab
+                // activation would destroy the user's context. With rowHref it
+                // opens the row's destination in a new tab; without it (sheet-based
+                // tables), it stays a deliberate no-op.
+                if (event.metaKey || event.ctrlKey) {
+                    if (rowHref) {
+                        window.open(rowHref(row.original), '_blank', 'noopener,noreferrer');
+                    }
+                    break;
+                }
+                onRowActivate?.(row.original);
+                break;
+            case ' ':
+                if (enableRowSelection && row.getCanSelect()) {
+                    event.preventDefault();
+                    row.getToggleSelectedHandler()(event);
+                }
+                break;
+            default:
+                break;
+        }
+    };
+    return (_jsxs("div", { ref: containerRef, 
+        // tabIndex={-1} (keyboard-nav only) makes the container programmatically
+        // focusable so the focus-restoration fallback can land here when every
+        // row has unmounted, keeping focus inside the table rather than on <body>.
+        tabIndex: keyboardNav ? -1 : undefined, className: cn(!flush &&
+            'border-border bg-card text-card-foreground rounded-lg border', className), children: [_jsx("span", { className: "sr-only", role: "status", children: loading
+                    ? loadingLabel
+                    : rowCount === 0
+                        ? 'No rows'
+                        : `${rowCount} rows` }), _jsxs(Table, { "aria-busy": loading ? 'true' : undefined, children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => {
+                                const numeric = header.column.columnDef.meta?.numeric;
+                                return (_jsx(TableHead, { align: numeric ? 'right' : undefined, className: cn('tracking-wide uppercase', headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10'), children: header.isPlaceholder
+                                        ? null
+                                        : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                            }) }, headerGroup.id))) }), _jsx(TableBody, { children: loading ? (Array.from({ length: skeletonRows }).map((_, rowIndex) => (_jsx(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: colCount }).map((__, cellIndex) => (_jsx(TableCell, { className: cellDensityClass, children: _jsx(Skeleton, { className: "h-4 w-full max-w-[160px]" }) }, `skeleton-${rowIndex}-${cellIndex}`))) }, `skeleton-${rowIndex}`)))) : rowCount === 0 ? (_jsx(TableRow, { className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: colCount, className: "p-0", children: _jsx(EmptyState, { title: empty?.title ?? 'Nothing here yet', description: empty?.description, icon: empty?.icon, action: empty?.action, 
+                                    // The DataTable renders the ledger register grammar, so its
+                                    // empty surface reads as a ruled page rather than a centered
+                                    // void. Callers can still override via `empty.ruled = false`.
+                                    ruled: empty?.ruled ?? true }) }) })) : (dataRows.map((row, rowIndex) => (_jsx(TableRow, { ref: keyboardNav
+                                ? (el) => {
+                                    if (el)
+                                        rowRefs.current.set(rowIndex, el);
+                                    else
+                                        rowRefs.current.delete(rowIndex);
+                                }
+                                : undefined, tabIndex: keyboardNav ? (rowIndex === anchorIndex ? 0 : -1) : undefined, onFocus: keyboardNav
+                                ? () => {
+                                    focusWithinRef.current = true;
+                                    setFocusedIndex(rowIndex);
+                                }
+                                : undefined, onBlur: keyboardNav ? handleRowBlur : undefined, onKeyDown: keyboardNav
+                                ? (event) => handleRowKeyDown(event, row, rowIndex)
+                                : undefined, className: keyboardNav ? ROW_FOCUS_CLASS : undefined, "data-state": enableRowSelection && row.getIsSelected()
+                                ? 'selected'
+                                : undefined, children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { className: cn(cell.column.columnDef.meta?.numeric && NUMERIC_CELL_CLASS, cellDensityClass, cell.column.id === SELECTION_COLUMN_ID && 'w-10'), onClick: cell.column.id === SELECTION_COLUMN_ID
+                                    ? stopPropagation
+                                    : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) })] })] }));
+}

package/dist/esm/enterprise/date-range-picker/index.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Calendar } from '../../components/ui/calendar/index.js';
+/**
+ * The calendar's locale type, taken straight off the Calendar props so the
+ * public signature stays the react-day-picker/date-fns `Locale` without this
+ * package taking a direct date-fns dependency.
+ */
+type CalendarLocale = ComponentProps<typeof Calendar>['locale'];
+export type DateRangeValue = {
+    /** YYYY-MM-DD or '' when unset. */
+    from: string;
+    /** YYYY-MM-DD or '' when unset. */
+    to: string;
+};
+export type DateRangePickerProps = {
+    value: DateRangeValue;
+    onValueChange: (next: DateRangeValue) => void;
+    /** id (and de-facto testid) of the "from" trigger; the label points at it. */
+    fromId: string;
+    toId: string;
+    fromLabel: ReactNode;
+    toLabel: ReactNode;
+    invalid?: boolean;
+    /** Wired as aria-describedby on both triggers while `invalid` is set. */
+    errorId?: string;
+    /** Trigger placeholder when unset. */
+    placeholder?: string;
+    /** Accessible label for the calendar popover. */
+    ariaLabel?: string;
+    /** Label for the clear button. */
+    clearLabel?: string;
+    /** date-fns locale for the calendar. Defaults to en-US. */
+    locale?: CalendarLocale;
+};
+export declare function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid, errorId, placeholder, ariaLabel, clearLabel, locale }: DateRangePickerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/date-range-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/date-range-picker/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAUnD;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,cAAc,CAAA;IACrB,aAAa,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IAC7C,8EAA8E;IAC9E,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB,CAAA;AAkCD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAa,EACb,MAAM,EACN,IAAI,EACJ,SAAS,EACT,OAAO,EACP,OAAe,EACf,OAAO,EACP,WAAwB,EACxB,SAA+B,EAC/B,UAAoB,EACpB,MAAa,EACd,EAAE,oBAAoB,+BA0FtB"}