@nadicodeai/ui 1.0.1 → 1.1.0

package/dist/index.d.ts

@@ -1,133 +1,133 @@
-export * from "./components/accordion";
-export * from "./components/action-band";
-export * from "./components/action-status";
-export * from "./components/alert";
-export * from "./components/alert-dialog";
-export * from "./components/agent-card";
-export * from "./components/agent-visual";
-export * from "./components/aspect-ratio";
-export * from "./components/automation-section";
-export * from "./components/avatar";
-export * from "./components/badge";
-export * from "./components/benefits-bento";
-export * from "./components/bento";
-export * from "./components/brand";
-export * from "./components/brand-field";
-export * from "./components/brand-icons";
-export * from "./components/breadcrumb";
-export * from "./components/button";
-export * from "./components/button-group";
-export * from "./components/calendar";
-export * from "./components/card";
-export * from "./components/card-marketing";
-export * from "./components/carousel";
-export * from "./components/chart";
-export * from "./components/chart-breakdown-table";
-export * from "./components/chart-bullet-bar";
-export * from "./components/chart-date-range";
-export * from "./components/chart-date-range-control";
-export * from "./components/chart-delta";
-export * from "./components/chart-entity-colors";
-export * from "./components/chart-kpi-stat";
-export * from "./components/chart-sparkline";
-export * from "./components/chart-time-series";
-export * from "./components/checkbox";
-export * from "./components/code-editor-mockup";
-export * from "./components/collapsible";
-export * from "./components/combobox";
-export * from "./components/command";
-export * from "./components/confirm-dialog";
-export * from "./components/contact";
-export * from "./components/context-menu";
-export * from "./components/dashboard-shell";
-export * from "./components/desktop-shell";
-export * from "./components/dialog";
-export * from "./components/diff-count";
-export * from "./components/direction";
-export * from "./components/disclosure-row";
-export * from "./components/drawer";
-export * from "./components/dropdown-menu";
-export * from "./components/empty";
-export * from "./components/expandable-block";
-export * from "./components/fact-cell";
-export * from "./components/faq";
-export * from "./components/faq-item";
-export * from "./components/feature-grid";
-export * from "./components/feature-rows";
-export * from "./components/feedback-state";
-export * from "./components/field";
-export * from "./components/file-type-icon";
-export * from "./components/footer";
-export * from "./components/form";
-export * from "./components/glyph-spinner";
-export * from "./components/glass-control";
-export * from "./components/handoff-banner";
-export * from "./components/hero";
-export * from "./components/hero-split";
-export * from "./components/hover-card";
-export * from "./components/input";
-export * from "./components/input-group";
-export * from "./components/input-otp";
-export * from "./components/installer-shell";
-export * from "./components/integration-flow";
-export * from "./components/item";
-export * from "./components/kbd";
-export * from "./components/label";
-export * from "./components/label-system";
-export * from "./components/live-demo";
-export * from "./components/logo-band";
-export * from "./components/logo-tile";
-export * from "./components/media-mount";
-export * from "./components/memory-item";
-export * from "./components/menubar";
-export * from "./components/native-select";
-export * from "./components/nav-bar";
-export * from "./components/navigation-menu";
-export * from "./components/newsletter";
-export * from "./components/page-frame";
-export * from "./components/pagination";
-export * from "./components/plugin-slot-boundary";
-export * from "./components/popover";
-export * from "./components/pricing";
-export * from "./components/pricing-card";
-export * from "./components/progress";
-export * from "./components/proof-slot";
-export * from "./components/quote-card";
-export * from "./components/radio-group";
-export * from "./components/resizable";
-export * from "./components/run-timeline";
-export * from "./components/scroll-area";
-export * from "./components/seam-grid";
-export * from "./components/section-intro";
-export * from "./components/security-grid";
-export * from "./components/select";
-export * from "./components/separator";
-export * from "./components/settings-section";
-export * from "./components/sheet";
-export * from "./components/shift-band";
-export * from "./components/sidebar";
-export * from "./components/skeleton";
-export * from "./components/slider";
-export * from "./components/sonner";
-export * from "./components/spinner";
-export * from "./components/stat-block";
-export * from "./components/statement";
-export * from "./components/stats-band";
-export * from "./components/status-dot";
-export * from "./components/status-row";
-export * from "./components/steps";
-export * from "./components/switch";
-export * from "./components/table";
-export * from "./components/tabs";
-export * from "./components/team-grid";
-export * from "./components/testimonials";
-export * from "./components/textarea";
-export * from "./components/texture-strip";
-export * from "./components/theme-mode-switcher";
-export * from "./components/toggle";
-export * from "./components/toggle-group";
-export * from "./components/tool-icon";
-export * from "./components/tooltip";
-export * from "./components/usage-meter";
-export * from "./components/use-case-bento";
+export * from "./components/accordion.js";
+export * from "./components/action-band.js";
+export * from "./components/action-status.js";
+export * from "./components/alert.js";
+export * from "./components/alert-dialog.js";
+export * from "./components/agent-card.js";
+export * from "./components/agent-visual.js";
+export * from "./components/aspect-ratio.js";
+export * from "./components/automation-section.js";
+export * from "./components/avatar.js";
+export * from "./components/badge.js";
+export * from "./components/benefits-bento.js";
+export * from "./components/bento.js";
+export * from "./components/brand.js";
+export * from "./components/brand-field.js";
+export * from "./components/brand-icons.js";
+export * from "./components/breadcrumb.js";
+export * from "./components/button.js";
+export * from "./components/button-group.js";
+export * from "./components/calendar.js";
+export * from "./components/card.js";
+export * from "./components/card-marketing.js";
+export * from "./components/carousel.js";
+export * from "./components/chart.js";
+export * from "./components/chart-breakdown-table.js";
+export * from "./components/chart-bullet-bar.js";
+export * from "./components/chart-date-range.js";
+export * from "./components/chart-date-range-control.js";
+export * from "./components/chart-delta.js";
+export * from "./components/chart-entity-colors.js";
+export * from "./components/chart-kpi-stat.js";
+export * from "./components/chart-sparkline.js";
+export * from "./components/chart-time-series.js";
+export * from "./components/checkbox.js";
+export * from "./components/code-editor-mockup.js";
+export * from "./components/collapsible.js";
+export * from "./components/combobox.js";
+export * from "./components/command.js";
+export * from "./components/confirm-dialog.js";
+export * from "./components/contact.js";
+export * from "./components/context-menu.js";
+export * from "./components/dashboard-shell.js";
+export * from "./components/desktop-shell.js";
+export * from "./components/dialog.js";
+export * from "./components/diff-count.js";
+export * from "./components/direction.js";
+export * from "./components/disclosure-row.js";
+export * from "./components/drawer.js";
+export * from "./components/dropdown-menu.js";
+export * from "./components/empty.js";
+export * from "./components/expandable-block.js";
+export * from "./components/fact-cell.js";
+export * from "./components/faq.js";
+export * from "./components/faq-item.js";
+export * from "./components/feature-grid.js";
+export * from "./components/feature-rows.js";
+export * from "./components/feedback-state.js";
+export * from "./components/field.js";
+export * from "./components/file-type-icon.js";
+export * from "./components/footer.js";
+export * from "./components/form.js";
+export * from "./components/glyph-spinner.js";
+export * from "./components/glass-control.js";
+export * from "./components/handoff-banner.js";
+export * from "./components/hero.js";
+export * from "./components/hero-split.js";
+export * from "./components/hover-card.js";
+export * from "./components/input.js";
+export * from "./components/input-group.js";
+export * from "./components/input-otp.js";
+export * from "./components/installer-shell.js";
+export * from "./components/integration-flow.js";
+export * from "./components/item.js";
+export * from "./components/kbd.js";
+export * from "./components/label.js";
+export * from "./components/label-system.js";
+export * from "./components/live-demo.js";
+export * from "./components/logo-band.js";
+export * from "./components/logo-tile.js";
+export * from "./components/media-mount.js";
+export * from "./components/memory-item.js";
+export * from "./components/menubar.js";
+export * from "./components/native-select.js";
+export * from "./components/nav-bar.js";
+export * from "./components/navigation-menu.js";
+export * from "./components/newsletter.js";
+export * from "./components/page-frame.js";
+export * from "./components/pagination.js";
+export * from "./components/plugin-slot-boundary.js";
+export * from "./components/popover.js";
+export * from "./components/pricing.js";
+export * from "./components/pricing-card.js";
+export * from "./components/progress.js";
+export * from "./components/proof-slot.js";
+export * from "./components/quote-card.js";
+export * from "./components/radio-group.js";
+export * from "./components/resizable.js";
+export * from "./components/run-timeline.js";
+export * from "./components/scroll-area.js";
+export * from "./components/seam-grid.js";
+export * from "./components/section-intro.js";
+export * from "./components/security-grid.js";
+export * from "./components/select.js";
+export * from "./components/separator.js";
+export * from "./components/settings-section.js";
+export * from "./components/sheet.js";
+export * from "./components/shift-band.js";
+export * from "./components/sidebar.js";
+export * from "./components/skeleton.js";
+export * from "./components/slider.js";
+export * from "./components/sonner.js";
+export * from "./components/spinner.js";
+export * from "./components/stat-block.js";
+export * from "./components/statement.js";
+export * from "./components/stats-band.js";
+export * from "./components/status-dot.js";
+export * from "./components/status-row.js";
+export * from "./components/steps.js";
+export * from "./components/switch.js";
+export * from "./components/table.js";
+export * from "./components/tabs.js";
+export * from "./components/team-grid.js";
+export * from "./components/testimonials.js";
+export * from "./components/textarea.js";
+export * from "./components/texture-strip.js";
+export * from "./components/theme-mode-switcher.js";
+export * from "./components/toggle.js";
+export * from "./components/toggle-group.js";
+export * from "./components/tool-icon.js";
+export * from "./components/tooltip.js";
+export * from "./components/usage-meter.js";
+export * from "./components/use-case-bento.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/internal/agent-visual/poster.d.ts

@@ -1,4 +1,4 @@
-import { type AgentVisualRecipe } from "./recipes";
+import { type AgentVisualRecipe } from "./recipes.js";
 export declare function AgentVisualPoster({ className, recipe, }: {
     className?: string;
     recipe: AgentVisualRecipe;

package/dist/internal/agent-visual/renderer.d.ts

@@ -1,4 +1,4 @@
-import { type AgentVisualRecipe } from "./recipes";
+import { type AgentVisualRecipe } from "./recipes.js";
 type AgentVisualRendererProps = {
     host: HTMLElement;
     onReady: () => void;

package/dist/internal/assistant-ui/attachment.js

@@ -77,7 +77,7 @@ const AttachmentUI = () => {
     const errorMessage = useAuiState((s) => s.attachment.status.type === "incomplete" && s.attachment.status.reason === "error"
         ? (s.attachment.status.message ?? "Upload failed")
         : undefined);
-    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsxs(AttachmentPrimitive.Root, { className: cn("aui-attachment-root relative", isComposer && "nc-transition-opacity", isImage && !isComposer && "aui-attachment-root-message only:*:first:size-24"), children: [_jsx(AttachmentPreviewDialog, { children: _jsxs(TooltipTrigger, { render: _jsx("div", { className: cn("aui-attachment-tile nc-transition-transform relative size-14 cursor-pointer overflow-hidden rounded-[calc(var(--composer-radius)-var(--composer-padding))] bg-muted outline-none after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-border after:ring-inset focus-visible:ring-[length:var(--ring-width-focus)] focus-visible:ring-ring/50 hover:after:bg-foreground/10", isError && "after:ring-destructive/60"), role: "button", tabIndex: 0, "aria-label": `${typeLabel} attachment${isError ? ", upload failed" : isUploading ? ", uploading" : ""}` }), children: [_jsx(AttachmentThumb, {}), isUploading && (_jsx("div", { "aria-hidden": "true", className: "aui-attachment-tile-uploading nc-transition-opacity absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-[2px]", children: _jsx(Loader2Icon, { className: "size-4 text-muted-foreground motion-safe:animate-spin motion-reduce:animate-pulse" }) })), isError && (_jsx("div", { "aria-hidden": "true", className: "aui-attachment-tile-error nc-transition-opacity absolute inset-0 flex items-center justify-center bg-background/70 backdrop-blur-[2px]", children: _jsx(AlertCircleIcon, { className: "text-destructive size-4" }) }))] }) }), isComposer && _jsx(AttachmentRemove, {})] }), _jsxs(TooltipContent, { side: "top", children: [_jsx(AttachmentPrimitive.Name, {}), errorMessage && _jsx("p", { className: "aui-attachment-error-message", children: errorMessage })] })] }) }));
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsxs(AttachmentPrimitive.Root, { className: cn("aui-attachment-root relative", isComposer && "nc-transition-opacity", isImage && !isComposer && "aui-attachment-root-message only:*:first:size-24"), children: [_jsx(AttachmentPreviewDialog, { children: _jsxs(TooltipTrigger, { render: _jsx("div", { className: cn("aui-attachment-tile nc-transition-transform relative size-14 cursor-pointer overflow-hidden rounded-[calc(var(--composer-radius)-var(--composer-padding))] bg-muted after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-border after:ring-inset hover:after:bg-foreground/10", isError && "after:ring-destructive/60"), role: "button", tabIndex: 0, "aria-label": `${typeLabel} attachment${isError ? ", upload failed" : isUploading ? ", uploading" : ""}` }), children: [_jsx(AttachmentThumb, {}), isUploading && (_jsx("div", { "aria-hidden": "true", className: "aui-attachment-tile-uploading nc-transition-opacity absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-[2px]", children: _jsx(Loader2Icon, { className: "size-4 text-muted-foreground motion-safe:animate-spin motion-reduce:animate-pulse" }) })), isError && (_jsx("div", { "aria-hidden": "true", className: "aui-attachment-tile-error nc-transition-opacity absolute inset-0 flex items-center justify-center bg-background/70 backdrop-blur-[2px]", children: _jsx(AlertCircleIcon, { className: "text-destructive size-4" }) }))] }) }), isComposer && _jsx(AttachmentRemove, {})] }), _jsxs(TooltipContent, { side: "top", children: [_jsx(AttachmentPrimitive.Name, {}), errorMessage && _jsx("p", { className: "aui-attachment-error-message", children: errorMessage })] })] }) }));
 };
 const AttachmentRemove = () => {
     return (_jsx(AttachmentPrimitive.Remove, { render: _jsx(TooltipIconButton, { tooltip: "Remove file", className: "aui-attachment-tile-remove absolute end-1 top-1 size-5 rounded-full bg-foreground/70! text-background! backdrop-blur-sm after:absolute after:-inset-1.5 hover:bg-foreground/85!", side: "top" }), children: _jsx(XIcon, { className: "aui-attachment-remove-icon size-3 stroke-[2.5]" }) }));

package/dist/internal/assistant-ui/follow-up-suggestions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"follow-up-suggestions.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/follow-up-suggestions.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAwBhC,eAAO,MAAM,yBAAyB,EAAE,EAMvC,CAAC"}
+{"version":3,"file":"follow-up-suggestions.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/follow-up-suggestions.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AA2BhC,eAAO,MAAM,yBAAyB,EAAE,EAMvC,CAAC"}

package/dist/internal/assistant-ui/follow-up-suggestions.js

@@ -3,6 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { AuiIf, ThreadPrimitive, useAuiState } from "@assistant-ui/react";
 const FollowupSuggestionsRow = () => {
     const suggestions = useAuiState((s) => s.thread.suggestions);
-    return (_jsx("div", { className: "aui-thread-followup-suggestions -my-1 w-full overflow-x-auto py-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: _jsx("div", { className: "mx-auto flex min-h-8 w-max items-center gap-2 px-0.5", children: suggestions.map((suggestion, index) => (_jsx(ThreadPrimitive.Suggestion, { className: "aui-thread-followup-suggestion nc-transition-paint rounded-full border bg-background px-3 py-1 text-sm whitespace-nowrap hover:bg-muted/80", prompt: suggestion.prompt, method: "replace", autoSend: true, children: suggestion.prompt }, index))) }) }));
+    return (_jsx("div", { className: "aui-thread-followup-suggestions -my-1 w-full overflow-x-auto py-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: _jsx("div", { className: "mx-auto flex min-h-8 w-max items-center gap-2 px-0.5", children: suggestions.map((suggestion, index) => (_jsx(ThreadPrimitive.Suggestion, { className: "aui-thread-followup-suggestion nc-transition-paint rounded-full border bg-background px-3 py-1 text-sm whitespace-nowrap hover:bg-muted/80", prompt: suggestion.prompt, 
+                // `method="replace"` + `autoSend` under their current names: the
+                // library renamed them to `clearComposer` + `send` and deprecated
+                // the old pair, with the same behaviour behind both.
+                send: true, clearComposer: true, children: suggestion.prompt }, index))) }) }));
 };
 export const ThreadFollowupSuggestions = () => (_jsx(AuiIf, { condition: (s) => !s.thread.isEmpty && !s.thread.isRunning && s.thread.suggestions.length > 0, children: _jsx(FollowupSuggestionsRow, {}) }));

package/dist/internal/assistant-ui/reasoning.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "class-variance-authority";
 import { type ReasoningMessagePartComponent } from "@assistant-ui/react";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible.js";
 declare const reasoningVariants: (props?: ({
     variant?: "outline" | "ghost" | "muted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/internal/assistant-ui/tool-fallback.d.ts

@@ -1,5 +1,5 @@
 import { type ToolCallMessagePartComponent } from "@assistant-ui/react";
-import { Collapsible } from "../../components/collapsible";
+import { Collapsible } from "../../components/collapsible.js";
 export type ToolFallbackRootProps = Omit<React.ComponentProps<typeof Collapsible>, "open" | "onOpenChange"> & {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;

package/dist/internal/assistant-ui/tool-group.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "class-variance-authority";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible.js";
 declare const toolGroupVariants: (props?: ({
     variant?: "outline" | "ghost" | "muted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/internal/assistant-ui/tooltip-icon-button.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithRef } from "react";
-import { Button } from "../../components/button";
+import { Button } from "../../components/button.js";
 export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
     tooltip: string;
     side?: "top" | "bottom" | "left" | "right";

package/dist/styles/globals.css

@@ -42,6 +42,25 @@
     @apply bg-background text-foreground;
   }
 
+  /*
+   * Keyboard focus has one owner. Every :focus-visible element takes the
+   * canonical offset ink outline (DESIGN.md "Focus ring"); components never
+   * repaint focus with their own ring, hue, or width. An invalid control
+   * carries the same geometry in the destructive hue, declared after focus so
+   * invalid wins when both apply. Intentional suppression stays a per-site
+   * utility (outline-hidden on highlight-driven menu items, outline-none on a
+   * control whose group proxies its focus).
+   */
+  :focus-visible {
+    outline: var(--nc-focus-outline-width) solid var(--ring);
+    outline-offset: var(--nc-focus-outline-offset);
+  }
+
+  [aria-invalid="true"] {
+    outline: var(--nc-focus-outline-width) solid var(--destructive);
+    outline-offset: var(--nc-focus-outline-offset);
+  }
+
   /*
    * lucide-react supplies glyph geometry; the shared house render owns only
    * presentation. Keep this in the package stylesheet so every React consumer
@@ -54,23 +73,29 @@
   }
 }
 
-@layer components {
-  .nc-glass-control {
-    background: color-mix(in srgb, var(--popover) var(--nc-material-glass-opacity), transparent);
-    backdrop-filter: blur(var(--nc-material-glass-blur))
-      saturate(var(--nc-material-glass-saturation));
+/*
+ * The one glass material (DESIGN.md "Elevation & Depth"): floating chrome —
+ * menus, popovers, selects, comboboxes, the command palette, and bars — may
+ * carry it; content surfaces stay solid. Glass composites only over our own
+ * content, and its elevation falloff's edge ring stays its one separator.
+ * Declared as a utility so variant prefixes can gate it (navigation-menu's
+ * non-viewport popup). Reduced transparency falls back to the same solid
+ * surface at the same elevation.
+ */
+@utility nc-glass {
+  background: color-mix(in srgb, var(--popover) var(--nc-material-glass-opacity), transparent);
+  backdrop-filter: blur(var(--nc-material-glass-blur)) saturate(var(--nc-material-glass-saturation));
+
+  @media (prefers-reduced-transparency: reduce) {
+    background: var(--popover);
+    backdrop-filter: none;
   }
+}
 
+@layer components {
   .nc-toast {
     border: 0 !important;
   }
-
-  @media (prefers-reduced-transparency: reduce) {
-    .nc-glass-control {
-      background: var(--popover);
-      backdrop-filter: none;
-    }
-  }
 }
 
 /*

package/docs/consuming-cross-repo.md

@@ -1,6 +1,6 @@
 # Consuming `@nadicodeai/ui` Cross-Repo
 
-This is the contract for an external repo — nadia-core, sibling Nadia web,
+This is the contract for an external repo — the Nadia repo, sibling Nadia web,
 desktop, or any consumer outside this monorepo — installing `@nadicodeai/ui`
 from published npm rather than the workspace source.
 
@@ -97,7 +97,7 @@ Use `BrandMark` where space is tight and `BrandWordmark` where the name must rea
 by itself. Do not assemble a new lockup from those two components. Static
 consumers that need files instead of React declare the design-system dependency
 directly and use the documented SVG or PNG package routes in
-`design-system/README.md`.
+`packages/design-system/README.md`.
 
 ## Base UI API breaks (migrating from Radix-era components)
 

package/docs/contract.md

@@ -4,10 +4,10 @@ The normative invariants for the `@nadicodeai/ui` package: what may live here, h
 
 ## Styling Invariants
 
-- **Token-only, no raw literals or shadow aliases.** Components style through semantic shadcn utilities (`bg-background`, `text-foreground`, `border-input`, and the rest), or a canonical generated design-system token when no standard role is precise enough. The UI package does not mint screen-, component-, or product-specific color aliases. No raw `#hex` / `rgb()` / `hsl()` may appear in `.tsx`; a new source value goes to `design-system/DESIGN.md` first and flows through generated output. A narrow protocol adapter may translate third-party classes directly to canonical tokens in `globals.css`, but it must not create another token vocabulary. Enforced by `@nadicodeai/ui/tests/guards/no-raw-literal.test.ts`, `@nadicodeai/ui/tests/guards/dark-semantic-roles.test.ts`, and `@nadicodeai/ui/tests/guards/token-reference-integrity.test.ts`.
-- **Dark-ready semantics, no component dark implementation.** Components use the same semantic role or canonical mode-aware token in every mode. They must not ship Tailwind `dark:` color utilities, component-local `.dark` blocks, OS dark-mode branching, or raw dark palette utilities such as `dark:bg-slate-950` and `dark:text-white`. An intentionally fixed-presentation technology surface, such as the dark terminal console, selects canonical fixed-mode tokens as one coherent component treatment rather than branching by app theme. Enforced by `@nadicodeai/ui/tests/guards/no-dark.test.ts`, `@nadicodeai/ui/tests/guards/dark-semantic-roles.test.ts`, and `@nadicodeai/ui/tests/guards/token-reference-integrity.test.ts`. The generated mode and theme architecture lives only in [`design-system/DESIGN.md`](../../../design-system/DESIGN.md#css-architecture--token-pipeline).
+- **Token-only, no raw literals or shadow aliases.** Components style through semantic shadcn utilities (`bg-background`, `text-foreground`, `border-input`, and the rest), or a canonical generated design-system token when no standard role is precise enough. The UI package does not mint screen-, component-, or product-specific color aliases. No raw `#hex` / `rgb()` / `hsl()` may appear in `.tsx`; a new source value goes to `packages/design-system/DESIGN.md` first and flows through generated output. A narrow protocol adapter may translate third-party classes directly to canonical tokens in `globals.css`, but it must not create another token vocabulary. Enforced by the raw-colour `no-restricted-syntax` selectors in the library ESLint config, `packages/ui/tests/guards/dark-semantic-roles.test.ts`, and `packages/ui/tests/guards/token-reference-integrity.test.ts`.
+- **Dark-ready semantics, no component dark implementation.** Components use the same semantic role or canonical mode-aware token in every mode. They must not ship Tailwind `dark:` color utilities, component-local `.dark` blocks, OS dark-mode branching, or raw dark palette utilities such as `dark:bg-slate-950` and `dark:text-white`. An intentionally fixed-presentation technology surface, such as the dark terminal console, selects canonical fixed-mode tokens as one coherent component treatment rather than branching by app theme. Enforced by `packages/ui/tests/guards/no-dark.test.ts`, `packages/ui/tests/guards/dark-semantic-roles.test.ts`, and `packages/ui/tests/guards/token-reference-integrity.test.ts`. The generated mode and theme architecture lives only in [`packages/design-system/DESIGN.md`](../../design-system/DESIGN.md#css-architecture--token-pipeline).
 - **Components inherit one complete React style interface.** `@nadicodeai/ui/globals.css` composes every style dependency owned by this package, including the complete design-system CSS module. Components carry no theme of their own, and React callers do not compose design-system stylesheets or partials beside it. Installation and source-scanning setup live in the [consumer setup guide](consuming-cross-repo.md).
-- **Design-system geometry remains the foundation.** React components compose the kept `nc-*` page grammar and display CSS components; they do not redefine frame math, marker placement, token values, or raw CSS geometry. Use parent-paints-plus-gap for bordered cell grids and keep every visible seam single-owner (doctrine home: `design-system/DESIGN.md` "## Layout").
+- **Design-system geometry remains the foundation.** React components compose the kept `nc-*` page grammar and display CSS components; they do not redefine frame math, marker placement, token values, or raw CSS geometry. Use parent-paints-plus-gap for bordered cell grids and keep every visible seam single-owner (doctrine home: `packages/design-system/DESIGN.md` "## Layout").
 
 ### Material surfaces
 
@@ -30,20 +30,38 @@ Physical role, not content importance, chooses depth:
   `smooth-shadow-ring-2xl` internally.
 
 All solid surfaces use the one semantic fill. Dark mode therefore stays true
-black; depth never comes from progressively greyer cards. Because the plugin
-owns `box-shadow` with `!important`, focus on an elevated root uses the
-canonical outline rather than another box-shadow ring.
-
-`GlassControl` is the only shared glass material. It is control chrome,
-using `shape="control"` for compact floating controls and `shape="bar"` for
-full-width header chrome. Cards and modal primitives continue to own page
-content, KPIs, tables, inspectors, and dialog bodies. Reduced transparency
-falls back to the same solid floating surface.
+black; depth never comes from progressively greyer cards.
+
+Keyboard focus has one owner: the `globals.css` base layer draws the offset
+ink outline on every `:focus-visible` element, and an invalid control takes
+the same geometry in the destructive hue. A component never repaints focus
+with a box-shadow ring, a raw width, or its own hue
+(`nadicodeai/no-repainted-focus` enforces this). A component may only
+suppress the outline where a proxy target carries it (`InputGroup` shows the
+indicator for its inner control; the OTP active slot for its hidden input) or
+where a highlight ground replaces it (menu and command items).
+
+`nc-glass` is the one glass material, and glass is floating chrome: menu,
+popover, select, combobox, and navigation-menu popups, the command palette,
+and `GlassControl` bars carry it over our own content. Content surfaces stay
+solid: cards, KPIs, tables, inspectors, and dialog, sheet, and drawer bodies.
+Glass keeps exactly one separator, the elevation falloff's integrated edge
+ring. Reduced transparency falls back to the same solid floating surface.
+`GlassControl` remains the control-chrome form, using `shape="control"` for
+compact floating controls and `shape="bar"` for full-width header chrome.
 
 `Empty` makes containment explicit with `scope="page" | "region" | "card"`.
 Page and region states own one opaque dashed boundary. A Card-scoped Empty is
 transparent and unframed because the Card already owns containment.
 
+### Tables
+
+`Table` owns the native table structure, solid semantic background, horizontal
+overflow, and one compact density: 36px header rows and 40px body rows. Consumers
+compose `TableHeader`, `TableBody`, `TableRow`, `TableHead`, and `TableCell`; they
+do not replace table layout with grid or flex, hide the header to create another
+presentation, or reconstruct the native semantics with ARIA.
+
 ## Status Vocabulary
 
 `Badge` is the product's only status carrier. It ships five semantic tone
@@ -55,14 +73,14 @@ a status clears AA in both modes without a call site painting anything. A status
 badge carries a mark in the existing icon slot beside its word, because colour
 must never be the only thing that says what the status is; the mark is
 `aria-hidden`, and the word is the accessible status. The tones are variants,
-not utilities, precisely so `nadicodeai/no-shadcn-appearance-override` and
-`nadicodeai/no-raw-color-utility` can keep them here.
+not utilities, precisely so `nadicodeai/no-shadcn-appearance-override` can keep
+them here.
 
 What this package does not own: which statuses exist, which tone and which mark
 each value takes, and the words. Those are the consuming app's domain — the
 Portal maps them in one kit module and nothing else picks a status colour. The
 design-system side of the decision, and why the retired CSS status grammars are
-gone, is [`design-system/DESIGN.md`, "## Status Vocabulary"](../../../design-system/DESIGN.md#status-vocabulary).
+gone, is [`packages/design-system/DESIGN.md`, "## Status Vocabulary"](../../design-system/DESIGN.md#status-vocabulary).
 
 ## Package Shape Invariants
 
@@ -71,7 +89,7 @@ gone, is [`design-system/DESIGN.md`, "## Status Vocabulary"](../../../design-sys
 - **Agents is the client-only conversation interface.** `@nadicodeai/ui/agents` re-exports the complete `@assistant-ui/react` runtime and primitive API plus the reviewed, branded registry composition held under `src/internal/assistant-ui/`. Its built entry retains `"use client"`. Consumers receive Thread, attachments, Markdown, reasoning, tools, suggestions, providers, runtimes, hooks, and types from that one domain namespace. Agent identity components use their direct component subpaths so server compositions do not import the conversation runtime. The vendor name is not a public NadicodeAI subpath, and the package does not rename, wrap, or rebuild assistant-ui behavior.
 - **Base UI is the active primitive base.** `components.json` must resolve through a Base style, currently `base-nova`, and `npx shadcn@latest info --json` must report `base: "base"`. Do not reintroduce `radix-ui`, `@radix-ui/*`, or `vaul` to package source, dependencies, or app optimizer configuration. Registry-owned shadcn primitives stay aligned with current `shadcn@latest` Base UI output; use Base UI `render` composition instead of Radix `asChild`. `cmdk` is allowed only for the stock shadcn Command component while the current `base-nova` registry declares that dependency; do not use it elsewhere or replace it without a shadcn/compatibility decision and tests.
 - **Named shadcn blocks stay named.** When a user, plan, or issue selects a shadcn block/example such as `login-02`, `signup-02`, `dashboard-01`, or `sidebar-*`, use that registry item as the source of truth through shadcn CLI/MCP. Do not replace it with a package-authored abstraction unless the plan explicitly records the substitution, the reason, and the true consumer route that proves it.
-- **Public surface changes require a release decision.** Any change to exported components, `src/index.ts`, package `exports`, `globals.css`, theme behavior, package docs, package skills, or design-system token/CSS/theme output consumed by this package must end with an explicit npm release decision before handoff: bump the relevant version(s) and run `npm pack --dry-run -w @nadicodeai/ui` per `../../../docs/internal/npm-publishing.md`, or include a `[no-publish]` commit marker with the reason in the commit body. The pre-push gate requires one of the two. When the UI change depends on modified `@nadicodeai/design-system` output, bump and publish `@nadicodeai/design-system` first, then update this package's dependency and publish UI. Never claim a UI package change is shipped until `npm view @nadicodeai/ui version` reports the intended version.
+- **Public surface changes require a release decision.** Any change to exported components, `src/index.ts`, package `exports`, `globals.css`, theme behavior, package docs, package skills, or design-system token/CSS/theme output consumed by this package must end with an explicit npm release decision before handoff: bump the relevant version(s) and run `npm pack --dry-run -w @nadicodeai/ui` per `../../../docs/agents/npm-publishing.md`, or include a `[no-publish]` commit marker with the reason in the commit body. The pre-push gate requires one of the two. When the UI change depends on modified `@nadicodeai/design-system` output, bump and publish `@nadicodeai/design-system` first, then update this package's dependency and publish UI. Never claim a UI package change is shipped until `npm view @nadicodeai/ui version` reports the intended version.
 
 ## Admission Rules
 
@@ -100,11 +118,11 @@ that page's `h1`.
 There is no `AgentGlyph`, `AgentRow`, `KpiCard`, or product-domain `agent`
 object prop in the shared package.
 
-- **Standard components, not app-owned product features.** This package ships primitives, standard UI components, assistant-ui compositions, brand adapters, React adapters, reusable sections, and presentational product components. It must not ship app-specific feature/use-case screens or names such as operator-login, portal activation, customer credential control, or customer management. Generic data tables, command palettes, and chart cards are app-owned shadcn registry adaptations. The source-backed `chart-*` package surface is the plan-approved exception per issue #166 and ADR 0010; chart cards remain app-owned. Every data-shaped chart exposes an equivalent non-visual data alternative. A component whose complete value is already available in visible text or `aria-valuetext` does not add a redundant table.
+- **Standard components, not app-owned product features.** This package ships primitives, standard UI components, assistant-ui compositions, brand adapters, React adapters, reusable sections, and presentational product components. It must not ship app-specific feature/use-case screens or names such as operator-login, portal activation, customer credential control, or customer management. Generic data tables, command palettes, and chart cards are app-owned shadcn registry adaptations. The source-backed `chart-*` package surface is the plan-approved exception per issue #166; chart cards remain app-owned. Every data-shaped chart exposes an equivalent non-visual data alternative. A component whose complete value is already available in visible text or `aria-valuetext` does not add a redundant table.
 - **Auth routes are consumer-owned shadcn block work.** Login, signup, OTP, two-factor, magic-link, and provider-button flows start from the selected shadcn block/example in the consuming app, with app-owned Better Auth behavior. Do not ship generic auth, signup, OTP, federated-login, or provider abstractions from this package unless a later explicit boundary decision replaces the selected shadcn block.
 - **Reusable sections and compositions live here after proof.** Bento grids, media mounts, demo surfaces, page frames, section intros, CTA bands, proof slots, benefits grids, generic shells, and homepage/use-case sections belong in `@nadicodeai/ui` when a second concrete consumer, a plan-approved shared component, or a named validation slice proves the package boundary. Website, portal, and sibling Nadia routes pass data and media children into existing compositions instead of rebuilding layout locally.
-- **Brand renderers live here for React consumers.** Logo geometry, asset generation, and usage semantics are owned by [`design-system/DESIGN.md`, "Brand media authority"](../../../design-system/DESIGN.md#brand-media-authority). `BrandLockup` supplies the approved horizontal lockup. `BrandMark` serves tight spaces and `BrandWordmark` serves placements where the name must read by itself. All three render the package's public neutral geometry seam with React-scoped SVG ids, dynamic theme paint, and accessible names. Consuming routes use these adapters; they never import raw logo assets, draw brand SVG inline, mask or recolor assets, or create another lockup rule.
-- **Third-party brand marks are generated, never hand-drawn and never hand-edited.** Other companies' marks live in `@nadicodeai/ui/src/components/brand-icons/`, emitted from an explicit allow-list by `@nadicodeai/ui/scripts/build-brand-icons.mjs` and exported through the `@nadicodeai/ui/components/brand-icons` subpath. They are identity images, not UI icons: a brand mark is exempt from the currentColor stroke system and from the raw-literal rule, it never stands in for a UI icon, and a UI icon never stands in for a brand. Marks drawn as one silhouette are stripped to `currentColor` by the generator; every other mark keeps its official colors verbatim. To add a brand, edit the generator's allow-list and run `npm run generate:brand-icons -w @nadicodeai/ui`; hand edits to the generated directory are lost and `@nadicodeai/ui/tests/guards/brand-icons-codegen.test.ts` fails on them. Use is nominative only — naming a platform, an integration, or a provider — never adjacent to endorsement or partnership wording. The full decision, including the licensing and trademark posture, is [ADR 0042](../../../docs/adr/0042-third-party-brand-marks-are-generated-identity-images.md).
+- **Brand renderers live here for React consumers.** Logo geometry, asset generation, and usage semantics are owned by [`packages/design-system/DESIGN.md`, "Brand media authority"](../../design-system/DESIGN.md#brand-media-authority). `BrandLockup` supplies the approved horizontal lockup. `BrandMark` serves tight spaces and `BrandWordmark` serves placements where the name must read by itself. All three render the package's public neutral geometry seam with React-scoped SVG ids, dynamic theme paint, and accessible names. Consuming routes use these adapters; they never import raw logo assets, draw brand SVG inline, mask or recolor assets, or create another lockup rule.
+- **Third-party brand marks are generated, never hand-drawn and never hand-edited.** Other companies' marks live in `packages/ui/src/components/brand-icons/`, emitted from an explicit allow-list by `packages/ui/scripts/build-brand-icons.mjs` and exported through the `@nadicodeai/ui/components/brand-icons` subpath. They are identity images, not UI icons: a brand mark is exempt from the currentColor stroke system and from the raw-literal rule, it never stands in for a UI icon, and a UI icon never stands in for a brand. Marks drawn as one silhouette are stripped to `currentColor` by the generator; every other mark keeps its official colors verbatim. To add a brand, edit the generator's allow-list and run `npm run generate:brand-icons -w @nadicodeai/ui`; hand edits to the generated directory are lost and `packages/ui/tests/guards/brand-icons-codegen.test.ts` fails on them. Use is nominative only — naming a platform, an integration, or a provider — never adjacent to endorsement or partnership wording; that nominative posture is the licensing and trademark position, so a mark never appears where the copy implies endorsement.
 - **No fake proof APIs.** Components may support future testimonials, logos, stats, and proof slots, but they must render nothing public when the proof is absent. Do not ship placeholder customer names, metrics, or logos.
 
 ## Accessibility Invariant
@@ -119,7 +137,7 @@ The source tree, barrels, and package exports own the current reusable section v
 
 Consumers own routing, auth, app data, server actions, runtime construction and adapters, permission decisions, analytics, and app-specific copy. The package owns reusable React presentation and the public Agent UI dependency boundary. Agent state and behavior come through the Agents interface; non-React and TUI contracts belong to their consuming products.
 
-App source composes layout, data, behavior, and semantic content around package components. It does not restyle an imported component root: appearance changes enter through the component's typed variant or are added to the owning package component. App `className` values on package components are limited to structural layout and sizing. App source uses semantic roles such as `bg-background` and `text-foreground`; raw Tailwind palette colors and canonical `nc-*` color utilities stay behind package-owned primitives such as `BrandField`. Visible controls come from `@nadicodeai/ui`, while hidden inputs remain valid form transport. The root ESLint rules `nadicodeai/no-shadcn-appearance-override`, `nadicodeai/no-raw-color-utility`, and `nadicodeai/no-native-visible-control` enforce this boundary.
+App source composes layout, data, behavior, and semantic content around package components. It does not restyle an imported component root: appearance changes enter through the component's typed variant or are added to the owning package component. App `className` values on package components are limited to structural layout and sizing. App source uses semantic roles such as `bg-background` and `text-foreground`; canonical `nc-*` color utilities stay behind package-owned primitives such as `BrandField`. Raw Tailwind palette colors are not available to anyone: the generated theme clears the `--color-*` namespace, so `bg-red-500` produces no CSS and `better-tailwindcss/no-unknown-classes` reports it. Visible controls come from `@nadicodeai/ui`, while hidden inputs remain valid form transport. The root ESLint rules `nadicodeai/no-shadcn-appearance-override` and `nadicodeai/no-native-visible-control` enforce the rest of this boundary; each takes a `packageOwnedPrimitives` option (`"exempt"` by default, `"lint"` to hold this package's own source to the same rule).
 
 When this package is read from an installed npm package, follow the [consumer setup guide](consuming-cross-repo.md) for setup and public import paths. The styling invariant above remains the authority for component implementation.
 

package/docs/migration/base-ui-migration.md

@@ -7,7 +7,7 @@ Current invariants:
 - `components.json` uses `base-nova`, and `npx shadcn@latest info --json` should report `base: "base"`.
 - Package source must not import `radix-ui`, `@radix-ui/*`, or `vaul`.
 - `cmdk` is allowed only for the stock shadcn Command component while the current `base-nova` registry declares it.
-- `@nadicodeai/ui/package.json` must not depend on `radix-ui`, `@radix-ui/react-use-controllable-state`, or `vaul`.
+- `packages/ui/package.json` must not depend on `radix-ui`, `@radix-ui/react-use-controllable-state`, or `vaul`.
 - Website and portal Next config must optimize `@base-ui/react`, not `radix-ui`.
 - Public shadcn primitive usage follows the current Base UI registry API. Base UI composition uses `render`; do not add package-local `asChild` adapters for registry-owned primitives.
 
@@ -58,5 +58,5 @@ Verification:
 ```bash
 npm run build -w @nadicodeai/ui
 npm run test -w @nadicodeai/ui
-rg 'radix-ui|@radix-ui|vaul' @nadicodeai/ui/src @nadicodeai/ui/package.json website/next.config.ts portal/next.config.ts
+rg 'radix-ui|@radix-ui|vaul' packages/ui/src packages/ui/package.json apps/website/next.config.ts apps/portal/next.config.ts
 ```