@hackcove/ui-react 0.9.0 → 0.9.2

package/dist/SidebarLayout.d.ts

@@ -0,0 +1,21 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+/**
+ * A `rail` of links beside the `children` canvas, in the Container the shell already gives every
+ * page (a plain `<AppShell>`, no `bleed`): the rail starts at the header logo's x and the canvas
+ * ends at the header's right edge. The rail has no background and no border, so it is a list of
+ * links on the page; a `Tabs variant="pill" orientation="vertical"` is its content. From `md` it is `w-56` with
+ * the canvas filling the rest, and it stays in view under the shell's header as a long page scrolls;
+ * a rail taller than the screen scrolls itself, so its last link is reachable. Below `md` it stacks
+ * above the canvas and nothing sticks. A long rail sets `railLabel`:
+ * below `md` it then folds behind a disclosure of that name, closed, so the page comes first on a
+ * phone, and from `md` it is the same rail. Upgrading from 0.2: the rail no longer has a fill, a
+ * border or a fixed height, and it no longer sits beside the canvas on a phone.
+ */
+export declare function SidebarLayout({ rail, railLabel, children, ...rest }: {
+    /** The links beside the canvas, usually a `Tabs variant="pill" orientation="vertical"`. */
+    rail: ReactNode;
+    /** Folds the rail behind a disclosure with this name below `md` (a long rail). Left out, the rail is always open. */
+    railLabel?: string | undefined;
+    children: ReactNode;
+} & Passthrough): ReactElement;

package/dist/SidebarLayout.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+import { STICKY_ASIDE_MD, STICKY_SCROLL_MD } from "./stickyColumn.js";
+/**
+ * A `rail` of links beside the `children` canvas, in the Container the shell already gives every
+ * page (a plain `<AppShell>`, no `bleed`): the rail starts at the header logo's x and the canvas
+ * ends at the header's right edge. The rail has no background and no border, so it is a list of
+ * links on the page; a `Tabs variant="pill" orientation="vertical"` is its content. From `md` it is `w-56` with
+ * the canvas filling the rest, and it stays in view under the shell's header as a long page scrolls;
+ * a rail taller than the screen scrolls itself, so its last link is reachable. Below `md` it stacks
+ * above the canvas and nothing sticks. A long rail sets `railLabel`:
+ * below `md` it then folds behind a disclosure of that name, closed, so the page comes first on a
+ * phone, and from `md` it is the same rail. Upgrading from 0.2: the rail no longer has a fill, a
+ * border or a fixed height, and it no longer sits beside the canvas on a phone.
+ */
+export function SidebarLayout({ rail, railLabel, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: "flex flex-col gap-8 md:flex-row md:gap-10", children: [_jsx("aside", { className: cx("w-full shrink-0 md:w-56", STICKY_ASIDE_MD), children: _jsx("div", { className: STICKY_SCROLL_MD, children: railLabel === undefined ? (rail) : (_jsxs("details", { className: "group md:[&::details-content]:[content-visibility:visible]", children: [_jsxs("summary", { className: cx("flex cursor-pointer list-none items-center justify-between rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 select-none hover:bg-slate-50 md:hidden [&::-webkit-details-marker]:hidden", focusRing), children: [railLabel, _jsx("svg", { viewBox: "0 0 20 20", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "shrink-0 text-slate-500 group-open:rotate-180", children: _jsx("path", { d: "M5 8l5 5 5-5" }) })] }), _jsx("div", { className: "mt-2 md:mt-0", children: rail })] })) }) }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
+}

package/dist/Stack.d.ts

@@ -2,6 +2,9 @@ import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from
 import type { Passthrough, Unstyled } from "./props.js";
 export type StackGap = "xs" | "sm" | "md" | "lg" | "xl";
 export declare const STACK_GAP: Record<StackGap, string>;
+export type StackRowFrom = "sm" | "md" | "lg";
+/** The breakpoint where a `rowFrom` Stack turns from a column into a row. */
+export declare const STACK_ROW_FROM: Record<StackRowFrom, string>;
 export type StackWidth = "narrow" | "default" | "wide" | "full";
 /** `default` adds nothing: the Stack is as wide as its parent. */
 export declare const STACK_WIDTH: Record<StackWidth, string | undefined>;
@@ -14,12 +17,16 @@ export declare const STACK_WIDTH: Record<StackWidth, string | undefined>;
  * is the parent's whole width and `default` sets nothing. A capped Stack starts at its parent's left
  * edge (it is never re-centred), so its first line lines up with every other block on the page.
  *
+ * `rowFrom` turns the column into a row from `sm`, `md` or `lg` (a column below it): the blocks sit
+ * side by side, `gap` apart, and a `ClusterGrow` around one of them takes the width left. Without it the
+ * Stack is always a column; a row that is a row at every width is a `Cluster`.
+ *
  * `as` is a closed set: `div` (default), `section`, `form`, `ul` or `ol`. A `form` takes the form
  * props (`onSubmit`, `action`, `method`, `noValidate`, ...). A `ul` or `ol` is drawn with no
  * markers and its children are `<li>`s, as in `BulletList` and `Timeline`: the Stack does not wrap
  * them, so a child is one list item and `Text as="li"` or a bare `<li>` both work.
  */
-export declare function Stack({ gap, width, as, children, ...rest }: StackProps): ReactElement;
+export declare function Stack({ gap, width, rowFrom, as, children, ...rest }: StackProps): ReactElement;
 type StackBase = {
     /**
      * The space between blocks: `xs` gap-2, `sm` gap-4, `md` gap-6, `lg` gap-8, `xl` gap-12 (gap-16 from `sm`).
@@ -31,6 +38,13 @@ type StackBase = {
      * @default default
      */
     width?: StackWidth | undefined;
+    /**
+     * Turns the column into a row from this breakpoint (`sm`, `md` or `lg`), a column below it: a main
+     * area beside a side column on a wide screen, stacked on a phone. In the row the blocks sit side by side
+     * the same `gap` apart and are as tall as the tallest; wrap the one that takes the width left in a
+     * `ClusterGrow`. Left out, the Stack is always a column.
+     */
+    rowFrom?: StackRowFrom | undefined;
     children?: ReactNode;
 };
 type StackProps = StackBase & (({

package/dist/Stack.js

@@ -9,6 +9,12 @@ export const STACK_GAP = {
     lg: "gap-8",
     xl: "gap-12 sm:gap-16",
 };
+/** The breakpoint where a `rowFrom` Stack turns from a column into a row. */
+export const STACK_ROW_FROM = {
+    sm: "sm:flex-row",
+    md: "md:flex-row",
+    lg: "lg:flex-row",
+};
 /** `default` adds nothing: the Stack is as wide as its parent. */
 export const STACK_WIDTH = {
     narrow: "max-w-3xl",
@@ -25,13 +31,17 @@ export const STACK_WIDTH = {
  * is the parent's whole width and `default` sets nothing. A capped Stack starts at its parent's left
  * edge (it is never re-centred), so its first line lines up with every other block on the page.
  *
+ * `rowFrom` turns the column into a row from `sm`, `md` or `lg` (a column below it): the blocks sit
+ * side by side, `gap` apart, and a `ClusterGrow` around one of them takes the width left. Without it the
+ * Stack is always a column; a row that is a row at every width is a `Cluster`.
+ *
  * `as` is a closed set: `div` (default), `section`, `form`, `ul` or `ol`. A `form` takes the form
  * props (`onSubmit`, `action`, `method`, `noValidate`, ...). A `ul` or `ol` is drawn with no
  * markers and its children are `<li>`s, as in `BulletList` and `Timeline`: the Stack does not wrap
  * them, so a child is one list item and `Text as="li"` or a bare `<li>` both work.
  */
-export function Stack({ gap = "md", width = "default", as = "div", children, ...rest }) {
-    return (_jsx(Box, { tag: as, className: cx("flex flex-col", (as === "ul" || as === "ol") && "list-none", STACK_GAP[gap], STACK_WIDTH[width], "*:data-page-header:mb-0"), ...rest, children: children }));
+export function Stack({ gap = "md", width = "default", rowFrom, as = "div", children, ...rest }) {
+    return (_jsx(Box, { tag: as, className: cx("flex flex-col", (as === "ul" || as === "ol") && "list-none", rowFrom && STACK_ROW_FROM[rowFrom], STACK_GAP[gap], STACK_WIDTH[width], "*:data-page-header:mb-0"), ...rest, children: children }));
 }
 /** The element `as` picked, drawn with props already narrowed by `StackProps`. */
 function Box({ tag: Tag, ...props }) {

package/dist/StatTile.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes, ReactElement, ReactNode } from "react";
 import type { Unstyled } from "./props.js";
-/** The colour of a tile's value (and of its accent bar): plain ink, green or red. */
-export type StatTileTone = "neutral" | "positive" | "negative";
+/** The colour of a tile's value (and of its accent bar): plain ink, green, amber or red. */
+export type StatTileTone = "neutral" | "positive" | "warn" | "negative";
 /**
  * One headline figure: an uppercase caption over a large tabular-nums value, with an optional
  * hint line beneath. `tone` colours the value; `accent` adds a bar across the top edge in the same

package/dist/StatTile.js

@@ -5,11 +5,13 @@ import { Overline } from "./typography.js";
 const VALUE = {
     neutral: "text-slate-900",
     positive: "text-emerald-700",
+    warn: "text-amber-700",
     negative: "text-red-700",
 };
 const BAR = {
     neutral: BAR_FILL.accent,
     positive: BAR_FILL.positive,
+    warn: BAR_FILL.warn,
     negative: BAR_FILL.negative,
 };
 /**

package/dist/Table.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import type { CalloutTone } from "./Callout.js";
 import { type TextTone } from "./typography.js";
-type Align = "start" | "end";
+type Align = "start" | "center" | "end";
 /**
  * The text of a cell: its weight and colour. `default`, `strong` and `muted` are the plain ones; the
  * rest are the Callout's tones, for an amount that carries a meaning (a gain, an overspend). Colour
@@ -15,17 +15,28 @@ type TableVariant = "card" | "plain";
  * stripe takes the tone's text colour, which every theme already remaps, so no new palette entry.
  */
 export type RowTone = "neutral" | "info" | "positive" | "warn" | "danger" | "muted";
-/** The row's status mark: a `tone` (stripe and fill, or faded) or a `stripe` alone, never both. */
+/** The row's mark: a `tone` (stripe and fill, or faded), a `stripe` alone or `emphasis`, only one of them. */
 type RowMark = {
-    /** The row's status: a stripe on the leading edge plus the tone's soft fill, or `muted` to fade the row. Give `tone` or `stripe`, not both. */
+    /** The row's status: a stripe on the leading edge plus the tone's soft fill, or `muted` to fade the row. Give only one of `tone`, `stripe` and `emphasis`. */
     tone?: RowTone | undefined;
-    /** A stripe on the leading edge in this tone, with no fill. Give `stripe` or `tone`, not both. */
+    /** A stripe on the leading edge in this tone, with no fill. Give only one of `tone`, `stripe` and `emphasis`. */
     stripe?: undefined;
+    /** A subtotal in the body: the look of a `TableFoot` row, with strong cells, a firmer line above and no hover. Give only one of `tone`, `stripe` and `emphasis`. */
+    emphasis?: false | undefined;
 } | {
-    /** A stripe on the leading edge in this tone, with no fill. Give `stripe` or `tone`, not both. */
+    /** A stripe on the leading edge in this tone, with no fill. Give only one of `tone`, `stripe` and `emphasis`. */
     stripe?: TextTone | undefined;
-    /** The row's status: a stripe on the leading edge plus the tone's soft fill, or `muted` to fade the row. Give `tone` or `stripe`, not both. */
+    /** The row's status: a stripe on the leading edge plus the tone's soft fill, or `muted` to fade the row. Give only one of `tone`, `stripe` and `emphasis`. */
     tone?: undefined;
+    /** A subtotal in the body: the look of a `TableFoot` row, with strong cells, a firmer line above and no hover. Give only one of `tone`, `stripe` and `emphasis`. */
+    emphasis?: false | undefined;
+} | {
+    /** A subtotal in the body: the look of a `TableFoot` row, with strong cells, a firmer line above and no hover. Give only one of `tone`, `stripe` and `emphasis`. */
+    emphasis: boolean;
+    /** The row's status: a stripe on the leading edge plus the tone's soft fill, or `muted` to fade the row. Give only one of `tone`, `stripe` and `emphasis`. */
+    tone?: undefined;
+    /** A stripe on the leading edge in this tone, with no fill. Give only one of `tone`, `stripe` and `emphasis`. */
+    stripe?: undefined;
 };
 /** What an element passes through (`data-*`, `aria-*`, `id`, …): the layout and the children stay the component's. */
 type Rest<Tag extends "table" | "thead" | "tbody" | "tfoot" | "tr" | "th" | "td", Own extends string = never> = Omit<ComponentPropsWithoutRef<Tag>, "className" | "style" | "children" | Own>;
@@ -73,9 +84,10 @@ export declare function TableFoot({ children, ...rest }: {
  * linked row's link, not a hover fill, says it is clickable. `stripe` is the stripe alone, in the
  * `TextTone` colours (the first five names of a `StackedBar` segment's `VizTone`), with no fill: the row keeps its hover
  * and its own look. Give `tone` or `stripe`, not both. Body rows only; colour alone does not say it,
- * so name the status in a cell too (a `Pill`). A bold subtotal is not a tone: it is a `TableFoot` row.
+ * so name the status in a cell too (a `Pill`). A bold subtotal is not a tone: a total of the whole
+ * table is a `TableFoot` row, and a subtotal among the body's rows is `emphasis`, the same look.
  */
-export declare function TableRow({ tone, stripe, children, ...rest }: RowMark & {
+export declare function TableRow({ tone, stripe, emphasis, children, ...rest }: RowMark & {
     children: ReactNode;
 } & Rest<"tr">): ReactElement;
 /**
@@ -99,7 +111,7 @@ export declare function TableGroupRow({ label, trailing, colSpan, ...rest }: {
  */
 export declare function TableHeaderCell({ align, children, srLabel, ...rest }: {
     /**
-     * The cell's horizontal alignment; `end` for figures.
+     * The cell's horizontal alignment; `end` for figures, `center` over a centred column.
      * @default start
      */
     align?: Align | undefined;
@@ -111,6 +123,8 @@ export declare function TableHeaderCell({ align, children, srLabel, ...rest }: {
     /** The column's name for a screen reader, visually hidden, for a column with no visible title (a row's actions). */
     srLabel: string;
 }) & Rest<"th", "align" | "scope">): ReactElement;
+/** A step of a hierarchy under a row: the cell's own `pl-4` plus 1rem a level. */
+type Indent = 1 | 2 | 3;
 /**
  * A `<td>`. `tone` is the text weight and colour (see `CellTone`; in a `TableFoot` it defaults to
  * `strong`); `numeric` sets tabular figures, `mono` a small mono face. `secondary` is a second,
@@ -119,14 +133,17 @@ export declare function TableHeaderCell({ align, children, srLabel, ...rest }: {
  * cell (a figure, a code, a type) never breaks. `truncate` caps a long value's width, cuts it with
  * an ellipsis on one line and puts the full text in a `title`; the content is then plain text (strings and
  * numbers), since that is what the title shows. `colSpan` passes through: a cell that
- * spans the row is a full-width panel (an empty state, a note under a group).
+ * spans the row is a full-width panel (an empty state, a note under a group), and `align="center"`
+ * centres it. `indent` sets a start-aligned cell in by 1 to 3 levels, for a line under a parent row.
  */
-export declare function TableCell({ align, tone, numeric, mono, truncate, secondary, children, ...rest }: {
+export declare function TableCell({ align, tone, numeric, mono, truncate, indent, secondary, children, ...rest }: {
     /**
-     * The cell's horizontal alignment; `end` for figures.
+     * The cell's horizontal alignment; `end` for figures, `center` for a full-width note or empty state.
      * @default start
      */
     align?: Align | undefined;
+    /** Sets the cell in by this many levels (1 to 3), for a line under a parent row. Start-aligned cells only. */
+    indent?: Indent | undefined;
     /** The text weight and colour (see `CellTone`). In a `TableFoot` it defaults to `strong`. */
     tone?: CellTone | undefined;
     /** Tabular figures, and the cell never wraps. */

package/dist/Table.js

@@ -2,7 +2,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Children, createContext, useContext } from "react";
 import { cx, liftInteractive } from "./cx.js";
 import { TEXT_TONE } from "./typography.js";
-const ALIGN = { start: "text-left", end: "text-right" };
+const ALIGN = {
+    start: "text-left",
+    center: "text-center",
+    end: "text-right",
+};
 const TONE = {
     default: "text-slate-700",
     strong: "font-medium text-slate-900",
@@ -62,12 +66,14 @@ export function TableFoot({ children, ...rest }) {
  * linked row's link, not a hover fill, says it is clickable. `stripe` is the stripe alone, in the
  * `TextTone` colours (the first five names of a `StackedBar` segment's `VizTone`), with no fill: the row keeps its hover
  * and its own look. Give `tone` or `stripe`, not both. Body rows only; colour alone does not say it,
- * so name the status in a cell too (a `Pill`). A bold subtotal is not a tone: it is a `TableFoot` row.
+ * so name the status in a cell too (a `Pill`). A bold subtotal is not a tone: a total of the whole
+ * table is a `TableFoot` row, and a subtotal among the body's rows is `emphasis`, the same look.
  */
-export function TableRow({ tone, stripe, children, ...rest }) {
-    const section = useContext(SectionContext);
+export function TableRow({ tone, stripe, emphasis = false, children, ...rest }) {
+    const outer = useContext(SectionContext);
     const plain = useContext(VariantContext) === "plain";
-    return (_jsx("tr", { ...rest, className: rowClass(section, plain, tone, stripe), children: children }));
+    const section = emphasis && outer === "body" ? "foot" : outer;
+    return (_jsx(SectionContext.Provider, { value: section, children: _jsx("tr", { ...rest, className: rowClass(section, plain, tone, stripe), children: children }) }));
 }
 /** The classes of a row: a line above in the body and the foot, the hover fill and the tone's or stripe's look in the body only. */
 function rowClass(section, plain, tone, stripe) {
@@ -110,6 +116,13 @@ function figureClass(numeric, mono) {
 }
 /** The widest a `truncate` cell grows. */
 const TRUNCATE_WIDTH = "max-w-xs";
+/** Where a `truncate` cell's capped box sits, so it follows the cell's alignment. */
+const TRUNCATE_ALIGN = {
+    start: undefined,
+    center: "mx-auto",
+    end: "ml-auto",
+};
+const INDENT = { 1: "pl-8", 2: "pl-12", 3: "pl-16" };
 /**
  * A `<td>`. `tone` is the text weight and colour (see `CellTone`; in a `TableFoot` it defaults to
  * `strong`); `numeric` sets tabular figures, `mono` a small mono face. `secondary` is a second,
@@ -118,21 +131,22 @@ const TRUNCATE_WIDTH = "max-w-xs";
  * cell (a figure, a code, a type) never breaks. `truncate` caps a long value's width, cuts it with
  * an ellipsis on one line and puts the full text in a `title`; the content is then plain text (strings and
  * numbers), since that is what the title shows. `colSpan` passes through: a cell that
- * spans the row is a full-width panel (an empty state, a note under a group).
+ * spans the row is a full-width panel (an empty state, a note under a group), and `align="center"`
+ * centres it. `indent` sets a start-aligned cell in by 1 to 3 levels, for a line under a parent row.
  */
-export function TableCell({ align = "start", tone, numeric = false, mono = false, truncate = false, secondary, children, ...rest }) {
+export function TableCell({ align = "start", tone, numeric = false, mono = false, truncate = false, indent, secondary, children, ...rest }) {
     const foot = useContext(SectionContext) === "foot";
-    return (_jsx("td", { ...rest, className: cellClass({ align, tone, foot, numeric, mono }), children: _jsx(CellBody, { align: align, truncate: truncate, secondary: secondary, children: children }) }));
+    return (_jsx("td", { ...rest, className: cellClass({ align, indent, tone, foot, numeric, mono }), children: _jsx(CellBody, { align: align, truncate: truncate, secondary: secondary, children: children }) }));
 }
 /** The classes of a cell: the tone (`strong` by default in a foot, and a foot's cells are medium whatever the tone), then the wrapping rule. */
-function cellClass({ align, tone, foot, numeric, mono, }) {
+function cellClass({ align, indent, tone, foot, numeric, mono, }) {
     const resolved = tone ?? (foot ? "strong" : "default");
-    return cx("px-4 py-3", ALIGN[align], TONE[resolved], foot && resolved !== "strong" && "font-medium", figureClass(numeric, mono));
+    return cx("px-4 py-3", align === "start" && indent !== undefined && INDENT[indent], ALIGN[align], TONE[resolved], foot && resolved !== "strong" && "font-medium", figureClass(numeric, mono));
 }
 const isText = (node) => typeof node === "string" || typeof node === "number";
 /** What a cell holds: the content, cut to one line with its full text in a `title` when `truncate`, then the `secondary` line. */
 function CellBody({ align, truncate, secondary, children, }) {
     const parts = Children.toArray(children);
     const text = parts.every(isText) ? parts.join("") : undefined;
-    return (_jsxs(_Fragment, { children: [truncate ? (_jsx("div", { className: cx(TRUNCATE_WIDTH, "truncate", align === "end" && "ml-auto"), title: text, children: children })) : (children), secondary != null && secondary !== false && (_jsx("div", { className: "text-xs font-normal text-slate-500", children: secondary }))] }));
+    return (_jsxs(_Fragment, { children: [truncate ? (_jsx("div", { className: cx(TRUNCATE_WIDTH, "truncate", TRUNCATE_ALIGN[align]), title: text, children: children })) : (children), secondary != null && secondary !== false && (_jsx("div", { className: "text-xs font-normal text-slate-500", children: secondary }))] }));
 }

package/dist/TableEditCell.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps, ReactElement, ReactNode } from "react";
+import { TableCell } from "./Table.js";
+/**
+ * A `TableCell` whose value opens an editor in place. It shows `children` as a button with a dotted
+ * underline; a click, Enter or Space swaps it for `renderEditor(close)` and moves the focus into the
+ * editor. The cell keeps its own open state. The editor calls `close` when it has saved, and Esc
+ * closes it: both put the focus back on the value. A press outside it or Tab out of it closes it too and leaves the
+ * focus where it went, so the editor saves its value on its own change or submit, never on a close.
+ * Put the control in the cell itself, not in a popover of its own, which counts as outside. Takes
+ * `TableCell`'s `align`, `tone`, `numeric`, `mono`, `indent` and `secondary`.
+ */
+export declare function TableEditCell({ label, renderEditor, children, ...cell }: {
+    /** What the button does, for a screen reader, heard after the value: "Edit category". It also names the editor. */
+    label: string;
+    /** The control that edits the value, drawn while open. `close` shuts it and returns the focus to the value. */
+    renderEditor: (close: () => void) => ReactNode;
+    /** The value, shown while closed. */
+    children: ReactNode;
+} & Omit<ComponentProps<typeof TableCell>, "children" | "truncate">): ReactElement;

package/dist/TableEditCell.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cx, focusRing } from "./cx.js";
+import { TableCell } from "./Table.js";
+/** What takes the focus when the editor opens, unless the editor already took it (`autoFocus`). */
+const FOCUSABLE = "input, select, textarea, button, a[href]";
+/** Whether `target` is a node outside `box`. */
+function isOutside(box, target) {
+    return target instanceof Node && box !== null && !box.contains(target);
+}
+/** Closes the editor when a press lands outside `box`, for as long as `open`. */
+function useDismissOnOutsidePress(box, open, dismiss) {
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        const onPress = (event) => {
+            if (isOutside(box.current, event.target))
+                dismiss();
+        };
+        document.addEventListener("pointerdown", onPress);
+        return () => document.removeEventListener("pointerdown", onPress);
+    }, [box, open, dismiss]);
+}
+/**
+ * A `TableCell` whose value opens an editor in place. It shows `children` as a button with a dotted
+ * underline; a click, Enter or Space swaps it for `renderEditor(close)` and moves the focus into the
+ * editor. The cell keeps its own open state. The editor calls `close` when it has saved, and Esc
+ * closes it: both put the focus back on the value. A press outside it or Tab out of it closes it too and leaves the
+ * focus where it went, so the editor saves its value on its own change or submit, never on a close.
+ * Put the control in the cell itself, not in a popover of its own, which counts as outside. Takes
+ * `TableCell`'s `align`, `tone`, `numeric`, `mono`, `indent` and `secondary`.
+ */
+export function TableEditCell({ label, renderEditor, children, ...cell }) {
+    const [phase, setPhase] = useState("closed");
+    const open = phase === "open";
+    const box = useRef(null);
+    const trigger = useRef(null);
+    const dismiss = useCallback(() => setPhase("closed"), []);
+    const close = () => setPhase("returning");
+    useDismissOnOutsidePress(box, open, dismiss);
+    useEffect(() => {
+        if (phase === "returning")
+            trigger.current?.focus();
+        if (phase === "open" && !box.current?.contains(document.activeElement))
+            box.current?.querySelector(FOCUSABLE)?.focus();
+    }, [phase]);
+    const onKeyDown = (event) => {
+        if (event.key !== "Escape")
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        close();
+    };
+    return (_jsx(TableCell, { ...cell, children: open ? (_jsx("div", { ref: box, role: "group", "aria-label": label, className: "-mx-2 -my-1", onKeyDown: onKeyDown, onBlur: (event) => {
+                if (isOutside(event.currentTarget, event.relatedTarget))
+                    dismiss();
+            }, children: renderEditor(close) })) : (_jsxs("button", { ref: trigger, type: "button", onClick: () => setPhase("open"), className: cx("-mx-2 -my-1 block w-[calc(100%+1rem)] cursor-pointer rounded-md px-2 py-1 [text-align:inherit] underline decoration-dotted underline-offset-4 transition hover:bg-slate-100", focusRing), children: [children, _jsxs("span", { className: "sr-only", children: [" ", label] })] })) }));
+}

package/dist/index.d.ts

@@ -10,7 +10,8 @@ export { Markdown } from "./Markdown.js";
 export { AppShell, AppShellBrand, type AppShellBreakpoint, AppShellHideBelow, appShellRootClassFor, } from "./AppShell.js";
 export { Container } from "./Container.js";
 export { PageHeader, type PageHeaderProps } from "./PageHeader.js";
-export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, SidebarLayout, } from "./PageLayouts.js";
+export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, } from "./PageLayouts.js";
+export { SidebarLayout } from "./SidebarLayout.js";
 export { StickyBar } from "./StickyBar.js";
 export { ErrorPage, Forbidden, Maintenance, NotFound, Offline } from "./StatusPages.js";
 export { Cluster, ClusterGrow, type ClusterAlign, type ClusterGap, type ClusterJustify, } from "./Cluster.js";
@@ -26,6 +27,7 @@ export { Callout, type CalloutTone } from "./Callout.js";
 export { ListRow, type ListRowProps } from "./ListRow.js";
 export { OutlineRegion, RegionFrame, type RegionRect } from "./OutlineRegion.js";
 export { type CellTone, type RowTone, Table, TableBody, TableCell, TableFoot, TableGroupRow, TableHead, TableHeaderCell, TableRow, } from "./Table.js";
+export { TableEditCell } from "./TableEditCell.js";
 export { EmptyState } from "./EmptyState.js";
 export { Step, Steps } from "./Steps.js";
 export { Timeline, TimelineItem } from "./Timeline.js";
@@ -64,6 +66,9 @@ export { KeyValue, KeyValueList } from "./KeyValueList.js";
 export { Select } from "./Select.js";
 export { Textarea } from "./Textarea.js";
 export { Video } from "./Video.js";
+export { Image, type ImageAspect, type ImageProps, type ImageWidth } from "./Image.js";
+export { MediaTile, type MediaTileProps } from "./MediaTile.js";
+export { ScrollStrip, type ScrollStripProps } from "./ScrollStrip.js";
 export { TextLink, type TextLinkSize } from "./TextLink.js";
 export { Caption, Display, Lead, Overline, PageHeading, SectionHeading, SubsectionHeading, type SubsectionHeadingSize, Text, type TextTone, type TypographyColor, type TypographyProps, } from "./typography.js";
 export { DateField, type DateFieldProps } from "./DateField.js";

package/dist/index.js

@@ -10,7 +10,8 @@ export { Markdown } from "./Markdown.js";
 export { AppShell, AppShellBrand, AppShellHideBelow, appShellRootClassFor, } from "./AppShell.js";
 export { Container } from "./Container.js";
 export { PageHeader } from "./PageHeader.js";
-export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, SidebarLayout, } from "./PageLayouts.js";
+export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, } from "./PageLayouts.js";
+export { SidebarLayout } from "./SidebarLayout.js";
 export { StickyBar } from "./StickyBar.js";
 export { ErrorPage, Forbidden, Maintenance, NotFound, Offline } from "./StatusPages.js";
 export { Cluster, ClusterGrow, } from "./Cluster.js";
@@ -26,6 +27,7 @@ export { Callout } from "./Callout.js";
 export { ListRow } from "./ListRow.js";
 export { OutlineRegion, RegionFrame } from "./OutlineRegion.js";
 export { Table, TableBody, TableCell, TableFoot, TableGroupRow, TableHead, TableHeaderCell, TableRow, } from "./Table.js";
+export { TableEditCell } from "./TableEditCell.js";
 export { EmptyState } from "./EmptyState.js";
 export { Step, Steps } from "./Steps.js";
 export { Timeline, TimelineItem } from "./Timeline.js";
@@ -60,6 +62,9 @@ export { KeyValue, KeyValueList } from "./KeyValueList.js";
 export { Select } from "./Select.js";
 export { Textarea } from "./Textarea.js";
 export { Video } from "./Video.js";
+export { Image } from "./Image.js";
+export { MediaTile } from "./MediaTile.js";
+export { ScrollStrip } from "./ScrollStrip.js";
 export { TextLink } from "./TextLink.js";
 export { Caption, Display, Lead, Overline, PageHeading, SectionHeading, SubsectionHeading, Text, } from "./typography.js";
 export { DateField } from "./DateField.js";

package/dist/size.d.ts

@@ -1,6 +1,6 @@
 /**
  * The one size scale of the library: `sm`, `md` (the default everywhere) and `lg`. A component
- * extends it outward only where it has a real use (Avatar's `xl` and `2xl`, the gap scale's `xs`
+ * extends it outward only where it has a real use (Avatar's `xs`, `xl` and `2xl`, the gap scale's `xs`
  * and `xl`), and no scale skips `md`.
  */
 export type Size = "sm" | "md" | "lg";

package/dist/stickyColumn.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A column that stays in view as the page scrolls (`SidebarLayout`'s rail from `md`, `DetailLayout`'s
+ * aside from `lg` when asked). The `<aside>` sticks directly under AppShell's header (`--app-header`,
+ * as `StickyBar` does; 0 outside a shell) and is as tall as its content. A sticky `top` also pushes a
+ * column that starts above it down, so it is exactly the header and no gap: a gap would move a rail
+ * rendered at the top of its box. Inside it the scroller is capped at the viewport less the header
+ * and 2rem (the room the Container's `py-8` leaves at the page's end, so the column is never pushed
+ * up under the header there), so a column taller than that scrolls itself and its end stays
+ * reachable. `overflow` clips, which would cut a keyboard focus ring (an outline 4px out) at the
+ * scroller's edges, so it is padded 4px (`p-1`) and pulled back out by the same (`-m-1`): the ring
+ * has room and the column stays on the page's edges. Each variant is written out whole, so Tailwind
+ * sees every class.
+ */
+export declare const STICKY_ASIDE_MD = "md:sticky md:top-[var(--app-header,0px)] md:self-start";
+export declare const STICKY_SCROLL_MD = "md:-m-1 md:max-h-[calc(100dvh-var(--app-header,0px)-2rem)] md:overflow-y-auto md:p-1";
+export declare const STICKY_ASIDE_LG = "lg:sticky lg:top-[var(--app-header,0px)] lg:self-start";
+export declare const STICKY_SCROLL_LG = "lg:-m-1 lg:max-h-[calc(100dvh-var(--app-header,0px)-2rem)] lg:overflow-y-auto lg:p-1";

package/dist/stickyColumn.js

@@ -0,0 +1,17 @@
+/**
+ * A column that stays in view as the page scrolls (`SidebarLayout`'s rail from `md`, `DetailLayout`'s
+ * aside from `lg` when asked). The `<aside>` sticks directly under AppShell's header (`--app-header`,
+ * as `StickyBar` does; 0 outside a shell) and is as tall as its content. A sticky `top` also pushes a
+ * column that starts above it down, so it is exactly the header and no gap: a gap would move a rail
+ * rendered at the top of its box. Inside it the scroller is capped at the viewport less the header
+ * and 2rem (the room the Container's `py-8` leaves at the page's end, so the column is never pushed
+ * up under the header there), so a column taller than that scrolls itself and its end stays
+ * reachable. `overflow` clips, which would cut a keyboard focus ring (an outline 4px out) at the
+ * scroller's edges, so it is padded 4px (`p-1`) and pulled back out by the same (`-m-1`): the ring
+ * has room and the column stays on the page's edges. Each variant is written out whole, so Tailwind
+ * sees every class.
+ */
+export const STICKY_ASIDE_MD = "md:sticky md:top-[var(--app-header,0px)] md:self-start";
+export const STICKY_SCROLL_MD = "md:-m-1 md:max-h-[calc(100dvh-var(--app-header,0px)-2rem)] md:overflow-y-auto md:p-1";
+export const STICKY_ASIDE_LG = "lg:sticky lg:top-[var(--app-header,0px)] lg:self-start";
+export const STICKY_SCROLL_LG = "lg:-m-1 lg:max-h-[calc(100dvh-var(--app-header,0px)-2rem)] lg:overflow-y-auto lg:p-1";

package/dist/typography.d.ts

@@ -15,6 +15,8 @@ type OwnProps = {
     color?: TypographyColor;
     children?: ReactNode;
 };
+/** Where a run of text sits across its block. */
+export type TextAlign = "start" | "center" | "end";
 /** The opt-in props of the inline roles (`Text`, `Caption`, `Overline`). */
 type InlineOwnProps = {
     /** A meaning's colour (see `TextTone`). Wins over `color`. */
@@ -25,6 +27,18 @@ type InlineOwnProps = {
     mono?: boolean | undefined;
     /** One line, cut with an ellipsis where the container ends; the full text is the `title`. */
     truncate?: boolean | undefined;
+    /**
+     * Set the text at `start`, `center` or `end` of its block. The run becomes block-level, so the
+     * alignment has a box to act on (a table header cell, a right-hand column).
+     */
+    align?: TextAlign | undefined;
+};
+/** The opt-in props of `Text` and `Caption` only: the face of the run, not a label's. */
+type RunOwnProps = {
+    /** Italic: a muted hint or a caption. */
+    italic?: boolean | undefined;
+    /** Break a long unbroken string (a URL, a token) where the container ends, instead of overflowing. */
+    breakWords?: boolean | undefined;
 };
 type Own = OwnProps & InlineOwnProps;
 /** Polymorphic props: own props + `as` + the intrinsic props of whichever element `as` selects. */
@@ -66,11 +80,14 @@ export declare const PageHeading: {
 /**
  * Top-level section header. `h2`, text-base/6 semibold, primary text. `rule` sets
  * a hairline under it (the `Divider` line colour) with the space either side of
- * the line built in.
+ * the line built in. `description` is a muted line under the heading, outside the `<h2>`, so the
+ * heading's name stays the title; the rule then sits under the description.
  */
-export declare function SectionHeading<E extends ElementType = "h2">({ rule, ...props }: TypographyProps<E> & {
+export declare function SectionHeading<E extends ElementType = "h2">({ rule, description, ...props }: TypographyProps<E> & {
     /** A hairline under the heading, with the space either side of it built in. */
     rule?: boolean;
+    /** A muted line under the heading that says more. It is a paragraph beside the heading, not part of its name. */
+    description?: ReactNode;
 }): ReactElement;
 export type SubsectionHeadingSize = Size;
 /**
@@ -89,12 +106,14 @@ export declare function SubsectionHeading<E extends ElementType = "h3">({ size,
 }): ReactElement;
 /**
  * Small all-caps label above a group. `span`, text-xs semibold uppercase, tertiary. `tone`,
- * `numeric`, `mono` and `truncate` are opt-in, as on `Text`.
+ * `numeric`, `mono`, `truncate` and `align` are opt-in, as on `Text`.
  */
 export declare const Overline: {
     <E extends ElementType = "span">(props: InlineTypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     displayName: string;
 };
+/** A fixed width for a run of text: `amount` is a money figure, right-aligned, at a width that lines a column up. */
+export type TextMinWidth = "amount";
 /**
  * Running text. `span` (inline; `as="p"` for a paragraph), text-sm/5 normal, secondary. A block of it
  * stops at a readable line length (`max-w-[72ch]`), wherever it sits. `strong` emphasises it:
@@ -102,13 +121,17 @@ export declare const Overline: {
  * `preserveNewlines` keeps the line breaks in the text (a user-typed note); runs of spaces still collapse.
  * `tone` colours it by meaning (`positive` for "Saved.", `danger` for an error; it wins over `color`),
  * `numeric` sets tabular figures, `mono` the monospace face, and `truncate` cuts it to one line with an
- * ellipsis (the full text becomes its `title`).
+ * ellipsis (the full text becomes its `title`). `align` sets it at `start`, `center` or `end`.
+ * `italic` slants it, `breakWords` breaks a long unbroken string at the edge of its box, and `minWidth="amount"`
+ * fixes a width and right-aligns the figure in it (a column of amounts lines up); it does not take `align`.
  */
-export declare function Text<E extends ElementType = "span">({ strong, preserveNewlines, ...props }: InlineTypographyProps<E> & {
+export declare function Text<E extends ElementType = "span">({ strong, preserveNewlines, minWidth, italic, breakWords, ...props }: InlineTypographyProps<E> & RunOwnProps & {
     /** Emphasis: font-medium in the primary ink (`color` and `tone` still win). */
     strong?: boolean | undefined;
     /** Keep the line breaks in the text (a user-typed note); runs of spaces still collapse. */
     preserveNewlines?: boolean;
+    /** A fixed width: `amount` is a right-aligned money figure, min-w-24, in tabular figures. */
+    minWidth?: TextMinWidth | undefined;
 }): ReactElement;
 /**
  * The supporting line under a `Dialog` title: `Text as="p"` without the measure, so
@@ -117,9 +140,10 @@ export declare function Text<E extends ElementType = "span">({ strong, preserveN
 export declare function HeaderText({ children }: {
     children: ReactNode;
 }): ReactElement;
-/** Fine print / metadata. `span` (inline; `as="p"` for a block), text-xs/4 normal, tertiary. Takes `tone`, `numeric`, `mono` and `truncate` like `Text`. */
-export declare const Caption: {
-    <E extends ElementType = "span">(props: InlineTypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-    displayName: string;
-};
+/**
+ * Fine print / metadata. `span` (inline; `as="p"` for a block), text-xs/4 normal, tertiary. Takes `tone`,
+ * `numeric`, `mono`, `truncate` and `align` like `Text`, and `italic` for a muted hint and `breakWords`
+ * for a long unbroken string such as a URL.
+ */
+export declare function Caption<E extends ElementType = "span">({ italic, breakWords, ...props }: InlineTypographyProps<E> & RunOwnProps): ReactElement;
 export {};