@nanisoft/prism-ui 0.13.0 → 0.16.0

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

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

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

@@ -0,0 +1,244 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../components/ui/button.js';
+import { Card, CardContent, CardHeader, CardTitle, } from '../../components/ui/card.js';
+import { Field, FieldDescription, FieldLabel } from '../../components/ui/field.js';
+import { Input } from '../../components/ui/input.js';
+import { PasswordField } from '../../components/ui/password-field.js';
+import { Section, SectionHeading, childLevel, } from '../../components/ui/section.js';
+import { Status } from '../../components/ui/status.js';
+import { Switch } from '../../components/ui/switch.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The tone each method state is drawn in, from the semantic contract and no other.
+ *
+ * `pending` is `info` and not `warning`, for the reason `member-list-01` gives for
+ * a colleague who is away: a device waiting for its owner to finish a setup is
+ * work in progress rather than a fault, and a settings page where every unclaimed
+ * phone is amber is a page of alarms that means nothing. `disabled` is `neutral`
+ * because a method nobody has turned on is not in dispute.
+ */
+const METHOD_TONE = {
+    enabled: 'success',
+    disabled: 'neutral',
+    pending: 'info',
+};
+/**
+ * The tone each second-factor state is drawn in.
+ *
+ * `on` is `success` because it is the state the reader is working towards.
+ * `off` is `neutral` rather than `warning`, because turning a second factor off is
+ * a decision a reader is allowed to make on an account they control and a page
+ * that alarms about it is a page that nags. `enrolled` is `info`, because one step
+ * is left and a step is not an alarm.
+ */
+const TWO_FACTOR_TONE = {
+    on: 'success',
+    off: 'neutral',
+    enrolled: 'info',
+};
+/** The three entries the change-password form hands over, and nothing else. */
+const EMPTY_PASSWORDS = { current: '', next: '', confirm: '' };
+/**
+ * The platform hint a field of each kind wants.
+ *
+ * Defaults are read from the field's own `type` rather than taken from the caller
+ * on every field, because the hint that matters is the one that is easy to get
+ * wrong on exactly the two fields where getting it wrong breaks an account. See
+ * `SettingsSecurityPasswordField.autoComplete`.
+ */
+const DEFAULT_AUTO_COMPLETE = {
+    current: 'current-password',
+    new: 'new-password',
+    confirm: 'new-password',
+};
+/**
+ * The refusals, so that a security surface never renders a control or a word it
+ * cannot justify.
+ *
+ * A state with no words, a row the Block has decided is the reader's own and has
+ * marked in no way a reader can see, a control whose name the caller did not
+ * write, and a sentence for a control that is not there. Each is a caller's
+ * mistake rather than a request.
+ */
+function assertProps(props) {
+    const { methods, onMethodChange, methodToggleLabel, sessions, onRevokeSession, revokeLabel, twoFactor } = props;
+    if (onMethodChange !== undefined && methodToggleLabel === undefined) {
+        throw new Error('SettingsSecurity01: onMethodChange was passed with no methodToggleLabel, so every method control would ' +
+            'be announced by the name of the method alone, which says what the control is and not what pressing it ' +
+            'does. Pass the function.');
+    }
+    if (onMethodChange === undefined && methodToggleLabel !== undefined) {
+        throw new Error('SettingsSecurity01: methodToggleLabel was passed with no onMethodChange, so the sentences would be ' +
+            'composed and then discarded, which is a caller who believes they have named the controls on a ' +
+            'surface that has none.');
+    }
+    if (onRevokeSession !== undefined && revokeLabel === undefined) {
+        throw new Error('SettingsSecurity01: onRevokeSession was passed with no revokeLabel, so every control would be ' +
+            'announced by the same word and a reader would be told which session to end by nothing. Pass the ' +
+            'function that names the device.');
+    }
+    if (onRevokeSession === undefined && revokeLabel !== undefined) {
+        throw new Error('SettingsSecurity01: revokeLabel was passed with no onRevokeSession, so the sentences would be composed ' +
+            'and then discarded, which is a caller who believes they have named the controls on a surface that has ' +
+            'none.');
+    }
+    for (const method of methods) {
+        if (method.stateLabel === undefined || method.stateLabel.trim() === '') {
+            throw new Error(`SettingsSecurity01: the method ${JSON.stringify(method.name)} declares a state and no words for it, ` +
+                'so the row would be a coloured dot with nothing to read beside it, on the one page where a reader ' +
+                'is most entitled to an answer. Pass stateLabel.');
+        }
+    }
+    for (const session of sessions ?? []) {
+        if (session.isCurrent === true && (session.currentLabel === undefined || session.currentLabel.trim() === '')) {
+            throw new Error(`SettingsSecurity01: the session on ${JSON.stringify(session.device)} is marked isCurrent and passed ` +
+                'no currentLabel, so the row the Block has decided is the reader own would be marked by nothing a ' +
+                'reader can see. Pass the words that say so.');
+        }
+    }
+    if (twoFactor !== undefined && (twoFactor.stateLabel === undefined || twoFactor.stateLabel.trim() === '')) {
+        throw new Error('SettingsSecurity01: a second factor was passed with no stateLabel, so the row would be a coloured dot ' +
+            'about the most load-bearing control on the page. Pass the words.');
+    }
+}
+/**
+ * The security surface of a workspace: the ways in, the form that changes the one
+ * secret a reader is most likely to have forgotten, the places it is signed in
+ * from, and whether there is a second factor.
+ *
+ * **A settings surface is where a design system's care is most visible and least
+ * appreciated, and this is the one where the stakes of a small mistake are
+ * highest.** The reader came to change one thing and leave. They came because
+ * something worried them: a login they do not recognise, a device they do not
+ * own, a warning they read somewhere else. They are not reading this page, they
+ * are checking it, and the two or three questions they arrived with are answered
+ * somewhere in it. Everything below is arranged so that those questions are
+ * answerable without reading anything twice and without finding that the page
+ * moved while they were on it.
+ *
+ * **The reveal control is on the new password and the confirmation, and not on
+ * the current one, and the reason is what each field is for.** A reader retyping
+ * a password they have just chosen needs to see the characters, because they are
+ * checking their own memory of what they typed and the failure they are guarding
+ * against is a single wrong character in a string they cannot read. A reader
+ * typing the password they set six months ago is doing the opposite: they are
+ * proving they know a secret, and a reveal control on that field turns the proof
+ * into a lookup. Put it there and the field stops being a check, it becomes a
+ * read, and a password change is exactly the moment at which an observer over a
+ * reader's shoulder is most likely to be looking. The arrangement also matches
+ * what the platform already knows: the current field is the one a password manager
+ * can fill, and the other two are the ones it must offer to save.
+ *
+ * **A method that is pending draws no control, because a half-finished setup is
+ * not a setting that is on.** The three states are not a boolean with an extra
+ * case, and a switch drawn on a pending method would be a control offering to turn
+ * off something that was never on, in a panel whose whole job is to tell a reader
+ * what is protecting their account. A pending method is a device that asked to be
+ * added and has not been confirmed, and the only honest thing to draw beside it
+ * is the caller's words about that, and the reader's own control for finishing it.
+ *
+ * **The revoke control is offered on the session the reader is in, and that is the
+ * decision most likely to be got wrong.** Every instinct on a security page is to
+ * withhold the dangerous control from the row the reader is sitting on, and the
+ * instinct is wrong for a reason that has nothing to do with the interface: a
+ * reader who wants to end the session they are in is a reader who will find
+ * another way. They will ask an administrator, or they will sign out everywhere and
+ * guess, or they will simply carry on, and the third is the common one and the one
+ * that leaves the thing they were worried about open. Withholding the control does
+ * not remove the wish, it removes the honest route to it, and what it leaves behind
+ * is a support ticket and a still-open session. So the control is drawn on every
+ * row, and the mark on the reader's own row says which one they are in, so the
+ * consequence is legible rather than surprising. What the Block does not do is
+ * confirm: a bare click that signs the reader out of the page they are reading is
+ * not a confirmation, and the caller's `revoke` slot is where that belongs.
+ *
+ * **The three entries are handed over together whatever the form contains, and the
+ * form holds them only long enough to hand them over.** A caller who renders two
+ * fields receives a `confirm` of the empty string rather than `undefined`, because
+ * a value that is sometimes a string and sometimes absent is a value every caller
+ * has to narrow before it can use, and a password is not a value to narrow. The
+ * Block clears the three entries when the caller's status becomes `done`, which is
+ * the one piece of state it keeps about them, and that is a decision rather than an
+ * omission: a new password sitting in a form on a page about the reader's security
+ * is a worse thing than a caller who wanted to keep it, and the caller's `status`
+ * prop is exactly where the truth about the change lives.
+ *
+ * **The second factor has three states, and the third is the one a two-state
+ * surface cannot give.** A secret has been generated and the reader has not
+ * confirmed it, so the account is neither protected nor unprotected, and a surface
+ * offering only on and off makes a consumer draw an enrolled account as one of the
+ * two, which is either a false claim of protection or a false claim of exposure.
+ * The tone for it is `info` and for an off factor `neutral`, because turning a
+ * second factor off is a decision a reader is allowed to make on an account they
+ * control, and a page that alarms about it is a page that nags about something
+ * legal.
+ *
+ * **The four group names are optional, and the reason is that a group with no name
+ * is not a mystery.** A caller who names a group gets a real heading one level
+ * below the section's own, and a caller who names none gets a section of rows
+ * under the section heading, which is the right arrangement for the common case of
+ * a product with one group and no second factor. The alternative, four required
+ * names, is four sentences a consumer writes for a page they may not have: a
+ * product with no second factor would have to name that group's heading to satisfy
+ * a type, and the name would then sit in their source describing something they do
+ * not render. The cost is stated rather than hidden: a Block with four groups and
+ * no names is four lists under one heading, and a reader navigating by heading
+ * finds one entry where there are four regions. That is the caller's arrangement
+ * to make and easy to correct by passing four words.
+ *
+ * It is a client Component, and the directive is unconditional: the form holds
+ * state, the controls attach handlers, and a surface that owns either owns the
+ * JavaScript that carries it.
+ */
+export function SettingsSecurity01({ eyebrow, title, description, labels, methods, onMethodChange, methodToggleLabel, changePassword, sessions, onRevokeSession, revokeLabel, twoFactor, empty, headingLevel = 'h2', className, }) {
+    assertProps({ methods, onMethodChange, methodToggleLabel, sessions, onRevokeSession, revokeLabel, twoFactor });
+    // Every group is a group inside the section, so every group title is one level
+    // below the section's own heading and travels with it.
+    const GroupTitle = childLevel(headingLevel);
+    const groups = labels ?? {};
+    // The form's three entries, and the two pieces of render-time state that let the
+    // Block clear them when the caller's status says the change was accepted. Both
+    // are adjusted during render rather than in an effect because the trigger is a
+    // prop changing and this is the arrangement React documents for it: a set during
+    // render is applied before the browser paints, so the reader never sees the new
+    // password sitting in the form for a frame after it has been changed.
+    const [passwords, setPasswords] = useState(EMPTY_PASSWORDS);
+    const [lastStatus, setLastStatus] = useState(changePassword?.status?.state);
+    const statusState = changePassword?.status?.state;
+    if (statusState !== lastStatus) {
+        setLastStatus(statusState);
+        if (statusState === 'done')
+            setPasswords(EMPTY_PASSWORDS);
+    }
+    const setPassword = (key) => (value) => setPasswords((was) => ({ ...was, [key]: value }));
+    if (methods.length === 0) {
+        return (_jsxs(Section, { className: className, "data-slot": "settings-security", children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description }), _jsx("p", { "data-slot": "settings-security-empty", className: "text-muted-foreground text-pretty text-sm", children: empty })] }));
+    }
+    return (_jsxs(Section, { className: className, "data-slot": "settings-security", children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-10" }), _jsxs("div", { "data-slot": "settings-security-groups", className: "flex flex-col gap-10", children: [_jsxs("section", { "data-slot": "settings-security-methods", className: "flex flex-col gap-4", children: [groups.methods === undefined ? null : (_jsx(GroupTitle, { "data-slot": "settings-security-group-title", className: "text-lg font-semibold tracking-tight", children: groups.methods })), _jsx("ul", { "data-slot": "settings-security-method-rows", className: "border-border flex flex-col border-t", children: methods.map((method) => {
+                                    const controlId = `${method.id}-method`;
+                                    const pending = method.state === 'pending';
+                                    const live = method.state === 'enabled';
+                                    return (_jsxs("li", { "data-slot": "settings-security-method", "data-method": method.id, "data-state": method.state, className: "border-border flex flex-wrap items-center gap-x-4 gap-y-2 border-b px-3 py-3", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: controlId, className: "text-base", children: method.name }), method.detail === undefined ? null : (_jsx(FieldDescription, { children: method.detail }))] }), method.addedLabel === undefined ? null : (_jsx("span", { "data-slot": "settings-security-method-added", className: "text-muted-foreground text-xs", children: method.addedLabel }))] }), _jsx(Status, { "data-slot": "settings-security-method-state", size: "sm", tone: METHOD_TONE[method.state], label: method.stateLabel, className: "shrink-0" }), pending || onMethodChange === undefined || methodToggleLabel === undefined ? null : (_jsx(Switch, { "data-slot": "settings-security-method-toggle", id: controlId, checked: live, "aria-label": methodToggleLabel(method, !live), onCheckedChange: () => onMethodChange(method.id), className: "shrink-0" }))] }, method.id));
+                                }) })] }), changePassword === undefined ? null : (_jsx("section", { "data-slot": "settings-security-password", className: "flex flex-col gap-4", children: _jsxs(Card, { className: "gap-0", children: [_jsx(CardHeader, { children: groups.password === undefined ? null : (_jsx(CardTitle, { as: GroupTitle, "data-slot": "settings-security-group-title", className: "text-lg tracking-tight", children: groups.password })) }), _jsx(CardContent, { children: _jsxs("form", { "data-slot": "settings-security-password-form", onSubmit: (event) => {
+                                            event.preventDefault();
+                                            changePassword.onSubmit(passwords);
+                                        }, children: [_jsx("div", { className: "flex flex-col gap-5", children: changePassword.fields.map((field) => {
+                                                    const controlId = `${field.id}-password`;
+                                                    if (field.type === 'current') {
+                                                        return (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: controlId, children: field.label }), _jsx(Input, { id: controlId, type: "password", autoComplete: field.autoComplete ?? DEFAULT_AUTO_COMPLETE.current, value: passwords.current, onChange: (event) => setPassword('current')(event.target.value) })] }, field.id));
+                                                    }
+                                                    const next = field.type === 'new' ? 'next' : 'confirm';
+                                                    return (_jsx(PasswordField, { value: passwords[next], onValueChange: setPassword(next), label: field.label, revealLabel: changePassword.revealLabel, hideLabel: changePassword.hideLabel, autoComplete: field.autoComplete ?? DEFAULT_AUTO_COMPLETE[field.type] }, field.id));
+                                                }) }), changePassword.status === undefined ? null : (_jsx("p", { "data-slot": "settings-security-password-status", "data-status": changePassword.status.state, 
+                                                // `alert` for a failure and `status` for the rest, so a
+                                                // message about a change that did not happen is announced when
+                                                // it appears and a message that did is announced politely.
+                                                role: changePassword.status.state === 'error' ? 'alert' : 'status', className: cn('mt-5 text-pretty text-sm', changePassword.status.state === 'error'
+                                                    ? 'text-destructive font-medium'
+                                                    : 'text-muted-foreground'), children: changePassword.status.message })), _jsx("div", { className: "mt-6 flex justify-end", children: _jsx(Button, { type: "submit", "data-slot": "settings-security-password-submit", disabled: statusState === 'sending', children: changePassword.submitLabel }) })] }) })] }) })), sessions === undefined || sessions.length === 0 ? null : (_jsxs("section", { "data-slot": "settings-security-sessions", className: "flex flex-col gap-4", children: [groups.sessions === undefined ? null : (_jsx(GroupTitle, { "data-slot": "settings-security-group-title", className: "text-lg font-semibold tracking-tight", children: groups.sessions })), _jsx("ul", { "data-slot": "settings-security-session-rows", className: "border-border flex flex-col border-t", children: sessions.map((session) => (_jsxs("li", { "data-slot": "settings-security-session", "data-session": session.id, "data-current": session.isCurrent === true ? 'true' : undefined, className: "border-border flex flex-wrap items-center gap-x-4 gap-y-2 border-b px-3 py-3", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-medium", children: session.device }), _jsxs("span", { className: "text-muted-foreground flex flex-wrap items-baseline gap-x-2 text-xs", children: [session.location === undefined ? null : _jsx("span", { children: session.location }), session.startedAt === undefined ? null : (_jsx("span", { className: "tabular-nums", children: session.startedAtLabel === undefined
+                                                                ? session.startedAt
+                                                                : session.startedAtLabel(session.startedAt) })), session.currentLabel === undefined ? null : (_jsx("span", { "data-slot": "settings-security-session-current", className: "font-medium", children: session.currentLabel }))] })] }), session.revoke !== undefined ? (_jsx("span", { "data-slot": "settings-security-session-revoke", className: "shrink-0", children: session.revoke })) : onRevokeSession !== undefined && revokeLabel !== undefined ? (_jsx(Button, { "data-slot": "settings-security-session-revoke", type: "button", size: "sm", variant: "outline", onClick: () => onRevokeSession(session.id), className: "shrink-0", children: revokeLabel({ id: session.id, device: session.device }) })) : null] }, session.id))) })] })), twoFactor === undefined ? null : (_jsxs("section", { "data-slot": "settings-security-two-factor", className: "flex flex-col gap-4", children: [groups.twoFactor === undefined ? null : (_jsx(GroupTitle, { "data-slot": "settings-security-group-title", className: "text-lg font-semibold tracking-tight", children: groups.twoFactor })), _jsxs("div", { "data-slot": "settings-security-two-factor-row", "data-state": twoFactor.state, className: "border-border flex flex-wrap items-center gap-x-4 gap-y-3 border-y px-3 py-4", children: [_jsx(Status, { "data-slot": "settings-security-two-factor-state", size: "md", tone: TWO_FACTOR_TONE[twoFactor.state], label: twoFactor.stateLabel, className: "min-w-0 flex-1" }), twoFactor.action === undefined ? null : (_jsx("span", { "data-slot": "settings-security-two-factor-action", className: "shrink-0", children: twoFactor.action }))] })] }))] })] }));
+}
+export default SettingsSecurity01;

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

@@ -0,0 +1,3 @@
+export { Shortlist01, default } from './shortlist-01.js';
+export type { Shortlist01Form, Shortlist01Item, Shortlist01Props } from './shortlist-01.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/blocks/shortlist-01/index.js

@@ -0,0 +1 @@
+export { Shortlist01, default } from './shortlist-01.js';

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

@@ -0,0 +1,337 @@
+import type { ReactNode } from 'react';
+import { type PriceProps } from '../../components/ui/price.js';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * How a shortlist is drawn: a grid of cards or a list of full-width rows.
+ *
+ * The type is `Shortlist01Form` and the prop is `variant`, and the two names
+ * differing is the surface gate working rather than a slip: `check-surface.mjs`
+ * refuses a public entry export whose name ends in `Variant`, because in this
+ * package that shape names a cva map. This union is the two arrangements the
+ * Block can draw and it is named for the arrangement, which is what
+ * `AddressBook01Form` and `ContentGrid01Form` are named for the same reason.
+ */
+export type Shortlist01Form = 'cards' | 'rows';
+/**
+ * One thing a reader is considering, and everything they need to decide whether
+ * to keep considering it.
+ *
+ * **`name` is required and nothing else is, and the reason is that a shortlist is
+ * a set a reader chose.** A row with no name is a row a reader cannot point at,
+ * say out loud, or match against the sentence they are about to write, and a set
+ * of nameless things is not a shortlist. Everything else is optional because a
+ * reader's set is heterogeneous: some things a reader is considering have a
+ * price, some do not, some have a reason recorded and some do not, and a shape
+ * that made every field required would be a grid where two thirds of every card
+ * is an empty line drawn as a placeholder.
+ *
+ * **There is no `position` and no `order` field, and that is the surface's whole
+ * claim.** The array a caller passes is the order the reader chose, and the Block
+ * draws it in that order and never sorts it, for the reason every Block in this
+ * package gives: order is a claim about importance and a Block that sorted a
+ * reader's own choices would be making that claim on their behalf. A caller who
+ * wants the list ranked sorts it once, upstream, and the render is their rank.
+ */
+export type Shortlist01Item = {
+    /**
+     * A stable key for the item, passed back to `onMove` and `onRemove`, and
+     * carried on the markup as `data-item`.
+     *
+     * Required as a `string` rather than derived from the name, and the reason is
+     * the one `TagGroupTag.id` gives at length: two things a reader is considering
+     * can carry the same name, and a remove control that named the item would
+     * announce two identical buttons and leave the reader guessing which one they
+     * are on.
+     */
+    id: string;
+    /**
+     * What the thing is called, in the words the reader would use about it.
+     *
+     * A `string` rather than a node, and for a reason the other Blocks give
+     * elsewhere: this value is interpolated into the accessible name of the two
+     * controls below, and a name Prism cannot compose is a name its controls cannot
+     * announce. A reader comparing two items reads this column, and a name that
+     * wraps to two lines costs every other card its alignment.
+     */
+    name: string;
+    /**
+     * Why the reader is considering it, in one line.
+     *
+     * A node, because a shortlist's reason is rarely a sentence: it is a quoted
+     * line from a document, a figure the reader has already looked up, a mark
+     * beside a name, a link. Drawn in the muted ink and never truncated, because a
+     * truncated reason on a shortlist is a reason the reader has to open the thing
+     * to read, which is the opposite of what a shortlist is for. A caller who wants
+     * three lines writes three lines.
+     */
+    reason?: ReactNode;
+    /**
+     * The mark that identifies the thing, which is a slot and never a mark this
+     * Block draws.
+     *
+     * A capability is identified by a logo, an icon from a vendor's own set, a
+     * monogram the product has already composed, or nothing at all, and there is no
+     * mark that is correct for all four. So the space is here, it is the caller's
+     * node, and the Block draws a frame of a fixed size and nothing inside it when
+     * the field is absent, for the reason `UserProfile01`'s portrait states: a grey
+     * disc where a logo would be is a claim that the absence is a gap, and a thing
+     * with no mark is a complete thing.
+     */
+    mark?: ReactNode;
+    /**
+     * What it costs, when the product prices it.
+     *
+     * A `PriceProps` rather than a number and a symbol, for the argument
+     * `RateCard01` makes at length: a symbol says the currency and nothing else,
+     * while a price also has a currency code, a precision, a period and a locale,
+     * and `Intl` already knows all four. Omit it for a capability with no price,
+     * which is a real and common case rather than a thin one.
+     */
+    price?: PriceProps;
+    /** Where the thing goes. Its presence makes the name a native anchor. */
+    href?: string;
+    /**
+     * The words on the link beside the name, and required whenever `href` is.
+     *
+     * A link whose only words are the item's own name tells a reader nothing about
+     * what activating it does, which is the same defect `ResourceList01` refuses and
+     * for the same reason: the destination is a route in the caller's own
+     * application and only the caller knows what is behind it. So the destination
+     * is a real anchor and the caller's sentence is what a reader meets.
+     */
+    hrefLabel?: string;
+    /**
+     * The line under the name, for whatever the caller's product has to say about
+     * this item: where the estimate came from, who added it, when.
+     *
+     * A node, because half of the useful sentences in this position carry a link to
+     * the document that explains the thing, and a caller who has to flatten theirs
+     * to a string loses it.
+     */
+    note?: ReactNode;
+};
+/**
+ * The props a Shortlist01 takes.
+ *
+ * Every string is a prop and the Block ships none: no capability, no name, no
+ * reason, no mark, no price, no unit, no link and not one of the two sentences a
+ * shortlist is most tempted to ship. A shortlist is a claim about what somebody is
+ * considering, and a Block that named one would be publishing somebody else's
+ * shortlist.
+ */
+export type Shortlist01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /**
+     * The section title, and required.
+     *
+     * Required because a set of things a reader chose with no statement of whose
+     * choices they are reads as a catalogue rather than as somebody's working list,
+     * and the difference is the whole subject of the surface.
+     */
+    title: ReactNode;
+    /** One or two sentences under the title. */
+    description?: ReactNode;
+    /**
+     * The things being considered, in the order the reader put them.
+     *
+     * Order is the caller's and the Block does not sort, for the reason
+     * `Shortlist01Item` states: a list that reordered a reader's own choices would
+     * be making a claim about which of them matters most.
+     */
+    items: readonly Shortlist01Item[];
+    /**
+     * Called with an item's `id` when the reader asks to move it.
+     *
+     * **One handler and no direction, and that is the decision worth naming.** A
+     * shortlist is a set a reader is still arguing with, and the ways a reader
+     * argues with a set are more than one: promote it to the front, send it to a
+     * colleague, open it in a comparison, take it to a quote. A Block that drew an
+     * up and a down would be drawing one product's idea of reordering, and the
+     * cost of getting it wrong is a control that moves a thing the reader did not
+     * ask to move. So the Block reports which item and the caller decides what
+     * moving it means, which is the same arrangement `Inbox01`'s `onSelect` holds:
+     * a Block reports an interaction and the consumer decides what it meant.
+     */
+    onMove?: (id: string) => void;
+    /**
+     * The accessible name of the move control, given the item it moves.
+     *
+     * Required whenever `onMove` is set, and a function rather than a string for
+     * the reason `TagGroup`'s `removeLabel` is one, which is that a name Prism
+     * cannot compose is a name its control cannot announce: a column of eight
+     * controls all announced as "Move" is a column a screen reader user cannot act
+     * on, and a reader using voice control has to be able to say the words they can
+     * see. The cost is real and is named rather than hidden: every caller writes the
+     * sentence, once, in their own language.
+     */
+    moveLabel?: (item: {
+        id: string;
+        name: string;
+    }) => string;
+    /**
+     * Called with an item's `id` when the reader takes it off the shortlist.
+     *
+     * A request and not a mutation, for the same reason every other Block in this
+     * package takes one: which things are still being considered is the caller's
+     * state, so a control that removed the item and put it back when the request
+     * failed would be a control that lied.
+     */
+    onRemove?: (id: string) => void;
+    /**
+     * The accessible name of the remove control, given the item it removes.
+     *
+     * Required whenever `onRemove` is set, and a function rather than a string for
+     * the argument `TagGroup` makes about its own remove control: a remove control
+     * that announced only "Remove" gives a screen reader two identical buttons and
+     * leaves the reader guessing which item they are on, which is the same defect
+     * with a more expensive consequence here, because a shortlist is read one item
+     * at a time and every item has its own remove. So the name has to include the
+     * item's own name, the item's name is a `string` precisely so that Prism can
+     * hand it to the function, and the caller writes the sentence in their own
+     * language.
+     */
+    removeLabel?: (item: {
+        id: string;
+        name: string;
+    }) => string;
+    /**
+     * The controls that act on the shortlist as a whole: compare what is here, send
+     * it to somebody, export it.
+     *
+     * A slot and not a set of named controls, because which controls a shortlist
+     * has is the caller's fact, and a Block that drew a compare button and an
+     * export button would be drawing two products' ideas of what a shortlist is
+     * for. A plain row with no role, for the reason `Item`'s trailing slot is one:
+     * the controls inside are the controls.
+     */
+    actions?: ReactNode;
+    /**
+     * What the Block draws in place of the set when there is nothing in it.
+     *
+     * Required, and the reason is the sharpest one on this surface: a reader who
+     * came to look at what they were considering and found nothing is reading one
+     * line, and that line has to distinguish a shortlist they have finished from a
+     * shortlist that failed to load, because only the caller knows which one the
+     * reader is looking at. "Nothing saved yet" is a claim, and it is a different
+     * claim from the one a broken query would need.
+     */
+    empty: ReactNode;
+    /**
+     * How the set is drawn.
+     *
+     * @defaultValue 'cards'
+     *
+     * `cards` is right for a set a reader recognises rather than compares, which is
+     * the ordinary case for a shortlist of eight things with a mark and a reason.
+     * `rows` is right for a long set or a narrow column, where the reason wants to
+     * wrap under the name and a grid would put three columns of prose in a phone's
+     * width. Both arrangements draw the same accessibility tree, so a consumer who
+     * switches at render time gets one list rather than two.
+     */
+    variant?: Shortlist01Form;
+    /**
+     * Heading level for the section title. @defaultValue 'h2'
+     *
+     * See `HeadingLevel`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Block. Changing a Prism-owned visual property
+     * from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * A set of capabilities a reader is considering, each of which they can move or
+ * take off the list, in cards or in rows.
+ *
+ * **The storefront version of this pattern is a wishlist, and the pattern is the
+ * same one.** A shop shows a reader the things they saved to buy later, each with
+ * a mark, a name, a price, and a control to take it off the list. What changes
+ * here is what is on the list. Prism's products observe a pipeline, capture a
+ * market, watch an estate and run agents, so what a reader is weighing up is a
+ * capability: an ingest, a retention policy, a connector, an agent. Nothing here
+ * is for sale, nothing here has a basket, and the "price" is a rating the product
+ * publishes, not a figure anybody will be charged. A reader who has used both will
+ * recognise the shape, and the difference that matters is that a wishlist is a
+ * list of things and a shortlist is a list of decisions.
+ *
+ * **The controls are part of the item rather than a row action, and that is the
+ * one decision this Block has that a list does not.** A list is a list of things
+ * somebody published, and the only thing a reader can do with one is read it. A
+ * shortlist is a set the reader chose and can change, which means the ability to
+ * change it is not an affordance sitting beside the item, it is part of what the
+ * item is: a row with no control is not a shortlist item that happens to lack a
+ * control, it is a list the reader is looking at and cannot act on, and a reader
+ * who cannot act on a list stops treating it as theirs. So the two controls are
+ * drawn inside the item, in both arrangements, and the Block never draws a kebab
+ * menu for them either, for the reason `Item` states: a row whose only route to an
+ * action is a menu in the corner hides its own content from a reader who is not
+ * looking for a menu, and on a shortlist that reader is the reader who is
+ * comparing. The cost is stated rather than hidden: a caller who wants a single
+ * control for the whole set uses the `actions` slot and leaves both of these off,
+ * and a shortlist drawn with neither is a reader's list that the product cannot
+ * act on, which is a legitimate page and not the page this Block is for.
+ *
+ * **Both control names are functions, and the reason is the one `tag-group` gives
+ * about its own remove control.** A remove control that announced only "Remove"
+ * gives a screen reader reader two identical buttons and leaves the reader guessing
+ * which item they are on. On a tag group that is an annoyance, because the tags
+ * are read left to right and a reader can usually tell. On a shortlist it is
+ * worse, because a reader works through a shortlist one item at a time, every item
+ * carries its own remove, and the item is the only thing that distinguishes one
+ * control from the next. So the name has to contain the item's name, the item's
+ * name is typed as a `string` rather than a node precisely so that Prism can hand
+ * it to a function rather than trying to interpolate a node into a sentence, and
+ * the sentence itself is the caller's because it is a sentence in their language.
+ * The move control is a function for the same reason and one more: a column of
+ * eight controls all announced as "Move" is a column nobody can act on, and the
+ * honest sentence usually says what moving means in this product, which is a fact
+ * this Block cannot see.
+ *
+ * **The Block reports which item and never decides what moving it means.** A
+ * shortlist is a set a reader is still arguing with, and the ways a reader argues
+ * with a set are more than one: promote it, send it to a colleague, open it in a
+ * comparison, take it to a quote. A Block that drew an up and a down would be
+ * drawing one product's idea of reordering, so `onMove` takes an id and nothing
+ * else, and what happens next is the caller's. That is the arrangement
+ * `SettingsMembers01` uses for a role change and `SettingsSecurity01` uses for a
+ * toggle: the control reports a request, the data decides whether it happened,
+ * and a request that failed leaves the item exactly where the reader left it,
+ * which is a control that told the truth.
+ *
+ * **The order is the caller's and the Block never sorts.** The array a caller
+ * passes is the order the reader chose, and sorting it would be a Block making a
+ * claim about which of a reader's own considerations matters most. That is the
+ * same refusal every list in this package makes, and it is stronger here because
+ * the order is not the store's or the catalogue's, it is one person's thinking at
+ * one moment, and a component that reorders it is editing that.
+ *
+ * **The name is a heading one step below the section, in both arrangements.** A
+ * reader who has built a shortlist and then navigates by heading wants to land on
+ * one of the things they were considering, not on a list item in a column, and a
+ * name in a `span` is a name they cannot come back to. The two arrangements draw
+ * the same tree rather than two, so a consumer who switches `variant` at render
+ * time gets one list in the accessibility tree rather than two, and the outline
+ * does not depend on a layout prop.
+ *
+ * **The mark is a slot and no mark is drawn in its place.** The reason is the one
+ * `UserProfile01` gives for its portrait: a placeholder where a logo would be is
+ * a claim that the absence is a gap, and it says the same thing about every reader
+ * of every product that installs this Block. So the frame is a fixed size, the
+ * node inside it is the caller's, and a thing with no mark draws no frame at all,
+ * which is the honest state for a capability the product has no logo for.
+ *
+ * It is a client Component, and the directive is unconditional. The rule this
+ * follows is the one `AddressBook01` states in full: a surface that attaches a
+ * handler is a client Component, and the directive is on the module rather than in
+ * a leaf so that a consumer composing a server page gets the boundary in one place
+ * they can see. The cost is that with both handlers omitted the whole module is
+ * still in the client graph, where the static arrangement would have shipped no
+ * JavaScript at all; the price was judged worth paying for one boundary rather
+ * than two arrangements of the same surface.
+ */
+export declare function Shortlist01({ eyebrow, title, description, items, onMove, moveLabel, onRemove, removeLabel, actions, empty, variant, headingLevel, className, }: Shortlist01Props): import("react").JSX.Element;
+export default Shortlist01;
+//# sourceMappingURL=shortlist-01.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shortlist-01.d.ts","sourceRoot":"","sources":["../../../src/blocks/shortlist-01/shortlist-01.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAClE,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAA;AAGpC;;;;;;;;;GASG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,CAAA;AAE9C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;;;;;OASG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;;;OAQG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;IACjC;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAA;IAC1D;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAA;IAC5D;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;;;;;OASG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAiED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,EACN,SAAS,EACT,QAAQ,EACR,WAAW,EACX,OAAO,EACP,KAAK,EACL,OAAiB,EACjB,YAAmB,EACnB,SAAS,GACV,EAAE,gBAAgB,+BAyLlB;AAiED,eAAe,WAAW,CAAA"}