@webjsdev/cli 0.10.71 → 0.10.73

package/lib/create.js

@@ -585,13 +585,9 @@ export async function scaffoldApp(name, cwd, opts = {}) {
       // layout already writes asset(), so a fresh app is green on day one.
       // Two checks are fatal with no entry here at all, NODE_VERSION and
       // TSCONFIG_ERASABLE, because either would 500 the app at runtime;
-      // DARK_THEME_UNREACHABLE is at error too: AGENTS.md mandates light-dark()
-      // tokens, the generated layout writes them, and a layout that drops them
-      // leaves the stylesheet's .dark block dead and the OS setting ignored
-      // (#1628); elsewhere it is a design convention and stays a warning.
-      // Everything else keeps its default warn. Add a code with "off" to
+      // everything else keeps its default warn. Add a code with "off" to
       // silence it, or "error" to make it fatal too.
-      doctor: { gate: { UNMARKED_ASSET_LINKS: 'error', DARK_THEME_UNREACHABLE: 'error' } },
+      doctor: { gate: { UNMARKED_ASSET_LINKS: 'error' } },
       // The dependency audit's allowlist (#1492), the ONE place an accepted
       // advisory is listed, each with the reason it is safe. `webjs audit`
       // (the CI step below) fails on every other advisory at `level` or above,

package/lib/doctor/codes.js

@@ -51,7 +51,6 @@ export const DOCTOR_CODES = {
   'Asset urls (unmarked stylesheet links)': 'UNMARKED_ASSET_LINKS',
   'workspace-overrides': 'WORKSPACE_OVERRIDES',
   'app-icon': 'APP_ICON',
-  'dark-theme': 'DARK_THEME_UNREACHABLE',
 };
 
 /**

package/lib/doctor/runner.js

@@ -13,7 +13,6 @@ import { checkUnmarkedAssetLinks } from './probes/unmarked-asset-links.js';
 import { checkFrameworkResolves, checkFrameworkLinks } from './probes/framework-resolves.js';
 import { checkWorkspaceOverrides } from './probes/workspace-overrides.js';
 import { checkAppIcon } from './probes/app-icon.js';
-import { checkDarkTheme } from './probes/dark-theme.js';
 
 /**
  * @typedef {import('./codes.js').DoctorResult} DoctorResult
@@ -69,7 +68,6 @@ export async function runDoctorChecks(appDir, opts = {}) {
     checkUnmarkedAssetLinks(appDir),
     Promise.resolve(checkWorkspaceOverrides(appDir)),
     Promise.resolve(checkAppIcon(appDir)),
-    checkDarkTheme(appDir),
   ]);
   // Attach the stable machine code to every result (#975). Centralized here so
   // each check function stays free of the code-contract concern.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/cli",
-  "version": "0.10.71",
+  "version": "0.10.73",
   "type": "module",
   "description": "The CLI for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Runs the dev and production servers, scaffolds apps, validates conventions, and drives the database. Node 24+ or Bun.",
   "bin": {
@@ -17,7 +17,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@webjsdev/mcp": "^0.1.15",
+    "@webjsdev/mcp": "^0.1.17",
     "@webjsdev/server": "^0.8.89",
     "@webjsdev/ui": "^0.3.15"
   },

package/templates/.agents/skills/webjs/references/built-ins.md

@@ -298,8 +298,6 @@ Two guarantees worth knowing. A result that could not check (a network or toolch
 
 `APP_ICON` warns while the favicon is still the scaffold's placeholder `app/icon.svg` (marked `data-webjs-placeholder`). Replace it with the app's own icon (`references/routing-and-pages.md`, "App icon and manifest").
 
-`DARK_THEME_UNREACHABLE` warns when the app defines colour tokens with a light value only and nothing applies a dark half: no `light-dark()`, no `@media (prefers-color-scheme: dark)` rule, no theme script in the root layout. The scaffold gates it `error` in its `package.json` because its AGENTS.md mandates `light-dark()` tokens; the fix is the token block in `references/styling.md`.
-
 ### Dependency audit allowlist
 
 `webjs audit` runs `npm audit` or `bun audit` (by the nearest lockfile, so a workspace member uses the root's) and fails on any advisory at or above `webjs.audit.level` (default `high`) that `webjs.audit.ignore` does not list. The scaffold's `Security: dependency audit` CI step runs it.

package/templates/.agents/skills/webjs/references/styling.md

@@ -193,7 +193,7 @@ Whichever form you use, a token nothing references is dropped in both, so an unu
 </style>
 ```
 
-`light-dark()` is a native CSS function (CSS Color 5, Baseline 2024), not a library, so nothing to import. A single-theme app drops the `[data-theme]` rules and gives each token one colour. `webjs doctor` reports the floor as `DARK_THEME_UNREACHABLE` (the scaffold gates it `error`): an app whose tokens have a light value only, with no `light-dark()`, no `prefers-color-scheme` rule and no theme script in the root layout, because the scaffold stylesheet's `.dark` block would then be dead CSS and the OS dark setting ignored.
+`light-dark()` is a native CSS function (CSS Color 5, Baseline 2024), not a library, so nothing to import. A single-theme app drops the `[data-theme]` rules and gives each token one colour.
 
 **A manual theme toggle** writes `data-theme` on `<html>` (`light` / `dark`, or removes it for "follow the OS"). If you use `@webjsdev/ui` components, ALSO keep the `.dark` class in sync (the ui kit keys its own tokens off `.dark`), and apply the saved choice in a tiny inline `<script>` in the layout head so there is no first-paint flash. Verify dark mode in a real browser. Light mode passing proves nothing about dark.
 

package/templates/AGENTS.md

@@ -36,7 +36,16 @@ This is what separates a working app from a broken one.
 
 Derive the type at every boundary from its source. Never reach for `any`, and
 never `unknown` where a real type exists. The rule is step 8 of the skill's "Default
-Workflow"; the full ladder, with an end-to-end example, is
+Workflow"; the forms to reach for:
+
+- A database row: `typeof table.$inferSelect` (`$inferInsert` for a write),
+  carried into a shipping component with `import type`.
+- An action's input: a named `interface`. Its result: `ActionResult<T>`.
+- Routing files: `PageProps<'/blog/[slug]'>`, `LayoutProps`,
+  `RouteHandlerContext`. `npx webjsdev types` writes the typed `Route` union.
+- A reactive property: `prop<Student>(Object)`, `prop<Tag[]>(Array)`.
+
+The full ladder, with an end-to-end example, is
 `.agents/skills/webjs/references/typescript.md`.
 
 Keep server-only code (database drivers, secrets, `node:*` builtins) in

package/lib/doctor/probes/dark-theme.js

@@ -1,91 +0,0 @@
-import { existsSync, readdirSync } from 'node:fs';
-import { readFile } from 'node:fs/promises';
-import { join, relative } from 'node:path';
-
-/**
- * @typedef {import('../codes.js').DoctorResult} DoctorResult
- */
-
-const ROOT_LAYOUT = /^app\/layout\.(?:js|mjs|ts|mts)$/;
-/** Stylesheet sources: the Tailwind input and any hand-written sheet; never the compiled output. */
-const STYLE_SOURCE = /^(?:public|styles)\/(?:.+\/)?[^/]+\.css$/;
-const COMPILED_OR_VENDORED = /(?:^|\/)(?:tailwind\.css|node_modules\/|\.webjs\/|dist\/)/;
-/** A colour token definition: the two every palette starts from. */
-const TOKEN_DEF = /--(?:background|foreground)\s*:/;
-/** Any of these makes the dark half reachable. */
-const DUAL_TOKENS = /light-dark\s*\(/;
-const SCHEME_QUERY = /prefers-color-scheme/;
-/** A head script that applies a saved or detected theme. */
-const THEME_SCRIPT = /<script\b[^>]*>[\s\S]*?(?:prefers-color-scheme|localStorage|data-theme|classList\.(?:add|toggle)\(\s*['"`]dark['"`]|dataset\.theme)[\s\S]*?<\/script>/;
-
-/** CSS and JS block comments and line comments, so a commented-out token or hint does not count. */
-function stripComments(text) {
-  return text.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*\/\/.*$/gm, '');
-}
-
-/**
- * The app's colour-token sources: the root layout (where the generated app
- * writes its palette) and the stylesheet sources under `public/` and `styles/`.
- * @param {string} appDir
- * @returns {Promise<Array<{ rel: string, content: string }>>}
- */
-async function tokenSources(appDir) {
-  /** @type {Array<{ rel: string, content: string }>} */
-  const out = [];
-  const read = async (rel) => {
-    try { out.push({ rel, content: await readFile(join(appDir, rel), 'utf8') }); } catch { /* unreadable: not a source */ }
-  };
-  for (const ext of ['ts', 'js', 'mts', 'mjs']) {
-    const rel = `app/layout.${ext}`;
-    if (existsSync(join(appDir, rel))) { await read(rel); break; }
-  }
-  for (const dir of ['public', 'styles']) {
-    const abs = join(appDir, dir);
-    if (!existsSync(abs)) continue;
-    for (const e of readdirSync(abs, { recursive: true, withFileTypes: true })) {
-      if (!e.isFile() || !e.name.endsWith('.css')) continue;
-      const rel = relative(appDir, join(e.parentPath || abs, e.name)).split('\\').join('/');
-      if (STYLE_SOURCE.test(rel) && !COMPILED_OR_VENDORED.test(rel)) await read(rel);
-    }
-  }
-  return out;
-}
-
-/**
- * `DARK_THEME_UNREACHABLE` (#1628): the app defines colour tokens but nothing
- * applies a dark half. The scaffold's stylesheet keeps the ui kit's `.dark`
- * token block, and `AGENTS.md` asks for `light-dark()` tokens under
- * `color-scheme: light dark`; a layout that uses neither, has no
- * `prefers-color-scheme` rule and runs no theme script ships dead CSS and
- * ignores the OS setting, which no light-mode screenshot reveals. A design
- * convention rather than a runtime break, so it lives in doctor (WARN by
- * default) and the scaffold gates it `error` because its AGENTS.md mandates
- * the tokens. Silent when the app defines no colour tokens at all.
- * @param {string} appDir
- * @returns {Promise<DoctorResult>}
- */
-export async function checkDarkTheme(appDir) {
-  const name = 'dark-theme';
-  if (!existsSync(join(appDir, 'app'))) {
-    return { name, status: 'pass', message: 'no app/ directory to analyse' };
-  }
-  const sources = await tokenSources(appDir);
-  const defining = sources.filter((s) => TOKEN_DEF.test(stripComments(s.content)));
-  if (!defining.length) {
-    return { name, status: 'pass', message: 'no colour tokens defined (nothing to reach)' };
-  }
-  const all = sources.map((s) => stripComments(s.content)).join('\n');
-  const layout = sources.find((s) => ROOT_LAYOUT.test(s.rel));
-  if (DUAL_TOKENS.test(all) || SCHEME_QUERY.test(all) || (layout && THEME_SCRIPT.test(layout.content))) {
-    return { name, status: 'pass', message: 'the dark half of the colour tokens is reachable' };
-  }
-  const where = defining.map((s) => s.rel).join(' and ');
-  return {
-    name,
-    status: 'warn',
-    message:
-      `colour tokens are defined in ${where} with a light value only: nothing applies a dark half (no light-dark(), no prefers-color-scheme rule, no theme script in the root layout), so the OS dark setting is ignored and any .dark block is dead CSS`,
-    fix:
-      'Write each colour token ONCE as light-dark(LIGHT, DARK) under `color-scheme: light dark` in the root layout (the block in .agents/skills/webjs/references/styling.md), or give the tokens an `@media (prefers-color-scheme: dark)` half, or add a head <script> that applies the saved theme (data-theme / the .dark class). Then check the app in a real browser with the OS in dark mode.',
-  };
-}