@nanisoft/prism-ui 0.5.0 → 0.6.0

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/page-header-01/index.d.ts

@@ -0,0 +1,3 @@
+export { PageHeader01, default } from './page-header';
+export type { PageHeader01Props, PageHeaderAction, PageHeaderCrumb } from './page-header';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/page-header-01/index.d.ts.map

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

package/dist/blocks/page-header-01/index.js

@@ -0,0 +1 @@
+export { PageHeader01, default } from './page-header';

package/dist/blocks/page-header-01/page-header.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import { type HeadingElement } from '../../components/ui/typography';
+export type PageHeaderCrumb = {
+    label: ReactNode;
+    /** Renders a native anchor. Omit on the current, final step. */
+    href?: string;
+};
+export type PageHeaderAction = {
+    label: string;
+    variant?: 'default' | 'outline' | 'secondary' | 'ghost';
+    size?: 'default' | 'sm' | 'lg';
+};
+export type PageHeader01Props = {
+    /**
+     * The trail above the title. The final item always renders as the current
+     * page, whether or not it carries an `href`.
+     */
+    breadcrumbs?: PageHeaderCrumb[];
+    /** The page title. */
+    title: ReactNode;
+    /** One supporting line under the title. */
+    description?: ReactNode;
+    /**
+     * Declarative actions rendered as Prism Buttons. Use `actionsSlot` for a
+     * control that needs its own behaviour, such as a router link or a menu.
+     */
+    actions?: PageHeaderAction[];
+    /** A slot for consumer-provided controls on the action row. */
+    actionsSlot?: ReactNode;
+    /**
+     * The heading element for the title. Defaults to `h2` because a block is
+     * composed; a page whose own document outline this header opens passes
+     * `h1`. See `HeadingElement`.
+     */
+    headingLevel?: HeadingElement;
+};
+/**
+ * A page title band.
+ *
+ * It places a breadcrumb trail and a row of actions above the title, then a
+ * rule below the header. The trail is passed in as props and renders native
+ * anchors, so the consumer owns navigation and can substitute their own
+ * router by passing `actionsSlot` and breadcrumb labels. Every string and
+ * every step is a prop; the block ships none of its own.
+ */
+export declare function PageHeader01({ breadcrumbs, title, description, actions, actionsSlot, headingLevel, }: PageHeader01Props): import("react").JSX.Element;
+export default PageHeader01;
+//# sourceMappingURL=page-header.d.ts.map

package/dist/blocks/page-header-01/page-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/blocks/page-header-01/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAYhD,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAEnF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,SAAS,CAAA;IAChB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;IACvD,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAA;IAC/B,sBAAsB;IACtB,KAAK,EAAE,SAAS,CAAA;IAChB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,+DAA+D;IAC/D,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,cAAc,CAAA;CAC9B,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,KAAK,EACL,WAAW,EACX,OAAY,EACZ,WAAW,EACX,YAAmB,GACpB,EAAE,iBAAiB,+BAiEnB;AAED,eAAe,YAAY,CAAA"}

package/dist/blocks/page-header-01/page-header.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '../../components/ui/breadcrumb';
+import { Button } from '../../components/ui/button';
+import { Separator } from '../../components/ui/separator';
+import { Heading, Text } from '../../components/ui/typography';
+/**
+ * A page title band.
+ *
+ * It places a breadcrumb trail and a row of actions above the title, then a
+ * rule below the header. The trail is passed in as props and renders native
+ * anchors, so the consumer owns navigation and can substitute their own
+ * router by passing `actionsSlot` and breadcrumb labels. Every string and
+ * every step is a prop; the block ships none of its own.
+ */
+export function PageHeader01({ breadcrumbs, title, description, actions = [], actionsSlot, headingLevel = 'h2', }) {
+    const hasTrail = Boolean(breadcrumbs?.length);
+    const hasActions = actions.length > 0 || Boolean(actionsSlot);
+    return (_jsxs("header", { className: "flex flex-col gap-4", children: [hasTrail || hasActions ? (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [hasTrail ? (_jsx(Breadcrumb, { children: _jsx(BreadcrumbList, { children: breadcrumbs?.map((crumb, index) => {
+                                const last = index === breadcrumbs.length - 1;
+                                return (
+                                // Positional, for the same reason as the other blocks: the
+                                // label is display content and two steps may share one.
+                                _jsxs(Fragment, { children: [index > 0 ? _jsx(BreadcrumbSeparator, {}) : null, _jsx(BreadcrumbItem, { children: last || !crumb.href ? (_jsx(BreadcrumbPage, { children: crumb.label })) : (_jsx(BreadcrumbLink, { href: crumb.href, children: crumb.label })) })] }, index));
+                            }) }) })) : (_jsx("span", {})), hasActions ? (_jsxs("div", { className: "flex items-center gap-2", children: [actionsSlot, actions.map((action, index) => (_jsx(Button, { variant: action.variant ?? (index === 0 ? 'default' : 'outline'), size: action.size, children: action.label }, index)))] })) : null] })) : null, _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Heading, { as: headingLevel, size: "3xl", children: title }), description ? (_jsx(Text, { size: "lg", tone: "muted", children: description })) : null] }), _jsx(Separator, {})] }));
+}
+export default PageHeader01;

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

@@ -0,0 +1,2 @@
+export { Pricing01, default } from './pricing';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1 @@
+export { Pricing01, default } from './pricing';

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

@@ -0,0 +1,35 @@
+import { type HeadingLevel } from '../../components/ui/section';
+export type Plan = {
+    name: string;
+    price: string;
+    /** Rendered after the price, e.g. " / month". Omit for a one-off figure. */
+    period?: string;
+    body?: string;
+    features: string[];
+    cta: string;
+    /** Lifts the plan with a primary border and a filled button. */
+    featured?: boolean;
+    /** Overrides the "Popular" badge on the featured plan. */
+    badge?: string;
+};
+export type Pricing01Props = {
+    eyebrow?: string;
+    title?: string;
+    description?: string;
+    plans: Plan[];
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+};
+/**
+ * A three-up plan comparison.
+ *
+ * Every plan is a prop, including the price and the call to action. It previously
+ * hardcoded "$0 / $24 / $68", "Talk to us", "MIT licence" and "Figma library",
+ * and shipped a heading reading "Pricing" above a title already reading "Pick a
+ * plan". A shared library has no plans to sell, so those strings described a
+ * business that does not exist here, and every consumer who installed the block
+ * inherited them.
+ */
+export declare function Pricing01({ eyebrow, title, description, plans, headingLevel, }: Pricing01Props): import("react").JSX.Element;
+export default Pricing01;
+//# sourceMappingURL=pricing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pricing.d.ts","sourceRoot":"","sources":["../../../src/blocks/pricing-01/pricing.tsx"],"names":[],"mappings":"AAYA,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAExF,MAAM,MAAM,IAAI,GAAG;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,IAAI,EAAE,CAAA;IACb,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,KAAK,EACL,WAAW,EACX,KAAK,EACL,YAAmB,GACpB,EAAE,cAAc,+BAkEhB;AAED,eAAe,SAAS,CAAA"}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/ui/card';
+import { Section, SectionHeading } from '../../components/ui/section';
+/**
+ * A three-up plan comparison.
+ *
+ * Every plan is a prop, including the price and the call to action. It previously
+ * hardcoded "$0 / $24 / $68", "Talk to us", "MIT licence" and "Figma library",
+ * and shipped a heading reading "Pricing" above a title already reading "Pick a
+ * plan". A shared library has no plans to sell, so those strings described a
+ * business that does not exist here, and every consumer who installed the block
+ * 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 && 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"}