@godxjp/ui 30.8.0 → 31.0.2

package/docs/showcase/theme-customization.tsx

@@ -136,6 +136,7 @@ import {
   type TimelineItem,
 } from "@godxjp/ui/data-display";
 import {
+  Form,
   CheckboxGroup,
   ColorPicker,
   DatePicker,
@@ -586,85 +587,91 @@ function ComponentsBoard(props: {
       pad={{ inline: "lg", block: "md" }}
     >
       {/* 1 · text entry */}
-      <Flex direction="col" gap="md">
-        <FormField
-          id="board-email"
-          label={t("themeShowcase.form.email")}
-          helper={t("themeShowcase.form.emailHint")}
-        >
-          <Input
+      <Form>
+        <Flex direction="col" gap="md">
+          <FormField
             id="board-email"
-            type="email"
-            autoComplete="email"
-            prefix={<Mail aria-hidden="true" />}
-            placeholder={t("themeShowcase.form.emailPlaceholder")}
-            defaultValue="release-desk@ops.example.jp"
-          />
-        </FormField>
-        <FormField id="board-handle" label={t("themeShowcase.form.handle")}>
-          <Input
-            id="board-handle"
-            addonBefore={<AtSign aria-hidden="true" />}
-            defaultValue="release-desk"
-            count={{ max: 24, show: true }}
-          />
-        </FormField>
-      </Flex>
+            label={t("themeShowcase.form.email")}
+            helper={t("themeShowcase.form.emailHint")}
+          >
+            <Input
+              id="board-email"
+              type="email"
+              autoComplete="email"
+              prefix={<Mail aria-hidden="true" />}
+              placeholder={t("themeShowcase.form.emailPlaceholder")}
+              defaultValue="release-desk@ops.example.jp"
+            />
+          </FormField>
+          <FormField id="board-handle" label={t("themeShowcase.form.handle")}>
+            <Input
+              id="board-handle"
+              addonBefore={<AtSign aria-hidden="true" />}
+              defaultValue="release-desk"
+              count={{ max: 24, show: true }}
+            />
+          </FormField>
+        </Flex>
+      </Form>
 
       {/* 2 · multi-select with removable tags + free tags */}
-      <Flex direction="col" gap="md">
-        <FormField
-          id="board-regions"
-          label={t("themeShowcase.form.regions")}
-          helper={regions.length > 0 ? regionList : t("themeShowcase.form.regionsEmpty")}
-        >
-          <Select
+      <Form>
+        <Flex direction="col" gap="md">
+          <FormField
             id="board-regions"
-            mode="multiple"
-            maxTagCount={2}
-            value={regions}
-            onValueChange={setRegions}
-            placeholder={t("themeShowcase.form.regionsPlaceholder")}
-            options={REGION_CODES.map((code) => ({
-              value: code,
-              label: new Intl.DisplayNames([props.locale], { type: "region" }).of(code) ?? code,
-            }))}
-          />
-        </FormField>
-        <FormField id="board-labels" label={t("themeShowcase.form.labels")}>
-          <TagInput
-            id="board-labels"
-            value={labels}
-            onValueChange={setLabels}
-            maxTagCount={2}
-            /* The ceiling the 71-character id is measured against (gh#840). 16 is the widest cut
+            label={t("themeShowcase.form.regions")}
+            helper={regions.length > 0 ? regionList : t("themeShowcase.form.regionsEmpty")}
+          >
+            <Select
+              id="board-regions"
+              mode="multiple"
+              maxTagCount={2}
+              value={regions}
+              onValueChange={setRegions}
+              placeholder={t("themeShowcase.form.regionsPlaceholder")}
+              options={REGION_CODES.map((code) => ({
+                value: code,
+                label: new Intl.DisplayNames([props.locale], { type: "region" }).of(code) ?? code,
+              }))}
+            />
+          </FormField>
+          <FormField id="board-labels" label={t("themeShowcase.form.labels")}>
+            <TagInput
+              id="board-labels"
+              value={labels}
+              onValueChange={setLabels}
+              maxTagCount={2}
+              /* The ceiling the 71-character id is measured against (gh#840). 16 is the widest cut
                that still leaves room for a second chip and the `+1` on one row at 375px; the value
                is untouched — it stays in the chip's `title` and in the remover's accessible name,
                which is the only reason truncating an identifier is allowed at all. */
-            maxTagTextLength={16}
-            placeholder={t("themeShowcase.form.labelsPlaceholder")}
-          />
-        </FormField>
-      </Flex>
+              maxTagTextLength={16}
+              placeholder={t("themeShowcase.form.labelsPlaceholder")}
+            />
+          </FormField>
+        </Flex>
+      </Form>
 
       {/* 3 · dropdown + date */}
-      <Flex direction="col" gap="md">
-        <FormField id="board-plan" label={t("themeShowcase.form.plan")}>
-          <Select
-            id="board-plan"
-            value={plan}
-            onValueChange={setPlan}
-            options={[
-              { value: "starter", label: t("themeShowcase.plan.starter") },
-              { value: "standard", label: t("themeShowcase.plan.standard") },
-              { value: "scale", label: t("themeShowcase.plan.scale") },
-            ]}
-          />
-        </FormField>
-        <FormField id="board-date" label={t("themeShowcase.form.releaseDate")}>
-          <DatePicker id="board-date" defaultValue={new Date("2026-09-12T00:00:00Z")} />
-        </FormField>
-      </Flex>
+      <Form>
+        <Flex direction="col" gap="md">
+          <FormField id="board-plan" label={t("themeShowcase.form.plan")}>
+            <Select
+              id="board-plan"
+              value={plan}
+              onValueChange={setPlan}
+              options={[
+                { value: "starter", label: t("themeShowcase.plan.starter") },
+                { value: "standard", label: t("themeShowcase.plan.standard") },
+                { value: "scale", label: t("themeShowcase.plan.scale") },
+              ]}
+            />
+          </FormField>
+          <FormField id="board-date" label={t("themeShowcase.form.releaseDate")}>
+            <DatePicker id="board-date" defaultValue={new Date("2026-09-12T00:00:00Z")} />
+          </FormField>
+        </Flex>
+      </Form>
 
       {/* 4 · checkboxes — a three-line label beside a one-word one, and a disabled row */}
       <Flex direction="col" gap="md">
@@ -929,35 +936,37 @@ function ComponentsBoard(props: {
           <CardDescription>{t("themeShowcase.signup.description")}</CardDescription>
         </CardHeader>
         <CardContent>
-          <Flex direction="col" gap="md">
-            <FormField id="signup-email" label={t("themeShowcase.signup.email")}>
-              <Input
-                id="signup-email"
-                type="email"
-                autoComplete="email"
-                placeholder="you@example.jp"
-              />
-            </FormField>
-            <FormField id="signup-secret" label={t("themeShowcase.signup.password")}>
-              <PasswordInput
-                id="signup-secret"
-                value={secret}
-                onChange={(event) => setSecret(event.target.value)}
-                autoComplete="new-password"
-              />
-            </FormField>
-            <PasswordStrength value={secret} />
-            <Button fullWidth>{t("themeShowcase.signup.submit")}</Button>
-            <AuthDivider label={t("themeShowcase.signup.or")} />
-            <Button variant="outline" fullWidth>
-              <ShieldCheck aria-hidden="true" />
-              {t("themeShowcase.signup.sso")}
-            </Button>
-            <Button variant="outline" fullWidth>
-              <Fingerprint aria-hidden="true" />
-              {t("themeShowcase.signup.passkey")}
-            </Button>
-          </Flex>
+          <Form>
+            <Flex direction="col" gap="md">
+              <FormField id="signup-email" label={t("themeShowcase.signup.email")}>
+                <Input
+                  id="signup-email"
+                  type="email"
+                  autoComplete="email"
+                  placeholder="you@example.jp"
+                />
+              </FormField>
+              <FormField id="signup-secret" label={t("themeShowcase.signup.password")}>
+                <PasswordInput
+                  id="signup-secret"
+                  value={secret}
+                  onChange={(event) => setSecret(event.target.value)}
+                  autoComplete="new-password"
+                />
+              </FormField>
+              <PasswordStrength value={secret} />
+              <Button fullWidth>{t("themeShowcase.signup.submit")}</Button>
+              <AuthDivider label={t("themeShowcase.signup.or")} />
+              <Button variant="outline" fullWidth>
+                <ShieldCheck aria-hidden="true" />
+                {t("themeShowcase.signup.sso")}
+              </Button>
+              <Button variant="outline" fullWidth>
+                <Fingerprint aria-hidden="true" />
+                {t("themeShowcase.signup.passkey")}
+              </Button>
+            </Flex>
+          </Form>
         </CardContent>
       </Card>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "30.8.0",
-  "godxUiMcp": "30.8.0",
+  "version": "31.0.2",
+  "godxUiMcp": "31.0.2",
   "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",
@@ -140,6 +141,10 @@
       "types": "./dist/inertia/index.d.ts",
       "import": "./dist/inertia/index.js"
     },
+    "./react-router": {
+      "types": "./dist/components/react-router/index.d.ts",
+      "import": "./dist/components/react-router/index.js"
+    },
     "./app": {
       "types": "./dist/app/index.d.ts",
       "import": "./dist/app/index.js"
@@ -313,6 +318,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 +394,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 +422,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/consumer-rule.md

@@ -120,6 +120,20 @@ ngày: năm thứ cần đều ĐÃ CÓ và vẫn bị dựng lại bằng thứ
 Lỗi không phải "đoán sai tên prop" mà là **cho rằng nó không tồn tại nên không
 hỏi**.
 
+## Form: `Form` bọc `FormField`, bề rộng theo nội dung, form dài là PAGE
+
+godx-mailer dính bốn lỗi form trong một ngày, cả bốn đều là kit ĐÃ CÓ đồ đúng
+(gh#998). Giờ ui-audit chặn:
+
+| Sai                                                         | Đúng                                                                                         | rule                   |
+| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ---------------------- |
+| ≥2 `FormField` không có `Form`, hoặc xếp hàng bằng `<Flex>` | `<Form layout="horizontal" labelWidth controlWidth>`; hàng = `SpaceCompact` / `Form columns` | `formfield-needs-form` |
+| ≥3 `FormField` trong `DialogBody`                           | page riêng (route riêng)                                                                     | `dialog-form-too-big`  |
+| `Select` hai lựa chọn kéo full width                        | `controlWidth` trên field hoặc một lần trên `Form`                                           | `select-width-hint`    |
+
+Ca kit không diễn đạt được thì **mở issue ở godx-jp/godxjp-ui**, tạm dùng cách
+hợp lệ gần nhất kèm `// TODO(godxjp-ui#<n>)` — không tự chế.
+
 ## Dialog và AlertDialog là MỘT họ — `variant` là lối chuẩn
 
 Đừng với tay sang 12 export `AlertDialog*` nữa. Chúng **vẫn chạy y như cũ** (gỡ

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)"),
+);