@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/blocks/empty-state-01/index.d.ts.map

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

package/dist/blocks/empty-state-01/index.js

@@ -0,0 +1 @@
+export { EmptyState01, EMPTY_REASONS, default } from './empty-state.js';

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

@@ -0,0 +1,128 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One question and the answer to it, and both are the caller's.
+ *
+ * `question` is a string because a question is one sentence and a question mark
+ * ends it, and a node here would let a caller compose a heading out of an emphasis
+ * and a link, which is a different Item. `answer` is a node because an answer is
+ * rarely one sentence: three of the four products that would install this put a
+ * link or a code sample inside it.
+ */
+export type Faq01Question = {
+    /** Stable identity, and the accordion item's value. */
+    id: string;
+    /** The question, as the caller writes it. */
+    question: string;
+    /** The answer, as the caller composes it. */
+    answer: ReactNode;
+};
+/**
+ * The props a Faq01 takes.
+ *
+ * Every string is a prop and the Block ships none: no question, no answer and no
+ * contact label. The contact label in particular is a sentence, and it is the
+ * sentence that says what a reader gets by asking, which is the sentence a
+ * marketing page most often gets wrong and never on purpose.
+ */
+export type Faq01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: ReactNode;
+    /**
+     * The section title.
+     *
+     * Required, unlike most Blocks in this package, and the reason is short: a
+     * question list with no heading is a set of questions floating on a page, and a
+     * reader who arrived from a search has nothing to orient against. A page that
+     * already owns a heading for these questions composes `Accordion` directly
+     * instead, and that is the honest answer rather than making this Block render
+     * nothing useful under no title.
+     */
+    title: ReactNode;
+    /** One or two sentences under the title. */
+    description?: ReactNode;
+    /**
+     * The questions, in the order a reader should meet them.
+     *
+     * Order is the caller's and it is not a small thing: a list of questions is a
+     * set of objections, and the order is the answer to which objection the reader
+     * has by the third row.
+     */
+    questions: readonly Faq01Question[];
+    /**
+     * Which form the list takes.
+     *
+     * `accordion` is the default because most of a FAQ is a set of questions a
+     * reader has not thought of yet, and a collapsed answer is a question they have
+     * not decided to spend anything on. `list` is for the reader who has already
+     * scanned the page and wants to compare two answers at once, and no single
+     * rendering serves both.
+     *
+     * @defaultValue 'accordion'
+     */
+    format?: 'accordion' | 'list';
+    /**
+     * The way out for a reader whose question is not on this page.
+     *
+     * A label and a destination rather than a node, because the honest contact
+     * control is always a link to a place a human reads, and a node here would let a
+     * consumer ship a control that goes nowhere. The label is a prop because it is a
+     * sentence: "Still stuck, talk to us" and "Ask an engineer" are two products'
+     * voices, and a button is the worst place for Prism to have one.
+     */
+    contact?: {
+        label: string;
+        href: string;
+    };
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+    /** Layout classes for the list. Layout only; every visual property is Prism's. */
+    className?: string;
+};
+/**
+ * A question and answer list, with the section heading and an optional way to ask
+ * a question that is not on the page.
+ *
+ * **The accordion is the default, and the list form exists for the reader the
+ * accordion cannot serve.** A reader who has just arrived at this section has not
+ * decided what they want to know, so a collapsed answer is a question they have not
+ * chosen to spend anything on, and asking four questions costs four taps. A reader
+ * who has scanned the page and wants to weigh two answers against each other wants
+ * them all open at once, and a design system that only ships the accordion makes
+ * that reader open four panels by hand to get there. Both are real readers, the
+ * two forms cost about a page of CSS between them, and picking one would have meant
+ * the other reader was worse served by a decision made once in a design system
+ * rather than once in a page.
+ *
+ * **The keyboard model is `Accordion`'s and this Block does not re-derive it.** The
+ * trigger is a real button, the panel is linked to it by the library, Enter or
+ * Space opens the focused item, and the header announces its expanded state. The
+ * cost of composing rather than deriving is that this Block cannot add a behaviour
+ * to the accordion without forking the Component, and the benefit is that the
+ * behaviour a keyboard reader meets here is the one they meet in a settings panel,
+ * which is the entire reason this package has a Component layer.
+ *
+ * **The list form is a definition list, and that is `NoteGrid01`'s decision
+ * borrowed rather than a new one.** A question is a term and its answer is that
+ * term's explanation, and a `dl` is what tells a screen reader so: it announces
+ * "the question, the answer" per pair rather than reading eight questions and then
+ * eight paragraphs and leaving a reader to pair them up. The alternative was a
+ * `ul` of `li`s with a bold line and a paragraph in each, which is the same
+ * document with the structure taken out of it.
+ *
+ * **The contact control is a real `CtaLink`, under the last answer, and its label
+ * is a prop.** It is a link rather than a button because it goes somewhere, and a
+ * button that navigates nothing is announced as a command that does nothing. It
+ * sits under the list rather than beside the heading because a reader who has read
+ * eight answers and found none of them is in a different frame of mind from one
+ * who has read nothing, and the sentence they need is the one that acknowledges
+ * it.
+ *
+ * It is a server Component: no hook, no state and no client code of its own. The
+ * `accordion` form composes `Accordion`, which ships its own client directive
+ * because it owns the open set, so a consumer pays for the accordion and not for
+ * this Block, and a consumer who uses `format="list"` pays for neither.
+ */
+export declare function Faq01({ eyebrow, title, description, questions, format, contact, headingLevel, className, }: Faq01Props): import("react").JSX.Element;
+export default Faq01;
+//# sourceMappingURL=faq.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"faq.d.ts","sourceRoot":"","sources":["../../../src/blocks/faq-01/faq.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAStC,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGxF;;;;;;;;GAQG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,uDAAuD;IACvD,EAAE,EAAE,MAAM,CAAA;IACV,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAA;IAChB,6CAA6C;IAC7C,MAAM,EAAE,SAAS,CAAA;CAClB,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;;;;;OASG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;OAMG;IACH,SAAS,EAAE,SAAS,aAAa,EAAE,CAAA;IACnC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC7B;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACzC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,KAAK,EACL,WAAW,EACX,SAAS,EACT,MAAoB,EACpB,OAAO,EACP,YAAmB,EACnB,SAAS,GACV,EAAE,UAAU,+BA+CZ;AAED,eAAe,KAAK,CAAA"}

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '../../components/ui/accordion.js';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Section, SectionHeading } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * A question and answer list, with the section heading and an optional way to ask
+ * a question that is not on the page.
+ *
+ * **The accordion is the default, and the list form exists for the reader the
+ * accordion cannot serve.** A reader who has just arrived at this section has not
+ * decided what they want to know, so a collapsed answer is a question they have not
+ * chosen to spend anything on, and asking four questions costs four taps. A reader
+ * who has scanned the page and wants to weigh two answers against each other wants
+ * them all open at once, and a design system that only ships the accordion makes
+ * that reader open four panels by hand to get there. Both are real readers, the
+ * two forms cost about a page of CSS between them, and picking one would have meant
+ * the other reader was worse served by a decision made once in a design system
+ * rather than once in a page.
+ *
+ * **The keyboard model is `Accordion`'s and this Block does not re-derive it.** The
+ * trigger is a real button, the panel is linked to it by the library, Enter or
+ * Space opens the focused item, and the header announces its expanded state. The
+ * cost of composing rather than deriving is that this Block cannot add a behaviour
+ * to the accordion without forking the Component, and the benefit is that the
+ * behaviour a keyboard reader meets here is the one they meet in a settings panel,
+ * which is the entire reason this package has a Component layer.
+ *
+ * **The list form is a definition list, and that is `NoteGrid01`'s decision
+ * borrowed rather than a new one.** A question is a term and its answer is that
+ * term's explanation, and a `dl` is what tells a screen reader so: it announces
+ * "the question, the answer" per pair rather than reading eight questions and then
+ * eight paragraphs and leaving a reader to pair them up. The alternative was a
+ * `ul` of `li`s with a bold line and a paragraph in each, which is the same
+ * document with the structure taken out of it.
+ *
+ * **The contact control is a real `CtaLink`, under the last answer, and its label
+ * is a prop.** It is a link rather than a button because it goes somewhere, and a
+ * button that navigates nothing is announced as a command that does nothing. It
+ * sits under the list rather than beside the heading because a reader who has read
+ * eight answers and found none of them is in a different frame of mind from one
+ * who has read nothing, and the sentence they need is the one that acknowledges
+ * it.
+ *
+ * It is a server Component: no hook, no state and no client code of its own. The
+ * `accordion` form composes `Accordion`, which ships its own client directive
+ * because it owns the open set, so a consumer pays for the accordion and not for
+ * this Block, and a consumer who uses `format="list"` pays for neither.
+ */
+export function Faq01({ eyebrow, title, description, questions, format = 'accordion', contact, headingLevel = 'h2', className, }) {
+    return (_jsxs(Section, { children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-10" }), _jsxs("div", { "data-slot": "faq", "data-format": format, className: cn('flex max-w-measure flex-col', className), children: [format === 'accordion' ? (_jsx(Accordion, { className: "border-t", children: questions.map((item) => (_jsxs(AccordionItem, { value: item.id, children: [_jsx(AccordionTrigger, { children: item.question }), _jsx(AccordionContent, { children: item.answer })] }, item.id))) })) : (_jsx("dl", { "data-slot": "faq-list", className: "border-t", children: questions.map((item) => (_jsxs("div", { "data-slot": "faq-item", className: "border-border border-b py-5", children: [_jsx("dt", { className: "text-sm font-medium text-balance", children: item.question }), _jsx("dd", { className: "text-muted-foreground mt-2 text-pretty text-sm", children: item.answer })] }, item.id))) })), contact ? (_jsx("div", { "data-slot": "faq-contact", className: "mt-8", children: _jsx(CtaLink, { variant: "outline", href: contact.href, children: contact.label }) })) : null] })] }));
+}
+export default Faq01;

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

@@ -0,0 +1,3 @@
+export { Faq01, default } from './faq.js';
+export type { Faq01Props, Faq01Question } from './faq.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1 @@
+export { Faq01, default } from './faq.js';

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

@@ -1,5 +1,5 @@
 import type { LucideIcon } from 'lucide-react';
-import { type HeadingLevel } from '../../components/ui/section';
+import { type HeadingLevel } from '../../components/ui/section.js';
 /**
  * One feature in an icon-bearing grid.
  *
@@ -72,6 +72,33 @@ export type FeatureGrid01Props = FeatureGrid01CommonProps & ({
  * The `icon` variant renders a tile per feature and requires an icon per feature.
  * The `bare` variant renders no tile and requires no icon, and the type says so
  * rather than the renderer finding out.
+ *
+ * **The section heading is aligned left, and that is this Block joining the other
+ * eight rather than inventing an answer.** `SectionHeading` states its own rule:
+ * `center` is right for a band that is only a heading, and `left` is right for a
+ * section with content under it, because a centred title above a left-aligned
+ * grid reads as two unrelated pieces. A grid of cards is content under its
+ * heading, so the rule says left. `NoteGrid01`, `StackGrid01`, `StatusLedger01`,
+ * `ProductGrid01`, `LogoStrip01`, `Stats01`, `ProcessRail01` and `ProcessFlow01`
+ * all pass `align="left"` for that reason, and this one did not, so it was one of
+ * only two Blocks in the package that centred a heading over content.
+ *
+ * The cost was not visible in this repository, which previews one Block at a time
+ * and so never put a centred title next to a left-aligned one. It was visible in
+ * the consumer: the Nexus landing is composed from seven of these Blocks and put
+ * two centred section titles among five left ones, and the page's own rhythm read
+ * as an accident rather than as a decision. A page's composition is the consumer's,
+ * but a Block that is the only one of its kind answering a shared question is not a
+ * composition the consumer can correct without restyling a catalogue item, which
+ * the no-override-path rule does not allow.
+ *
+ * `Hero01` is the deliberate exception and keeps its own `align`, and `Cta01` draws
+ * no section heading at all: a centred hero is a band that is only a heading, the
+ * two-column form puts its figure beside the copy rather than under it, and the
+ * closing band is a title and two actions on a filled panel with nothing underneath.
+ * `test/section-heading-align.test.tsx` holds the whole list, which is the
+ * assertion, so a Block that opens with a heading and content under it cannot be
+ * added answering this question a second way.
  */
 export declare function FeatureGrid01(props: FeatureGrid01Props): import("react").JSX.Element;
 export default FeatureGrid01;

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

@@ -1 +1 @@
-{"version":3,"file":"feature-grid.d.ts","sourceRoot":"","sources":["../../../src/blocks/feature-grid-01/feature-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAExF;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,iFAAiF;AACjF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,MAAM,OAAO,GAAG,WAAW,GAAG,WAAW,CAAA;AAE/C,KAAK,wBAAwB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GACvD,CACI;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,WAAW,EAAE,CAAA;CAAE,GAC7C;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,WAAW,EAAE,CAAA;CAAE,CAC/C,CAAA;AAEH;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BA0CtD;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"feature-grid.d.ts","sourceRoot":"","sources":["../../../src/blocks/feature-grid-01/feature-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAEpG;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,iFAAiF;AACjF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,MAAM,OAAO,GAAG,WAAW,GAAG,WAAW,CAAA;AAE/C,KAAK,wBAAwB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GACvD,CACI;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,WAAW,EAAE,CAAA;CAAE,GAC7C;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,WAAW,EAAE,CAAA;CAAE,CAC/C,CAAA;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAiDtD;AAED,eAAe,aAAa,CAAA"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardDescription, CardHeader, CardTitle } from '../../components/ui/card';
-import { Section, SectionHeading } from '../../components/ui/section';
+import { Card, CardDescription, CardHeader, CardTitle } from '../../components/ui/card.js';
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
 /**
  * A grid of short feature blurbs.
  *
@@ -11,14 +11,45 @@ import { Section, SectionHeading } from '../../components/ui/section';
  * The `icon` variant renders a tile per feature and requires an icon per feature.
  * The `bare` variant renders no tile and requires no icon, and the type says so
  * rather than the renderer finding out.
+ *
+ * **The section heading is aligned left, and that is this Block joining the other
+ * eight rather than inventing an answer.** `SectionHeading` states its own rule:
+ * `center` is right for a band that is only a heading, and `left` is right for a
+ * section with content under it, because a centred title above a left-aligned
+ * grid reads as two unrelated pieces. A grid of cards is content under its
+ * heading, so the rule says left. `NoteGrid01`, `StackGrid01`, `StatusLedger01`,
+ * `ProductGrid01`, `LogoStrip01`, `Stats01`, `ProcessRail01` and `ProcessFlow01`
+ * all pass `align="left"` for that reason, and this one did not, so it was one of
+ * only two Blocks in the package that centred a heading over content.
+ *
+ * The cost was not visible in this repository, which previews one Block at a time
+ * and so never put a centred title next to a left-aligned one. It was visible in
+ * the consumer: the Nexus landing is composed from seven of these Blocks and put
+ * two centred section titles among five left ones, and the page's own rhythm read
+ * as an accident rather than as a decision. A page's composition is the consumer's,
+ * but a Block that is the only one of its kind answering a shared question is not a
+ * composition the consumer can correct without restyling a catalogue item, which
+ * the no-override-path rule does not allow.
+ *
+ * `Hero01` is the deliberate exception and keeps its own `align`, and `Cta01` draws
+ * no section heading at all: a centred hero is a band that is only a heading, the
+ * two-column form puts its figure beside the copy rather than under it, and the
+ * closing band is a title and two actions on a filled panel with nothing underneath.
+ * `test/section-heading-align.test.tsx` holds the whole list, which is the
+ * assertion, so a Block that opens with a heading and content under it cannot be
+ * added answering this question a second way.
  */
 export function FeatureGrid01(props) {
     const { eyebrow, title, description, numbered = false, headingLevel = 'h2' } = props;
+    // A card title 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
+    // five headings with it instead of announcing five siblings of the section.
+    const Title = childLevel(headingLevel);
     // Read off `props` rather than destructured, so the two stay one value: taking
     // `variant` and `features` apart is what would let the arm the type checked
     // and the arm the renderer followed come to be two different ones.
     const variant = props.variant ?? 'icon';
     const { features } = props;
-    return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("div", { className: "grid gap-6 sm:grid-cols-2", children: features.map((feature, index) => (_jsx(Card, { className: "gap-4 py-6", children: _jsxs(CardHeader, { children: [numbered ? (_jsx("span", { className: "text-muted-foreground font-mono text-xs", children: String(index + 1).padStart(2, '0') })) : null, variant === 'icon' && 'icon' in feature ? (_jsx("span", { className: "bg-accent text-accent-foreground mb-2 flex size-10 items-center justify-center rounded-lg", children: _jsx(feature.icon, { className: "size-5" }) })) : null, _jsx(CardTitle, { children: feature.title }), _jsx(CardDescription, { children: feature.body })] }) }, feature.title))) })] }));
+    return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("div", { className: "grid gap-6 sm:grid-cols-2", children: features.map((feature, index) => (_jsx(Card, { className: "gap-4 py-6", children: _jsxs(CardHeader, { children: [numbered ? (_jsx("span", { className: "text-muted-foreground font-mono text-xs", children: String(index + 1).padStart(2, '0') })) : null, variant === 'icon' && 'icon' in feature ? (_jsx("span", { className: "bg-accent text-accent-foreground mb-2 flex size-10 items-center justify-center rounded-lg", children: _jsx(feature.icon, { className: "size-5" }) })) : null, _jsx(CardTitle, { children: _jsx(Title, { children: feature.title }) }), _jsx(CardDescription, { children: feature.body })] }) }, feature.title))) })] }));
 }
 export default FeatureGrid01;

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

@@ -1,3 +1,3 @@
-export { FeatureGrid01, default } from './feature-grid';
-export type { BareFeature, Feature, FeatureGrid01Props, IconFeature, } from './feature-grid';
+export { FeatureGrid01, default } from './feature-grid.js';
+export type { BareFeature, Feature, FeatureGrid01Props, IconFeature, } from './feature-grid.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-export { FeatureGrid01, default } from './feature-grid';
+export { FeatureGrid01, default } from './feature-grid.js';

package/dist/blocks/feature-rows-01/feature-rows-01.d.ts

@@ -0,0 +1,158 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One row: a copy column and a visual column, with the visual on a side this
+ * Block derives rather than one the caller passes.
+ */
+export type FeatureRow = {
+    /** Optional label above the row's title. It has no default, and none is a default. */
+    eyebrow?: string;
+    /**
+     * The row's title. A heading one step below the section that introduces the set,
+     * derived from `headingLevel`, so a section embedded one level deeper carries its
+     * outline with it.
+     */
+    title: string;
+    /** The paragraph under the title. One or two sentences. */
+    body: string;
+    /**
+     * The visual: a figure, a screenshot, a chart, or any node the consumer
+     * composed. Omit it for a row that is copy only.
+     *
+     * The Block draws the panel around it. See the Block's own JSDoc for why the
+     * frame is the Block's and not the caller's.
+     */
+    media?: ReactNode;
+    /**
+     * The accessible name of the visual, published on the `<figure>` and as no
+     * visible text.
+     *
+     * Required whenever `media` is passed, and the Block throws without it rather
+     * than shipping a figure a reader cannot name. That is the rule
+     * `InstrumentPanel01` states for its state, and the reason is the same one: a
+     * reader navigating by figure lands on two of them on this page and can tell
+     * them apart only by their names.
+     */
+    mediaAlt?: string;
+    /**
+     * Forbidden, and present in the type only to say so.
+     *
+     * The side of the visual is derived from the row's index. See the Block's own
+     * JSDoc: a per-row `align` is a decision four times over, and they disagree the
+     * first time somebody inserts a row. `align` on the Block sets the first row
+     * and the rest follow from the index.
+     */
+    align?: never;
+};
+/**
+ * The props a FeatureRows01 takes. Every string is a prop and the Block ships
+ * none: no row, no title and no default set of arguments.
+ */
+export type FeatureRows01Props = {
+    /**
+     * The rows, in the order a reader should meet them. Order is the caller's
+     * because it is a claim about which capability matters first.
+     */
+    rows: readonly FeatureRow[];
+    /**
+     * Which side the FIRST row's copy column takes. Every row after it alternates.
+     *
+     * One decision for the whole set rather than one per row, for the reason the
+     * row type forbids `align`: a per-row value is a decision four times over and
+     * the four answers will disagree the first time somebody inserts a row above
+     * them, and the disagreement is invisible because each row on its own looks
+     * deliberate.
+     *
+     * @defaultValue 'left'
+     */
+    align?: 'left' | 'right';
+    /**
+     * Starts the alternation from the other side, so the first row's copy takes the
+     * side `align` does not name.
+     *
+     * It is a second spelling of the same single decision rather than a second
+     * decision, and both exist because a page's composition is written two ways: a
+     * layout is described as "copy on the right" by someone reading the grid and as
+     * "image first" by someone reading the page. When both are passed, `reverse`
+     * wins, and that is stated here rather than left for a reader to infer from the
+     * order of two keywords.
+     *
+     * @defaultValue false
+     */
+    reverse?: boolean;
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /** The section title. Omit it for a set of rows composed under its own heading. */
+    title?: string;
+    /** One or two sentences under the title. */
+    description?: string;
+    /**
+     * Heading level for the section title and, one step below it, for each row's
+     * title. 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;
+};
+/**
+ * A set of two-column rows: a copy column and a visual column, with the visual
+ * alternating sides down the set.
+ *
+ * **The alternation is derived from the row's index, and the row type forbids the
+ * prop that would stop it.** The obvious API is `align` on each row, and it is
+ * wrong for a reason that only shows up over time: a set of four rows with four
+ * alignments is one decision made four times, and the four answers agree until
+ * somebody inserts a row in the middle, at which point every row below it is
+ * wrong and each of them looks deliberate. A Block exists to end exactly that
+ * drift, so the Block ends it here: the section's `align` sets the first row and
+ * the index does the rest. Inserting a row re-alternates the whole set, which is
+ * the correct answer, and the alternative is a page where row three and row four
+ * both put the visual on the same side because somebody copied row two.
+ *
+ * **The visual is inside a panel, and the panel is the Block's.** The rule is
+ * `Hero01`'s and it is repeated rather than assumed: a bare figure on the page
+ * ground reads as an illustration, and the same figure inside a bordered panel
+ * reads as an instrument, which is what it is. A screenshot of a dashboard with
+ * no frame is a picture of a dashboard; the same screenshot in a panel is a
+ * product making a claim about itself. Here Prism draws the frame because the
+ * rows are the section's rhythm rather than the consumer's, and a set of rows
+ * where four of the six frames are missing reads as four rows somebody forgot.
+ * The cost is real: the panel is not free, it is a border and a surface on every
+ * row, and a consumer with one row and no other frame on the page has added a
+ * box for a box's sake. `mediaAlt` is required alongside `media` for the same
+ * reason the panel exists: a figure a reader cannot name is a figure a reader
+ * navigating by figure cannot find again.
+ *
+ * **The copy is first in the DOM on every row, whatever side it is drawn on.** The
+ * alternation is expressed with `order` rather than by swapping the markup, so a
+ * screen reader reaches the title before the figure on all four rows instead of
+ * first on two of them, and a reader with styles off still gets title then
+ * figure. The visual order changes; the reading order does not.
+ *
+ * **The rows are `<section>`s inside the section, and that nesting is on
+ * purpose.** Each row is a topic of its own, with its own title, so it is a
+ * region a reader can jump to and one a browser can scroll to. A page of four
+ * rows rendered as four `<div>`s is four topics with no names, and the outline
+ * stops at the section heading. The rows are headings one level below the
+ * section, derived with `childLevel` for the same reason every other Block that
+ * draws titled cards derives it: a Block moved from an `h2` section into an `h3`
+ * one carries its outline with it instead of announcing four siblings of itself.
+ *
+ * **The heading is aligned left.** `SectionHeading` states the rule: `center` is
+ * for a band that is only a heading, and this section has four rows of content
+ * under it. A centred title above an alternating set reads as two unrelated
+ * pieces, because every row below it is flush left or flush right.
+ *
+ * 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 FeatureRows01({ rows, align, reverse, eyebrow, title, description, headingLevel, className, }: FeatureRows01Props): import("react").JSX.Element;
+export default FeatureRows01;
+//# sourceMappingURL=feature-rows-01.d.ts.map

package/dist/blocks/feature-rows-01/feature-rows-01.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-rows-01.d.ts","sourceRoot":"","sources":["../../../src/blocks/feature-rows-01/feature-rows-01.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGpG;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,IAAI,EAAE,SAAS,UAAU,EAAE,CAAA;IAC3B;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAc,EACd,OAAe,EACf,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAmB,EACnB,SAAS,GACV,EAAE,kBAAkB,+BA8FpB;AAED,eAAe,aAAa,CAAA"}

package/dist/blocks/feature-rows-01/feature-rows-01.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * A set of two-column rows: a copy column and a visual column, with the visual
+ * alternating sides down the set.
+ *
+ * **The alternation is derived from the row's index, and the row type forbids the
+ * prop that would stop it.** The obvious API is `align` on each row, and it is
+ * wrong for a reason that only shows up over time: a set of four rows with four
+ * alignments is one decision made four times, and the four answers agree until
+ * somebody inserts a row in the middle, at which point every row below it is
+ * wrong and each of them looks deliberate. A Block exists to end exactly that
+ * drift, so the Block ends it here: the section's `align` sets the first row and
+ * the index does the rest. Inserting a row re-alternates the whole set, which is
+ * the correct answer, and the alternative is a page where row three and row four
+ * both put the visual on the same side because somebody copied row two.
+ *
+ * **The visual is inside a panel, and the panel is the Block's.** The rule is
+ * `Hero01`'s and it is repeated rather than assumed: a bare figure on the page
+ * ground reads as an illustration, and the same figure inside a bordered panel
+ * reads as an instrument, which is what it is. A screenshot of a dashboard with
+ * no frame is a picture of a dashboard; the same screenshot in a panel is a
+ * product making a claim about itself. Here Prism draws the frame because the
+ * rows are the section's rhythm rather than the consumer's, and a set of rows
+ * where four of the six frames are missing reads as four rows somebody forgot.
+ * The cost is real: the panel is not free, it is a border and a surface on every
+ * row, and a consumer with one row and no other frame on the page has added a
+ * box for a box's sake. `mediaAlt` is required alongside `media` for the same
+ * reason the panel exists: a figure a reader cannot name is a figure a reader
+ * navigating by figure cannot find again.
+ *
+ * **The copy is first in the DOM on every row, whatever side it is drawn on.** The
+ * alternation is expressed with `order` rather than by swapping the markup, so a
+ * screen reader reaches the title before the figure on all four rows instead of
+ * first on two of them, and a reader with styles off still gets title then
+ * figure. The visual order changes; the reading order does not.
+ *
+ * **The rows are `<section>`s inside the section, and that nesting is on
+ * purpose.** Each row is a topic of its own, with its own title, so it is a
+ * region a reader can jump to and one a browser can scroll to. A page of four
+ * rows rendered as four `<div>`s is four topics with no names, and the outline
+ * stops at the section heading. The rows are headings one level below the
+ * section, derived with `childLevel` for the same reason every other Block that
+ * draws titled cards derives it: a Block moved from an `h2` section into an `h3`
+ * one carries its outline with it instead of announcing four siblings of itself.
+ *
+ * **The heading is aligned left.** `SectionHeading` states the rule: `center` is
+ * for a band that is only a heading, and this section has four rows of content
+ * under it. A centred title above an alternating set reads as two unrelated
+ * pieces, because every row below it is flush left or flush right.
+ *
+ * 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 FeatureRows01({ rows, align = 'left', reverse = false, eyebrow, title, description, headingLevel = 'h2', className, }) {
+    // A row's title 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
+    // outline with it.
+    const Title = childLevel(headingLevel);
+    // The side the first row's copy takes, resolved once. `reverse` is the second
+    // spelling of the same decision and wins when both are passed, which the prop
+    // documents rather than leaves to the order of two keywords.
+    const firstCopyLeft = reverse ? align === 'right' : align === 'left';
+    for (const row of rows) {
+        if (row.media !== undefined && !row.mediaAlt) {
+            throw new Error('FeatureRows01: a row was passed a media node with no mediaAlt, so the figure would be one a reader ' +
+                'navigating by figure cannot tell from the next one on the page. Pass the words you mean, or omit the media.');
+        }
+    }
+    return (_jsxs(Section, { "data-slot": "feature-rows-01", className: className, children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-16" })) : null, _jsx("div", { "data-slot": "feature-rows", className: "flex flex-col gap-20", children: rows.map((row, index) => {
+                    // The derivation, and the whole of the prop decision: the first row takes
+                    // the section's side and every row after it is the other one.
+                    const copyOnLeft = index % 2 === 0 ? firstCopyLeft : !firstCopyLeft;
+                    return (_jsxs("section", { "data-slot": "feature-rows-row", className: "grid items-center gap-10 lg:grid-cols-2 lg:gap-16", children: [_jsxs("div", { "data-slot": "feature-rows-copy", className: cn('flex flex-col gap-4', !copyOnLeft ? 'lg:order-2' : 'lg:order-1'), children: [row.eyebrow ? (_jsx("span", { className: "text-muted-foreground text-sm font-medium tracking-wide uppercase", children: row.eyebrow })) : null, _jsx(Title, { className: "text-2xl font-semibold tracking-tight sm:text-3xl", children: row.title }), _jsx("p", { className: "text-muted-foreground text-pretty text-base", children: row.body })] }), row.media ? (_jsx("figure", { "data-slot": "feature-rows-media", "aria-label": row.mediaAlt, className: cn('bg-card flex min-w-0 flex-col justify-center rounded-xl border p-4 shadow-sm', copyOnLeft ? 'lg:order-1' : 'lg:order-2'), children: row.media })) : null] }, row.title));
+                }) })] }));
+}
+export default FeatureRows01;

package/dist/blocks/feature-rows-01/index.d.ts

@@ -0,0 +1,3 @@
+export { FeatureRows01, default } from './feature-rows-01.js';
+export type { FeatureRow, FeatureRows01Props } from './feature-rows-01.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/feature-rows-01/index.d.ts.map

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

package/dist/blocks/feature-rows-01/index.js

@@ -0,0 +1 @@
+export { FeatureRows01, default } from './feature-rows-01.js';