@nadicodeai/ui 9.2.1 → 10.0.1

package/docs/migration/10.0.0.md

@@ -0,0 +1,144 @@
+# Migrating to `@nadicodeai/ui` 10.0.0
+
+This release carries the nadicode design system settled in
+[the ADR](https://github.com/nadicodeai/nadicodeai/blob/main/docs/adr/2026-09-23-the-nadicode-design-system.md):
+the new logo and name, twelve type tokens named by role, two greens, one motion
+law, activity without spinners, the stepped dark ring, three Agent colours, and
+the website's page grammar retired. `@nadicodeai/ui` 10.0.0 requires
+`@nadicodeai/design-system` 10.0.0; the two packages are released in lockstep.
+The type renames are the largest break for consumers; start there.
+
+## Type tokens
+
+Twelve sizes named by the role they play, Geist and Geist Mono only. Strong is
+a weight, not a token: a 500 run of body copy is `body-md` with
+`font-weight: 500`. Rename the `.nc-type-*` class and the `--nc-type-*` tokens
+at every call site.
+
+| Removed | Use instead |
+| --- | --- |
+| `title-lg` | `display-md` |
+| `title-md` | `heading-lg` |
+| `title-sm` | `heading-md` |
+| `display-md` | `heading-md` |
+| `display-sm` | `heading-sm` |
+| `body-md-strong` | `body-md` plus `font-weight: 500` |
+| `body-sm-strong` | `body-sm` plus `font-weight: 500` |
+| `caption-strong` | `caption` plus `font-weight: 500` |
+| `button-lg` | `body-md` plus `font-weight: 500` |
+| `button-md` | `body-sm` plus `font-weight: 500` |
+| `caption-mono` | `label-mono` |
+
+`display-xl`, `display-lg`, `body-lg`, `body-md`, `body-sm`, `caption` and
+`code` keep their names. `display-md` is now 40/42 rather than 24/32, so a call
+site that used the old small display tier moves to `heading-md`. Tracking is a
+display-tier exception and nothing else: the three display sizes run from
+-0.035em at 72px to -0.025em at 40px, and every other tier is `0px`.
+
+## Colour tokens
+
+Two greens, and only two: `link` carries text, identity verde carries marks.
+
+| Removed | Use instead |
+| --- | --- |
+| `--nc-primary` | `--nc-identity-cobalto` for a brand mark, `--nc-link` for text, or the shadcn `--primary` role for the neutral action |
+| `--nc-dark-primary` | as above; the mode layer maps `--nc-identity-cobalto` in both themes |
+| `--nc-verde-vivo` | `--nc-identity-verde` |
+| `--nc-dark-verde-vivo` | `--nc-identity-verde` |
+
+The shadcn `primary` role is unchanged and still resolves to the neutral action
+family. `success` and `state-complete` are unchanged.
+
+## Motion tokens
+
+| Removed | Use instead |
+| --- | --- |
+| `--nc-duration-spin` | nothing; a busy spinner is not an Agent |
+| `--nc-duration-typing` | nothing; the typewriter line is retired |
+| `--nc-duration-shimmer` | nothing; the shimmer systems are retired |
+| `--nc-duration-pulse` | `--nc-duration-wait`, for the one waiting line |
+| `.nc-anim-typing`, `.nc-anim-pulse`, `.nc-anim-shimmer` | nothing; only Agents move on their own |
+
+One default transition in every product, `confirm` on `out-strong`, is declared
+once in the shipped `motion.css`. One reduced-motion policy replaces the
+per-component switches: movement stops and paint continues, so an overlay keeps
+its fade and only the transform or scale it would have travelled is dropped. A
+component that answered reduced motion with `motion-reduce:transition-none` on a
+paint-only transition should drop that class; one on a mixed transition should
+narrow to `motion-reduce:transition-opacity` instead.
+
+## Elevation
+
+In dark mode the four rungs step their ring: resting 12%, raised 16%, floating
+22%, modal 28% white, in place of one 18% ring on every rung. Light mode and the
+shadow falloff are unchanged, and the `nc-elevation-*` utilities are unchanged,
+so a consumer that uses the rung by name needs no edit.
+
+## Agent colours
+
+`agentOrbColors` is `cobalto`, `verde` and `arancio`, beside the inherited
+default. Rosso left the picker because it is exactly the error red, and a red
+Agent beside a red status badge read as a broken Agent. `agentOrbColorValues`
+and `agentOrbColorTokens` lose their `rosso` entry with it, so a caller that
+indexed either by a stored string must go through `resolveAgentOrb`, which maps
+a stored rosso, by name or by the `#d3302f` hex, to arancio. The retired
+spelling is exported as `retiredAgentOrbColorValues` for fixtures and tests.
+Nadia's ribbon keeps its rosso stripe.
+
+## Removed components
+
+| Removed | Use instead |
+| --- | --- |
+| `components/brand` (`BrandLockup`) | `BrandWordmark` |
+
+There is no lockup any more. The wordmark names the company in full and the n
+is already inside it, so a placement carrying `BrandMark` and `BrandWordmark`
+together draws the letter twice; pick the one form the space allows.
+`BrandMark` and `BrandWordmark` keep their props, and their default accessible
+name is now `nadicode`.
+
+## Removed assets
+
+The design system publishes seven files, as SVG and as transparent PNG, under
+the names the ADR gives them. Append `.png` to any route for the raster.
+
+| Removed | Use instead |
+| --- | --- |
+| `assets/logo-lockup`, `assets/logo-wordmark` | `assets/logo` |
+| `assets/logo-lockup-inverse`, `assets/logo-wordmark-inverse` | `assets/logo-white` |
+| `assets/logo-lockup-mono`, `assets/logo-wordmark-mono` | `assets/logo-one-ink` |
+| `assets/logo-mark` | `assets/mark` |
+| `assets/logo-mark-inverse` | `assets/mark-white` |
+| `assets/logo-mark-mono` | `assets/mark`; the n is one ink already |
+| `assets/logo-lockup-on-verde`, `assets/logo-mark-on-verde`, `assets/logo-wordmark-on-verde` | No replacement. The logo is never mounted on a verde field. |
+
+Added: `assets/logo-one-ink-white`, the one-ink wordmark on a dark ground, and
+`assets/app-icon`, the white n on the cobalto tile at 1024 for an application
+icon slot. The one-ink files exist for embossing, stamps and one-colour print,
+where a second colour cannot be laid down.
+
+`assets/logo-geometry` keeps its route and changes shape. `LogoPaints` is now a
+record of paint roles, `ink` for every stroked letter, `dot` for the dot over
+the i and `tile` for the icon's field, and a geometry that names a role the
+caller did not supply throws instead of rendering an unpainted shape.
+`resolveLogoGeometry` no longer takes `idPrefix`: the geometry emits no DOM id,
+so two logos on a page cannot collide. `logoLockupGeometry` is removed;
+`logoWordmarkGeometry` and `logoMarkGeometry` remain and `logoIconGeometry`
+is added.
+
+## Tokens
+
+| Added | Why |
+| --- | --- |
+| `--nc-logo-dot` | The dot's colour, #1e3cff, and the only token a consumer paints it with. |
+| `--nc-logo-dot` under `.dark` | #4d6bff, so the dot does not sink into black. |
+
+A consumer that painted the logo with `--nc-primary` moves to `--nc-logo-dot`.
+The generated mode layer flips it under any dark ancestor, so one rendered form
+serves both grounds.
+
+## The name
+
+The company is nadicode, lowercase. Package names and domains are unchanged;
+the accessible name of every shipped logo file and both React adapters is now
+`nadicode`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "9.2.1",
+  "version": "10.0.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -20,9 +20,9 @@
       "types": "./dist/agents.d.ts",
       "import": "./dist/agents.js"
     },
-    "./activity": {
-      "types": "./dist/activity.d.ts",
-      "import": "./dist/activity.js"
+    "./agent-orb": {
+      "types": "./dist/agent-orb.d.ts",
+      "import": "./dist/agent-orb.js"
     },
     "./hooks": {
       "types": "./dist/hooks/index.d.ts",
@@ -43,7 +43,9 @@
     "./components/*": {
       "types": "./dist/components/*.d.ts",
       "import": "./dist/components/*.js"
-    }
+    },
+    "./assets/brand/index.json": "./dist/assets/brand/index.json",
+    "./assets/brand/*": "./dist/assets/brand/*"
   },
   "files": [
     "dist",
@@ -70,7 +72,7 @@
     "@assistant-ui/react": "0.15.21",
     "@assistant-ui/react-markdown": "0.14.16",
     "@base-ui/react": "^1.8.0",
-    "@nadicodeai/design-system": "9.2.1",
+    "@nadicodeai/design-system": "10.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -89,7 +91,6 @@
     "tailwind-merge": "^3.7.0",
     "thinking-orbs": "0.3.1",
     "tw-animate-css": "^1.4.0",
-    "tw-shimmer": "0.4.13",
     "zustand": "^5.0.14"
   },
   "peerDependencies": {

package/dist/activity.d.ts

@@ -1,2 +0,0 @@
-export { mountActivityOrb, type ActivityKind, type ActivityOrbSize } from "./internal/activity-orb.js";
-//# sourceMappingURL=activity.d.ts.map

package/dist/activity.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"activity.d.ts","sourceRoot":"","sources":["../src/activity.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,KAAK,YAAY,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/activity.js

@@ -1,2 +0,0 @@
-// The same activity renderer for native startup HTML, before React is loaded.
-export { mountActivityOrb } from "./internal/activity-orb.js";

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

@@ -1,12 +0,0 @@
-import * as React from "react";
-type ActionBandProps = React.ComponentProps<"section"> & {
-    /** Retained for consumer compatibility; the V5 band has a single fixed layout. */
-    active?: "inset" | "full";
-};
-declare function ActionBand({ active, className, children, ...props }: ActionBandProps): React.JSX.Element;
-declare function ActionBandContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function ActionBandCopy({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function ActionBandHeading({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
-declare function ActionBandVisual({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { ActionBand, ActionBandContent, ActionBandCopy, ActionBandHeading, ActionBandVisual };
-//# sourceMappingURL=action-band.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"action-band.d.ts","sourceRoot":"","sources":["../../src/components/action-band.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8C/B,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG;IACvD,kFAAkF;IAClF,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC3B,CAAC;AAEF,iBAAS,UAAU,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,qBA0B7E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW9E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAE3E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAW7E;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7E;AAED,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,cAAc,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/action-band.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../lib/utils.js";
-/**
- * action-band — the full-bleed on-verde conversion band (V5 · B19).
- *
- * A solid brand-verde field (`bg-primary`) carrying one statement and one action,
- * one statement, one button. The band bleeds full width; a
- * centred rail (`max-w-[1200px]`, left/right hairlines) holds the content, and a
- * crosshair marks the STRUCTURAL intersection of the rail's top edge and left edge
- * — it is never decorative. A fractal-noise overlay adds grain TEXTURE only (an
- * inline feTurbulence data-URI, carrying no colour value), layered under the copy.
- *
- * Every mark on the verde field — text, heading, crosshair, and rail hairlines —
- * is the ink primary-foreground role, NOT `text-foreground`. `foreground` flips to
- * near-white under a dark ancestor while `bg-primary` stays a bright verde field, so
- * ink text would turn near-white-on-verde (≈1.7:1). `primary-foreground` is ink in
- * both modes and the build gate guarantees it clears on the primary field. Token-only;
- * no raw colour values, no gradients, and no `dark:` styling.
- *
- * COMPAT: the `active` prop and the `ActionBand{Content,Copy,Visual}` parts are kept
- * so existing consumers still compile; their roles are re-cut for the V5 band
- * (Content = padded stack, Copy = rich-content wrapper, Visual = the trailing
- * action/media slot). `ActionBandHeading` owns the simple V5 statement treatment.
- * The prior two-cell ink stage is retired.
- */
-// Grain texture only — feTurbulence fractal noise, no colour literal (`#` encoded
-// as `%23`), so the raw-colour ban has nothing to report here.
-const GRAIN_TEXTURE = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E\")";
-function ActionBandCrosshair() {
-    return (_jsxs("span", { "data-slot": "action-band-crosshair", "aria-hidden": "true", className: "pointer-events-none absolute left-0 top-0 z-20 size-4 -translate-x-1/2 -translate-y-1/2", children: [_jsx("span", { className: "absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-primary-foreground" }), _jsx("span", { className: "absolute left-0 top-1/2 h-px w-full -translate-y-1/2 bg-primary-foreground" })] }));
-}
-function ActionBand({ active, className, children, ...props }) {
-    void active;
-    return (_jsxs("section", { "data-slot": "action-band", className: cn("relative isolate overflow-hidden bg-primary text-primary-foreground", className), ...props, children: [_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-0 opacity-20", style: { backgroundImage: GRAIN_TEXTURE } }), _jsxs("div", { "data-slot": "action-band-rail", className: "relative z-10 mx-auto w-full max-w-[1200px] border-x border-primary-foreground/15", children: [_jsx(ActionBandCrosshair, {}), children] })] }));
-}
-function ActionBandContent({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "action-band-content", className: cn("flex flex-col items-start gap-6 px-[clamp(24px,5vw,64px)] py-[clamp(64px,10vw,144px)]", className), ...props }));
-}
-function ActionBandCopy({ className, ...props }) {
-    return _jsx("div", { "data-slot": "action-band-copy", className: cn("min-w-0", className), ...props });
-}
-function ActionBandHeading({ className, ...props }) {
-    return (_jsx("h2", { "data-slot": "action-band-heading", className: cn("nc-type-display-md max-w-[24ch] text-balance text-primary-foreground", className), ...props }));
-}
-function ActionBandVisual({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "action-band-visual", className: cn("flex flex-wrap items-center gap-3", className), ...props }));
-}
-export { ActionBand, ActionBandContent, ActionBandCopy, ActionBandHeading, ActionBandVisual };

package/dist/components/activity-orb.d.ts

@@ -1,21 +0,0 @@
-import { type CSSProperties } from "react";
-import { type ActivityKind, type ActivityOrbSize } from "../internal/activity-orb.js";
-export type { ActivityKind, ActivityOrbSize } from "../internal/activity-orb.js";
-export type ActivityOrbProps = {
-    activity: ActivityKind;
-    className?: string;
-    style?: CSSProperties;
-    /** Freeze the animation for a preview or a user-controlled motion pause. */
-    paused?: boolean;
-    /** 20 inline, 64 within a region, 88 on an application's entry screen. */
-    size?: ActivityOrbSize;
-} & ({
-    decorative: true;
-    label?: never;
-} | {
-    decorative?: false;
-    label: string;
-});
-/** The shared system-activity family. The consumer owns the actual operation. */
-export declare function ActivityOrb({ activity, className, decorative, label, paused, size, style, ...props }: ActivityOrbProps): import("react").JSX.Element;
-//# sourceMappingURL=activity-orb.d.ts.map

package/dist/components/activity-orb.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"activity-orb.d.ts","sourceRoot":"","sources":["../../src/components/activity-orb.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAqB,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,eAAe,EAAoB,MAAM,yBAAyB,CAAC;AAGpG,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,GAAG,CAAC;IAAE,UAAU,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElF,iFAAiF;AACjF,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,UAAkB,EAClB,KAAK,EACL,MAAc,EACd,IAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAmClB"}

package/dist/components/activity-orb.js

@@ -1,26 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { mountActivityOrb } from "../internal/activity-orb.js";
-import { cn } from "../lib/utils.js";
-/** The shared system-activity family. The consumer owns the actual operation. */
-export function ActivityOrb({ activity, className, decorative = false, label, paused = false, size = 20, style, ...props }) {
-    const canvas = useRef(null);
-    const renderer = useRef(null);
-    const initiallyPaused = useRef(paused);
-    useEffect(() => {
-        if (!canvas.current)
-            return;
-        const mounted = mountActivityOrb(canvas.current, activity, size, initiallyPaused.current);
-        renderer.current = mounted;
-        return () => {
-            mounted.destroy();
-            renderer.current = null;
-        };
-    }, [activity, size]);
-    useEffect(() => {
-        initiallyPaused.current = paused;
-        renderer.current?.setPaused(paused);
-    }, [activity, paused, size]);
-    return (_jsx("canvas", { ...props, "aria-hidden": decorative || undefined, "aria-label": decorative ? undefined : label, className: cn("inline-block shrink-0 align-middle", className), "data-activity": activity, "data-slot": "activity-orb", height: size, ref: canvas, role: decorative ? undefined : "img", style: { ...style, height: size, width: size }, width: size, children: decorative ? null : label }));
-}

package/dist/components/benefits-bento.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-type BenefitItem = {
-    title: string;
-    body: string;
-};
-declare function BenefitsBento({ kicker, title, body, image, benefits, ...props }: React.ComponentProps<"div"> & {
-    kicker: string;
-    title: string;
-    body: string;
-    image: React.ReactNode;
-    benefits: BenefitItem[];
-}): React.JSX.Element;
-export { BenefitsBento };
-export type { BenefitItem };
-//# sourceMappingURL=benefits-bento.d.ts.map

package/dist/components/benefits-bento.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"benefits-bento.d.ts","sourceRoot":"","sources":["../../src/components/benefits-bento.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,WAAW,EAAE,CAAC;CACzB,qBAuBA;AAED,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/benefits-bento.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Bento, BentoItem } from "./bento.js";
-function BenefitsBento({ kicker, title, body, image, benefits, ...props }) {
-    return (_jsx("div", { "data-slot": "benefits-bento", ...props, children: _jsxs(Bento, { columns: 2, children: [_jsx(BentoItem, { flush: true, stretch: true, children: image }), _jsxs(BentoItem, { children: [_jsx("p", { className: "nc-type-caption-mono text-muted-foreground uppercase", children: kicker }), _jsx("h2", { className: "nc-type-title-md text-foreground", children: title }), _jsx("p", { className: "nc-type-body-md text-[var(--nc-body)]", children: body }), _jsx("div", { className: "grid gap-4 pt-2 sm:grid-cols-2", children: benefits.map((benefit) => (_jsxs("div", { className: "grid gap-1", children: [_jsx("h3", { className: "nc-type-body-md-strong text-foreground", children: benefit.title }), _jsx("p", { className: "nc-type-body-sm text-[var(--nc-body)]", children: benefit.body })] }, benefit.title))) })] })] }) }));
-}
-export { BenefitsBento };

package/dist/components/bento.d.ts

@@ -1,39 +0,0 @@
-import * as React from "react";
-/**
- * bento — NadicodeAI's bordered marketing grid grammar.
- *
- * This is the reusable shadcn-style source component for bento sections. The
- * grid owns seams once (`gap-px bg-border`, via `SeamGrid` with no `surface`);
- * cells are borderless fills. Pages choose content and spans, not border math.
- *
- * `tone="night"` renders the always-dark V5 bento: rather than a `dark:` utility
- * (forbidden) it sets the `dark` ancestor class on the grid root, so the seam
- * (`bg-border`), the `bg-card` cell fills, and the `BentoIndex`/`BentoTitle`/
- * `BentoBody` roles all resolve to their dark values. Only standard shadcn role
- * utilities are composed. Token-only.
- */
-declare const spanClasses: Record<number, string>;
-declare const columnClasses: Record<number, string>;
-declare function Bento({ className, height, columns, tone, ...props }: React.ComponentProps<"div"> & {
-    height?: "auto" | "primary" | "secondary";
-    columns?: keyof typeof columnClasses;
-    tone?: "canvas" | "night";
-}): React.JSX.Element;
-declare function BentoItem({ className, span, surface, flush, stretch, hover, ...props }: React.ComponentProps<"div"> & {
-    span?: keyof typeof spanClasses;
-    surface?: "card" | "soft" | "transparent";
-    flush?: boolean;
-    stretch?: boolean;
-    hover?: boolean;
-}): React.JSX.Element;
-declare function BentoIndex({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function BentoTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
-declare function BentoBody({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
-declare function BentoCopy({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function BentoMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function BentoDemo({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function BentoDivider({ label, className, ...props }: React.ComponentProps<"div"> & {
-    label?: string;
-}): React.JSX.Element;
-export { Bento, BentoItem, BentoIndex, BentoTitle, BentoBody, BentoCopy, BentoMedia, BentoDemo, BentoDivider, };
-//# sourceMappingURL=bento.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"bento.d.ts","sourceRoot":"","sources":["../../src/components/bento.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;GAYG;AAEH,QAAA,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAavC,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAKzC,CAAC;AAEF,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,MAAe,EACf,OAAY,EACZ,IAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IACrC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC3B,qBAkBA;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,IAAI,EACJ,OAAgB,EAChB,KAAa,EACb,OAAe,EACf,KAAa,EACb,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,qBAoBA;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQtE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQpE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAItE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQtE;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,qBAUlD;AAED,OAAO,EACL,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAS,EACT,YAAY,GACb,CAAC"}

package/dist/components/bento.js

@@ -1,70 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../lib/utils.js";
-import { SeamGrid } from "./seam-grid.js";
-/**
- * bento — NadicodeAI's bordered marketing grid grammar.
- *
- * This is the reusable shadcn-style source component for bento sections. The
- * grid owns seams once (`gap-px bg-border`, via `SeamGrid` with no `surface`);
- * cells are borderless fills. Pages choose content and spans, not border math.
- *
- * `tone="night"` renders the always-dark V5 bento: rather than a `dark:` utility
- * (forbidden) it sets the `dark` ancestor class on the grid root, so the seam
- * (`bg-border`), the `bg-card` cell fills, and the `BentoIndex`/`BentoTitle`/
- * `BentoBody` roles all resolve to their dark values. Only standard shadcn role
- * utilities are composed. Token-only.
- */
-const spanClasses = {
-    1: "lg:col-span-1",
-    2: "lg:col-span-2",
-    3: "lg:col-span-3",
-    4: "lg:col-span-4",
-    5: "lg:col-span-5",
-    6: "lg:col-span-6",
-    7: "lg:col-span-7",
-    8: "lg:col-span-8",
-    9: "lg:col-span-9",
-    10: "lg:col-span-10",
-    11: "lg:col-span-11",
-    12: "lg:col-span-12",
-};
-const columnClasses = {
-    2: "grid-cols-1 md:grid-cols-2",
-    3: "grid-cols-1 md:grid-cols-3",
-    4: "grid-cols-1 md:grid-cols-4",
-    12: "grid-cols-1 lg:grid-cols-12",
-};
-function Bento({ className, height = "auto", columns = 12, tone = "canvas", ...props }) {
-    return (_jsx(SeamGrid, { "data-slot": "bento", "data-height": height, "data-tone": tone, className: cn("items-stretch", 
-        // always-dark V5 bento: flip roles via the ancestor class, not `dark:`.
-        tone === "night" && "dark", columnClasses[columns], height === "primary" && "lg:h-[var(--nc-h-bento-primary)]", height === "secondary" && "lg:h-[var(--nc-h-bento-secondary)]", className), ...props }));
-}
-function BentoItem({ className, span, surface = "card", flush = false, stretch = false, hover = false, ...props }) {
-    return (_jsx("div", { "data-slot": "bento-item", "data-surface": surface, className: cn("nc-panel-cell relative min-w-0 overflow-hidden", span ? spanClasses[span] : null, surface === "card" && "bg-card", 
-        // `muted` (== canvas-soft) flips with any `.dark` ancestor.
-        surface === "soft" && "bg-muted", 
-        // V5 hover surface shift: card fill lifts toward the muted role.
-        hover && "transition-colors hover:bg-muted", flush && "!p-0", stretch && "items-stretch ![align-content:stretch] ![grid-template-rows:minmax(0,1fr)]", className), ...props }));
-}
-function BentoIndex({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "bento-index", className: cn("nc-type-caption-mono text-primary", className), ...props }));
-}
-function BentoTitle({ className, ...props }) {
-    return (_jsx("h3", { "data-slot": "bento-title", className: cn("nc-type-body-md-strong text-foreground", className), ...props }));
-}
-function BentoBody({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "bento-body", className: cn("nc-type-body-sm text-muted-foreground", className), ...props }));
-}
-function BentoCopy({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "bento-copy", className: cn("relative z-10 grid gap-4", className), ...props }));
-}
-function BentoMedia({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "bento-media", className: cn("grid min-h-0 items-stretch", className), ...props }));
-}
-function BentoDemo({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "bento-demo", className: cn("grid min-h-0 items-stretch", className), ...props }));
-}
-function BentoDivider({ label, className, ...props }) {
-    return (_jsx("div", { "data-slot": "bento-divider", className: cn("grid bg-card", className), ...props, children: _jsx("div", { className: "nc-dotted-field grid min-h-[calc(var(--nc-h-bento-strip)*2)] place-items-center bg-card", children: label ? (_jsx("span", { className: "nc-type-caption-mono text-muted-foreground uppercase", children: label })) : null }) }));
-}
-export { Bento, BentoItem, BentoIndex, BentoTitle, BentoBody, BentoCopy, BentoMedia, BentoDemo, BentoDivider, };

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

@@ -1,30 +0,0 @@
-import * as React from "react";
-/**
- * card-marketing — the self-contained marketing feature card (replaces the retired
- * `.nc-card-marketing` + its `data-size="lg"` / `data-surface="soft"` / media-slot
- * variants).
- *
- * Unlike the seam-free grid fills (stat-block / quote-card / logo-tile / fact-cell,
- * which are square-cornered for a holding grid), card-marketing is a SELF-CONTAINED
- * rounded card: it owns its full outline — exactly one `line` hairline border and
- * its own `rounded-md` radius — and is laid out in a flow/flex layout with
- * transparent gaps, never inside a seam-painting grid. The optional media slot draws
- * exactly one inner seam (its own bottom border); `overflow-hidden` clips the media's
- * square top corners to the card radius (the card owns the outer radius; the media
- * never re-rounds it). No other layer repeats either coordinate.
- *
- * `size="lg"` steps up to larger padding; `surface="soft"` uses the
- * `canvas-soft` fill. Server-renderable: the media-present padding compression is a
- * `:has()` variant and the title/media sizing is driven by `data-size` descendant
- * selectors on the parent — no client context. Token-only; no `dark:` styling.
- */
-declare function CardMarketing({ className, size, surface, ...props }: React.ComponentProps<"div"> & {
-    size?: "default" | "lg";
-    surface?: "canvas" | "soft";
-}): React.JSX.Element;
-declare function CardMarketingMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CardMarketingEyebrow({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
-declare function CardMarketingTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
-declare function CardMarketingBody({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
-export { CardMarketing, CardMarketingMedia, CardMarketingEyebrow, CardMarketingTitle, CardMarketingBody, };
-//# sourceMappingURL=card-marketing.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"card-marketing.d.ts","sourceRoot":"","sources":["../../src/components/card-marketing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;;GAkBG;AAEH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC7B,qBA2BA;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW/E;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ/E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ9E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ5E;AAED,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,GAClB,CAAC"}

package/dist/components/card-marketing.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../lib/utils.js";
-/**
- * card-marketing — the self-contained marketing feature card (replaces the retired
- * `.nc-card-marketing` + its `data-size="lg"` / `data-surface="soft"` / media-slot
- * variants).
- *
- * Unlike the seam-free grid fills (stat-block / quote-card / logo-tile / fact-cell,
- * which are square-cornered for a holding grid), card-marketing is a SELF-CONTAINED
- * rounded card: it owns its full outline — exactly one `line` hairline border and
- * its own `rounded-md` radius — and is laid out in a flow/flex layout with
- * transparent gaps, never inside a seam-painting grid. The optional media slot draws
- * exactly one inner seam (its own bottom border); `overflow-hidden` clips the media's
- * square top corners to the card radius (the card owns the outer radius; the media
- * never re-rounds it). No other layer repeats either coordinate.
- *
- * `size="lg"` steps up to larger padding; `surface="soft"` uses the
- * `canvas-soft` fill. Server-renderable: the media-present padding compression is a
- * `:has()` variant and the title/media sizing is driven by `data-size` descendant
- * selectors on the parent — no client context. Token-only; no `dark:` styling.
- */
-function CardMarketing({ className, size = "default", surface = "canvas", ...props }) {
-    return (_jsx("div", { "data-slot": "card-marketing", "data-size": size, "data-surface": surface, className: cn("grid content-start overflow-hidden rounded-md border border-border text-foreground", surface === "soft" ? "bg-[var(--nc-canvas-soft)]" : "bg-card", size === "default" && [
-            "gap-3 p-6",
-            // media present -> compress padding; the media insets follow (below).
-            "has-[[data-slot=card-marketing-media]]:gap-3 has-[[data-slot=card-marketing-media]]:p-4",
-            "[&_[data-slot=card-marketing-title]]:text-xl",
-            "[&_[data-slot=card-marketing-media]]:-mx-4 [&_[data-slot=card-marketing-media]]:-mt-4 [&_[data-slot=card-marketing-media]]:mb-1",
-        ], size === "lg" && [
-            "gap-4 p-8",
-            "has-[[data-slot=card-marketing-media]]:p-6",
-            "[&_[data-slot=card-marketing-title]]:text-2xl",
-            "[&_[data-slot=card-marketing-media]]:-mx-6 [&_[data-slot=card-marketing-media]]:-mt-6 [&_[data-slot=card-marketing-media]]:mb-1.5",
-        ], className), ...props }));
-}
-function CardMarketingMedia({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-marketing-media", className: cn("grid min-h-[132px] place-items-center border-b border-border bg-[var(--nc-canvas-soft)] text-muted-foreground", className), ...props }));
-}
-function CardMarketingEyebrow({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "card-marketing-eyebrow", className: cn("m-0 font-mono text-xs font-medium uppercase text-muted-foreground", className), ...props }));
-}
-function CardMarketingTitle({ className, ...props }) {
-    return (_jsx("h3", { "data-slot": "card-marketing-title", className: cn("m-0 font-semibold text-foreground", className), ...props }));
-}
-function CardMarketingBody({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "card-marketing-body", className: cn("m-0 text-[var(--nc-body)]", className), ...props }));
-}
-export { CardMarketing, CardMarketingMedia, CardMarketingEyebrow, CardMarketingTitle, CardMarketingBody, };

package/dist/components/code-editor-mockup.d.ts

@@ -1,25 +0,0 @@
-import * as React from "react";
-/**
- * code-editor-mockup — dark code/terminal preview surface (replaces the retired
- * `.nc-code-editor-mockup`). The brand's technical marketing visual: a dark window
- * (the ink/primary role) with a chrome/title bar over a mono code body. For
- * technical examples, not generic decoration.
- *
- * SINGLE-OWNER SEAMS: the chrome row owns exactly ONE inner hairline — its own
- * bottom border — between itself and the code body. The outer `rounded-md` radius
- * is owned once by the root, and `overflow-hidden` clips the chrome's square top
- * corners to it. The on-dark hairline + dots + muted-on-dark tints are all DERIVED
- * from the brand `line` / `canvas` / `ink` tokens via `color-mix` (the same family
- * the retired dark sections use), so no raw literal is introduced. The dots are
- * NadicodeAI-monochrome, never the macOS traffic-light colours. Token-only;
- * no `dark:` styling.
- */
-declare function CodeEditorMockup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CodeEditorMockupChrome({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CodeEditorMockupTitle({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function CodeEditorMockupBody({ className, ...props }: React.ComponentProps<"pre">): React.JSX.Element;
-declare function CodeEditorMockupLine({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function CodeEditorMockupGutter({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function CodeEditorMockupComment({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-export { CodeEditorMockup, CodeEditorMockupChrome, CodeEditorMockupTitle, CodeEditorMockupBody, CodeEditorMockupLine, CodeEditorMockupGutter, CodeEditorMockupComment, };
-//# sourceMappingURL=code-editor-mockup.d.ts.map

package/dist/components/code-editor-mockup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-editor-mockup.d.ts","sourceRoot":"","sources":["../../src/components/code-editor-mockup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;GAcG;AAWH,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7E;AAED,iBAAS,sBAAsB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAkB7F;AAED,iBAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAWnF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWjF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAElF;AAED,iBAAS,sBAAsB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAYpF;AAED,iBAAS,uBAAuB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAQrF;AAED,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,GACxB,CAAC"}