@godxjp/ui 28.9.0 → 28.12.0

package/docs/roadmap/website-components.md

@@ -649,6 +649,40 @@ with no call site in the two pages that are its proof, which is the tier-2 mista
 warns about. The token stands on its own as the vocabulary a composition caps its shell with, the
 way `--gradient-hero` does.
 
+**CLOSED in gh#839, and the refusal above still stands.** Leaving the centred column to "the
+composition writes it" was measured and found wanting: three unrelated pages hand-wrote the SAME
+four declarations — `marketing-page.tsx` as an inline `style` constant, `acme-website.tsx` as
+`.tx-shell`, `futurelastic-web.tsx` as `.fl-shell` — which `docs/TOKENS.md` calls tier 1, and two of
+the three spelled it as a page-local CSS class. The answer was not a `Section` component (it fails
+C1–C7 the way Hero does — `docs/COMPOSITION-VS-COMPONENT.md` §3.1 carries the ledger) and not
+`PageContainer`, which still cannot be consumed by a full-bleed page. It is **`Flex measure`**
+(`narrow | medium | wide`, reading `--page-measure-*`), on the primitive a `<section>` CAN put
+inside itself. It centres and caps and nothing else: `pad` keeps the gutter, so a band is
+`<section>` around one `<Flex direction="col" measure="wide" pad={{ inline: 6, block: 20 }}>`.
+
+| step                               | reader                                                         |
+| ---------------------------------- | -------------------------------------------------------------- |
+| `--space-section-band` (80px)      | `pad={{ block: 20 }}` — `GapStepProp` gained 20/24             |
+| `--space-section-hero` (96px)      | `pad={{ block: 24 }}`                                          |
+| `--page-measure-{narrow,med,wide}` | `Flex measure` — and `PageContainer measure` for the first two |
+
+**No compact rung for the band steps, decided on measurement.** At 320×568 the hero band is 96px
+at both edges = 33.8% of the first screen, and the `<h1>` still lands fully above the fold (top
+195px, bottom 315px). Three reasons not to add one: (1) 96px is already the NARROW rung of the
+industry pair — Tailwind UI's marketing sections are `py-24 sm:py-32`, i.e. 96px on a phone and
+128px from `sm` up, so the missing step is at the wide end, not the narrow one; (2) a numeric `pad`
+step is a VALUE by contract (`pad={3}` is 12px at every width — `GapStepProp`'s own docstring says
+so), and making 20/24 responsive would make them the two steps whose number lies; (3) a
+`--space-section-band-compact` token would have nowhere to be flipped: every `-active`/`-compact`
+pair in this repo switches inside a COMPONENT's scope (`.ui-page-container`,
+`.ui-centered-shell[data-preset="public-landing"]`), and a plain `<section>` has no such scope — so
+it would ship as vocabulary with no caller, the exact defect gh#839 exists to stop.
+`--centered-shell-landing-main-padding-block-compact` is not the counter-example it looks like: it
+is 40px → 24px of a SHELL's `main` padding, not a marketing band, and it lives inside that shell's
+own scope. **The real capability the band wants is a responsive object form for `pad`**, the one
+`direction` and `ResponsiveGrid columns` already take (`pad={{ block: { base: 12, md: 20 } }}`) —
+that is its own issue, and a much larger one than a token rung.
+
 ---
 
 ## 6. The animation and motion story

package/docs/showcase/marketing-page.tsx

@@ -30,26 +30,34 @@
  *
  * ── WHAT IS STILL HAND-WRITTEN, AND WHY (the finding this page exists to produce) ───────────────
  *
- * Zero classes and zero literals did NOT mean zero CSS. Six things below are inline `style`
- * objects because no PROP reaches them. Each one is a named gap, in the order a reader meets them:
+ * Zero classes and zero literals did NOT mean zero CSS. Six things below WERE inline `style`
+ * objects because no PROP reached them. Each one is a named gap, in the order a reader meets them;
+ * gh#839 closed the first two:
  *
- *  1. THE SECTION BAND — `paddingBlock: var(--space-section-band | --space-section-hero)`.
- *     PARTLY CLOSED by gh#839: the numeric `GapProp` ladder now reaches the two band steps, so
+ *  1. THE SECTION BAND — was `paddingBlock: var(--space-section-band | --space-section-hero)`.
+ *     CLOSED by gh#839: the numeric `GapProp` ladder reaches the two band steps, so
  *     `pad={{ block: 20 }}` (80px) and `pad={{ block: 24 }}` (96px) state the rhythm through the
- *     public API. The bands below still use an inline `style` because each one ALSO needs the
- *     centred inner column (`SHELL`), and nothing owns "full-bleed outside, measured column
- *     inside" — that half of gh#839 is open. Neither step has a compact variant either:
- *     `--space-section-hero` measures 96px at 1440 and at 320, where the package's own landing
- *     preset drops its band via `--centered-shell-landing-main-padding-block-compact`.
- *  2. THE CENTRED COLUMN — `marginInline: auto` + `inlineSize: 100%` +
+ *     public API, and every band below now does. Neither step has a compact variant and gh#839
+ *     decided it should not: `--space-section-hero` measures 96px at 1440 AND at 320, which is
+ *     deliberate — Tailwind UI's own marketing sections are `py-24 sm:py-32`, i.e. 96px is the
+ *     NARROW rung of the industry pair and the desktop one is the step above. A numeric `pad`
+ *     step is a VALUE (`pad={3}` is 12px everywhere); making one of them responsive would break
+ *     that contract for the whole ladder. `--centered-shell-landing-main-padding-block-compact`
+ *     is not the counter-example it looks like: 40px → 24px is a SHELL's main padding, not a
+ *     marketing band, and it switches inside `.ui-centered-shell`'s own scope, which a plain
+ *     `<section>` has no equivalent of.
+ *  2. THE CENTRED COLUMN — was `marginInline: auto` + `inlineSize: 100%` +
  *     `maxInlineSize: var(--page-measure-wide)` + `paddingInline: var(--space-6)`, repeated at
- *     every band. gh#831 minted `--page-measure-wide` and deliberately did not add
- *     `PageContainer measure="wide"`, reasoning that a marketing page is full-bleed sections with
- *     a centred inner column and `PageContainer` owns neither. The reasoning holds; its
- *     consequence is that NOTHING owns the centred inner column.
- *  3. THE STICKY BAR — `position: sticky` + `insetBlockStart` + `zIndex`. `Affix` does not exist
- *     here (`docs/roadmap/website-components.md` §5.2 proposed `--affix-inset-block-start` and
- *     `--affix-z-index`; neither shipped) and `Topbar` has no `sticky` prop.
+ *     every band. CLOSED by gh#839 as `Flex measure="wide"` + `pad={{ inline: 6 }}`. gh#831 minted
+ *     `--page-measure-wide` and deliberately did not add `PageContainer measure="wide"`, reasoning
+ *     that a marketing page is full-bleed sections with a centred inner column and `PageContainer`
+ *     owns neither. That reasoning still holds and was not reopened — the prop went to `Flex`, the
+ *     primitive a full-bleed `<section>` can actually put inside itself, where it has seven call
+ *     sites on this page. `measure` adds NO gutter: `pad` owns that, and one band with two padding
+ *     owners is how a measure and its inset drift apart.
+ *  3. THE STICKY BAR — `position: sticky` + `insetBlockStart` + `zIndex`. `Affix` has since
+ *     shipped (28.8.0, with the measured placeholder that removes the 62px page jump) and this
+ *     page has not yet been moved onto it; `Topbar` still has no `sticky` prop.
  *  4. THE GLASS — `--topbar-background-alpha` / `--topbar-backdrop-blur-size` as inline custom
  *     properties. They are `initial` by design, so a call site MUST set them, and that is correct.
  *     This used to read `--space-2`, borrowing a token that means something else, because the
@@ -155,20 +163,9 @@ import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, ResponsiveGrid, Separator, Topbar } from "@godxjp/ui/layout";
 import { AppSettingPicker } from "@godxjp/ui/navigation";
 
-/* ── The five inline-style constants named in the docblock. Every value is a token reference; no
-   number with a unit appears anywhere in this file. ─────────────────────────────────────────── */
-
-/** (2) The centred inner column. Nothing in the package owns this shape yet. */
-const SHELL: CSSProperties = {
-  marginInline: "auto",
-  inlineSize: "100%",
-  maxInlineSize: "var(--page-measure-wide)",
-  paddingInline: "var(--space-6)",
-};
-
-/** (1) The section rhythm gh#831 named and no prop reads. */
-const BAND: CSSProperties = { paddingBlock: "var(--space-section-band)" };
-const HERO_BAND: CSSProperties = { paddingBlock: "var(--space-section-hero)" };
+/* ── The inline-style constants named in the docblock. Every value is a token reference; no number
+   with a unit appears anywhere in this file. Gaps 1 and 2 no longer have one: `Flex measure` and
+   `Flex pad` state the band through props (gh#839). ──────────────────────────────────────────── */
 
 /** (5) The halo host and the halo layer. */
 const GLOW_HOST: CSSProperties = { position: "relative", overflow: "hidden" };
@@ -446,7 +443,13 @@ export default function MarketingPage() {
             className="ui-brand-glow"
             style={{ ...GLOW_LAYER, ...HERO_GLOW }}
           />
-          <div style={{ ...SHELL, ...HERO_BAND, ...ABOVE_GLOW }}>
+          <Flex
+            direction="col"
+            gap="none"
+            measure="wide"
+            pad={{ inline: 6, block: 24 }}
+            style={ABOVE_GLOW}
+          >
             <ResponsiveGrid columns={{ base: 1, lg: 2 }} gap="xl" align="start">
               <Reveal>
                 <Flex direction="col" gap="lg">
@@ -532,12 +535,12 @@ export default function MarketingPage() {
                 </Card>
               </Reveal>
             </ResponsiveGrid>
-          </div>
+          </Flex>
         </section>
 
         {/* ── LOGO WALL ────────────────────────────────────────────────────────────────────── */}
         <section aria-labelledby="logos-title">
-          <div style={{ ...SHELL, ...BAND }}>
+          <Flex direction="col" gap="none" measure="wide" pad={{ inline: 6, block: 20 }}>
             <Flex direction="col" gap="lg">
               <Flex direction="col" gap="xs">
                 <Heading level={2} size="lg" id="logos-title">
@@ -567,13 +570,13 @@ export default function MarketingPage() {
                 ))}
               </Marquee>
             </Flex>
-          </div>
+          </Flex>
         </section>
 
         {/* ── FEATURE GRID ─────────────────────────────────────────────────────────────────── */}
         <section id="solutions" aria-labelledby="features-title">
           <Flex as="div" direction="col" gap="none" surface="muted">
-            <div style={{ ...SHELL, ...BAND }}>
+            <Flex direction="col" gap="none" measure="wide" pad={{ inline: 6, block: 20 }}>
               <Flex direction="col" gap="xl">
                 <Flex direction="col" gap="xs">
                   <Heading level={2} size="3xl" weight="bold" id="features-title">
@@ -613,13 +616,13 @@ export default function MarketingPage() {
                   ))}
                 </ResponsiveGrid>
               </Flex>
-            </div>
+            </Flex>
           </Flex>
         </section>
 
         {/* ── TESTIMONIALS ─────────────────────────────────────────────────────────────────── */}
         <section aria-labelledby="quotes-title">
-          <div style={{ ...SHELL, ...BAND }}>
+          <Flex direction="col" gap="none" measure="wide" pad={{ inline: 6, block: 20 }}>
             <Flex direction="col" gap="lg">
               <Heading level={2} size="3xl" weight="bold" id="quotes-title">
                 {t("marketingShowcase.testimonials.title")}
@@ -673,13 +676,13 @@ export default function MarketingPage() {
                 <CarouselDots />
               </Carousel>
             </Flex>
-          </div>
+          </Flex>
         </section>
 
         {/* ── PRICING ──────────────────────────────────────────────────────────────────────── */}
         <section id="pricing" aria-labelledby="pricing-title">
           <Flex as="div" direction="col" gap="none" surface="muted">
-            <div style={{ ...SHELL, ...BAND }}>
+            <Flex direction="col" gap="none" measure="wide" pad={{ inline: 6, block: 20 }}>
               <Flex direction="col" gap="xl">
                 <Flex direction="col" gap="md">
                   <Heading level={2} size="3xl" weight="bold" id="pricing-title">
@@ -774,7 +777,7 @@ export default function MarketingPage() {
                   })}
                 </ResponsiveGrid>
               </Flex>
-            </div>
+            </Flex>
           </Flex>
         </section>
 
@@ -785,7 +788,13 @@ export default function MarketingPage() {
             className="ui-brand-glow"
             style={{ ...GLOW_LAYER, ...CTA_GLOW }}
           />
-          <div style={{ ...SHELL, ...BAND, ...ABOVE_GLOW }}>
+          <Flex
+            direction="col"
+            gap="none"
+            measure="wide"
+            pad={{ inline: 6, block: 20 }}
+            style={ABOVE_GLOW}
+          >
             <Reveal on="view">
               <Flex direction="col" gap="md" align="center">
                 <Heading level={2} size="4xl" weight="bold" align="center" id="cta-title">
@@ -810,14 +819,14 @@ export default function MarketingPage() {
                 </Text>
               </Flex>
             </Reveal>
-          </div>
+          </Flex>
         </section>
       </main>
 
       {/* ── FOOTER ───────────────────────────────────────────────────────────────────────── */}
       <footer>
         <Flex as="div" direction="col" gap="none" surface="muted">
-          <div style={{ ...SHELL, ...BAND }}>
+          <Flex direction="col" gap="none" measure="wide" pad={{ inline: 6, block: 20 }}>
             <Flex direction="col" gap="lg">
               {/* ResponsiveGrid.Item span — the asymmetric footer both siblings hand-wrote a
                   `grid-template-columns: 1.4fr 1fr 1fr 1fr` for. It has shipped the whole time. */}
@@ -877,7 +886,7 @@ export default function MarketingPage() {
                 </Flex>
               </Flex>
             </Flex>
-          </div>
+          </Flex>
         </Flex>
       </footer>
     </Flex>

package/docs/showcase/table-pagination.tsx

@@ -36,6 +36,7 @@ import {
 import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { Pagination } from "@godxjp/ui/navigation";
+import { useTranslation } from "@godxjp/ui/i18n";
 import {
   Select,
   SelectContent,
@@ -91,8 +92,13 @@ function makeRows(count: number, prefix = "ATT"): Attendance[] {
       date: `2026-06-${String((i % 28) + 1).padStart(2, "0")}`,
       employee: NAMES[i % NAMES.length],
       dept: DEPTS[i % DEPTS.length],
-      clockIn: `0${startHour}:${["02", "58", "31", "07"][i % 4]}`,
-      clockOut: ot ? `${18 + Math.floor(ot / 60)}:${String(ot % 60).padStart(2, "0")}` : "18:00",
+      // `0${startHour}` hard-coded the leading zero and printed `010:07` at startHour 10 —
+      // the hand-built formatting this repo's own rules forbid. `padStart` on the hour, the
+      // same way the line above already does it for the date.
+      clockIn: `${String(startHour).padStart(2, "0")}:${["02", "58", "31", "07"][i % 4]}`,
+      clockOut: ot
+        ? `${String(18 + Math.floor(ot / 60)).padStart(2, "0")}:${String(ot % 60).padStart(2, "0")}`
+        : "18:00",
       overtime: ot,
       status: statuses[i % statuses.length],
     };
@@ -102,20 +108,38 @@ function makeRows(count: number, prefix = "ATT"): Attendance[] {
 const minutesFmt = (m: number) => (m === 0 ? "—" : `${m}分`);
 
 // Columns are shared between the cards (pure data — no per-card state inside).
+/* EVERY column declares a width, not just the first (gh#849).
+ *
+ * Measured at 2000px before this, as empty pixels between one cell's ink and the next's:
+ *
+ *   部署 → 出勤   521      残業 → 状態    57
+ *   従業員 → 部署 411      勤務日 → 従業員 40
+ *   退勤 → 残業   280
+ *
+ * A 521px hole beside a 40px seam, in one row. Only `勤務日` carried a width, so
+ * `table-layout: auto` sized the rest from content and dumped ALL the slack of a 1952px card
+ * into the two free-text columns — and because those are start-aligned while the measures are
+ * end-aligned, the slack opened as craters BETWEEN columns rather than inside them.
+ *
+ * With a width on every column the engine distributes the excess proportionally instead, so the
+ * gaps scale together and no single one dominates. The numbers are a ratio, not a measurement:
+ * the two free-text columns get the larger share because they are the ones that actually wrap. */
 const columns: ColumnDef<Attendance>[] = [
   { key: "date", header: "勤務日", width: "w-28" },
-  { key: "employee", header: "従業員" },
-  { key: "dept", header: "部署", hiddenOnMobile: true },
+  { key: "employee", header: "従業員", width: "w-44" },
+  { key: "dept", header: "部署", hiddenOnMobile: true, width: "w-36" },
   {
     key: "clockIn",
     header: "出勤",
     align: "right",
+    width: "w-24",
     render: (row) => <Text tabular>{row.clockIn}</Text>,
   },
   {
     key: "clockOut",
     header: "退勤",
     align: "right",
+    width: "w-24",
     render: (row) => <Text tabular>{row.clockOut}</Text>,
   },
   {
@@ -123,12 +147,17 @@ const columns: ColumnDef<Attendance>[] = [
     header: "残業",
     align: "right",
     hiddenOnMobile: true,
+    width: "w-24",
     render: (row) => <Text tabular>{minutesFmt(row.overtime)}</Text>,
   },
   {
     key: "status",
     header: "状態",
-    align: "center",
+    /* END, not CENTER (gh#849). The status column carries the table's right edge; centring a
+     * ~90px pill in it put the badges 102px inboard while the header count, the column headers
+     * and the pagination all landed on 17px. */
+    align: "right",
+    width: "w-32",
     render: (row) => <Badge status={row.status}>{STATUS_LABEL[row.status]}</Badge>,
   },
 ];
@@ -138,6 +167,8 @@ const columns: ColumnDef<Attendance>[] = [
 const NUMBERED_DATA = makeRows(83, "OFS");
 
 function NumberedPaginationCard() {
+  const { t } = useTranslation();
+  const fmt = useFormatters();
   const [page, setPage] = React.useState(2); // start mid-set so prev/next are both live
   const [pageSize, setPageSize] = React.useState(10);
 
@@ -150,7 +181,7 @@ function NumberedPaginationCard() {
         <CardTitle level={2}>番号付き + 件数選択</CardTitle>
         <CardAction>
           <Text size="xs" tone="muted" tabular>
-            全 {NUMBERED_DATA.length} 件
+            {t("showcase.pagination.recordCount", { count: NUMBERED_DATA.length })}
           </Text>
         </CardAction>
       </CardHeader>
@@ -164,7 +195,9 @@ function NumberedPaginationCard() {
           pageSize={pageSize}
           pageSizeOptions={[10, 20, 50]}
           showSizeChanger
-          showTotal={(total, [from, to]) => `${from}–${to} / ${total} 件`}
+          showTotal={(total, [from, to]) =>
+            `${fmt.number(from)}–${fmt.number(to)} / ${t("showcase.pagination.recordCount", { count: total })}`
+          }
           onValueChange={(nextPage, nextSize) => {
             setPage(nextPage);
             setPageSize(nextSize);
@@ -181,6 +214,8 @@ const LOADMORE_DATA = makeRows(42, "LDM");
 const LOADMORE_STEP = 8;
 
 function LoadMoreCard() {
+  const { t } = useTranslation();
+  const fmt = useFormatters();
   // Mid-load state at rest: some rows already revealed, more remaining.
   const [visible, setVisible] = React.useState(LOADMORE_STEP * 2);
   const [loading, setLoading] = React.useState(false);
@@ -205,7 +240,8 @@ function LoadMoreCard() {
         <CardTitle level={2}>もっと読む</CardTitle>
         <CardAction>
           <Text size="xs" tone="muted" tabular>
-            {rows.length} / {LOADMORE_DATA.length} 件表示
+            {fmt.number(rows.length)} /{" "}
+            {t("showcase.pagination.recordCount", { count: LOADMORE_DATA.length })}
           </Text>
         </CardAction>
       </CardHeader>
@@ -225,11 +261,13 @@ function LoadMoreCard() {
             {!done && <ChevronDown aria-hidden="true" />}
             {done
               ? "すべて表示しました"
-              : `さらに ${Math.min(LOADMORE_STEP, remaining)} 件を読み込む`}
+              : t("showcase.pagination.loadMore", {
+                  count: Math.min(LOADMORE_STEP, remaining),
+                })}
           </Button>
           {!done && (
             <Text size="xs" tone="muted" tabular>
-              残り {remaining} 件
+              {t("showcase.pagination.recordCount", { count: remaining })}
             </Text>
           )}
         </Flex>
@@ -242,11 +280,11 @@ function LoadMoreCard() {
 
 // Time-series 勤怠 logs grouped by month — offset paging is meaningless here,
 // so we use cursor first/next (DataTable.Pagination) + a period Select to jump.
-const PERIODS = [
-  { value: "2026-06", label: "2026年 6月" },
-  { value: "2026-05", label: "2026年 5月" },
-  { value: "2026-04", label: "2026年 4月" },
-] as const;
+/* The VALUE is data; the LABEL is a formatting decision and belongs to the active locale.
+ * Hard-coded "2026年 6月" rendered beside the library's own "Đầu" / "Tiếp" — two languages in one
+ * row, which is what the owner photographed. `Intl.DateTimeFormat` gives 「2026年6月」, "June 2026"
+ * and "tháng 6 năm 2026" from the same value. */
+const PERIODS = [{ value: "2026-06" }, { value: "2026-05" }, { value: "2026-04" }] as const;
 
 const PERIOD_DATA: Record<string, Attendance[]> = {
   "2026-06": makeRows(7, "CUR-06"),
@@ -255,6 +293,8 @@ const PERIOD_DATA: Record<string, Attendance[]> = {
 };
 
 function CursorPeriodCard() {
+  const { t } = useTranslation();
+  const fmt = useFormatters();
   const [period, setPeriod] = React.useState<string>("2026-06");
   // cursor === id of the last row of the previous page; undefined = first page.
   const [cursor, setCursor] = React.useState<string | undefined>(undefined);
@@ -284,7 +324,7 @@ function CursorPeriodCard() {
             <SelectContent>
               {PERIODS.map((p) => (
                 <SelectItem key={p.value} value={p.value}>
-                  {p.label}
+                  {fmt.month(p.value)}
                 </SelectItem>
               ))}
             </SelectContent>
@@ -294,10 +334,30 @@ function CursorPeriodCard() {
       <CardContent flush>
         <DataTable data={rows} columns={columns} getRowId={(row) => row.id} density="compact" />
       </CardContent>
-      <CardContent className="border-t">
+      {/* `DataTable.Pagination` owns its own insets ON BOTH AXES, because it is normally the lone
+       * child of a FLUSH container. Here it shares a padded `CardContent` with the period label,
+       * so both stack.
+       *
+       * The first pass at this zeroed only the INLINE knob and declared it done — a two-axis
+       * defect fixed on one axis, which looks fixed from the side you were measuring. The block
+       * one kept stacking: 16px from the CardContent plus 7.36px of the slot's own, so this
+       * footer sat 27px off the last row while the other two cards sat at 20px.
+       *
+       * Zeroing both hands the insets to the container that already supplies them; that is what
+       * these knobs are for, and an instance override is the right tier for one element in one
+       * arrangement (docs/CUSTOMER-THEMING.md, tier 4). */}
+      <CardContent
+        className="border-t"
+        style={
+          {
+            "--table-pagination-padding-x": "0",
+            "--table-pagination-padding-y": "0",
+          } as React.CSSProperties
+        }
+      >
         <Flex direction="row" align="center" justify="between" wrap gap="sm">
           <Text size="xs" tone="muted" tabular>
-            {PERIODS.find((p) => p.value === period)?.label} · {all.length} 件
+            {fmt.month(period)} · {t("showcase.pagination.recordCount", { count: all.length })}
           </Text>
           <DataTable.Pagination
             cursor={lastVisibleId}
@@ -310,6 +370,27 @@ function CursorPeriodCard() {
   );
 }
 
+/* COUNTS AND MONTHS FOLLOW THE ACTIVE LOCALE, and this page used to hard-code them.
+ *
+ * The library's own chrome is localized — the page-size Select renders "10 / trang" under `vi` —
+ * so a page that hard-codes `件` puts two languages in one row and they can never agree. That is
+ * exactly what the owner photographed: "11–20 / 83 件" beside "10 / trang".
+ *
+ * `Intl.NumberFormat` groups the number for the locale; the unit word comes from the library's own
+ * message catalogue, which already carries a CLDR plural map per language. Nothing here is a
+ * hand-built string. */
+const useFormatters = () => {
+  const { locale } = useTranslation();
+  return React.useMemo(() => {
+    const number = new Intl.NumberFormat(locale);
+    const month = new Intl.DateTimeFormat(locale, { year: "numeric", month: "long" });
+    return {
+      number: (n: number) => number.format(n),
+      month: (iso: string) => month.format(new Date(`${iso}-01T00:00:00`)),
+    };
+  }, [locale]);
+};
+
 export default function Demo() {
   return (
     <PageContainer

package/docs/showcase/theme-customization.tsx

@@ -302,7 +302,13 @@ export default function ThemeCustomizationShowcase() {
   const [corner, setCorner] = React.useState("default");
   const [custom, setCustom] = React.useState("#0F62FE");
   const [regions, setRegions] = React.useState<string[]>(["JP", "VN"]);
-  const [labels, setLabels] = React.useState<string[]>(["本番", "ổn định", UNBREAKABLE]);
+  /* UNBREAKABLE FIRST, ON PURPOSE (gh#840). With `maxTagCount={2}` the tag in third place is the
+   * one that collapses into `+N` — so while the 71-character id sat last, the chip that painted
+   * outside the control was never actually drawn on this page, and `maxTagTextLength` had nothing
+   * to demonstrate. Held first, the row now draws all three of the issue's answers at once: the
+   * long id truncated to its ceiling (full value in `title` and in the remover's name), a normal
+   * chip beside it, and a `+1` that names the tag behind it. */
+  const [labels, setLabels] = React.useState<string[]>([UNBREAKABLE, "本番", "ổn định"]);
   const [plan, setPlan] = React.useState("standard");
   const [channels, setChannels] = React.useState<string[]>(["email"]);
   const [cadence, setCadence] = React.useState("weekly");
@@ -565,7 +571,19 @@ function ComponentsBoard(props: {
   } = props;
 
   return (
-    <ResponsiveGrid columns={{ base: 1, sm: 2, lg: 3 }} gap="lg" align="start">
+    /* PADDED HERE, because nothing above this pads it (gh#841 follow-up). The board sits in
+       `<CardContent flush>` so the tab STRIP can meet the card edge — which is right, a line
+       variant's underline should run edge to edge — and `bodied` is a no-op on `variant="line"`
+       by design (`tabs.tsx`: `const bodiedCard = card && Boolean(bodied)`). So the body has no
+       inline inset from either side, and the form sat 1px from the card border: measured label
+       at x=25 against a card at x=24. `pad` on the board is the composition answer — the same
+       step `CardContent` would have used. */
+    <ResponsiveGrid
+      columns={{ base: 1, sm: 2, lg: 3 }}
+      gap="lg"
+      align="start"
+      pad={{ inline: "lg", block: "md" }}
+    >
       {/* 1 · text entry */}
       <Flex direction="col" gap="md">
         <FormField
@@ -618,6 +636,11 @@ function ComponentsBoard(props: {
             value={labels}
             onValueChange={setLabels}
             maxTagCount={2}
+            /* The ceiling the 71-character id is measured against (gh#840). 16 is the widest cut
+               that still leaves room for a second chip and the `+1` on one row at 375px; the value
+               is untouched — it stays in the chip's `title` and in the remover's accessible name,
+               which is the only reason truncating an identifier is allowed at all. */
+            maxTagTextLength={16}
             placeholder={t("themeShowcase.form.labelsPlaceholder")}
           />
         </FormField>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "28.9.0",
-  "godxUiMcp": "28.9.0",
+  "version": "28.12.0",
+  "godxUiMcp": "28.12.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -23,6 +23,7 @@
   "description": "@godxjp/ui — shared React UI framework (shadcn + Radix + Tailwind v4).",
   "files": [
     "LICENSE",
+    "agent",
     "dist",
     "scripts/ui-audit.mjs",
     "README.md",
@@ -387,12 +388,12 @@
     "gen:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs",
     "gen:registry": "node scripts/gen-registry.mjs",
     "init-agent": "node scripts/init-agent-kit.mjs",
-    "lint": "eslint .",
+    "lint": "eslint . --cache --cache-strategy content",
     "lint:fix": "eslint . --fix",
     "postinstall": "node scripts/postinstall.mjs",
     "prepublishOnly": "pnpm run build",
     "preview": "node preview/scripts/kill-port.mjs && vite --config preview/vite.config.ts --port 6008 --strictPort",
-    "preview:build": "vite build --config preview/vite.config.ts && node scripts/gen-registry.mjs",
+    "preview:build": "vite build --config preview/vite.config.ts && node scripts/gen-registry.mjs && node scripts/copy-agent-catalog.mjs",
     "regen": "node scripts/regen-generated.mjs",
     "release": "node scripts/release.mjs",
     "ship:surface": "pnpm regen && pnpm verify:ci:static && pnpm check:frame-contracts",
@@ -413,13 +414,15 @@
     "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": "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",
+    "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",
     "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",
     "visual-audit": "node scripts/visual-audit.mjs",
     "gen:brand": "node scripts/gen-brand.mjs",
     "check:absorbed-names": "node scripts/check-absorbed-names.mjs",
+    "check:control-glyph-tier": "node scripts/check-control-glyph-tier.mjs",
     "check:frame-overflow": "node scripts/check-frame-overflow.mjs",
     "check:frame-token-wins": "node scripts/check-frame-token-wins.mjs",
     "check:frame-token-scope": "node scripts/check-frame-token-scope.mjs"