@webjsdev/cli 0.8.6 → 0.9.1

package/README.md

@@ -18,7 +18,7 @@ Then scaffold a new app anywhere:
 ```sh
 webjs create my-app
 cd my-app && npm run dev
-# → http://localhost:3000
+# → http://localhost:8080
 ```
 
 One-shot without a global install, two ways:

package/bin/webjs.js

@@ -12,8 +12,8 @@ const [cmd, ...rest] = process.argv.slice(2);
 const TEMPLATES = ['full-stack', 'api', 'saas'];
 
 const USAGE = `webjs commands:
-  webjs dev   [--port 3000]                       Start dev server with live reload
-  webjs start [--port 3000]                       Start production server (serves source directly, no build step)
+  webjs dev   [--port 8080]                       Start dev server with live reload
+  webjs start [--port 8080]                       Start production server (serves source directly, no build step)
   webjs test  [--server|--browser]                 Run server + browser tests
   webjs check                                     Validate app against conventions
   webjs create <name> [--template full-stack|api|saas] [--no-install]  Scaffold a new webjs app
@@ -41,7 +41,7 @@ async function main() {
       // If we're already inside the --watch child, start the server directly.
       if (process.env.__WEBJS_DEV_CHILD === '1') {
         const { startServer } = await import('@webjsdev/server');
-        const port = Number(flag(rest, '--port', process.env.PORT || 3000));
+        const port = Number(flag(rest, '--port', process.env.PORT || 8080));
         await startServer({ appDir: process.cwd(), port, dev: true });
         break;
       }
@@ -81,7 +81,7 @@ async function main() {
     }
     case 'start': {
       const { startServer } = await import('@webjsdev/server');
-      const port = Number(flag(rest, '--port', process.env.PORT || 3000));
+      const port = Number(flag(rest, '--port', process.env.PORT || 8080));
       await startServer({ appDir: process.cwd(), port, dev: false });
       break;
     }

package/lib/create.js

@@ -15,6 +15,7 @@ import { mkdir, writeFile, readFile, cp } from 'node:fs/promises';
 import { join, resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { existsSync } from 'node:fs';
+import { createRequire } from 'node:module';
 import { spawnSync } from 'node:child_process';
 
 /**
@@ -54,14 +55,33 @@ const TEMPLATES = resolve(__dirname, '..', 'templates');
 // directly from disk at create time so the scaffolded app boots ready for
 // `webjs ui add` without an HTTP round-trip during scaffolding.
 //
-// Layout in the monorepo:
-//   packages/cli/lib/create.js                       ← __dirname
-//   packages/ui/packages/registry/components/*.ts
-//   packages/ui/packages/registry/lib/utils.ts
-//   packages/ui/packages/registry/themes/index.css
-const UI_REGISTRY_ROOT = resolve(
-  __dirname, '..', '..', 'ui', 'packages', 'registry',
-);
+//   <ui-pkg-root>/packages/registry/components/*.ts
+//   <ui-pkg-root>/packages/registry/lib/utils.ts
+//   <ui-pkg-root>/packages/registry/themes/index.css
+//
+// Locate <ui-pkg-root> via Node's module resolver rather than path
+// arithmetic off __dirname. The old `__dirname/../../ui/packages/registry`
+// form assumed @webjsdev/ui was a hoisted sibling of @webjsdev/cli under
+// node_modules/@webjsdev/. That holds for npm/yarn's default hoisting, but
+// breaks on nested layouts (pnpm's isolated linker, `npm install
+// --install-strategy=nested`, some CI setups), where @webjsdev/ui lives at
+// node_modules/@webjsdev/cli/node_modules/@webjsdev/ui and the arithmetic
+// resolves to a path that doesn't exist, failing `webjs create`.
+//
+// @webjsdev/ui's package.json isn't reachable via require.resolve (its
+// `exports` map doesn't expose `./package.json`), so resolve the package
+// entry and walk up to the directory that owns its package.json.
+function resolveUiRegistryRoot() {
+  const require = createRequire(import.meta.url);
+  let dir = dirname(require.resolve('@webjsdev/ui'));
+  while (!existsSync(join(dir, 'package.json'))) {
+    const parent = dirname(dir);
+    if (parent === dir) break; // reached filesystem root; give up
+    dir = parent;
+  }
+  return resolve(dir, 'packages', 'registry');
+}
+const UI_REGISTRY_ROOT = resolveUiRegistryRoot();
 
 /**
  * Read a single @webjsdev/ui registry component, rewrite its relative import
@@ -622,10 +642,21 @@ export default function RootLayout({ children }: { children: unknown }) {
     <script>
       (function(){
         try {
-          var t = localStorage.getItem('webjs_theme');
-          if (t === 'light' || t === 'dark') {
-            document.documentElement.dataset.theme = t;
+          var mq = window.matchMedia('(prefers-color-scheme: light)');
+          function apply(){
+            var t = null;
+            try { t = localStorage.getItem('webjs_theme'); } catch (_) {}
+            var el = document.documentElement;
+            if (t === 'light' || t === 'dark') el.dataset.theme = t;
+            else delete el.dataset.theme;
+            // Keep shadcn's .dark class in sync with the effective theme so the
+            // copied ui-* components (button, card, etc.) follow light/dark too.
+            // Dark is the default unless the OS prefers light or 'light' is set.
+            var dark = t === 'dark' || (t !== 'light' && !mq.matches);
+            el.classList.toggle('dark', dark);
           }
+          apply();
+          mq.addEventListener('change', apply);
         } catch (_) {}
       })();
     </script>
@@ -854,8 +885,13 @@ export class ThemeToggle extends WebComponent {
       if (next === 'system') localStorage.removeItem('webjs_theme');
       else localStorage.setItem('webjs_theme', next);
     } catch {}
-    if (next === 'system') delete document.documentElement.dataset.theme;
-    else document.documentElement.dataset.theme = next;
+    const el = document.documentElement;
+    if (next === 'system') delete el.dataset.theme;
+    else el.dataset.theme = next;
+    // Keep shadcn's .dark class in sync so the ui-* components follow the theme.
+    const dark = next === 'dark'
+      || (next === 'system' && !window.matchMedia('(prefers-color-scheme: light)').matches);
+    el.classList.toggle('dark', dark);
   }
 
   render() {
@@ -1008,7 +1044,7 @@ For AI agents, read this before editing scaffolded files:
   console.log(`
 Next steps:
   ${runCommand}
-  # → http://localhost:3000
+  # → http://localhost:8080
 
 Optional:
   ${uiNote}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/cli",
-  "version": "0.8.6",
+  "version": "0.9.1",
   "type": "module",
   "description": "webjs CLI - dev, start, create, db",
   "bin": {

package/templates/.env.example

@@ -4,7 +4,7 @@
 # Opinionated defaults: set these and the framework auto-configures.
 
 # ── Server ──────────────────────────────────────────────────────────
-PORT=3000
+PORT=8080
 
 # ── Auth (required for authentication) ──────────────────────────────
 # Generate: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

package/templates/CONVENTIONS.md

@@ -213,7 +213,7 @@ variables control infrastructure (no config files needed):
 | `AUTH_SECRET` | Required for auth JWT signing (32+ random chars) |
 | `AUTH_GOOGLE_ID` | Google OAuth client ID (optional) |
 | `AUTH_GITHUB_ID` | GitHub OAuth client ID (optional) |
-| `PORT` | Server port (default: 3000) |
+| `PORT` | Server port (default: 8080) |
 | `WEBJS_PUBLIC_*` | Any env var starting with this prefix is exposed to the browser as `process.env.WEBJS_PUBLIC_X`. Components can read it directly. No build step, no transform. Use for API base URLs, Stripe publishable keys, analytics IDs, anything that is intended to be visible client-side. |
 
 **Server-only by default.** Any env var without the `WEBJS_PUBLIC_` prefix never reaches the browser. Reading `process.env.DATABASE_URL` from a component returns `undefined`, the same as a typo. The prefix is fail-closed: secrets cannot accidentally leak.
@@ -568,6 +568,17 @@ or a build-step pipeline. The framework has no hard dependency on Tailwind.
 If you mix custom CSS into a light-DOM component, apply the class-prefix
 rule (see Components section above).
 
+**Dark mode uses two signals; a theme switch must set both.** The editorial
+chrome tokens (`--fg`, `--bg`, `--accent`) follow a `data-theme` attribute on
+`<html>`; the Webjs UI kit under `components/ui/` follows a `.dark` class
+(`@custom-variant dark (&:is(.dark *))`). The scaffold's head init script and
+`theme-toggle` set **both** (`data-theme` AND
+`classList.toggle('dark', isDark)`). If you replace the toggle or build your
+own theme switch, set both, or the `components/ui/*` render light tokens on a
+dark page (white buttons and cards, invisible text) while the chrome looks
+correct. Light mode hides this (both systems default to light), so **verify
+dark mode in a browser, not just light.**
+
 ---
 
 ## Styling alternative: vanilla CSS end-to-end