@godxjp/ui 33.17.0 → 33.19.0

package/agent/START-HERE.md

@@ -3,7 +3,7 @@
 You are about to write code against a design system you did not author. This file is the whole
 contract. Read it before you write JSX.
 
-**This catalog describes `@godxjp/ui` 33.17.0.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 33.19.0.** If the project you are editing has a different
 version in its `package.json`, read the pinned catalog for THAT version instead
 (`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
 not exist yet; older, and it hides props that do. Neither failure announces itself.

package/agent/components/BlockEditor.json

@@ -16,7 +16,7 @@
       "type": "string"
     },
     {
-      "description": "Canonical Markdown after each edit — `serialize(editor.getJSON())`, identical to `normalize(body)` from `@godxjp/markdown/codec` (CODEC_ID kit-md@1).",
+      "description": "Canonical Markdown after each edit — `serialize(editor.getJSON())`, identical to `normalize(body)` from `@godxjp/markdown/codec` (CODEC_ID kit-md@2).",
       "name": "onValueChange",
       "type": "(markdown: string) => void"
     },

package/agent/components/Flex.json

@@ -95,7 +95,7 @@
     {
       "description": "A FIXED column: number = px, string = any CSS length. Comes with flex: none — a width a sibling can still squeeze is a suggestion, and stacked rows would start at different x offsets. Leaves data-width-raw on the DOM so the measurement stays countable, like gapRaw/padRaw.",
       "name": "width",
-      "type": "number | string"
+      "type": "WidthProp"
     },
     {
       "description": "CENTRE this box and CAP it at a page measure (--page-measure-narrow 42rem / -medium 48rem / -wide 72rem): margin-inline:auto + inline-size:100% + max-inline-size. THE public answer to \"full-bleed outside, measured column inside\" — a marketing <section> paints edge to edge and its inner Flex measure=\"wide\" holds the content on the page measure. Deliberately NOT on PageContainer: that owns page padding and a header/toolbar/footer scaffold, so a full-bleed page cannot consume it, and the refusal left the centred column owned by nobody — three showcases each hand-wrote the same four declarations (gh#839). It adds NO gutter: the page inset is pad={{ inline: 6 }}, and one band with two padding owners drifts. A MAX, so nothing binds below the cap at 390px. An explicit `width` wins. Do not give a READING column \"wide\" — prose stays narrow/medium, which bracket Bringhurst's 45-75 characters. Omitted emits no attribute at all.",

package/agent/components/Form.json

@@ -13,12 +13,12 @@
     {
       "description": "Label column width in horizontal layout (number→px). e.g. 120 or '8rem'.",
       "name": "labelWidth",
-      "type": "number | string"
+      "type": "WidthProp"
     },
     {
-      "description": "Cap the control width (number→px). Omit to fill the column. Caps the control only — the helper and error still span the field column.",
+      "description": "Cap the control width: number→px, or a CSS length ('20rem', '50%', 'calc(…)'). Omit to fill the column. Caps the control only — the helper and error still span the field column. A size word ('md', 'lg') is a type error, not a width (gh#1431).",
       "name": "controlWidth",
-      "type": "number | string"
+      "type": "WidthProp"
     },
     {
       "defaultValue": "\"end\"",

package/agent/components/FormField.json

@@ -61,12 +61,12 @@
     {
       "description": "Override the Form's label width for this field.",
       "name": "labelWidth",
-      "type": "number | string"
+      "type": "WidthProp"
     },
     {
       "description": "Override the Form's control width for this field. Caps the control only — the helper and error still span the field column.",
       "name": "controlWidth",
-      "type": "number | string"
+      "type": "WidthProp"
     },
     {
       "description": "Span N columns when inside a `columns` Form grid.",

package/agent/components/Markdown.json

@@ -63,7 +63,7 @@
       "type": "string"
     },
     {
-      "description": "Visible titles for GitHub-alert callouts (`> [!WARNING]`) that carry none of their own. English by default (the package has no i18n); pass localized strings. Grammar v1 (gh#1156): callouts, `:::toggle[summary]`, `::::columns`/`:::column{width=N}`, CJK-friendly emphasis — the same syntax the pure codec at `@godxjp/markdown/codec` (CODEC_ID kit-md@1, parse/serialize/normalize, DOM-free) and @godxjp/block-editor use.",
+      "description": "Visible titles for GitHub-alert callouts (`> [!WARNING]`) that carry none of their own. English by default (the package has no i18n); pass localized strings. Grammar v1 (gh#1156): callouts, `:::toggle[summary]`, `::::columns`/`:::column{width=N}`, CJK-friendly emphasis — the same syntax the pure codec at `@godxjp/markdown/codec` (CODEC_ID kit-md@2, parse/serialize/normalize, DOM-free) and @godxjp/block-editor use.",
       "name": "calloutTitles",
       "type": "Partial<Record<'note' | 'tip' | 'important' | 'warning' | 'caution', string>>"
     },
@@ -72,6 +72,12 @@
       "description": "`false` keeps ```mermaid fences as code. Diagrams need the optional peer `mermaid`.",
       "name": "mermaid",
       "type": "boolean"
+    },
+    {
+      "defaultValue": "true",
+      "description": "Fenced code in a known language is tokenised at parse time as `<span data-code-token>` with the kit's twelve names, which Prose colours (renderer v6). `false` leaves plain text for a host `pre` with its own highlighter.",
+      "name": "highlight",
+      "type": "boolean"
     }
   ],
   "related": [
@@ -87,6 +93,7 @@
     "Table of contents: outline(markdown) from @godxjp/markdown/codec returns { depth, text, id }[] with exactly the ids <Markdown> writes — feed it to the kit Anchor. YAML front matter is kept verbatim and never rendered; frontmatterOf(markdown) returns it (gh#1163).",
     "DO `<Prose><Markdown>{body}</Markdown></Prose>` for every rendered body (wiki page, issue, mail).",
     "DO record `MARKDOWN_FORMAT` and `RENDERER_VERSION` on stored versions.",
+    "DO `import \"@godxjp/markdown/katex.css\"` once in the app: `$…$`, `$$…$$` and ```math are drawn by KaTeX at parse time (trust: false, renderer v6) and need its stylesheet and fonts. A single `$` follows Pandoc's rule, so `$5 and $10` stays text.",
     "DON'T assemble react-markdown + rehype-sanitize per app, add rehype-raw, or render Mermaid yourself — `checkMermaidSvg` is the gate."
   ]
 }

package/agent/components/Sheet.json

@@ -23,7 +23,7 @@
     {
       "description": "On SheetContent (side left/right): desired panel width (number→px). Default w-3/4 sm:max-w-md.",
       "name": "width",
-      "type": "number | string"
+      "type": "WidthProp"
     },
     {
       "description": "On SheetContent (same name as on DialogContent): fires on every close before focus returns to the trigger. Call event.preventDefault() and focus your own target (e.g. the new page's heading after a drawer navigation) to send focus there instead (gh#1134).",

package/agent/components.json

@@ -1020,7 +1020,7 @@
       {
         "description": "A FIXED column: number = px, string = any CSS length. Comes with flex: none — a width a sibling can still squeeze is a suggestion, and stacked rows would start at different x offsets. Leaves data-width-raw on the DOM so the measurement stays countable, like gapRaw/padRaw.",
         "name": "width",
-        "type": "number | string"
+        "type": "WidthProp"
       },
       {
         "description": "CENTRE this box and CAP it at a page measure (--page-measure-narrow 42rem / -medium 48rem / -wide 72rem): margin-inline:auto + inline-size:100% + max-inline-size. THE public answer to \"full-bleed outside, measured column inside\" — a marketing <section> paints edge to edge and its inner Flex measure=\"wide\" holds the content on the page measure. Deliberately NOT on PageContainer: that owns page padding and a header/toolbar/footer scaffold, so a full-bleed page cannot consume it, and the refusal left the centred column owned by nobody — three showcases each hand-wrote the same four declarations (gh#839). It adds NO gutter: the page inset is pad={{ inline: 6 }}, and one band with two padding owners drifts. A MAX, so nothing binds below the cap at 390px. An explicit `width` wins. Do not give a READING column \"wide\" — prose stays narrow/medium, which bracket Bringhurst's 45-75 characters. Omitted emits no attribute at all.",
@@ -5087,7 +5087,7 @@
         "type": "string"
       },
       {
-        "description": "Visible titles for GitHub-alert callouts (`> [!WARNING]`) that carry none of their own. English by default (the package has no i18n); pass localized strings. Grammar v1 (gh#1156): callouts, `:::toggle[summary]`, `::::columns`/`:::column{width=N}`, CJK-friendly emphasis — the same syntax the pure codec at `@godxjp/markdown/codec` (CODEC_ID kit-md@1, parse/serialize/normalize, DOM-free) and @godxjp/block-editor use.",
+        "description": "Visible titles for GitHub-alert callouts (`> [!WARNING]`) that carry none of their own. English by default (the package has no i18n); pass localized strings. Grammar v1 (gh#1156): callouts, `:::toggle[summary]`, `::::columns`/`:::column{width=N}`, CJK-friendly emphasis — the same syntax the pure codec at `@godxjp/markdown/codec` (CODEC_ID kit-md@2, parse/serialize/normalize, DOM-free) and @godxjp/block-editor use.",
         "name": "calloutTitles",
         "type": "Partial<Record<'note' | 'tip' | 'important' | 'warning' | 'caution', string>>"
       },
@@ -5096,6 +5096,12 @@
         "description": "`false` keeps ```mermaid fences as code. Diagrams need the optional peer `mermaid`.",
         "name": "mermaid",
         "type": "boolean"
+      },
+      {
+        "defaultValue": "true",
+        "description": "Fenced code in a known language is tokenised at parse time as `<span data-code-token>` with the kit's twelve names, which Prose colours (renderer v6). `false` leaves plain text for a host `pre` with its own highlighter.",
+        "name": "highlight",
+        "type": "boolean"
       }
     ],
     "related": [
@@ -5111,6 +5117,7 @@
       "Table of contents: outline(markdown) from @godxjp/markdown/codec returns { depth, text, id }[] with exactly the ids <Markdown> writes — feed it to the kit Anchor. YAML front matter is kept verbatim and never rendered; frontmatterOf(markdown) returns it (gh#1163).",
       "DO `<Prose><Markdown>{body}</Markdown></Prose>` for every rendered body (wiki page, issue, mail).",
       "DO record `MARKDOWN_FORMAT` and `RENDERER_VERSION` on stored versions.",
+      "DO `import \"@godxjp/markdown/katex.css\"` once in the app: `$…$`, `$$…$$` and ```math are drawn by KaTeX at parse time (trust: false, renderer v6) and need its stylesheet and fonts. A single `$` follows Pandoc's rule, so `$5 and $10` stays text.",
       "DON'T assemble react-markdown + rehype-sanitize per app, add rehype-raw, or render Mermaid yourself — `checkMermaidSvg` is the gate."
     ]
   },
@@ -5198,7 +5205,7 @@
         "type": "string"
       },
       {
-        "description": "Canonical Markdown after each edit — `serialize(editor.getJSON())`, identical to `normalize(body)` from `@godxjp/markdown/codec` (CODEC_ID kit-md@1).",
+        "description": "Canonical Markdown after each edit — `serialize(editor.getJSON())`, identical to `normalize(body)` from `@godxjp/markdown/codec` (CODEC_ID kit-md@2).",
         "name": "onValueChange",
         "type": "(markdown: string) => void"
       },
@@ -5953,12 +5960,12 @@
       {
         "description": "Label column width in horizontal layout (number→px). e.g. 120 or '8rem'.",
         "name": "labelWidth",
-        "type": "number | string"
+        "type": "WidthProp"
       },
       {
-        "description": "Cap the control width (number→px). Omit to fill the column. Caps the control only — the helper and error still span the field column.",
+        "description": "Cap the control width: number→px, or a CSS length ('20rem', '50%', 'calc(…)'). Omit to fill the column. Caps the control only — the helper and error still span the field column. A size word ('md', 'lg') is a type error, not a width (gh#1431).",
         "name": "controlWidth",
-        "type": "number | string"
+        "type": "WidthProp"
       },
       {
         "defaultValue": "\"end\"",
@@ -6089,12 +6096,12 @@
       {
         "description": "Override the Form's label width for this field.",
         "name": "labelWidth",
-        "type": "number | string"
+        "type": "WidthProp"
       },
       {
         "description": "Override the Form's control width for this field. Caps the control only — the helper and error still span the field column.",
         "name": "controlWidth",
-        "type": "number | string"
+        "type": "WidthProp"
       },
       {
         "description": "Span N columns when inside a `columns` Form grid.",
@@ -8342,7 +8349,7 @@
       {
         "description": "On SheetContent (side left/right): desired panel width (number→px). Default w-3/4 sm:max-w-md.",
         "name": "width",
-        "type": "number | string"
+        "type": "WidthProp"
       },
       {
         "description": "On SheetContent (same name as on DialogContent): fires on every close before focus returns to the trigger. Call event.preventDefault() and focus your own target (e.g. the new page's heading after a drawer navigation) to send focus there instead (gh#1134).",

package/agent/index.json

@@ -54,7 +54,7 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v33.17.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v33.19.0/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
@@ -68,5 +68,5 @@
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "33.17.0"
+  "version": "33.19.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
 > A Japanese-enterprise React design system: 171 components, 2263 design tokens,
-> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.17.0.
+> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.19.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@33.17.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@33.19.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -27,7 +27,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v33.17.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v33.19.0/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "33.17.0",
+  "version": "33.19.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/props/registry.d.ts

@@ -122,7 +122,7 @@ export declare const VOCABULARY_REGISTRY: {
     readonly WidthProp: {
         readonly file: "vocabulary/shared.prop.ts";
         readonly category: "shared";
-        readonly description: "Explicit layout length (number→px | CSS string) — NOT the SizeProp tier";
+        readonly description: 'Explicit layout length (number→px | CSS length string: 20rem, 50%, calc()/min()/var()) — NOT the SizeProp tier; "md" is a type error';
     };
     readonly ControlWidthProp: {
         readonly file: "vocabulary/shared.prop.ts";

package/dist/props/registry.js

@@ -118,7 +118,7 @@ const VOCABULARY_REGISTRY = {
   WidthProp: {
     file: "vocabulary/shared.prop.ts",
     category: "shared",
-    description: "Explicit layout length (number\u2192px | CSS string) \u2014 NOT the SizeProp tier"
+    description: 'Explicit layout length (number\u2192px | CSS length string: 20rem, 50%, calc()/min()/var()) \u2014 NOT the SizeProp tier; "md" is a type error'
   },
   ControlWidthProp: {
     file: "vocabulary/shared.prop.ts",

package/dist/props/vocabulary/shared.prop.d.ts

@@ -57,11 +57,21 @@ export type AsChildProp = boolean;
  * would otherwise write at the call site.
  */
 export type FlushProp = boolean;
+/** A CSS length or percentage unit (CSS Values and Units 4 §5–6), as written after a number. */
+type CssLengthUnit = "px" | "rem" | "em" | "%" | "ch" | "ex" | "lh" | "rlh" | "vw" | "vh" | "vi" | "vb" | "vmin" | "vmax" | "svw" | "svh" | "lvw" | "lvh" | "dvw" | "dvh" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "cm" | "mm" | "in" | "pt" | "pc";
 /**
  * An explicit layout dimension (NOT the `SizeProp` control-height tier). A `number` is treated as
- * px; a `string` is any CSS length (`"32rem"`, `"90vw"`, `"50%"`).
+ * px; a `string` must be a CSS length the browser can use as written: a number with a unit
+ * (`"32rem"`, `"90vw"`, `"50%"`), an intrinsic keyword (`"auto"`, `"max-content"`,
+ * `"min-content"`, `"fit-content"`) or a math / custom-property expression (`calc()`, `min()`,
+ * `max()`, `clamp()`, `var()`, `fit-content()`).
+ *
+ * A size-tier word (`"sm"`, `"md"`, `"lg"`) is a type error, not a width: the value is written into
+ * CSS as-is, so `controlWidth="md"` was `--form-control-width: md` — invalid at computed-value time,
+ * which drops the cap and lets the control fill its column (gh#1431). A component that offers a
+ * width SCALE names it with its own union (`CenteredShellWidthProp`, `ControlWidthProp`).
  */
-export type WidthProp = number | string;
+export type WidthProp = number | `${number}${CssLengthUnit}` | "auto" | "max-content" | "min-content" | "fit-content" | `calc(${string})` | `min(${string})` | `max(${string})` | `clamp(${string})` | `var(${string})` | `fit-content(${string})`;
 /**
  * How a control sizes on the inline axis: fill its column, hug its label, or sit at a bounded
  * width the theme owns.
@@ -106,3 +116,4 @@ export type NotFoundContentProp = React.ReactNode;
  * lets it size to its content, and a number pins it to that many pixels.
  */
 export type PopupMatchWidthProp = boolean | number;
+export {};

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.17.0",
+  "version": "33.19.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",