@nanisoft/prism-ui 0.5.1 → 0.7.0

package/dist/blocks/logo-strip-01/logo-strip.d.ts

@@ -0,0 +1,84 @@
+import { type HeadingLevel } from '../../components/ui/section';
+/**
+ * One item of the strip, as a string.
+ *
+ * A string rather than a node, because the strip is a run of short words and a
+ * node would let a caller put a paragraph in a slot whose whole job is to be
+ * scannable in one glance. A caller with more than a few words about one item
+ * wants a `NoteGrid01` row or a `StatusLedger01` row, not a longer strip.
+ */
+export type LogoStripItem = string;
+/**
+ * The props a LogoStrip01 takes.
+ *
+ * Every string is a prop and the Block ships none. There is no default list of
+ * technologies, no default list of customers and no default list of words: a
+ * strip that hardcoded any of them would hand every consumer a claim about who
+ * uses their product.
+ */
+export type LogoStrip01Props = {
+    /**
+     * The items, in the order a reader should meet them. Order is the caller's
+     * because it is a claim about which item matters first.
+     */
+    items: readonly LogoStripItem[];
+    /**
+     * The strip's accessible name, for a strip that is not inside a region the
+     * reader can already name. It is rendered as the list's name and as no visible
+     * text, because the items are the visible content and a heading above them would
+     * be a heading about a heading.
+     *
+     * It is required because it is a word a reader hears. A Block that ships no copy
+     * ships no reader-facing copy either, so "Highlights" is not this Block's to
+     * choose: on one site the strip is a list of data sources and on another it is a
+     * list of capabilities, and the word that says which is the caller's.
+     */
+    label: string;
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /** The section title. Omit it for a strip composed under its own heading. */
+    title?: string;
+    /** One or two sentences under the title. */
+    description?: string;
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Component. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * A single line of short items: the transition band between a hero and the
+ * section that follows it.
+ *
+ * All four NaniSoft sites compose this band, immediately after the hero and
+ * before the first numbered section, and each one wrote it as the same thing: a
+ * row of three to six short phrases, separated by a middot, in muted text, with
+ * no heading at all. Four hand-written strips, four sets of site CSS, and one
+ * question each of them answered differently - whether the strip is a list, a
+ * paragraph with separators, or a decorative row of spans.
+ *
+ * It is a `ul`, so a screen reader hears how many items there are before it
+ * hears the first one. That is the whole answer to the question: a strip whose
+ * items are spans in a `div` is announced as one run of text with no count, and a
+ * reader deciding whether to keep listening has nothing to weigh.
+ *
+ * **The strip does not move.** A band of items that slides is an entrance
+ * animation, and this system has none: motion is state feedback only, shortened
+ * rather than removed under reduced motion. What the four sites actually wanted
+ * from their strips was a second, quieter statement of what the product is, and
+ * repetition of the type does that without anything moving. A strip of more than
+ * about eight items wraps onto three lines on a phone and stops being a band, so
+ * a longer set belongs in a `StackGrid01`.
+ *
+ * The items are `text-balance` so a two-word item does not break across lines
+ * where a one-word item beside it does not. There is no separator glyph between
+ * them: a middot is punctuation a screen reader reads and a sighted reader parses
+ * as content, and the gap already separates two words from two words.
+ *
+ * It is a server Component: no hook, no state, no keyframes and no client code.
+ */
+export declare function LogoStrip01({ items, label, eyebrow, title, description, headingLevel, className, }: LogoStrip01Props): import("react").JSX.Element | null;
+export default LogoStrip01;
+//# sourceMappingURL=logo-strip.d.ts.map

package/dist/blocks/logo-strip-01/logo-strip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-strip.d.ts","sourceRoot":"","sources":["../../../src/blocks/logo-strip-01/logo-strip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGxF;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,CAAA;AAElC;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,KAAK,EAAE,SAAS,aAAa,EAAE,CAAA;IAC/B;;;;;;;;;;OAUG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAmB,EACnB,SAAS,GACV,EAAE,gBAAgB,sCA+BlB;AAED,eAAe,WAAW,CAAA"}

package/dist/blocks/logo-strip-01/logo-strip.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Section, SectionHeading } from '../../components/ui/section';
+import { cn } from '../../lib/utils';
+/**
+ * A single line of short items: the transition band between a hero and the
+ * section that follows it.
+ *
+ * All four NaniSoft sites compose this band, immediately after the hero and
+ * before the first numbered section, and each one wrote it as the same thing: a
+ * row of three to six short phrases, separated by a middot, in muted text, with
+ * no heading at all. Four hand-written strips, four sets of site CSS, and one
+ * question each of them answered differently - whether the strip is a list, a
+ * paragraph with separators, or a decorative row of spans.
+ *
+ * It is a `ul`, so a screen reader hears how many items there are before it
+ * hears the first one. That is the whole answer to the question: a strip whose
+ * items are spans in a `div` is announced as one run of text with no count, and a
+ * reader deciding whether to keep listening has nothing to weigh.
+ *
+ * **The strip does not move.** A band of items that slides is an entrance
+ * animation, and this system has none: motion is state feedback only, shortened
+ * rather than removed under reduced motion. What the four sites actually wanted
+ * from their strips was a second, quieter statement of what the product is, and
+ * repetition of the type does that without anything moving. A strip of more than
+ * about eight items wraps onto three lines on a phone and stops being a band, so
+ * a longer set belongs in a `StackGrid01`.
+ *
+ * The items are `text-balance` so a two-word item does not break across lines
+ * where a one-word item beside it does not. There is no separator glyph between
+ * them: a middot is punctuation a screen reader reads and a sighted reader parses
+ * as content, and the gap already separates two words from two words.
+ *
+ * It is a server Component: no hook, no state, no keyframes and no client code.
+ */
+export function LogoStrip01({ items, label, eyebrow, title, description, headingLevel = 'h2', className, }) {
+    if (items.length === 0)
+        return null;
+    return (_jsxs(Section, { className: "py-10 sm:py-14", children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-10" })) : null, _jsx("ul", { "data-slot": "logo-strip", "aria-label": items.length > 1 ? label : undefined, className: cn('text-muted-foreground flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-center text-sm', className), children: items.map((item) => (_jsx("li", { "data-slot": "logo-strip-item", className: "text-balance", children: item }, item))) })] }));
+}
+export default LogoStrip01;

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

@@ -0,0 +1,3 @@
+export { NoteGrid01, default } from './note-grid';
+export type { NoteGrid01Props, NoteGrid01Note } from './note-grid';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/note-grid-01/index.d.ts.map

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

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

@@ -0,0 +1 @@
+export { NoteGrid01, default } from './note-grid';

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

@@ -0,0 +1,79 @@
+import { type HeadingLevel } from '../../components/ui/section';
+/**
+ * One note in the grid: a title and one or two sentences under it.
+ *
+ * Both are required, and a note with no title is a bullet and a note with no
+ * body is a heading. The grid is a set of titled points, and each point is
+ * short enough that neither half is optional.
+ */
+export type NoteGrid01Note = {
+    /**
+     * The point's title: a short noun phrase, not a sentence. The grid is scanned
+     * down its left edge, so a title that wraps to two lines costs every other row
+     * its alignment.
+     */
+    title: string;
+    /** One or two sentences about the point. */
+    body: string;
+};
+/**
+ * The props a NoteGrid01 takes.
+ *
+ * Every string is a prop and the Block ships none: no note, no title and no
+ * default set of arguments. A grid that hardcoded its points would hand every
+ * consumer an argument for a product that is not theirs.
+ */
+export type NoteGrid01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /** The section title. Omit it for a grid composed under its own heading. */
+    title?: string;
+    /** One or two sentences under the title. */
+    description?: string;
+    /**
+     * The notes, in the order a reader should meet them. Order is the caller's
+     * because it is a claim about which point matters first.
+     */
+    notes: readonly NoteGrid01Note[];
+    /**
+     * The line under the grid, for the sentence that qualifies it: what the points
+     * do not cover, or where to read more.
+     */
+    caption?: string;
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+};
+/**
+ * A grid of short points: a title and a sentence or two, on a hairline above each
+ * one, with no tile and no icon.
+ *
+ * Three of the four NaniSoft sites compose this section, immediately after the
+ * process rail and before the next numbered band, and each one drew it as the
+ * same thing: a multi-column set of short points, each a bold title and a short
+ * paragraph, with no card and no icon. All three also composed it *twice* - once
+ * under the rail and once under a different section - so three hand-written grids
+ * became six, each with its own column count and its own spacing.
+ *
+ * It is a `dl` rather than a grid of `div`s, because each note is a term and its
+ * explanation and a definition list is what says so. The titles are `dt`s and the
+ * bodies are `dd`s, so a screen reader announces "the title, the body" for each
+ * point rather than reading six bold words and then six paragraphs and leaving a
+ * reader to pair them up.
+ *
+ * **No tile, no icon, no badge.** The point of this section is that it carries
+ * more words than a card does, and a card's job is to carry few. A note with an
+ * icon tile in front of it reads as a feature and is read as one, and a section of
+ * twelve features is a page that argues rather than explains. Where a point wants
+ * an icon and a card, that is `FeatureGrid01`, and the two Blocks are two
+ * different jobs rather than two densities of one.
+ *
+ * The column count is two on a wide viewport and three at the largest, with four
+ * notes as the comfortable case. A note whose body runs past three lines stops
+ * being a note, so the detail belongs in the row that needs it or above the grid
+ * in `description`.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export declare function NoteGrid01({ eyebrow, title, description, notes, caption, headingLevel, }: NoteGrid01Props): import("react").JSX.Element;
+export default NoteGrid01;
+//# sourceMappingURL=note-grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"note-grid.d.ts","sourceRoot":"","sources":["../../../src/blocks/note-grid-01/note-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAExF;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,KAAK,EACL,WAAW,EACX,KAAK,EACL,OAAO,EACP,YAAmB,GACpB,EAAE,eAAe,+BA0BjB;AAED,eAAe,UAAU,CAAA"}

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Section, SectionHeading } from '../../components/ui/section';
+/**
+ * A grid of short points: a title and a sentence or two, on a hairline above each
+ * one, with no tile and no icon.
+ *
+ * Three of the four NaniSoft sites compose this section, immediately after the
+ * process rail and before the next numbered band, and each one drew it as the
+ * same thing: a multi-column set of short points, each a bold title and a short
+ * paragraph, with no card and no icon. All three also composed it *twice* - once
+ * under the rail and once under a different section - so three hand-written grids
+ * became six, each with its own column count and its own spacing.
+ *
+ * It is a `dl` rather than a grid of `div`s, because each note is a term and its
+ * explanation and a definition list is what says so. The titles are `dt`s and the
+ * bodies are `dd`s, so a screen reader announces "the title, the body" for each
+ * point rather than reading six bold words and then six paragraphs and leaving a
+ * reader to pair them up.
+ *
+ * **No tile, no icon, no badge.** The point of this section is that it carries
+ * more words than a card does, and a card's job is to carry few. A note with an
+ * icon tile in front of it reads as a feature and is read as one, and a section of
+ * twelve features is a page that argues rather than explains. Where a point wants
+ * an icon and a card, that is `FeatureGrid01`, and the two Blocks are two
+ * different jobs rather than two densities of one.
+ *
+ * The column count is two on a wide viewport and three at the largest, with four
+ * notes as the comfortable case. A note whose body runs past three lines stops
+ * being a note, so the detail belongs in the row that needs it or above the grid
+ * in `description`.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export function NoteGrid01({ eyebrow, title, description, notes, caption, headingLevel = 'h2', }) {
+    return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("dl", { "data-slot": "note-grid", className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: notes.map((note) => (_jsxs("div", { "data-slot": "note-grid-note", className: "border-border flex flex-col gap-2 border-t pt-4", children: [_jsx("dt", { className: "text-sm font-semibold", children: note.title }), _jsx("dd", { className: "text-muted-foreground text-pretty text-sm", children: note.body })] }, note.title))) }), caption ? _jsx("p", { className: "text-muted-foreground mt-6 text-pretty text-sm", children: caption }) : null] }));
+}
+export default NoteGrid01;

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

@@ -15,6 +15,6 @@ import { Section, SectionHeading } from '../../components/ui/section';
  * inherited them.
  */
 export function Pricing01({ eyebrow, title, description, plans, headingLevel = 'h2', }) {
-    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 lg:grid-cols-3", children: plans.map((plan) => (_jsxs(Card, { className: plan.featured ? 'border-primary shadow-md' : undefined, children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: plan.name }), plan.featured ? _jsx(Badge, { children: plan.badge ?? 'Popular' }) : null] }), plan.body ? _jsx(CardDescription, { children: plan.body }) : null, _jsxs("p", { className: "mt-2 text-3xl font-semibold tracking-tight", children: [plan.price, plan.period ? (_jsx("span", { className: "text-muted-foreground text-sm font-normal", children: plan.period })) : null] })] }), _jsx(CardContent, { className: "flex flex-col gap-3", children: plan.features.map((feature, index) => (_jsxs("p", { className: "flex items-start gap-2 text-sm", children: [_jsx(Check, { className: "text-success mt-0.5 size-4 shrink-0" }), feature] }, index))) }), _jsx(CardFooter, { className: "mt-auto", children: _jsx(Button, { className: "w-full", variant: plan.featured ? 'default' : 'outline', children: plan.cta }) })] }, plan.name))) })] }));
+    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 lg:grid-cols-3", children: plans.map((plan) => (_jsxs(Card, { className: plan.featured ? 'border-primary shadow-md' : undefined, children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: plan.name }), plan.featured && plan.badge ? _jsx(Badge, { children: plan.badge }) : null] }), plan.body ? _jsx(CardDescription, { children: plan.body }) : null, _jsxs("p", { className: "mt-2 text-3xl font-semibold tracking-tight", children: [plan.price, plan.period ? (_jsx("span", { className: "text-muted-foreground text-sm font-normal", children: plan.period })) : null] })] }), _jsx(CardContent, { className: "flex flex-col gap-3", children: plan.features.map((feature, index) => (_jsxs("p", { className: "flex items-start gap-2 text-sm", children: [_jsx(Check, { className: "text-success mt-0.5 size-4 shrink-0" }), feature] }, index))) }), _jsx(CardFooter, { className: "mt-auto", children: _jsx(Button, { className: "w-full", variant: plan.featured ? 'default' : 'outline', children: plan.cta }) })] }, plan.name))) })] }));
 }
 export default Pricing01;

package/dist/blocks/process-rail-01/index.d.ts

@@ -0,0 +1,3 @@
+export { ProcessRail01, default } from './process-rail';
+export type { ProcessRail01Props, ProcessRail01Steps, ProcessStep } from './process-rail';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/process-rail-01/index.d.ts.map

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

package/dist/blocks/process-rail-01/index.js

@@ -0,0 +1 @@
+export { ProcessRail01, default } from './process-rail';

package/dist/blocks/process-rail-01/process-rail.d.ts

@@ -0,0 +1,99 @@
+import { type HeadingLevel } from '../../components/ui/section';
+/**
+ * One step of a process, as the rail draws it.
+ *
+ * `name` is the step's own name and `description` is one line about what happens
+ * there. Both are required: a rail is a sequence, and a step with no name is a
+ * divider and a step with no description is a label.
+ */
+export type ProcessStep = {
+    /** The name of the step, as a reader would name it in conversation. */
+    name: string;
+    /** One line about what happens at this step. */
+    description: string;
+};
+/**
+ * The number of steps a ProcessRail01 admits, as a type rather than as a runtime
+ * check.
+ *
+ * Four, and the refusal of five is the type's own work: `steps` is declared as a
+ * tuple, so a five-element array is not assignable to any arm of the union below
+ * and a four-element array is. There is no length check at render and no list
+ * that silently truncates, because a rail that quietly dropped its fifth step
+ * would be a process diagram that lied about the process.
+ *
+ * Four is the measured number, not a round one. Every NaniSoft site states a
+ * process as a rail, and every one of them states four stages: the collection
+ * line, the lakehouse path, the agent loop and the research path are four steps
+ * each, and each site drew its rail from a list of four. A fifth step is a
+ * different shape of thing and would be a second Block, taken to the open with
+ * the same evidence rather than smuggled in as a wider tuple.
+ */
+export type ProcessRail01Steps = readonly [ProcessStep, ProcessStep] | readonly [ProcessStep, ProcessStep, ProcessStep] | readonly [ProcessStep, ProcessStep, ProcessStep, ProcessStep];
+/**
+ * The props a ProcessRail01 takes.
+ *
+ * Every string and every number is a prop. The Block ships no step, no ordinal
+ * and no label for the end of the rail: a process rail that hardcoded a stage
+ * name would hand every consumer a diagram of somebody else's process.
+ */
+export type ProcessRail01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /** The section title. Omit it for a rail that is composed under its own heading. */
+    title?: string;
+    /** One or two sentences under the title. */
+    description?: string;
+    /**
+     * The label on the last step, for a rail that ends in a state worth naming:
+     * "serving", "merged", "verified". Omit it when the last step needs no label,
+     * which is the honest state for a rail that has not finished.
+     */
+    finalLabel?: string;
+    /**
+     * The steps, in the order the process runs. Two, three or four; a fifth is a
+     * type error. See `ProcessRail01Steps`.
+     */
+    steps: ProcessRail01Steps;
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+};
+/**
+ * A process drawn as a rail: the steps of a pipeline, in order, on one line.
+ *
+ * All four NaniSoft sites compose this section, and each one drew it by hand
+ * with the same three parts: an ordinal per step, a name, and one caption per
+ * step, separated by hairlines with a label on the last one. This is that
+ * section, once, with the ordinal and the separation owned here rather than by
+ * four sets of site CSS.
+ *
+ * **The rail admits four steps and refuses five, in the type.** `steps` is a
+ * tuple union rather than an array, so a fifth element is a compile error and
+ * not a fifth column. The reason is that a rail is a claim about a sequence, and
+ * a rail that quietly dropped a step to fit a width would be a diagram of a
+ * process that is not the process. Four is the number every one of the four
+ * sites actually states; a longer process is a different shape and earns its own
+ * Block.
+ *
+ * The ordinal is rendered here from the step's position, zero-padded to two
+ * digits, because a sequence is the one thing the Block knows that the caller
+ * cannot be asked to state twice. Nothing else is derived: a step's name and
+ * caption are the caller's words, and `finalLabel` is the caller's word for where
+ * the rail ends.
+ *
+ * The rail is a `Section` with the system container and padding, so a page built
+ * from this Block keeps the rhythm of the Blocks around it. The steps sit on one
+ * `grid-cols-N` row whose template is written from the tuple's own length, so a
+ * three-step rail has three tracks rather than four tracks with one empty, and
+ * the hairline between two steps sits on the track boundary rather than being
+ * drawn by each step.
+ *
+ * A caption of more than about twelve words wraps under a step and the row stops
+ * reading as a line, so the caption is a line and the detail belongs above the
+ * rail in `description`.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export declare function ProcessRail01({ eyebrow, title, description, finalLabel, steps, headingLevel, }: ProcessRail01Props): import("react").JSX.Element;
+export default ProcessRail01;
+//# sourceMappingURL=process-rail.d.ts.map

package/dist/blocks/process-rail-01/process-rail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-rail.d.ts","sourceRoot":"","sources":["../../../src/blocks/process-rail-01/process-rail.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGxF;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,uEAAuE;IACvE,IAAI,EAAE,MAAM,CAAA;IACZ,gDAAgD;IAChD,WAAW,EAAE,MAAM,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,kBAAkB,GAC1B,SAAS,CAAC,WAAW,EAAE,WAAW,CAAC,GACnC,SAAS,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC,GAChD,SAAS,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC,CAAA;AAkBjE;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,KAAK,EAAE,kBAAkB,CAAA;IACzB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAK,EACL,YAAmB,GACpB,EAAE,kBAAkB,+BAuCpB;AAED,eAAe,aAAa,CAAA"}

package/dist/blocks/process-rail-01/process-rail.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Section, SectionHeading } from '../../components/ui/section';
+import { cn } from '../../lib/utils';
+/**
+ * The grid tracks each admissible length gets, keyed on the tuple's own length.
+ *
+ * Written as Tailwind classes rather than as an inline `gridTemplateColumns`,
+ * because an inline template is a layout value in the markup where every other
+ * layout value in this package is a class, and because a class is compiled into
+ * the stylesheet while an inline style is recomputed per render. Each length is
+ * spelled out, so a two-step rail has two tracks and a four-step rail has four,
+ * and neither has an empty track at the end of the row.
+ */
+const TRACKS = {
+    2: 'sm:grid-cols-2',
+    3: 'sm:grid-cols-3',
+    4: 'sm:grid-cols-2 lg:grid-cols-4',
+};
+/**
+ * A process drawn as a rail: the steps of a pipeline, in order, on one line.
+ *
+ * All four NaniSoft sites compose this section, and each one drew it by hand
+ * with the same three parts: an ordinal per step, a name, and one caption per
+ * step, separated by hairlines with a label on the last one. This is that
+ * section, once, with the ordinal and the separation owned here rather than by
+ * four sets of site CSS.
+ *
+ * **The rail admits four steps and refuses five, in the type.** `steps` is a
+ * tuple union rather than an array, so a fifth element is a compile error and
+ * not a fifth column. The reason is that a rail is a claim about a sequence, and
+ * a rail that quietly dropped a step to fit a width would be a diagram of a
+ * process that is not the process. Four is the number every one of the four
+ * sites actually states; a longer process is a different shape and earns its own
+ * Block.
+ *
+ * The ordinal is rendered here from the step's position, zero-padded to two
+ * digits, because a sequence is the one thing the Block knows that the caller
+ * cannot be asked to state twice. Nothing else is derived: a step's name and
+ * caption are the caller's words, and `finalLabel` is the caller's word for where
+ * the rail ends.
+ *
+ * The rail is a `Section` with the system container and padding, so a page built
+ * from this Block keeps the rhythm of the Blocks around it. The steps sit on one
+ * `grid-cols-N` row whose template is written from the tuple's own length, so a
+ * three-step rail has three tracks rather than four tracks with one empty, and
+ * the hairline between two steps sits on the track boundary rather than being
+ * drawn by each step.
+ *
+ * A caption of more than about twelve words wraps under a step and the row stops
+ * reading as a line, so the caption is a line and the detail belongs above the
+ * rail in `description`.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export function ProcessRail01({ eyebrow, title, description, finalLabel, steps, headingLevel = 'h2', }) {
+    return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("ol", { "data-slot": "process-rail", className: cn('grid gap-6 sm:gap-px', TRACKS[steps.length]), children: steps.map((step, index) => (_jsxs("li", { "data-slot": "process-step", className: "border-border flex flex-col gap-2 border-t pt-4", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("span", { className: "text-muted-foreground font-mono text-xs", children: String(index + 1).padStart(2, '0') }), finalLabel && index === steps.length - 1 ? (_jsx("span", { className: "text-muted-foreground font-mono text-xs", children: finalLabel })) : null] }), _jsx("span", { className: "text-sm font-semibold", children: step.name }), _jsx("span", { className: "text-muted-foreground text-pretty text-sm", children: step.description })] }, step.name))) })] }));
+}
+export default ProcessRail01;

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

@@ -0,0 +1,3 @@
+export { ProductGrid01, default } from './product-grid';
+export type { ProductGrid01Props, ProductGrid01Product } from './product-grid';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/product-grid-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/product-grid-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACvD,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA"}

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

@@ -0,0 +1 @@
+export { ProductGrid01, default } from './product-grid';

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

@@ -0,0 +1,114 @@
+import { type ProductMarkProps } from '../../components/ui/product-mark';
+import { type HeadingLevel } from '../../components/ui/section';
+/**
+ * One product in the grid, as the row draws it.
+ *
+ * The three facts the mark is drawn from, the one line under the name, and where
+ * the row goes. The mark is `ProductMark`, so a product's two-part identity is
+ * the same two colours here as it is in a switcher and on a page header.
+ */
+export type ProductGrid01Product = {
+    /**
+     * The product's key within the set. Carried on the markup as `data-product`
+     * through `ProductMark`, so a test can name one product rather than the first
+     * one, and two products in one document are individually addressable.
+     */
+    id: string;
+    /**
+     * The product's own name, which is the second part of its mark. It is the
+     * anchor of the row and the first thing a reader reads.
+     */
+    name: string;
+    /**
+     * The product's pack, which is the hue of the mark's core. Omit it, or pass
+     * `null`, for the one member of a set that has no pack of its own: that member
+     * wears the full spectrum rather than a colourless mark.
+     */
+    pack?: ProductMarkProps['pack'];
+    /** One line about what the product is. */
+    tagline: string;
+    /**
+     * Where the row goes. Rendered as a native anchor's `href`, so the row is a
+     * link with the browser's own affordances rather than a click handler.
+     */
+    href: string;
+    /**
+     * Opens the destination in a new browsing context, which defaults the link
+     * relationship to `noopener noreferrer`. Prism does not decide what counts as
+     * external, so the caller declares it.
+     */
+    newTab?: boolean;
+};
+/**
+ * The props a ProductGrid01 takes.
+ *
+ * Every string is a prop and the Block ships none. There is no product list in
+ * this package, no default tagline and no "built on" heading: the set of products
+ * a page lists is the page's own fact, and Prism ships the row rather than the
+ * roster.
+ */
+export type ProductGrid01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /** The section title. Omit it for a grid composed under its own heading. */
+    title?: string;
+    /** One or two sentences under the title. */
+    description?: string;
+    /**
+     * The products, in the order a reader should meet them. Order is the caller's
+     * because it is a claim about which product matters first.
+     */
+    products: readonly ProductGrid01Product[];
+    /**
+     * The line under the grid, for the sentence that qualifies it: what the set
+     * does not include, or where to read more.
+     */
+    caption?: string;
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+};
+/**
+ * A set of products as a stack of hairline rows: a two-part mark, a name, one
+ * tagline and a destination per row.
+ *
+ * All four NaniSoft sites publish this section, and each one drew it by hand with
+ * the same three parts in the same order: a colour mark for the product, the
+ * product's name, and one line about what it is, on a hairline row with the whole
+ * row a link. Each site also resolved the mark's ink in JavaScript from the live
+ * mode, which is the part that is a second source of truth: four copies of the
+ * rule that a pastel is a fill and the name is an ink, and four copies of the
+ * arithmetic that a filled dot fails contrast on a light card.
+ *
+ * **The mark is two parts, and it is `ProductMark`.** The ring is `brand-ink` and
+ * the core is the product's own `primary`, with the name in the brand ink beside
+ * it. That split is the contested shape this Block ships, and it is settled by a
+ * measurement rather than by taste: a pastel brand value is a fill and never text,
+ * so the core may be `primary` and the name may not, and a *filled* mark on a
+ * light card measures under the threshold a mark has to clear, so the mark is a
+ * hairline ring around the fill rather than a disc of it. A product row that drew
+ * a single filled dot with the name in the same value would be wrong in both
+ * directions at once, and nothing in the rendered result would say which.
+ *
+ * The pack is carried through `ProductMark` rather than set here, so the mark's
+ * own `data-pack` boundary lands on the mark and the product's hue follows from
+ * the pack the caller passed rather than from whichever pack the page is wearing.
+ * That is the half of the pack-boundary law a hand-written mark gets wrong: it
+ * resolves a colour once, at mount, from one element's computed style, and it
+ * keeps showing the old pack's values when a boundary lands above it.
+ *
+ * The row is a link, not a click handler. The whole row is an `a` with the
+ * product's `href`, so a status bar shows the destination, a context menu copies
+ * it, and middle-click opens it in a new tab. The mark is `aria-hidden` inside
+ * it, so the link is announced once, by name, rather than as a shape and a word.
+ *
+ * A row carries one line of tagline. A second line is a second paragraph and
+ * belongs above the grid in `description`, where it applies to the set rather
+ * than to one member of it.
+ *
+ * It is a server Component: no hook, no state, no client code and no mode. The
+ * mark resolves its colour through the cascade, so a page that renders this in a
+ * server file needs nothing from the provider mounted.
+ */
+export declare function ProductGrid01({ eyebrow, title, description, products, caption, headingLevel, }: ProductGrid01Props): import("react").JSX.Element | null;
+export default ProductGrid01;
+//# sourceMappingURL=product-grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-grid.d.ts","sourceRoot":"","sources":["../../../src/blocks/product-grid-01/product-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AACrF,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAExF;;;;;;GAMG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/B,0CAA0C;IAC1C,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,oBAAoB,EAAE,CAAA;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,YAAmB,GACpB,EAAE,kBAAkB,sCAqCpB;AAED,eAAe,aAAa,CAAA"}

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ProductMark } from '../../components/ui/product-mark';
+import { Section, SectionHeading } from '../../components/ui/section';
+/**
+ * A set of products as a stack of hairline rows: a two-part mark, a name, one
+ * tagline and a destination per row.
+ *
+ * All four NaniSoft sites publish this section, and each one drew it by hand with
+ * the same three parts in the same order: a colour mark for the product, the
+ * product's name, and one line about what it is, on a hairline row with the whole
+ * row a link. Each site also resolved the mark's ink in JavaScript from the live
+ * mode, which is the part that is a second source of truth: four copies of the
+ * rule that a pastel is a fill and the name is an ink, and four copies of the
+ * arithmetic that a filled dot fails contrast on a light card.
+ *
+ * **The mark is two parts, and it is `ProductMark`.** The ring is `brand-ink` and
+ * the core is the product's own `primary`, with the name in the brand ink beside
+ * it. That split is the contested shape this Block ships, and it is settled by a
+ * measurement rather than by taste: a pastel brand value is a fill and never text,
+ * so the core may be `primary` and the name may not, and a *filled* mark on a
+ * light card measures under the threshold a mark has to clear, so the mark is a
+ * hairline ring around the fill rather than a disc of it. A product row that drew
+ * a single filled dot with the name in the same value would be wrong in both
+ * directions at once, and nothing in the rendered result would say which.
+ *
+ * The pack is carried through `ProductMark` rather than set here, so the mark's
+ * own `data-pack` boundary lands on the mark and the product's hue follows from
+ * the pack the caller passed rather than from whichever pack the page is wearing.
+ * That is the half of the pack-boundary law a hand-written mark gets wrong: it
+ * resolves a colour once, at mount, from one element's computed style, and it
+ * keeps showing the old pack's values when a boundary lands above it.
+ *
+ * The row is a link, not a click handler. The whole row is an `a` with the
+ * product's `href`, so a status bar shows the destination, a context menu copies
+ * it, and middle-click opens it in a new tab. The mark is `aria-hidden` inside
+ * it, so the link is announced once, by name, rather than as a shape and a word.
+ *
+ * A row carries one line of tagline. A second line is a second paragraph and
+ * belongs above the grid in `description`, where it applies to the set rather
+ * than to one member of it.
+ *
+ * It is a server Component: no hook, no state, no client code and no mode. The
+ * mark resolves its colour through the cascade, so a page that renders this in a
+ * server file needs nothing from the provider mounted.
+ */
+export function ProductGrid01({ eyebrow, title, description, products, caption, headingLevel = 'h2', }) {
+    if (products.length === 0)
+        return null;
+    return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("ul", { "data-slot": "product-grid", className: "flex flex-col", children: products.map((product) => (_jsx("li", { "data-slot": "product-grid-row", className: "border-b first:border-t", children: _jsxs("a", { href: product.href, rel: product.newTab ? 'noopener noreferrer' : undefined, target: product.newTab ? '_blank' : undefined, className: "hover:bg-accent/50 focus-visible:ring-ring flex flex-col gap-1 px-2 py-4 transition-colors duration-fast ease-out sm:flex-row sm:items-baseline sm:gap-6 focus-visible:ring-[3px] focus-visible:outline-none", children: [_jsx("span", { className: "flex shrink-0 items-center sm:w-64", children: _jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, size: "md" }) }), _jsx("span", { className: "text-muted-foreground text-pretty text-sm", children: product.tagline })] }) }, product.id))) }), caption ? _jsx("p", { className: "text-muted-foreground mt-6 text-pretty text-sm", children: caption }) : null] }));
+}
+export default ProductGrid01;