@nadicodeai/ui 0.10.1 → 0.11.0

package/dist/components/hero.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+/**
+ * hero — the full-viewport, always-dark page-opening hero (V5 · B02).
+ *
+ * A left-pinned copy column (kicker with an accent bar, poster headline, lead, and a
+ * two-CTA row) over a right-anchored visual slot. The hero is ALWAYS dark, so the
+ * root carries its own `dark` ancestor class and resolves every colour from the
+ * semantic roles that state each element's purpose (`bg-background`,
+ * `text-foreground`, `text-muted-foreground`, `bg-primary`, `border-border`).
+ *
+ * STUBBED VISUAL: `HeroVisual` is a clean static slot the consumer fills with an
+ * image or inline SVG (the founder-approved WebGL Duomo particle field is out of
+ * scope for this pass). Absent content, it renders only the dark surface behind the
+ * copy — no canvas, no WebGL, no motion.
+ *
+ * The copy parts are typed presentational wrappers; the consumer supplies the words
+ * and drops `Button`s into `HeroActions`. Token-only; the root sets its own `dark`
+ * class (an accepted ancestor-class remap), never `dark:` utilities.
+ */
+declare function Hero({ className, ...props }: React.ComponentProps<"section">): React.JSX.Element;
+declare function HeroVisual({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function HeroBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function HeroKicker({ className, children, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function HeroTitle({ className, ...props }: React.ComponentProps<"h1">): React.JSX.Element;
+declare function HeroLead({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function HeroActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Hero, HeroVisual, HeroBody, HeroKicker, HeroTitle, HeroLead, HeroActions };
+//# sourceMappingURL=hero.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/components/hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;GAiBG;AAEH,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,qBAWrE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAevE;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWrE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAc/E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQrE;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQnE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/hero.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * hero — the full-viewport, always-dark page-opening hero (V5 · B02).
+ *
+ * A left-pinned copy column (kicker with an accent bar, poster headline, lead, and a
+ * two-CTA row) over a right-anchored visual slot. The hero is ALWAYS dark, so the
+ * root carries its own `dark` ancestor class and resolves every colour from the
+ * semantic roles that state each element's purpose (`bg-background`,
+ * `text-foreground`, `text-muted-foreground`, `bg-primary`, `border-border`).
+ *
+ * STUBBED VISUAL: `HeroVisual` is a clean static slot the consumer fills with an
+ * image or inline SVG (the founder-approved WebGL Duomo particle field is out of
+ * scope for this pass). Absent content, it renders only the dark surface behind the
+ * copy — no canvas, no WebGL, no motion.
+ *
+ * The copy parts are typed presentational wrappers; the consumer supplies the words
+ * and drops `Button`s into `HeroActions`. Token-only; the root sets its own `dark`
+ * class (an accepted ancestor-class remap), never `dark:` utilities.
+ */
+function Hero({ className, ...props }) {
+    return (_jsx("section", { "data-slot": "hero", className: cn("dark relative isolate min-h-[max(640px,100svh)] overflow-hidden bg-background text-foreground", className), ...props }));
+}
+function HeroVisual({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "hero-visual", "aria-hidden": "true", className: cn(
+        // Right-anchored static plate. Flush mount: consumer media fills it; empty,
+        // it is just the dark surface. This is the stub slot for the WebGL field.
+        "pointer-events-none absolute inset-y-0 right-0 z-0 hidden w-[62%] overflow-hidden border-l border-border/60 sm:block", "[&_img]:h-full [&_img]:w-full [&_img]:object-cover [&_svg]:h-full [&_svg]:w-full", className), ...props }));
+}
+function HeroBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "hero-body", className: cn("relative z-10 mx-auto flex min-h-[inherit] w-full max-w-[1200px] flex-col items-start justify-center gap-6 px-[clamp(24px,5vw,64px)] py-[clamp(96px,12vw,120px)]", className), ...props }));
+}
+function HeroKicker({ className, children, ...props }) {
+    return (_jsxs("p", { "data-slot": "hero-kicker", className: cn("nc-type-caption-mono flex items-center gap-3 uppercase text-muted-foreground", className), ...props, children: [_jsx("span", { "data-slot": "hero-kicker-bar", "aria-hidden": "true", className: "h-0.5 w-8 bg-primary" }), children] }));
+}
+function HeroTitle({ className, ...props }) {
+    return (_jsx("h1", { "data-slot": "hero-title", className: cn("nc-type-display-lg max-w-[16ch] text-balance text-foreground", className), ...props }));
+}
+function HeroLead({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "hero-lead", className: cn("nc-type-body-lg max-w-[40ch] text-muted-foreground", className), ...props }));
+}
+function HeroActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "hero-actions", className: cn("mt-2 flex flex-wrap items-center gap-3", className), ...props }));
+}
+export { Hero, HeroVisual, HeroBody, HeroKicker, HeroTitle, HeroLead, HeroActions };

package/dist/components/input-otp.js

@@ -18,7 +18,7 @@ function InputOTPGroup({ className, ...props }) {
 function InputOTPSlot({ index, className, ...props }) {
     const inputOTPContext = React.useContext(OTPInputContext);
     const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
-    return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn("relative flex h-control-height min-h-touch-target w-control-height min-w-touch-target items-center justify-center border-y border-r border-input bg-background text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-focus data-[active=true]:ring-ring data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0", className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) }))] }));
+    return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn("relative flex h-control-height min-h-touch-target w-control-height min-w-touch-target items-center justify-center border-y border-r border-input bg-background text-sm transition-[border-color,box-shadow,color,opacity] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-focus data-[active=true]:ring-ring data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0", className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) }))] }));
 }
 function InputOTPSeparator({ ...props }) {
     return (_jsx("div", { "data-slot": "input-otp-separator", className: "flex items-center [&_svg:not([class*='size-'])]:size-4", role: "separator", ...props, children: _jsx(MinusIcon, {}) }));

package/dist/components/integration-flow.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+/**
+ * integration-flow — the "how it runs" flow diagram (V5 B10).
+ *
+ * A four-node flow: three main-row nodes (source → agent → output) plus one
+ * branch node (a named person) below the centre. Wide layouts use one inline
+ * SVG connector layer. Compact layouts reflow to source → agent → a two-column
+ * output/person fork and use CSS borders in the real gaps, so connectors never
+ * disappear behind stacked cards. This pass is STATIC: no `animateMotion`, no
+ * draw-on stroke animation.
+ *
+ * All SVG colours resolve through `var(--nc-*)` / semantic role tokens, never a
+ * raw literal. `IntegrationFlowLegend` / `IntegrationFlowLegendPill` render the
+ * tint key. Copy is props-driven: only the nodes you pass are rendered.
+ *
+ * Light-surface composition; inherits the page theme and sets no dark root.
+ * Token-only; no `dark:` styling.
+ */
+type FlowTone = "neutral" | "primary" | "warning";
+type FlowNode = {
+    label: string;
+    sublabel?: string;
+    tone?: FlowTone;
+    icon?: React.ReactNode;
+};
+declare function IntegrationFlow({ nodes, className, ...props }: React.ComponentProps<"div"> & {
+    nodes?: FlowNode[];
+}): React.JSX.Element;
+type LegendTone = "primary" | "warning" | "info";
+declare function IntegrationFlowLegend({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function IntegrationFlowLegendPill({ tone, className, ...props }: React.ComponentProps<"span"> & {
+    tone?: LegendTone;
+}): React.JSX.Element;
+export { IntegrationFlow, IntegrationFlowLegend, IntegrationFlowLegendPill };
+export type { FlowNode, FlowTone, LegendTone };
+//# sourceMappingURL=integration-flow.d.ts.map

package/dist/components/integration-flow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration-flow.d.ts","sourceRoot":"","sources":["../../src/components/integration-flow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;GAgBG;AAEH,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAElD,KAAK,QAAQ,GAAG;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAsDF,iBAAS,eAAe,CAAC,EACvB,KAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;CACpB,qBA2HA;AAED,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAQjD,iBAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQlF;AAED,iBAAS,yBAAyB,CAAC,EACjC,IAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,UAAU,CAAA;CAAE,qBAatD;AAED,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,CAAC;AAC7E,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/integration-flow.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+const NODE_BORDER = {
+    neutral: "border-border",
+    primary: "border-primary",
+    warning: "border-warning",
+};
+const NODE_CHIP = {
+    neutral: "bg-muted",
+    primary: "bg-[var(--nc-link-bg-soft)]",
+    warning: "bg-[var(--nc-warning-soft)]",
+};
+// Default role tones for the canonical four-node arrangement.
+const DEFAULT_TONES = ["neutral", "primary", "neutral", "warning"];
+function FlowNodeBox({ node, tone }) {
+    return (_jsxs("div", { "data-slot": "integration-flow-node", "data-tone": tone, className: cn("relative z-10 flex flex-col gap-2 border bg-card p-4", NODE_BORDER[tone]), children: [node.icon ? (_jsx("span", { "data-slot": "integration-flow-node-icon", "aria-hidden": "true", className: cn("grid size-8 place-items-center text-foreground [&_svg]:size-4", NODE_CHIP[tone]), children: node.icon })) : null, _jsx("span", { "data-slot": "integration-flow-node-label", className: "font-mono text-[11px] tracking-[0.08em] text-foreground uppercase", children: node.label }), node.sublabel ? (_jsx("span", { "data-slot": "integration-flow-node-sublabel", className: "font-mono text-[10px] text-muted-foreground", children: node.sublabel })) : null] }));
+}
+function IntegrationFlow({ nodes = [], className, ...props }) {
+    const main = nodes.slice(0, 3);
+    const branch = nodes[3];
+    const toneOf = (node, i) => node.tone ?? DEFAULT_TONES[i] ?? "neutral";
+    return (_jsxs("div", { "data-slot": "integration-flow", className: cn("nc-dotted-field relative grid gap-y-8 bg-card p-6 sm:p-10", className), ...props, children: [_jsxs("svg", { "data-slot": "integration-flow-connectors", className: "pointer-events-none absolute inset-0 hidden size-full sm:block", viewBox: "0 0 300 200", preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", children: [main.length > 1 ? (_jsx("line", { "data-slot": "integration-flow-link", x1: "60", y1: "46", x2: "140", y2: "46", stroke: "var(--primary)", strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" })) : null, main.length > 2 ? (_jsx("line", { "data-slot": "integration-flow-link", x1: "160", y1: "46", x2: "240", y2: "46", stroke: "var(--primary)", strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" })) : null, branch ? (_jsx("line", { "data-slot": "integration-flow-branch-link", x1: "150", y1: "62", x2: "150", y2: "150", stroke: "var(--border)", strokeWidth: "1.5", strokeDasharray: "4 4", vectorEffect: "non-scaling-stroke" })) : null] }), _jsxs("div", { "data-slot": "integration-flow-main", className: "grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-6 sm:gap-y-8", children: [main[0] ? _jsx(FlowNodeBox, { node: main[0], tone: toneOf(main[0], 0) }) : null, main[1] ? (_jsxs("div", { className: "relative", children: [_jsx("span", { "data-slot": "integration-flow-mobile-link", className: "pointer-events-none absolute -top-6 left-1/2 h-6 border-l border-primary sm:hidden", "aria-hidden": "true" }), _jsx(FlowNodeBox, { node: main[1], tone: toneOf(main[1], 1) })] })) : null, main[2] ? (_jsxs("div", { className: cn("relative grid pt-6 sm:contents", branch ? "grid-cols-2 gap-4" : "grid-cols-1"), children: [_jsx("span", { "data-slot": "integration-flow-mobile-fork-entry", className: "pointer-events-none absolute -top-6 left-1/2 h-6 border-l border-primary sm:hidden", "aria-hidden": "true" }), _jsxs("span", { "data-slot": "integration-flow-mobile-fork", className: cn("pointer-events-none absolute inset-x-0 top-0 h-6 sm:hidden", branch &&
+                                    "before:absolute before:top-3 before:right-1/4 before:left-1/4 before:border-t before:border-primary after:absolute after:top-0 after:left-1/2 after:h-3 after:border-l after:border-primary"), "aria-hidden": "true", children: [_jsx("span", { className: cn("absolute bottom-0 h-3 border-l border-primary", branch ? "left-1/4" : "left-1/2") }), branch ? (_jsx("span", { className: "absolute right-1/4 bottom-0 h-3 border-l border-dashed border-border" })) : null] }), _jsx("div", { className: "sm:col-start-3 sm:row-start-1", children: _jsx(FlowNodeBox, { node: main[2], tone: toneOf(main[2], 2) }) }), branch ? (_jsx("div", { "data-slot": "integration-flow-branch", className: "sm:col-start-2 sm:row-start-2", children: _jsx(FlowNodeBox, { node: branch, tone: toneOf(branch, 3) }) })) : null] })) : null] })] }));
+}
+const LEGEND_TINT = {
+    primary: "bg-[var(--nc-link-bg-soft)] text-[var(--nc-link-deep)]",
+    warning: "bg-[var(--nc-warning-soft)] text-[var(--nc-warning-deep)]",
+    info: "bg-[var(--nc-info-soft)] text-[var(--nc-info-deep)]",
+};
+function IntegrationFlowLegend({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "integration-flow-legend", className: cn("flex flex-wrap gap-2", className), ...props }));
+}
+function IntegrationFlowLegendPill({ tone = "primary", className, ...props }) {
+    return (_jsx("span", { "data-slot": "integration-flow-legend-pill", "data-tone": tone, className: cn("inline-flex items-center gap-1.5 px-2.5 py-1 font-mono text-[10px] tracking-[0.1em] uppercase", LEGEND_TINT[tone], className), ...props }));
+}
+export { IntegrationFlow, IntegrationFlowLegend, IntegrationFlowLegendPill };

package/dist/components/live-demo.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+/**
+ * live-demo — the faux application window standing in for the agent-at-work
+ * recording (V5 B11).
+ *
+ * `LiveDemoWindow` is a bordered card with a mono title bar, three NEUTRAL chrome
+ * dots (muted brand-token fills — deliberately not the literal macOS traffic
+ * colours), an optional "live" chip whose dot pulses (a CSS keyframe gated by
+ * `motion-reduce:animate-none` so it holds still under reduced-motion), and a
+ * stack of status rows. `LiveDemoRow` renders one status line with a soft tint
+ * pill: `done` (success tint) or `waiting` (warning tint).
+ *
+ * Replay interactivity is out of scope this pass — the rows are static. Copy is
+ * props-driven: an absent title, chip, or tag renders nothing.
+ *
+ * Light-surface composition; inherits the page theme and sets no dark root.
+ * Token-only; no `dark:` styling.
+ */
+declare function LiveDemoWindow({ title, live, children, className, ...props }: React.ComponentProps<"div"> & {
+    title?: React.ReactNode;
+    live?: React.ReactNode;
+}): React.JSX.Element;
+type LiveDemoStatus = "done" | "waiting";
+declare function LiveDemoRow({ status, label, tag, className, children, ...props }: React.ComponentProps<"div"> & {
+    status?: LiveDemoStatus;
+    label?: React.ReactNode;
+    tag?: React.ReactNode;
+}): React.JSX.Element;
+export { LiveDemoWindow, LiveDemoRow };
+export type { LiveDemoStatus };
+//# sourceMappingURL=live-demo.d.ts.map

package/dist/components/live-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-demo.d.ts","sourceRoot":"","sources":["../../src/components/live-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;GAgBG;AAEH,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,qBA+CA;AAED,KAAK,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;AAOzC,iBAAS,WAAW,CAAC,EACnB,MAAe,EACf,KAAK,EACL,GAAG,EACH,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB,qBA8BA;AAED,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC;AACvC,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/live-demo.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * live-demo — the faux application window standing in for the agent-at-work
+ * recording (V5 B11).
+ *
+ * `LiveDemoWindow` is a bordered card with a mono title bar, three NEUTRAL chrome
+ * dots (muted brand-token fills — deliberately not the literal macOS traffic
+ * colours), an optional "live" chip whose dot pulses (a CSS keyframe gated by
+ * `motion-reduce:animate-none` so it holds still under reduced-motion), and a
+ * stack of status rows. `LiveDemoRow` renders one status line with a soft tint
+ * pill: `done` (success tint) or `waiting` (warning tint).
+ *
+ * Replay interactivity is out of scope this pass — the rows are static. Copy is
+ * props-driven: an absent title, chip, or tag renders nothing.
+ *
+ * Light-surface composition; inherits the page theme and sets no dark root.
+ * Token-only; no `dark:` styling.
+ */
+function LiveDemoWindow({ title, live, children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "live-demo-window", className: cn("flex flex-col overflow-hidden rounded-lg border border-border bg-card shadow-sm", className), ...props, children: [_jsxs("div", { "data-slot": "live-demo-bar", className: "flex items-center gap-3 border-b border-border px-4 py-2.5", children: [_jsx("span", { "data-slot": "live-demo-chrome", "aria-hidden": "true", className: "flex gap-1.5", children: [0, 1, 2].map((i) => (_jsx("span", { className: "size-2.5 rounded-full bg-muted-foreground/40" }, i))) }), title ? (_jsx("span", { "data-slot": "live-demo-title", className: "font-mono text-[10px] tracking-[0.08em] text-muted-foreground uppercase", children: title })) : null] }), live ? (_jsxs("div", { "data-slot": "live-demo-chip", className: "flex items-center gap-2 border-b border-border px-4 py-2.5 font-mono text-[9.5px] tracking-[0.08em] text-[var(--nc-link-deep)] uppercase", children: [_jsx("span", { "aria-hidden": "true", className: "size-1.5 rounded-full bg-primary motion-safe:animate-pulse" }), live] })) : null, _jsx("div", { "data-slot": "live-demo-rows", className: "flex flex-col", children: children })] }));
+}
+const ROW_TINT = {
+    done: "bg-[var(--nc-link-bg-soft)] text-[var(--nc-link-deep)]",
+    waiting: "bg-[var(--nc-warning-soft)] text-[var(--nc-warning-deep)]",
+};
+function LiveDemoRow({ status = "done", label, tag, className, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "live-demo-row", "data-status": status, className: cn("flex items-center justify-between gap-3 border-t border-border px-4 py-3 first:border-t-0", className), ...props, children: [label ? (_jsx("span", { "data-slot": "live-demo-row-label", className: "font-mono text-[11px] text-foreground", children: label })) : null, tag ? (_jsx("span", { "data-slot": "live-demo-row-tag", className: cn("shrink-0 px-2 py-0.5 font-mono text-[10px] tracking-[0.06em] uppercase", ROW_TINT[status]), children: tag })) : null, children] }));
+}
+export { LiveDemoWindow, LiveDemoRow };

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

@@ -9,15 +9,25 @@ import * as React from "react";
  * both and the two names below keep the section vocabulary distinct (matching the
  * retired CSS, which kept two section files over identical primitives).
  *
+ * V5 logo-cloud usage: a caller stacks a mono `LogoBandLabel` caption above each
+ * auto-fit tile row (`columns="auto"`), e.g. "the tools you already use" over one
+ * row and "many models, no lock-in" over the next — the two-row composition is the
+ * caller's, this component only owns one labelled tile wall.
+ *
  * SINGLE-OWNER SEAM: the grid owns every divider once (`gap-px bg-border`). Each
  * `LogoTile` is borderless and square-cornered. `surface="ink"` flips only the
  * seam colour, never its weight. Token-only; no `dark:` styling.
  */
 declare function LogoGrid({ className, columns, surface, ...props }: React.ComponentProps<"div"> & {
-    columns?: 2 | 3 | 4 | 5 | 6;
+    columns?: 2 | 3 | 4 | 5 | 6 | "auto";
     surface?: "canvas" | "ink";
 }): React.JSX.Element;
 declare function LogoBand({ ...props }: React.ComponentProps<typeof LogoGrid>): React.JSX.Element;
 declare function IntegrationsGrid({ ...props }: React.ComponentProps<typeof LogoGrid>): React.JSX.Element;
-export { LogoBand, IntegrationsGrid };
+/**
+ * LogoBandLabel — the mono caption row that sits above a tile wall (V5 `.lab`).
+ * Small uppercase mono in the muted role; the caller supplies the words.
+ */
+declare function LogoBandLabel({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export { LogoBand, IntegrationsGrid, LogoBandLabel };
 //# sourceMappingURL=logo-band.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"logo-band.d.ts","sourceRoot":"","sources":["../../src/components/logo-band.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B;;;;;;;;;;;;;GAaG;AAEH,iBAAS,QAAQ,CAAC,EAChB,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,qBAYA;AAED,iBAAS,QAAQ,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,qBAEpE;AAED,iBAAS,gBAAgB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,qBAE5E;AAED,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"logo-band.d.ts","sourceRoot":"","sources":["../../src/components/logo-band.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B;;;;;;;;;;;;;;;;;;GAkBG;AAEH,iBAAS,QAAQ,CAAC,EAChB,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,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC5B,qBAYA;AAED,iBAAS,QAAQ,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,qBAEpE;AAED,iBAAS,gBAAgB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,qBAE5E;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQxE;AAED,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/logo-band.js

@@ -7,6 +7,9 @@ const LOGO_GRID_COLUMNS = {
     4: "grid-cols-2 sm:grid-cols-4",
     5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5",
     6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6",
+    // V5 auto-fit tile row: cells flow at a minimum comfortable width and share the
+    // free space, so a 7-mark row and a 6-mark row both stay optically even.
+    auto: "grid-cols-[repeat(auto-fit,minmax(130px,1fr))]",
 };
 /**
  * logo-band / integrations-grid — wall of monochrome marks (replaces the retired
@@ -18,6 +21,11 @@ const LOGO_GRID_COLUMNS = {
  * both and the two names below keep the section vocabulary distinct (matching the
  * retired CSS, which kept two section files over identical primitives).
  *
+ * V5 logo-cloud usage: a caller stacks a mono `LogoBandLabel` caption above each
+ * auto-fit tile row (`columns="auto"`), e.g. "the tools you already use" over one
+ * row and "many models, no lock-in" over the next — the two-row composition is the
+ * caller's, this component only owns one labelled tile wall.
+ *
  * SINGLE-OWNER SEAM: the grid owns every divider once (`gap-px bg-border`). Each
  * `LogoTile` is borderless and square-cornered. `surface="ink"` flips only the
  * seam colour, never its weight. Token-only; no `dark:` styling.
@@ -31,4 +39,11 @@ function LogoBand({ ...props }) {
 function IntegrationsGrid({ ...props }) {
     return _jsx(LogoGrid, { "data-slot": "integrations-grid", ...props });
 }
-export { LogoBand, IntegrationsGrid };
+/**
+ * LogoBandLabel — the mono caption row that sits above a tile wall (V5 `.lab`).
+ * Small uppercase mono in the muted role; the caller supplies the words.
+ */
+function LogoBandLabel({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "logo-band-label", className: cn("nc-type-caption-mono uppercase text-muted-foreground", className), ...props }));
+}
+export { LogoBand, IntegrationsGrid, LogoBandLabel };

package/dist/components/logo-tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logo-tile.d.ts","sourceRoot":"","sources":["../../src/components/logo-tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;GASG;AAEH,iBAAS,QAAQ,CAAC,EAChB,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,YAAY,CAAC,EACpB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CAAE,qBAY/D;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAQ5E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAQ1E;AAED,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"logo-tile.d.ts","sourceRoot":"","sources":["../../src/components/logo-tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;GASG;AAEH,iBAAS,QAAQ,CAAC,EAChB,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,YAAY,CAAC,EACpB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CAAE,qBAc/D;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAQ5E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAQ1E;AAED,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/logo-tile.js

@@ -14,12 +14,15 @@ function LogoTile({ className, surface = "canvas", ...props }) {
     return (_jsx("div", { "data-slot": "logo-tile", "data-surface": surface, className: cn("grid min-h-24 place-content-center justify-items-center gap-2 p-[18px]", surface === "ink" ? "bg-primary" : "bg-card", className), ...props }));
 }
 function LogoTileMark({ className, surface = "canvas", ...props }) {
-    return (_jsx("span", { "data-slot": "logo-tile-mark", className: cn("block h-7 w-auto [&_svg]:h-full [&_svg]:w-auto [&_img]:h-full [&_img]:w-auto", surface === "ink" ? "text-[var(--nc-canvas)]" : "text-[var(--nc-body)]", className), ...props }));
+    return (_jsx("span", { "data-slot": "logo-tile-mark", className: cn("block h-7 w-auto [&_svg]:h-full [&_svg]:w-auto [&_img]:h-full [&_img]:w-auto", 
+        // Semantic roles keep the mark's purpose explicit: on ink (verde) it
+        // reads as on-primary; on canvas it reads as muted body.
+        surface === "ink" ? "text-primary-foreground" : "text-muted-foreground", className), ...props }));
 }
 function LogoTileMetric({ className, ...props }) {
     return (_jsx("span", { "data-slot": "logo-tile-metric", className: cn("font-mono text-xs uppercase text-muted-foreground", className), ...props }));
 }
 function LogoTileName({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "logo-tile-name", className: cn("text-[13px] leading-4 text-[var(--nc-body)]", className), ...props }));
+    return (_jsx("span", { "data-slot": "logo-tile-name", className: cn("text-[13px] leading-4 text-muted-foreground", className), ...props }));
 }
 export { LogoTile, LogoTileMark, LogoTileMetric, LogoTileName };

package/dist/components/nav-bar.d.ts

@@ -1,16 +1,22 @@
 import * as React from "react";
 /**
- * nav-bar — sticky top navigation chrome (replaces the retired `.nc-nav-bar`).
+ * nav-bar — the fixed, always-dark glass navigation bar (V5).
  *
  * A three-track grid (`1fr auto 1fr`): logo lockup leading, route links centered,
- * CTA cluster trailing. SINGLE-OWNER SEAM: the only edge it owns is its bottom
- * border (`border-b border-border`) — it draws no other line. The surface is the
- * translucent canvas + blur (an 8% transparency mix of the brand canvas), so the
- * chrome reads as one continuous bar. Below ~960px the centered links slot hides and
- * the grid collapses to logo + CTA.
+ * CTA cluster trailing. It is a PERMANENT dark glass bar regardless of the page
+ * section it floats over, so the root carries its own `dark` ancestor class and
+ * resolves every surface from semantic roles (`bg-background`, `text-foreground`,
+ * `border-border`). The glass is the dark canvas at 70% plus a backdrop blur, so
+ * the chrome reads as one continuous translucent bar.
  *
- * A11y: links/triggers expose a `--ring` (link-green) focus outline; the consumer
- * wraps this in a `<nav aria-label>`. Token-only; no `dark:` styling.
+ * SINGLE-OWNER SEAM: the only edge it owns is its bottom border
+ * (`border-b border-border`). `position: fixed` pins it to the viewport top; the
+ * consuming page owns the top padding that clears it. Below ~960px the centered
+ * links slot hides and the grid collapses to logo + CTA.
+ *
+ * A11y: links/triggers expose a `--ring` focus outline; the consumer wraps this in
+ * a `<nav aria-label>`. Token-only; the root sets its own `dark` class (an accepted
+ * ancestor-class remap), never `dark:` utilities.
  */
 declare function NavBar({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function NavBarLogo({ className, ...props }: React.ComponentProps<"a">): React.JSX.Element;

package/dist/components/nav-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-bar.d.ts","sourceRoot":"","sources":["../../src/components/nav-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;GAYG;AAEH,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAYnE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAWrE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAexE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQtE;AAED,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"nav-bar.d.ts","sourceRoot":"","sources":["../../src/components/nav-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;;GAkBG;AAEH,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAYnE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAWrE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAgBxE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQtE;AAED,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/nav-bar.js

@@ -1,30 +1,36 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 /**
- * nav-bar — sticky top navigation chrome (replaces the retired `.nc-nav-bar`).
+ * nav-bar — the fixed, always-dark glass navigation bar (V5).
  *
  * A three-track grid (`1fr auto 1fr`): logo lockup leading, route links centered,
- * CTA cluster trailing. SINGLE-OWNER SEAM: the only edge it owns is its bottom
- * border (`border-b border-border`) — it draws no other line. The surface is the
- * translucent canvas + blur (an 8% transparency mix of the brand canvas), so the
- * chrome reads as one continuous bar. Below ~960px the centered links slot hides and
- * the grid collapses to logo + CTA.
+ * CTA cluster trailing. It is a PERMANENT dark glass bar regardless of the page
+ * section it floats over, so the root carries its own `dark` ancestor class and
+ * resolves every surface from semantic roles (`bg-background`, `text-foreground`,
+ * `border-border`). The glass is the dark canvas at 70% plus a backdrop blur, so
+ * the chrome reads as one continuous translucent bar.
  *
- * A11y: links/triggers expose a `--ring` (link-green) focus outline; the consumer
- * wraps this in a `<nav aria-label>`. Token-only; no `dark:` styling.
+ * SINGLE-OWNER SEAM: the only edge it owns is its bottom border
+ * (`border-b border-border`). `position: fixed` pins it to the viewport top; the
+ * consuming page owns the top padding that clears it. Below ~960px the centered
+ * links slot hides and the grid collapses to logo + CTA.
+ *
+ * A11y: links/triggers expose a `--ring` focus outline; the consumer wraps this in
+ * a `<nav aria-label>`. Token-only; the root sets its own `dark` class (an accepted
+ * ancestor-class remap), never `dark:` utilities.
  */
 function NavBar({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "nav-bar", className: cn("sticky top-0 z-20 grid min-h-16 grid-cols-[1fr_auto] items-center gap-4 px-4 py-3 sm:px-6 lg:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]", "border-b border-border bg-[color-mix(in_srgb,var(--nc-canvas)_92%,transparent)] backdrop-blur-[18px]", className), ...props }));
+    return (_jsx("div", { "data-slot": "nav-bar", className: cn("dark fixed inset-x-0 top-0 z-30 grid min-h-16 grid-cols-[1fr_auto] items-center gap-4 px-4 py-3 text-foreground sm:px-8 lg:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]", "border-b border-border bg-background/70 backdrop-blur-[14px]", className), ...props }));
 }
 function NavBarLogo({ className, ...props }) {
     return (_jsx("a", { "data-slot": "nav-bar-logo", className: cn("inline-flex w-fit items-center gap-2.5 text-sm font-semibold text-foreground no-underline [&_img]:block [&_img]:h-7 [&_img]:w-auto [&_svg]:block [&_svg]:h-7 [&_svg]:w-auto", className), ...props }));
 }
 function NavBarLinks({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "nav-bar-links", className: cn("hidden items-center justify-center gap-1 text-sm text-[var(--nc-body)] lg:inline-flex", 
-        // each link reads as a flat, neutral pill with hover/focus affordance.
-        "[&_a]:rounded-[var(--nc-rounded-sm)] [&_a]:px-3 [&_a]:py-2 [&_a]:text-inherit [&_a]:no-underline", "[&_a:hover]:bg-[var(--nc-canvas-soft-2)] [&_a:hover]:text-foreground", "[&_a:focus-visible]:outline [&_a:focus-visible]:outline-1 [&_a:focus-visible]:[outline-color:var(--ring)] [&_a:focus-visible]:outline-offset-2", className), ...props }));
+    return (_jsx("div", { "data-slot": "nav-bar-links", className: cn("hidden items-center justify-center gap-1 text-sm text-muted-foreground lg:inline-flex", 
+        // each link reads as a flat pill with hover/focus affordance against the glass.
+        "[&_a]:rounded-[var(--nc-rounded-sm)] [&_a]:px-3 [&_a]:py-2 [&_a]:text-inherit [&_a]:no-underline [&_a]:transition-colors", "[&_a:hover]:bg-accent [&_a:hover]:text-foreground", "[&_a[data-active]]:text-foreground", "[&_a:focus-visible]:outline [&_a:focus-visible]:outline-1 [&_a:focus-visible]:[outline-color:var(--ring)] [&_a:focus-visible]:outline-offset-2", className), ...props }));
 }
 function NavBarCta({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "nav-bar-cta", className: cn("inline-flex items-center justify-self-end", className), ...props }));
+    return (_jsx("div", { "data-slot": "nav-bar-cta", className: cn("inline-flex items-center gap-3 justify-self-end", className), ...props }));
 }
 export { NavBar, NavBarLogo, NavBarLinks, NavBarCta };

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,qBAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,qBAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,WAAe,EACf,IAAe,EACf,UAAc,EACd,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,qBAqBzF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,qBAQ1E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAAK,qBAQtF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKrE,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,qBAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,qBAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,WAAe,EACf,IAAe,EACf,UAAc,EACd,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,qBAsBzF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,qBAQ1E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAAK,qBAQtF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/popover.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 import { cn } from "../lib/utils.js";
+import { anchoredOverlayMotion } from "../lib/motion.js";
 function Popover({ ...props }) {
     return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
@@ -8,7 +9,7 @@ function PopoverTrigger({ ...props }) {
     return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-control-padding-inline rounded-2xl border border-border bg-popover p-control-padding-inline text-sm text-popover-foreground shadow-menu outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn("z-50 flex w-72 flex-col gap-control-padding-inline rounded-2xl border border-border bg-popover p-control-padding-inline text-sm text-popover-foreground shadow-menu outline-hidden", anchoredOverlayMotion, className), ...props }) }) }));
 }
 function PopoverHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-0.5 text-sm", className), ...props }));

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

@@ -1,22 +1,17 @@
 import * as React from "react";
 /**
- * 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.
  */
 declare function PricingCard({ className, variant, ...props }: React.ComponentProps<"div"> & {
     variant?: "default" | "featured";

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

@@ -1 +1 @@
-{"version":3,"file":"pricing-card.d.ts","sourceRoot":"","sources":["../../src/components/pricing-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;;GAkBG;AAEH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CAAE,qBAsBpE;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ7E;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ5E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAmBrF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ1E;AAED,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ/E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAoBxF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAI3E;AAED,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,CAAC"}
+{"version":3,"file":"pricing-card.d.ts","sourceRoot":"","sources":["../../src/components/pricing-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;GAaG;AAEH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CAAE,qBAgBpE;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ7E;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ5E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAmBrF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ1E;AAED,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ/E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAkBxF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ3E;AAED,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,CAAC"}

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, };