@marktiderman/genesis-ui 1.3.0 → 2.1.0

package/dist/components/ui/toolbar.d.ts

@@ -0,0 +1,104 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { Toolbar as Toolbar$1 } from 'radix-ui';
+import { VariantProps } from 'class-variance-authority';
+import { buttonVariants } from './button.js';
+import { toggleVariants } from './toggle.js';
+
+declare const toolbarVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ToolbarProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Root> {
+    /** Stable test/automation selector (emitted as `data-testid`). */
+    testID?: string;
+}
+/**
+ * Toolbar — a grouped set of controls that behaves as ONE tab stop.
+ *
+ * This is a primitive, not a layout, and the distinction is the whole reason
+ * it wraps Radix instead of a `<div className="flex gap-1">`. Radix's Toolbar
+ * owns a roving tabindex: Tab moves into and out of the whole group, and
+ * Arrow/Home/End move between the items inside it. A layout, by the framework's
+ * own definition, "positions things without knowing what they are" — this one
+ * knows its children are focusable controls and manages their focus, so it
+ * fails that test and passes the primitive one.
+ *
+ * `orientation` is passed to BOTH Radix (which uses it to decide whether
+ * Left/Right or Up/Down are the navigation keys) and the CVA class (which uses
+ * it to decide the flex direction). Splitting those would let the visual axis
+ * and the keyboard axis disagree — arrows moving "down" a row of buttons.
+ *
+ * @stability Beta
+ */
+declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;
+interface ToolbarButtonProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Button>, VariantProps<typeof buttonVariants> {
+    /** Stable test/automation selector (emitted as `data-testid`). */
+    testID?: string;
+}
+/**
+ * ToolbarButton — a button that participates in the toolbar's roving tabindex.
+ *
+ * Styling reuses `buttonVariants` rather than declaring a second button look:
+ * per the framework's "one home per concept", the question "what does a button
+ * look like?" already has an answer. Only the DEFAULTS differ — `ghost`/`sm`,
+ * because a toolbar is a dense strip of controls, not a page's primary action —
+ * and both remain overridable.
+ *
+ * @stability Beta
+ */
+declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface ToolbarLinkProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Link> {
+    /** Stable test/automation selector (emitted as `data-testid`). */
+    testID?: string;
+}
+/**
+ * ToolbarLink — an anchor inside the toolbar's roving tabindex.
+ *
+ * Kept distinct from `ToolbarButton` because the element matters: a link
+ * navigates and must stay an `<a>` for middle-click, "open in new tab" and the
+ * screen-reader link rotor. Radix also gives it the toolbar's Enter/Space
+ * handling without turning it into a button.
+ *
+ * @stability Beta
+ */
+declare const ToolbarLink: React.ForwardRefExoticComponent<ToolbarLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+interface ToolbarSeparatorProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Separator> {
+}
+/**
+ * ToolbarSeparator — a decorative divider between toolbar groups.
+ *
+ * Radix excludes it from the roving tabindex, so arrow keys skip straight over
+ * it instead of landing on a 1px line.
+ *
+ * Note the inverted axis, which is easy to get backwards: Radix gives the
+ * separator the orientation PERPENDICULAR to the toolbar's, so a horizontal
+ * toolbar contains separators with `data-orientation="vertical"`. The classes
+ * below are keyed on the separator's own orientation accordingly — a vertical
+ * separator is the tall thin rule.
+ *
+ * @stability Beta
+ */
+declare const ToolbarSeparator: React.ForwardRefExoticComponent<ToolbarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ToolbarToggleGroup — a set of pressed/unpressed controls inside a toolbar
+ * (the classic bold / italic / underline cluster).
+ *
+ * @stability Beta
+ */
+declare const ToolbarToggleGroup: React.ForwardRefExoticComponent<(Omit<Toolbar$1.ToolbarToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<Toolbar$1.ToolbarToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;
+interface ToolbarToggleItemProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.ToggleItem>, VariantProps<typeof toggleVariants> {
+    /** Stable test/automation selector (emitted as `data-testid`). */
+    testID?: string;
+}
+/**
+ * ToolbarToggleItem — one member of a `ToolbarToggleGroup`.
+ *
+ * Reuses `toggleVariants` for the same reason `ToolbarButton` reuses
+ * `buttonVariants`: `Toggle` already answers "what does a pressed control look
+ * like?", and a second answer is how two implementations get born.
+ *
+ * @stability Beta
+ */
+declare const ToolbarToggleItem: React.ForwardRefExoticComponent<ToolbarToggleItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, ToolbarToggleGroup, ToolbarToggleItem, type ToolbarToggleItemProps, toolbarVariants };

package/dist/components/ui/toolbar.js

@@ -0,0 +1,6 @@
+export { Toolbar, ToolbarButton, ToolbarLink, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, toolbarVariants } from '../../chunk-YYEGAFUE.js';
+import '../../chunk-C46ITXE4.js';
+import '../../chunk-NWSCYLPT.js';
+import '../../chunk-NZ5WBA4R.js';
+//# sourceMappingURL=toolbar.js.map
+//# sourceMappingURL=toolbar.js.map

package/dist/components/ui/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"toolbar.js"}

package/dist/components/ui/tooltip.d.ts

@@ -1,10 +1,51 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
-interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
-    content: string;
+interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
+    /**
+     * Tooltip body. Accepts any `ReactNode` — icons, formatted or multi-line
+     * content — not just a plain string.
+     */
+    content: React.ReactNode;
     side?: "top" | "bottom" | "left" | "right";
+    /**
+     * Milliseconds a POINTER must rest on the trigger before the tooltip
+     * opens. Keyboard focus is never delayed — Radix opens instantly on focus
+     * regardless of this value.
+     *
+     * Defaults to `0` rather than Radix's own `700`: the CSS-only
+     * implementation this replaced revealed the bubble the instant the pointer
+     * entered, and inheriting a 700ms delay on upgrade would read as the
+     * tooltip having broken. Raise it to get the "don't fire while the cursor
+     * sweeps across the UI" behaviour the hand-rolled version could not offer.
+     */
+    delayDuration?: number;
 }
-declare function Tooltip({ content, side, className, children, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
+/**
+ * Tooltip — hover/focus hint anchored to its trigger child.
+ *
+ * Backed by Radix `Tooltip`, which owns the parts a design system should not
+ * be maintaining itself: open/close state, the pointer delay, opening on
+ * keyboard focus and closing on blur/Escape/scroll, the portal, collision
+ * detection against the viewport, and the `aria-describedby` ↔ `role="tooltip"`
+ * association. The previous implementation was CSS-only — a `group` wrapper
+ * plus `group-hover:block` / `group-focus-within:block` — which meant no
+ * portal (so the bubble was clipped by any `overflow:hidden` ancestor), no
+ * collision handling (so it ran off-screen at the edges), no dismissal, and no
+ * delay.
+ *
+ * The wrapper `<div>` stays, and keeps `group relative inline-flex`: it is
+ * where `className` and the rest of `HTMLAttributes<HTMLDivElement>` land, so
+ * removing it would silently drop props callers already pass. Positioning no
+ * longer depends on it.
+ *
+ * The bubble keeps `whitespace-nowrap`, so rich `content` does not soft wrap
+ * by itself — long multi-line content needs an explicit `<br />`, or a
+ * `whitespace-normal` + width class on the node you pass in. Dropping
+ * `whitespace-nowrap` here would re-wrap every existing single-line string
+ * tooltip, so it stays opt-out rather than opt-in.
+ *
+ * @stability Stable
+ */
+declare function Tooltip({ content, side, delayDuration, className, children, ...props }: TooltipProps): React.JSX.Element;
 
-export { Tooltip };
+export { Tooltip, type TooltipProps };

package/dist/components/ui/tooltip.js

@@ -1,4 +1,4 @@
-export { Tooltip } from '../../chunk-EI5EGKHL.js';
+export { Tooltip } from '../../chunk-G5YKBPBF.js';
 import '../../chunk-NZ5WBA4R.js';
 //# sourceMappingURL=tooltip.js.map
 //# sourceMappingURL=tooltip.js.map

package/dist/components/ui/typography.d.ts

@@ -1,14 +1,13 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
-declare function H1({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
-declare function H2({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
-declare function H3({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
-declare function H4({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
-declare function P({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
-declare function Lead({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
-declare function Large({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-declare function Small({ className, ...props }: React.HTMLAttributes<HTMLElement>): react_jsx_runtime.JSX.Element;
-declare function Muted({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
+declare function H1({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+declare function H2({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+declare function H3({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+declare function H4({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+declare function P({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+declare function Lead({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+declare function Large({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function Small({ className, ...props }: React.HTMLAttributes<HTMLElement>): React.JSX.Element;
+declare function Muted({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
 
 export { H1, H2, H3, H4, Large, Lead, Muted, P, Small };

package/dist/components/ui/visually-hidden.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { VisuallyHidden as VisuallyHidden$1 } from 'radix-ui';
+
+interface VisuallyHiddenProps extends React.ComponentPropsWithoutRef<typeof VisuallyHidden$1.Root> {
+    /** Stable test/automation selector (emitted as `data-testid`). */
+    testID?: string;
+}
+/**
+ * VisuallyHidden — content removed from the visual layout but kept in the
+ * accessibility tree.
+ *
+ * This is the correct tool for the label an icon-only control needs, for the
+ * `DialogTitle` a dialog must have even when the design shows none, and for
+ * live-region status text. It is NOT `display: none` and it is NOT
+ * `visibility: hidden` — both of those remove the node from the a11y tree too,
+ * which is the exact opposite of the intent.
+ *
+ * Why Radix rather than Tailwind's `sr-only`: the two produce the same result,
+ * but `sr-only` is a class a consumer's `@apply`, a purge misconfiguration, or
+ * a competing utility can quietly defeat, and the failure is silent — the text
+ * simply becomes visible, or the layout shifts, and nothing in a build catches
+ * it. Radix applies the clip rectangle as inline styles on the element itself,
+ * so there is no stylesheet for the consumer's build to lose.
+ *
+ * **That robustness cuts both ways, and it is the one thing to know before
+ * reaching for this.** An inline style beats any ordinary class declaration, so
+ * a `className` cannot override the clipping either — not accidentally, and
+ * not on purpose. `className` is merged for non-visual concerns (a test hook, a
+ * data attribute target); it is NOT a way to reveal the content.
+ *
+ * The escape hatch is the `style` prop, which Radix spreads *after* its own
+ * (`{...VISUALLY_HIDDEN_STYLES, ...props.style}`) and which therefore wins.
+ * Both behaviours are pinned in this component's tests, because the docs above
+ * depend on them.
+ *
+ * **This is therefore the wrong primitive for a skip link.** A skip link is
+ * hidden until focused, and "until focused" is state, not a class — a static
+ * `style` prop cannot express it and `focus-within:` utilities cannot win
+ * against the inline rule. Give a skip link its own element with real CSS, or
+ * drive the `style` prop from `onFocus`/`onBlur`. Use `VisuallyHidden` for text
+ * that stays hidden: control labels, dialog titles a design omits, live-region
+ * status text.
+ *
+ * @stability Beta
+ */
+declare const VisuallyHidden: React.ForwardRefExoticComponent<VisuallyHiddenProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { VisuallyHidden, type VisuallyHiddenProps };

package/dist/components/ui/visually-hidden.js

@@ -0,0 +1,4 @@
+export { VisuallyHidden } from '../../chunk-SY62XJFA.js';
+import '../../chunk-NZ5WBA4R.js';
+//# sourceMappingURL=visually-hidden.js.map
+//# sourceMappingURL=visually-hidden.js.map

package/dist/components/ui/visually-hidden.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"visually-hidden.js"}

package/dist/dashboard-page-C0TihRl5.d.ts

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const gridVariants: (props?: ({
+    cols?: 1 | 2 | 4 | 3 | 5 | 6 | null | undefined;
+    gap?: "sm" | "lg" | "none" | "xs" | "md" | "xl" | "2xl" | "3xl" | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
+    /** Stable test/automation selector (emitted as `data-testid`). */
+    testID?: string;
+}
+/**
+ * Grid — two-dimensional flow for card and tile collections.
+ *
+ * `cols` is the count at the widest breakpoint; the class it emits is a
+ * responsive ramp, so a card grid reflows on its own without the consumer
+ * writing a single breakpoint.
+ *
+ * ```tsx
+ * <Grid cols={3} gap="lg">
+ *   {people.map((p) => <PersonCard key={p.id} person={p} />)}
+ * </Grid>
+ *
+ * <Grid cols={4} gap="sm" align="start">
+ *   {stats.map((s) => <StatCard key={s.id} {...s} />)}
+ * </Grid>
+ * ```
+ *
+ * Deliberately NOT here: `grid-template-areas`, explicit row/column
+ * placement, and per-child spans. A component that positions a *named*
+ * child has stopped positioning things without knowing what they are, and
+ * a grid whose children each carry placement props is a CSS file wearing a
+ * React costume — reach for `className` at that point.
+ *
+ * @stability Beta
+ */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+
+interface DashboardPageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Page title. Rendered as the page's single `<h1>`. */
+    title: React.ReactNode;
+    /** Supporting line under the title — a date range, a scope, a filter. */
+    subtitle?: React.ReactNode;
+    /** Trailing controls — a period picker, an export, a refresh. */
+    actions?: React.ReactNode;
+    /**
+     * The stat row: `StatCard`s, or anything tile-shaped. Laid out in a `Grid`
+     * that ramps down to one column on a phone. Omit it and no grid renders.
+     */
+    stats?: React.ReactNode;
+    /**
+     * Tiles across the stat row at the widest breakpoint. Default `4`.
+     * Reuses `Grid`'s `cols` scale, so the responsive ramp is the same one
+     * every other card grid in the app gets.
+     */
+    statColumns?: NonNullable<GridProps["cols"]>;
+    /** Stable test/automation selector (emitted as `data-testid`). */
+    testID?: string;
+}
+/**
+ * DashboardPage — a stat row over a flexible region of charts, tables and
+ * sections.
+ *
+ * ```tsx
+ * <DashboardPage
+ *   title="This quarter"
+ *   subtitle="1 Apr – 30 Jun"
+ *   actions={<DatePicker … />}
+ *   stats={
+ *     <>
+ *       <StatCard label="Active clients" value={42} />
+ *       <StatCard label="Sessions" value={318} trend={{ value: 12, label: "vs Q1" }} />
+ *     </>
+ *   }
+ * >
+ *   <Section title="Revenue"><ChartContainer …/></Section>
+ *   <Section title="At risk"><DataTable …/></Section>
+ * </DashboardPage>
+ * ```
+ *
+ * The two regions are separated on purpose. Stats are a fixed-shape row that
+ * must reflow as a unit; everything below is free-form and stacks. Folding
+ * both into one `children` is how the stat row ends up hand-gridded per page,
+ * with a different breakpoint each time — the exact drift `Grid` exists to
+ * stop.
+ *
+ * Children stack at `gap-8`, wider than the page's own `gap-6`, so a chart
+ * and the table under it don't read as one block.
+ *
+ * The header row is markup, not a component, and deliberately not
+ * `PageHeader` — see `./detail-page` for the measured reasons composing it
+ * was rejected across all four templates. Width is left to `Container` —
+ * wrap, don't duplicate.
+ *
+ * This is a **layout**: it positions tiles and regions and never fetches a
+ * metric. There is deliberately no data-bound twin — binding a dashboard
+ * needs an aggregate/metric contract, and `genesis-core` ships none. Adding
+ * a template ahead of its contract is what `docs/FRAMEWORK.md` warns against
+ * in "Why templates need the contract first".
+ *
+ * @stability Beta
+ */
+declare const DashboardPage: React.ForwardRefExoticComponent<DashboardPageProps & React.RefAttributes<HTMLDivElement>>;
+
+export { DashboardPage as D, Grid as G, type DashboardPageProps as a, type GridProps as b, gridVariants as g };

package/dist/hooks/index.d.ts

@@ -6,10 +6,9 @@ export { useViewPreference } from './use-view-preference.js';
 export { Density, ViewSettings, useViewSettings } from './use-view-settings.js';
 export { UseSavedViewsReturn, useSavedViews } from './use-saved-views.js';
 export { RouteMap, createPrefetch } from './use-prefetch.js';
-export { R as ResourceActions, a as ResourceColumnDef, U as UseResourcePageProps, b as UseResourcePageReturn, u as useResourcePage } from '../use-resource-page-BXBv_Xah.js';
+export { R as ResourceActions, a as ResourceColumnDef, U as UseResourcePageProps, b as UseResourcePageReturn, u as useResourcePage } from '../use-resource-page-DTQS011Q.js';
 export { CommandPalette, CommandPaletteItem, CommandPaletteProps, useCommandPaletteHotkey } from '../components/ui/command-palette.js';
 import '../navigation-CpOEyUSb.js';
 import 'react';
-import '../ViewToggle-DDe_Luj2.js';
-import 'react/jsx-runtime';
+import '../view-toggle-CahQ87PW.js';
 import '@marktiderman/genesis-core/provider';

package/dist/hooks/index.js

@@ -1,14 +1,14 @@
-export { useResourcePage } from '../chunk-QLCDAFS7.js';
+export { useResourcePage } from '../chunk-GDFNAHI4.js';
 export { useSavedViews } from '../chunk-GCQFVMPI.js';
-export { useViewPreference } from '../chunk-XISSLIMH.js';
+export { useViewPreference } from '../chunk-FTTNGGLA.js';
 export { useViewSettings } from '../chunk-OZ7ZAYCS.js';
-export { CommandPalette, useCommandPaletteHotkey } from '../chunk-A2OXCNNY.js';
-import '../chunk-7OBL3H5P.js';
-import '../chunk-YZEA5TGK.js';
+export { CommandPalette, useCommandPaletteHotkey } from '../chunk-CNTWQSUT.js';
+import '../chunk-SEFK4NZV.js';
+import '../chunk-7XMZVISM.js';
 import '../chunk-NZ5WBA4R.js';
 export { useDataFilters } from '../chunk-D4JTQYP5.js';
 import '../chunk-6NPEMLBA.js';
-export { useKeyboardNavigation } from '../chunk-T465NJRL.js';
+export { useKeyboardNavigation } from '../chunk-YJ6MPS6U.js';
 export { useIsMobile } from '../chunk-M7AU5DDM.js';
 export { createPrefetch } from '../chunk-HSHIZHYR.js';
 export { useOne, useResource, useResourceForm, useWizard } from '@marktiderman/genesis-core/hooks';

package/dist/hooks/use-keyboard-navigation.d.ts

@@ -1,5 +1,26 @@
 import * as React from 'react';
 
+/**
+ * Vim/Superhuman-style list navigation: j/k (or Arrow Up/Down) move a
+ * focused-item cursor *one row at a time*, Enter opens the focused item, x
+ * toggles its selection, and Backspace goes "back" (e.g. closes an open
+ * detail view). In a multi-column grid the vertical keys step by the
+ * container's live column count and Arrow Left/Right step by one, so the
+ * cursor follows the grid the user can see rather than treating it as a flat
+ * list. Intended for list/grid views such as `DataGrid` — attach
+ * `containerRef` to the scrollable item container so the column count can be
+ * measured and focus changes can scroll the focused item into view.
+ *
+ * Deliberately inert, so a default-on consumer can't break the surrounding
+ * app: modified chords (Ctrl/Meta/Alt) are never captured, text-entry
+ * surfaces keep every key, focused controls (or anything inside a
+ * dialog/menu/listbox) keep theirs, composite widgets keep Backspace, and a
+ * key that *does nothing* is never swallowed — Arrow Up/Down fall through to
+ * the browser's page scrolling on an empty list, or at either end of a full
+ * one, instead of dying silently.
+ *
+ * @stability Beta
+ */
 interface KeyboardNavOptions {
     /** Total number of navigable items */
     itemCount: number;
@@ -7,13 +28,47 @@ interface KeyboardNavOptions {
     onOpen?: (index: number) => void;
     /** Called when x is pressed on focused item */
     onToggleSelect?: (index: number) => void;
+    /**
+     * Called when Backspace (⌫) is pressed — the conventional "go back" key,
+     * e.g. to close an open detail panel/modal and return to the list. Fires
+     * regardless of whether an item is currently focused (mirrors Escape),
+     * since "go back" should still work if a detail view was opened by mouse
+     * click rather than keyboard navigation. Not gated behind `focusedIndex`.
+     *
+     * Backspace is only intercepted (and its default suppressed) while this
+     * is supplied — pass it conditionally, i.e. only while there is something
+     * to go back from, so the key stays available to the browser and the
+     * surrounding app the rest of the time. Even then it is left alone for
+     * text-entry surfaces and for composite widgets that use Backspace
+     * themselves (see `KEEPS_BACKSPACE_SELECTOR`).
+     */
+    onBack?: (focusedIndex: number) => void;
     /** Ref to the search input to focus on "/" */
     searchInputRef?: React.RefObject<HTMLInputElement | null>;
     /** Whether navigation is enabled. Default true */
     enabled?: boolean;
-    /** Number of columns in grid for arrow key navigation */
+    /**
+     * Columns in the navigable grid. Drives the vertical stride: Arrow
+     * Down/Up (and j/k) move by `columns`, Arrow Left/Right by one — so in a
+     * 3-up grid ArrowDown moves *down* a row instead of one card to the right.
+     *
+     * Leave unset (the default) to measure the live count off `containerRef`'s
+     * resolved `grid-template-columns` on each keypress, which is the only
+     * value that stays correct across a responsive column ramp. Pass a number
+     * only to override that measurement. Either way a single-column container
+     * behaves exactly as a flat list: stride 1, Left/Right inert.
+     */
     columns?: number;
+    /**
+     * An overlay (detail panel, modal, form) is open above the list. Cursor
+     * movement and activation keys are suspended so they can't drive the list
+     * hidden behind it, while the dismissal keys (`onBack`/Backspace, Escape)
+     * stay live so the overlay can still be closed from the keyboard.
+     * Default false.
+     */
+    overlayOpen?: boolean;
 }
+/** @stability Beta */
 interface KeyboardNavResult {
     /** Currently focused item index (-1 = none) */
     focusedIndex: number;
@@ -24,6 +79,7 @@ interface KeyboardNavResult {
     /** Whether keyboard nav is actively engaged (user has pressed j/k) */
     isActive: boolean;
 }
-declare function useKeyboardNavigation({ itemCount, onOpen, onToggleSelect, searchInputRef, enabled, columns, }: KeyboardNavOptions): KeyboardNavResult;
+/** @stability Beta */
+declare function useKeyboardNavigation({ itemCount, onOpen, onToggleSelect, onBack, searchInputRef, enabled, columns, overlayOpen, }: KeyboardNavOptions): KeyboardNavResult;
 
 export { type KeyboardNavOptions, type KeyboardNavResult, useKeyboardNavigation };

package/dist/hooks/use-keyboard-navigation.js

@@ -1,3 +1,3 @@
-export { useKeyboardNavigation } from '../chunk-T465NJRL.js';
+export { useKeyboardNavigation } from '../chunk-YJ6MPS6U.js';
 //# sourceMappingURL=use-keyboard-navigation.js.map
 //# sourceMappingURL=use-keyboard-navigation.js.map

package/dist/hooks/use-resource-page.d.ts

@@ -1,6 +1,5 @@
 import 'react';
-export { R as ResourceActions, a as ResourceColumnDef, U as UseResourcePageProps, b as UseResourcePageReturn, t as titleCase, u as useResourcePage } from '../use-resource-page-BXBv_Xah.js';
-import '../ViewToggle-DDe_Luj2.js';
+export { R as ResourceActions, a as ResourceColumnDef, U as UseResourcePageProps, b as UseResourcePageReturn, t as titleCase, u as useResourcePage } from '../use-resource-page-DTQS011Q.js';
+import '../view-toggle-CahQ87PW.js';
 import '@marktiderman/genesis-core/provider';
-import 'react/jsx-runtime';
 import './use-view-settings.js';

package/dist/hooks/use-resource-page.js

@@ -1,4 +1,4 @@
-export { titleCase, useResourcePage } from '../chunk-QLCDAFS7.js';
-import '../chunk-XISSLIMH.js';
+export { titleCase, useResourcePage } from '../chunk-GDFNAHI4.js';
+import '../chunk-FTTNGGLA.js';
 //# sourceMappingURL=use-resource-page.js.map
 //# sourceMappingURL=use-resource-page.js.map

package/dist/hooks/use-view-preference.d.ts

@@ -1,5 +1,5 @@
-import { V as ViewMode } from '../ViewToggle-DDe_Luj2.js';
-import 'react/jsx-runtime';
+import { V as ViewMode } from '../view-toggle-CahQ87PW.js';
+import 'react';
 
 declare function useViewPreference(key: string, defaultMode?: ViewMode): [ViewMode, (mode: ViewMode) => void];
 

package/dist/hooks/use-view-preference.js

@@ -1,3 +1,3 @@
-export { useViewPreference } from '../chunk-XISSLIMH.js';
+export { useViewPreference } from '../chunk-FTTNGGLA.js';
 //# sourceMappingURL=use-view-preference.js.map
 //# sourceMappingURL=use-view-preference.js.map

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-export { Button, ButtonProps } from './components/ui/button.js';
+export { Button, ButtonAsChildProps, ButtonProps } from './components/ui/button.js';
 export { Badge, BadgeProps } from './components/ui/badge.js';
+export { StatusBadge, StatusBadgeProps, StatusBadgeStatus, statusBadgeVariants } from './components/patterns/status-badge.js';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './components/ui/card.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/ui/dialog.js';
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from './components/ui/alert-dialog.js';
@@ -11,17 +12,19 @@ export { Progress } from './components/ui/progress.js';
 export { Skeleton } from './components/ui/skeleton.js';
 export { Separator } from './components/ui/separator.js';
 export { ScrollArea } from './components/ui/scroll-area.js';
-export { Tooltip } from './components/ui/tooltip.js';
+export { Tooltip, TooltipProps } from './components/ui/tooltip.js';
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './components/ui/collapsible.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/ui/dropdown-menu.js';
 export { Popover, PopoverContent, PopoverTrigger } from './components/ui/popover.js';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/ui/table.js';
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from './components/ui/command.js';
 export { CommandPalette, CommandPaletteItem, CommandPaletteProps, useCommandPaletteHotkey } from './components/ui/command-palette.js';
-export { EmptyState, NoFeaturesFound, NoFeedbackFound, NoSearchResults } from './components/ui/empty-state.js';
+export { EmptyState, EmptyStateProps, NoFeaturesFound, NoFeedbackFound, NoSearchResults } from './components/patterns/empty-state.js';
 export { Label } from './components/ui/label.js';
 export { Textarea } from './components/ui/textarea.js';
 export { Switch } from './components/ui/switch.js';
+export { SettingsRow, SettingsRowProps } from './components/patterns/settings-row.js';
+export { ToggleRow, ToggleRowProps } from './components/patterns/toggle-row.js';
 export { RadioGroup, RadioGroupItem } from './components/ui/radio-group.js';
 export { Alert, AlertDescription, AlertTitle, alertVariants } from './components/ui/alert.js';
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from './components/ui/pagination.js';
@@ -30,6 +33,7 @@ export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHe
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './components/ui/drawer.js';
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './components/ui/accordion.js';
 export { Avatar, AvatarFallback, AvatarImage } from './components/ui/avatar.js';
+export { UserAvatar, UserAvatarProps, userAvatarVariants } from './components/patterns/user-avatar.js';
 export { Slider } from './components/ui/slider.js';
 export { Toggle, toggleVariants } from './components/ui/toggle.js';
 export { ToggleGroup, ToggleGroupItem } from './components/ui/toggle-group.js';
@@ -43,6 +47,7 @@ export { Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, Car
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './components/ui/resizable.js';
 export { Toaster } from './components/ui/sonner.js';
 export { Spinner, SpinnerProps } from './components/ui/spinner.js';
+export { PageLoading, PageLoadingProps, pageLoadingVariants } from './components/patterns/page-loading.js';
 export { Kbd, KbdProps } from './components/ui/kbd.js';
 export { H1, H2, H3, H4, Large, Lead, Muted, P, Small } from './components/ui/typography.js';
 export { ButtonGroup, ButtonGroupProps } from './components/ui/button-group.js';
@@ -50,36 +55,28 @@ export { InputGroup, InputGroupInput, InputGroupPrefix, InputGroupProps, InputGr
 export { Calendar, CalendarDayButton } from './components/ui/calendar.js';
 export { DatePicker, DatePickerProps } from './components/ui/date-picker.js';
 export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './components/ui/chart.js';
-export { FormDescription, FormError, FormField, FormLabel } from './components/ui/form-field.js';
+export { FormDescription, FormError, FormField, FormLabel } from './components/patterns/form-field.js';
+export { Toolbar, ToolbarButton, ToolbarButtonProps, ToolbarLink, ToolbarLinkProps, ToolbarProps, ToolbarSeparator, ToolbarSeparatorProps, ToolbarToggleGroup, ToolbarToggleItem, ToolbarToggleItemProps, toolbarVariants } from './components/ui/toolbar.js';
+export { VisuallyHidden, VisuallyHiddenProps } from './components/ui/visually-hidden.js';
+export { AccessibleIcon, AccessibleIconProps } from './components/ui/accessible-icon.js';
+export { PasswordToggleField, PasswordToggleFieldIcon, PasswordToggleFieldIconProps, PasswordToggleFieldInput, PasswordToggleFieldInputProps, PasswordToggleFieldProps, PasswordToggleFieldSlot, PasswordToggleFieldSlotProps, PasswordToggleFieldToggle, PasswordToggleFieldToggleProps } from './components/ui/password-toggle-field.js';
+export { C as Container, a as ContainerProps, G as GAP_CLASSES, S as Section, b as SectionProps, c as SpaceToken, d as Stack, e as StackProps, f as containerVariants, s as sectionHeadingVariants, g as spaceScale, h as stackVariants } from './spacing-BS6qECD4.js';
+export { D as DashboardPage, a as DashboardPageProps, G as Grid, b as GridProps, g as gridVariants } from './dashboard-page-C0TihRl5.js';
+export { S as Split, a as SplitBreakpoint, b as SplitProps, c as SplitRatio, s as splitVariants } from './split-Dk9f4Mi0.js';
+export { DetailPage, DetailPageProps } from './components/layout/detail-page.js';
+export { FormPage, FormPageProps } from './components/layout/form-page.js';
+export { SettingsPage, SettingsPageProps, SettingsPageSection } from './components/layout/settings-page.js';
 export { cn } from './utils.js';
 export { D as DefaultLink, G as GenesisLinkProps, L as LinkComponent, N as NavigateFn, S as SearchParamsAdapter, d as defaultNavigate, i as isPathActive, u as useBrowserSearchParams } from './navigation-CpOEyUSb.js';
 export { toast } from 'sonner';
-import 'react/jsx-runtime';
 import 'class-variance-authority/types';
 import 'react';
 import 'class-variance-authority';
-import '@radix-ui/react-dialog';
-import '@radix-ui/react-alert-dialog';
-import '@radix-ui/react-checkbox';
-import '@radix-ui/react-select';
-import '@radix-ui/react-collapsible';
-import '@radix-ui/react-dropdown-menu';
-import '@radix-ui/react-popover';
+import '@marktiderman/genesis-design-system/tokens';
+import 'radix-ui';
 import 'lucide-react';
-import '@radix-ui/react-label';
-import '@radix-ui/react-switch';
-import '@radix-ui/react-radio-group';
 import 'vaul';
-import '@radix-ui/react-accordion';
-import '@radix-ui/react-avatar';
-import '@radix-ui/react-slider';
-import '@radix-ui/react-toggle';
-import '@radix-ui/react-toggle-group';
-import '@radix-ui/react-context-menu';
-import '@radix-ui/react-hover-card';
-import '@radix-ui/react-navigation-menu';
-import '@radix-ui/react-menubar';
-import '@radix-ui/react-aspect-ratio';
+import '@radix-ui/react-dialog';
 import 'input-otp';
 import 'embla-carousel-react';
 import 'react-resizable-panels';