@nadicodeai/ui 0.1.0

package/llms.txt

@@ -0,0 +1,75 @@
+# @nadicodeai/ui
+
+Shared NadicodeAI React UI package. Use this when building NadicodeAI web,
+portal, or sibling Nadia app surfaces.
+
+Install:
+- npm package: `@nadicodeai/ui`
+- required peer/runtime package: `@nadicodeai/design-system`
+- peers: `react`, `react-dom`, `tailwindcss`, `@tailwindcss/postcss`
+
+CSS:
+- Import once at the app root:
+  - `import "@nadicodeai/ui/globals.css";`
+  - `import "@nadicodeai/design-system/css";`
+
+Runtime imports:
+- Standard/root barrel: `import { Button } from "@nadicodeai/ui";`
+- Preferred component subpath: `import { Button } from "@nadicodeai/ui/components/button";`
+- AI Elements barrel: `import { Message, PromptInput } from "@nadicodeai/ui/ai-elements";`
+- AI Elements subpath: `import { Message } from "@nadicodeai/ui/components/ai-elements/message";`
+
+Component surface:
+- shadcn source components are shipped from `@nadicodeai/ui/components/*`.
+- Vercel AI Elements source components are shipped from `@nadicodeai/ui/components/ai-elements/*`.
+- React adapters over design-system grammar and assets ship from component subpaths.
+- Reusable marketing/section compositions belong in this package.
+- Presentational product components ship from these public component subpaths:
+  - `@nadicodeai/ui/components/agent-chat`
+  - `@nadicodeai/ui/components/agent-composer`
+  - `@nadicodeai/ui/components/agent-message`
+  - `@nadicodeai/ui/components/agent-thread`
+  - `@nadicodeai/ui/components/agent-tool-approval`
+  - `@nadicodeai/ui/components/artifact-panel`
+  - `@nadicodeai/ui/components/automation-section`
+  - `@nadicodeai/ui/components/dashboard-shell`
+  - `@nadicodeai/ui/components/desktop-shell`
+  - `@nadicodeai/ui/components/feedback-state`
+  - `@nadicodeai/ui/components/files-preview`
+  - `@nadicodeai/ui/components/installer-shell`
+  - `@nadicodeai/ui/components/plugin-slot-boundary`
+  - `@nadicodeai/ui/components/settings-section`
+- Utility export: `@nadicodeai/ui/lib/utils`.
+
+Package surface:
+- `src/components/` is flat shadcn-style source. Do not document folders or package namespaces that do not exist.
+- Do not add top-level exports for recipes, blocks, agent, or terminal groupings without concrete source, built files, docs, and tests in the same package API decision.
+- App routes own routing, persistence, auth behavior, runtime adapters, server state, app-specific copy, and app-owned product features/use cases.
+- Product-specific names such as `operator-login`, portal activation, and customer credential control stay out of package components.
+- Generic data tables, command palettes, and chart cards are app-owned shadcn registry adaptations, not NadicodeAI package abstractions.
+- Consumer migration order: web admin or portal validation slice first, installer second, desktop shell third, desktop chat last, TUI through `docs/terminal-tui-semantics.md`.
+- Read `docs/migration/nadia-consumer-readiness.md` before migrating a consumer; it records CSS requirements, public import paths, fixture rules, and readiness gates.
+
+Forms:
+- Use `Input`/`Textarea`/other controls for controls.
+- Use `FieldGroup` + `Field` + `FieldLabel`/`FieldDescription`/`FieldError` for field layout.
+- Use `Form` + `FormField`/`FormItem`/`FormControl`/`FormMessage` only for React Hook Form integration.
+- Do not create or import a parallel `FormInput`/`FormTextarea` control family.
+
+Rules:
+- Dark-ready through globals only. `@nadicodeai/ui/globals.css` owns `:root` and `.dark` remaps for shadcn roles and UI-local product aliases such as `--nc-app-surface`, `--nc-chat-tool-surface`, and `--nc-terminal-bg`. Components must not add Tailwind `dark:` utilities or OS dark-mode branching.
+- Token-only. Use NadicodeAI/shadcn semantic utilities such as `bg-background`, `text-foreground`, `border-border`, `text-destructive`, UI-local aliases like `bg-[var(--nc-app-surface)]`, and brand token arbitrary values like `text-[var(--nc-link-deep)]`.
+- Do not use raw `#hex`, `rgb()`, `hsl()`, or raw palette utilities such as `text-blue-600`, `bg-zinc-950`, `text-white`, or `bg-black/50`.
+- App routes should compose existing reusable sections/compositions from this package. Extract new shared UI only after a second concrete consumer, a plan-approved shared component, or a named validation slice proves the package boundary.
+
+shadcn / AI Elements discovery:
+- Use live MCP/CLI discovery from `@nadicodeai/ui`; do not maintain a committed upstream registry inventory, snapshot, or inventory update script.
+- Codex MCP setup when supported: `npx shadcn@latest mcp init --client codex`.
+- CLI fallbacks: `npx shadcn@latest info --json`, `npx shadcn@latest search @shadcn -q "select" --json`, `npx shadcn@latest search @ai-elements -q "message" --json`, `npx shadcn@latest docs button select dialog --json`, `npx shadcn@latest view @shadcn/button`, `npx shadcn@latest add @shadcn/button --dry-run`, `npx shadcn@latest add @ai-elements/message --dry-run`.
+- Use `info --json` for aliases, Tailwind version, base primitive library, icon library, source paths, and configured registries. Use `search`, `docs`, and `view` before adding source; use `add --dry-run` or `add --diff` before changing files.
+
+Agent references shipped in this package:
+- `AGENTS.md`
+- `docs/agents/nadicodeai-ui.md`
+- `docs/migration/nadia-consumer-readiness.md`
+- `skills/nadicodeai-ui/SKILL.md`

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@nadicodeai/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./globals.css": "./dist/styles/globals.css",
+    "./styles.css": "./dist/styles/globals.css",
+    "./ai-elements": {
+      "types": "./dist/ai-elements.d.ts",
+      "import": "./dist/ai-elements.js"
+    },
+    "./lib/utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "AGENTS.md",
+    "llms.txt",
+    "docs",
+    "skills"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/fix-dist-imports.mjs && cp -R src/styles dist/styles",
+    "prepack": "npm run build",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "@nadicodeai/design-system": "0.1.0",
+    "@radix-ui/react-use-controllable-state": "^1.2.3",
+    "@rive-app/react-webgl2": "^4.29.1",
+    "@streamdown/cjk": "^1.0.3",
+    "@streamdown/code": "^1.1.1",
+    "@streamdown/math": "^1.0.2",
+    "@streamdown/mermaid": "^1.0.2",
+    "@xyflow/react": "^12.11.0",
+    "ai": "^6.0.208",
+    "ansi-to-react": "^6.2.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^1.21.0",
+    "media-chrome": "^4.19.2",
+    "motion": "^12.40.0",
+    "nanoid": "^5.1.15",
+    "radix-ui": "^1.6.0",
+    "react-day-picker": "^10.0.1",
+    "react-hook-form": "^7.80.0",
+    "react-jsx-parser": "^2.4.1",
+    "react-resizable-panels": "^4.11.2",
+    "recharts": "^3.8.0",
+    "shiki": "^4.2.0",
+    "sonner": "^2.0.7",
+    "streamdown": "^2.5.0",
+    "tailwind-merge": "^3.0.0",
+    "tokenlens": "^1.3.1",
+    "use-stick-to-bottom": "^1.1.6",
+    "vaul": "^1.1.2"
+  },
+  "peerDependencies": {
+    "@tailwindcss/postcss": "^4.3.1",
+    "react": "^19",
+    "react-dom": "^19",
+    "tailwindcss": "^4.3.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "tailwindcss": "^4.3.1",
+    "typescript": "^5",
+    "vitest": "^4.1.6"
+  }
+}

package/skills/nadicodeai-ui/SKILL.md

@@ -0,0 +1,80 @@
+---
+name: nadicodeai-ui
+description: Use when building or modifying NadicodeAI React UI with @nadicodeai/ui, shadcn components, or AI Elements.
+---
+
+# NadicodeAI UI
+
+Use `@nadicodeai/ui` for shared NadicodeAI React UI. It ships built shadcn source components, Vercel AI Elements, React adapters over design-system grammar, reusable NadicodeAI marketing/section compositions, presentational product components, package CSS, and agent instructions. Product components are package surface only when source, public subpath exports, tests, and docs exist together.
+
+The package is a flat shadcn-style source surface. Do not create or document
+folders or package namespaces that do not exist. Do not add top-level exports
+for recipes, blocks, agent, or terminal groupings without concrete source, built
+files, docs, and tests in the same package API decision.
+Routes, persistence, auth behavior, runtime adapters, server state, and
+app-owned product features/use cases stay in the consuming app. Product-specific
+names such as `operator-login`, portal activation, and customer credential
+control stay out of package components.
+
+## Required Setup
+
+Import CSS once at the app root:
+
+```tsx
+import "@nadicodeai/ui/globals.css";
+import "@nadicodeai/design-system/css";
+```
+
+## Import Patterns
+
+Prefer direct subpaths:
+
+```tsx
+import { Button } from "@nadicodeai/ui/components/button";
+import { Message } from "@nadicodeai/ui/components/ai-elements/message";
+```
+
+Use barrels when helpful:
+
+```tsx
+import { Button, PageFrame } from "@nadicodeai/ui";
+import { Message, PromptInput } from "@nadicodeai/ui/ai-elements";
+```
+
+Product component imports:
+
+```tsx
+import { DashboardShell } from "@nadicodeai/ui/components/dashboard-shell";
+import { AgentChat } from "@nadicodeai/ui/components/agent-chat";
+```
+
+## Product Components
+
+- Use package product components for shared settings, shell, installer, plugin-boundary, agent chat, artifact, file, diff, and redacted terminal summary UI.
+- Use first-party shadcn registry source in the consuming app for generic data tables, command palettes, and chart cards; do not import a NadicodeAI package abstraction for those patterns.
+- Keep routes, data, auth, server actions, persistence, permission decisions, runtime adapters, analytics, and product-specific copy in the consuming app.
+- Follow `docs/migration/nadia-consumer-readiness.md`: web admin or portal first, installer second, desktop shell third, desktop chat last, TUI through `docs/terminal-tui-semantics.md`.
+- Fixtures must be synthetic or redacted and cover provider, model, plugin, approval, diff, terminal, installer recovery, queued, streaming, and interrupted states. Do not use generic SaaS/card-grid filler, secrets, environment values, raw terminal output, hidden reasoning, user memory, fake customers, or fake proof metrics.
+
+## Forms
+
+- Use `Input`, `Textarea`, `Select`, `Checkbox`, and similar files for controls.
+- Use `FieldGroup`, `Field`, `FieldLabel`, `FieldDescription`, and `FieldError` for field layout and label/error structure.
+- Use `Form`, `FormField`, `FormItem`, `FormControl`, `FormLabel`, `FormDescription`, and `FormMessage` only when integrating React Hook Form.
+- Do not create or import a separate `FormInput`/`FormTextarea` control family. Extend the canonical control or field primitive when the package needs a new size or behavior.
+
+## Rules
+
+- 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.
+- 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.
+
+## Verification
+
+```bash
+npm run build -w @nadicodeai/ui
+npm run test -w @nadicodeai/ui
+```