@nadicodeai/design-system 0.7.0 → 0.8.0

package/AGENTS.md

@@ -14,7 +14,7 @@ Plain imperatives are the default. The few hard prohibitions below use `never`/`
 - Preserve approved `DESIGN.md` token and component families unless the user explicitly approves a palette/component migration. Website/kernel CSS is implementation evidence, not the complete palette authority; never delete tokens because current prototypes do not use them or because `@google/design.md lint` reports them as unused.
 - Name implemented grids, components, modules, and page elements as NadicodeAI-owned primitives; source brands such as Vercel or Attio may appear only in reference notes, never in component names, CSS comments, `data-module` values, or public-facing contracts.
 - Calculate page grids, module spans, seams, borders, and element placement from explicit grid math; never hand-place visual structure by eye.
-- Author CSS-bundle work as a reusable design-system component architecture first, not as showcase/page-specific code. The design-system CSS lives in `src/css/` (`tokens.generated` [built from `DESIGN.md`] + `tokens.local` [hand-authored] / `reset`/`foundation`/`motion`/`layout`/`primitives` + `components/*`, mirrored to `dist/css/` and exported as `@nadicodeai/design-system/css`). Since the Tailwind+shadcn migration (ADR 0007) the bundle ships only framework-agnostic brand/display CSS components: the cascade is `@layer tokens, reset, foundation, motion, layout, primitives, components;` (no `sections` layer), and `components/*` holds the agent-chat CSS component family, the run-state `state-tag` family, the entity-status `status-tag` family, and `image` — the generic marketing/SaaS component CSS and the whole `sections/*` layer retired to React shadcn components in `@nadicodeai/ui`. The delivery tiers map to real authoring homes: tokens → `tokens.generated`/`tokens.local`; page grammar → `layout.css`; CSS primitives/components → `primitives.css` + `components/*`; specimens → `examples/`. Contracted CSS components are paired with `DESIGN.md components:` entries; the three named CSS-internal components are deliberate no-token exceptions. Pages, site-specific page assemblies, and the standard/interactive/section UI belong to consuming surfaces (`../website/`, `../portal/`, sibling Nadia apps) and to the React package (`@nadicodeai/ui`), not this package. Study current source HTML/CSS for approved external references before implementing similar NadicodeAI primitives, then adapt the structure into NadicodeAI-owned tokens, primitives, and components. Specimen HTML demonstrates only already-defined primitives/components; it never invents component geometry, seams, borders, fillers, heights, or responsive behavior inline. The generated token layer (`tokens.generated.css`) and the Tailwind adapter (`nadicode.theme.css`) are emitted by Style Dictionary (`scripts/sd/`, driven from `scripts/build.ts`) as a complete projection of the `@google/design.md` export — never an allowlist or subset; responsive `@media` switching and composed/`calc` vars live in `layout.css`/`tokens.local.css` and reference emitted `--nc-*` tokens only, while the `.nc-type-*` utility classes live in `foundation.css`. Emitted-but-unreferenced tokens are intentional (the contract drives emission, not consumption), and the generated Tailwind adapter owns standard shadcn role maps for both `:root` and `.dark` using generated `--color-*`/`--radius-*` references, plus a small set of `--nc-*` remaps in the `.dark` block (the `state-*`, `selection-*`, and `cross` families → their `--nc-dark-*` counterparts) so design-system CSS components that read those raw brand tokens directly flip on the dark console; `@nadicodeai/ui/globals.css` keeps the Tailwind role bridge plus UI-local product aliases. Correctness is enforced by export-derived structural parity (`tests/guards/token-structural-parity.test.ts` for the `--nc-*` layer; the per-token `@theme` value loops and light/dark role-integrity checks in `tests/guards/tailwind-v4-theme.test.ts` for the adapter), the narrowed two-way parity between `DESIGN.md` component YAML/prose and the retained CSS component surface (`tests/guards/components-yaml-matches-css.test.ts`, ADR 0007 D4), plus consumer discipline (`tests/guards/consumer-css-discipline.test.ts`), not a byte snapshot (ADR 0006 supersedes ADR 0005 D1–D3/D5; ADR 0008 supersedes ADR 0005 D4).
+- Author CSS-bundle work as a reusable design-system component architecture first, not as showcase/page-specific code. The design-system CSS lives in `src/css/` (`tokens.generated` [built from `DESIGN.md`] + `tokens.local` [hand-authored] / `reset`/`foundation`/`motion`/`layout`/`primitives` + `components/*`, mirrored to `dist/css/` and exported as `@nadicodeai/design-system/css`). Since the Tailwind+shadcn migration (ADR 0007) the bundle ships only framework-agnostic brand/display CSS components: the cascade is `@layer tokens, reset, foundation, motion, layout, primitives, components;` (no `sections` layer), and `components/*` holds the agent-chat CSS component family, the run-state `state-tag` family, the entity-status `status-tag` family, and `image` — the generic marketing/SaaS component CSS and the whole `sections/*` layer retired to React shadcn components in `@nadicodeai/ui`. The delivery tiers map to real authoring homes: tokens → `tokens.generated`/`tokens.local`; page grammar → `layout.css`; CSS primitives/components → `primitives.css` + `components/*`; specimens → `examples/`. Contracted CSS components are paired with `DESIGN.md components:` entries; the three named CSS-internal components are deliberate no-token exceptions. Pages, site-specific page assemblies, and the standard/interactive/section UI belong to consuming surfaces (`../website/`, `../portal/`, sibling Nadia apps) and to the React package (`@nadicodeai/ui`), not this package. Study current source HTML/CSS for approved external references before implementing similar NadicodeAI primitives, then adapt the structure into NadicodeAI-owned tokens, primitives, and components. Specimen HTML demonstrates only already-defined primitives/components; it never invents component geometry, seams, borders, fillers, heights, or responsive behavior inline. The generated token layer (`tokens.generated.css`) and the Tailwind adapter (`nadicode.theme.css`) are emitted by Style Dictionary (`scripts/sd/`, driven from `scripts/build.ts`) as a complete projection of the `@google/design.md` export — never an allowlist or subset; responsive `@media` switching and composed/`calc` vars live in `layout.css`/`tokens.local.css` and reference emitted `--nc-*` tokens only, while the `.nc-type-*` utility classes live in `foundation.css`. Emitted-but-unreferenced tokens are intentional (the contract drives emission, not consumption), and the generated Tailwind adapter owns standard shadcn role maps for both `:root` and `.dark` using generated `--color-*`/`--radius-*` references, plus a set of `--nc-*` remaps in the `:root.dark` block (the surface palette — `canvas*`, `ink`, `body`, `muted`, `line`, `warning-soft`/`-deep` — and the `state-*`, `selection-*`, `cross`, and chart families → their `--nc-dark-*` counterparts) so design-system CSS components that read those raw brand tokens directly flip on the dark console; `@nadicodeai/ui/globals.css` keeps the Tailwind role bridge plus UI-local product aliases. Correctness is enforced by export-derived structural parity (`tests/guards/token-structural-parity.test.ts` for the `--nc-*` layer; the per-token `@theme` value loops and light/dark role-integrity checks in `tests/guards/tailwind-v4-theme.test.ts` for the adapter), the narrowed two-way parity between `DESIGN.md` component YAML/prose and the retained CSS component surface (`tests/guards/components-yaml-matches-css.test.ts`, ADR 0007 D4), plus consumer discipline (`tests/guards/consumer-css-discipline.test.ts`), not a byte snapshot (ADR 0006 supersedes ADR 0005 D1–D3/D5; ADR 0008 supersedes ADR 0005 D4).
 - Follow a source-first reference workflow for external visual references: inspect live/source DOM, stylesheet/CSSOM rules, inline styles, custom properties, computed styles, grid tracks, spans, seam ownership, colors, heights, and breakpoints before writing NadicodeAI code. Screenshots are verification evidence only after implementation; never use them as the source for authoring structure, geometry, or CSS.
 - Never derive reusable kernel geometry from screenshots, eyeballing, one-off browser coordinates, or local patch experiments. Browser measurements may verify an implementation after the source CSS/DOM model is understood, but they do not replace reading the source rules that create the behavior.
 - Map every imported visual behavior to either `DESIGN.md`, an existing kernel token/primitive, or an explicit user-approved change before implementation. If the reference leaves a required decision open, or if `DESIGN.md` does not decide it, ask before coding the missing decision, including height/row span, surface color, visual payload, content slots, crosshair placement, and responsive behavior.

package/dist/css/components/approval-gate.css

@@ -56,8 +56,10 @@
   margin-top: 2px;
 }
 
-/* Approve / Edit affordance. Approve is the ink primary; Edit is the canvas
-   secondary. Shape and color reuse the existing chrome button vocabulary. */
+/* Choice affordances. The unmarked button is the ink primary (approve / run);
+   `secondary` is the canvas neutral, `outline` a lighter panel-transparent
+   neutral, and `destructive` carries the error affordance for a deny/reject.
+   Shape and color reuse the existing chrome button vocabulary. */
 .nc-approval-gate-actions button {
   padding: 5px 10px;
   border: var(--nc-guide) solid var(--nc-ink);
@@ -77,6 +79,27 @@
   color: var(--nc-ink);
 }
 
+.nc-approval-gate-actions button[data-variant="outline"] {
+  border-color: var(--nc-line);
+  background: transparent;
+  color: var(--nc-ink);
+}
+
+/* Destructive deny/reject: an error-outlined chip so the panel keeps a single
+   filled primary while the reject reads as destructive, not neutral. Error is
+   not part of the global :root.dark --nc-* remap, so its dark counterpart is
+   flipped here (the state-tag pattern); canvas flips globally. */
+.nc-approval-gate-actions button[data-variant="destructive"] {
+  border-color: var(--nc-error);
+  background: var(--nc-canvas);
+  color: var(--nc-error-deep);
+}
+
+.dark .nc-approval-gate-actions button[data-variant="destructive"] {
+  border-color: var(--nc-dark-error);
+  color: var(--nc-dark-error-deep);
+}
+
 /* Leading affordance marks — Lucide check (Approve) and square-pen (Edit),
    painted via CSS mask with currentColor so each tracks its button's text
    color (canvas on the ink primary, ink on the canvas secondary). */
@@ -97,6 +120,25 @@
   mask-image: url("../../icons/square-pen.svg");
 }
 
+/* Per-choice leading marks for the React multi-choice gate. Keyed on the
+   semantic choice, not the variant, so they override the variant defaults
+   above (equal specificity, later in source) while the two-button HTML
+   Approve/Edit specimens keep check/square-pen. */
+.nc-approval-gate-actions button[data-approval-choice="deny"]::before {
+  -webkit-mask-image: url("../../icons/ban.svg");
+  mask-image: url("../../icons/ban.svg");
+}
+
+.nc-approval-gate-actions button[data-approval-choice="session"]::before {
+  -webkit-mask-image: url("../../icons/clock.svg");
+  mask-image: url("../../icons/clock.svg");
+}
+
+.nc-approval-gate-actions button[data-approval-choice="always"]::before {
+  -webkit-mask-image: url("../../icons/shield.svg");
+  mask-image: url("../../icons/shield.svg");
+}
+
 .nc-approval-gate-actions button:focus-visible {
   outline: var(--nc-focus-ring-width) solid var(--nc-focus-ring);
   outline-offset: 0;

package/dist/tailwind/nadicode.theme.css

@@ -110,6 +110,18 @@
   --nc-chart-div-warm: var(--nc-dark-chart-div-warm);
   --nc-chart-div-mid: var(--nc-dark-chart-div-mid);
   --nc-chart-div-cool: var(--nc-dark-chart-div-cool);
+  --nc-canvas: var(--nc-dark-canvas);
+  --nc-canvas-soft: var(--nc-dark-canvas-soft);
+  --nc-canvas-soft-2: var(--nc-dark-canvas-soft-2);
+  --nc-ink: var(--nc-dark-ink);
+  --nc-body: var(--nc-dark-body);
+  --nc-muted: var(--nc-dark-muted);
+  --nc-line: var(--nc-dark-line);
+  --nc-warning-soft: var(--nc-dark-warning-soft);
+  --nc-warning-deep: var(--nc-dark-warning-deep);
+  --nc-link: var(--nc-dark-link);
+  --nc-link-deep: var(--nc-dark-link-deep);
+  --nc-link-bg-soft: var(--nc-dark-link-bg-soft);
 }
 
 :root {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "publishConfig": {
     "access": "public"