@godxjp/ui 31.31.8 → 32.0.0

package/dist/themes/godx.css

@@ -0,0 +1,43 @@
+
+@import "../styles/fonts.css";
+
+:root {
+
+  --primary: 268.7 100% 50%;
+  --primary-foreground: 60 33% 99%;
+
+  --brand: 268.7 100% 50%;
+  --brand-foreground: 60 33% 99%;
+}
+
+.dark,
+:root[data-theme="dark"] {
+
+  --primary: 268.7 100% 86.9%;
+  --primary-foreground: 48 9% 9%;
+  --brand: 268.7 100% 86.9%;
+  --brand-foreground: 48 9% 9%;
+}
+
+@supports not (color: hsl(from red h s l)) {
+  :root {
+    --primary-hover: 268.7 100% 41.6%;
+    --primary-active: 268.7 100% 34.5%;
+    --primary-border: 268.7 68% 66%;
+    --control-outline: 268.7 100% 44.7%;
+    --text-link: 268.7 100% 41.6%;
+    --text-brand: 268.7 100% 41.6%;
+    --text-primary: 268.7 100% 34.5%;
+  }
+
+  .dark,
+  :root[data-theme="dark"] {
+    --primary-hover: 268.7 100% 92.7%;
+    --primary-active: 268.7 100% 81.1%;
+    --primary-border: 268.7 46.7% 23.5%;
+    --control-outline: 268.7 99% 61.8%;
+    --text-link: 268.7 100% 86.9%;
+    --text-brand: 268.7 100% 86.9%;
+    --text-primary: 268.7 100% 92.7%;
+  }
+}

package/dist/themes/godx.d.ts

@@ -0,0 +1,13 @@
+import type { AppPreset } from "../app/preset.js";
+/**
+ * The GoDX PRESET (v32, gh#1220): the product defaults GoDX surfaces shipped with in 31.x, now
+ * opt-in so the package's own defaults stay neutral. Pair it with the stylesheet that restores the
+ * violet identity:
+ *
+ *     import "@godxjp/ui/themes/godx.css";
+ *     import { godxPreset } from "@godxjp/ui/themes/godx";
+ *     <AppProvider preset={godxPreset}>…</AppProvider>
+ *
+ * Core never imports this module, which is what keeps the GoDX artwork out of a neutral bundle.
+ */
+export declare const godxPreset: AppPreset;

package/dist/themes/godx.js

@@ -0,0 +1,12 @@
+import { createElement } from "react";
+import { Logo } from "../components/general/logo.js";
+const godxPreset = Object.freeze({
+  name: "godx",
+  defaultLocale: "vi",
+  timeZone: "Asia/Ho_Chi_Minh",
+  brandMark: createElement(Logo, { mark: "godx", tone: "success" }),
+  emailBrandLabel: "GoDX"
+});
+export {
+  godxPreset
+};

package/dist/tokens/components/feedback.css

@@ -119,14 +119,8 @@
   --skeleton-stat-caption-width: 5rem;
 
   --skeleton-element-radius: initial;
-  --skeleton-button-width-ratio: 2;
   --skeleton-input-width-ratio: 5;
 
-  --skeleton-node-size: calc(var(--control-height) * 3);
-  --skeleton-image-glyph-size: var(--icon-size-4xl);
-
-  --skeleton-image-glyph-color: initial;
-
   --skeleton-article-avatar-gap: var(--space-inline-lg);
   --skeleton-article-avatar-title-offset: var(--space-3);
   --skeleton-article-title-gap: var(--space-stack-lg);

package/dist/tokens/derived.css

@@ -7,10 +7,11 @@
   --primary-border: initial;
   --control-outline: initial;
 
-  --primary-hover-darken-channels: h s calc(l - 8.4);
-  --primary-active-darken-channels: h s calc(l - 15.5);
-  --primary-hover-lighten-channels: h s calc(l + 5.8);
-  --primary-active-lighten-channels: h s calc(l + 11.6 - 17.4 * clamp(0, (l - 83.4) * 1000, 1));
+  --primary-hover-darken-channels: h s calc(l - 8.4 + 18 * clamp(0, (12 - l) * 1000, 1));
+  --primary-active-darken-channels: h s calc(l - 15.5 + 20.3 * clamp(0, (12 - l) * 1000, 1));
+  --primary-hover-lighten-channels: h s calc(l + 5.8 - 11.6 * clamp(0, (l - 94) * 1000, 1));
+  --primary-active-lighten-channels: h s
+    calc(l + 11.6 - 17.4 * clamp(0, (l - 83.4) * 1000, 1) - 5.8 * clamp(0, (l - 94) * 1000, 1));
 
   --primary-hover-channels: var(--primary-hover-darken-channels);
   --primary-active-channels: var(--primary-active-darken-channels);
@@ -24,10 +25,10 @@
   --text-brand: initial;
   --text-primary: initial;
 
-  --text-link-channels: var(--primary-hover-channels);
-  --text-brand-channels: var(--primary-hover-channels);
+  --text-link-channels: h s calc(l - 8.4);
+  --text-brand-channels: h s calc(l - 8.4);
 
-  --text-primary-channels: var(--primary-active-channels);
+  --text-primary-channels: h s calc(l - 15.5);
 
   --destructive-hover: 359 50.6% 53.1%;
   --destructive-active: 355 70.6% 33.3%;
@@ -51,7 +52,7 @@
   --text-link-channels: h s l;
   --text-brand-channels: h s l;
 
-  --text-primary-channels: var(--primary-hover-channels);
+  --text-primary-channels: h s calc(l + 5.8);
 
   --destructive-hover: 358.8 42.3% 53.1%;
   --destructive-active: 357.3 50.6% 34.1%;
@@ -64,23 +65,23 @@
 
 @supports not (color: hsl(from red h s l)) {
   :root {
-    --primary-hover: 268.7 100% 41.6%;
-    --primary-active: 268.7 100% 34.5%;
-    --primary-border: 268.7 68% 66%;
-    --control-outline: 268.7 100% 44.7%;
-    --text-link: 268.7 100% 41.6%;
-    --text-brand: 268.7 100% 41.6%;
-    --text-primary: 268.7 100% 34.5%;
+    --primary-hover: 240 6% 19.6%;
+    --primary-active: 240 6% 14.8%;
+    --primary-border: 240 4.08% 26%;
+    --control-outline: 240 6% 4.7%;
+    --text-link: 240 6% 1.6%;
+    --text-brand: 240 6% 1.6%;
+    --text-primary: 240 6% 0%;
   }
 
   .dark,
   :root[data-theme="dark"] {
-    --primary-hover: 268.7 100% 92.7%;
-    --primary-active: 268.7 100% 81.1%;
-    --primary-border: 268.7 46.7% 23.5%;
-    --control-outline: 268.7 99% 61.8%;
-    --text-link: 268.7 100% 86.9%;
-    --text-brand: 268.7 100% 86.9%;
-    --text-primary: 268.7 100% 92.7%;
+    --primary-hover: 0 0% 92.2%;
+    --primary-active: 0 0% 86.4%;
+    --primary-border: 0 0% 26.5%;
+    --control-outline: 0 0% 72.9%;
+    --text-link: 0 0% 98%;
+    --text-brand: 0 0% 98%;
+    --text-primary: 0 0% 100%;
   }
 }

package/dist/tokens/foundation.css

@@ -16,7 +16,7 @@
   --popover: 60 33% 99%;
   --popover-foreground: 48 8% 13%;
 
-  --primary: 268.7 100% 50%;
+  --primary: 240 6% 10%;
   --primary-foreground: 60 33% 99%;
   --secondary: 45 15% 95%;
   --secondary-foreground: 48 8% 13%;
@@ -41,7 +41,7 @@
   --attention: 25 99% 46%;
   --attention-foreground: 48 8% 13%;
 
-  --brand: 268.7 100% 50%;
+  --brand: 240 6% 10%;
   --brand-foreground: 60 33% 99%;
 
   --text-tertiary: 44 5% 55%;
@@ -188,8 +188,6 @@
   --heading-h3: initial;
   --heading-h4: initial;
 
-  --heading-h5: initial;
-
   --font-weight-normal: 400;
   --font-weight-medium: 500;
 
@@ -344,7 +342,7 @@
   --card-foreground: 60 20% 96%;
   --popover: 48 8% 12%;
   --popover-foreground: 60 20% 96%;
-  --primary: 268.7 100% 86.9%;
+  --primary: 0 0% 98%;
   --primary-foreground: 48 9% 9%;
   --secondary: 45 6% 18%;
   --secondary-foreground: 60 20% 96%;
@@ -369,7 +367,7 @@
   --attention: 25 95% 56%;
   --attention-foreground: 48 9% 9%;
 
-  --brand: 268.7 100% 86.9%;
+  --brand: 0 0% 98%;
   --brand-foreground: 48 9% 9%;
 
   --text-tertiary: 44 6% 56%;

package/docs/COMPOSITION-VS-COMPONENT.md

@@ -31,15 +31,15 @@ A **specific arrangement of existing primitives** for a specific screen, domain
 
 Before creating OR proposing a framework component, evaluate **every** criterion and record the verdict. **Allowed only if ALL are `PASS`.** Any `FAIL` ⇒ it is a composition pattern; use existing components instead.
 
-| #                                                                 | Criterion                                                                                                                      | PASS means                                                            | FAIL means (→ compose)                                                   |
-| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| **C1. Universal, not design-specific**                            | Needed by many apps across domains; not a recreation of one design's block.                                                    | A generic capability (a select, a table, a date picker).              | "ACME Hero", "AcmePricingTable", "this dashboard's header".              |
-| **C2. Encapsulates reusable BEHAVIOR**                            | Owns non-trivial state / keyboard / focus / ARIA that must not be re-implemented per app.                                      | Listbox navigation, dialog focus-trap, table sort/select, async load. | Pure static layout/visual arrangement (a hero, a footer, a banner).      |
-| **C3. Not expressible by composing existing primitives + tokens** | You genuinely cannot build it from `Card`/`Button`/`Text`/`Grid`/`Flex`/… + token overrides.                                   | A new interaction primitive with no existing equivalent.              | You _can_ build it today from primitives + tokens (then you must).       |
-| **C4. Single responsibility + controlled-vocabulary API**         | One job; maps to `value`/`defaultValue`/`onValueChange`, `size ∈ xs\|sm\|md\|lg`, `tone`, etc.; generalizes beyond one screen. | `Select`, `Switch`, `Pagination`.                                     | A grab-bag "Section"/"Block"/"Layout" with a bespoke, screen-shaped API. |
-| **C5. Fully token-themeable, zero baked brand**                   | Appearance is 100% token-driven; works for every brand with no code change.                                                    | Reads `hsl(var(--…))` / semantic tokens only.                         | Needs baked colors / raw hex / per-brand styling to look right.          |
-| **C6. Earns the international contract**                          | Broad reuse justifies the full i18n (`t()`/`Intl`) + WAI-ARIA APG + WCAG 2.2 AA + RTL + a11y-test + MCP-catalog cost.          | A control everyone uses and that needs correct ARIA.                  | A one-off where that cost is pure overhead.                              |
-| **C7. Earns its bundle cost**                                     | Broadly used ⇒ worth shipping to _every_ consumer.                                                                             | Used across most apps.                                                | Used by one app / one design ⇒ it belongs in that app.                   |
+| #                                                                 | Criterion                                                                                                                                | PASS means                                                            | FAIL means (→ compose)                                                                                         |
+| ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| **C1. Universal, not design-specific**                            | Needed by many apps across domains; not a recreation of one design's block.                                                              | A generic capability (a select, a table, a date picker).              | "ACME Hero", "AcmePricingTable", "this dashboard's header".                                                    |
+| **C2. Encapsulates reusable BEHAVIOR**                            | Owns non-trivial state / keyboard / focus / ARIA that must not be re-implemented per app.                                                | Listbox navigation, dialog focus-trap, table sort/select, async load. | Pure static layout/visual arrangement (a hero, a footer, a banner).                                            |
+| **C3. Not expressible by composing existing primitives + tokens** | You genuinely cannot build it from `Card`/`Button`/`Text`/`Grid`/`Flex`/… + token overrides.                                             | A new interaction primitive with no existing equivalent.              | You _can_ build it today from primitives + tokens (then you must).                                             |
+| **C4. Single responsibility + controlled-vocabulary API**         | One job; maps to `value`/`defaultValue`/`onValueChange`, `size ∈ xs\|sm\|md\|lg`, `tone`, etc.; generalizes beyond one screen.           | `Select`, `Switch`, `Pagination`.                                     | A grab-bag "Section"/"Block"/"Layout" with a bespoke, screen-shaped API.                                       |
+| **C5. Fully token-themeable, zero baked brand**                   | Appearance is 100% token-driven; works for every brand with no code change.                                                              | Reads `hsl(var(--…))` / semantic tokens only.                         | Needs baked colors / raw hex / per-brand styling to look right.                                                |
+| **C6. Earns the international contract**                          | Broad reuse justifies the full i18n (`t()`/`Intl`) + WAI-ARIA APG + WCAG 2.2 AA + RTL + a11y-test + MCP-catalog cost.                    | A control everyone uses and that needs correct ARIA.                  | A one-off where that cost is pure overhead.                                                                    |
+| **C7. Named pattern + neutral defaults**                          | A pattern named in at least TWO of WAI-ARIA APG, antd, MUI, shadcn (or an ISO/CLDR need), whose defaults encode no one product's policy. | `Select` (APG combobox · antd · MUI · shadcn), `Calendar` (CLDR).     | A screen-shaped invention no reference names ⇒ compose; one product's policy baked in ⇒ that product's preset. |
 
 > **Heuristic shortcuts** (a single one is usually enough to send it to composition):
 >
@@ -48,6 +48,33 @@ Before creating OR proposing a framework component, evaluate **every** criterion
 >   DashboardHeader)?" → **yes ⇒ compose** (C1).
 > - "Does it own **any real behavior**, or is it just **layout + content + color**?" → layout only ⇒ **compose** (C2).
 
+### 2.1 The admission rule — usage decides the TIER, never the verdict (v32, #1205 decision B4)
+
+C7 used to read "earns its bundle cost — used across most apps". That made usage the verdict, and
+usage in our own repos measures **migration exposure, not worldwide need**: a date-range picker
+nobody in GoDX happens to import yet is still a standard form primitive every adopter expects. The
+rule that replaced it (R4, agreed by both reviewers; JEV 0.87–0.89):
+
+A **core** component must
+
+1. **own reusable behaviour** — keyboard, focus, ARIA, timing, measurement — **measured in the
+   source**, not claimed in the tagline (C2);
+2. **match a pattern named in at least two of** WAI-ARIA APG, antd, MUI, shadcn, or an ISO/CLDR
+   need (C7);
+3. **not be composable** from primitives plus tokens — if it is, it is a recipe in `docs/` (C3);
+4. **have neutral defaults** — a component that encodes one product's policy (its roles, its
+   branches, its identity mark) belongs in that product's preset, e.g. `@godxjp/ui/themes/godx`
+   (C5 + C7).
+
+Then **usage picks the tier**, it never removes a component on its own:
+
+| Passes the rule, and …                         | Ships from                       | Notes                                                                                                                                                                                    |
+| ---------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| imported by consumers                          | `@godxjp/ui` (core)              | The default agent context; the full contract.                                                                                                                                            |
+| **no consumer imports it yet**                 | **`@godxjp/ui/lab`**             | Same gates as core (tests, a11y, i18n, tokens) and semver'd; left out of the default MCP listings. **Promoted** to core once imported by **≥ 2 repos**; **demotion is never automatic**. |
+| a cohesive family with its own audience (chat) | its own package (`@godxjp/chat`) | Composes the kit's public API only.                                                                                                                                                      |
+| fails the rule                                 | —                                | A recipe in `docs/`, or the product's preset.                                                                                                                                            |
+
 ### Decision flow
 
 ```
@@ -57,7 +84,7 @@ new UI need
   │        (Select = searchable/async; AppShell/PageContainer = chrome; DataTable = grids)
   │
   ├─ Run the Framework-Component Test (C1–C7).
-  │        ├─ ALL pass → it MAY be a framework component
+  │        ├─ ALL pass → it MAY be a framework component; §2.1 picks core vs `/lab` by usage
   │        │             → follow the full `godxjp-ui-component` contract (i18n/a11y/vocab/
   │        │               tokens/test/MCP/registry) before merging into src/components/.
   │        └─ ANY fail → it is a COMPOSITION PATTERN
@@ -72,20 +99,20 @@ new UI need
 
 ## 3. Worked examples
 
-| Thing                                                   | C1  | C2  | C3  | C4  | C5  | C6  | C7  | Verdict                                                                  |
-| ------------------------------------------------------- | --- | --- | --- | --- | --- | --- | --- | ------------------------------------------------------------------------ |
-| `Select` (incl. search/async)                           | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component**                                                  |
-| `DataTable`, `Dialog`, `Calendar`, `Switch`, `Combobox` | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component**                                                  |
-| `StatCard` (+ `icon`)                                   | ✅  | ➖  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component** (a reusable KPI tile with a stable API + tokens) |
-| `ServiceLauncherCard`                                   | ➖  | ❌  | ❌  | ✅  | ✅  | ➖  | ➖  | **Composition by the test — RETAINED as a recorded exception** (gh#814)  |
-| `MegaMenu`                                              | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ➖  | **Framework component** — the instructive contrast with Hero, below      |
-| Marketing **Hero**                                      | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — section, static, composable, brand-specific            |
-| **Navbar** / **Footer**                                 | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — layout of `Text`/`Button`/`Flex`                       |
-| **PricingTable** / feature grid                         | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — `ResponsiveGrid` + `Card`                              |
-| Dashboard **page layout**                               | ❌  | ❌  | ❌  | ❌  | ➖  | ❌  | ❌  | **Composition** — `AppShell` + `PageContainer` + `ResponsiveGrid`        |
-| "Icon medallion"                                        | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌  | **Composition** — `Avatar` (square) + a Lucide glyph                     |
-| **Section** / **Band** (full-bleed + measured column)   | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌  | **Composition** — `<section>` + `Flex measure` + `pad`; see §3.1         |
-| `TenantTheme` (customer hex at runtime)                 | ✅  | ➖  | ❌  | ❌  | ✅  | ❌  | ➖  | **Composition + a published FUNCTION** — `tenantTheme()`; see §3.2       |
+| Thing                                                   | C1  | C2  | C3  | C4  | C5  | C6  | C7  | Verdict                                                                                                            |
+| ------------------------------------------------------- | --- | --- | --- | --- | --- | --- | --- | ------------------------------------------------------------------------------------------------------------------ |
+| `Select` (incl. search/async)                           | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component**                                                                                            |
+| `DataTable`, `Dialog`, `Calendar`, `Switch`, `Combobox` | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component**                                                                                            |
+| `StatCard` (+ `icon`)                                   | ✅  | ➖  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component** (a reusable KPI tile with a stable API + tokens)                                           |
+| `ServiceLauncherCard`                                   | ➖  | ❌  | ❌  | ✅  | ✅  | ➖  | ➖  | **Composition by the test — RETAINED as a recorded exception** (gh#814)                                            |
+| `MegaMenu`                                              | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component, `@godxjp/ui/lab` tier** (no consumer yet, §2.1) — the instructive contrast with Hero, below |
+| Marketing **Hero**                                      | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — section, static, composable, brand-specific                                                      |
+| **Navbar** / **Footer**                                 | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — layout of `Text`/`Button`/`Flex`                                                                 |
+| **PricingTable** / feature grid                         | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — `ResponsiveGrid` + `Card`                                                                        |
+| Dashboard **page layout**                               | ❌  | ❌  | ❌  | ❌  | ➖  | ❌  | ❌  | **Composition** — `AppShell` + `PageContainer` + `ResponsiveGrid`                                                  |
+| "Icon medallion"                                        | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌  | **Composition** — `Avatar` (square) + a Lucide glyph                                                               |
+| **Section** / **Band** (full-bleed + measured column)   | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌  | **Composition** — `<section>` + `Flex measure` + `pad`; see §3.1                                                   |
+| `TenantTheme` (customer hex at runtime)                 | ✅  | ➖  | ❌  | ❌  | ✅  | ❌  | ➖  | **Composition + a published FUNCTION** — `tenantTheme()`; see §3.2                                                 |
 
 `✅ pass · ❌ fail · ➖ borderline`. **StatCard** is the instructive borderline: C2 is weak (it owns little behavior), but it is a universal KPI tile with a controlled API, fully tokenized, broadly reused — so it earns its place. A **Hero** fails six of seven; it is unambiguously a composition.
 
@@ -99,12 +126,10 @@ get wrong: `DropdownMenu` looks like the answer and is the WRONG primitive, not
 is react-aria-components `Menu`, i.e. `role="menu"` / `role="menuitem"`, which announces a set of
 site links as a desktop application menu and takes Tab out of the widget. The APG says so itself in
 its Disclosure Navigation example. A recipe over `DropdownMenu` would therefore ship the classic
-megamenu accessibility defect, which is exactly the case C3 is asking about. **C7 is the weak
-one** — marked ➖ deliberately: this is a JP business-software library, and a marketing megamenu is
-not in every consumer's build. It is kept because the same disclosure bar is what an admin console
-with several product areas needs, and because the cost is one file with no new dependency (no
-`@radix-ui/react-navigation-menu`, no animation runtime). Compare `StatCard`, whose borderline is
-C2 rather than C7.
+megamenu accessibility defect, which is exactly the case C3 is asking about. **C7 passes** under
+the v32 rule — APG names the Disclosure Navigation pattern and antd ships `Menu mode="horizontal"`
+with popup panels. What the old C7 ("used across most apps") marked ➖ is now a TIER question, not a
+verdict: no GoDX repo imports it yet, so it ships from `@godxjp/ui/lab` (§2.1) until two do.
 
 **ServiceLauncherCard is the ONE recorded exception, and it is recorded so that it stays one.** It shipped before the test was run against it, and when the test was run it came back with two hard FAILs: **C2** — no state, no keyboard handling, no focus management, its only ARIA three static attributes — and **C3** — its own imports are `Card` + `CardContent` + `Badge` + a Lucide glyph, so "could I build this right now from primitives?" is yes. By §2 that makes it a composition pattern. It is kept anyway because `src/components/layout/app-launcher.tsx` consumes it: it is an internal building block of a component that **does** pass, so the question was never "should it exist" but "should it be PUBLIC", and removing a public export is breaking. Keeping it public was the cheaper call and the ledger lives on gh#814 and at the top of `src/components/data-display/service-launcher-card.tsx`. **Consumers should compose `Card` + `Badge` for a service tile** — reach for `ServiceLauncherCard` only to match `AppLauncher`'s own tiles — and this row is not precedent for adding another static tile to `src/components/`.
 
@@ -116,8 +141,8 @@ turned out to be neither "add a component" nor "do nothing".
 **A `Section` component is refused, and it is refused for Hero's reasons.** It owns no state, no
 keyboard, no focus and no ARIA a `<section aria-labelledby>` does not already have (**C2**); it is
 `<section>` + `Flex` + padding + a max-width, i.e. buildable today (**C3**); its API would be the
-grab-bag `band` / `measure` / `glow` / `surface` / `bleed` that **C4** names by name; and a JP
-business-software library would be shipping a marketing band to every consumer (**C7**). One
+grab-bag `band` / `measure` / `glow` / `surface` / `bleed` that **C4** names by name; and no
+reference library names a "band" component — it is a page section, not a pattern (**C7**). One
 criterion of seven passes. Nothing about that is close.
 
 **But "do nothing" was also refused, and that is the part worth remembering.** The doctrine's own
@@ -163,7 +188,7 @@ copying it would have been the third private version of the same thing.
 | **C4** single responsibility + controlled vocabulary | **FAIL**                                         | The requested API is `primary` / `secondary` / `primaryForeground` / `tenant`. There is no `value`/`defaultValue`/`onValueChange`, no `size`, no `tone` — it is a configuration carrier with a screen-shaped API, which is the shape C4 names by name.                                                                                                                                                                                                                                              |
 | **C5** token-themeable, zero baked brand             | **PASS** (vacuously)                             | It IS the theming mechanism; it bakes nothing.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | **C6** earns the international contract              | **FAIL**                                         | It renders no text, has no role, no keyboard and no ARIA, so there is nothing for `t()` or the APG to say. The accessibility content of this feature is CONTRAST, and that lives in the computation and its tests — not in a component contract.                                                                                                                                                                                                                                                    |
-| **C7** earns its bundle cost                         | ➖                                               | The arithmetic is ~60 lines and every consumer that stores a customer colour needs it. A React wrapper around a `<div>` is not what earns that.                                                                                                                                                                                                                                                                                                                                                     |
+| **C7** named pattern + neutral defaults              | ➖                                               | The need is universal and the defaults are neutral, but no reference names a theming WRAPPER component — antd's ConfigProvider and MUI's ThemeProvider configure tokens, which is what the published function does. A React wrapper around a `<div>` is not the pattern.                                                                                                                                                                                                                            |
 
 **Three hard FAILs. Verdict: composition pattern — plus a published function.** `tenantTheme(hex)`
 in `@godxjp/ui/app` returns the declarations (`--primary`, `--primary-foreground`, `--ring`, and

package/docs/CONSUMER-RULES.md

@@ -2,7 +2,7 @@
 
 Read this once; the audit enforces it. Everything else in `docs/` is for contributors.
 
-1. Load styles with `@import "@godxjp/ui/styles"` (fonts bundled, 729 sliced woff2 faces, ~11.7 MB), `@import "@godxjp/ui/styles/core"` (no `@font-face` at all), `@import "@godxjp/ui/styles/core-with-fallbacks"` (`core` + six `local()`-only metric-matched faces, still zero network bytes — for when you supply Noto Sans JP yourself) or `@import "@godxjp/ui/styles/core-with-jis-level1"` (`core-with-fallbacks` + Noto Sans JP merged to JIS X 0208 level 1: **3 requests, ~1.53 MB, once** instead of ~8 font requests on every navigation — for a Japanese app that wants the bundled face). Never cherry-pick `*-layout.css`.
+1. Load styles with `import "@godxjp/ui/styles.css"` (precompiled, no Tailwind needed) or `@import "@godxjp/ui/styles"` (Tailwind v4). Neither ships font files: fonts are opt-in since v32 (`pnpm add @fontsource/noto-sans-jp @fontsource/m-plus-2`, then `@import "@godxjp/ui/styles/fonts.css"` after the styles import; the GoDX preset does this for you). Never cherry-pick `*-layout.css`.
 2. **Mount `<AppProvider defaultLocale="…">` once, at the root.** Without it the kit's OWN strings (dialog close/cancel/delete, counters, picker labels) fall to the resting locale `vi` and pickers to UTC — measured in a Japanese app as Vietnamese buttons, silently (gh#1005). A development build now warns once when a kit component renders outside it; `syncI18nLocale(locale, fallback)` is the escape for an app that truly cannot mount the provider. Every page is `<PageContainer title subtitle extra footer>`; its sections are spaced by the page. Group items inside a section with `<Flex direction="col" gap>` or `<ResponsiveGrid>`.
 3. No Tailwind layout on your own elements: no `flex`, `grid`, `gap-*`, `p-*`, `m-*`, `space-*`. Rows are `<Flex>` (default row), stacks are `<Flex direction="col">`, grids are `<ResponsiveGrid>`.
 4. No hand-rolled surfaces: no `rounded-* border bg-*` divs. A box is `Card`, a pill is `Badge`, a person is `Avatar`, a row is `ListRow`, a label/value pair is `Descriptions`, an empty area is `EmptyState`, a read-only sample of a colour the USER chose is `Swatch`. A LIST of those rows is `<Flex as="ul" marker="none" direction="col" gap="none">` with `<ListRow as="li">` children — `marker="none"` keeps the `<ul>`, the `<li>` semantics and the gap token while dropping the bullet and the indent. Never a raw `<ul>`/`<ol>` (it carries no gap token), never `<div role="list">` + `<div role="listitem">`, and never a wrapper around each row: the divider is `:not(:last-child)` among siblings, so a row alone in its own wrapper is always the last one and EVERY divider disappears silently. A bulleted prose list is the same `<Flex as="ul">` without `marker`.

package/docs/CUSTOMER-THEMING.md

@@ -99,79 +99,43 @@ hand in the generated file, and an explicit value always beats a derived default
 ## Internal apps — zero config
 
 ```ts
-import "@godxjp/ui/styles";
+import "@godxjp/ui/styles.css"; // precompiled, no Tailwind needed
 ```
 
-That single import ships everything: colors, the bundled fonts (**Noto Sans JP** as the default face — including the Vietnamese coverage — with **M PLUS 2** as the fallback, self-bundled & subsetted), the golden-ratio type scale, spacing grid, radius scale, shadow ramp, and all component CSS. Nothing else to configure. Pick density per surface with `<PageContainer density="compact | default | comfortable">`.
-
----
-
-## CSS entries — `styles`, `styles/core`, `styles/core-with-fallbacks`, `styles/core-with-jis-level1`, nothing smaller
-
-`@godxjp/ui/styles` bundles every component's CSS plus the fonts: **729 woff2 subsets, ~11.7 MB on disk** at the current @fontsource versions (issue #535 measured 737 files / 13 MB in a real consumer build). When you manage fonts yourself (next/font, a system stack, a browser extension that must not ship font files), load the same layers without the faces:
+With Tailwind v4, import the source entry instead and keep your `@source` lines:
 
 ```css
-@import "@godxjp/ui/styles/core"; /* every component layer, no @font-face */
+@import "@godxjp/ui/styles";
 ```
 
-`core` carries **zero** `@font-face` — `grep -c '@font-face' node_modules/@godxjp/ui/dist/styles/core.css` → `0` — and that number is the point of it. If you supply Noto Sans JP yourself and also want the cold-visit swap to stop reflowing the page (issue #475), take the third entry: `core` plus the six metric-matched fallback faces, every one `local()`-only, so the extra cost over `core` is **zero network bytes**.
+Either import ships colors, the golden-ratio type scale, spacing grid, radius scale, shadow ramp, and all component CSS. **It ships no font files** (opt-in since v32, below). Nothing else to configure. Pick density per surface with `<PageContainer density="compact | default | comfortable">`.
 
-```css
-@import "@godxjp/ui/styles/core-with-fallbacks"; /* core + 6 local()-only faces */
-```
-
-It declares the faces and nothing else — name the family yourself, directly after your own face:
+---
 
-```css
-:root {
-  --font-sans-base: "Noto Sans JP", "Noto Sans JP Fallback", system-ui, sans-serif;
-}
-```
+## CSS entries and fonts — `styles.css`, `styles`, `styles/fonts`, nothing smaller
 
-### A Japanese app that wants the bundled face anyway
+`@godxjp/ui/styles` carries every component's CSS and **no `@font-face`**. Fonts are a separate, opt-in sheet, so an app that manages its own faces (next/font, a system stack, a browser extension that must not ship font files) pays for none of them:
 
-The slicing is what costs the round-trips: a browser cannot know which of the 729 faces it needs
-until it has laid out and measured the text, so every new screen discovers a new handful. The
-fourth entry replaces them with **one merged file per weight**, JIS X 0208 level 1 — 2965 kanji
-plus kana, symbols, Cyrillic, Latin and Vietnamese, 3861 code points:
+```bash
+pnpm add @fontsource/noto-sans-jp @fontsource/m-plus-2
+```
 
 ```css
-@import "@godxjp/ui/styles/core-with-jis-level1"; /* core + fallbacks + 3 merged faces */
+@import "@godxjp/ui/styles";
+@import "@godxjp/ui/styles/fonts.css"; /* after the styles import: Noto Sans JP + M PLUS 2 */
 ```
 
-Measured against the sliced entry, Noto Sans JP only, weights 400/500/700:
-
-| distinct Japanese characters on screen        |                   `styles` |   `core-with-jis-level1` |
-| --------------------------------------------- | -------------------------: | -----------------------: |
-| 448 — this package's own `ja` labels, no data |  99 requests · 1,051,268 B | 3 requests · 1,534,636 B |
-| 694 — labels plus names, addresses, prose     | 150 requests · 1,772,728 B | 3 requests · 1,534,636 B |
-| 772 — a little more prose                     | 216 requests · 3,491,840 B | 3 requests · 1,534,636 B |
-
-The left column grows with your content and is paid again on every screen that renders a character
-no earlier screen did; the right column does not move. **Below roughly 620 distinct characters the
-slices are fewer bytes** (in ~100 requests), so an app that renders less Japanese than this
-package's own menu labels should stay on `styles`.
-
-What is deliberately not in it: **JIS level 2** (rows 48–84), which would roughly double the bytes
-to cover kanji that appear in rare surnames — those resolve from the platform Japanese face, so
-name one after ours. **M PLUS 2**, which sits behind Noto Sans JP in every stack this package ships
-and is therefore never downloaded today either; merging it would add 1,089,676 bytes for nothing.
-And **no `unicode-range`** on the merged faces, because per-range discovery is the mechanism the
-entry exists to remove — the cost of that is a Latin-only screen downloading its weight's ~500 KB
-rather than the ~25 KB of Latin inside it.
-
-Like `core-with-fallbacks`, it declares faces and does not set `--font-sans-base`; name a platform
-Japanese face after ours so level 2 kanji have somewhere to land:
+The GoDX preset adds the fonts import for you. The font sheet declares the faces and sets `--font-sans-base` to the bundled stack; if you supply the face yourself, skip it and name the family directly:
 
 ```css
 :root {
-  --font-sans-base:
-    "Noto Sans JP", "Noto Sans JP Fallback", "Hiragino Sans", "Yu Gothic Medium", Meiryo, system-ui,
-    sans-serif;
+  --font-sans-base: "Noto Sans JP", "Noto Sans JP Fallback", system-ui, sans-serif;
 }
 ```
 
-The per-layer files (`control`, `card-layout`, `navigation-layout`, …) are the package's internal structure, **not a public menu**. Layers share rules — a Select's rows and a menu's surface, a form's rhythm, a card's header type — so a page that loads a subset renders naked menus and unsized rows with no error. The runtime `visual-audit` reports it as `css-layers-missing`.
+Keep `"Noto Sans JP Fallback"` directly after your own Noto Sans JP: it is the metric-matched local face that stops the cold-visit swap from reflowing the page (issue #475).
+
+The per-layer files (`control`, `card-layout`, `navigation-layout`, …) are the package's internal structure, **not a public menu**. Layers share rules — a Select's rows and a menu's surface, a form's rhythm, a card's header type — so a page that loads a subset renders naked menus and unsized rows with no error. The runtime `visual-audit` reports it as `css-layers-missing`. The one supported way to ship less than the full entry is `npx godxjp-ui prune-css`, which slices along the dependency graph the package ships.
 
 ---
 

package/docs/migrations/v32.md

@@ -0,0 +1,98 @@
+# Migrating to @godxjp/ui v32
+
+v32 turns `@godxjp/ui` from a framework tuned for GoDX products into a framework any team can adopt:
+neutral defaults, open localization, an inert install, styles that work without Tailwind, and a
+smaller, more honest component surface. GoDX products keep their exact look through the GoDX preset.
+All six packages (`@godxjp/ui`, `@godxjp/ui-mcp`, `@godxjp/markdown`, `@godxjp/editor`,
+`@godxjp/block-editor` and the new `@godxjp/chat`) move to 32.0.0 together.
+
+Most of the upgrade is mechanical. Run the codemod first, then read the list below for what it
+reports but cannot decide.
+
+```sh
+npx godxjp-ui codemod v32 src --dry-run   # preview
+npx godxjp-ui codemod v32 src --godx      # a GoDX product: keep today's look
+npx godxjp-ui codemod v32 src             # any other app
+```
+
+Off-cycle approved: owner, 2026-10-09 — the single v32 batch decided on godx-jp/godxjp-ui#1205
+(recorded by Claude from the owner's instruction "do it all in one batch, one major, one CD run").
+
+## Breaking changes
+
+### Neutral identity; GoDX is a preset (#1220)
+
+- The default `--primary` and `--brand` are a neutral ink (`240 6% 10%` light, `0 0% 98%` dark), not
+  the GoDX violet. Hover and pressed steps stay visible at both ends of the lightness ramp.
+- `AuthIdentity` renders no mark when `brand` is omitted, unless a preset provides one. `null` always
+  renders none.
+- The email brand mark has no default label.
+- The GoDX look ships as `godxPreset` (`@godxjp/ui/themes/godx`) plus `@godxjp/ui/themes/godx.css`.
+
+### Locale defaults and open localization (#1219)
+
+- `AppProvider`'s `defaultLocale` now defaults to `<html lang>` when it names a registered locale, then
+  the preset's locale, then `en`. It used to be `vi`.
+- `AppLocale` is `string` (any BCP-47 tag). The three built-in packs are `BuiltInLocale`.
+- Register another locale with `registerLocale({ code, messages, dateFns, dayPicker })`. Date order,
+  separators and the first day of the week come from `Intl`.
+- `registerMessages` throws for an unregistered locale.
+- Server rendering: pass `defaultLocale` explicitly and wrap each request in
+  `runWithAppSettings(settings, render)`, so concurrent requests cannot read each other's locale,
+  timezone or formats.
+
+### Fonts are opt-in; styles work without Tailwind (#1221)
+
+- `@godxjp/ui/styles` no longer imports the Japanese fonts. Add
+  `@godxjp/ui/styles/fonts.css` after it (the codemod does), and install `@fontsource/noto-sans-jp`
+  and `@fontsource/m-plus-2`, which are now optional peers.
+- New: `@godxjp/ui/styles.css`, a precompiled stylesheet for apps without Tailwind.
+
+### Install and package (#1215, #1216, #1222)
+
+- Installing writes nothing into your project. Run `npx godxjp-ui sync-rules` (preview with
+  `--dry-run`) after installing and after each upgrade to refresh the agent files.
+- `sideEffects` now lists CSS, so bundlers keep `@godxjp/ui/styles`.
+- `react-aria-components`, `react-aria` and `react-stately` are pinned in lockstep (1.22.0 / 3.53.0 /
+  3.51.0), so an install resolves one copy of each. `engines.node` is `>=22`.
+
+### Component surface (#1223)
+
+The catalog goes from 185 entries to 161: 134 in core, 15 in `@godxjp/ui/lab`, 12 in sibling
+packages. The codemod rewrites every import below; the "you finish" column is printed as a `note`.
+
+| v31                                                                                                                                                                                                                | v32                               | You finish                                                             |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------- | ---------------------------------------------------------------------- |
+| `Banner`                                                                                                                                                                                                           | `Alert`                           | add `variant="banner"`                                                 |
+| `Callout`                                                                                                                                                                                                          | `Alert`                           | add `variant="callout"`; it keeps `role="note"`                        |
+| `TagInput`                                                                                                                                                                                                         | `Select`                          | add `mode="tags" open={false}`; `Select` takes no `ref`                |
+| `Thumbnail`                                                                                                                                                                                                        | `Image`                           | add `fit="intrinsic" preview={false}`                                  |
+| `HoverCard` (+ Trigger, Content)                                                                                                                                                                                   | `Popover` (+ Trigger, Content)    | add `openOn="hover"`; `openDelay` / `closeDelay` keep working          |
+| `AuthShell`                                                                                                                                                                                                        | `CenteredShell`                   | add `variant="auth"`; `variant="canonical"` becomes `"auth-canonical"` |
+| `SpaceCompact`                                                                                                                                                                                                     | `Flex`                            | add `attached`; `orientation`/`vertical` become `direction="col"`      |
+| `AppSettingToggle`                                                                                                                                                                                                 | `AppSettingPicker`                | add `menu={false}`                                                     |
+| `Title`, `Paragraph`, `Typography`                                                                                                                                                                                 | `Heading`, `Text as="p"`, `Prose` | the antd compatibility shims are removed                               |
+| `SkeletonAvatar`, `SkeletonButton`, `SkeletonImage`, `SkeletonNode`                                                                                                                                                | —                                 | removed: use `SkeletonArticle avatar` or a sized `Skeleton`            |
+| `FloatButton`, `DraggablePanel`, `PageCover`, `Masonry`, `LegalDocumentShell`, `Marquee`, `TextDiff`, `OrgChart`, `Carousel`, `TimelineGrid`, `RangeTimeline`, `EmojiPicker`, `SortableList`, `MegaMenu`, `Anchor` | same names from `@godxjp/ui/lab`  | nothing: same API, opt-in subpath                                      |
+| `ChatBubble`, `ChatBubbleList`, `ChatComposer`, `ChatSuggestion`, `Conversations`, `ThoughtChain`, `Welcome`, `Attachments`                                                                                        | same names from `@godxjp/chat`    | install `@godxjp/chat`                                                 |
+
+Unchanged: `SplitPane` stays (its merge into `MasterDetail` failed the parity test), `Actions` stays
+in `@godxjp/ui/general`, and `FilterBar` stays an alias of `Toolbar`. The `./ui/*` subpaths are
+deprecated re-exports and will be removed in a later major.
+
+## How to upgrade
+
+1. Upgrade all six packages to 32.0.0 together (`@godxjp/chat` only if you use the chat components).
+2. Run `npx godxjp-ui codemod v32 <src> --dry-run`, review, then run it without `--dry-run`. Use
+   `--godx` for GoDX products.
+3. Finish every `note` the codemod printed (a component move that changes props, an `AppProvider`
+   that relied on the old `vi` default).
+4. Install the font packages if you keep the Japanese fonts.
+5. Run `npx godxjp-ui sync-rules` and restart your coding agent.
+6. Build, then compare a few screens: with the GoDX preset they should be pixel-identical to 31.x.
+
+## Support
+
+v31 receives no further releases. A security fix for v31 is an owner exception, decided case by case.
+From v32 on, a new major ships at most once per quarter, and the publish job refuses a major whose
+migration note is missing or incomplete.