@nadicodeai/ui 0.10.2 → 0.11.0

package/dist/components/pricing-card.js

@@ -1,35 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 /**
- * pricing-card — the brand pricing/package tier molecule (replaces the retired
- * `.nc-pricing-card` / `.nc-pricing-card-featured` CSS).
+ * pricing-card — the brand pricing/package tier molecule (V5 rework).
  *
- * A seam-free canvas fill: it drops into the holding `Pricing` grid, which owns
- * every hairline divider through its gap-as-seam (`gap-px bg-border`). The card
- * therefore draws NO border and has square corners so the grid line never shows
- * through a rounded edge — matching the retired stat-block / quote-card / logo-tile
- * convention. `variant="featured"` flips the surface onto the ink/primary role; the
- * red featured RAIL is NOT drawn here — it is a single-owner inset rail owned by the
- * `Pricing` section (`emphasis="featured"`), so this molecule only carries the
- * surface inversion and never double-draws a seam.
+ * A seam-free fill: it drops into the holding `Pricing` grid, which owns every
+ * hairline divider through its gap-as-seam (`gap-px bg-border`). The card draws NO
+ * border and has square corners so the grid line never shows through a rounded
+ * edge. It is a full-height flex column so `PricingCardCta` (`mt-auto`) pins to the
+ * bottom and aligns across tiers.
  *
- * Server-renderable (no client boundary): the featured polarity flip is applied by
- * the parent card to its descendants via `data-slot` descendant selectors — the
- * same cascade model the retired CSS used (`.nc-pricing-card-featured .nc-…`), so
- * sub-components carry only their default (canvas) tone and the parent re-tints them
- * when featured. Token-only; no `dark:` styling.
+ * `variant="featured"` (V5) reads as featured through a SOFT canvas surface — a
+ * quiet fill change, not an ink/primary polarity flip and not an inset rail. The
+ * body/eyebrow/feature tones are identical to the default card; only the surface
+ * differs. Server-renderable; token-only; no `dark:` styling.
  */
 function PricingCard({ className, variant = "default", ...props }) {
-    return (_jsx("div", { "data-slot": "pricing-card", "data-variant": variant, className: cn("grid content-start gap-[18px] p-8", variant === "default" && "bg-card text-card-foreground", 
-        // featured: ink surface + re-tint every descendant slot in one place.
-        variant === "featured" && [
-            "bg-primary text-primary-foreground",
-            "[&_[data-slot=pricing-card-eyebrow]]:text-primary-foreground/65",
-            "[&_[data-slot=pricing-card-period]]:text-primary-foreground/65",
-            "[&_[data-slot=pricing-card-note]]:text-primary-foreground/80",
-            "[&_[data-slot=pricing-card-feature]]:text-primary-foreground/80",
-            "[&_[data-slot=pricing-card-feature-mark]]:text-primary-foreground",
-        ], className), ...props }));
+    return (_jsx("div", { "data-slot": "pricing-card", "data-variant": variant, className: cn("flex h-full flex-col gap-[18px] p-8 text-card-foreground", variant === "default" && "bg-card", 
+        // featured (V5): soft canvas surface — a quiet fill change only. The
+        // `muted` role (== canvas-soft) flips with any `.dark` ancestor.
+        variant === "featured" && "bg-muted", className), ...props }));
 }
 function PricingCardEyebrow({ className, ...props }) {
     return (_jsx("p", { "data-slot": "pricing-card-eyebrow", className: cn("font-mono text-xs font-medium uppercase text-muted-foreground", className), ...props }));
@@ -38,18 +27,18 @@ function PricingCardName({ className, ...props }) {
     return (_jsx("div", { "data-slot": "pricing-card-name", className: cn("text-2xl font-semibold", className), ...props }));
 }
 function PricingCardPrice({ className, children, amount, period, ...props }) {
-    return (_jsxs("div", { "data-slot": "pricing-card-price", className: cn("flex items-baseline gap-1.5", className), ...props, children: [_jsx("span", { className: "text-[40px] leading-none font-semibold", children: amount }), period ? (_jsx("span", { "data-slot": "pricing-card-period", className: "font-mono text-xs uppercase text-muted-foreground", children: period })) : null, children] }));
+    return (_jsxs("div", { "data-slot": "pricing-card-price", className: cn("flex items-baseline gap-1.5", className), ...props, children: [_jsx("span", { className: "text-[40px] leading-none font-semibold tabular-nums", children: amount }), period ? (_jsx("span", { "data-slot": "pricing-card-period", className: "font-mono text-xs uppercase text-muted-foreground", children: period })) : null, children] }));
 }
 function PricingCardNote({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "pricing-card-note", className: cn("m-0 text-sm text-[var(--nc-body)]", className), ...props }));
+    return (_jsx("p", { "data-slot": "pricing-card-note", className: cn("m-0 text-sm text-muted-foreground", className), ...props }));
 }
 function PricingCardFeatures({ className, ...props }) {
     return (_jsx("ul", { "data-slot": "pricing-card-features", className: cn("m-0 grid list-none gap-2.5 p-0", className), ...props }));
 }
 function PricingCardFeature({ className, children, ...props }) {
-    return (_jsxs("li", { "data-slot": "pricing-card-feature", className: cn("grid grid-cols-[auto_minmax(0,1fr)] items-start gap-2.5 text-sm text-[var(--nc-body)]", className), ...props, children: [_jsx("span", { "data-slot": "pricing-card-feature-mark", "aria-hidden": "true", className: "font-mono text-sm leading-5 text-[var(--nc-link)]", children: "+" }), _jsx("span", { children: children })] }));
+    return (_jsxs("li", { "data-slot": "pricing-card-feature", className: cn("grid grid-cols-[auto_minmax(0,1fr)] items-start gap-2.5 text-sm text-muted-foreground", className), ...props, children: [_jsx("span", { "data-slot": "pricing-card-feature-mark", "aria-hidden": "true", className: "mt-[3px] size-2.5 rounded-[1px] border border-primary bg-[var(--nc-link-bg-soft)]" }), _jsx("span", { children: children })] }));
 }
 function PricingCardCta({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "pricing-card-cta", className: cn("mt-1.5 [&>*]:w-full", className), ...props }));
+    return (_jsx("div", { "data-slot": "pricing-card-cta", className: cn("mt-auto pt-1.5 [&>*]:w-full", className), ...props }));
 }
 export { PricingCard, PricingCardEyebrow, PricingCardName, PricingCardPrice, PricingCardNote, PricingCardFeatures, PricingCardFeature, PricingCardCta, };

package/dist/components/pricing.d.ts

@@ -1,26 +1,23 @@
 import * as React from "react";
 /**
- * pricing — package/tier comparison row (replaces the retired `sections/pricing.css`
- * + its coupled `pricing-card` / `pricing-card-featured` molecules).
+ * pricing — package/tier comparison row (V5 rework).
  *
- * SINGLE-OWNER SEAM (preserved from the retired CSS, do not double-draw):
- *  - The DIVIDERS between tiers are owned once by the grid: `gap-px bg-border`
- *    paints the brand `line` behind the cards and leaves a 1px guide gap, exactly
- *    the retired `nc-row-grid[data-edges="inner"]` gap-as-seam. Each `PricingCard`
- *    is borderless and square-cornered, so it never repeats that coordinate.
- *  - The FEATURED RAIL (`emphasis="featured"`) is a 3px `flag-red` bar pinned to
- *    the leading inside edge of the featured card via an absolutely-positioned
- *    span — the retired inset-rail model (painted INSIDE the card padding, NOT a
- *    border), so it never stacks onto the grid gap-seam. The card establishes the
- *    positioning context (`relative`). The featured card's polarity flip lives in
- *    the `PricingCard variant="featured"` molecule, not here.
+ * SINGLE-OWNER SEAM: the DIVIDERS between tiers are owned once by the grid —
+ * `SeamGrid` (no surface) paints the brand `line` behind the cards and leaves a
+ * 1px guide gap (`gap-px bg-border`). Each `PricingCard` is borderless and
+ * square-cornered, so it never repeats that coordinate.
+ *
+ * FEATURED TIER (V5): the featured (middle) column reads as featured through a
+ * SOFT canvas surface, owned by `PricingCard variant="featured"` — there is no
+ * inset rail or polarity flip in this rework. `emphasis` is kept for API
+ * compatibility and surfaces as `data-emphasis`; it draws nothing here.
  *
  * The frame/lane/row geometry (perimeter + top/bottom seams) is owned by the kept
  * structural-geometry layer the page composes this inside; `Pricing` owns no frame
  * math, no marker, and no perimeter line. Token-only; no `dark:` styling.
  */
 type PricingEmphasis = "none" | "featured";
-declare function Pricing({ className, columns, emphasis, children, ...props }: React.ComponentProps<"div"> & {
+declare function Pricing({ className, columns, emphasis, ...props }: React.ComponentProps<"div"> & {
     columns?: 2 | 3;
     emphasis?: PricingEmphasis;
 }): React.JSX.Element;

package/dist/components/pricing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pricing.d.ts","sourceRoot":"","sources":["../../src/components/pricing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,KAAK,eAAe,GAAG,MAAM,GAAG,UAAU,CAAC;AAE3C,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,OAAW,EACX,QAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B,qBAwCA;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"pricing.d.ts","sourceRoot":"","sources":["../../src/components/pricing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;GAgBG;AAEH,KAAK,eAAe,GAAG,MAAM,GAAG,UAAU,CAAC;AAE3C,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,OAAW,EACX,QAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B,qBAgBA;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/pricing.js

@@ -1,21 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { SeamGrid } from "./seam-grid.js";
-function Pricing({ className, columns = 3, emphasis = "none", children, ...props }) {
+function Pricing({ className, columns = 3, emphasis = "none", ...props }) {
     return (_jsx(SeamGrid, { "data-slot": "pricing", "data-emphasis": emphasis, className: cn(
         // gap-as-seam: SeamGrid (no surface) is the single owner of every divider
-        // between tiers (`gap-px bg-border`).
-        "h-full", columns === 2 ? "grid-cols-1 sm:grid-cols-2" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", 
-        // the featured card is the rail's positioning context and gets the rail span.
-        emphasis === "featured" && "[&_[data-variant=featured]]:relative", className), ...props, children: emphasis === "featured"
-            ? React.Children.map(children, (child) => {
-                if (React.isValidElement(child) &&
-                    child.props.variant === "featured") {
-                    return React.cloneElement(child, undefined, _jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0 start-0 w-[3px] bg-[var(--nc-flag-red)]" }), child.props.children] }));
-                }
-                return child;
-            })
-            : children }));
+        // between tiers (`gap-px bg-border`). Cards stretch to equal height so the
+        // bottom-pinned CTA aligns across columns.
+        "h-full items-stretch", columns === 2 ? "grid-cols-1 sm:grid-cols-2" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", className), ...props }));
 }
 export { Pricing };

package/dist/components/quote-card.d.ts

@@ -15,9 +15,17 @@ import * as React from "react";
 declare function QuoteCard({ className, surface, ...props }: React.ComponentProps<"figure"> & {
     surface?: "canvas" | "ink";
 }): React.JSX.Element;
-declare function QuoteCardBody({ className, ...props }: React.ComponentProps<"blockquote">): React.JSX.Element;
+declare function QuoteCardBody({ className, size, ...props }: React.ComponentProps<"blockquote"> & {
+    size?: "md" | "lg";
+}): React.JSX.Element;
+/**
+ * QuoteCardAvatar — the tint circle (an initial) that opens the attribution row.
+ * A verde-tint chip: soft `success` field, `--nc-link` (verde) glyph. Decorative
+ * (`aria-hidden`), so the attribution name/role carry the accessible identity.
+ */
+declare function QuoteCardAvatar({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 declare function QuoteCardAttribution({ className, ...props }: React.ComponentProps<"figcaption">): React.JSX.Element;
 declare function QuoteCardName({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function QuoteCardRole({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { QuoteCard, QuoteCardBody, QuoteCardAttribution, QuoteCardName, QuoteCardRole };
+export { QuoteCard, QuoteCardBody, QuoteCardAvatar, QuoteCardAttribution, QuoteCardName, QuoteCardRole, };
 //# sourceMappingURL=quote-card.d.ts.map

package/dist/components/quote-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quote-card.d.ts","sourceRoot":"","sources":["../../src/components/quote-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;GAYG;AAEH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CAAE,qBAmBjE;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,qBAQjF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,qBAQxF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,oBAAoB,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"quote-card.d.ts","sourceRoot":"","sources":["../../src/components/quote-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;GAYG;AAEH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CAAE,qBAmBjE;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CAAE,qBAiB7D;AAED;;;;GAIG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAY7E;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,qBAQxF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,OAAO,EACL,SAAS,EACT,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,aAAa,EACb,aAAa,GACd,CAAC"}

package/dist/components/quote-card.js

@@ -21,8 +21,20 @@ function QuoteCard({ className, surface = "canvas", ...props }) {
             "[&_[data-slot=quote-card-role]]:text-[color-mix(in_srgb,var(--nc-canvas)_60%,var(--nc-muted))]",
         ], className), ...props }));
 }
-function QuoteCardBody({ className, ...props }) {
-    return (_jsx("blockquote", { "data-slot": "quote-card-body", className: cn("m-0 text-lg leading-[1.5] font-normal text-foreground", className), ...props }));
+function QuoteCardBody({ className, size = "md", ...props }) {
+    return (_jsx("blockquote", { "data-slot": "quote-card-body", "data-size": size, className: cn("m-0 font-normal text-foreground", 
+        // md: the default measure. lg: the featured "big quote" (V5 B13) — a tighter
+        // measure and a display-scale clamp for the single testimonial slot.
+        size === "md" && "text-lg leading-[1.5]", size === "lg" &&
+            "max-w-[26ch] text-[clamp(24px,2.4vw,34px)] leading-[1.2] font-semibold tracking-[-0.02em]", className), ...props }));
+}
+/**
+ * QuoteCardAvatar — the tint circle (an initial) that opens the attribution row.
+ * A verde-tint chip: soft `success` field, `--nc-link` (verde) glyph. Decorative
+ * (`aria-hidden`), so the attribution name/role carry the accessible identity.
+ */
+function QuoteCardAvatar({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "quote-card-avatar", "aria-hidden": "true", className: cn("flex size-11 shrink-0 items-center justify-center rounded-full bg-success/15 text-base font-semibold text-[var(--nc-link)]", className), ...props }));
 }
 function QuoteCardAttribution({ className, ...props }) {
     return (_jsx("figcaption", { "data-slot": "quote-card-attribution", className: cn("flex items-center gap-3", className), ...props }));
@@ -33,4 +45,4 @@ function QuoteCardName({ className, ...props }) {
 function QuoteCardRole({ className, ...props }) {
     return (_jsx("div", { "data-slot": "quote-card-role", className: cn("font-mono text-xs uppercase text-muted-foreground", className), ...props }));
 }
-export { QuoteCard, QuoteCardBody, QuoteCardAttribution, QuoteCardName, QuoteCardRole };
+export { QuoteCard, QuoteCardBody, QuoteCardAvatar, QuoteCardAttribution, QuoteCardName, QuoteCardRole, };

package/dist/components/security-grid.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+/**
+ * security-grid — the always-dark control/data grid (V5 B14).
+ *
+ * A bordered 4-cell grid on the night surface: each cell carries a bordered
+ * glyph box (icon slot), a title, and a body line. The dividers are owned once
+ * by `SeamGrid` (gap-as-seam, `bg-border`); cells are borderless fills.
+ *
+ * ALWAYS-DARK: this section renders dark regardless of the page theme. Rather
+ * than a `dark:` utility (forbidden) it sets the `dark` ancestor class on its
+ * own root, so every semantic role it composes (`bg-border` seam, `bg-card`
+ * fill, `text-foreground`, `text-muted-foreground`, `text-primary`) resolves to
+ * its dark value. Only the standard shadcn role vars are used. Token-only.
+ */
+declare const columnClasses: Record<number, string>;
+declare function SecurityGrid({ className, columns, ...props }: React.ComponentProps<"div"> & {
+    columns?: keyof typeof columnClasses;
+}): React.JSX.Element;
+declare function SecurityCell({ className, icon, title, body, ...props }: React.ComponentProps<"div"> & {
+    icon?: React.ReactNode;
+    title: string;
+    body: string;
+}): React.JSX.Element;
+export { SecurityGrid, SecurityCell };
+//# sourceMappingURL=security-grid.d.ts.map

package/dist/components/security-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"security-grid.d.ts","sourceRoot":"","sources":["../../src/components/security-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;GAYG;AAEH,QAAA,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAIzC,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,OAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAA;CAAE,qBAUxE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,qBAsBA;AAED,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/security-grid.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { SeamGrid } from "./seam-grid.js";
+/**
+ * security-grid — the always-dark control/data grid (V5 B14).
+ *
+ * A bordered 4-cell grid on the night surface: each cell carries a bordered
+ * glyph box (icon slot), a title, and a body line. The dividers are owned once
+ * by `SeamGrid` (gap-as-seam, `bg-border`); cells are borderless fills.
+ *
+ * ALWAYS-DARK: this section renders dark regardless of the page theme. Rather
+ * than a `dark:` utility (forbidden) it sets the `dark` ancestor class on its
+ * own root, so every semantic role it composes (`bg-border` seam, `bg-card`
+ * fill, `text-foreground`, `text-muted-foreground`, `text-primary`) resolves to
+ * its dark value. Only the standard shadcn role vars are used. Token-only.
+ */
+const columnClasses = {
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-3",
+    4: "grid-cols-2 lg:grid-cols-4",
+};
+function SecurityGrid({ className, columns = 4, ...props }) {
+    return (
+    // `dark` on the root flips every role below to its night value; SeamGrid
+    // keeps sole ownership of the seams (its `bg-border` resolves dark here).
+    _jsx(SeamGrid, { "data-slot": "security-grid", className: cn("dark", columnClasses[columns], className), ...props }));
+}
+function SecurityCell({ className, icon, title, body, ...props }) {
+    return (_jsxs("div", { "data-slot": "security-cell", className: cn("nc-panel-cell content-start bg-card", className), ...props, children: [_jsx("span", { "data-slot": "security-cell-glyph", className: "grid size-[34px] place-items-center border border-border text-primary", "aria-hidden": icon ? undefined : true, children: icon }), _jsx("h3", { "data-slot": "security-cell-title", className: "nc-type-body-md-strong text-foreground", children: title }), _jsx("p", { "data-slot": "security-cell-body", className: "nc-type-body-sm text-muted-foreground", children: body })] }));
+}
+export { SecurityGrid, SecurityCell };

package/dist/components/stat-block.d.ts

@@ -2,10 +2,13 @@ import * as React from "react";
 /**
  * stat-block — single statistic fill (replaces the retired `.nc-stat-block`).
  *
- * A large numeral over a mono label. Seam-free canvas fill: it drops into the
- * `StatsBand` grid which owns the hairline dividers (gap-as-seam), so it draws NO
- * border and is square-cornered. `surface="ink"` inverts onto the ink role for a
- * dark band. Token-only; no `dark:` styling.
+ * A large tabular numeral over a mono label. Seam-free canvas fill: it drops into
+ * the `StatsBand` grid which owns the hairline dividers (gap-as-seam), so it draws
+ * NO border and is square-cornered. `surface="ink"` inverts onto the ink role for
+ * a dark band; inside a `StatsBand surface="night"` the ancestor `.dark` class
+ * flips the default canvas roles, so a plain `StatBlock` reads dark there.
+ * `StatBlockFigureAccent` marks the verde substring of a figure (`text-primary`).
+ * Token-only; no `dark:` styling.
  */
 declare function StatBlock({ className, surface, ...props }: React.ComponentProps<"div"> & {
     surface?: "canvas" | "ink";
@@ -13,8 +16,9 @@ declare function StatBlock({ className, surface, ...props }: React.ComponentProp
 declare function StatBlockFigure({ className, surface, ...props }: React.ComponentProps<"div"> & {
     surface?: "canvas" | "ink";
 }): React.JSX.Element;
+declare function StatBlockFigureAccent({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 declare function StatBlockLabel({ className, surface, ...props }: React.ComponentProps<"div"> & {
     surface?: "canvas" | "ink";
 }): React.JSX.Element;
-export { StatBlock, StatBlockFigure, StatBlockLabel };
+export { StatBlock, StatBlockFigure, StatBlockFigureAccent, StatBlockLabel };
 //# sourceMappingURL=stat-block.d.ts.map

package/dist/components/stat-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-block.d.ts","sourceRoot":"","sources":["../../src/components/stat-block.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;GAOG;AAEH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CAAE,qBAa9D;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CAAE,qBAY9D;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CAAE,qBAY9D;AAED,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"stat-block.d.ts","sourceRoot":"","sources":["../../src/components/stat-block.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;GAUG;AAEH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CAAE,qBAa9D;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CAAE,qBAY9D;AAED,iBAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAQnF;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CAAE,qBAY9D;AAED,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,qBAAqB,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/stat-block.js

@@ -3,18 +3,24 @@ import { cn } from "../lib/utils.js";
 /**
  * stat-block — single statistic fill (replaces the retired `.nc-stat-block`).
  *
- * A large numeral over a mono label. Seam-free canvas fill: it drops into the
- * `StatsBand` grid which owns the hairline dividers (gap-as-seam), so it draws NO
- * border and is square-cornered. `surface="ink"` inverts onto the ink role for a
- * dark band. Token-only; no `dark:` styling.
+ * A large tabular numeral over a mono label. Seam-free canvas fill: it drops into
+ * the `StatsBand` grid which owns the hairline dividers (gap-as-seam), so it draws
+ * NO border and is square-cornered. `surface="ink"` inverts onto the ink role for
+ * a dark band; inside a `StatsBand surface="night"` the ancestor `.dark` class
+ * flips the default canvas roles, so a plain `StatBlock` reads dark there.
+ * `StatBlockFigureAccent` marks the verde substring of a figure (`text-primary`).
+ * Token-only; no `dark:` styling.
  */
 function StatBlock({ className, surface = "canvas", ...props }) {
     return (_jsx("div", { "data-slot": "stat-block", "data-surface": surface, className: cn("grid min-h-24 content-center gap-1.5 p-[18px]", surface === "ink" ? "bg-primary" : "bg-card", className), ...props }));
 }
 function StatBlockFigure({ className, surface = "canvas", ...props }) {
-    return (_jsx("div", { "data-slot": "stat-block-figure", className: cn("text-[40px] leading-none font-semibold", surface === "ink" ? "text-primary-foreground" : "text-foreground", className), ...props }));
+    return (_jsx("div", { "data-slot": "stat-block-figure", className: cn("text-[clamp(2rem,3.2vw,2.875rem)] leading-none font-bold tabular-nums", surface === "ink" ? "text-primary-foreground" : "text-foreground", className), ...props }));
+}
+function StatBlockFigureAccent({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "stat-block-figure-accent", className: cn("text-primary", className), ...props }));
 }
 function StatBlockLabel({ className, surface = "canvas", ...props }) {
     return (_jsx("div", { "data-slot": "stat-block-label", className: cn("font-mono text-xs uppercase", surface === "ink" ? "text-primary-foreground" : "text-muted-foreground", className), ...props }));
 }
-export { StatBlock, StatBlockFigure, StatBlockLabel };
+export { StatBlock, StatBlockFigure, StatBlockFigureAccent, StatBlockLabel };

package/dist/components/statement.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+/**
+ * statement — a single left-aligned editorial statement block (V5 B04).
+ *
+ * An indexed mono eyebrow, one large two-tone headline (a lead clause in the
+ * foreground role and a continuation clause dropped to the muted role through the
+ * `StatementTail` sub-slot), and a body paragraph. No word-split reveal in this
+ * pass — the headline is static structure.
+ *
+ * Compound, slot-driven: the caller supplies every string, this owns measure,
+ * alignment, and the two-tone role split. Token-only; no `dark:` styling.
+ */
+declare function Statement({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * StatementEyebrow — mono eyebrow with an optional `[NN]` index chip in the
+ * canonical link-deep role (deep verde on light / bright verde on dark). The chip
+ * renders only when `index` is set.
+ */
+declare function StatementEyebrow({ index, children, className, ...props }: React.ComponentProps<"p"> & {
+    index?: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * StatementTitle — the large headline. Its lead clause reads in the foreground
+ * role; wrap the continuation clause in `StatementTail` to drop it to muted.
+ */
+declare function StatementTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
+/** StatementTail — the muted continuation clause inside `StatementTitle` (V5 `.t2`). */
+declare function StatementTail({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+/** StatementBody — the supporting paragraph under the headline. */
+declare function StatementBody({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export { Statement, StatementEyebrow, StatementTitle, StatementTail, StatementBody };
+//# sourceMappingURL=statement.d.ts.map

package/dist/components/statement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"statement.d.ts","sourceRoot":"","sources":["../../src/components/statement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;GAUG;AAEH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQtE;AAED;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAkBzD;AAED;;;GAGG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ1E;AAED,wFAAwF;AACxF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAQ3E;AAED,mEAAmE;AACnE,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQxE;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/statement.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * statement — a single left-aligned editorial statement block (V5 B04).
+ *
+ * An indexed mono eyebrow, one large two-tone headline (a lead clause in the
+ * foreground role and a continuation clause dropped to the muted role through the
+ * `StatementTail` sub-slot), and a body paragraph. No word-split reveal in this
+ * pass — the headline is static structure.
+ *
+ * Compound, slot-driven: the caller supplies every string, this owns measure,
+ * alignment, and the two-tone role split. Token-only; no `dark:` styling.
+ */
+function Statement({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "statement", className: cn("grid justify-items-start gap-6 text-left", className), ...props }));
+}
+/**
+ * StatementEyebrow — mono eyebrow with an optional `[NN]` index chip in the
+ * canonical link-deep role (deep verde on light / bright verde on dark). The chip
+ * renders only when `index` is set.
+ */
+function StatementEyebrow({ index, children, className, ...props }) {
+    return (_jsxs("p", { "data-slot": "statement-eyebrow", className: cn("nc-type-caption-mono flex items-center gap-2 uppercase text-muted-foreground", className), ...props, children: [index != null ? (_jsxs("span", { "data-slot": "statement-eyebrow-index", className: "text-[var(--nc-link-deep)]", children: ["[", index, "]"] })) : null, children] }));
+}
+/**
+ * StatementTitle — the large headline. Its lead clause reads in the foreground
+ * role; wrap the continuation clause in `StatementTail` to drop it to muted.
+ */
+function StatementTitle({ className, ...props }) {
+    return (_jsx("h2", { "data-slot": "statement-title", className: cn("nc-type-title-lg max-w-[24ch] text-foreground", className), ...props }));
+}
+/** StatementTail — the muted continuation clause inside `StatementTitle` (V5 `.t2`). */
+function StatementTail({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "statement-tail", className: cn("text-muted-foreground", className), ...props }));
+}
+/** StatementBody — the supporting paragraph under the headline. */
+function StatementBody({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "statement-body", className: cn("nc-type-body-md max-w-[52ch] text-muted-foreground", className), ...props }));
+}
+export { Statement, StatementEyebrow, StatementTitle, StatementTail, StatementBody };

package/dist/components/stats-band.d.ts

@@ -8,11 +8,15 @@ import * as React from "react";
  * square-cornered fill, so no coordinate carries two lines. `surface="ink"` flips
  * the band onto the ink role; only the seam COLOUR changes (the grid background
  * mixes toward the surface), never its weight, so the grid keeps sole ownership.
- * Token-only; no `dark:` styling.
+ *
+ * `surface="night"` is the always-dark V5 stats band (B12): rather than a `dark:`
+ * utility (forbidden) it sets the `dark` ancestor class on the grid root, so the
+ * seam (`bg-border`) and every `StatBlock` role resolve to their dark value while
+ * the grid keeps its plain canvas seam. Token-only; no `dark:` styling.
  */
 declare function StatsBand({ className, columns, surface, ...props }: React.ComponentProps<"div"> & {
     columns?: 2 | 3 | 4 | 5 | 6;
-    surface?: "canvas" | "ink";
+    surface?: "canvas" | "ink" | "night";
 }): React.JSX.Element;
 export { StatsBand };
 //# sourceMappingURL=stats-band.d.ts.map

package/dist/components/stats-band.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stats-band.d.ts","sourceRoot":"","sources":["../../src/components/stats-band.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B;;;;;;;;;;GAUG;AAEH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,OAAW,EACX,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC5B,qBAUA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"stats-band.d.ts","sourceRoot":"","sources":["../../src/components/stats-band.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B;;;;;;;;;;;;;;GAcG;AAEH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,OAAW,EACX,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;CACtC,qBAmBA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/stats-band.js

@@ -17,11 +17,18 @@ const STATS_BAND_COLUMNS = {
  * square-cornered fill, so no coordinate carries two lines. `surface="ink"` flips
  * the band onto the ink role; only the seam COLOUR changes (the grid background
  * mixes toward the surface), never its weight, so the grid keeps sole ownership.
- * Token-only; no `dark:` styling.
+ *
+ * `surface="night"` is the always-dark V5 stats band (B12): rather than a `dark:`
+ * utility (forbidden) it sets the `dark` ancestor class on the grid root, so the
+ * seam (`bg-border`) and every `StatBlock` role resolve to their dark value while
+ * the grid keeps its plain canvas seam. Token-only; no `dark:` styling.
  */
 function StatsBand({ className, columns = 4, surface = "canvas", ...props }) {
+    // night carries the plain canvas seam and lets the `dark` root flip its colour;
+    // ink/canvas pass straight through to the surface-driven seam colour.
+    const seamSurface = surface === "night" ? "canvas" : surface;
     return (
-    // single-owner seam: SeamGrid owns every divider; ink flips only its colour.
-    _jsx(SeamGrid, { "data-slot": "stats-band", surface: surface, className: cn("h-full", STATS_BAND_COLUMNS[columns], className), ...props }));
+    // single-owner seam: SeamGrid owns every divider; ink/night flip only colour.
+    _jsx(SeamGrid, { "data-slot": "stats-band", "data-surface": surface, surface: seamSurface, className: cn("h-full", surface === "night" && "dark", STATS_BAND_COLUMNS[columns], className), ...props }));
 }
 export { StatsBand };

package/dist/components/status-dot.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 const TONE_BG = {
-    good: "bg-(--nc-status-success)",
-    muted: "bg-(--nc-status-paused)",
-    warn: "bg-(--nc-status-warning)",
-    bad: "bg-(--nc-status-error)",
+    good: "bg-success",
+    muted: "bg-[var(--nc-muted)]",
+    warn: "bg-warning",
+    bad: "bg-destructive",
 };
 function StatusDot({ className, tone, ...props }) {
     return (_jsx("span", { "aria-hidden": "true", className: cn("inline-block size-1.5 rounded-full", TONE_BG[tone], className), "data-slot": "status-dot", "data-tone": tone, ...props }));

package/dist/components/steps.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+/**
+ * steps — the "how it works" station rail (V5 B09).
+ *
+ * An eyebrow + statement head sits above a STATIC horizontal rail (a single
+ * filled foreground rule — the walking-dot progress animation is intentionally
+ * out of scope this pass) and a row of numbered stations. Each `Step` carries a
+ * square brand marker, a mono index, a title, an optional mono price line, and a
+ * body. `StepsBranch` is a dashed-left callout rendered below the station row.
+ *
+ * This is one of only two surfaces where prices may appear (the pricing section
+ * is the other), so the `price` line is a first-class, opt-in slot rather than a
+ * generic field. Copy is props-driven: absent parts render nothing.
+ *
+ * Light-surface composition; it inherits the page theme and sets no dark root.
+ * Token-only; no `dark:` styling.
+ */
+declare function Steps({ kicker, title, children, className, ...props }: React.ComponentProps<"section"> & {
+    kicker?: string;
+    title?: string;
+}): React.JSX.Element;
+declare function Step({ index, title, price, body, className, children, ...props }: React.ComponentProps<"div"> & {
+    index?: string;
+    title?: string;
+    price?: string;
+    body?: React.ReactNode;
+}): React.JSX.Element;
+declare function StepsBranch({ label, title, body, className, children, ...props }: React.ComponentProps<"aside"> & {
+    label?: string;
+    title?: string;
+    body?: React.ReactNode;
+}): React.JSX.Element;
+export { Steps, Step, StepsBranch };
+//# sourceMappingURL=steps.d.ts.map

package/dist/components/steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../src/components/steps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;GAeG;AAEH,iBAAS,KAAK,CAAC,EACb,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,qBAsCA;AAED,iBAAS,IAAI,CAAC,EACZ,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,qBAqCA;AAED,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,qBA+BA;AAED,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/steps.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+import { SectionIntro, SectionIntroKicker, SectionIntroTitle } from "./section-intro.js";
+/**
+ * steps — the "how it works" station rail (V5 B09).
+ *
+ * An eyebrow + statement head sits above a STATIC horizontal rail (a single
+ * filled foreground rule — the walking-dot progress animation is intentionally
+ * out of scope this pass) and a row of numbered stations. Each `Step` carries a
+ * square brand marker, a mono index, a title, an optional mono price line, and a
+ * body. `StepsBranch` is a dashed-left callout rendered below the station row.
+ *
+ * This is one of only two surfaces where prices may appear (the pricing section
+ * is the other), so the `price` line is a first-class, opt-in slot rather than a
+ * generic field. Copy is props-driven: absent parts render nothing.
+ *
+ * Light-surface composition; it inherits the page theme and sets no dark root.
+ * Token-only; no `dark:` styling.
+ */
+function Steps({ kicker, title, children, className, ...props }) {
+    const stations = [];
+    const branches = [];
+    React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child) && child.type === StepsBranch) {
+            branches.push(child);
+        }
+        else {
+            stations.push(child);
+        }
+    });
+    return (_jsxs("section", { "data-slot": "steps", className: cn("grid gap-8", className), ...props, children: [kicker || title ? (_jsxs(SectionIntro, { align: "start", className: "min-h-0 bg-transparent p-0", children: [kicker ? _jsx(SectionIntroKicker, { children: kicker }) : null, title ? (_jsx(SectionIntroTitle, { className: "mx-0 max-w-[28ch] text-balance text-left", children: title })) : null] })) : null, _jsx("div", { "data-slot": "steps-rail", "aria-hidden": "true", className: "h-px w-full bg-foreground" }), _jsx("div", { "data-slot": "steps-stations", className: "grid grid-cols-1 gap-10 sm:grid-cols-2 md:grid-cols-4", children: stations }), branches.length > 0 ? branches : null] }));
+}
+function Step({ index, title, price, body, className, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "step", className: cn("flex flex-col gap-3", className), ...props, children: [_jsx("span", { "data-slot": "step-marker", "aria-hidden": "true", className: "size-2 rounded-[1px] bg-primary" }), index ? (_jsx("span", { "data-slot": "step-index", className: "font-mono text-[10px] tracking-[0.14em] text-muted-foreground uppercase", children: index })) : null, title ? (_jsx("h3", { "data-slot": "step-title", className: "nc-type-body-md-strong text-foreground", children: title })) : null, price ? (_jsx("span", { "data-slot": "step-price", className: "font-mono text-xs font-semibold tracking-[0.04em] text-[var(--nc-link-deep)] uppercase", children: price })) : null, body ? (_jsx("p", { "data-slot": "step-body", className: "nc-type-body-sm max-w-[30ch] text-muted-foreground", children: body })) : null, children] }));
+}
+function StepsBranch({ label, title, body, className, children, ...props }) {
+    return (_jsxs("aside", { "data-slot": "steps-branch", className: cn("flex flex-col gap-3 border-l border-dashed border-border pl-6", className), ...props, children: [label ? (_jsx("span", { "data-slot": "steps-branch-label", className: "font-mono text-[10px] tracking-[0.14em] text-[var(--nc-link-deep)] uppercase", children: label })) : null, title ? (_jsx("h3", { "data-slot": "steps-branch-title", className: "nc-type-body-md-strong text-foreground", children: title })) : null, body ? (_jsx("p", { "data-slot": "steps-branch-body", className: "nc-type-body-sm max-w-[52ch] text-muted-foreground", children: body })) : null, children] }));
+}
+export { Steps, Step, StepsBranch };

package/dist/components/team-grid.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+/**
+ * team-grid — the "the people" roster (V5 B17).
+ *
+ * A three-column wall of `TeamMember` cells over the gap-as-seam grid (`SeamGrid`
+ * owns every divider once; the cells are borderless fills). Each member reads
+ * avatar → role → name → line, top-aligned.
+ *
+ * SINGLE-OWNER SEAM: the holding `SeamGrid` paints the brand line behind the cells
+ * and leaves a 1px guide gap, so no cell draws a competing border.
+ *
+ * INVERTED CELL: the non-human team member renders as a dark surface cell inside an
+ * otherwise light section. This is expressed with an ancestor `.dark` class ON THE
+ * CELL ROOT (`variant="inverted"`) — an accepted ancestor-class remap, NOT a `dark:`
+ * utility. Every colour must flip from that cell-local `.dark`: the cell composes
+ * semantic roles (`bg-card`, `text-foreground`, `text-muted-foreground`) and the
+ * canonical `--nc-link-deep` pair for the verde accent. Token-only.
+ */
+declare function TeamGrid({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function TeamMember({ className, variant, avatar, role, name, children, ...props }: React.ComponentProps<"div"> & {
+    variant?: "default" | "inverted";
+    avatar?: React.ReactNode;
+    role?: React.ReactNode;
+    name?: React.ReactNode;
+}): React.JSX.Element;
+export { TeamGrid, TeamMember };
+//# sourceMappingURL=team-grid.d.ts.map

package/dist/components/team-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-grid.d.ts","sourceRoot":"","sources":["../../src/components/team-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;GAgBG;AAEH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQrE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAmB,EACnB,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,qBA2CA;AAED,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC"}