@godxjp/ui 30.8.0 → 30.9.0

package/dist/styles/vendor-day-picker.css

@@ -0,0 +1,2 @@
+
+@import "react-day-picker/style.css" layer(vendor);

package/dist/styles/vendor-sonner.css

@@ -0,0 +1,2 @@
+
+@import "sonner/dist/styles.css" layer(vendor);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "30.8.0",
-  "godxUiMcp": "30.8.0",
+  "version": "30.9.0",
+  "godxUiMcp": "30.9.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -26,6 +26,7 @@
     "agent",
     "dist",
     "scripts/ui-audit.mjs",
+    "scripts/prune-css.mjs",
     "README.md",
     "scripts/visual-audit.mjs",
     "scripts/visual-audit-rules.mjs",
@@ -313,6 +314,7 @@
     "build:jis-level1-fonts": "node scripts/build-jis-level1-fonts.mjs",
     "capture:voiceover": "node scripts/capture-voiceover-evidence.mjs",
     "check:agent-catalog": "node scripts/gen-agent-catalog.mjs --check",
+    "check:style-layers": "node scripts/gen-style-layers.mjs --check",
     "check:app-shell-narrow-grid": "node scripts/check-app-shell-narrow-grid.mjs",
     "check:app-shell-page-width": "node scripts/check-app-shell-page-width.mjs",
     "check:audit-sync": "node scripts/check-audit-sync.mjs",
@@ -388,6 +390,7 @@
     "gen:email-tokens": "node scripts/gen-email-tokens.mjs",
     "gen:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs",
     "gen:registry": "node scripts/gen-registry.mjs",
+    "gen:style-layers": "node scripts/gen-style-layers.mjs",
     "init-agent": "node scripts/init-agent-kit.mjs",
     "lint": "eslint . --cache --cache-strategy content",
     "lint:fix": "eslint . --fix",
@@ -415,7 +418,7 @@
     "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-width-wins && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
     "verify:browser": "pnpm check:contrast && pnpm check:text-ink-clip && pnpm check:frame-overflow && pnpm check:font-fallback-metrics && pnpm check:visual-audit",
     "verify:ci": "pnpm verify:ci:static && pnpm check:frame-contracts && pnpm test",
-    "verify:ci:static:gates": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-width-wins && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:no-antd-runtime && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:measurement-contract && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-catalog-completeness && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm run audit && pnpm check:frame-coverage-report && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions && pnpm check:catalog-snippets && pnpm check:absorbed-names && pnpm check:agent-catalog",
+    "verify:ci:static:gates": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-width-wins && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:no-antd-runtime && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:measurement-contract && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-catalog-completeness && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm run audit && pnpm check:frame-coverage-report && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions && pnpm check:catalog-snippets && pnpm check:absorbed-names && pnpm check:agent-catalog && pnpm check:style-layers",
     "verify:ci:static": "node scripts/run-gate-list.mjs verify:ci:static:gates",
     "verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage",

package/scripts/cli.mjs

@@ -5,6 +5,7 @@
  *   sync-rules     refresh package-owned agent rules (same path as postinstall)
  *   audit          static UI audit (regex over source)
  *   visual-audit   runtime audit (Playwright + axe-core) against a running app
+ *   prune-css      emit a stylesheet with only the CSS layers the app uses (gh#971)
  */
 import { spawnSync } from "node:child_process";
 import { dirname, join } from "node:path";
@@ -16,6 +17,7 @@ const MAP = {
   "sync-rules": "postinstall.mjs",
   audit: "ui-audit.mjs",
   "visual-audit": "visual-audit.mjs",
+  "prune-css": "prune-css.mjs",
 };
 
 // `<command> --help` is answered HERE: the scripts take free positional arguments, so a `--help`
@@ -52,6 +54,18 @@ const HELP = {
     --quiet         print errors only (warnings hidden)
     --rules         print the rule catalog as JSON and exit
   Pre-commit:  npx godxjp-ui audit resources/js || exit 1`,
+  "prune-css": `godxjp-ui prune-css <src dir/glob …> [--out <file>] [--fonts]
+
+  Emit a stylesheet with only the component CSS layers your app uses (gh#971). Scans the given
+  sources for @godxjp/ui imports, resolves the layer dependency closure from the graph the
+  package ships (dist/styles/layers.json), and writes a css file that imports the foundation
+  plus only the needed *-layout.css layers, in the exact order styles/index.css loads them.
+    <src dir/glob …>  your app's source (directories are walked)
+    --out <file>      output path (default: godx-ui.css)
+    --fonts           include the bundled @font-face declarations (default mirrors styles/core)
+  Import the emitted file INSTEAD of "@godxjp/ui/styles". Re-run when your component usage
+  changes and after every upgrade; it refuses on a package/manifest version mismatch.
+  Hand cherry-picking *-layout.css stays forbidden — this tool is the only thing allowed to slice.`,
   "visual-audit": `godxjp-ui visual-audit [--format json] [--strict] <baseUrl> [route …]
 
   Runtime audit (Playwright + axe-core) against an app you are ALREADY running locally.
@@ -70,6 +84,7 @@ commands:
   sync-rules     refresh package-owned agent rules (postinstall, by hand)
   audit          static UI audit over source
   visual-audit   runtime audit (Playwright + axe-core) against a running app
+  prune-css      emit a stylesheet with only the CSS layers your app uses
 
 godxjp-ui <command> --help   details and flags for one command`;
 

package/scripts/prune-css.mjs

@@ -0,0 +1,221 @@
+#!/usr/bin/env node
+/**
+ * prune-css — emit a consumer stylesheet with only the component CSS layers the app uses
+ * (gh#971). Runs in the CONSUMER repo:
+ *
+ *     node node_modules/@godxjp/ui/scripts/prune-css.mjs resources/js [more dirs/globs …]
+ *     npx @godxjp/ui prune-css resources/js --out resources/css/godx-ui.css
+ *
+ * It scans the given sources for imports from `@godxjp/ui` (any subpath), maps the imported
+ * components to CSS layer files through the dependency graph the package ships in
+ * dist/styles/layers.json, takes the closure, and writes a css file that @imports the
+ * foundation ALWAYS (base — Tailwind entry, tokens, theme, density, focus ring) plus only the
+ * needed `*-layout.css` layers, in exactly the order styles/index.css loads them — layer order
+ * is load-bearing there (icon-layout.css is last on purpose, and the vendor sheets sit in
+ * `layer(vendor)` before base).
+ *
+ * This is the sanctioned alternative to the forbidden act: README still says "do not
+ * cherry-pick *-layout.css files", and that rule is WHY this tool exists — the layer
+ * dependency graph is owned and shipped by the package, so the slice is computed, never
+ * hand-guessed. A missing layer fails silently (naked menus, unsized rows); a computed one
+ * cannot go missing without the manifest's own CI guard going red first.
+ *
+ * Fonts mirror `@godxjp/ui/styles/core`: NO bundled `@font-face` by default (that is where
+ * 77% of the all-in entry's weight lives — gh#971). Pass `--fonts` for the bundled faces,
+ * the same thing `@godxjp/ui/styles` adds over `core`.
+ *
+ * Re-run it whenever the set of components the app uses changes, and after every
+ * @godxjp/ui upgrade. The emitted file refuses to be hand-edited by carrying its own
+ * provenance header, and this script refuses to run against a manifest whose version does
+ * not match the installed package — a half-upgraded node_modules must fail loudly, not
+ * emit a slice computed from another release's graph.
+ */
+import { existsSync, globSync, readFileSync, readdirSync, statSync, writeFileSync } from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const PKG_ROOT = join(dirname(fileURLToPath(import.meta.url)), "..");
+const args = process.argv.slice(2);
+
+if (args.includes("--help") || args.includes("-h") || args.length === 0) {
+  console.log(`prune-css — emit a stylesheet with only the @godxjp/ui CSS layers your app uses
+
+usage: node node_modules/@godxjp/ui/scripts/prune-css.mjs <src dir/glob …> [--out <file>] [--fonts]
+
+  <src dir/glob …>  where your app's source lives (directories are walked; globs expand)
+  --out <file>      where to write the css (default: godx-ui.css in the current directory)
+  --fonts           include the bundled M PLUS 2 / Noto Sans JP @font-face declarations
+                    (default mirrors @godxjp/ui/styles/core: none — bring your own fonts)
+
+Then import the emitted file INSTEAD of "@godxjp/ui/styles" and re-run this command whenever
+the set of components you use changes, and after every @godxjp/ui upgrade.`);
+  process.exit(0);
+}
+
+const outFlag = args.indexOf("--out");
+const OUT = outFlag !== -1 ? args[outFlag + 1] : "godx-ui.css";
+if (outFlag !== -1 && (!OUT || OUT.startsWith("--"))) {
+  console.error("prune-css: --out needs a file path");
+  process.exit(2);
+}
+const FONTS = args.includes("--fonts");
+const positionals = args.filter(
+  (a, i) => !a.startsWith("--") && (outFlag === -1 || i !== outFlag + 1),
+);
+
+// ── the package's own graph, version-locked ──────────────────────────────────
+
+const pkg = JSON.parse(readFileSync(join(PKG_ROOT, "package.json"), "utf8"));
+const manifestPath = join(PKG_ROOT, "dist/styles/layers.json");
+if (!existsSync(manifestPath)) {
+  console.error(
+    `prune-css: ${manifestPath} not found — the installed @godxjp/ui build does not ship the ` +
+      "layer manifest (upgrade the package; inside the repo itself, run `pnpm build` first).",
+  );
+  process.exit(2);
+}
+const manifest = JSON.parse(readFileSync(manifestPath, "utf8"));
+if (manifest.version !== pkg.version) {
+  console.error(
+    `prune-css: refusing to emit — the layer manifest says ${manifest.version ?? "null"} but the ` +
+      `installed @godxjp/ui is ${pkg.version}. A slice computed from another release's dependency ` +
+      "graph can silently miss a layer, which is the exact failure this tool exists to prevent. " +
+      "Reinstall @godxjp/ui (or rebuild dist/ if this is a linked checkout) and re-run.",
+  );
+  process.exit(2);
+}
+
+// ── scan consumer sources ────────────────────────────────────────────────────
+
+const SCANNABLE = /\.(tsx|jsx|ts|mjs|js|cjs|mts)$/;
+
+function walk(dir, into) {
+  for (const name of readdirSync(dir)) {
+    if (name === "node_modules" || name.startsWith(".")) continue;
+    const p = join(dir, name);
+    if (statSync(p).isDirectory()) walk(p, into);
+    else if (SCANNABLE.test(name)) into.push(p);
+  }
+}
+
+const sources = [];
+for (const arg of positionals) {
+  const asPath = resolve(process.cwd(), arg);
+  if (existsSync(asPath) && statSync(asPath).isDirectory()) walk(asPath, sources);
+  else if (existsSync(asPath) && SCANNABLE.test(asPath)) sources.push(asPath);
+  else {
+    for (const hit of globSync(arg, { cwd: process.cwd() })) {
+      const p = resolve(process.cwd(), hit);
+      if (statSync(p).isDirectory()) walk(p, sources);
+      else if (SCANNABLE.test(p)) sources.push(p);
+    }
+  }
+}
+if (sources.length === 0) {
+  console.error(
+    `prune-css: nothing to scan — no source files matched ${positionals.join(" ")}. ` +
+      "An empty scan must never emit an empty stylesheet, so this is an error, not a result.",
+  );
+  process.exit(2);
+}
+
+const componentNames = Object.keys(manifest.components);
+// Longest name first, so `CardBar…` resolves before `Card` when matching sub-part imports.
+const byLength = [...componentNames].sort((a, b) => b.length - a.length);
+
+const used = new Set();
+let sawNamespace = false;
+const IMPORT =
+  /(?:import|export)\s+(type\s+)?([^;'"]*?)\s*from\s*["'](@godxjp\/ui(?:\/[^"']*)?)["']/g;
+for (const file of new Set(sources)) {
+  const src = readFileSync(file, "utf8");
+  for (const m of src.matchAll(IMPORT)) {
+    const [, typeOnly, clause, spec] = m;
+    if (typeOnly) continue; // a type renders nothing
+    if (spec.startsWith("@godxjp/ui/styles")) continue; // css imports carry no components
+    if (/\*\s*as\s/.test(clause)) {
+      // `import * as UI` — anything may be rendered through it. Correct beats minimal:
+      // include everything rather than guess at property accesses.
+      sawNamespace = true;
+      continue;
+    }
+    const braces = /\{([^}]*)\}/.exec(clause);
+    if (!braces) continue; // a bare side-effect or default import names no component
+    for (let entry of braces[1].split(",")) {
+      entry = entry.trim();
+      if (!entry || entry.startsWith("type ")) continue;
+      const name = entry.split(/\s+as\s+/)[0].trim();
+      if (!/^[A-Z]/.test(name)) continue; // hooks and utils style nothing
+      // Sub-parts (SheetContent, DropdownMenuTrigger, CardHeader…) are not manifest rows;
+      // their root component is, and the root's layers cover the whole compound family.
+      const root = byLength.find((c) => name === c || name.startsWith(c));
+      if (root) used.add(root);
+    }
+  }
+  // A dynamic `import("@godxjp/ui…")` names no bindings this regex can see.
+  if (/import\s*\(\s*["']@godxjp\/ui(?!\/styles)/.test(src)) sawNamespace = true;
+}
+
+if (sawNamespace) {
+  console.error(
+    "prune-css: found a namespace or dynamic import of @godxjp/ui — cannot tell which " +
+      "components it renders, so ALL component layers are included (still no bundled fonts " +
+      "unless --fonts). Use named imports to get a real slice.",
+  );
+  for (const c of componentNames) used.add(c);
+}
+if (used.size === 0) {
+  console.error(
+    `prune-css: scanned ${sources.length} files and found no @godxjp/ui component imports — ` +
+      "check the paths you passed. Refusing to emit a component-less stylesheet.",
+  );
+  process.exit(2);
+}
+
+// ── closure → ordered emit ───────────────────────────────────────────────────
+
+const layers = new Set();
+const vendors = new Set();
+for (const name of used) {
+  const entry = manifest.components[name];
+  for (const l of entry.layers) layers.add(l);
+  for (const v of entry.vendor ?? []) vendors.add(v);
+}
+
+const keptLayers = manifest.order.filter((f) => layers.has(f));
+const keptVendors = manifest.vendor.filter((f) => vendors.has(f));
+const asImport = (f) => `@import "@godxjp/ui/styles/${f.replace(/\.css$/, "")}";`;
+
+const lines = [
+  "/*",
+  ` * GENERATED by @godxjp/ui prune-css — DO NOT EDIT.`,
+  ` *`,
+  ` * @godxjp/ui version: ${pkg.version}`,
+  ` * components detected: ${[...used].sort().join(", ")}`,
+  ` * layers: ${keptLayers.length} of ${manifest.order.length} (+base${FONTS ? "+fonts" : ", no bundled fonts — like styles/core"})`,
+  ` *`,
+  ` * Re-run when the components your app uses change, and after every @godxjp/ui upgrade:`,
+  ` *   node node_modules/@godxjp/ui/scripts/prune-css.mjs <src …> --out <this file>${FONTS ? " --fonts" : ""}`,
+  ` *`,
+  ` * Hand-editing this file is the cherry-picking the README forbids: layers share rules and`,
+  ` * a missing one fails silently. Change your imports, then re-run the tool.`,
+  " */",
+  // Layer order must be declared before the first @import — same statement, same reasoning,
+  // as styles/index.css (vendor between base and components; see the comment there).
+  "@layer theme, base, vendor, components, utilities;",
+  ...keptVendors.map(asImport),
+  asImport(manifest.base),
+  ...(FONTS ? [asImport(manifest.fonts)] : []),
+  ...keptLayers.map(asImport),
+  "",
+];
+
+writeFileSync(resolve(process.cwd(), OUT), lines.join("\n"));
+
+const dropped = manifest.order.filter((f) => !layers.has(f));
+console.error(
+  `prune-css: ${relative(process.cwd(), resolve(process.cwd(), OUT)) || OUT} — ` +
+    `${used.size} components across ${sources.length} files → ${keptLayers.length}/${manifest.order.length} layers` +
+    (keptVendors.length ? `, vendor: ${keptVendors.join(", ")}` : "") +
+    (dropped.length ? `\n  dropped: ${dropped.join(", ")}` : "\n  (every layer is in use)"),
+);