@nanisoft/prism-ui 0.16.1 → 1.1.0

package/dist/blocks/nothing-chosen-01/nothing-chosen.d.ts

@@ -0,0 +1,119 @@
+import type { ReactNode } from 'react';
+/**
+ * The props a NothingChosen01 takes.
+ *
+ * Every string is a prop and the Block ships none. There is no sentence, no
+ * fallback, no reason value and no label for a control the Block does not
+ * render, and the absence is the argument rather than an omission: this is the
+ * one state in the system whose words are entirely the caller's, because the
+ * next step in it is a click in the pane beside this one and the sentence that
+ * describes it is a claim about that reader's product, not about this design
+ * system.
+ */
+export type NothingChosen01Props = {
+    /**
+     * The words the reader reads: what is in this pane, and what they do next, in
+     * the product's own voice. Required, because a pane with a frame and no words
+     * is a box a reader has to interpret, and because the Block's whole job is to
+     * carry the caller's sentence and nothing else.
+     *
+     * "Select an invoice" says what is here and what to do. "Nothing here" says
+     * something false, and the failure this Block is shaped to prevent starts with
+     * a pane that tells a reader there is nothing to read while a list of records
+     * sits beside it.
+     */
+    title: string;
+    /**
+     * The sentence under the words, for the part they cannot fit: what the pane
+     * will show, or what the reader should know before they choose. Omit it when
+     * the words above are the whole message, which is the ordinary case for a
+     * detail pane a reader lands in.
+     */
+    body?: string;
+    /**
+     * The mark above the words, as a slot.
+     *
+     * A slot and not a mark this Block picks, for the reason `EmptyState01` takes
+     * one: the shape that means "choose something" is a claim about the product's
+     * records, and four products calling their records four different things would
+     * each be handed an icon that is wrong for the other three. It is drawn in the
+     * muted ink and sized by the caller, and it is `aria-hidden` wherever a caller
+     * puts it, because the state is carried by the words and a mark a screen
+     * reader reads is the same sentence twice.
+     */
+    icon?: ReactNode;
+    /**
+     * Layout only, exactly as on every Component and Block. Changing a Prism-owned
+     * visual property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * The resting detail pane: a reader has opened a region that can hold a record
+ * and has chosen nothing yet.
+ *
+ * **This is a statement about a reader's pointer, and that is the whole of why it
+ * is a Block beside `EmptyState01` rather than a reason on it.** The reasons that
+ * Block takes are answers to one question: what happened to the collection this
+ * region would have drawn? Nothing has ever existed in it, the reader's own
+ * narrowing emptied it, the reader's own earlier action moved every record out of
+ * it, or this reader may not see it. Each is a statement about a set, and the
+ * frame those four share is the assertion that follows from them together: there
+ * is nothing here to read. Nothing chosen is not that. No collection has been
+ * emptied, narrowed or hidden, the records are in the index a few centimetres to
+ * the left, and what is missing is the reader's pointer at one of them. A reason
+ * here would have to keep that frame honest by claiming there is nothing to read
+ * here while a readable region sits next to it, which is the failure this Block
+ * exists rather than to commit.
+ *
+ * **The newest of those four is the one that shows the line most sharply, because
+ * a region the reader emptied has the same frame and the opposite neighbourhood.**
+ * A bin a reader has just cleared has no readable neighbour, so the shared frame
+ * is honest there and the reason belongs on `EmptyState01` beside the other three.
+ * This pane has a full index beside it, so the same frame would be a claim the
+ * reader can see is false. The difference between the two answers is not which is
+ * more correct; it is what each one is a statement about.
+ *
+ * **What it does not draw is half of what it is.** No action, and
+ * `scripts/check-block-controls.mjs` is the reason rather than a coincidence: the
+ * next step in this state is a click in the other pane, so a control here would be
+ * either a button Prism wires to nothing or a second copy of an affordance the
+ * index already draws for the same reader. So there is no control in this source
+ * at all, the gate has nothing to catch here, and a reader auditing for the
+ * absence finds none. No height floor either, and that one is the composition's
+ * business rather than the Block's: a pane in a grid is already as tall as its
+ * neighbour, and a `min-h` authored for a page region would be a second answer to
+ * a question the split's tracks have already answered. So this Block fills the
+ * height it is given and centres itself in it, and a caller who wants a floor
+ * writes one in the composition where the pane is placed.
+ *
+ * **No sentence of its own, no fallback and no frame.** The Block ships no text,
+ * and it ships no border, no fill and no minimum size either, for the same reason
+ * the words are the caller's: a dashed frame is a claim that the region has
+ * nothing in it, and this region has everything in it that the index beside it
+ * has. What the caller gives this Block is a region, and the words; the frame
+ * around them, if there is one, belongs to whatever drew the pane.
+ *
+ * **The words are a `<p>` and not a heading, for the reason `EmptyState01` draws
+ * its headline as one.** The pane persists and its contents do not: what is in it
+ * is replaced by a record the moment the reader chooses. A heading here would put
+ * an entry in the document outline that disappears on the first click, and a
+ * reader navigating by heading would select "Select an invoice" and land where
+ * the entry no longer exists. The pane's own claim belongs to the heading the
+ * caller's shell already draws above the split.
+ *
+ * **Emphasis belongs in the pane's content and not in the index's width.** The
+ * instinct when a detail pane is empty is to widen the index and let the pane go,
+ * and it is refused: a split whose tracks change ratio when a row is clicked moves
+ * the list out from under the hand that clicked it. The tracks hold their ratio at
+ * every selection state, so what changes is content, and forty rows beside one
+ * sentence is not a competition. A caller who wants the index louder makes the
+ * index denser, which is the index's own decision to take.
+ *
+ * **It is a server Component.** It holds no state, imports no client code and
+ * renders no control, so a consumer that passes a client node inside it pays for
+ * the node and not for this frame.
+ */
+export declare function NothingChosen01({ title, body, icon, className }: NothingChosen01Props): import("react").JSX.Element;
+export default NothingChosen01;
+//# sourceMappingURL=nothing-chosen.d.ts.map

package/dist/blocks/nothing-chosen-01/nothing-chosen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nothing-chosen.d.ts","sourceRoot":"","sources":["../../../src/blocks/nothing-chosen-01/nothing-chosen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC;;;;;;;;;;GAUG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;;;;;;;;OAUG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,oBAAoB,+BA+CrF;AAED,eAAe,eAAe,CAAA"}

package/dist/blocks/nothing-chosen-01/nothing-chosen.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/**
+ * The resting detail pane: a reader has opened a region that can hold a record
+ * and has chosen nothing yet.
+ *
+ * **This is a statement about a reader's pointer, and that is the whole of why it
+ * is a Block beside `EmptyState01` rather than a reason on it.** The reasons that
+ * Block takes are answers to one question: what happened to the collection this
+ * region would have drawn? Nothing has ever existed in it, the reader's own
+ * narrowing emptied it, the reader's own earlier action moved every record out of
+ * it, or this reader may not see it. Each is a statement about a set, and the
+ * frame those four share is the assertion that follows from them together: there
+ * is nothing here to read. Nothing chosen is not that. No collection has been
+ * emptied, narrowed or hidden, the records are in the index a few centimetres to
+ * the left, and what is missing is the reader's pointer at one of them. A reason
+ * here would have to keep that frame honest by claiming there is nothing to read
+ * here while a readable region sits next to it, which is the failure this Block
+ * exists rather than to commit.
+ *
+ * **The newest of those four is the one that shows the line most sharply, because
+ * a region the reader emptied has the same frame and the opposite neighbourhood.**
+ * A bin a reader has just cleared has no readable neighbour, so the shared frame
+ * is honest there and the reason belongs on `EmptyState01` beside the other three.
+ * This pane has a full index beside it, so the same frame would be a claim the
+ * reader can see is false. The difference between the two answers is not which is
+ * more correct; it is what each one is a statement about.
+ *
+ * **What it does not draw is half of what it is.** No action, and
+ * `scripts/check-block-controls.mjs` is the reason rather than a coincidence: the
+ * next step in this state is a click in the other pane, so a control here would be
+ * either a button Prism wires to nothing or a second copy of an affordance the
+ * index already draws for the same reader. So there is no control in this source
+ * at all, the gate has nothing to catch here, and a reader auditing for the
+ * absence finds none. No height floor either, and that one is the composition's
+ * business rather than the Block's: a pane in a grid is already as tall as its
+ * neighbour, and a `min-h` authored for a page region would be a second answer to
+ * a question the split's tracks have already answered. So this Block fills the
+ * height it is given and centres itself in it, and a caller who wants a floor
+ * writes one in the composition where the pane is placed.
+ *
+ * **No sentence of its own, no fallback and no frame.** The Block ships no text,
+ * and it ships no border, no fill and no minimum size either, for the same reason
+ * the words are the caller's: a dashed frame is a claim that the region has
+ * nothing in it, and this region has everything in it that the index beside it
+ * has. What the caller gives this Block is a region, and the words; the frame
+ * around them, if there is one, belongs to whatever drew the pane.
+ *
+ * **The words are a `<p>` and not a heading, for the reason `EmptyState01` draws
+ * its headline as one.** The pane persists and its contents do not: what is in it
+ * is replaced by a record the moment the reader chooses. A heading here would put
+ * an entry in the document outline that disappears on the first click, and a
+ * reader navigating by heading would select "Select an invoice" and land where
+ * the entry no longer exists. The pane's own claim belongs to the heading the
+ * caller's shell already draws above the split.
+ *
+ * **Emphasis belongs in the pane's content and not in the index's width.** The
+ * instinct when a detail pane is empty is to widen the index and let the pane go,
+ * and it is refused: a split whose tracks change ratio when a row is clicked moves
+ * the list out from under the hand that clicked it. The tracks hold their ratio at
+ * every selection state, so what changes is content, and forty rows beside one
+ * sentence is not a competition. A caller who wants the index louder makes the
+ * index denser, which is the index's own decision to take.
+ *
+ * **It is a server Component.** It holds no state, imports no client code and
+ * renders no control, so a consumer that passes a client node inside it pays for
+ * the node and not for this frame.
+ */
+export function NothingChosen01({ title, body, icon, className }) {
+    return (_jsxs("div", { "data-slot": "nothing-chosen", className: cn(
+        // Centred in the pane it is given rather than floored to a size of its
+        // own. `h-full` takes the height the composition already decided and
+        // `justify-center` puts the words in the middle of it, so this Block
+        // draws no minimum height and no frame: a pane in a grid is as tall as
+        // its neighbour, and a floor authored here would be a second answer to
+        // a question the split's tracks have already answered.
+        'flex h-full flex-col items-center justify-center gap-3 p-8 text-center', className), children: [icon === undefined ? null : (_jsx("div", { "data-slot": "nothing-chosen-icon", "aria-hidden": true, className: "text-muted-foreground flex-none", children: icon })), _jsx("p", { "data-slot": "nothing-chosen-title", className: "text-base font-semibold text-balance", children: title }), body === undefined ? null : (_jsx("p", { "data-slot": "nothing-chosen-body", className: "text-muted-foreground max-w-measure-narrow text-pretty text-sm", children: body }))] }));
+}
+export default NothingChosen01;

package/dist/blocks/project-dashboard-01/index.d.ts

@@ -1,3 +1,3 @@
 export { ProjectDashboard01, default } from './project-dashboard.js';
-export type { ProjectDashboard01Figure, ProjectDashboard01Span, ProjectDashboard01Panel, ProjectDashboard01Props, } from './project-dashboard.js';
+export type { ProjectDashboard01Span, ProjectDashboard01Panel, ProjectDashboard01Props, } from './project-dashboard.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/blocks/project-dashboard-01/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/project-dashboard-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAIjE,YAAY,EACV,wBAAwB,EACxB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/project-dashboard-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAGjE,YAAY,EACV,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,qBAAqB,CAAA"}

package/dist/blocks/project-dashboard-01/project-dashboard.d.ts

@@ -1,26 +1,6 @@
 import type { ReactNode } from 'react';
 import { type HeadingLevel } from '../../components/ui/section.js';
-/**
- * One figure in the row across the top.
- *
- * The same three fields `Project01` takes for its figures, declared separately
- * rather than imported for the reason `ProcessFlow01` gives on `ProcessStage`: a
- * dashboard and a detail header are different claims, and a caller composing one has
- * no reason to take the other's type, and sharing the declaration would invite a
- * caller to widen a dashboard figure by reaching for a detail field. The field names
- * are still the same on purpose, so a consumer with a project model has one model.
- */
-export type ProjectDashboard01Figure = {
-    /** What the figure measures, read under it. */
-    label: string;
-    /** The figure itself, already formatted by the caller. */
-    value: ReactNode;
-    /**
-     * The change against the previous reading, as a number whose sign is the
-     * direction. See `MetricDelta` on the Component.
-     */
-    delta?: number;
-};
+import type { MetricSpec } from '../../lib/spec.js';
 /**
  * How much of the grid one panel takes.
  *
@@ -116,8 +96,18 @@ export type ProjectDashboard01Props = {
     state?: string;
     /** The words for that state. Required whenever `state` is given. */
     stateLabel?: string;
-    /** The figures, in the order a reader should meet them. */
-    figures?: ProjectDashboard01Figure[];
+    /**
+     * The figures, in the order a reader should meet them.
+     *
+     * **The shared `MetricSpec` and not a shape of this Block's own.** `key`,
+     * `label` and `value` are required on each figure, `delta` is a number whose sign
+     * is the direction, `deltaFormat` is the caller's own words for that change,
+     * `hint` carries the period or the caveat, and a `series` and an `href` each travel
+     * with the label or the words they cannot be read without. The type is published as
+     * `@nanisoft/prism-ui/spec`, so the words a caller learns here are the words on
+     * every other figure surface.
+     */
+    figures?: MetricSpec[];
     /**
      * The panels, in the order a reader should meet them.
      *
@@ -172,10 +162,14 @@ export type ProjectDashboard01Props = {
  * composed one is not. `Status` owns the dot and the arrangement that matters most on
  * a dashboard: the dot is `aria-hidden` and the words carry the state, so a reader
  * who cannot separate the tones still reads which is which, and a row of states
- * never becomes a row of colours. The one thing `Metric` cannot do is print a delta
- * it has no unit for, so a figure with a `delta` and no formatter prints the number
- * itself, which is honest and usually not what was wanted; the caller's answer is to
- * put the whole change in `value` as a node they formatted.
+ * never becomes a row of colours. The figures are the shared `MetricSpec` and not
+ * this Block's own shape, so a figure declared for this row is the same figure a
+ * metric summary takes, and the formatter travels with it: a figure with a `delta`
+ * and no formatter prints the number the caller passed, which is honest and usually
+ * not what was wanted, and a figure with a formatter prints the caller's own words.
+ * That is the disagreement this migration closes, because the same consumer reading
+ * two dashboards built out of this package now sees one shape rather than a formatted
+ * change on one screen and a bare `0.12` on another.
  *
  * **A panel's title is a heading one step below the section, derived rather than
  * written, and a panel with no title draws no heading at all.** A dashboard is

package/dist/blocks/project-dashboard-01/project-dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"project-dashboard.d.ts","sourceRoot":"","sources":["../../../src/blocks/project-dashboard-01/project-dashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAqCpG;;;;;;;;;GASG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAA;IACb,0DAA0D;IAC1D,KAAK,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;AAiB9D;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAC7B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,2DAA2D;IAC3D,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;;;OAOG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,wBAAwB,EAAE,CAAA;IACpC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,uBAAuB,EAAE,CAAA;IAClC,iEAAiE;IACjE,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,IAAI,EACJ,OAAO,EACP,KAAK,EACL,UAAU,EACV,OAAO,EACP,MAAM,EACN,YAAmB,EACnB,SAAS,GACV,EAAE,uBAAuB,+BAkGzB;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"project-dashboard.d.ts","sourceRoot":"","sources":["../../../src/blocks/project-dashboard-01/project-dashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGpG,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAoChD;;;;;;;;;GASG;AACH,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;AAgD9D;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAC7B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,2DAA2D;IAC3D,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;;;OAOG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAA;IACtB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,uBAAuB,EAAE,CAAA;IAClC,iEAAiE;IACjE,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,IAAI,EACJ,OAAO,EACP,KAAK,EACL,UAAU,EACV,OAAO,EACP,MAAM,EACN,YAAmB,EACnB,SAAS,GACV,EAAE,uBAAuB,+BA2HzB;AAED,eAAe,kBAAkB,CAAA"}

package/dist/blocks/project-dashboard-01/project-dashboard.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card.js';
+import { CtaLink } from '../../components/ui/cta-link.js';
 import { Metric } from '../../components/ui/metric.js';
 import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
+import { Sparkline } from '../../components/ui/sparkline.js';
 import { Status } from '../../components/ui/status.js';
 import { cn } from '../../lib/utils.js';
 /**
@@ -49,6 +51,32 @@ const SPAN = {
     half: 'lg:col-span-3',
     third: 'lg:col-span-2',
 };
+/**
+ * The refusals, as checks, so a tile that would render a link nobody can name is a
+ * diagnostic in a console rather than a rendered link.
+ *
+ * **The type already holds both pairs, and these checks exist for the caller the
+ * type never saw.** `MetricSpec` requires a destination's words wherever it has a
+ * destination and a series name wherever it has a series, so a typed caller cannot
+ * reach either diagnostic. A JavaScript caller can, and the cost of reaching one is
+ * a figure that draws a link with no words or a shape no reader can announce, so the
+ * same rule is stated once more where a runtime value can be read: the pair rule is
+ * the one `Dashboard01` makes.
+ */
+function assertMetrics(metrics) {
+    for (const metric of metrics) {
+        if ((metric.href === undefined) !== (metric.hrefLabel === undefined)) {
+            throw new Error(`ProjectDashboard01: the figure "${metric.key}" declares one of href and hrefLabel without the other, so the ` +
+                'figure would carry a link with no words on it, or a name with no link beside it. Pass the words that say ' +
+                'what following it does, or omit the href.');
+        }
+        if ((metric.series === undefined) !== (metric.seriesLabel === undefined)) {
+            throw new Error(`ProjectDashboard01: the figure "${metric.key}" declares one of series and seriesLabel without the other, so the ` +
+                'figure would be a picture with no name, which a screen reader cannot announce and two shapes in one row ' +
+                'cannot be told apart. Pass the series name in the words the product uses, or omit the series.');
+        }
+    }
+}
 /**
  * One project's overview: the figures across the top, and a grid of panels whose
  * spans the caller declares.
@@ -89,10 +117,14 @@ const SPAN = {
  * composed one is not. `Status` owns the dot and the arrangement that matters most on
  * a dashboard: the dot is `aria-hidden` and the words carry the state, so a reader
  * who cannot separate the tones still reads which is which, and a row of states
- * never becomes a row of colours. The one thing `Metric` cannot do is print a delta
- * it has no unit for, so a figure with a `delta` and no formatter prints the number
- * itself, which is honest and usually not what was wanted; the caller's answer is to
- * put the whole change in `value` as a node they formatted.
+ * never becomes a row of colours. The figures are the shared `MetricSpec` and not
+ * this Block's own shape, so a figure declared for this row is the same figure a
+ * metric summary takes, and the formatter travels with it: a figure with a `delta`
+ * and no formatter prints the number the caller passed, which is honest and usually
+ * not what was wanted, and a figure with a formatter prints the caller's own words.
+ * That is the disagreement this migration closes, because the same consumer reading
+ * two dashboards built out of this package now sees one shape rather than a formatted
+ * change on one screen and a bare `0.12` on another.
  *
  * **A panel's title is a heading one step below the section, derived rather than
  * written, and a panel with no title draws no heading at all.** A dashboard is
@@ -119,6 +151,14 @@ export function ProjectDashboard01({ eyebrow, name, summary, state, stateLabel,
             'not there. A state a reader can only see is a state nobody can act on, so pass both or neither.');
     }
     const Title = childLevel(headingLevel);
-    return (_jsxs(Section, { "data-slot": "project-dashboard-01", className: cn(className), children: [_jsxs("div", { "data-slot": "project-dashboard-head", className: "flex flex-col gap-6", children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: name, description: summary }), state === undefined ? null : (_jsx("div", { "data-slot": "project-dashboard-state", children: _jsx(Status, { tone: toneOf(state), label: stateLabel }) }))] }), figures === undefined || figures.length === 0 ? null : (_jsx("div", { "data-slot": "project-dashboard-figures", className: "mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4", children: figures.map((figure) => (_jsx(Metric, { "data-slot": "project-dashboard-figure", value: figure.value, label: figure.label, delta: figure.delta }, figure.label))) })), panels === undefined || panels.length === 0 ? null : (_jsx("div", { "data-slot": "project-dashboard-panels", className: "mt-10 grid items-start gap-6 sm:grid-cols-2 lg:grid-cols-6", children: panels.map((panel) => (_jsxs(Card, { "data-slot": "project-dashboard-panel", "data-panel": panel.id, "data-span": panel.span ?? 'half', className: SPAN[panel.span ?? 'half'], children: [panel.title === undefined && panel.toolbar === undefined ? null : (_jsxs(CardHeader, { className: "flex items-center justify-between gap-4", children: [panel.title === undefined ? null : (_jsx(CardTitle, { as: Title, className: "min-w-0", children: panel.title })), panel.toolbar === undefined ? null : (_jsx("div", { "data-slot": "project-dashboard-panel-toolbar", className: "flex shrink-0 items-center gap-2", children: panel.toolbar }))] })), _jsx(CardContent, { className: "min-w-0", children: panel.children })] }, panel.id))) }))] }));
+    if (figures !== undefined && figures.length > 0)
+        assertMetrics(figures);
+    return (_jsxs(Section, { "data-slot": "project-dashboard-01", className: cn(className), children: [_jsxs("div", { "data-slot": "project-dashboard-head", className: "flex flex-col gap-6", children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: name, description: summary }), state === undefined ? null : (_jsx("div", { "data-slot": "project-dashboard-state", children: _jsx(Status, { tone: toneOf(state), label: stateLabel }) }))] }), figures === undefined || figures.length === 0 ? null : (_jsx("div", { "data-slot": "project-dashboard-figures", className: "mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4", children: figures.map((metric) => {
+                    // The delta's words are the caller's own node, and `Metric` takes a
+                    // formatter, so the node is placed through one. A delta with no words is
+                    // left to `Metric`, which prints the number the caller passed.
+                    const deltaWords = metric.deltaFormat;
+                    return (_jsxs("div", { "data-slot": "project-dashboard-figure", "data-metric": metric.key, className: "flex flex-col gap-3", children: [_jsx(Metric, { value: metric.value, label: metric.label, delta: metric.delta, deltaFormat: deltaWords === undefined ? undefined : () => deltaWords, hint: metric.hint }), metric.series === undefined ? null : (_jsx("div", { "data-slot": "project-dashboard-sparkline", className: "flex", children: _jsx(Sparkline, { values: metric.series, label: metric.seriesLabel, className: "ms-auto" }) })), metric.href === undefined ? null : (_jsx(CtaLink, { href: metric.href, variant: "ghost", size: "sm", children: metric.hrefLabel }))] }, metric.key));
+                }) })), panels === undefined || panels.length === 0 ? null : (_jsx("div", { "data-slot": "project-dashboard-panels", className: "mt-10 grid items-start gap-6 sm:grid-cols-2 lg:grid-cols-6", children: panels.map((panel) => (_jsxs(Card, { "data-slot": "project-dashboard-panel", "data-panel": panel.id, "data-span": panel.span ?? 'half', className: SPAN[panel.span ?? 'half'], children: [panel.title === undefined && panel.toolbar === undefined ? null : (_jsxs(CardHeader, { className: "flex items-center justify-between gap-4", children: [panel.title === undefined ? null : (_jsx(CardTitle, { as: Title, className: "min-w-0", children: panel.title })), panel.toolbar === undefined ? null : (_jsx("div", { "data-slot": "project-dashboard-panel-toolbar", className: "flex shrink-0 items-center gap-2", children: panel.toolbar }))] })), _jsx(CardContent, { className: "min-w-0", children: panel.children })] }, panel.id))) }))] }));
 }
 export default ProjectDashboard01;

package/dist/blocks/provisioning-01/index.d.ts

@@ -1,3 +1,3 @@
 export { Provisioning01, default } from './provisioning.js';
-export type { Provisioning01Props, Provisioning01Status, ProvisioningField, ProvisioningFieldType, ProvisioningOption, ProvisioningStep, ProvisioningValue, } from './provisioning.js';
+export type { Provisioning01Props, Provisioning01Status, ProvisioningStep, ProvisioningValue, } from './provisioning.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/blocks/provisioning-01/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/provisioning-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAOxD,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/provisioning-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAMxD,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,gBAAgB,CAAA"}

package/dist/blocks/provisioning-01/provisioning.d.ts

@@ -1,97 +1,6 @@
 import type { ReactNode } from 'react';
 import { type HeadingLevel } from '../../components/ui/section.js';
-/**
- * The five controls a provisioning run can ask a reader to fill in.
- *
- * A closed set, and the closure is the point, for the reason `ContactField`
- * gives at full length: the controls are this Block's, so the field declaration is
- * data and Prism supplies none of it. A run that is committed in three steps and
- * four that is committed in one want the same Component, and a provisioning
- * question that needs a date picker or a file, or a set of radio buttons whose
- * options each carry their own description, is a caller's own surface composed
- * beside this one rather than a sixth arm here. The cost is named rather than
- * hidden: a consumer whose step needs a control Prism does not draw cannot reach
- * it through this type, and the answer is a step with no fields plus the control
- * the caller composes into `actions`.
- */
-export type ProvisioningFieldType = 'text' | 'email' | 'number' | 'select' | 'textarea';
-/**
- * One choice in a `select` field, and nothing else.
- *
- * A native `<option>` holds text and nothing more, which is the whole reason a
- * provisioning step's select is a `NativeSelect` rather than the Base UI one. The
- * two values are a string and its label, so a caller who needs a description
- * beside an option, a count, or anything nested is reaching for a control the
- * platform cannot render, and this Block does not pretend otherwise.
- */
-export type ProvisioningOption = {
-    /** What the run records for this choice, which is a key and not a sentence. */
-    value: string;
-    /** The words the reader sees, in the product's own language. */
-    label: string;
-};
-/**
- * What every provisioning field carries, whichever control it draws.
- *
- * `required` is a boolean rather than an optional prop because there is no third
- * state worth having: a field is one the reader must fill or one they may leave,
- * and `required?: boolean` leaves a caller who passed nothing unable to say which
- * of the two they meant.
- *
- * The field's value is not here. A run collects what the reader typed and hands
- * the whole record over at the commit, so there is nothing for a caller to hold
- * between two steps: a step is mounted, filled and unmounted, and the values
- * travel in the Block's own state, which is why this is a client Component.
- */
-type ProvisioningFieldBase = {
-    /** The caller's key for this field, and the key the value arrives under. */
-    id: string;
-    /** The field's visible name, and the accessible name its control announces. */
-    label: string;
-    /** Whether the reader may commit the run without filling it. */
-    required: boolean;
-    /**
-     * A line under the control, announced with it.
-     *
-     * A node, because the honest line is sometimes not one sentence: a caller's
-     * hint, a link to the thing being asked about, a piece of the page's own copy.
-     * It is wired to the control through `aria-describedby` rather than drawn as a
-     * footnote, so a screen reader hears what this field is for as they reach it.
-     */
-    description?: ReactNode;
-    /** What the control shows while it is empty. A hint, not a name. */
-    placeholder?: string;
-    /** The platform's own autofill hint for this field. */
-    autoComplete?: string;
-};
-/**
- * One field of the caller's run, and the control it draws.
- *
- * **A union and not one type with an optional `options`, and that is the shape
- * of the whole argument in this Block.** A run's fields are the caller's
- * declaration and not this package's opinion about what a reader may be asked,
- * and the one place that shows is the select: a select with no options is a
- * control with nothing in it, which is a question no reader can answer and looks
- * answered only because the control is there and focusable. A `options?: string[]`
- * on one type would typecheck the defect and leave only a diagnostic at run time
- * to catch it, which is one gate too late. The union is the same mechanism
- * `HeroAction` uses for the same reason: the shape that requires something
- * declares it, and the shape that forbids it says so in the type rather than in
- * prose.
- *
- * The cost of the union is that a caller building a field list generically, from
- * data, has to narrow before it can type the result, and the answer to that is a
- * narrowing function in the caller's own code rather than a looser type here.
- */
-export type ProvisioningField = (ProvisioningFieldBase & {
-    type: 'select';
-    /** The choices, in the order the reader should meet them. */
-    options: readonly ProvisioningOption[];
-}) | (ProvisioningFieldBase & {
-    type: 'text' | 'email' | 'number' | 'textarea';
-    /** A select with no options is a question nobody can answer, so it is not one here. */
-    options?: never;
-});
+import type { FieldSpec } from '../../lib/spec.js';
 /**
  * One step of a run: what it is called, what happens there, and what the reader is
  * asked for while they are on it.
@@ -119,12 +28,15 @@ export type ProvisioningStep = {
     /**
      * What the reader is asked for on this step, in the order they should meet it.
      *
-     * A list and not a fixed set, for the reason `Contact01` states in full: a
-     * provisioning run with a fixed set of fields is a run that decides what a reader
-     * may be asked, and the decision is invisible in a review because the rendered
-     * form looks complete.
+     * The shared `FieldSpec`, so a step's fields use the vocabulary a record write
+     * form uses: a stable `key`, a required `label` and a required `kind` drawn from
+     * Prism's own controls, with the options a choice carries under that kind and a
+     * `slot` arm for a control this package does not ship. A list and not a fixed
+     * set, for the reason `Contact01` states in full: a provisioning run with a
+     * fixed set of fields is a run that decides what a reader may be asked, and the
+     * decision is invisible in a review because the rendered form looks complete.
      */
-    fields: readonly ProvisioningField[];
+    fields: readonly FieldSpec[];
 };
 /**
  * Everything the reader typed, keyed by the caller's own field ids.

package/dist/blocks/provisioning-01/provisioning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provisioning.d.ts","sourceRoot":"","sources":["../../../src/blocks/provisioning-01/provisioning.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"provisioning.d.ts","sourceRoot":"","sources":["../../../src/blocks/provisioning-01/provisioning.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtC,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAA;AAUpC,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAG1D;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAA;IACV,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;;;;;OAUG;IACH,MAAM,EAAE,SAAS,SAAS,EAAE,CAAA;CAC7B,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAEtD;;;;;;;;;GASG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,gFAAgF;IAChF,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;IAC5C,4DAA4D;IAC5D,OAAO,EAAE,SAAS,CAAA;CACnB,CAAA;AAED,mFAAmF;AACnF,MAAM,MAAM,mBAAmB,GAAG;IAChC,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAA;IAChB,kFAAkF;IAClF,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;;OAOG;IACH,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAA;IAClC;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;;;OAQG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB;;;;;;;;;;;OAWG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC7C;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,iEAAiE;IACjE,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA2GD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,WAAW,EACX,KAAK,EACL,OAAW,EACX,MAAM,EACN,MAAM,EACN,SAAS,EACT,SAAS,EACT,YAAY,EACZ,SAAS,EACT,KAAK,EACL,MAAM,EACN,YAAmB,EACnB,SAAS,GACV,EAAE,mBAAmB,+BAuNrB;AAED,eAAe,cAAc,CAAA"}

package/dist/blocks/provisioning-01/provisioning.js

@@ -2,13 +2,12 @@
 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, FieldLabel } from '../../components/ui/field.js';
-import { Input } from '../../components/ui/input.js';
+import { Field, FieldDescription } from '../../components/ui/field.js';
+import { Label } from '../../components/ui/label.js';
 import { LiveRegion } from '../../components/ui/live-region.js';
-import { NativeSelect } from '../../components/ui/native-select.js';
 import { Section, SectionHeading, childLevel, } from '../../components/ui/section.js';
 import { Steps } from '../../components/ui/steps.js';
-import { Textarea } from '../../components/ui/textarea.js';
+import { CHOICE_KINDS, fieldText, renderControl, serialize, SELF_LABELLED, } from '../../lib/field-render.js';
 import { cn } from '../../lib/utils.js';
 /**
  * Whether a caller-supplied string never arrived, arrived empty, or arrived as
@@ -56,13 +55,14 @@ function assertRun(steps, backLabel, nextLabel, confirmLabel) {
     }
     for (const step of steps) {
         for (const field of step.fields) {
-            if (blank(field.label)) {
-                throw new Error(`Provisioning01: the field "${field.id}" on the step "${step.id}" declares no label, so the ` +
+            if (blank(typeof field.label === 'string' ? field.label : undefined)) {
+                throw new Error(`Provisioning01: the field "${field.key}" on the step "${step.id}" declares no label, so the ` +
                     'control would be announced with no name and two fields on this run would be announced ' +
                     'identically. Every control this Block draws is named by its label, so there is no fallback.');
             }
-            if (field.type === 'select' && blankList(field.options)) {
-                throw new Error(`Provisioning01: the field "${field.id}" on the step "${step.id}" is a select and passes no ` +
+            if (CHOICE_KINDS.has(field.kind) &&
+                blankList(field.options)) {
+                throw new Error(`Provisioning01: the field "${field.key}" on the step "${step.id}" is a choice and passes no ` +
                     'options, so it would render a control with nothing in it, which is a question no reader can ' +
                     'answer. Pass the choices, or declare the field as a text field and check the answer in your ' +
                     'own handler.');
@@ -186,6 +186,7 @@ export function Provisioning01({ eyebrow, title, description, steps, initial = 0
     const generated = useId();
     const [at, setAt] = useState(() => stepAt(steps, initial));
     const [values, setValues] = useState({});
+    const setValue = (key, value) => setValues((held) => ({ ...held, [key]: value }));
     assertRun(steps, backLabel, nextLabel, confirmLabel);
     // Read once, on mount, so a caller whose steps change mid-run is not moved under
     // a reader who is typing. See `initial` for the argument.
@@ -210,11 +211,23 @@ export function Provisioning01({ eyebrow, title, description, steps, initial = 0
     const StepHeading = childLevel(headingLevel);
     return (_jsx(Section, { "data-slot": "provisioning-01", className: cn(className), children: _jsxs("div", { "data-slot": "provisioning-01-body", className: "flex flex-col gap-8", children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description }), _jsx("div", { "data-slot": "provisioning-01-rail", className: "border-border border-b pb-8", children: _jsx(Steps, { steps: rail, current: index }) }), _jsxs("form", { "data-slot": "provisioning-01-form", className: "flex w-full max-w-measure flex-col gap-6", onSubmit: (event) => {
                         event.preventDefault();
-                        onConfirm(values);
-                    }, children: [_jsx(StepHeading, { "data-slot": "provisioning-01-step", className: "text-lg font-semibold tracking-tight", children: step.name }), step.description === undefined ? null : (_jsx("div", { "data-slot": "provisioning-01-step-description", className: "text-muted-foreground text-pretty text-sm", children: step.description })), step.fields.length === 0 ? null : (_jsx("div", { "data-slot": "provisioning-01-fields", className: "flex flex-col gap-4", children: step.fields.map((field) => {
-                                const controlId = `${generated}-${field.id}`;
-                                const descriptionId = `${controlId}-description`;
-                                return (_jsxs(Field, { "data-slot": "provisioning-01-field", "data-field": field.type, children: [_jsx(FieldLabel, { htmlFor: controlId, children: field.label }), field.type === 'textarea' ? (_jsx(Textarea, { id: controlId, name: field.id, rows: 4, placeholder: field.placeholder, required: field.required, value: values[field.id] ?? '', onChange: (event) => setValues((held) => ({ ...held, [field.id]: event.target.value })), "aria-describedby": field.description === undefined ? undefined : descriptionId })) : field.type === 'select' ? (_jsx(NativeSelect, { id: controlId, name: field.id, required: field.required, value: values[field.id] ?? '', onChange: (event) => setValues((held) => ({ ...held, [field.id]: event.target.value })), "aria-describedby": field.description === undefined ? undefined : descriptionId, children: field.options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })) : (_jsx(Input, { id: controlId, name: field.id, type: field.type, placeholder: field.placeholder, autoComplete: field.autoComplete, required: field.required, value: values[field.id] ?? '', onChange: (event) => setValues((held) => ({ ...held, [field.id]: event.target.value })), "aria-describedby": field.description === undefined ? undefined : descriptionId })), field.description === undefined ? null : (_jsx(FieldDescription, { id: descriptionId, children: field.description }))] }, field.id));
+                        onConfirm(Object.fromEntries(Object.entries(values).map(([key, value]) => [key, serialize(value)])));
+                    }, children: [_jsx(StepHeading, { "data-slot": "provisioning-01-step", className: "text-lg font-semibold tracking-tight", children: step.name }), step.description === undefined ? null : (_jsx("div", { "data-slot": "provisioning-01-step-description", className: "text-muted-foreground text-pretty text-sm", children: step.description })), step.fields.length === 0 ? null : (_jsx("div", { "data-slot": "provisioning-01-fields", className: "flex flex-col gap-4", children: step.fields.map((field, fieldIndex) => {
+                                const id = `${generated}-${index}-${fieldIndex}`;
+                                const labelId = `${id}-label`;
+                                const helpId = field.help === undefined ? undefined : `${id}-help`;
+                                const kind = field.kind.toLowerCase();
+                                const ctx = {
+                                    id,
+                                    labelId,
+                                    describedBy: helpId,
+                                    invalid: false,
+                                    text: fieldText(field),
+                                    values,
+                                    setValue,
+                                    controlled: true,
+                                };
+                                return (_jsxs(Field, { "data-slot": "provisioning-01-field", "data-field": field.kind, children: [SELF_LABELLED.has(kind) ? null : (_jsx(Label, { id: labelId, htmlFor: id, required: field.required, disabled: field.disabled, children: field.label })), renderControl(field, ctx), field.help === undefined ? null : (_jsx(FieldDescription, { id: helpId, children: field.help }))] }, field.key));
                             }) })), terms === undefined || !last ? null : (_jsx("p", { "data-slot": "provisioning-01-terms", className: "text-muted-foreground text-pretty text-sm", children: terms })), _jsxs("div", { "data-slot": "provisioning-01-controls", className: "flex flex-col gap-3 sm:flex-row-reverse sm:items-center sm:justify-start", children: [last ? (_jsx(Button, { "data-slot": "provisioning-01-confirm", type: "submit", disabled: working || done, className: "sm:order-2", children: confirmLabel })) : (_jsx(Button, { "data-slot": "provisioning-01-next", type: "button", disabled: working, className: "sm:order-2", onClick: () => {
                                         const to = steps[index + 1];
                                         if (to === undefined)

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

@@ -0,0 +1,3 @@
+export { RecordDetail01, default } from './record-detail.js';
+export type { RecordDetail01Props, RecordDetail01Field, RecordDetail01Relation, RecordDetail01RelationEmpty, } from './record-detail.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

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