create-davepi-ui 0.1.0 → 0.3.0

package/README.md

@@ -7,7 +7,7 @@ Scaffolder for new [davepi-ui](https://github.com/projik/davepi-ui) admin projec
 ```bash
 npx create-davepi-ui my-admin --api-url http://localhost:4001
 cd my-admin
-pnpm dev
+npm run dev
 ```
 
 ## Flags
@@ -15,14 +15,14 @@ pnpm dev
 | Flag | Default | Purpose |
 |---|---|---|
 | `--api-url <url>` | `http://localhost:4001` | davepi backend base URL written to `.env` |
-| `--no-install` | off | Skip post-scaffold `pnpm install` |
+| `--no-install` | off | Skip post-scaffold `npm install` |
 
 ## What it does
 
-1. Copies the bundled template (Vite + React Router + shadcn + `@davepi/ui-react`).
+1. Copies the bundled template (Vite + React Router + shadcn + `@davepi/ui-react`). Lock files are filtered out so the scaffolded project picks its own package manager — npm by default, matching the davepi backend.
 2. Rewrites `package.json` — pins `@davepi/ui-*` deps to the published versions matching this scaffolder, sets `private: true`, drops upstream repo metadata.
 3. Writes `.env` with `VITE_API_URL`.
-4. Runs `pnpm install` (unless `--no-install`).
+4. Runs `npm install` (unless `--no-install`).
 
 ## License
 

package/bin/index.js

@@ -9,7 +9,7 @@
  *   - rewrites `package.json` with the new project name + pinned
  *     published versions of @davepi/ui-* (no workspace: protocol)
  *   - writes `.env` carrying VITE_API_URL
- *   - runs `pnpm install` (skip with --no-install)
+ *   - runs `npm install` (skip with --no-install)
  *   - prints the next three commands
  *
  * No `inquirer`, no progress bars — keeps the failure surface small.
@@ -58,7 +58,7 @@ function usage() {
   out('');
   out('Flags:');
   out('  --api-url <url>   davepi backend base URL (default: http://localhost:4001)');
-  out('  --no-install      skip the post-scaffold `pnpm install`');
+  out('  --no-install      skip the post-scaffold `npm install`');
 }
 
 function copyTree(src, dst, skip) {
@@ -198,16 +198,18 @@ function main() {
     rewritePackageJson(pkgPath, name, resolvePinnedVersions());
   }
 
-  // Write a starter `.env` so the user can run `pnpm dev` immediately.
+  // Write a starter `.env` so the user can run `npm run dev` immediately.
   fs.writeFileSync(path.join(target, '.env'), `VITE_API_URL=${apiUrl}\n`);
 
   if (!skipInstall) {
     out('Installing dependencies…');
     // spawnSync with an argument array — no shell, no interpolation,
-    // so the only program ever invoked is the literal `pnpm`.
-    const r = spawnSync('pnpm', ['install'], { cwd: target, stdio: 'inherit' });
+    // so the only program ever invoked is the literal `npm`. npm ships
+    // as `.cmd` shim on Windows, hence the platform-specific name.
+    const npmCmd = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+    const r = spawnSync(npmCmd, ['install'], { cwd: target, stdio: 'inherit' });
     if (r.status !== 0) {
-      err('pnpm install failed. You can re-run it from the project directory.');
+      err('npm install failed. You can re-run it from the project directory.');
     }
   }
 
@@ -215,8 +217,8 @@ function main() {
   out('Done.');
   out('');
   out(`  cd ${name}`);
-  if (skipInstall) out('  pnpm install');
-  out('  pnpm dev');
+  if (skipInstall) out('  npm install');
+  out('  npm run dev');
   out('');
   out(`Backend expected at ${apiUrl}. Edit .env to point elsewhere.`);
 }

package/bin/sync-templates.js

@@ -45,6 +45,14 @@ const SKIP = new Set([
   '.astro',
   '.env',
   '.env.local',
+  // Skip lock files — davepi-ui itself uses pnpm because it's a
+  // monorepo, but the scaffolded admin is a plain Vite app that uses
+  // npm. Keeps the package-manager surface aligned with the davepi
+  // backend the user already runs via `npm install`. The scaffolded
+  // `npm install` writes a fresh package-lock.json.
+  'pnpm-lock.yaml',
+  'yarn.lock',
+  'package-lock.json',
 ]);
 
 function copyTree(src, dst) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-davepi-ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Scaffolder for new davepi-ui projects. Run: npx create-davepi-ui <name> [--api-url <url>]",
   "license": "MIT",
   "author": "David Baxter <dave@unlockedequity.com>",

package/templates/default/index.html

@@ -1,10 +1,26 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>davepi-ui</title>
+    <script>
+      // FOUC guard: read theme preference + apply class before paint
+      // so the very first frame already matches the user's choice.
+      // Lookup order: explicit localStorage choice → system preference.
+      // Values: 'light' | 'dark' | 'system' (default).
+      (function () {
+        try {
+          var pref = localStorage.getItem('davepi-theme') || 'system';
+          var prefersDark =
+            pref === 'dark' ||
+            (pref === 'system' &&
+              window.matchMedia('(prefers-color-scheme: dark)').matches);
+          document.documentElement.classList.toggle('dark', prefersDark);
+        } catch (e) {}
+      })();
+    </script>
   </head>
   <body class="bg-background text-foreground">
     <div id="root"></div>

package/templates/default/src/components/AppShell.tsx

@@ -1,6 +1,7 @@
 import { Outlet } from 'react-router-dom';
 import { UserMenu } from '@davepi/ui-react';
 import { Sidebar } from './Sidebar';
+import { ThemeToggle } from './ThemeToggle';
 
 /**
  * Two-column shell: sidebar nav (resource list from describe) + main outlet.
@@ -12,6 +13,7 @@ export function AppShell() {
       <Sidebar />
       <div className="flex flex-1 flex-col overflow-hidden">
         <header className="flex h-14 items-center justify-end gap-3 border-b border-border px-6">
+          <ThemeToggle />
           <UserMenu className="flex items-center gap-3 text-sm" />
         </header>
         <main className="flex-1 overflow-auto p-6">

package/templates/default/src/components/ThemeToggle.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import { Moon, Sun, Laptop } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+/**
+ * Light / dark / system-preference toggle. Persisted in localStorage
+ * under `davepi-theme`. The index.html FOUC-guard script reads the
+ * same key on first paint, so the user's choice survives reload
+ * without a flash of the wrong theme.
+ */
+type Theme = 'light' | 'dark' | 'system';
+
+const STORAGE_KEY = 'davepi-theme';
+
+function applyTheme(theme: Theme) {
+  const prefersDark =
+    theme === 'dark' ||
+    (theme === 'system' &&
+      typeof window !== 'undefined' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches);
+  document.documentElement.classList.toggle('dark', prefersDark);
+}
+
+function readTheme(): Theme {
+  if (typeof window === 'undefined') return 'system';
+  const v = window.localStorage.getItem(STORAGE_KEY);
+  if (v === 'light' || v === 'dark' || v === 'system') return v;
+  return 'system';
+}
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>(() => readTheme());
+
+  useEffect(() => {
+    applyTheme(theme);
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(STORAGE_KEY, theme);
+    }
+  }, [theme]);
+
+  // Listen for OS-level preference changes when in system mode so the
+  // UI tracks the user's day-night transition.
+  useEffect(() => {
+    if (theme !== 'system' || typeof window === 'undefined') return;
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = () => applyTheme('system');
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, [theme]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" aria-label="Toggle theme">
+          <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>
+          <Sun className="mr-2 h-4 w-4" /> Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
+          <Moon className="mr-2 h-4 w-4" /> Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
+          <Laptop className="mr-2 h-4 w-4" /> System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/templates/default/src/index.css

@@ -4,44 +4,52 @@
 
 @layer base {
   :root {
+    /* Light theme — slate neutrals + indigo accent.
+       Friendlier than pure black-on-white. */
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --foreground: 222 47% 11%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
+    --card-foreground: 222 47% 11%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222 47% 11%;
+    --primary: 224 76% 48%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222 47% 11%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215 16% 47%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222 47% 11%;
+    --destructive: 0 72% 51%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
+    --border: 214 32% 91%;
+    --input: 214 32% 91%;
+    --ring: 224 76% 48%;
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+    /* Dark theme — slate base instead of near-black, indigo accent
+       carried over. Less screen-bleach than pure-monochrome. */
+    --background: 222 47% 11%;
+    --foreground: 210 40% 98%;
+    --card: 222 47% 13%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222 47% 13%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 224 76% 60%;
+    --primary-foreground: 222 47% 11%;
+    --secondary: 217 33% 18%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217 33% 18%;
+    --muted-foreground: 215 20% 65%;
+    --accent: 217 33% 18%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 63% 51%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217 33% 22%;
+    --input: 217 33% 22%;
+    --ring: 224 76% 60%;
   }
 
   * {

package/templates/default/src/pages/ResourceDetailPage.tsx

@@ -51,9 +51,24 @@ export function ResourceDetailPage() {
 
   const preview = describe.registry.preview(path, record.data);
   const visibleFields = entry.fields.filter((f) => !SERVER_STAMPED.has(f.name));
-  const childRelations = describe.registry
+  // Suppress redundant `hasOne` tabs: when a parent declares both
+  // `hasMany: contact` and `hasOne: contact` against the same FK
+  // (e.g. `primaryContact` for "the one flagged as primary"), the
+  // hasMany tab already lists every contact including the primary —
+  // a separate Primary Contact tab is UX clutter, not information.
+  // Skip the hasOne when an equivalent hasMany exists; the user can
+  // sort / filter the main list to find the primary.
+  const allChildRelations = describe.registry
     .relations(path)
     .filter((r) => r.kind === 'hasMany' || r.kind === 'hasOne');
+  const hasManyKeys = new Set(
+    allChildRelations
+      .filter((r) => r.kind === 'hasMany')
+      .map((r) => `${r.target}:${r.foreignKey}`)
+  );
+  const childRelations = allChildRelations.filter(
+    (r) => r.kind !== 'hasOne' || !hasManyKeys.has(`${r.target}:${r.foreignKey}`)
+  );
 
   const detailsBlock = (
     <section className="rounded-md border border-border bg-card">
@@ -104,10 +119,20 @@ export function ResourceDetailPage() {
             <TabsTrigger value="details">Details</TabsTrigger>
             {childRelations.map((rel) => {
               const target = describe.registry.display(rel.target);
-              const key = `${rel.target}:${rel.foreignKey}`;
+              // Include `rel.name` in the key — without it, a parent
+              // that declares both `contacts: hasMany` and
+              // `primaryContact: hasOne` on the same target/FK pair
+              // would collide on a `target:foreignKey`-only key.
+              // The label uses the relation name (humanised) instead
+              // of the bare target plural so the tabs read distinctly.
+              const key = `${rel.name}:${rel.target}:${rel.foreignKey}`;
+              const tabLabel =
+                rel.kind === 'hasOne'
+                  ? labelize(rel.name)
+                  : target.pluralLabel;
               return (
                 <TabsTrigger key={key} value={key}>
-                  {target.pluralLabel}
+                  {tabLabel}
                 </TabsTrigger>
               );
             })}
@@ -116,7 +141,7 @@ export function ResourceDetailPage() {
             {detailsBlock}
           </TabsContent>
           {childRelations.map((rel) => {
-            const key = `${rel.target}:${rel.foreignKey}`;
+            const key = `${rel.name}:${rel.target}:${rel.foreignKey}`;
             return (
               <TabsContent key={key} value={key} className="mt-4">
                 <RelatedList

package/templates/pinned-versions.json

@@ -1,5 +1,5 @@
 {
   "@davepi/ui-core": "^0.1.1",
   "@davepi/ui-mcp": "^0.1.1",
-  "@davepi/ui-react": "^0.1.1"
+  "@davepi/ui-react": "^0.2.0"
 }

package/templates/default/src/resources/account.ts

@@ -1,25 +0,0 @@
-import type { ResourceConfig } from '@davepi/ui-core';
-
-/**
- * Account override. Backend (`/_describe`) supplies label / pluralLabel
- * / displayField, so this file only carries the bits the backend can't
- * know about: sidebar category, table columns, bulk actions.
- */
-const config: ResourceConfig = {
-  category: 'CRM',
-  listColumns: [
-    { field: 'accountName', label: 'Account name' },
-    { field: 'description', label: 'Notes' },
-  ],
-  actions: {
-    bulk: [
-      {
-        id: 'bulk-delete',
-        label: 'Delete selected',
-        kind: 'bulkDelete',
-      },
-    ],
-  },
-};
-
-export default config;

package/templates/default/src/resources/category.ts

@@ -1,7 +0,0 @@
-import type { ResourceConfig } from '@davepi/ui-core';
-
-const config: ResourceConfig = {
-  category: 'Catalogue',
-};
-
-export default config;

package/templates/default/src/resources/contact.ts

@@ -1,40 +0,0 @@
-import type { ResourceConfig } from '@davepi/ui-core';
-
-/**
- * Contact override. Form sections and explicit list columns are the
- * UI-only bits — labels / pluralLabel / displayField come straight
- * from the backend manifest.
- */
-const config: ResourceConfig = {
-  category: 'CRM',
-  listColumns: [
-    { field: 'first_name' },
-    { field: 'last_name' },
-    { field: 'email' },
-    { field: 'phone' },
-  ],
-  formSections: [
-    {
-      title: 'Identity',
-      fields: [{ field: 'first_name' }, { field: 'last_name' }, { field: 'email' }],
-    },
-    {
-      title: 'Contact',
-      fields: [{ field: 'phone' }, { field: 'mobile' }, { field: 'company' }],
-    },
-    {
-      title: 'Address',
-      description: 'Postal address used for invoices and correspondence.',
-      fields: [
-        { field: 'address1' },
-        { field: 'address2' },
-        { field: 'suburb' },
-        { field: 'state' },
-        { field: 'postcode' },
-        { field: 'country' },
-      ],
-    },
-  ],
-};
-
-export default config;

package/templates/default/src/resources/product.ts

@@ -1,7 +0,0 @@
-import type { ResourceConfig } from '@davepi/ui-core';
-
-const config: ResourceConfig = {
-  category: 'Catalogue',
-};
-
-export default config;

package/templates/default/src/resources/project.ts

@@ -1,7 +0,0 @@
-import type { ResourceConfig } from '@davepi/ui-core';
-
-const config: ResourceConfig = {
-  category: 'Delivery',
-};
-
-export default config;

package/templates/default/src/resources/quote.ts

@@ -1,12 +0,0 @@
-import type { ResourceConfig } from '@davepi/ui-core';
-
-/**
- * Quote override. Only the sidebar category is consumer-supplied —
- * everything else (labels, displayField, contactId relation, etc.)
- * comes from the backend manifest.
- */
-const config: ResourceConfig = {
-  category: 'CRM',
-};
-
-export default config;