@nanisoft/prism-ui 0.16.1 → 1.1.0

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

@@ -0,0 +1,144 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Field, FieldDescription, FieldError, FieldGroup } from '../../components/ui/field.js';
+import { FormWizard, } from '../../components/ui/form-wizard.js';
+import { Label } from '../../components/ui/label.js';
+import { NEEDS_HIDDEN, fieldText, renderControl, serialize, SELF_LABELLED, } from '../../lib/field-render.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * Whether a caller's step list is a form nobody can finish, checked before anything
+ * is drawn so the run fails once with the name of the step rather than once per
+ * field with a nameless control on the page.
+ *
+ * A step with no `id` is a step whose saved answers have nowhere to live, and a step
+ * whose `label` is not a string is a step whose rail label and heading would have to
+ * be kept in step by the caller. Both reach a developer in a console and never a
+ * reader, which is what makes this a refusal rather than copy.
+ */
+function assertSteps(steps) {
+    if (steps.length === 0) {
+        throw new Error('RecordWizard01: steps is empty, so the rail would be a row of nothing above a form with no route ' +
+            'through it. Pass the steps the record has.');
+    }
+    for (const [index, step] of steps.entries()) {
+        if (step.id === undefined) {
+            throw new Error(`RecordWizard01: the step at index ${index} declares no id, so the caller's own per-step state has ` +
+                'nowhere to live and this Block cannot tell two steps apart. Pass a stable id.');
+        }
+        if (typeof step.label !== 'string') {
+            throw new Error(`RecordWizard01: the step "${step.id}" declares no string label, so the rail would draw a word this ` +
+                'Block cannot read and the step heading and its rail label would be two names kept in step by the ' +
+                'caller. Pass the one word both should carry.');
+        }
+    }
+}
+/**
+ * One step's fields, drawn under the heading the shipped wizard already drew.
+ *
+ * Every field is controlled, and an issue is drawn under the control that owns it
+ * only while that control is on this step. A description that is a node rather than
+ * a string is rendered here, because the shipped wizard takes a string for the line
+ * under its heading.
+ */
+function StepFields({ step, values, onValueChange, issues, prefix, }) {
+    return (_jsxs(FieldGroup, { "data-slot": "record-wizard-01-fields", className: "flex flex-col gap-6", children: [typeof step.description === 'string' ? null : step.description, step.fields.map((field, fieldIndex) => {
+                const kind = field.kind.toLowerCase();
+                const id = `${prefix}-${step.id}-${fieldIndex}`;
+                const labelId = `${id}-label`;
+                const helpId = field.help === undefined ? undefined : `${id}-help`;
+                const fieldIssues = issues.filter((issue) => issue.field === field.key);
+                const errorId = fieldIssues.length > 0 ? `${id}-error` : 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: onValueChange,
+                    controlled: true,
+                };
+                return (_jsxs(Field, { "data-slot": "record-wizard-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(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-wizard-01-issue", children: issue.message }, issueIndex))) }))] }, field.key));
+            })] }));
+}
+/**
+ * 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 function RecordWizard01({ steps, current, onStepChange, values, onValueChange, issues, backLabel, nextLabel, finishLabel, blockedLabel, progressLabel, issueLabel, instructionsLabel, className, }) {
+    const prefix = useId();
+    assertSteps(steps);
+    /*
+      Every step is mapped to the shipped wizard's own step shape, and each one's
+      children are that step's fields. The shipped wizard clamps the index and renders
+      only the current step's children, so an index outside the specification draws the
+      nearest real step rather than nothing.
+    */
+    const wizardSteps = steps.map((step) => ({
+        id: step.id,
+        label: step.label,
+        description: typeof step.description === 'string' ? step.description : undefined,
+        children: (_jsx(StepFields, { step: step, values: values, onValueChange: onValueChange, issues: issues ?? [], prefix: prefix })),
+    }));
+    return (_jsx("div", { "data-slot": "record-wizard-01", className: cn('flex w-full flex-col gap-8', className), children: _jsx(FormWizard, { steps: wizardSteps, current: current, onStepChange: onStepChange, backLabel: backLabel, nextLabel: nextLabel, finishLabel: finishLabel, blockedLabel: blockedLabel, progressLabel: progressLabel, issueLabel: issueLabel, instructionsLabel: instructionsLabel }) }));
+}
+export default RecordWizard01;

package/dist/blocks/settings-members-01/settings-members.d.ts

@@ -4,7 +4,8 @@ import { type HeadingLevel } from '../../components/ui/section.js';
  * One role a member can hold, as the caller names it.
  *
  * The option list is the caller's rather than a `Role` union in this module, and
- * the argument is the same one `SettingsPanel01`'s `options` makes: the set of
+ * the argument is the same one the shared field specification's choice options
+ * make: the set of
  * roles a workspace has is that workspace's own fact, it changes with its plan
  * and with its commercial agreements, and a Block that shipped a list would
  * install a permission model into every consumer's settings page.

package/dist/blocks/settings-members-01/settings-members.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-members.d.ts","sourceRoot":"","sources":["../../../src/blocks/settings-members-01/settings-members.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"settings-members.d.ts","sourceRoot":"","sources":["../../../src/blocks/settings-members-01/settings-members.tsx"],"names":[],"mappings":"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"}

package/dist/blocks/settings-panel-01/index.d.ts

@@ -1,3 +1,3 @@
 export { SettingsPanel01, default } from './settings-panel.js';
-export type { SettingsPanel01Props, SettingsPanelField, SettingsPanelOption, SettingsPanelSection, } from './settings-panel.js';
+export type { SettingsPanel01Props } from './settings-panel.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/blocks/settings-panel-01/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/settings-panel-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC3D,YAAY,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/settings-panel-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC3D,YAAY,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/blocks/settings-panel-01/settings-panel.d.ts

@@ -1,81 +1,179 @@
-import { type FormEvent, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type HeadingLevel } from '../../components/ui/section.js';
-export type SettingsPanelOption = {
-    label: string;
-    value: string;
-};
-type SettingsPanelFieldBase = {
-    id: string;
-    label: string;
-    description?: string;
-    disabled?: boolean;
-};
-export type SettingsPanelField = (SettingsPanelFieldBase & {
-    kind: 'text';
-    type?: 'text' | 'email' | 'url';
-    placeholder?: string;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-}) | (SettingsPanelFieldBase & {
-    kind: 'textarea';
-    placeholder?: string;
-    rows?: number;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-}) | (SettingsPanelFieldBase & {
-    kind: 'switch';
-    checked?: boolean;
-    defaultChecked?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
-}) | (SettingsPanelFieldBase & {
-    kind: 'select';
-    placeholder?: string;
-    options: SettingsPanelOption[];
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: string) => void;
-});
-export type SettingsPanelSection = {
-    id: string;
-    title: string;
-    description?: string;
-    fields: SettingsPanelField[];
-};
-export type SettingsPanel01Props = {
-    title: string;
+import type { FieldSpecGroup } from '../../lib/spec.js';
+import type { RecordForm01Issue } from '../record-form-01/index.js';
+/** The members every arm of the save union shares. */
+type SettingsPanel01Base = {
+    /**
+     * The panel's own heading, drawn as the card title.
+     *
+     * Required, because a settings region with no name is a card a reader has to
+     * identify from its fields. The groups inside take their level from this one, so
+     * moving the panel in a document moves every heading in it together.
+     */
+    title: ReactNode;
+    /** One line under the heading, for the part the title cannot carry. */
+    description?: ReactNode;
+    /**
+     * The settings groups, as the shared field specification.
+     *
+     * Each group is a `FieldSpecGroup` from `@nanisoft/prism-ui/spec`: an optional
+     * heading, an optional description and an ordered list of `FieldSpec`. A 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 control this package does not ship is the `slot`
+     * arm, and the Block still draws the label, the help and the error around the
+     * caller's node, so a field has the same shell whether Prism drew the control or
+     * the caller did. Order is the array's order, and the Block never reorders, hides
+     * or drops a field.
+     */
+    groups: readonly FieldSpecGroup[];
+    /**
+     * The values, controlled, keyed by field.
+     *
+     * **The values are the caller's, and the change handler is where a setting leaves.**
+     * A region that applies on change passes an `onValueChange` that applies the
+     * mutation; a region that saves explicitly passes one that updates its own state and
+     * a save arm below. The Block holds no value of its own and owns no storage, so it
+     * cannot see whether the setting is the organisation's, the project's or the
+     * reader's, and it cannot revert a value it never kept.
+     */
+    values: Record<string, unknown>;
+    /** Sets one field's value, keyed by field, on every change. */
+    onValueChange: (key: string, value: unknown) => void;
+    /**
+     * How many columns the fields sit in.
+     *
+     * One at every width by default, and one column again at the narrow breakpoint
+     * when two are asked for. There is no per-field layout prop and no slot per
+     * region.
+     *
+     * @defaultValue 1
+     */
+    columns?: 1 | 2;
+    /**
+     * The issues to draw, keyed by field.
+     *
+     * The shape `FormDialog`, `FormWizard` and the record write form already publish:
+     * an entry names a field's `key` and a message in the product's own words, and
+     * the message is drawn under the control that owns it. A caller who wants a rule
+     * before a mutation runs it itself and passes the result here.
+     */
+    issues?: readonly RecordForm01Issue[];
+    /**
+     * A message about the submission rather than about a control.
+     *
+     * It names no field and marks at most one, which is the arrangement `AuthForm01`
+     * argues for.
+     */
+    submitError?: ReactNode;
+    /**
+     * The caller's own node placed beside the save, such as a cancel link.
+     *
+     * **A node and not a declared secondary action.** The former `secondaryAction`
+     * prop took a label and an optional handler and rendered a button, so a caller who
+     * passed a label and no function got a focusable control, announced as a button,
+     * that activated to nothing. What replaces it is a node the caller wrote, placed
+     * without styling: a `CtaLink` with its required `href`, or a control the caller
+     * wired.
+     */
+    footerStart?: ReactNode;
     /**
      * Heading level for the card's title. See `HeadingLevel`.
      *
-     * This Block draws no Section heading of its own, so the card title is the one
-     * heading it renders and takes the level directly rather than a step below one.
      * The groups inside take their level from this one, so moving the panel in a
      * document moves every heading in it together.
+     *
+     * @defaultValue 'h2'
      */
     headingLevel?: HeadingLevel;
-    description?: string;
-    /** The settings groups, each rendered with a heading and its own fields. */
-    sections: SettingsPanelSection[];
-    /** The submit button label. Omit to render no footer. */
-    submitLabel?: string;
-    onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
-    /** A secondary control, such as Cancel. */
-    secondaryAction?: {
-        label: string;
-        onClick?: () => void;
-    };
-    /** Extra content in the footer, e.g. a status note. */
-    footer?: ReactNode;
+    /** Layout only. Changing a Prism-owned visual property from here is prohibited. */
+    className?: string;
 };
 /**
- * A settings form grouped into sections.
+ * The props a `SettingsPanel01` accepts.
+ *
+ * **A discriminated union over when the value leaves, and one arm is the absence of
+ * a save.** `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. The
+ * first arm carries none of the three, and it is the on-change setting: a region
+ * that applies each change through the field's own handler has no moment at which
+ * the value is refused and draws no footer at all. Each arm forbids the others, so
+ * the compiler holds the rule rather than this paragraph.
+ */
+export type SettingsPanel01Props = (SettingsPanel01Base & {
+    action?: never;
+    onSubmit?: never;
+    submit?: never;
+    submitLabel?: never;
+}) | (SettingsPanel01Base & {
+    /** The URL the form posts to, the browser's own activation. */
+    action: string;
+    /** The label of the save control. */
+    submitLabel: ReactNode;
+    onSubmit?: never;
+    submit?: never;
+}) | (SettingsPanel01Base & {
+    /** Called with the form element when the reader submits. */
+    onSubmit: (form: HTMLFormElement) => void;
+    /** The label of the save control. */
+    submitLabel: ReactNode;
+    action?: never;
+    submit?: never;
+}) | (SettingsPanel01Base & {
+    /** The caller's own control, placed unstyled in the footer. */
+    submit: ReactNode;
+    action?: never;
+    onSubmit?: never;
+    submitLabel?: never;
+});
+/**
+ * A settings region: the shared field specification in a card, measured against the
+ * record write form Block.
+ *
+ * **The archetype is answered by the record write form Block and earns no Item of
+ * its own.** A setting changes behaviour and is often no record at all, but that
+ * difference is a fact about what sits behind the surface rather than about the
+ * surface, which is fields in groups with labels and help. So this Block takes the
+ * same `FieldSpec`, `FieldSpecGroup` and `FieldKind` the write form takes, which
+ * brings the `slot` arm with it and means the vocabulary a consumer learns on a
+ * record write form is the vocabulary here. Its own former field declaration, a
+ * union of text, textarea, switch and select, is gone from the published interface.
+ *
+ * **The one thing that differs is when the value leaves, and that is a caller's
+ * callback rather than a shape Prism can draw.** A setting may apply on change, on
+ * blur or at a save. A field whose change handler applies its mutation is a field
+ * that applies on change, and a region that saves explicitly passes `action` or
+ * `onSubmit` exactly as the write form does. Nothing in the surface tells the two
+ * apart to a reader, and Prism does not choose. A region that applies on change
+ * passes none of the three save arms and draws no footer.
+ *
+ * **It renders no revert control, no reset to defaults control and no storage of any
+ * kind.** A setting that applies on change has no moment at which the value is
+ * refused, so the caller's honest answers are to keep the previous value itself, or
+ * to accept the change and report the failure in its own `Alert`, `Toast` or
+ * `LiveRegion`. A revert control is refused twice over: a Block ships no behaviour
+ * and so cannot wire one, and it holds no previous value and so has nothing to
+ * revert to.
+ *
+ * **It draws no tab strip and no rail.** Which regions exist, what they are called
+ * and whether one of them is a destination are the consumer's information
+ * architecture. A tabbed settings screen is a composition of the shell, the page
+ * header, the tabs and this Block, which `SettingsPage` already ships, and a rail is
+ * the shell's own or the consumer's own links beside the regions. The Block also
+ * owns no persistence, no dirty tracking, no unsaved-changes guard, no reset, no
+ * navigation, no scope and no aggregate: it does not know whether a setting is the
+ * organisation's, the project's or the reader's, which is the whole difference
+ * between an organisation's default and a personal preference, and the words for
+ * that are the caller's.
  *
- * A field is a small object describing one control: a text input, a textarea,
- * a select or a switch, with its label, description and value handlers. The
- * block renders the card, the groups and the footer; it owns no values and no
- * copy, so a consumer wires it to whatever form state or mutation they use.
+ * **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.** A field whose control this
+ * package does not ship carries the `slot` arm, and the Block draws the label, the
+ * help and the error around the caller's node. It is a client Component for the same
+ * reason the write form is: an `onSubmit` is a function, and a function is state.
  */
-export declare function SettingsPanel01({ title, description, sections, submitLabel, onSubmit, secondaryAction, footer, headingLevel, }: SettingsPanel01Props): import("react").JSX.Element;
+export declare function SettingsPanel01(props: SettingsPanel01Props): import("react").JSX.Element;
 export default SettingsPanel01;
 //# sourceMappingURL=settings-panel.d.ts.map

package/dist/blocks/settings-panel-01/settings-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-panel.d.ts","sourceRoot":"","sources":["../../../src/blocks/settings-panel-01/settings-panel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"settings-panel.d.ts","sourceRoot":"","sources":["../../../src/blocks/settings-panel-01/settings-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAa7D,OAAO,EAAc,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAS3E,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAE1D,sDAAsD;AACtD,KAAK,mBAAmB,GAAG;IACzB;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;;;;;;;OAYG;IACH,MAAM,EAAE,SAAS,cAAc,EAAE,CAAA;IACjC;;;;;;;;;OASG;IACH,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC/B,+DAA+D;IAC/D,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACf;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACrC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,oBAAoB,GAC5B,CAAC,mBAAmB,GAAG;IACrB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,WAAW,CAAC,EAAE,KAAK,CAAA;CACpB,CAAC,GACF,CAAC,mBAAmB,GAAG;IACrB,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,WAAW,EAAE,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,MAAM,CAAC,EAAE,KAAK,CAAA;CACf,CAAC,GACF,CAAC,mBAAmB,GAAG;IACrB,4DAA4D;IAC5D,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IACzC,qCAAqC;IACrC,WAAW,EAAE,SAAS,CAAA;IACtB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,MAAM,CAAC,EAAE,KAAK,CAAA;CACf,CAAC,GACF,CAAC,mBAAmB,GAAG;IACrB,+DAA+D;IAC/D,MAAM,EAAE,SAAS,CAAA;IACjB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,WAAW,CAAC,EAAE,KAAK,CAAA;CACpB,CAAC,CAAA;AAEN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAwJ1D;AAED,eAAe,eAAe,CAAA"}

package/dist/blocks/settings-panel-01/settings-panel.js

@@ -1,43 +1,102 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
+import { useId } from 'react';
 import { Button } from '../../components/ui/button.js';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/ui/card.js';
-import { Field, FieldDescription, FieldGroup, FieldLabel, } from '../../components/ui/field.js';
-import { Input } from '../../components/ui/input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../components/ui/select.js';
-import { Separator } from '../../components/ui/separator.js';
-import { Switch } from '../../components/ui/switch.js';
+import { Field, FieldDescription, FieldError, FieldGroup } from '../../components/ui/field.js';
+import { Label } from '../../components/ui/label.js';
 import { childLevel } from '../../components/ui/section.js';
-import { Textarea } from '../../components/ui/textarea.js';
-function SettingsField({ field }) {
-    if (field.kind === 'switch') {
-        return (_jsxs(Field, { className: "flex-row items-center justify-between gap-4", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(FieldLabel, { htmlFor: field.id, children: field.label }), field.description ? (_jsx(FieldDescription, { children: field.description })) : null] }), _jsx(Switch, { id: field.id, checked: field.checked, defaultChecked: field.defaultChecked, onCheckedChange: field.onCheckedChange, disabled: field.disabled })] }));
-    }
-    if (field.kind === 'select') {
-        return (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: field.id, children: field.label }), _jsxs(Select, { value: field.value, defaultValue: field.defaultValue, onValueChange: field.onValueChange
-                        ? (value) => field.onValueChange?.(value ?? '')
-                        : undefined, disabled: field.disabled, items: Object.fromEntries(field.options.map((option) => [option.value, option.label])), children: [_jsx(SelectTrigger, { id: field.id, className: "w-full", children: _jsx(SelectValue, { placeholder: field.placeholder }) }), _jsx(SelectContent, { children: field.options.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }), field.description ? _jsx(FieldDescription, { children: field.description }) : null] }));
-    }
-    if (field.kind === 'textarea') {
-        return (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: field.id, children: field.label }), _jsx(Textarea, { id: field.id, rows: field.rows, placeholder: field.placeholder, value: field.value, defaultValue: field.defaultValue, onChange: field.onChange ? (event) => field.onChange?.(event.target.value) : undefined, disabled: field.disabled }), field.description ? _jsx(FieldDescription, { children: field.description }) : null] }));
-    }
-    return (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: field.id, children: field.label }), _jsx(Input, { id: field.id, type: field.type ?? 'text', placeholder: field.placeholder, value: field.value, defaultValue: field.defaultValue, onChange: field.onChange ? (event) => field.onChange?.(event.target.value) : undefined, disabled: field.disabled }), field.description ? _jsx(FieldDescription, { children: field.description }) : null] }));
-}
+import { fieldText, NEEDS_HIDDEN, renderControl, serialize, SELF_LABELLED, } from '../../lib/field-render.js';
+import { cn } from '../../lib/utils.js';
 /**
- * A settings form grouped into sections.
+ * A settings region: the shared field specification in a card, measured against the
+ * record write form Block.
+ *
+ * **The archetype is answered by the record write form Block and earns no Item of
+ * its own.** A setting changes behaviour and is often no record at all, but that
+ * difference is a fact about what sits behind the surface rather than about the
+ * surface, which is fields in groups with labels and help. So this Block takes the
+ * same `FieldSpec`, `FieldSpecGroup` and `FieldKind` the write form takes, which
+ * brings the `slot` arm with it and means the vocabulary a consumer learns on a
+ * record write form is the vocabulary here. Its own former field declaration, a
+ * union of text, textarea, switch and select, is gone from the published interface.
+ *
+ * **The one thing that differs is when the value leaves, and that is a caller's
+ * callback rather than a shape Prism can draw.** A setting may apply on change, on
+ * blur or at a save. A field whose change handler applies its mutation is a field
+ * that applies on change, and a region that saves explicitly passes `action` or
+ * `onSubmit` exactly as the write form does. Nothing in the surface tells the two
+ * apart to a reader, and Prism does not choose. A region that applies on change
+ * passes none of the three save arms and draws no footer.
+ *
+ * **It renders no revert control, no reset to defaults control and no storage of any
+ * kind.** A setting that applies on change has no moment at which the value is
+ * refused, so the caller's honest answers are to keep the previous value itself, or
+ * to accept the change and report the failure in its own `Alert`, `Toast` or
+ * `LiveRegion`. A revert control is refused twice over: a Block ships no behaviour
+ * and so cannot wire one, and it holds no previous value and so has nothing to
+ * revert to.
+ *
+ * **It draws no tab strip and no rail.** Which regions exist, what they are called
+ * and whether one of them is a destination are the consumer's information
+ * architecture. A tabbed settings screen is a composition of the shell, the page
+ * header, the tabs and this Block, which `SettingsPage` already ships, and a rail is
+ * the shell's own or the consumer's own links beside the regions. The Block also
+ * owns no persistence, no dirty tracking, no unsaved-changes guard, no reset, no
+ * navigation, no scope and no aggregate: it does not know whether a setting is the
+ * organisation's, the project's or the reader's, which is the whole difference
+ * between an organisation's default and a personal preference, and the words for
+ * that are the caller's.
  *
- * A field is a small object describing one control: a text input, a textarea,
- * a select or a switch, with its label, description and value handlers. The
- * block renders the card, the groups and the footer; it owns no values and no
- * copy, so a consumer wires it to whatever form state or mutation they use.
+ * **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.** A field whose control this
+ * package does not ship carries the `slot` arm, and the Block draws the label, the
+ * help and the error around the caller's node. It is a client Component for the same
+ * reason the write form is: an `onSubmit` is a function, and a function is state.
  */
-export function SettingsPanel01({ title, description, sections, submitLabel, onSubmit, secondaryAction, footer, headingLevel = 'h2', }) {
-    // The panel title is the one heading the panel renders, and a group inside it is
-    // one step below, so the whole outline moves together when the panel does.
-    const Title = headingLevel;
-    const GroupTitle = childLevel(headingLevel);
-    const hasFooter = Boolean(submitLabel || secondaryAction || footer);
-    return (_jsx("form", { onSubmit: onSubmit, className: "w-full", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: _jsx(Title, { children: title }) }), description ? _jsx(CardDescription, { children: description }) : null] }), _jsx(CardContent, { className: "flex flex-col", children: sections.map((section, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(Separator, { className: "my-6" }) : null, _jsxs("section", { className: "flex flex-col gap-4", "aria-labelledby": `${section.id}-heading`, children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(GroupTitle, { id: `${section.id}-heading`, className: "text-lg font-semibold tracking-tight", children: section.title }), section.description ? (_jsx("p", { className: "text-muted-foreground text-sm", children: section.description })) : null] }), _jsx(FieldGroup, { children: section.fields.map((field) => (_jsx(SettingsField, { field: field }, field.id))) })] })] }, section.id))) }), hasFooter ? (_jsxs(CardFooter, { className: "justify-end gap-2", children: [footer, secondaryAction ? (_jsx(Button, { type: "button", variant: "outline", onClick: secondaryAction.onClick, children: secondaryAction.label })) : null, submitLabel ? _jsx(Button, { type: "submit", children: submitLabel }) : null] })) : null] }) }));
+export function SettingsPanel01(props) {
+    const { title, description, groups, values, onValueChange, columns = 1, issues, submitError, footerStart, headingLevel = 'h2', className, } = props;
+    const prefix = useId();
+    const hasSubmit = 'submit' in props;
+    const onSubmit = props.onSubmit;
+    const hasHandler = typeof onSubmit === 'function';
+    const hasAction = typeof props.action === 'string';
+    const hasSave = hasSubmit || hasHandler || hasAction;
+    const hasFooter = hasSave || footerStart !== undefined;
+    const handleSubmit = (event) => {
+        if (!hasHandler)
+            return;
+        event.preventDefault();
+        onSubmit(event.currentTarget);
+    };
+    const GroupHeading = childLevel(headingLevel);
+    const grid = columns === 2 ? 'grid grid-cols-1 gap-6 sm:grid-cols-2' : 'flex flex-col gap-6';
+    return (_jsx("form", { "data-slot": "settings-panel-01-form", ...(hasAction ? { action: props.action, method: 'post' } : null), onSubmit: hasHandler ? handleSubmit : undefined, className: cn('w-full', className), children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { as: headingLevel, className: "text-lg tracking-tight", children: title }), description ? _jsx(CardDescription, { children: description }) : null] }), _jsxs(CardContent, { className: "flex flex-col", children: [submitError ? (_jsx(FieldError, { "data-slot": "settings-panel-01-submit-error", children: submitError })) : null, groups.map((group, groupIndex) => {
+                            const groupHeadingId = `${prefix}-g${groupIndex}`;
+                            return (_jsxs("section", { "data-slot": "settings-panel-01-group", "aria-labelledby": group.label ? groupHeadingId : undefined, className: "flex flex-col gap-4 py-6 first:pt-0 last:pb-0 [&+&]:border-t", children: [group.label ? (_jsx(GroupHeading, { id: groupHeadingId, className: "font-semibold tracking-tight text-balance", children: group.label })) : null, group.description ? (_jsx("p", { className: "text-muted-foreground text-sm", children: group.description })) : null, _jsx(FieldGroup, { "data-slot": "settings-panel-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: onValueChange,
+                                                controlled: true,
+                                            };
+                                            return (_jsxs(Field, { "data-slot": "settings-panel-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": "settings-panel-01-issue", children: issue.message }, issueIndex))) }))] }, field.key));
+                                        }) })] }, group.id ?? groupIndex));
+                        })] }), hasFooter ? (_jsxs(CardFooter, { className: "justify-end gap-2", children: [footerStart, hasSubmit ? (props.submit) : hasSave ? (_jsx(Button, { "data-slot": "settings-panel-01-save", type: "submit", children: props.submitLabel })) : null] })) : null] }) }));
 }
 export default SettingsPanel01;

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

@@ -1,3 +1,3 @@
 export { Signup01, default } from './signup-01.js';
-export type { Signup01Password, Signup01Props, Signup01Reading, Signup01SignIn, Signup01Status, SignupField, SignupOption, SignupValue, } from './signup-01.js';
+export type { Signup01Password, Signup01Props, Signup01Reading, Signup01SignIn, Signup01Status, SignupValue, } from './signup-01.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/signup-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAS/C,YAAY,EACV,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,WAAW,GACZ,MAAM,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/signup-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAO/C,YAAY,EACV,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,cAAc,EACd,cAAc,EACd,WAAW,GACZ,MAAM,aAAa,CAAA"}