@nadicodeai/ui 0.1.1 → 0.3.0

package/dist/lib/agent-work-state.js

@@ -0,0 +1,36 @@
+/**
+ * Internal seam for the `AgentWorkState` presentation contract.
+ *
+ * This module is the ONE place a work state's icon, ARIA `role`, and
+ * busy/motion signal are decided. Every caller (`agent-message.tsx`,
+ * `agent-thread.tsx`, `state-notice.tsx`) reads `statePresentation` instead
+ * of keeping its own copy of the icon table or the role/busy rule, so a
+ * future state's presentation rule has exactly one place to be added or
+ * fixed.
+ *
+ * This is NOT part of the public package surface. It has no `exports`
+ * subpath, matching `agent-attachment.ts` and `seam.ts` in this directory.
+ *
+ * Dependency direction is one-way: components import this module; this
+ * module never imports a component (no cycle).
+ */
+import { AlertTriangleIcon, ClockIcon, FileWarningIcon, LoaderCircleIcon, RefreshCwIcon, ShieldXIcon, } from "lucide-react";
+const presentationByState = {
+    fatal: { busy: false, icon: FileWarningIcon, role: "alert" },
+    interrupted: { busy: false, icon: AlertTriangleIcon, role: "status" },
+    "permission-denied": { busy: false, icon: ShieldXIcon, role: "alert" },
+    queued: { busy: false, icon: ClockIcon, role: "status" },
+    retryable: { busy: false, icon: RefreshCwIcon, role: "status" },
+    streaming: { busy: true, icon: LoaderCircleIcon, role: "status" },
+};
+/**
+ * statePresentation is the single source of truth for a presentable
+ * `AgentWorkState`'s icon, ARIA `role`, and busy/motion signal. Icon values
+ * reproduce `agent-message.tsx`'s `stateMeta` and `agent-thread.tsx`'s
+ * `threadStateDefaults` (confirmed byte-identical icon-for-icon); `role`
+ * and `busy` reproduce `state-notice.tsx`'s inline rules verbatim.
+ */
+function statePresentation(state) {
+    return presentationByState[state];
+}
+export { statePresentation };

package/dist/lib/seam.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Internal seam helper for the "gap-as-seam" grid mechanics.
+ *
+ * This module is the ONE place the ink seam `color-mix(...)` string lives, so a
+ * typo can no longer silently break one band's seam while the others stay
+ * correct. `SeamGrid` (the public primitive) and the `logo-band` grid owner both
+ * derive their seam colour from `seamSurfaceClass` here.
+ *
+ * SINGLE-OWNER SEAM: a `grid` with `gap-px` lets the panel paint one hairline at
+ * every cell boundary while borderless, square-cornered cells fill on top, so no
+ * coordinate ever carries two lines. The seam COLOUR is the only thing that flips
+ * with `surface`: canvas paints the brand `line` via `bg-border`; ink mixes the
+ * line toward the ink role so the seam stays a seam and never changes weight.
+ * Token-only; no `dark:` styling.
+ *
+ * This is NOT part of the public package surface. It has no `exports` subpath, so
+ * consumers couple to the `SeamGrid` component contract rather than to the exact
+ * arbitrary Tailwind class string. Keep it that way.
+ */
+type SeamSurface = "canvas" | "ink";
+/**
+ * seamSurfaceClass is the single source for the seam colour class. Internal code
+ * reaches for this (or `SeamGrid`, which wraps it) instead of hand-copying the ink
+ * `color-mix(...)` string into another grid owner.
+ */
+declare function seamSurfaceClass(surface: SeamSurface): string;
+export { seamSurfaceClass };
+export type { SeamSurface };
+//# sourceMappingURL=seam.d.ts.map

package/dist/lib/seam.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seam.d.ts","sourceRoot":"","sources":["../../src/lib/seam.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,KAAK,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEnC;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,CAItD;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA;AAC3B,YAAY,EAAE,WAAW,EAAE,CAAA"}

package/dist/lib/seam.js

@@ -0,0 +1,30 @@
+/**
+ * Internal seam helper for the "gap-as-seam" grid mechanics.
+ *
+ * This module is the ONE place the ink seam `color-mix(...)` string lives, so a
+ * typo can no longer silently break one band's seam while the others stay
+ * correct. `SeamGrid` (the public primitive) and the `logo-band` grid owner both
+ * derive their seam colour from `seamSurfaceClass` here.
+ *
+ * SINGLE-OWNER SEAM: a `grid` with `gap-px` lets the panel paint one hairline at
+ * every cell boundary while borderless, square-cornered cells fill on top, so no
+ * coordinate ever carries two lines. The seam COLOUR is the only thing that flips
+ * with `surface`: canvas paints the brand `line` via `bg-border`; ink mixes the
+ * line toward the ink role so the seam stays a seam and never changes weight.
+ * Token-only; no `dark:` styling.
+ *
+ * This is NOT part of the public package surface. It has no `exports` subpath, so
+ * consumers couple to the `SeamGrid` component contract rather than to the exact
+ * arbitrary Tailwind class string. Keep it that way.
+ */
+/**
+ * seamSurfaceClass is the single source for the seam colour class. Internal code
+ * reaches for this (or `SeamGrid`, which wraps it) instead of hand-copying the ink
+ * `color-mix(...)` string into another grid owner.
+ */
+function seamSurfaceClass(surface) {
+    return surface === "ink"
+        ? "bg-[color-mix(in_srgb,var(--nc-line)_40%,var(--nc-ink))]"
+        : "bg-border";
+}
+export { seamSurfaceClass };

package/dist/lib/theme-mode.d.ts

@@ -0,0 +1,4 @@
+export declare const themeModes: readonly ["light", "dark", "system"];
+export type ThemeMode = (typeof themeModes)[number];
+export declare function isThemeMode(value: string | undefined): value is ThemeMode;
+//# sourceMappingURL=theme-mode.d.ts.map

package/dist/lib/theme-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-mode.d.ts","sourceRoot":"","sources":["../../src/lib/theme-mode.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,sCAAuC,CAAA;AAE9D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,IAAI,SAAS,CAEzE"}

package/dist/lib/theme-mode.js

@@ -0,0 +1,4 @@
+export const themeModes = ["light", "dark", "system"];
+export function isThemeMode(value) {
+    return typeof value === "string" && themeModes.includes(value);
+}

package/dist/styles/globals.css

@@ -1,20 +1,18 @@
 /*
  * @nadicodeai/ui — Tailwind v4 + shadcn entry stylesheet.
  *
- * Import order is load-bearing: Tailwind first, then the design-system token
- * bridge (the brand @theme + the :root shadcn role map, generated from
- * DESIGN.md by Style Dictionary — ADR 0006). The @theme inline block below
+ * Import order is load-bearing: Tailwind first, then the design-system theme
+ * bridge (the brand @theme + the :root/.dark shadcn role maps, generated from
+ * DESIGN.md by Style Dictionary). The @theme inline block below
  * lifts semantic role vars into Tailwind's --color-* utility namespace so
  * shadcn utilities (bg-background, text-foreground, border-border, …) resolve
  * to brand tokens.
  *
- * Dark readiness is selector remapping only: :root and .dark assign shadcn
- * roles and package-local product aliases from generated --nc-* tokens or from
- * semantic roles. Product aliases intentionally live here, not in DESIGN.md:
- * their --nc-* names are package-local declarations, while source tokens remain
- * the generated --nc-* declarations imported above. Components consume those
- * roles/aliases and do not carry raw palette utilities or dark: utility classes.
- * DESIGN.md remains the only source of literal values.
+ * Standard shadcn roles are generated by @nadicodeai/design-system. This file
+ * keeps package-local product aliases only; their --nc-* names are package-local
+ * declarations, while source values remain generated tokens or semantic roles.
+ * Components consume those roles/aliases and do not carry raw palette utilities
+ * or dark: utility classes. DESIGN.md remains the only source of literal values.
  */
 @import "tailwindcss";
 @import "@nadicodeai/design-system/tailwind/theme.css";
@@ -22,9 +20,10 @@
 @import "@xyflow/react/dist/style.css";
 
 /*
- * Tailwind v4's dark: variant defaults to an OS media query. Keep it class
- * gated so a consuming app must opt in with a .dark ancestor. Shared components
- * still do not ship dark: utilities; the semantic remap below carries dark mode.
+ * Tailwind v4's dark: variant defaults to an OS media query. Match shadcn's
+ * class strategy so apps can drive light/dark/system from the root `.dark`
+ * class, usually through next-themes. Shared components still do not ship
+ * dark: color utilities; semantic role remaps carry dark mode.
  */
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -74,40 +73,6 @@
 }
 
 :root {
-  --radius: var(--nc-rounded-md);
-  --background: var(--nc-canvas);
-  --foreground: var(--nc-ink);
-  --card: var(--nc-canvas);
-  --card-foreground: var(--nc-ink);
-  --popover: var(--nc-canvas);
-  --popover-foreground: var(--nc-ink);
-  --primary: var(--nc-primary);
-  --primary-foreground: var(--nc-on-primary);
-  --secondary: var(--nc-canvas-soft);
-  --secondary-foreground: var(--nc-ink);
-  --muted: var(--nc-canvas-soft);
-  --muted-foreground: var(--nc-muted);
-  --accent: var(--nc-canvas-soft-2);
-  --accent-foreground: var(--nc-ink);
-  --destructive: var(--nc-error);
-  --destructive-foreground: var(--nc-on-primary);
-  --border: var(--nc-line);
-  --input: var(--nc-line);
-  --ring: var(--nc-link);
-  --chart-1: var(--nc-link);
-  --chart-2: var(--nc-cyan);
-  --chart-3: var(--nc-flag-red);
-  --chart-4: var(--nc-gradient-ship-end);
-  --chart-5: var(--nc-error);
-  --sidebar: var(--nc-canvas-soft);
-  --sidebar-foreground: var(--nc-ink);
-  --sidebar-primary: var(--nc-primary);
-  --sidebar-primary-foreground: var(--nc-on-primary);
-  --sidebar-accent: var(--nc-canvas-soft-2);
-  --sidebar-accent-foreground: var(--nc-ink);
-  --sidebar-border: var(--nc-line);
-  --sidebar-ring: var(--nc-link);
-
   --nc-app-surface: var(--background);
   --nc-app-surface-chrome: var(--sidebar);
   --nc-app-surface-sidebar: var(--sidebar);
@@ -137,7 +102,7 @@
   --nc-chat-artifact-surface: var(--popover);
   --nc-chat-inline-ref-surface: var(--nc-link-bg-soft);
   --nc-chat-directive-command: var(--nc-link);
-  --nc-chat-directive-skill: var(--nc-cyan-deep);
+  --nc-chat-directive-skill: var(--nc-info);
   --nc-chat-directive-theme: var(--nc-flag-red);
   --nc-composer-surface: var(--popover);
   --nc-composer-foreground: var(--popover-foreground);
@@ -174,15 +139,18 @@
   --nc-diff-file-header: var(--muted-foreground);
   --nc-code-surface: var(--nc-ink);
   --nc-code-border: var(--nc-body);
-  --nc-code-token-keyword: var(--nc-cyan);
+  /* cyan family retired per Italia color contract §6 (design-system). keyword
+     and terminal cyan roles repoint to info (blue-cobalto-700); function gets
+     a deeper blue-cobalto step so it stays visually distinct from keyword. */
+  --nc-code-token-keyword: var(--nc-info);
   --nc-code-token-string: var(--nc-success);
   --nc-code-token-comment: var(--nc-cross);
-  --nc-code-token-function: var(--nc-cyan-deep);
+  --nc-code-token-function: var(--nc-blue-cobalto-900);
 
   --nc-terminal-bg: var(--nc-ink);
   --nc-terminal-fg: var(--nc-on-primary);
   --nc-terminal-muted: var(--nc-cross);
-  --nc-terminal-cursor: var(--nc-cyan);
+  --nc-terminal-cursor: var(--nc-info);
   --nc-terminal-selection-bg: var(--nc-link-deep);
   --nc-terminal-ansi-black: var(--nc-ink);
   --nc-terminal-ansi-red: var(--nc-error);
@@ -190,15 +158,15 @@
   --nc-terminal-ansi-yellow: var(--nc-warning);
   --nc-terminal-ansi-blue: var(--nc-link);
   --nc-terminal-ansi-magenta: var(--nc-flag-red);
-  --nc-terminal-ansi-cyan: var(--nc-cyan);
+  --nc-terminal-ansi-cyan: var(--nc-info);
   --nc-terminal-ansi-white: var(--nc-on-primary);
   --nc-terminal-ansi-bright-black: var(--nc-body);
   --nc-terminal-ansi-bright-red: var(--nc-error-soft);
-  --nc-terminal-ansi-bright-green: var(--nc-cyan-soft);
+  --nc-terminal-ansi-bright-green: var(--nc-green-italia-400);
   --nc-terminal-ansi-bright-yellow: var(--nc-warning-soft);
-  --nc-terminal-ansi-bright-blue: var(--nc-cyan);
+  --nc-terminal-ansi-bright-blue: var(--nc-info);
   --nc-terminal-ansi-bright-magenta: var(--nc-flag-red);
-  --nc-terminal-ansi-bright-cyan: var(--nc-cyan-soft);
+  --nc-terminal-ansi-bright-cyan: var(--nc-blue-cobalto-200);
   --nc-terminal-ansi-bright-white: var(--nc-on-primary);
 
   --nc-model-provider-surface: var(--muted);
@@ -217,40 +185,6 @@
 }
 
 .dark {
-  --radius: var(--nc-rounded-md);
-  --background: var(--nc-ink);
-  --foreground: var(--nc-on-primary);
-  --card: var(--nc-primary);
-  --card-foreground: var(--nc-on-primary);
-  --popover: var(--nc-primary);
-  --popover-foreground: var(--nc-on-primary);
-  --primary: var(--nc-on-primary);
-  --primary-foreground: var(--nc-ink);
-  --secondary: var(--nc-body);
-  --secondary-foreground: var(--nc-on-primary);
-  --muted: var(--nc-body);
-  --muted-foreground: var(--nc-cross);
-  --accent: var(--nc-body);
-  --accent-foreground: var(--nc-on-primary);
-  --destructive: var(--nc-error);
-  --destructive-foreground: var(--nc-on-primary);
-  --border: var(--nc-body);
-  --input: var(--nc-body);
-  --ring: var(--nc-cyan);
-  --chart-1: var(--nc-cyan);
-  --chart-2: var(--nc-link-bg-soft);
-  --chart-3: var(--nc-warning);
-  --chart-4: var(--nc-flag-red);
-  --chart-5: var(--nc-link);
-  --sidebar: var(--nc-primary);
-  --sidebar-foreground: var(--nc-on-primary);
-  --sidebar-primary: var(--nc-cyan);
-  --sidebar-primary-foreground: var(--nc-ink);
-  --sidebar-accent: var(--nc-body);
-  --sidebar-accent-foreground: var(--nc-on-primary);
-  --sidebar-border: var(--nc-body);
-  --sidebar-ring: var(--nc-cyan);
-
   --nc-app-surface: var(--background);
   --nc-app-surface-chrome: var(--sidebar);
   --nc-app-surface-sidebar: var(--sidebar);
@@ -266,7 +200,7 @@
   --nc-app-text-secondary: var(--nc-cross);
   --nc-app-text-tertiary: var(--muted-foreground);
   --nc-app-text-inverse: var(--primary-foreground);
-  --nc-app-text-link: var(--nc-cyan-soft);
+  --nc-app-text-link: var(--nc-dark-cyan-soft);
   --nc-app-text-code: var(--nc-on-primary);
   --nc-app-text-placeholder: var(--nc-cross);
   --nc-app-text-disabled: var(--nc-body);
@@ -279,8 +213,8 @@
   --nc-chat-reasoning-surface: var(--accent);
   --nc-chat-artifact-surface: var(--popover);
   --nc-chat-inline-ref-surface: var(--nc-link-deep);
-  --nc-chat-directive-command: var(--nc-cyan);
-  --nc-chat-directive-skill: var(--nc-cyan-soft);
+  --nc-chat-directive-command: var(--nc-dark-cyan);
+  --nc-chat-directive-skill: var(--nc-dark-cyan-soft);
   --nc-chat-directive-theme: var(--nc-warning);
   --nc-composer-surface: var(--popover);
   --nc-composer-foreground: var(--popover-foreground);
@@ -288,70 +222,77 @@
   --nc-composer-ring: var(--ring);
 
   --nc-tool-pending: var(--nc-warning);
-  --nc-tool-running: var(--nc-cyan);
-  --nc-tool-success: var(--nc-cyan-soft);
+  --nc-tool-running: var(--nc-dark-cyan);
+  --nc-tool-success: var(--nc-dark-cyan-soft);
   --nc-tool-warning: var(--nc-warning);
   --nc-tool-error: var(--nc-error-soft);
   --nc-tool-muted: var(--nc-cross);
-  --nc-tool-approval-run: var(--nc-cyan-deep);
+  --nc-tool-approval-run: var(--nc-dark-cyan-deep);
   --nc-tool-approval-deny: var(--nc-error-soft);
-  --nc-tool-approval-session: var(--nc-cyan);
-  --nc-tool-approval-always: var(--nc-cyan-soft);
+  --nc-tool-approval-session: var(--nc-dark-cyan);
+  --nc-tool-approval-always: var(--nc-dark-cyan-soft);
 
-  --nc-status-info: var(--nc-cyan);
-  --nc-status-success: var(--nc-cyan-soft);
+  --nc-status-info: var(--nc-dark-cyan);
+  --nc-status-success: var(--nc-dark-cyan-soft);
   --nc-status-warning: var(--nc-warning);
   --nc-status-error: var(--nc-error-soft);
   --nc-status-paused: var(--nc-cross);
-  --nc-status-running: var(--nc-cyan);
+  --nc-status-running: var(--nc-dark-cyan);
   --nc-status-blocked: var(--nc-error-soft);
-  --nc-status-complete: var(--nc-cyan-soft);
+  --nc-status-complete: var(--nc-dark-cyan-soft);
   --nc-status-offline: var(--nc-cross);
-  --nc-status-online: var(--nc-cyan-soft);
+  --nc-status-online: var(--nc-dark-cyan-soft);
 
   --nc-diff-added-line: var(--nc-link-deep);
-  --nc-diff-added-word: var(--nc-cyan-soft);
+  --nc-diff-added-word: var(--nc-dark-cyan-soft);
   --nc-diff-removed-line: var(--nc-error-deep);
   --nc-diff-removed-word: var(--nc-error-soft);
   --nc-diff-hunk: var(--muted);
   --nc-diff-file-header: var(--muted-foreground);
-  --nc-code-surface: var(--nc-primary);
+  /* --nc-primary is now green-700 (Italia contract §4); code/terminal chrome
+     must stay near-black in dark mode too, so repoint to --nc-ink instead of
+     letting the code surface render green. */
+  --nc-code-surface: var(--nc-ink);
   --nc-code-border: var(--nc-body);
-  --nc-code-token-keyword: var(--nc-cyan);
-  --nc-code-token-string: var(--nc-cyan-soft);
+  /* cyan family retired per Italia color contract §6. dark-cyan/-soft/-deep
+     were kept unchanged in DESIGN.md specifically for this dark-mode "electric"
+     accent role, so repoint here rather than to info (which is the light-mode
+     replacement) to preserve the existing dark-theme look. */
+  --nc-code-token-keyword: var(--nc-dark-cyan);
+  --nc-code-token-string: var(--nc-dark-cyan-soft);
   --nc-code-token-comment: var(--nc-cross);
-  --nc-code-token-function: var(--nc-cyan-soft);
+  --nc-code-token-function: var(--nc-dark-cyan-soft);
 
-  --nc-terminal-bg: var(--nc-primary);
+  --nc-terminal-bg: var(--nc-ink);
   --nc-terminal-fg: var(--nc-on-primary);
   --nc-terminal-muted: var(--nc-cross);
-  --nc-terminal-cursor: var(--nc-cyan);
+  --nc-terminal-cursor: var(--nc-dark-cyan);
   --nc-terminal-selection-bg: var(--nc-link-deep);
   --nc-terminal-ansi-black: var(--nc-body);
   --nc-terminal-ansi-red: var(--nc-error-soft);
-  --nc-terminal-ansi-green: var(--nc-cyan-soft);
+  --nc-terminal-ansi-green: var(--nc-dark-cyan-soft);
   --nc-terminal-ansi-yellow: var(--nc-warning);
-  --nc-terminal-ansi-blue: var(--nc-cyan);
+  --nc-terminal-ansi-blue: var(--nc-dark-cyan);
   --nc-terminal-ansi-magenta: var(--nc-flag-red);
-  --nc-terminal-ansi-cyan: var(--nc-cyan-soft);
+  --nc-terminal-ansi-cyan: var(--nc-dark-cyan-soft);
   --nc-terminal-ansi-white: var(--nc-on-primary);
   --nc-terminal-ansi-bright-black: var(--nc-cross);
   --nc-terminal-ansi-bright-red: var(--nc-error-soft);
-  --nc-terminal-ansi-bright-green: var(--nc-cyan-soft);
+  --nc-terminal-ansi-bright-green: var(--nc-dark-cyan-soft);
   --nc-terminal-ansi-bright-yellow: var(--nc-warning-soft);
-  --nc-terminal-ansi-bright-blue: var(--nc-cyan);
+  --nc-terminal-ansi-bright-blue: var(--nc-dark-cyan);
   --nc-terminal-ansi-bright-magenta: var(--nc-flag-red);
-  --nc-terminal-ansi-bright-cyan: var(--nc-cyan-soft);
+  --nc-terminal-ansi-bright-cyan: var(--nc-dark-cyan-soft);
   --nc-terminal-ansi-bright-white: var(--nc-on-primary);
 
   --nc-model-provider-surface: var(--muted);
   --nc-model-capability-surface: var(--accent);
-  --nc-model-capability-border: var(--nc-cyan);
+  --nc-model-capability-border: var(--nc-dark-cyan);
   --nc-model-context-meter: var(--nc-warning);
   --nc-model-cost-warning: var(--nc-warning);
   --nc-model-rate-limit: var(--nc-error-soft);
 
-  --nc-plugin-permission-safe: var(--nc-cyan-soft);
+  --nc-plugin-permission-safe: var(--nc-dark-cyan-soft);
   --nc-plugin-permission-review: var(--nc-warning);
   --nc-plugin-permission-risk: var(--nc-flag-red);
   --nc-plugin-permission-denied: var(--nc-error-soft);
@@ -359,4 +300,77 @@
   --nc-plugin-permission-foreground: var(--foreground);
 }
 
+[data-nc-code-block-body] {
+  background-color: var(--shiki-code-block-light-bg, var(--background));
+  color: var(--shiki-code-block-light-fg, var(--foreground));
+}
+
+.dark [data-nc-code-block-body] {
+  background-color: var(
+    --shiki-code-block-dark-bg,
+    var(--shiki-code-block-light-bg, var(--background))
+  );
+  color: var(
+    --shiki-code-block-dark-fg,
+    var(--shiki-code-block-light-fg, var(--foreground))
+  );
+}
+
+[data-nc-code-token] {
+  background-color: var(--shiki-code-token-light-bg, transparent);
+  color: var(--shiki-code-token-light-color, var(--foreground));
+  font-style: var(--shiki-code-token-light-font-style, normal);
+  font-weight: var(--shiki-code-token-light-font-weight, normal);
+  text-decoration: var(--shiki-code-token-light-text-decoration, none);
+}
+
+.dark [data-nc-code-token] {
+  background-color: var(
+    --shiki-code-token-dark-bg,
+    var(--shiki-code-token-light-bg, transparent)
+  );
+  color: var(
+    --shiki-code-token-dark-color,
+    var(--shiki-code-token-light-color, var(--foreground))
+  );
+  font-style: var(
+    --shiki-code-token-dark-font-style,
+    var(--shiki-code-token-light-font-style, normal)
+  );
+  font-weight: var(
+    --shiki-code-token-dark-font-weight,
+    var(--shiki-code-token-light-font-weight, normal)
+  );
+  text-decoration: var(
+    --shiki-code-token-dark-text-decoration,
+    var(--shiki-code-token-light-text-decoration, none)
+  );
+}
+
+.toaster [data-sonner-toast][data-styled="true"] [data-description] {
+  color: var(--muted-foreground);
+}
+
+.toaster [data-sonner-toast][data-styled="true"] [data-button] {
+  background: var(--popover-foreground);
+  color: var(--popover);
+}
+
+.toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
+  background: var(--muted);
+  color: var(--popover-foreground);
+}
+
+.toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
+  background: var(--popover);
+  border-color: var(--border);
+  color: var(--popover-foreground);
+}
+
+.toaster [data-sonner-toast][data-styled="true"] [data-close-button]:hover {
+  background: var(--accent);
+  border-color: var(--border);
+  color: var(--accent-foreground);
+}
+
 @source "../components";

package/docs/agents/nadicodeai-ui.md

@@ -87,6 +87,11 @@ Current shipped product subpaths:
 - `@nadicodeai/ui/components/plugin-slot-boundary`
 - `@nadicodeai/ui/components/settings-section`
 
+`StateNotice` (`@nadicodeai/ui/components/state-notice`) is the supported
+low-level state-banner primitive behind `AgentMessageStateNotice` and
+`AgentThreadStateBanner`; it requires a `title` and owns the shared
+`role="status"`/`role="alert"` skeleton.
+
 ## Product Components And Migration
 
 Product components are presentational. Use them for shared settings, shell,
@@ -112,6 +117,23 @@ Read `docs/migration/nadia-consumer-readiness.md` before migrating a consumer.
 It lists the CSS imports, public subpaths, fixture redaction rules, and readiness
 gates.
 
+## Layout Primitives
+
+`SeamGrid` (`@nadicodeai/ui/components/seam-grid`) is a supported low-level layout
+primitive: the single owner of the "gap-as-seam" grid that backs the bordered
+section grids (stats band, testimonials, logo band, and siblings). It renders a
+`div` with the invariant `grid gap-px` base, so borderless, square-cornered cells
+paint one shared hairline seam at every boundary instead of doubling lines.
+
+Its only seam-specific prop is `surface`: `"canvas"` (default) paints the brand
+`line` via `bg-border`, and `"ink"` mixes the line toward the ink role for darker
+panels; the value is also mirrored on a `data-surface` attribute. Pass
+`className`, `children`, and any `div` props to keep a bespoke column map,
+heights, and `data-*` attributes. Reach for `SeamGrid` and its `surface` prop
+when building a new bordered grid rather than hand-copying the seam colour: the
+seam class helper is an internal `src/lib/seam` detail with no public subpath
+export, so nothing should couple to the raw arbitrary Tailwind class string.
+
 ## Forms
 
 Use the package's shadcn form stack as one model:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -23,6 +23,10 @@
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/lib/utils.js"
     },
+    "./lib/theme-mode": {
+      "types": "./dist/lib/theme-mode.d.ts",
+      "import": "./dist/lib/theme-mode.js"
+    },
     "./components/*": {
       "types": "./dist/components/*.d.ts",
       "import": "./dist/components/*.js"
@@ -37,13 +41,15 @@
     "skills"
   ],
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/fix-dist-imports.mjs && cp -R src/styles dist/styles",
+    "dev": "node scripts/dev-build.mjs --watch",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/fix-dist-imports.mjs && rm -rf dist/styles && cp -R src/styles dist/styles",
+    "build:fast": "node scripts/dev-build.mjs",
     "prepack": "npm run build",
     "test": "vitest run"
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
-    "@nadicodeai/design-system": "0.1.1",
+    "@nadicodeai/design-system": "0.2.0",
     "@radix-ui/react-use-controllable-state": "^1.2.3",
     "@rive-app/react-webgl2": "^4.29.1",
     "@streamdown/cjk": "^1.0.3",

package/skills/nadicodeai-ui/SKILL.md

@@ -68,7 +68,8 @@ import { AgentChat } from "@nadicodeai/ui/components/agent-chat";
 - Use token-backed shadcn utilities: `bg-background`, `text-foreground`, `border-border`, `text-muted-foreground`, `text-destructive`.
 - Use UI-local product aliases when a product role is needed: `bg-[var(--nc-app-surface)]`, `ring-[var(--nc-composer-ring)]`.
 - Use brand tokens through arbitrary values when needed: `text-[var(--nc-link-deep)]`.
-- Dark mode is owned by `@nadicodeai/ui/globals.css` through `:root` and `.dark` remaps of shadcn roles and UI-local product aliases. Do not add component-level `dark:` utilities, `.dark` CSS outside package globals/theme files, OS dark-mode branching, raw color literals, or raw Tailwind palette utilities.
+- Dark mode uses generated design-system `:root` and `.dark` shadcn roles plus UI-local product aliases in `@nadicodeai/ui/globals.css`. Consuming apps own the runtime `.dark` class and persisted light/dark/system preference. Do not add component-level `dark:` utilities, `.dark` CSS outside package globals/theme files, OS dark-mode branching, raw color literals, or raw Tailwind palette utilities.
+- Use `ThemeModeSwitcher` only as a controlled, app-agnostic control; do not import `next-themes` or app persistence into the UI package.
 - Compose app pages/screens from existing package components; extract new shared UI only after a second concrete consumer, a plan-approved shared component, or a named validation slice proves the package boundary.
 - For source maintenance, run shadcn commands with `--dry-run` before writing and do not use `--overwrite` without explicit maintainer approval.