@viliha/vui-ui 1.2.0 → 1.4.0

package/AGENT.md

@@ -73,16 +73,23 @@ The package ships the components; the **app shell** (layout, sidebar, open tabs,
 command palette, nav config, logo) and **demo pages** are scaffolded with:
 
 ```bash
-npx @viliha/vui-ui init          # interactive: fresh vs existing, with/without demo
+npx @viliha/vui-ui init          # interactive decision tree
 ```
 
-Files land in the consumer's repo (they own them). **Fresh project:** writes
-config too, runs out of the box. **Existing project:** `init --existing` never
-overwrites config — it adds the shell/pages and prints the merge steps
-(`transpilePackages`, the `theme.css` import, the `@/*` alias, `import
-"./globals.css"`). Flags: `--fresh` / `--existing` / `--demo` / `--no-demo` /
-`--yes` / `--force` / `--dry-run`. If you only need components, skip `init` and
-just do the setup below.
+Files land in the consumer's repo (they own them). Two questions:
+1. **Fresh project?** (`--fresh` / `--existing`)
+2. **Pre-built theme?** (`--prebuilt` = shell + demo pages / `--theme-only` = just
+   the theme wiring you configure)
+
+- **fresh + prebuilt** → full runnable app (config + shell + demo).
+- **fresh + theme-only** → just `globals.css` + `next.config` wiring; build your own.
+- **existing + prebuilt** → shell + demo added; config **never** overwritten —
+  prints the merge steps (`transpilePackages`, the `theme.css` import, the `@/*`
+  alias, `import "./globals.css"`).
+- **existing + theme-only** → nothing copied; prints the wiring steps.
+
+Other flags: `--yes` / `--force` / `--dry-run`. If you only need components, use
+`--theme-only` (or skip `init`) and do the setup below.
 
 VUI ships as TypeScript source.
 

package/README.md

@@ -48,32 +48,43 @@ pages** live in a one-shot scaffolder:
 npx @viliha/vui-ui init
 ```
 
-It's **interactive** — it asks whether this is a **fresh** or **existing**
-project and whether to include the **demo pages** (dashboard, CRM, calendar,
-chat, support, settings, auth). Files are copied into *your* repo, so you own and
-edit them. It's **non-destructive**: existing files are skipped.
+It's **interactive** — a short decision tree:
+
+1. **Fresh project?** (fresh vs existing)
+2. **Pre-built theme?** — the full shell + demo pages, or just the theme wiring
+   that you configure yourself.
+
+Files are copied into *your* repo, so you own and edit them.
+
+| | **Pre-built** (shell + demo) | **Theme-only** (you configure) |
+| --- | --- | --- |
+| **Fresh** | full runnable app: config + shell + demo pages | just the theme wiring (`globals.css`, `next.config`) — build your own pages |
+| **Existing** | shell + demo added; your config is **never** overwritten (prints merge steps) | nothing copied; prints the wiring steps |
 
 ```
 Flags (for CI / agents, skip the prompts):
-  --fresh | --existing    project type
-  --demo  | --no-demo     include demo pages (default: with demo)
-  --yes, -y               accept defaults (fresh, with demo)
-  --force                 overwrite existing files
-  --dry-run               preview without writing
+  --fresh | --existing        project type (Q1)
+  --prebuilt | --theme-only   pre-built shell + demo, or just the theme (Q2)
+  --yes, -y                   accept defaults (fresh, prebuilt)
+  --force                     overwrite existing files
+  --dry-run                   preview without writing
 ```
 
-After it runs, install the peer deps it prints, then `npm run dev` → `/dashboard`.
+After a **pre-built** run, install the peer deps it prints, then `npm run dev` →
+`/dashboard`.
 
-### Fresh project (recommended)
+### Fresh + pre-built (recommended for new apps)
 
-Start from a `create-next-app` base. `init --fresh` also writes `next.config.mjs`,
-`app/globals.css`, and the root layout, so the demo runs out of the box.
+Start from a `create-next-app` base. This writes `next.config.mjs`,
+`app/globals.css`, the shell, and the demo pages (overwriting the create-next-app
+boilerplate), so the demo runs out of the box.
 
 ### ⚠️ Existing project — read this first
 
 Adding VUI to an app you already have needs care. **`init --existing` never
-overwrites your config** — it adds the shell + pages under `app/(app)/` and
-`app/_components/`, then prints the four things to merge yourself:
+overwrites your config.** Pick pre-built to add the shell + pages under
+`app/(app)/` and `app/_components/`, or theme-only to copy nothing — either way it
+prints the four things to wire up:
 
 1. **`next.config`** — add `transpilePackages: ["@viliha/vui-ui"]`.
    (Optional, for the open-tabs *keep-alive*: `output: "export"`,
@@ -88,9 +99,9 @@ overwrites your config** — it adds the shell + pages under `app/(app)/` and
 4. **Root `app/layout.tsx`** — `import "./globals.css"` (and mount fonts to match
    the demo's look).
 
-Run **`npx @viliha/vui-ui init --existing --dry-run`** first to see exactly what
-it will add. If you only want the components (not the shell/pages), **skip `init`
-entirely** — the [Setup](#setup) above is all you need, then import from
+Run **`npx @viliha/vui-ui init --existing --prebuilt --dry-run`** first to see
+exactly what it will add. If you only want the components, choose **theme-only**
+(or skip `init` and follow the [Setup](#setup) above), then import from
 `@viliha/vui-ui/*`.
 
 > **Note on the theme in an existing app:** VUI owns its design tokens in

package/bin/vui.mjs

@@ -1,11 +1,16 @@
 #!/usr/bin/env node
-// @viliha/vui-ui CLI — scaffolds the app shell + demo pages into a consumer's
-// Next.js project (shadcn-style: the files land in YOUR repo, you own them).
+// @viliha/vui-ui CLI — sets up the theme in a consumer's Next.js project.
 //
 //   npx @viliha/vui-ui init [options]
 //
-// Interactive by default: asks whether this is a fresh or existing project and
-// whether to include the demo pages. Non-interactive with flags (for CI/agents).
+// Interactive decision tree (skip with flags):
+//   1. Fresh project?              --fresh | --existing
+//   2. Pre-built theme + demo?     --prebuilt | --theme-only
+//
+//   fresh    + prebuilt    -> full runnable app: config + shell + demo pages
+//   fresh    + theme-only  -> just the theme wiring (globals/next.config), you build
+//   existing + prebuilt    -> shell + demo added (config untouched; merge steps printed)
+//   existing + theme-only  -> nothing copied; prints the wiring steps
 import { copyFileSync, existsSync, mkdirSync, readdirSync } from "node:fs";
 import { dirname, join, relative, sep } from "node:path";
 import { fileURLToPath } from "node:url";
@@ -16,6 +21,39 @@ const TEMPLATE = fileURLToPath(new URL("../template/", import.meta.url));
 const args = process.argv.slice(2);
 const cmd = args[0];
 const has = (f) => args.includes(f);
+const dry = has("--dry-run");
+const forceFlag = has("--force");
+
+const DEPS = [
+  "@radix-ui/react-icons",
+  "@radix-ui/react-slot",
+  "@tanstack/react-table",
+  "class-variance-authority",
+  "clsx",
+  "cmdk",
+  "date-fns",
+  "input-otp",
+  "lucide-react",
+  "next-themes",
+  "radix-ui",
+  "react-day-picker",
+  "react-hook-form",
+  "@hookform/resolvers",
+  "recharts",
+  "sonner",
+  "tailwind-merge",
+  "zod",
+].join(" ");
+
+const WIRING_STEPS = `  1. Install peer deps (those your components use):
+       npm i ${DEPS}
+  2. app/globals.css:
+       @import "tailwindcss";
+       @import "@viliha/vui-ui/theme.css";
+  3. next.config:  transpilePackages: ["@viliha/vui-ui"]
+  4. tsconfig.json (only if you copy the reference-app pieces):
+       "compilerOptions": { "paths": { "@/*": ["./*"] } }
+Then import components from @viliha/vui-ui/* and build your pages.`;
 
 function usage() {
   console.log(`@viliha/vui-ui
@@ -23,18 +61,14 @@ function usage() {
 Usage:
   npx @viliha/vui-ui init [options]
 
-  init            Scaffold the VUI app shell (+ optional demo pages) into this
-                  project. Interactive unless flags are given. Non-destructive:
-                  existing files are skipped (use --force to overwrite).
+  init            Set up the VUI theme in this project (interactive).
 
 Options:
-  --fresh         Treat as a brand-new project (copies config too).
-  --existing      Treat as an existing project (skips config; prints merge steps).
-  --demo          Include the demo pages (dashboard, CRM, calendar, chat, …).
-  --no-demo       Shell + dashboard only, no other demo pages.
-  --yes, -y       Accept defaults without prompting (fresh, with demo).
-  --force         Overwrite files that already exist.
-  --dry-run       Show what would be written without touching the disk.
+  --fresh | --existing        project type (Q1)
+  --prebuilt | --theme-only   pre-built shell + demo, or just the theme (Q2)
+  --yes, -y                   accept defaults (fresh, prebuilt)
+  --force                     overwrite existing files
+  --dry-run                   preview without writing
 `);
 }
 
@@ -50,9 +84,6 @@ if (!existsSync(TEMPLATE)) {
   process.exit(1);
 }
 
-const dry = has("--dry-run");
-const force = has("--force");
-
 async function ask(question, def) {
   if (has("--yes") || has("-y") || !stdin.isTTY) return def;
   const rl = createInterface({ input: stdin, output: stdout });
@@ -61,80 +92,97 @@ async function ask(question, def) {
   return a || def;
 }
 
-// Config/root files that an existing project almost certainly already has —
-// copying them would collide, so in "existing" mode we skip + print merge steps.
-const CONFIG_FILES = new Set([
+// Theme wiring config an existing project already has — never clobbered there.
+const WIRING = new Set([
   "next.config.mjs",
   "postcss.config.mjs",
+  ".env.example",
   "app/globals.css",
-  "app/layout.tsx",
-  "app/page.tsx",
 ]);
 
-// A file is a "demo page" (optional) vs the shell (always). The dashboard stays
-// in the shell so `/` has a landing page.
+// Optional demo pages (vs the always-present shell). Dashboard stays in the
+// shell so `/` has a landing page.
 function isDemo(rel) {
   const p = rel.split(sep).join("/");
   if (p.startsWith("app/auth/")) return true;
   if (p.startsWith("app/onboarding/")) return true;
   if (p.startsWith("app/register-business/")) return true;
-  if (p.startsWith("app/(app)/")) {
+  if (p.startsWith("app/(app)/"))
     return !(p === "app/(app)/layout.tsx" || p.startsWith("app/(app)/dashboard/"));
-  }
   return false;
 }
 
+function category(rel) {
+  const p = rel.split(sep).join("/");
+  if (WIRING.has(p)) return "wiring";
+  if (isDemo(rel)) return "demo";
+  return "shell";
+}
+
+function allFiles(dir, out = []) {
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const abs = join(dir, entry.name);
+    if (entry.isDirectory()) allFiles(abs, out);
+    else out.push(abs);
+  }
+  return out;
+}
+
 async function main() {
-  // 1. Fresh vs existing.
-  let mode = has("--existing") ? "existing" : has("--fresh") ? "fresh" : null;
-  if (!mode) {
-    const a = await ask(
-      "Is this a fresh project or an existing one? [F(resh)/e(xisting)] ",
-      "f",
-    );
-    mode = a.startsWith("e") ? "existing" : "fresh";
+  // Q1 — fresh vs existing.
+  let fresh = has("--fresh") ? true : has("--existing") ? false : null;
+  if (fresh === null) {
+    const a = await ask("Are you installing VUI in a fresh project? [Y/n] ", "y");
+    fresh = !a.startsWith("n");
+  }
+
+  // Q2 — pre-built (shell + demo) vs theme-only.
+  let prebuilt = has("--prebuilt") ? true : has("--theme-only") ? false : null;
+  if (prebuilt === null) {
+    const q = fresh
+      ? "Install the pre-built theme with a Next.js project (shell + demo pages)? [Y/n] "
+      : "Install the pre-built theme (shell + demo pages) into this project? [Y/n] ";
+    const a = await ask(q, "y");
+    prebuilt = !a.startsWith("n");
   }
 
-  // 2. Include the demo pages?
-  let demo = has("--demo") ? true : has("--no-demo") ? false : null;
-  if (demo === null) {
-    const a = await ask(
-      "Install the demo pages (dashboard, CRM, calendar, chat, support…)? [Y/n] ",
-      "y",
+  // Existing + theme-only: nothing to copy — just print the wiring steps.
+  if (!fresh && !prebuilt) {
+    console.log(
+      `\nTheme-only setup for an existing project — no files copied.\n\n` +
+        `Wire the theme into your app:\n${WIRING_STEPS}\n`,
     );
-    demo = !a.startsWith("n");
+    return;
   }
 
   const cwd = process.cwd();
+  const files = allFiles(TEMPLATE);
   let created = 0;
   let skipped = 0;
   const configSkipped = [];
 
-  const files = [];
-  (function walk(dir) {
-    for (const entry of readdirSync(dir, { withFileTypes: true })) {
-      const abs = join(dir, entry.name);
-      if (entry.isDirectory()) walk(abs);
-      else files.push(abs);
-    }
-  })(TEMPLATE);
-
-  console.log(
-    `\nScaffolding VUI (${mode}${demo ? ", with demo" : ", no demo"}) into ${cwd}${
-      dry ? "  [dry run]" : ""
-    }\n`,
-  );
+  const label = `${fresh ? "fresh" : "existing"}, ${prebuilt ? "prebuilt" : "theme-only"}`;
+  console.log(`\nScaffolding VUI (${label}) into ${cwd}${dry ? "  [dry run]" : ""}\n`);
 
   for (const abs of files) {
     const rel = relative(TEMPLATE, abs);
-    const norm = rel.split(sep).join("/");
-
-    if (isDemo(rel) && !demo) continue; // demo not selected
-    if (mode === "existing" && CONFIG_FILES.has(norm)) {
-      configSkipped.push(norm);
+    const cat = category(rel);
+
+    // Which files this leaf installs.
+    const include =
+      fresh && prebuilt
+        ? true // everything: config + shell + demo
+        : fresh && !prebuilt
+          ? cat === "wiring" // just the theme wiring
+          : /* existing && prebuilt */ cat !== "wiring"; // shell + demo, not config
+    if (!include) {
+      if (!fresh && cat === "wiring") configSkipped.push(rel.split(sep).join("/"));
       continue;
     }
 
+    // Fresh overwrites boilerplate (create-next-app defaults); existing is
+    // non-destructive so we never clobber the user's own files.
+    const force = forceFlag || fresh;
     const dest = join(cwd, rel);
     if (existsSync(dest) && !force) {
       skipped++;
@@ -153,59 +201,38 @@ async function main() {
     `\nDone — ${created} file(s) ${dry ? "would be added" : "added"}, ${skipped} skipped.`,
   );
 
-  const DEPS = [
-    "@radix-ui/react-icons",
-    "@radix-ui/react-slot",
-    "@tanstack/react-table",
-    "class-variance-authority",
-    "clsx",
-    "cmdk",
-    "date-fns",
-    "input-otp",
-    "lucide-react",
-    "next-themes",
-    "radix-ui",
-    "react-day-picker",
-    "react-hook-form",
-    "@hookform/resolvers",
-    "recharts",
-    "sonner",
-    "tailwind-merge",
-    "zod",
-  ].join(" ");
-
-  if (mode === "existing") {
+  // Per-leaf next steps.
+  if (fresh && prebuilt) {
     console.log(`
-⚠  Existing project — config files were NOT written to avoid clobbering yours.
-   Merge these into your project manually:
-
-   • next.config: add
-       transpilePackages: ["@viliha/vui-ui"]
-     (for the demo's tab keep-alive: output:"export", images:{unoptimized:true},
-      trailingSlash:true — optional, only if you want static-export keep-alive)
-   • app/globals.css: add
-       @import "tailwindcss";
-       @import "@viliha/vui-ui/theme.css";
-   • tsconfig.json: map the alias the scaffold uses
-       "compilerOptions": { "paths": { "@/*": ["./*"] } }
-   • Root app/layout.tsx: import "./globals.css" and mount fonts if you want the
-     demo's exact look (see the scaffolded app/(app)/layout.tsx for the shell).
+Next steps:
+  1. npm i ${DEPS}
+  2. npm run dev   ->   http://localhost:3000  (redirects to /dashboard)
 
-   The shell + pages were added under app/(app)/ and app/_components/ — review
-   them (re-run with --dry-run first if unsure) before committing.
+Everything is in YOUR repo — edit app/_components/nav-config.ts, set your logo
+(NEXT_PUBLIC_LOGO_URL in .env), and delete demo pages you don't need.
 `);
-  }
-
-  console.log(`Next steps:
-  1. Install peer dependencies:
-       npm i ${DEPS}
-  2. Start the app:
-       npm run dev   ->   http://localhost:3000  (redirects to /dashboard)
+  } else if (fresh && !prebuilt) {
+    console.log(`
+Theme wired (globals.css + next.config). No shell or demo pages — build your own.
 
-Everything landed in YOUR repo — edit app/_components/nav-config.ts, set your
-logo (NEXT_PUBLIC_LOGO_URL in .env), and delete demo pages you don't need.
-Docs: /docs/navigation (sidebar, tabs) and /docs/configuration (logo, env).
+Next steps:
+  1. npm i ${DEPS}
+  2. Import components from @viliha/vui-ui/* in your pages, then: npm run dev
 `);
+  } else {
+    // existing + prebuilt
+    console.log(`
+⚠  Existing project — config files were NOT written. Merge these yourself:
+${WIRING_STEPS}
+
+The shell + demo were added under app/(app)/ and app/_components/ — review them
+(re-run with --dry-run first if unsure) before committing.${
+      configSkipped.length
+        ? `\nSkipped config: ${configSkipped.join(", ")}`
+        : ""
+    }
+`);
+  }
 }
 
 main();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viliha/vui-ui",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Vui UI — a clean, token-driven React admin/CRM component library built on Tailwind CSS v4, shadcn-style patterns, and Radix Icons. Ships as TypeScript source (Just-in-Time), compiled by the consuming app.",
   "license": "MIT",
   "author": "Suman Bonakurthi",

package/src/record-view.tsx

@@ -37,6 +37,7 @@ import { Breadcrumbs, type Crumb } from "./breadcrumbs";
 import { Button } from "./button";
 import { Checkbox } from "./checkbox";
 import { Input } from "./input";
+import { Select } from "./select";
 import {
   Table,
   TableBody,
@@ -191,9 +192,13 @@ export interface RecordField<T> {
   hideInTable?: boolean;
   /** Custom, non-editable cell/value renderer. */
   render?: (row: T) => React.ReactNode;
-  /** If set, the field becomes a choice field: the selection toolbar offers a
-   *  "Set {label}" bulk action listing these values. */
+  /** If set, the field becomes a choice field: the Add/Edit form renders a
+   *  `Select`, and the selection toolbar offers a "Set {label}" bulk action. */
   options?: { value: string; label: string }[];
+  /** Form control for the Add/Edit panel/page. Default `"text"` (auto-growing
+   *  textarea). `"number"`/`"date"` render the matching native input; a field
+   *  with `options` always renders a `Select` regardless of this. */
+  input?: "text" | "number" | "date";
 }
 
 /**
@@ -1575,21 +1580,45 @@ function RecordDetailPanel<T extends { id: RowId }>({
                 {f.render ? (
                   <div>{f.render(draft)}</div>
                 ) : !readOnly && f.editable ? (
-                  <textarea
-                    value={String(draft[f.key as keyof T] ?? "")}
-                    onChange={(e) => setField(f.key as keyof T, e.target.value)}
-                    aria-label={f.label}
-                    aria-invalid={errors.has(f.key) || undefined}
-                    placeholder={`Add ${f.label.toLowerCase()}`}
-                    rows={1}
-                    // field-sizing grows the box to fit long/wrapped text
-                    className={cn(
-                      "w-full resize-none rounded-sm border bg-background px-2 py-1.5 outline-none [field-sizing:content] placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-inset",
-                      errors.has(f.key)
-                        ? "border-destructive focus-visible:ring-destructive"
-                        : "border-input focus-visible:ring-ring",
-                    )}
-                  />
+                  f.options ? (
+                    <Select
+                      value={String(draft[f.key as keyof T] ?? "")}
+                      onValueChange={(v) => setField(f.key as keyof T, v)}
+                      options={f.options}
+                      ariaLabel={f.label}
+                      placeholder={`Select ${f.label.toLowerCase()}…`}
+                      className="w-full"
+                    />
+                  ) : f.input === "number" || f.input === "date" ? (
+                    <Input
+                      type={f.input}
+                      value={String(draft[f.key as keyof T] ?? "")}
+                      onChange={(e) => setField(f.key as keyof T, e.target.value)}
+                      aria-label={f.label}
+                      aria-invalid={errors.has(f.key) || undefined}
+                      className={cn(
+                        "w-full",
+                        errors.has(f.key) &&
+                          "border-destructive focus-visible:ring-destructive",
+                      )}
+                    />
+                  ) : (
+                    <textarea
+                      value={String(draft[f.key as keyof T] ?? "")}
+                      onChange={(e) => setField(f.key as keyof T, e.target.value)}
+                      aria-label={f.label}
+                      aria-invalid={errors.has(f.key) || undefined}
+                      placeholder={`Add ${f.label.toLowerCase()}`}
+                      rows={1}
+                      // field-sizing grows the box to fit long/wrapped text
+                      className={cn(
+                        "w-full resize-none rounded-sm border bg-background px-2 py-1.5 outline-none [field-sizing:content] placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-inset",
+                        errors.has(f.key)
+                          ? "border-destructive focus-visible:ring-destructive"
+                          : "border-input focus-visible:ring-ring",
+                      )}
+                    />
+                  )
                 ) : (
                   <span className="block whitespace-pre-wrap break-words px-2 py-1.5">
                     {String(draft[f.key as keyof T] ?? "") || (
@@ -1790,3 +1819,16 @@ export function RecordForm<T extends { id: RowId }>(
 ) {
   return <RecordDetailPanel layout="page" {...props} />;
 }
+
+/**
+ * Standalone **slide-over** record form — the standard Add / Edit / View panel
+ * used outside a table (e.g. on a Kanban board). Same overlay, `fields`-driven
+ * layout, blue Save, header/body/footer separators, and auto-width as the
+ * add/edit panel `RecordView` opens. Feed it a `fields` array; never hand-roll
+ * an add/edit form.
+ */
+export function RecordFormPanel<T extends { id: RowId }>(
+  props: Omit<DetailPanelProps<T>, "layout">,
+) {
+  return <RecordDetailPanel layout="panel" {...props} />;
+}

package/template/app/(app)/crm/opportunities/opportunities-board.tsx

@@ -3,8 +3,6 @@
 import * as React from "react";
 import {
   CalendarIcon as CalendarDays,
-  CheckIcon as Check,
-  Cross2Icon as X,
   CubeIcon as Building2,
   DragHandleDots2Icon as GripVertical,
   MagnifyingGlassIcon as Search,
@@ -20,16 +18,41 @@ import { cn } from "@/lib/utils";
 import { Badge } from "@viliha/vui-ui/badge";
 import { Button } from "@viliha/vui-ui/button";
 import { Input } from "@viliha/vui-ui/input";
+import { RecordFormPanel, type RecordField } from "@viliha/vui-ui/record-view";
 import {
   OPPORTUNITY_STAGES,
   opportunities as initialOpportunities,
   type Opportunity,
   type OpportunityStage,
 } from "@/lib/crm-data";
-import { Dropdown, DropdownItem, DropdownLabel } from "@viliha/vui-ui/dropdown-menu";
 import { Breadcrumbs } from "@/app/_components/breadcrumbs";
 import { SetPageTitle } from "@/app/_components/set-page-title";
 
+/** The Add/Edit slide-over is designed from this array — never hand-rolled. */
+const OPPORTUNITY_FIELDS: RecordField<Opportunity>[] = [
+  { key: "name", label: "Name", icon: Target, editable: true, required: true },
+  { key: "company", label: "Company", icon: Building2, editable: true },
+  { key: "amount", label: "Amount", icon: Coins, editable: true, input: "number" },
+  {
+    key: "stage",
+    label: "Stage",
+    icon: ListFilter,
+    editable: true,
+    options: OPPORTUNITY_STAGES.map((s) => ({ value: s, label: s })),
+  },
+  { key: "owner", label: "Owner", icon: User, editable: true },
+  { key: "closeDate", label: "Close date", icon: CalendarDays, editable: true, input: "date" },
+];
+
+const initials = (name: string) =>
+  name
+    .trim()
+    .split(/\s+/)
+    .map((w) => w[0])
+    .slice(0, 2)
+    .join("")
+    .toUpperCase() || "?";
+
 function formatCurrency(amount: number): string {
   return new Intl.NumberFormat("en-US", {
     style: "currency",
@@ -205,6 +228,7 @@ export function OpportunitiesBoard() {
                       item={item}
                       dragging={dragId === item.id}
                       onOpen={() => setActiveId(item.id)}
+                      onDelete={() => deleteItem(item.id)}
                       onDragStart={() => setDragId(item.id)}
                       onDragEnd={() => {
                         setDragId(null);
@@ -233,18 +257,27 @@ export function OpportunitiesBoard() {
       </div>
 
       {activeItem && (
-        <OpportunityDetailPanel
-          item={activeItem}
+        <RecordFormPanel<Opportunity>
+          fields={OPPORTUNITY_FIELDS}
+          row={activeItem}
+          singular="Opportunity"
+          title="Opportunities"
+          icon={Target}
           isNew={activeItem.id === newId}
+          getPrimary={(o) => ({
+            title: o.name || "Untitled opportunity",
+            initials: initials(o.name || "Opportunity"),
+            subtitle: o.company || undefined,
+          })}
           onSave={(draft) => {
-            updateItem(activeItem.id, draft);
+            // The panel edits values as strings; coerce the numeric field back.
+            updateItem(activeItem.id, {
+              ...draft,
+              amount: Number(draft.amount) || 0,
+            });
             setNewId(null);
             setActiveId(null);
           }}
-          onDelete={() => {
-            deleteItem(activeItem.id);
-            setNewId(null);
-          }}
           onCancel={() => {
             // Discard a never-saved new card entirely.
             if (activeItem.id === newId) deleteItem(activeItem.id);
@@ -261,12 +294,14 @@ function OpportunityCard({
   item,
   dragging,
   onOpen,
+  onDelete,
   onDragStart,
   onDragEnd,
 }: {
   item: Opportunity;
   dragging: boolean;
   onOpen: () => void;
+  onDelete: () => void;
   onDragStart: () => void;
   onDragEnd: () => void;
 }) {
@@ -280,11 +315,23 @@ function OpportunityCard({
       }}
       onDragEnd={onDragEnd}
       className={cn(
-        "group cursor-grab rounded-md border border-border bg-card p-3 shadow-sm transition-colors hover:border-ring/40 active:cursor-grabbing",
+        "group relative cursor-grab rounded-md border border-border bg-card p-3 shadow-sm transition-colors hover:border-ring/40 active:cursor-grabbing",
         dragging && "opacity-40",
       )}
     >
-      <div className="flex items-start gap-1.5">
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onDelete();
+        }}
+        aria-label={`Delete ${item.name || "opportunity"}`}
+        title="Delete"
+        className="absolute right-1 top-1 grid size-6 place-items-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-destructive/10 hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100"
+      >
+        <Trash2 className="size-3.5" />
+      </button>
+      <div className="flex items-start gap-1.5 pr-5">
         <GripVertical className="mt-0.5 size-3.5 shrink-0 text-muted-foreground/50" />
         <button
           type="button"
@@ -310,175 +357,3 @@ function OpportunityCard({
     </article>
   );
 }
-
-interface DetailProps {
-  item: Opportunity;
-  /** New (unsaved) card — hides Delete; Cancel drops the card. */
-  isNew: boolean;
-  /** Commit the buffered draft to the board. */
-  onSave: (draft: Opportunity) => void;
-  onDelete: () => void;
-  /** Discard the draft (and the card if it was never saved). */
-  onCancel: () => void;
-}
-
-function OpportunityDetailPanel({
-  item,
-  isNew,
-  onSave,
-  onDelete,
-  onCancel,
-}: DetailProps) {
-  // Buffer edits locally; the board only changes on Save (like organizations).
-  const [draft, setDraft] = React.useState<Opportunity>(item);
-  React.useEffect(() => {
-    setDraft(item);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [item.id]);
-  const patch = (p: Partial<Opportunity>) => setDraft((d) => ({ ...d, ...p }));
-
-  return (
-    <>
-      <div
-        className="vui-overlay-in fixed inset-0 z-[55] bg-foreground/25"
-        onClick={onCancel}
-        aria-hidden="true"
-      />
-      <aside
-        aria-label="Opportunity details"
-        className="vui-panel-in fixed inset-y-0 right-0 z-[60] flex w-full flex-col border-l border-border bg-background shadow-xl sm:w-[380px] sm:max-w-[90vw]"
-      >
-      <div className="flex h-12 shrink-0 items-center gap-2 border-b border-border px-4">
-        <Target className="size-4 shrink-0 text-muted-foreground" />
-        <span className="truncate font-semibold">
-          {draft.name || "Untitled opportunity"}
-        </span>
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={onCancel}
-          aria-label="Close"
-          className="ml-auto"
-        >
-          <X className="size-4" />
-        </Button>
-      </div>
-
-      <div className="min-h-0 flex-1 space-y-5 overflow-y-auto p-4">
-        <div className="space-y-3">
-          <p className="font-medium uppercase tracking-wide text-muted-foreground">
-            Fields
-          </p>
-
-          <Field label="Name">
-            <Input
-              value={draft.name}
-              onChange={(e) => patch({ name: e.target.value })}
-              aria-label="Name"
-              className="h-8"
-            />
-          </Field>
-
-          <Field label="Company" icon={Building2}>
-            <Input
-              value={draft.company}
-              onChange={(e) => patch({ company: e.target.value })}
-              aria-label="Company"
-              className="h-8"
-            />
-          </Field>
-
-          <Field label="Amount" icon={Coins}>
-            <Input
-              type="number"
-              min={0}
-              value={draft.amount}
-              onChange={(e) => patch({ amount: Number(e.target.value) || 0 })}
-              aria-label="Amount"
-              className="h-8 tabular-nums"
-            />
-          </Field>
-
-          <Field label="Stage" icon={ListFilter}>
-            <Dropdown label={draft.stage} align="start" active>
-              <DropdownLabel>Move to stage</DropdownLabel>
-              {OPPORTUNITY_STAGES.map((s) => (
-                <DropdownItem
-                  key={s}
-                  checked={draft.stage === s}
-                  onSelect={() => patch({ stage: s })}
-                >
-                  {s}
-                </DropdownItem>
-              ))}
-            </Dropdown>
-          </Field>
-
-          <Field label="Owner" icon={User}>
-            <Input
-              value={draft.owner}
-              onChange={(e) => patch({ owner: e.target.value })}
-              aria-label="Owner"
-              className="h-8"
-            />
-          </Field>
-
-          <Field label="Close date" icon={CalendarDays}>
-            <Input
-              type="date"
-              value={draft.closeDate}
-              onChange={(e) => patch({ closeDate: e.target.value })}
-              aria-label="Close date"
-              className="h-8"
-            />
-          </Field>
-        </div>
-      </div>
-
-      {/* Footer — Add shows Cancel/Save; Edit adds a leading Delete.
-          Save uses the primary color; Delete uses the destructive (red) token. */}
-      <div className="flex shrink-0 items-center justify-end gap-2 border-y border-border bg-muted/40 px-4 py-3">
-        {!isNew && (
-          <Button
-            variant="destructive"
-            size="sm"
-            onClick={onDelete}
-            className="mr-auto"
-          >
-            <Trash2 className="size-4" />
-            Delete
-          </Button>
-        )}
-        <Button size="sm" onClick={onCancel}>
-          <X className="size-4" />
-          Cancel
-        </Button>
-        <Button variant="primary" size="sm" onClick={() => onSave(draft)}>
-          <Check className="size-4" />
-          Save
-        </Button>
-      </div>
-      </aside>
-    </>
-  );
-}
-
-function Field({
-  label,
-  icon: Icon,
-  children,
-}: {
-  label: string;
-  icon?: React.ComponentType<{ className?: string }>;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="space-y-1">
-      <span className="flex items-center gap-1.5 text-muted-foreground">
-        {Icon && <Icon className="size-3.5" />}
-        {label}
-      </span>
-      {children}
-    </div>
-  );
-}