@godxjp/ui 25.3.0 → 25.4.0

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": "25.3.0",
+  "version": "25.4.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/styles/shell-layout.css

@@ -285,7 +285,10 @@
 
   .app-main .ui-page-container {
     width: 100%;
-    max-width: var(--app-shell-page-max-width);
+  }
+
+  .app-main :where(.ui-page-header, .ui-page-toolbar, .ui-page-body) {
+    max-inline-size: var(--app-shell-page-max-width);
   }
 
   .ui-auth-shell {

package/dist/tokens/components/shell.css

@@ -53,7 +53,8 @@
   --app-shell-nav-rail-height: var(--app-shell-nav-rail-width);
 
   --app-shell-nav-rail-inset: var(--space-3);
-  --app-shell-page-max-width: 80rem;
+
+  --app-shell-page-max-width: none;
 
   --app-shell-main-background: initial;
   --app-shell-mobile-nav-width: 22.5rem;

package/docs/layout/app-shell-states.tsx

@@ -24,7 +24,11 @@ import {
  * single page:
  *
  *   ?topbarSpan=content|full   ?navRail=start|end|top|bottom   ?collapsed=1   ?sidebar=none
- *   ?responsive=docked
+ *   ?responsive=docked   ?measure=narrow|medium   ?footer=1
+ *
+ * `measure` and `footer` feed `scripts/check-app-shell-page-width.mjs` (gh#672): the page is fluid
+ * in the main column at every sidebar state, and a sticky footer band always spans `.app-main`,
+ * even when a service caps content with `--app-shell-page-max-width` or the page sets `measure`.
  *
  * With no query it is `topbarSpan="full"` without a rail — the state gh#474 found collapsing
  * `main` into a 170px implicit track below 900px, with the page actions laid out past the edge.
@@ -61,11 +65,13 @@ function readState() {
     hasSidebar: params.get("sidebar") !== "none",
     responsiveNavigation:
       params.get("responsive") === "docked" ? ("docked" as const) : ("drawer" as const),
+    measure: (["narrow", "medium"] as const).find((m) => m === params.get("measure")),
+    hasFooter: params.get("footer") === "1",
   };
 }
 
 export default function Demo() {
-  const [{ topbarSpan, navRail, collapsed, hasSidebar, responsiveNavigation }] =
+  const [{ topbarSpan, navRail, collapsed, hasSidebar, responsiveNavigation, measure, hasFooter }] =
     useState(readState);
   const [activeId, setActiveId] = useState("dashboard");
   const strip = navRail === "top" || navRail === "bottom";
@@ -113,6 +119,18 @@ export default function Demo() {
       <PageContainer
         title="請求書"
         subtitle="株式会社アクメ · 2026年5月"
+        measure={measure}
+        footer={
+          hasFooter ? (
+            <Flex gap="sm" align="center" justify="end">
+              <Button size="sm" variant="outline">
+                下書き保存
+              </Button>
+              <Button size="sm">コメントを送信する</Button>
+            </Flex>
+          ) : undefined
+        }
+        stickyFooter={hasFooter}
         extra={
           <Flex gap="sm" wrap>
             <Button size="sm" variant="outline">

package/docs/showcase/case5-shift-calendar.tsx

@@ -555,12 +555,16 @@ function MonthGrid({ onPick }: { onPick: (d: DayCell) => void }) {
                         opacity: cell.dim ? 0.5 : 1,
                       }}
                     >
-                      <button
-                        type="button"
+                      <Button
+                        variant="ghost"
+                        shape="sharp"
+                        fullWidth
+                        wrap
+                        align="start"
                         onClick={() => onPick(cell)}
-                        className="hover:bg-accent focus-visible:ring-ring min-h-[96px] w-full text-start transition-colors focus:outline-none focus-visible:ring-2"
+                        className="min-h-[96px]"
                       >
-                        <Flex direction="col" gap="xs">
+                        <Flex direction="col" gap="xs" fill>
                           <Flex align="center" justify="between">
                             <Text
                               as="span"
@@ -604,7 +608,7 @@ function MonthGrid({ onPick }: { onPick: (d: DayCell) => void }) {
                             ) : null}
                           </Flex>
                         </Flex>
-                      </button>
+                      </Button>
                     </TableCell>
                   );
                 })}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "25.3.0",
-  "godxUiMcp": "25.3.0",
+  "version": "25.4.0",
+  "godxUiMcp": "25.4.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -334,8 +334,9 @@
     "check:choice-hit-target": "node scripts/check-choice-hit-target.mjs",
     "check:state-legible": "node scripts/check-state-legible.mjs",
     "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:frame-contracts": "pnpm check:component-api-manifest && pnpm audit:component-cases && pnpm check:frame-coverage && pnpm check:frame-coverage-ledger && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
-    "check:frame-runtime": "pnpm check:data-entry-touch-aria && pnpm check:app-shell-narrow-grid && pnpm check:choice-hit-target",
+    "check:frame-runtime": "pnpm check:data-entry-touch-aria && pnpm check:app-shell-narrow-grid && pnpm check:app-shell-page-width && pnpm check:choice-hit-target",
     "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: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:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && 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-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:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
     "verify:ci": "pnpm verify:ci:static && pnpm check:frame-contracts && pnpm test",

package/scripts/ui-audit.mjs

@@ -145,6 +145,19 @@ const EMOJI_FLAG = /\p{Regional_Indicator}/u;
  */
 const ATTRS = String.raw`(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|=>|[^>"'])*`;
 
+/**
+ * A raw lowercase HTML opening tag, wherever its line ends (gh#673).
+ *
+ * The control rules were `/<button[\s>]/` run ONE LINE at a time. Prettier leaves `<button` alone on
+ * its line when it wraps an element, and the newline after the tag name is not part of that line, so
+ * every wrapped element was invisible: a consumer's audit reported 0 `no-raw-button` while ~166
+ * multi-line `<button` remained, and "0" read as "migration finished". Matched over the whole file
+ * (`spansElement`), the lookahead `[\s/>]` accepts that newline while `<buttonish`, `<Button` and
+ * `</button` stay unmatched. `[^\n]*` only carries the rest of the line into the snippet — and keeps
+ * one finding per line, which is what the per-line rule reported for a single-line element.
+ */
+const rawTag = (tag) => new RegExp(`<${tag}(?=[\\s/>])[^\\n]*`, "g");
+
 /**
  * @type {{id:string, severity:'error'|'warn', test:RegExp, message:string, standard?:string,
  *         exempt?:RegExp, classOnly?:boolean}[]}
@@ -185,7 +198,9 @@ const RULES = [
     severity: "error",
     // A hand-rolled flex/grid container. The primitives exist precisely so a row is <Flex>, a
     // stack is <Flex direction="col">, a grid is <ResponsiveGrid> — token gaps, RTL, density.
-    test: /className=(?:"[^"]*|'[^']*|\{`[^`]*)(?<![\w-])(?:flex|inline-flex|grid|inline-grid)(?![\w-])/,
+    // Whole-file: a className template literal can hold `flex` several lines below `className=` (gh#673).
+    spansElement: true,
+    test: /className=(?:"[^"]*|'[^']*|\{`[^`]*)(?<![\w-])(?:flex|inline-flex|grid|inline-grid)(?![\w-])/g,
     message:
       'No hand-rolled flex/grid — use <Flex> (row), <Flex direction="col"> (stack) or <ResponsiveGrid> (docs/CONSUMER-RULES.md §3).',
   },
@@ -203,17 +218,23 @@ const RULES = [
     // rounded-full` dot was clean, `prettier --write` reordered it to `rounded-full bg-current`,
     // and the warning appeared with no source change. A rule a formatter can flip is a rule
     // nobody can trust.
-    test: (line) => {
-      const m = line.match(/className=(?:"([^"]*)"|'([^']*)'|\{`([^`]*)`)/);
-      if (!m) return false;
-      const cls = m[1] ?? m[2] ?? m[3] ?? "";
-      // A MARKER is not a surface. `size-1` is 4px — a dot, a pip, a status bead. The primitives
-      // this rule points at (Card, Badge, Avatar, ListRow, Descriptions, EmptyState) all start at
-      // control height, so none of them can express one, and flagging it sends the reader looking
-      // for a component that does not exist. The cut-off is `size-2` / 8px: below that there is no
-      // room for the padding and type that make something a surface.
-      if (/\b(?:size|[wh])-(?:0\.5|1|1\.5|2)\b/.test(cls)) return false;
-      return /\brounded(?:-(?:full|sm|md|lg|xl|2xl))?\b/.test(cls) && /\b(?:border|bg-)/.test(cls);
+    //
+    // Whole-file, one verdict per className: a template literal spread over lines puts `rounded`
+    // and `border` on lines of their own, where a per-line read saw neither (gh#673).
+    spansElement: true,
+    matches: function* (source) {
+      for (const m of source.matchAll(/className=(?:"([^"]*)"|'([^']*)'|\{`([^`]*)`)/g)) {
+        const cls = m[1] ?? m[2] ?? m[3] ?? "";
+        // A MARKER is not a surface. `size-1` is 4px — a dot, a pip, a status bead. The primitives
+        // this rule points at (Card, Badge, Avatar, ListRow, Descriptions, EmptyState) all start at
+        // control height, so none of them can express one, and flagging it sends the reader looking
+        // for a component that does not exist. The cut-off is `size-2` / 8px: below that there is no
+        // room for the padding and type that make something a surface.
+        if (/\b(?:size|[wh])-(?:0\.5|1|1\.5|2)\b/.test(cls)) continue;
+        if (/\brounded(?:-(?:full|sm|md|lg|xl|2xl))?\b/.test(cls) && /\b(?:border|bg-)/.test(cls)) {
+          yield m;
+        }
+      }
     },
     message:
       "Hand-rolled surface (rounded + border/bg) — use Card, Badge, Avatar, ListRow, Descriptions or EmptyState so height, padding and radius come from the tokens (docs/CONSUMER-RULES.md §4). A read-only sample of a colour a USER chose is Swatch, which takes that value as a prop.",
@@ -360,14 +381,16 @@ const RULES = [
     replacement: "Select",
     scope: "consumer-control",
     severity: "error",
-    test: /<select[\s>]/,
+    spansElement: true,
+    test: rawTag("select"),
     message: "Use <Select> from @godxjp/ui, not a raw <select> (rules §3).",
   },
   {
     id: "no-raw-table",
     replacement: "DataTable / Table",
     severity: "error",
-    test: /<table[\s>]/,
+    spansElement: true,
+    test: rawTag("table"),
     message: "Use the <Table> family from @godxjp/ui, not a raw <table> (rules §3).",
   },
   {
@@ -375,7 +398,8 @@ const RULES = [
     replacement: "Textarea",
     scope: "consumer-control",
     severity: "warn",
-    test: /<textarea[\s>]/,
+    spansElement: true,
+    test: rawTag("textarea"),
     message: "Use <Textarea> from @godxjp/ui, not a raw <textarea> (rules §3).",
   },
   {
@@ -392,7 +416,8 @@ const RULES = [
     replacement: "Button",
     scope: "consumer-control",
     severity: "error",
-    test: /<button[\s>]/,
+    spansElement: true,
+    test: rawTag("button"),
     message: "Use <Button> from @godxjp/ui, not a raw <button> (rules §3).",
   },
   {
@@ -423,7 +448,9 @@ const RULES = [
   {
     id: "manual-field-helper",
     severity: "warn",
-    test: /<p[^>]*className="text-xs text-muted-foreground"/,
+    // Whole-file: prettier wraps `<p` and its className onto separate lines (gh#673).
+    spansElement: true,
+    test: new RegExp(`<p${ATTRS}className="text-xs text-muted-foreground"`, "g"),
     message:
       "Field helper text should use <FormField helper=…>, not a hand-rolled <p> (rules §1). OK only for checkbox/radio groups.",
   },
@@ -541,7 +568,9 @@ const RULES = [
      * — one of ten standing warnings here. Flagging it would push every consumer doing the right
      * thing toward either a suppression comment or a worse glyph.
      */
-    test: />\s*[✕✖×╳]\s*</,
+    // Whole-file: prettier puts a wrapped element's text on its own line, `>` and `<` elsewhere (gh#673).
+    spansElement: true,
+    test: />\s*[✕✖×╳]\s*</g,
     exempt: /<VisuallyHidden\b|sr-only/,
     standard: "WAI-ARIA 1.2 (dialog) · WCAG 2.2 SC 4.1.2 · @godxjp/ui Alert/Dialog anatomy",
     message:
@@ -1190,7 +1219,11 @@ for (const dir of SCAN_DIRS) {
           continue;
         const lineNo = scanContent.slice(0, match.index).split("\n").length;
         if (suppressed(rule.id, lineNo - 1)) continue;
-        if (isExempt(rule, origLines[lineNo - 1], origLines[lineNo - 2])) continue;
+        // "The line after" is the one after the match ENDS: a wrapped glyph's name follows its `</span>`.
+        const endLineNo = lineNo + (match[0].match(/\n/g)?.length ?? 0);
+        if (isExempt(rule, origLines[lineNo - 1], origLines[lineNo - 2], origLines[endLineNo])) {
+          continue;
+        }
         findings.push({
           file: rel,
           line: lineNo,
@@ -1198,6 +1231,7 @@ for (const dir of SCAN_DIRS) {
           severity: rule.severity,
           standard: rule.standard,
           message: rule.message,
+          replacement: rule.replacement,
           snippet: match[0].replace(/\s+/g, " ").slice(0, 120),
         });
       }