@nanisoft/prism-ui 0.13.0 → 0.16.0

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

@@ -0,0 +1,191 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpDown, X } from 'lucide-react';
+import { Button } from '../../components/ui/button.js';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Price } from '../../components/ui/price.js';
+import { Section, SectionHeading, childLevel, } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The refusals, checked before anything is drawn so a caller's mistake is one
+ * diagnostic in a console rather than a column of buttons a screen reader cannot
+ * tell apart.
+ *
+ * Five, and each is a control that cannot be used. A move control with no name,
+ * and a remove control with no name, because a button announced as "button" is
+ * the one control a screen reader user cannot act on and it is invisible to
+ * everybody else. A move handler with no label, which is the same defect arriving
+ * from the other direction. A link with no words, or a name with no link beside
+ * it. And a caller who has passed a handler and not the sentence, or the sentence
+ * and not the handler, which is a caller who believes they have named controls on
+ * a surface that has none.
+ */
+function assertShortlist(props) {
+    const { items, onMove, moveLabel, onRemove, removeLabel } = props;
+    if (onMove !== undefined && moveLabel === undefined) {
+        throw new Error('Shortlist01: onMove was passed with no moveLabel, so every move control would be announced by the same ' +
+            'word and a reader would be told which thing to move by nothing. Pass the function that names the item.');
+    }
+    if (moveLabel !== undefined && onMove === undefined) {
+        throw new Error('Shortlist01: moveLabel was passed with no onMove, 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 (onRemove !== undefined && removeLabel === undefined) {
+        throw new Error('Shortlist01: onRemove was passed with no removeLabel, so every remove control would be announced by the ' +
+            'same word and a reader would be guessing which item they were on. Pass the function that names the ' +
+            'item.');
+    }
+    if (removeLabel !== undefined && onRemove === undefined) {
+        throw new Error('Shortlist01: removeLabel was passed with no onRemove, 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 item of items) {
+        if ((item.href === undefined) !== (item.hrefLabel === undefined)) {
+            throw new Error(`Shortlist01: the item ${JSON.stringify(item.name)} declares one of href and hrefLabel without the ` +
+                'other, so the row would carry a link with no words of its own, or a name with no link beside it. Pass ' +
+                'both, or neither.');
+        }
+    }
+}
+/**
+ * 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 function Shortlist01({ eyebrow, title, description, items, onMove, moveLabel, onRemove, removeLabel, actions, empty, variant = 'cards', headingLevel = 'h2', className, }) {
+    assertShortlist({ items, onMove, moveLabel, onRemove, removeLabel });
+    // An item's name is a heading one step below the section that introduces the
+    // set, derived rather than written, so a Block embedded one level deeper carries
+    // its names with it.
+    const Title = childLevel(headingLevel);
+    const asCards = variant === 'cards';
+    return (_jsxs(Section, { "data-slot": "shortlist-01", className: cn(className), children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-8" }), actions === undefined ? null : (
+            /*
+              The caller's controls for the set as a whole, at the trailing edge above
+              it rather than inside any item, because they act on the list and not on
+              one of its entries. A plain row with no role, for the reason `Item`'s
+              trailing slot is one: the controls inside are the controls, and a group
+              here would be a group with no name and one more thing a reader walks
+              past.
+            */
+            _jsx("div", { "data-slot": "shortlist-01-actions", className: "mb-6 flex flex-wrap items-center gap-3", children: actions })), items.length === 0 ? (
+            /*
+              The caller's own sentence, drawn where the set would have been rather
+              than above it, so a reader is not told there is nothing at the foot of a
+              page that shows a shortlist. A reader who has finished deciding and a
+              reader whose query failed are both looking at an empty page, and only
+              the caller knows which one it is.
+            */
+            _jsx("p", { "data-slot": "shortlist-01-empty", className: "text-muted-foreground max-w-measure-narrow text-pretty text-sm", children: empty })) : asCards ? (_jsx("ul", { "data-slot": "shortlist-01-items", "data-variant": variant, className: "grid items-start gap-6 sm:grid-cols-2 lg:grid-cols-3", children: items.map((item) => (_jsxs("li", { "data-slot": "shortlist-01-item", "data-item": item.id, className: "border-border bg-card flex h-full flex-col gap-4 rounded-xl border p-5 shadow-sm", children: [item.mark === undefined ? null : (
+                        /*
+                          The caller's own mark in a fixed frame. The frame is a size and a
+                          clip and nothing else, so a caller's logo and a caller's monogram
+                          are the same height whichever they pass, and an item with no mark
+                          draws no frame rather than a grey disc where a logo would be.
+                        */
+                        _jsx("span", { "data-slot": "shortlist-01-mark", className: "bg-muted flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-full [&_img]:object-cover", children: item.mark })), _jsx(Title, { "data-slot": "shortlist-01-name", className: "text-base font-semibold", children: item.name }), item.reason === undefined ? null : (_jsx("span", { "data-slot": "shortlist-01-reason", className: "text-muted-foreground text-pretty text-sm", children: item.reason })), item.price === undefined ? null : (_jsx(Price, { "data-slot": "shortlist-01-price", ...item.price, size: "sm" })), item.note === undefined ? null : (_jsx("span", { "data-slot": "shortlist-01-note", className: "text-muted-foreground mt-auto text-xs", children: item.note })), item.href === undefined || item.hrefLabel === undefined ? null : (_jsx(CtaLink, { "data-slot": "shortlist-01-link", href: item.href, variant: "outline", size: "sm", className: "self-start", children: item.hrefLabel })), _jsx(Controls, { "data-slot": "shortlist-01-controls", item: { id: item.id, name: item.name }, onMove: onMove, moveLabel: moveLabel, onRemove: onRemove, removeLabel: removeLabel, className: "mt-auto" })] }, item.id))) })) : (_jsx("ul", { "data-slot": "shortlist-01-items", "data-variant": variant, className: "border-border flex flex-col border-t", children: items.map((item) => (_jsxs("li", { "data-slot": "shortlist-01-item", "data-item": item.id, className: "border-border flex flex-wrap items-center gap-x-4 gap-y-3 border-b px-3 py-4", children: [item.mark === undefined ? null : (_jsx("span", { "data-slot": "shortlist-01-mark", className: "bg-muted flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-full [&_img]:object-cover", children: item.mark })), _jsxs("div", { "data-slot": "shortlist-01-body", className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx(Title, { "data-slot": "shortlist-01-name", className: "text-sm font-semibold", children: item.name }), item.reason === undefined ? null : (_jsx("span", { "data-slot": "shortlist-01-reason", className: "text-muted-foreground text-pretty text-xs", children: item.reason })), item.price === undefined ? null : (_jsx(Price, { "data-slot": "shortlist-01-price", ...item.price, size: "sm" })), item.note === undefined ? null : (_jsx("span", { "data-slot": "shortlist-01-note", className: "text-muted-foreground text-xs", children: item.note }))] }), item.href === undefined || item.hrefLabel === undefined ? null : (_jsx(CtaLink, { "data-slot": "shortlist-01-link", href: item.href, variant: "outline", size: "sm", className: "shrink-0", children: item.hrefLabel })), _jsx(Controls, { "data-slot": "shortlist-01-controls", item: { id: item.id, name: item.name }, onMove: onMove, moveLabel: moveLabel, onRemove: onRemove, removeLabel: removeLabel, className: "shrink-0" })] }, item.id))) }))] }));
+}
+/**
+ * The two controls that make an item part of a set the reader owns.
+ *
+ * Both are real buttons with a real focus ring and a real hit target, and both
+ * take their accessible name from the caller because the item's own name is the
+ * only thing that distinguishes one from the next. The icons are `aria-hidden`
+ * and the names are the answer, which is the pattern every icon-only region in
+ * this package uses: the shape is decoration, the words are the information.
+ *
+ * The move control is a single button with no direction, and the reason is in the
+ * Block's JSDoc: the ways a reader moves a thing on a shortlist are more than
+ * one, and the Block reports which item rather than choosing how it travels.
+ */
+function Controls({ item, onMove, moveLabel, onRemove, removeLabel, className, }) {
+    if (onMove === undefined && onRemove === undefined)
+        return null;
+    return (_jsxs("div", { className: cn('flex items-center gap-1', className), children: [onMove !== undefined && moveLabel !== undefined ? (_jsx(Button, { "data-slot": "shortlist-01-move", type: "button", variant: "ghost", size: "icon", "aria-label": moveLabel(item), onClick: () => onMove(item.id), children: _jsx(ArrowUpDown, { "aria-hidden": "true" }) })) : null, onRemove !== undefined && removeLabel !== undefined ? (_jsx(Button, { "data-slot": "shortlist-01-remove", type: "button", variant: "ghost", size: "icon", "aria-label": removeLabel(item), onClick: () => onRemove(item.id), children: _jsx(X, { "aria-hidden": "true" }) })) : null] }));
+}
+export default Shortlist01;

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

@@ -0,0 +1,3 @@
+export { Showcase01, default } from './showcase-01.js';
+export type { ShowcaseAction, ShowcaseLinkAction, ShowcaseSlotAction, Showcase01Props } from './showcase-01.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

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

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

@@ -0,0 +1,238 @@
+import { type ReactNode } from 'react';
+import { type Fact } from '../../components/ui/fact-list.js';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One action in a showcase's action row that names a destination.
+ *
+ * One of the two arms of `ShowcaseAction`, and named rather than left as an inline
+ * member of the union so a caller assembling a row from its own data can say which
+ * arm it is building. `href` is required and that is the whole of the arm: a
+ * control drawn as a call to action and with nowhere to go is the dead end
+ * `CtaLink`'s own JSDoc names, and this Block cannot repair it, because a Block
+ * ships no behaviour.
+ */
+export type ShowcaseLinkAction = {
+    /** The words on the control. Every string a showcase renders is the caller's. */
+    label: string;
+    /**
+     * Where the action goes. Required rather than optional, so that "a link whose
+     * address is sometimes undefined" is a compile error rather than a control that
+     * navigates on the renders where the address happens to be there.
+     */
+    href: string;
+    /** Opens the destination in a new browsing context, with the matching `rel`. */
+    newTab?: boolean;
+    /**
+     * Which weight this action draws at, when the caller does not say.
+     *
+     * Defaults to `default` for the first action in the row and `outline` for the
+     * rest. A slot carries its own weight, so it does not take one from here.
+     */
+    variant?: 'default' | 'outline' | 'secondary' | 'ghost';
+    /**
+     * Forbidden, so that an action cannot be both a destination and a caller's own
+     * control. The two are rendered by different code on different elements, and a
+     * value carrying both would have to pick one silently.
+     */
+    slot?: never;
+};
+/**
+ * One action in a showcase's action row that is the caller's own control.
+ *
+ * **This is the arm that replaced a rendered button, and the reason it is a slot
+ * rather than an `onClick` is that a Block cannot receive one.** This is a server
+ * Component, so a handler is not a prop it can be given, and the arm it replaced
+ * rendered a bare `<Button>` under the standfirst: focusable, announced as a button,
+ * and activating to nothing, on the section's primary ask. The defect was in the
+ * **type**, not in the render, because a `label` with no destination was a legal
+ * value.
+ *
+ * What belongs here is anything Prism cannot make work: a router's own `Link`, a
+ * control that opens a configurator or a trial dialog. What does not belong here is
+ * a plain anchor; that is the other arm.
+ */
+export type ShowcaseSlotAction = {
+    /**
+     * The caller's own control, placed in the row where this action sits.
+     *
+     * The whole control, including its own label, its own weight and any icon. The
+     * Block draws no frame around it and adds no class to it, because a class it adds
+     * is a style the caller cannot see and cannot remove, and this package has no
+     * override path.
+     */
+    slot: ReactNode;
+    /**
+     * Forbidden on this arm, and for a reason rather than by tidiness: the Block
+     * renders `slot` and nothing else, so a `label` beside it would be a word no
+     * reader ever sees and a caller would reasonably believe had been rendered.
+     */
+    label?: never;
+    /** Forbidden: an anchor belongs on the other arm, where Prism renders it. */
+    href?: never;
+    /** Forbidden with `href`, for the same reason. */
+    newTab?: never;
+    /**
+     * Forbidden, because the Block cannot style a node it does not render. A weight
+     * accepted here and dropped would be the one prop in this Block that a reader of
+     * the type could believe was in effect when it is not.
+     */
+    variant?: never;
+};
+/**
+ * One action in a showcase's action row, as a union of the two things an action in
+ * this position can honestly be.
+ *
+ * **A caller should not be able to reach a dead control by accident, and the union
+ * is what stops it.** A single shape with an optional `href` made both of these
+ * mistakes silent, and each was a legal value that rendered a control which
+ * activated to nothing: `{ label: 'Configure it' }`, which was the likely mistake
+ * because a showcase's first action is almost always a link, and
+ * `{ label, href: maybeUrl }`, which navigated on the renders where the address
+ * happened to be there and rendered a button on the others.
+ *
+ * The first arm therefore **requires** `href`, and the second carries the caller's
+ * own control rather than a `Button` this Block cannot wire to anything.
+ *
+ * It is declared here rather than imported from `hero-01`, following
+ * `ProcessFlow01`'s note on the same point, and `scripts/check-block-controls.mjs`
+ * is what holds the shape: a consumer installing a section that shows a capability
+ * in depth would otherwise be made to resolve a marketing hero to get it, and a
+ * shared type would be a ninth copy of the law that could drift from the other
+ * eight. The gate is the single place the law is written down.
+ */
+export type ShowcaseAction = ShowcaseLinkAction | ShowcaseSlotAction;
+/**
+ * The props a Showcase01 takes. Every string is a prop and the Block ships none.
+ */
+export type Showcase01Props = {
+    /** Optional label above the name. It has no default, and the honest state is none. */
+    eyebrow?: string;
+    /**
+     * The name of the thing being shown, set at the section's heading step.
+     *
+     * A string and not a node, and the difference is worth naming: this is the one
+     * heading in this system that names a single proper noun rather than making a
+     * claim in prose, so there is no emphasised word inside it to set in a caller's
+     * mark. A caller whose name is a phrase and needs a claim beside it writes the
+     * claim in `standfirst`.
+     */
+    name: string;
+    /**
+     * The standfirst: the sentence under the name that says what the thing is for.
+     *
+     * A node, because the same three NaniSoft sites set part of this line in their own
+     * mark. Optional rather than required, because a name that is self-describing, such
+     * as a service or a pipeline, needs no gloss and a gloss that repeats the name is
+     * worse than no gloss.
+     */
+    standfirst?: ReactNode;
+    /**
+     * The specification, as the caller's own facts. See `Fact`.
+     *
+     * `Fact['value']` is a node rather than a string, and that is what lets a row hold
+     * a `CodeBlock`: a specification row whose answer is a command or a fragment is a
+     * specification, and a caller who cannot put source in a cell is pushed into a
+     * paragraph underneath, which is where specifications go to stop being readable.
+     */
+    facts: readonly Fact[];
+    /**
+     * The media panel's contents, drawn by the caller inside the frame this Block
+     * draws around it. Omit it for a showcase that is a specification and nothing else.
+     */
+    media?: ReactNode;
+    /**
+     * The accessible name of the media region, published on the `<figure>` and as no
+     * visible text.
+     *
+     * Required whenever `media` is passed, and the Block throws without it. The rule is
+     * `FeatureRows01`'s: a figure a reader cannot name is a figure a reader navigating
+     * by figure cannot find again, and this Block's whole subject is one capability on
+     * a page that may carry three of them.
+     */
+    mediaLabel?: string;
+    /**
+     * Up to two actions, under the standfirst. See `ShowcaseAction` and its two arms:
+     * every action Prism renders here is a link, and an action that cannot be one is a
+     * slot the Block places without styling.
+     */
+    actions?: ShowcaseAction[];
+    /**
+     * Which side the media panel takes.
+     *
+     * A layout prop rather than a `className`, because swapping the panel from one
+     * side to the other is a composition decision a page makes repeatedly and
+     * re-deriving it from utility classes at each call site is how a page ends up with
+     * two panels on opposite sides and no reason why.
+     *
+     * @defaultValue 'panel-right'
+     */
+    layout?: 'panel-left' | 'panel-right';
+    /**
+     * Heading level for the name. Defaults to `h2` because a Block is composed, not a
+     * page. See `HeadingLevel`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Component. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * One capability in depth: its name, a standfirst, a specification, a panel, and at
+ * most two actions.
+ *
+ * **This is the upstream experience and service pattern, and the translation is the
+ * decision the whole effort rests on, so it is stated rather than assumed.** The
+ * published pattern is a storefront's product page: a name, a paragraph about it, a
+ * table of specifications, a gallery, and a buy button. Everything about that pattern
+ * is layout and accessibility work, and all of it transfers without a change: a
+ * specification is a description list whichever product it describes, a gallery is a
+ * figure a reader has to be able to name, and the buy button is a real anchor rather
+ * than a styled `div`. What does not transfer is the framing, and framing is where
+ * most of the prose in such a page goes. So the layout is the storefront's and the
+ * writing is Prism's: a pipeline that runs, a market that is captured, an estate that
+ * is observed, a run that is finished and can be read afterwards. The Demo holds that
+ * vocabulary and this component holds none of it, because a Block ships no copy and
+ * a showcase whose examples were authored by a design system would hand every
+ * consumer a page about somebody else's product.
+ *
+ * **The specification is `FactList` and the panel is a `figure`, and neither is
+ * re-derived here.** `FactList` is a real `<dl>` with the term before its answer,
+ * which is what a specification is and what a table of key and value cells is not: a
+ * screen reader announces the term before the answer in one and reads two columns of
+ * equal weight in the other, and a reader who lands mid-list cannot tell which half
+ * they are in. The panel is a `<figure>` with a required name for the reason
+ * `FeatureRows01` states. Re-deriving either here would put a second answer to "how
+ * does a specification read" in one package, and the second answer is always the one
+ * that disagrees.
+ *
+ * **What this is not, and the reason matters more than the list would.** This is not
+ * a pricing Block and it carries no price, no period, no currency and no tier. That is
+ * not a missing feature, it is the refusal that keeps the item honest: a Block that
+ * holds a number the caller has to remember to change is a Block that ships a stale
+ * claim, and a stale price is the one number on a marketing page that a reader acts
+ * on. `Price` exists as a Component and `Pricing01` exists as a Block, and a caller
+ * who wants a price composes them beside this one rather than putting the figure in
+ * here where nothing would tell them it can go stale.
+ *
+ * **The panel is drawn by this Block, and the copy column is first in the DOM on both
+ * layouts.** The name and the specification are the content; the panel is evidence
+ * for them, and a reader who never reaches the panel has still read everything the
+ * section claims. `layout` therefore moves the panel in the visual order with `order`
+ * rather than by swapping the columns in the markup, so the reading order is the same
+ * whichever side the panel is drawn on.
+ *
+ * **The heading is aligned left.** `SectionHeading` states the rule and this section
+ * has a specification and a panel beside and under the name, so there is content and
+ * the answer is left.
+ *
+ * It composes `Section` and `SectionHeading`, so it inherits the container and the
+ * vertical rhythm rather than re-deriving either, and it adds no container width and
+ * no section padding of its own.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export declare function Showcase01({ eyebrow, name, standfirst, facts, media, mediaLabel, actions, layout, headingLevel, className, }: Showcase01Props): import("react").JSX.Element;
+export default Showcase01;
+//# sourceMappingURL=showcase-01.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"showcase-01.d.ts","sourceRoot":"","sources":["../../../src/blocks/showcase-01/showcase-01.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKhD,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,+BAA+B,CAAA;AACnE,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGxF;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;IACvD;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;;;;OAOG;IACH,IAAI,EAAE,SAAS,CAAA;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,6EAA6E;IAC7E,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,kDAAkD;IAClD,MAAM,CAAC,EAAE,KAAK,CAAA;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,kBAAkB,CAAA;AAEpE;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;;;;OAQG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB;;;;;;;OAOG;IACH,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,EAAE,CAAA;IAC1B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,aAAa,CAAA;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,IAAI,EACJ,UAAU,EACV,KAAK,EACL,KAAK,EACL,UAAU,EACV,OAAY,EACZ,MAAsB,EACtB,YAAmB,EACnB,SAAS,GACV,EAAE,eAAe,+BAyFjB;AAED,eAAe,UAAU,CAAA"}

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

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { ArrowRight } from 'lucide-react';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { FactList } from '../../components/ui/fact-list.js';
+import { Section, SectionHeading } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * One capability in depth: its name, a standfirst, a specification, a panel, and at
+ * most two actions.
+ *
+ * **This is the upstream experience and service pattern, and the translation is the
+ * decision the whole effort rests on, so it is stated rather than assumed.** The
+ * published pattern is a storefront's product page: a name, a paragraph about it, a
+ * table of specifications, a gallery, and a buy button. Everything about that pattern
+ * is layout and accessibility work, and all of it transfers without a change: a
+ * specification is a description list whichever product it describes, a gallery is a
+ * figure a reader has to be able to name, and the buy button is a real anchor rather
+ * than a styled `div`. What does not transfer is the framing, and framing is where
+ * most of the prose in such a page goes. So the layout is the storefront's and the
+ * writing is Prism's: a pipeline that runs, a market that is captured, an estate that
+ * is observed, a run that is finished and can be read afterwards. The Demo holds that
+ * vocabulary and this component holds none of it, because a Block ships no copy and
+ * a showcase whose examples were authored by a design system would hand every
+ * consumer a page about somebody else's product.
+ *
+ * **The specification is `FactList` and the panel is a `figure`, and neither is
+ * re-derived here.** `FactList` is a real `<dl>` with the term before its answer,
+ * which is what a specification is and what a table of key and value cells is not: a
+ * screen reader announces the term before the answer in one and reads two columns of
+ * equal weight in the other, and a reader who lands mid-list cannot tell which half
+ * they are in. The panel is a `<figure>` with a required name for the reason
+ * `FeatureRows01` states. Re-deriving either here would put a second answer to "how
+ * does a specification read" in one package, and the second answer is always the one
+ * that disagrees.
+ *
+ * **What this is not, and the reason matters more than the list would.** This is not
+ * a pricing Block and it carries no price, no period, no currency and no tier. That is
+ * not a missing feature, it is the refusal that keeps the item honest: a Block that
+ * holds a number the caller has to remember to change is a Block that ships a stale
+ * claim, and a stale price is the one number on a marketing page that a reader acts
+ * on. `Price` exists as a Component and `Pricing01` exists as a Block, and a caller
+ * who wants a price composes them beside this one rather than putting the figure in
+ * here where nothing would tell them it can go stale.
+ *
+ * **The panel is drawn by this Block, and the copy column is first in the DOM on both
+ * layouts.** The name and the specification are the content; the panel is evidence
+ * for them, and a reader who never reaches the panel has still read everything the
+ * section claims. `layout` therefore moves the panel in the visual order with `order`
+ * rather than by swapping the columns in the markup, so the reading order is the same
+ * whichever side the panel is drawn on.
+ *
+ * **The heading is aligned left.** `SectionHeading` states the rule and this section
+ * has a specification and a panel beside and under the name, so there is content and
+ * the answer is left.
+ *
+ * It composes `Section` and `SectionHeading`, so it inherits the container and the
+ * vertical rhythm rather than re-deriving either, and it adds no container width and
+ * no section padding of its own.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export function Showcase01({ eyebrow, name, standfirst, facts, media, mediaLabel, actions = [], layout = 'panel-right', headingLevel = 'h2', className, }) {
+    if (media !== undefined && !mediaLabel) {
+        throw new Error('Showcase01: a media node was passed with no mediaLabel, so the figure would be one a reader ' +
+            'navigating by figure cannot tell from the next showcase on the page. Pass the words you mean, or omit the media.');
+    }
+    const panelFirst = layout === 'panel-left';
+    return (_jsx(Section, { "data-slot": "showcase-01", className: className, children: _jsxs("div", { "data-slot": "showcase-01-band", className: "grid items-start gap-10 lg:grid-cols-2 lg:gap-16", children: [_jsxs("div", { "data-slot": "showcase-01-copy", className: cn('flex min-w-0 flex-col gap-8', panelFirst ? 'lg:order-2' : 'lg:order-1'), children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: name, description: standfirst }), actions.length ? (_jsx("div", { "data-slot": "showcase-01-actions", className: "flex flex-col gap-3 sm:flex-row", children: actions.map((action, index) => {
+                                // A slot is the caller's own control, placed where it asked to be and
+                                // otherwise untouched. Keyed positionally for the reason the other
+                                // keyed lists in this package state: two actions may share a label,
+                                // and a row keyed on a localised label remounts when the reader
+                                // changes language.
+                                if ('slot' in action) {
+                                    return _jsx(Fragment, { children: action.slot }, index);
+                                }
+                                // The variant follows the position, which is a decision about the
+                                // row's shape rather than about the element.
+                                const variant = action.variant ?? (index === 0 ? 'default' : 'outline');
+                                return (_jsxs(CtaLink, { href: action.href, newTab: action.newTab, size: "lg", variant: variant, className: "group", children: [action.label, index === 0 ? (_jsx(ArrowRight, { className: "transition-transform size-4 group-hover:translate-x-0.5" })) : null] }, index));
+                            }) })) : null, _jsx(FactList, { facts: facts })] }), media ? (_jsx("figure", { "data-slot": "showcase-01-media", "aria-label": mediaLabel, className: cn('bg-card flex min-w-0 flex-col justify-center rounded-xl border p-4 shadow-sm', panelFirst ? 'lg:order-1' : 'lg:order-2'), children: media })) : null] }) }));
+}
+export default Showcase01;

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

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

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

@@ -0,0 +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"}

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

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