@godxjp/ui 30.7.1 → 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/docs/TOKEN-RESOLUTION.md

@@ -109,6 +109,14 @@ selector, its value, and whether it is a freeze; then every read and whether tha
 call-site fallback. If two components move together, run it on the token they share and the shared
 declaration is on the screen.
 
+**Before you rely on a token, read its `published:` line.** `yes` is the contract; `NO` is an
+internal variable that can change or vanish in any release — `--text-xs` looks like the obvious
+name for the small size, but it is Tailwind's inlined `0.75rem` (12px), while the published
+`--font-size-xs` resolves to 12.4699px. A consumer who patched with the first shipped a 0.47px shift
+no gate caught (gh#988). For an `initial` knob the tool also prints `read it as: var(--x, …)` — the
+fallback the package itself uses at its read sites. Copy that line; a bare `var(--x)` on an
+`initial` knob is unset.
+
 **It does not compute a winner, and says so.** The first version ranked selectors into four
 "cascade" buckets by regex and printed them strongest-last. Codex found that `@theme inline` and
 `[dir="rtl"] .ui-actions[data-fade-in-inline]` both scored top precedence on the substring

package/docs/data-entry/form.tsx

@@ -356,39 +356,43 @@ export default function Demo() {
           <CardContent>
             <Form layout="horizontal" labelWidth="9rem">
               <FormField id="cmp-tel" label="電話番号" helper="市外局番から">
-                <Flex direction="row" gap="sm" align="center">
-                  <Flex width="5rem" shrink={false}>
-                    <Input
-                      id="cmp-tel-area"
-                      aria-label="市外局番"
-                      inputMode="numeric"
-                      maxLength={4}
-                      defaultValue="03"
-                    />
-                  </Flex>
-                  <Text aria-hidden tone="muted">
-                    -
-                  </Text>
-                  <Flex width="5rem" shrink={false}>
-                    <Input
-                      id="cmp-tel-city"
-                      aria-label="市内局番"
-                      inputMode="numeric"
-                      maxLength={4}
-                      defaultValue="6273"
-                    />
-                  </Flex>
-                  <Text aria-hidden tone="muted">
-                    -
-                  </Text>
-                  <Flex width="5rem" shrink={false}>
-                    <Input
-                      id="cmp-tel-line"
-                      aria-label="加入者番号"
-                      inputMode="numeric"
-                      maxLength={4}
-                      defaultValue="0001"
-                    />
+                {/* The three parts never split across lines — "03 -" alone on a row reads as a
+                    whole number. The extension is a separate value, so it is what wraps on a phone. */}
+                <Flex direction="row" gap="sm" align="center" wrap>
+                  <Flex direction="row" gap="sm" align="center" shrink={false}>
+                    <Flex width="4rem" shrink={false}>
+                      <Input
+                        id="cmp-tel-area"
+                        aria-label="市外局番"
+                        inputMode="numeric"
+                        maxLength={4}
+                        defaultValue="03"
+                      />
+                    </Flex>
+                    <Text aria-hidden tone="muted">
+                      -
+                    </Text>
+                    <Flex width="4rem" shrink={false}>
+                      <Input
+                        id="cmp-tel-city"
+                        aria-label="市内局番"
+                        inputMode="numeric"
+                        maxLength={4}
+                        defaultValue="6273"
+                      />
+                    </Flex>
+                    <Text aria-hidden tone="muted">
+                      -
+                    </Text>
+                    <Flex width="4rem" shrink={false}>
+                      <Input
+                        id="cmp-tel-line"
+                        aria-label="加入者番号"
+                        inputMode="numeric"
+                        maxLength={4}
+                        defaultValue="0001"
+                      />
+                    </Flex>
                   </Flex>
                   <Flex width="6rem" shrink={false}>
                     <NumberInput
@@ -499,19 +503,19 @@ export default function Demo() {
               </FormField>
               <FormField id="cmp-ok-tel" label="電話番号" validateStatus="success" hasFeedback>
                 <Flex direction="row" gap="sm" align="center">
-                  <Flex width="5rem" shrink={false}>
+                  <Flex width="4rem" shrink={false}>
                     <Input id="cmp-ok-tel-area" aria-label="市外局番" defaultValue="03" />
                   </Flex>
                   <Text aria-hidden tone="muted">
                     -
                   </Text>
-                  <Flex width="5rem" shrink={false}>
+                  <Flex width="4rem" shrink={false}>
                     <Input id="cmp-ok-tel-city" aria-label="市内局番" defaultValue="6273" />
                   </Flex>
                   <Text aria-hidden tone="muted">
                     -
                   </Text>
-                  <Flex width="5rem" shrink={false}>
+                  <Flex width="4rem" shrink={false}>
                     <Input id="cmp-ok-tel-line" aria-label="加入者番号" defaultValue="0001" />
                   </Flex>
                 </Flex>
@@ -1111,7 +1115,7 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="lg">
-              <Form layout="horizontal" labelWidth="14rem" labelAlign="end" collapseBelow={false}>
+              <Form layout="horizontal" labelWidth="14rem" labelAlign="end">
                 <FormField id="len-e-name" label="氏名" required>
                   <Input id="len-e-name" defaultValue="山田 太郎" />
                 </FormField>
@@ -1127,7 +1131,7 @@ export default function Demo() {
                   <Input id="len-e-note" defaultValue="ゴドー商事" />
                 </FormField>
               </Form>
-              <Form layout="horizontal" labelWidth="14rem" labelAlign="start" collapseBelow={false}>
+              <Form layout="horizontal" labelWidth="14rem" labelAlign="start">
                 <FormField id="len-s-name" label="氏名" required>
                   <Input id="len-s-name" defaultValue="山田 太郎" />
                 </FormField>

package/docs/layout/nav-list.tsx

@@ -395,8 +395,8 @@ export default function Demo() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <Flex direction={{ base: "col", md: "row" }} gap="xl" align="start">
-            <Flex direction="col" gap="sm" grow>
+          <Flex direction={{ base: "col", md: "row" }} gap="xl">
+            <Flex direction="col" gap="sm" fill>
               <Text size="sm" weight="medium">
                 レール幅（compact · 18.75rem）
               </Text>

package/docs/navigation/anchor.tsx

@@ -182,8 +182,10 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex gap="lg" align="start">
-              <ScrollArea className="h-96 w-64 shrink-0" label="Contents">
+            {/* Side by side from md; on a phone the rail stacks above the text it indexes. A 256px
+                rail beside a 244px card left the chapters a column one glyph wide (gh#965). */}
+            <Flex direction={{ base: "col", md: "row" }} gap="lg" align="start">
+              <ScrollArea className="h-48 w-full shrink-0 md:h-96 md:w-64" label="Contents">
                 <Anchor
                   affix={false}
                   showInkInFixed
@@ -192,7 +194,11 @@ export default function Demo() {
                   getContainer={() => chaptersRef.current ?? window}
                 />
               </ScrollArea>
-              <ScrollArea viewportRef={chaptersRef} className="h-96 flex-1" label="Agreement">
+              <ScrollArea
+                viewportRef={chaptersRef}
+                className="h-96 w-full md:w-auto md:flex-1"
+                label="Agreement"
+              >
                 <Flex direction="col" gap="md">
                   {CHAPTERS.map((chapter) => (
                     <Chapter
@@ -251,24 +257,28 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <Flex gap="lg" align="start">
-              <Anchor
-                offsetBlockStart={16}
-                targetOffsetBlockStart={24}
-                label="On this page"
-                items={[
-                  { key: "page-a", href: "#page-alpha", title: "Alpha · 第一章" },
-                  {
-                    key: "page-b",
-                    href: "#page-beta",
-                    title: "Beta · 第二章",
-                    children: [
-                      { key: "page-b1", href: "#page-beta-one", title: "Beta, part one" },
-                      { key: "page-b2", href: "#page-beta-two", title: "Beta, part two" },
-                    ],
-                  },
-                  { key: "page-c", href: "#page-gamma", title: "Gamma · 第三章" },
-                ]}
-              />
+              {/* A pinned side rail has no room on a phone: at 320px it was squeezed to 58px and
+                  broke "Gamma" mid-word. Documentation sites drop the in-page rail below md. */}
+              <Flex hideBelow="md">
+                <Anchor
+                  offsetBlockStart={16}
+                  targetOffsetBlockStart={24}
+                  label="On this page"
+                  items={[
+                    { key: "page-a", href: "#page-alpha", title: "Alpha · 第一章" },
+                    {
+                      key: "page-b",
+                      href: "#page-beta",
+                      title: "Beta · 第二章",
+                      children: [
+                        { key: "page-b1", href: "#page-beta-one", title: "Beta, part one" },
+                        { key: "page-b2", href: "#page-beta-two", title: "Beta, part two" },
+                      ],
+                    },
+                    { key: "page-c", href: "#page-gamma", title: "Gamma · 第三章" },
+                  ]}
+                />
+              </Flex>
               <Flex direction="col" gap="md" className="flex-1">
                 <Chapter id="page-alpha" title="Alpha · 第一章" lines={6} />
                 <Chapter id="page-beta" title="Beta · 第二章" lines={2} />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "30.7.1",
-  "godxUiMcp": "30.7.1",
+  "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/explain-token.mjs

@@ -39,9 +39,15 @@
  *   node scripts/explain-token.mjs --json <name>           machine-readable, for a gate
  */
 import { readFileSync, readdirSync, statSync } from "node:fs";
-import { join, relative } from "node:path";
+import { dirname, join, relative } from "node:path";
+import { fileURLToPath } from "node:url";
 
-const ROOT = process.cwd();
+/* The PACKAGE root, from this file's own location — never `process.cwd()` (gh#980). The documented
+ * call is `node node_modules/@godxjp/ui/scripts/explain-token.mjs` from the consumer's directory, and
+ * with cwd as the root every read below looked in the consumer's tree: no catalog, no CSS, and a
+ * confident "no token matches" for every token that exists. In this checkout the two roots coincide,
+ * which is why the defect was invisible here. */
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), "..");
 
 /** Source of truth for what a CONSUMER can set: the published catalog, not the stylesheets. */
 function publishedTokens() {
@@ -139,11 +145,37 @@ function parse(file) {
         .slice(m.index, m.index + 400)
         .replace(/\s+/g, " ")
         .includes(`${m[1]},`),
+      fallback: fallbackAt(blank, m.index),
     });
   }
   return { decls, reads };
 }
 
+/**
+ * The fallback text of the `var(` that opens at `at`, or null. Balanced on parentheses, because the
+ * fallbacks this package writes are formulas — `calc(var(--font-size-base) / var(--font-size-ratio))`
+ * — and stopping at the first `)` would print half of one.
+ */
+function fallbackAt(blank, at) {
+  let depth = 0;
+  let comma = -1;
+  for (let i = at; i < blank.length; i += 1) {
+    const ch = blank[i];
+    if (ch === "(") depth += 1;
+    else if (ch === ")") {
+      depth -= 1;
+      if (depth === 0)
+        return comma < 0
+          ? null
+          : blank
+              .slice(comma + 1, i)
+              .trim()
+              .replace(/\s+/g, " ");
+    } else if (ch === "," && depth === 1 && comma < 0) comma = i;
+  }
+  return null;
+}
+
 /** The selector chain enclosing a byte offset, outermost first. */
 function contextAt(blank, at) {
   const chain = [];
@@ -282,6 +314,27 @@ function trace(name, { decls, reads }, published, scopedNames) {
     );
   }
   if (myReads.length > 12) console.log(`    … and ${myReads.length - 12} more`);
+
+  /* THE PATCH SHAPE, printed rather than left to be inferred (gh#988). An `initial` knob read bare
+   * is unset, so a consumer migrating a rule has to copy the package's own fallback — and without
+   * this line they went looking for a shorter token instead, picked `--text-xs` (unpublished,
+   * Tailwind-inlined to 12px) over `--font-size-xs` (12.4699px), and shipped a 0.47px shift no
+   * gate caught. The most common fallback wins; the count says how settled it is. */
+  if (mine.some((d) => d.value === "initial")) {
+    const counts = new Map();
+    for (const r of myReads)
+      if (r.fallback) counts.set(r.fallback, (counts.get(r.fallback) ?? 0) + 1);
+    const [best, n] = [...counts].sort((a, b) => b[1] - a[1])[0] ?? [];
+    if (best) {
+      console.log(`  read it as: var(${name}, ${best})`);
+      console.log(
+        `             ${n} of ${myReads.length} read(s) use this fallback — the knob is \`initial\`, so a bare read is unset.`,
+      );
+    }
+  }
+  if (!tier && myReads.length === 0) {
+    console.log("  → not part of the contract: read a published token instead.");
+  }
   return { name, tier, decls: mine, reads: myReads };
 }
 

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