@nanisoft/prism-ui 0.16.1 → 1.0.0

package/dist/blocks/record-form-01/record-form.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { Button } from '../../components/ui/button.js';
+import { Field, FieldDescription, FieldError, FieldGroup } from '../../components/ui/field.js';
+import { Label } from '../../components/ui/label.js';
+import { childLevel, headingSizeClass } from '../../components/ui/section.js';
+import { fieldText, NEEDS_HIDDEN, renderControl, serialize, SELF_LABELLED, } from '../../lib/field-render.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The record write form: a typed field specification, rendered whole.
+ *
+ * **It takes a field specification and draws the whole form.** `groups` is an
+ * ordered list of `FieldSpecGroup`, each an optional heading, an optional
+ * description and an ordered list of `FieldSpec`; every field carries a stable
+ * `key`, a required `label`, a required `kind` drawn from Prism's own input
+ * vocabulary, and optional help, hint, placeholder, disabled flag and starting
+ * value. A field whose control this package does not ship carries the `slot` arm,
+ * and the Block still draws the label, the help and the error around it, so a
+ * field has the same shell either way. Order is the array's order, and the Block
+ * never reorders, hides or drops a field.
+ *
+ * **Prism owns the shape and the vocabulary; the consumer owns the values, the
+ * errors and the fetch.** The specification carries no validator, no constraint
+ * object, no schema and no pattern, because evaluating a rule is behaviour and a
+ * Block ships none. Requiredness is not validation: it is a rendering fact and an
+ * HTML fact, so the Block draws the mark and sets the attribute and never checks a
+ * value against it.
+ *
+ * **The error state arrives as an issue list keyed by field.** An entry is a
+ * `field` naming a key and a `message` in the product's own words, the shape
+ * `FormDialog` and `FormWizard` already take, and a control's issue is drawn
+ * under that control. A message about the submission rather than about a control
+ * is `submitError`: it names no field and marks at most one.
+ *
+ * **Where the submission goes is a union with three arms, at least one
+ * required.** `action` posts the form to a URL the caller names. `onSubmit` hands
+ * the form's own element to a function and makes the Block a client Component.
+ * `submit` is a slot holding the caller's own control, placed unstyled in the
+ * footer. Each arm forbids the other two, so the compiler holds the rule rather
+ * than this paragraph. The save control is `type="submit"` inside a `<form>` the
+ * Block renders, and the Block never wires a save to a handler of its own.
+ *
+ * **Layout is derived, and the only knob is how many columns the fields sit
+ * in.** `columns` is `1 | 2` at the form level; two is the only multi-column form
+ * layout in which a label stays above its control, and a two-column form fills
+ * across rows rather than down columns, because column-wise filling breaks the
+ * reading order a screen reader and a keyboard follow. At the narrow breakpoint a
+ * two-column form is one column again. There is no per-field layout prop and no
+ * slot per region.
+ *
+ * **A field whose value is absent renders empty rather than absent**, because a
+ * form that changes shape while the reader is halfway through it is a form the
+ * reader has to read twice. The plain form is uncontrolled where a Prism control
+ * can be, so the caller reads the values out of the form element at submit: the
+ * `onSubmit` arm passes that element, and `action` lets the browser post it. The
+ * handful of Prism controls the platform will not submit on their own hold their
+ * value and carry a hidden input under the field's key, so the payload is
+ * complete either way.
+ */
+export function RecordForm01(props) {
+    const { title, description, groups, columns = 1, issues, submitError, headingLevel = 'h2', footerStart, className, } = props;
+    const headingId = useId();
+    const prefix = useId();
+    const [values, setValues] = useState({});
+    const setValue = (key, value) => setValues((previous) => ({ ...previous, [key]: value }));
+    const hasSubmit = 'submit' in props;
+    const onSubmit = props.onSubmit;
+    const hasHandler = typeof onSubmit === 'function';
+    const hasAction = typeof props.action === 'string';
+    const handleSubmit = (event) => {
+        if (!hasHandler)
+            return;
+        event.preventDefault();
+        onSubmit(event.currentTarget);
+    };
+    const Heading = headingLevel;
+    const GroupHeading = title ? childLevel(headingLevel) : headingLevel;
+    const grid = columns === 2 ? 'grid grid-cols-1 gap-6 sm:grid-cols-2' : 'flex flex-col gap-6';
+    return (_jsxs("form", { "data-slot": "record-form-01-form", ...(hasAction ? { action: props.action, method: 'post' } : null), onSubmit: hasHandler ? handleSubmit : undefined, className: cn('flex w-full flex-col gap-8', className), children: [title || description ? (_jsxs("div", { "data-slot": "record-form-01-header", className: "flex flex-col gap-1", children: [title ? (_jsx(Heading, { id: headingId, className: cn('font-semibold tracking-tight text-balance', headingSizeClass(Heading)), children: title })) : null, description ? (_jsx("p", { className: "text-muted-foreground text-sm", children: description })) : null] })) : null, submitError ? (_jsx(FieldError, { "data-slot": "record-form-01-submit-error", children: submitError })) : null, groups.map((group, groupIndex) => {
+                const groupHeadingId = `${prefix}-g${groupIndex}`;
+                return (_jsxs("section", { "data-slot": "record-form-01-group", "aria-labelledby": group.label ? groupHeadingId : undefined, className: "flex flex-col gap-4", children: [group.label ? (_jsx(GroupHeading, { id: groupHeadingId, className: cn('font-semibold tracking-tight text-balance', headingSizeClass(GroupHeading)), children: group.label })) : null, group.description ? (_jsx("p", { className: "text-muted-foreground text-sm", children: group.description })) : null, _jsx(FieldGroup, { "data-slot": "record-form-01-fields", className: grid, children: group.fields.map((field, fieldIndex) => {
+                                const kind = field.kind.toLowerCase();
+                                const id = `${prefix}-f${fieldIndex}`;
+                                const labelId = `${prefix}-l${fieldIndex}`;
+                                const helpId = field.help === undefined ? undefined : `${prefix}-h${fieldIndex}`;
+                                const fieldIssues = (issues ?? []).filter((issue) => issue.field === field.key);
+                                const errorId = fieldIssues.length > 0 ? `${prefix}-e${fieldIndex}` : undefined;
+                                const describedBy = helpId === undefined
+                                    ? errorId
+                                    : errorId === undefined
+                                        ? helpId
+                                        : `${helpId} ${errorId}`;
+                                const ctx = {
+                                    id,
+                                    labelId,
+                                    describedBy,
+                                    invalid: fieldIssues.length > 0,
+                                    text: fieldText(field),
+                                    values,
+                                    setValue,
+                                };
+                                return (_jsxs(Field, { "data-slot": "record-form-01-field", children: [SELF_LABELLED.has(kind) ? null : (_jsx(Label, { id: labelId, htmlFor: id, required: field.required, disabled: field.disabled, children: field.label })), renderControl(field, ctx), NEEDS_HIDDEN.has(kind) ? (_jsx("input", { type: "hidden", name: field.key, value: serialize(ctx.values[field.key] ?? field.defaultValue) })) : null, field.help === undefined ? null : (_jsx(FieldDescription, { id: helpId, children: field.help })), fieldIssues.length === 0 ? null : (_jsx(FieldError, { id: errorId, children: fieldIssues.map((issue, issueIndex) => (_jsx("span", { "data-slot": "record-form-01-issue", children: issue.message }, issueIndex))) }))] }, field.key));
+                            }) })] }, group.id ?? groupIndex));
+            }), _jsxs("div", { "data-slot": "record-form-01-footer", className: "flex flex-wrap items-center justify-end gap-2", children: [footerStart, hasSubmit ? (props.submit) : (_jsx(Button, { "data-slot": "record-form-01-save", type: "submit", children: props.submitLabel }))] })] }));
+}
+export default RecordForm01;

package/dist/blocks/record-grid-01/index.d.ts

@@ -0,0 +1,3 @@
+export { RecordGrid01, default } from './record-grid.js';
+export type { RecordGrid01Change, RecordGrid01Labels, RecordGrid01Props } from './record-grid.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/record-grid-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/record-grid-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACrD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA"}

package/dist/blocks/record-grid-01/index.js

@@ -0,0 +1 @@
+export { RecordGrid01, default } from './record-grid.js';

package/dist/blocks/record-grid-01/record-grid.d.ts

@@ -0,0 +1,145 @@
+import { type ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+import type { FieldSpec } from '../../lib/spec.js';
+/**
+ * One edit a reader made in place.
+ *
+ * `rowId` is the record's stable identity from `getRowId` and never its position,
+ * because a row's index moves the moment the caller re-sorts or re-pages and a
+ * change keyed by a position would be applied to the wrong record. `key` is the
+ * column's own `key` and never the words of its header, for the reason the field
+ * specification gives: a key built from a label's words breaks the moment the label
+ * is translated. `value` is whatever the control reported, in the shape that arm
+ * reports it.
+ */
+export type RecordGrid01Change = {
+    /** The record's stable identity, from `getRowId`. */
+    rowId: string;
+    /** The edited column's own `key`, and never the words of its header. */
+    key: string;
+    /** The value the control reported, in the shape that control reports it. */
+    value: unknown;
+};
+/**
+ * Every string the grid renders. Required because the Block ships no copy of its
+ * own, and an empty grid still has a sentence to say.
+ */
+export type RecordGrid01Labels = {
+    /** Shown in the body when `rows` is empty and `emptyMessage` is not set. */
+    empty: string;
+};
+/** The props a `RecordGrid01` accepts. */
+export type RecordGrid01Props = {
+    /** The grid's own heading, absent for a grid that needs none. */
+    title?: ReactNode;
+    /** One line under the heading saying what editing here does. */
+    description?: ReactNode;
+    /**
+     * Heading level for the grid's own heading. See `HeadingLevel`.
+     *
+     * @defaultValue 'h2'
+     */
+    headingLevel?: HeadingLevel;
+    /** Names the grid for assistive technology when no heading does. */
+    caption?: ReactNode;
+    /**
+     * The columns, as the shared field specification.
+     *
+     * `key`, `label` and `kind` are required on each one, and the whole list is
+     * drawn in the order it is written. The header of a column is its `label` and
+     * the control under it is the one its `kind` names, so the words a consumer
+     * learns on a write form are the words on a grid.
+     */
+    columns: readonly FieldSpec[];
+    /** The rows for the grid. The Block renders them; it never fetches or reorders. */
+    rows: readonly Record<string, unknown>[];
+    /**
+     * Returns a stable identity for a row.
+     *
+     * Required rather than optional, because paging and re-sorting move a row's
+     * index, and a change reported against a position would be written to the wrong
+     * record.
+     */
+    getRowId: (row: Record<string, unknown>) => string;
+    /**
+     * Called with every edit, as the cell it happened in.
+     *
+     * Required, because a control that edits a value with nowhere to report it is a
+     * control a reader can type into and nothing can hear. The Block holds the
+     * in-progress values so a cell redraws as it is typed, and it reports each one
+     * through here rather than submitting a form.
+     */
+    onCellChange: (change: RecordGrid01Change) => void;
+    /** Replaces the fallback empty line. */
+    emptyMessage?: ReactNode;
+    labels: RecordGrid01Labels;
+    /** Layout only. Changing a Prism-owned visual property from here is prohibited. */
+    className?: string;
+};
+/**
+ * The editable record grid: many records as a grid whose cells are edited in place.
+ *
+ * **It is a write, and it is a different job from the record index.** `DataTable01`
+ * draws the rows it was handed and reports what a reader asked for: a sort, a
+ * filter, a page, a selection. Nothing in it changes a value. This Block's whole
+ * contract is the opposite: each cell is a control, a reader types into it, and the
+ * Block reports the edit. `DESIGN.md` rules that a grid edited in place is a write
+ * and not the index with one more prop, and this is that write as its own Item.
+ *
+ * **Its columns are the shared field specification, and that is the decision the
+ * closed unions forced.** A cell that writes is a control, and the only vocabulary
+ * this package publishes for a control is `FieldSpec`. `ColumnKind` is the
+ * vocabulary for a value a reader reads, and it is held disjoint from `FieldKind`
+ * by `scripts/check-spec-unions.mjs`: a cell that writes named on `ColumnKind`
+ * would either draw a field Component inside a table the index owns or name
+ * something no Component answers to, and the gate reports both. So a write grid
+ * takes the field union, and the fact that it needs to is the gate saying the job
+ * is a different one. A column's `label` is its header and its `kind` is the
+ * control drawn under it, so a grid column and a form field are one declaration.
+ *
+ * **It holds the in-progress values and reports every change.** This is the same
+ * kind of held value the record index keeps for its selection set: a set of values
+ * the caller handed for the rows about to be drawn, which a reader edits and the
+ * Block redraws from. It fetches nothing, sorts nothing, filters nothing and pages
+ * nothing, and it never derives a value from application state. A caller that wants
+ * the edits mirrored writes one line in `onCellChange`; the values a cell shows are
+ * the caller's row value until the reader edits that cell, and the reader's value
+ * after.
+ *
+ * **The controls are the ones this package ships, drawn by the same renderer a form
+ * uses.** `renderControl` is the one place a `FieldKind` becomes a control, so a
+ * cell and a form field draw the same Component and a kind added to the union fails
+ * the compiler in one place rather than two. The arms that hold a value and report a
+ * change through the shared context are the editable ones (`Input`, `Textarea`,
+ * `NumberField`, `MoneyField`, `SearchField`, `PasswordField`, `NativeSelect`,
+ * `ToggleGroup`, `Toggle`, `Switch`, `Calendar`, `Dropzone`, `FileUpload`,
+ * `ImageListField`, `RepeatableRows`); an arm that submits through a form element
+ * it owns rather than reporting through the context (`Select`, `Combobox`,
+ * `DatePicker`, `Slider` and their kin) is drawn and reaches no report, and that is
+ * the honest limit of a Block that ships no form of its own. A caller who needs one
+ * of those brings their own control through the `slot` arm, which the renderer
+ * places in the cell.
+ *
+ * **The grid names every cell's control, and it is the columns that name them.**
+ * A column's header carries its visible label, so a cell draws a control the reader
+ * can see named; the control itself is given the column's own words as an
+ * assistive-technology name where the Component does not carry its own, and the
+ * table's own row and column structure is what says which record a cell belongs to.
+ * The table takes its accessible name from its caption when the caller brings one
+ * and from the heading otherwise, which is the same rule `DataTable01` follows and
+ * the same reason: a table a reader reaches without a name is a table every cell
+ * announces as untitled.
+ *
+ * **It owns no command.** There is no save button, no delete, no bulk action and no
+ * confirmation: every edit is reported the moment it is made, and what to do with it
+ * is the caller's. A caller who wants a save adds their own control beside the grid,
+ * in the product's own copy and on its own store, rather than asking this Block to
+ * hold a draft the caller cannot see.
+ *
+ * **Nothing here is a rule.** The grid draws the mark for a `required` column and
+ * sets the attribute, and it never checks a value against it: validation is the
+ * consumer's, entirely, and evaluating a rule is behaviour a Block does not own.
+ */
+export declare function RecordGrid01(props: RecordGrid01Props): import("react").JSX.Element;
+export default RecordGrid01;
+//# sourceMappingURL=record-grid.d.ts.map

package/dist/blocks/record-grid-01/record-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-grid.d.ts","sourceRoot":"","sources":["../../../src/blocks/record-grid-01/record-grid.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGvD,OAAO,EAAoB,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAWjF,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAG1D;;;;;;;;;;GAUG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAA;IACb,wEAAwE;IACxE,GAAG,EAAE,MAAM,CAAA;IACX,4EAA4E;IAC5E,KAAK,EAAE,OAAO,CAAA;CACf,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,0CAA0C;AAC1C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,gEAAgE;IAChE,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,oEAAoE;IACpE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;;;OAOG;IACH,OAAO,EAAE,SAAS,SAAS,EAAE,CAAA;IAC7B,mFAAmF;IACnF,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAA;IACxC;;;;;;OAMG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAA;IAClD;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAClD,wCAAwC;IACxC,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,MAAM,EAAE,kBAAkB,CAAA;IAC1B,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAqHpD;AAED,eAAe,YAAY,CAAA"}

package/dist/blocks/record-grid-01/record-grid.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { Label } from '../../components/ui/label.js';
+import { headingSizeClass } from '../../components/ui/section.js';
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from '../../components/ui/table.js';
+import { fieldText, renderControl, SELF_LABELLED } from '../../lib/field-render.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The editable record grid: many records as a grid whose cells are edited in place.
+ *
+ * **It is a write, and it is a different job from the record index.** `DataTable01`
+ * draws the rows it was handed and reports what a reader asked for: a sort, a
+ * filter, a page, a selection. Nothing in it changes a value. This Block's whole
+ * contract is the opposite: each cell is a control, a reader types into it, and the
+ * Block reports the edit. `DESIGN.md` rules that a grid edited in place is a write
+ * and not the index with one more prop, and this is that write as its own Item.
+ *
+ * **Its columns are the shared field specification, and that is the decision the
+ * closed unions forced.** A cell that writes is a control, and the only vocabulary
+ * this package publishes for a control is `FieldSpec`. `ColumnKind` is the
+ * vocabulary for a value a reader reads, and it is held disjoint from `FieldKind`
+ * by `scripts/check-spec-unions.mjs`: a cell that writes named on `ColumnKind`
+ * would either draw a field Component inside a table the index owns or name
+ * something no Component answers to, and the gate reports both. So a write grid
+ * takes the field union, and the fact that it needs to is the gate saying the job
+ * is a different one. A column's `label` is its header and its `kind` is the
+ * control drawn under it, so a grid column and a form field are one declaration.
+ *
+ * **It holds the in-progress values and reports every change.** This is the same
+ * kind of held value the record index keeps for its selection set: a set of values
+ * the caller handed for the rows about to be drawn, which a reader edits and the
+ * Block redraws from. It fetches nothing, sorts nothing, filters nothing and pages
+ * nothing, and it never derives a value from application state. A caller that wants
+ * the edits mirrored writes one line in `onCellChange`; the values a cell shows are
+ * the caller's row value until the reader edits that cell, and the reader's value
+ * after.
+ *
+ * **The controls are the ones this package ships, drawn by the same renderer a form
+ * uses.** `renderControl` is the one place a `FieldKind` becomes a control, so a
+ * cell and a form field draw the same Component and a kind added to the union fails
+ * the compiler in one place rather than two. The arms that hold a value and report a
+ * change through the shared context are the editable ones (`Input`, `Textarea`,
+ * `NumberField`, `MoneyField`, `SearchField`, `PasswordField`, `NativeSelect`,
+ * `ToggleGroup`, `Toggle`, `Switch`, `Calendar`, `Dropzone`, `FileUpload`,
+ * `ImageListField`, `RepeatableRows`); an arm that submits through a form element
+ * it owns rather than reporting through the context (`Select`, `Combobox`,
+ * `DatePicker`, `Slider` and their kin) is drawn and reaches no report, and that is
+ * the honest limit of a Block that ships no form of its own. A caller who needs one
+ * of those brings their own control through the `slot` arm, which the renderer
+ * places in the cell.
+ *
+ * **The grid names every cell's control, and it is the columns that name them.**
+ * A column's header carries its visible label, so a cell draws a control the reader
+ * can see named; the control itself is given the column's own words as an
+ * assistive-technology name where the Component does not carry its own, and the
+ * table's own row and column structure is what says which record a cell belongs to.
+ * The table takes its accessible name from its caption when the caller brings one
+ * and from the heading otherwise, which is the same rule `DataTable01` follows and
+ * the same reason: a table a reader reaches without a name is a table every cell
+ * announces as untitled.
+ *
+ * **It owns no command.** There is no save button, no delete, no bulk action and no
+ * confirmation: every edit is reported the moment it is made, and what to do with it
+ * is the caller's. A caller who wants a save adds their own control beside the grid,
+ * in the product's own copy and on its own store, rather than asking this Block to
+ * hold a draft the caller cannot see.
+ *
+ * **Nothing here is a rule.** The grid draws the mark for a `required` column and
+ * sets the attribute, and it never checks a value against it: validation is the
+ * consumer's, entirely, and evaluating a rule is behaviour a Block does not own.
+ */
+export function RecordGrid01(props) {
+    const { title, description, headingLevel = 'h2', caption, columns, rows, getRowId, onCellChange, emptyMessage, labels, className, } = props;
+    const Heading = headingLevel;
+    const headingId = useId();
+    const prefix = useId();
+    const [edited, setEdited] = useState({});
+    const valueFor = (rowId, row, field) => {
+        const rowEdits = edited[rowId];
+        if (rowEdits !== undefined && Object.prototype.hasOwnProperty.call(rowEdits, field.key)) {
+            return rowEdits[field.key];
+        }
+        const rowValue = row[field.key];
+        return rowValue === undefined ? field.defaultValue : rowValue;
+    };
+    const setCell = (rowId) => (key, value) => {
+        setEdited((previous) => ({
+            ...previous,
+            [rowId]: { ...(previous[rowId] ?? {}), [key]: value },
+        }));
+        onCellChange({ rowId, key, value });
+    };
+    return (_jsxs("div", { "data-slot": "record-grid-01", className: cn('flex flex-col gap-4', className), children: [title || description ? (_jsxs("div", { "data-slot": "record-grid-01-header", className: "flex flex-col gap-1", children: [title ? (_jsx(Heading, { id: headingId, className: cn('font-semibold tracking-tight text-balance', headingSizeClass(Heading)), children: title })) : null, description ? (_jsx("p", { className: "text-muted-foreground text-sm", children: description })) : null] })) : null, _jsx("div", { className: "border-border overflow-hidden rounded-xl border", children: _jsxs(Table, { "aria-labelledby": caption === undefined && title ? headingId : undefined, children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((column) => (_jsx(TableHead, { children: column.label }, column.key))) }) }), _jsx(TableBody, { children: rows.length ? (rows.map((row) => {
+                                const rowId = getRowId(row);
+                                return (_jsx(TableRow, { "data-slot": "record-grid-01-row", children: columns.map((column, columnIndex) => {
+                                        const kind = column.kind.toLowerCase();
+                                        const id = `${prefix}-${rowId}-${columnIndex}`;
+                                        const labelId = `${id}-label`;
+                                        const ctx = {
+                                            id,
+                                            labelId,
+                                            describedBy: undefined,
+                                            invalid: false,
+                                            text: fieldText(column),
+                                            values: { [column.key]: valueFor(rowId, row, column) },
+                                            setValue: setCell(rowId),
+                                            controlled: true,
+                                        };
+                                        return (_jsxs(TableCell, { "data-slot": "record-grid-01-cell", children: [SELF_LABELLED.has(kind) ? null : (_jsx(Label, { id: labelId, htmlFor: id, required: column.required, className: "sr-only", children: column.label })), renderControl(column, ctx), column.help === undefined ? null : (_jsx("span", { className: "sr-only", children: column.help }))] }, column.key));
+                                    }) }, rowId));
+                            })) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: Math.max(1, columns.length), className: "text-muted-foreground h-24 text-center", children: emptyMessage ?? labels.empty }) })) })] }) })] }));
+}
+export default RecordGrid01;

package/dist/blocks/record-wizard-01/index.d.ts

@@ -0,0 +1,3 @@
+export { RecordWizard01, default } from './record-wizard.js';
+export type { RecordWizard01Props } from './record-wizard.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/record-wizard-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/record-wizard-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzD,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/blocks/record-wizard-01/index.js

@@ -0,0 +1 @@
+export { RecordWizard01, default } from './record-wizard.js';

package/dist/blocks/record-wizard-01/record-wizard.d.ts

@@ -0,0 +1,152 @@
+import { type ReactNode } from 'react';
+import type { FieldSpecGroup } from '../../lib/spec.js';
+import type { RecordForm01Issue } from '../record-form-01/index.js';
+/**
+ * The props a `RecordWizard01` accepts.
+ *
+ * **The step is the consumer's.** `current` is required and controlled,
+ * `onStepChange` is required, and the Block draws the step it was handed and no
+ * reachability at all: no completed mark beyond the one the shipped rail already
+ * derives from the index, no disabled step, no skipped step and no count of what
+ * has been answered. Reachability is branching, and branching is the consumer's.
+ *
+ * **The specification is per step, and a step is a `FieldSpecGroup`.** Nothing new
+ * is declared in order to hold the steps: a step is the shared group type, with a
+ * stable `id` and a `label` that is a `string` rather than a node, because the rail
+ * draws the same word at the width a step gets in a six-step row, so a step's rail
+ * label and its own heading are one string by construction rather than two words
+ * kept in step by a caller. One specification sliced by a caller-supplied grouping
+ * is refused: the specification already carries the groups, and a second list saying
+ * which groups sit on which step would be free to disagree with it.
+ */
+export type RecordWizard01Props = {
+    /**
+     * The steps, in order, each a `FieldSpecGroup` with a stable `id` and a string
+     * `label`.
+     *
+     * Each step is drawn as a heading and its fields, one step at a time. The
+     * `id` is required because the caller keys its own per-step state by it, and a
+     * sequence whose entries have no identity is a sequence whose saved answers have
+     * nowhere to live.
+     */
+    steps: readonly FieldSpecGroup[];
+    /**
+     * The step the reader is on, counting from zero.
+     *
+     * Controlled and clamped by the shipped wizard, and clamped rather than optional
+     * for the reason `Steps` gives: a sequence with no position is a list. An index
+     * the specification does not contain draws a real step rather than nothing,
+     * because a region with no route out is worse; the nearest step is the one answer
+     * that is not a claim about a cause.
+     */
+    current: number;
+    /**
+     * Called when the reader moves, given the step's index and which way they asked.
+     *
+     * Required, and the second argument is there because forward and back are not the
+     * same move. A refused forward press arrives here as nothing at all, so a caller
+     * who wants to know its validation ran hears it from the issue list rather than
+     * from this callback.
+     */
+    onStepChange: (index: number, direction: 'forward' | 'back') => void;
+    /**
+     * The values, controlled, keyed by field.
+     *
+     * **Entered values do not survive a step change inside this package.** Only the
+     * current step's fields are in the document, and there is no draft to restore
+     * from, because a Block that held the draft would be holding application state.
+     * So every field on this arm is controlled and carries the consumer's value and
+     * change handler, and the values are the consumer's from the first keystroke. The
+     * named cost is one state object per screen instead of one form.
+     */
+    values: Record<string, unknown>;
+    /** Sets one controlled field's value, keyed by field. */
+    onValueChange: (key: string, value: unknown) => void;
+    /**
+     * The issues to draw, keyed by field, from the shape `FormDialog`, `FormWizard`
+     * and the record write form already publish.
+     *
+     * **An issue naming a key that is not on the step being drawn is left undrawn, and
+     * the reader is not moved.** There is no control on this step for the message to
+     * sit under, and moving the reader is a call on `onStepChange`, which the caller
+     * already holds. A cross-step rule is a message about the submission and belongs
+     * to the sequence's own `validate`, in the caller's words.
+     */
+    issues?: readonly RecordForm01Issue[];
+    /** The label of the control that goes back. */
+    backLabel: ReactNode;
+    /** The label of the control that goes forward, on every step but the last. */
+    nextLabel: ReactNode;
+    /** The label of the control on the last step, which submits rather than advances. */
+    finishLabel: ReactNode;
+    /** The heading above a refusal. */
+    blockedLabel: ReactNode;
+    /** The accessible name of the progress rail. */
+    progressLabel: string;
+    /** The accessible name of one issue's control, given the field it belongs to. */
+    issueLabel: (field: string) => string;
+    /** The words for the sequence's keyboard model, read once. */
+    instructionsLabel: string;
+    /** Layout only. Changing a Prism-owned visual property from here is prohibited. */
+    className?: string;
+};
+/**
+ * The multi-step record write form: one group of fields at a time above the rail
+ * the package already ships.
+ *
+ * **This is the write form's second arrangement and not a `-02`.** A wizard draws
+ * one group of fields at a time, puts a rail above them, and asks a decision the
+ * plain form never asks, which is whether this step may be left forwards. One Item
+ * could not draw both without gaining the rail, the partition and that decision. It
+ * is a property of how many fields the record has rather than one of two renderings
+ * a consumer picks between on purpose, which is what a `-02` is for, so it earns
+ * its own name.
+ *
+ * **Back, the forward control and the rail are the shipped wizard's.** This Block
+ * renders none of them: it composes `FormWizard`, hands it the steps, and draws each
+ * step's fields as that step's children. Every one of those controls is a call on
+ * the caller's own step change, and the rail is an ordered indicator with no opinion
+ * about whether a reader may move, so a caller who wants a navigable rail writes
+ * call to action links carrying their own destinations beside this Block. A Block
+ * that cannot make a control work should not render one, which is why this one
+ * renders none of the three.
+ *
+ * **The stepped arm declares no submission arm of its own.** On the last step the
+ * forward control is the form's submit and it reports the last index with the
+ * direction `forward`, so the finish signal is a callback the caller already passes
+ * and no second prop is needed to name it. An `action` arm would be an arm that
+ * cannot be honoured: the shipped wizard refuses the browser's own submission
+ * because its submit *is* the forward control. A caller whose answer is a URL post
+ * composes the per-step form beside this Block.
+ *
+ * **Every field is controlled and the Block holds no value of its own across a step
+ * change.** Only the current step's fields are in the document, so a step that
+ * unmounts takes every uncontrolled value in it with it, and there is no draft to
+ * restore from because a Block that held the draft would be holding application
+ * state. The values are the consumer's from the first keystroke, and the cost is one
+ * state object per screen instead of one form.
+ *
+ * **The step is the consumer's, and the Block draws the step it was handed and no
+ * reachability at all.** It draws nothing about a step it is not showing: no
+ * completed mark beyond the one the shipped rail already derives from the index, no
+ * disabled step, no skipped step and no count of what has been answered. An index
+ * the specification does not contain draws a real step rather than nothing, because
+ * a region with no route out is worse and drawing the nearest step is the one answer
+ * that is not a claim about a cause. It publishes no state for a step that does not
+ * exist, because a step that does not exist, a stale link and a step this reader may
+ * not see are one index and three sentences.
+ *
+ * **An issue naming a key off the current step is left undrawn and the reader is not
+ * moved.** Validation is the consumer's, entirely: this Block evaluates no rule,
+ * carries no validator and derives no fraction complete, because a fraction over a
+ * sequence whose steps are gated by rules it cannot see is false the moment a
+ * consumer skips one. A cross-step rule arrives as an issue and is drawn only while
+ * its control is on the step being drawn.
+ *
+ * It is a client Component, because the shipped wizard is one and every value prop
+ * here is a function the caller hands it, which is a client-to-client boundary
+ * wherever it is written.
+ */
+export declare function RecordWizard01({ steps, current, onStepChange, values, onValueChange, issues, backLabel, nextLabel, finishLabel, blockedLabel, progressLabel, issueLabel, instructionsLabel, className, }: RecordWizard01Props): import("react").JSX.Element;
+export default RecordWizard01;
+//# sourceMappingURL=record-wizard.d.ts.map

package/dist/blocks/record-wizard-01/record-wizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-wizard.d.ts","sourceRoot":"","sources":["../../../src/blocks/record-wizard-01/record-wizard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAgB7C,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAE1D;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;;;;;OAQG;IACH,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;IAChC;;;;;;;;OAQG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAG,MAAM,KAAK,IAAI,CAAA;IACpE;;;;;;;;;OASG;IACH,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC/B,yDAAyD;IACzD,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACrC,+CAA+C;IAC/C,SAAS,EAAE,SAAS,CAAA;IACpB,8EAA8E;IAC9E,SAAS,EAAE,SAAS,CAAA;IACpB,qFAAqF;IACrF,WAAW,EAAE,SAAS,CAAA;IACtB,mCAAmC;IACnC,YAAY,EAAE,SAAS,CAAA;IACvB,gDAAgD;IAChD,aAAa,EAAE,MAAM,CAAA;IACrB,iFAAiF;IACjF,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACrC,8DAA8D;IAC9D,iBAAiB,EAAE,MAAM,CAAA;IACzB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA6HD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,OAAO,EACP,YAAY,EACZ,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,SAAS,EACT,WAAW,EACX,YAAY,EACZ,aAAa,EACb,UAAU,EACV,iBAAiB,EACjB,SAAS,GACV,EAAE,mBAAmB,+BA4CrB;AAED,eAAe,cAAc,CAAA"}