@godxjp/ui 28.8.0 → 28.10.0

package/agent/vocabulary.json

@@ -0,0 +1,198 @@
+[
+  {
+    "concept": "Abstract controlled value.",
+    "name": "ValueProp<T = string>",
+    "usedBy": [
+      "CheckboxGroup",
+      "Upload",
+      "Cascader",
+      "TreeSelect",
+      "Tabs",
+      "SearchSelect"
+    ],
+    "values": [
+      "generic"
+    ]
+  },
+  {
+    "concept": "Abstract uncontrolled initial value.",
+    "name": "DefaultValueProp<T = string>",
+    "usedBy": [
+      "CheckboxGroup",
+      "Upload",
+      "Cascader",
+      "TreeSelect",
+      "Tabs"
+    ],
+    "values": [
+      "generic"
+    ]
+  },
+  {
+    "concept": "Callback for abstract value changes. DOM events continue to use onChange.",
+    "name": "OnValueChangeProp<T = string>",
+    "usedBy": [
+      "CheckboxGroup",
+      "Upload",
+      "Cascader",
+      "TreeSelect",
+      "Transfer",
+      "settings pickers"
+    ],
+    "values": [
+      "(value: T) => void"
+    ]
+  },
+  {
+    "concept": "Disclosure state.",
+    "name": "OpenProp / DefaultOpenProp / OnOpenChangeProp",
+    "usedBy": [
+      "Dialog",
+      "Sheet",
+      "Popover"
+    ],
+    "values": [
+      "boolean",
+      "(open: boolean) => void"
+    ]
+  },
+  {
+    "concept": "Shared public size names.",
+    "name": "SizeProp",
+    "notes": "Component-specific subsets must be documented. Old alias small is sm.",
+    "usedBy": [
+      "Button",
+      "Steps",
+      "Switch"
+    ],
+    "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg"
+    ]
+  },
+  {
+    "concept": "Semantic status/color intent.",
+    "name": "ToneProp",
+    "notes": "Status values belong in tone, not variant.",
+    "usedBy": [
+      "Badge",
+      "Alert"
+    ],
+    "values": [
+      "default",
+      "success",
+      "warning",
+      "destructive",
+      "info",
+      "muted",
+      "neutral"
+    ]
+  },
+  {
+    "concept": "Shared layout gap scale.",
+    "name": "GapProp",
+    "notes": "The single shared gap scale on Flex — the one layout primitive (default direction=\"row\"; use direction=\"col\" for vertical rhythm; these replaced the removed Stack/Inline).",
+    "usedBy": [
+      "Flex"
+    ],
+    "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+    ]
+  },
+  {
+    "concept": "Primary heading text.",
+    "name": "TitleProp",
+    "usedBy": [
+      "PageContainer",
+      "PageHeader",
+      "EmptyState",
+      "Dialog"
+    ],
+    "values": [
+      "React.ReactNode"
+    ]
+  },
+  {
+    "concept": "Page/subtree density.",
+    "name": "DensityProp",
+    "usedBy": [
+      "PageContainer"
+    ],
+    "values": [
+      "compact",
+      "default",
+      "comfortable"
+    ]
+  },
+  {
+    "concept": "Named whole-page SHELL contract for CenteredShell — the page measure, section rhythm, chrome flatness and hero heading tier, all owned by component tokens.",
+    "name": "CenteredShellPresetProp",
+    "notes": "public-landing is the PUBLIC marketing/product landing geometry: one 67.5rem measure shared by the header bar, the centred column and the footer, the section rhythm, flat elevation-free cards and the hero h1 tier. \"default\" emits NO data-preset at all, so the existing shell box is untouched. Pair with `Flex hideBelow`/`hideFrom` for header region visibility — a landing must never own a page-local media query or a max-width wrapper.",
+    "usedBy": [
+      "CenteredShell"
+    ],
+    "values": [
+      "default",
+      "public-landing"
+    ]
+  },
+  {
+    "concept": "Named collection contract for a table — how a dense collection behaves when its container gets narrow.",
+    "name": "TablePresetProp",
+    "notes": "action-collection swaps the desktop intrinsic column widths for table-layout: fixed + the token-owned column PRIORITY measures below `collapseBelow`, so a five-column approval queue keeps every column — including row actions — inside a 390px frame with no page-local CSS, no hidden column and no horizontal scroll. It changes the SIZING model only: no display change, no role rewriting, no card transformation, so table semantics and screen-reader navigation are identical at every width. ONE contract, two entry points: the `Table` primitive (mark `priority` on each TableHead/TableCell yourself) and the TanStack `DataTable` (mark `priority` on the ColumnDef; it stamps both cells for you, and additionally releases the surface's `--table-surface-min-inline-size` floor). Both read the same `--table-action-collection-*` tokens — there is no parallel DataTable family.",
+    "usedBy": [
+      "Table",
+      "DataTable"
+    ],
+    "values": [
+      "default",
+      "action-collection"
+    ]
+  },
+  {
+    "concept": "Relative importance of a table column, used by the action-collection preset to allocate the narrow-frame measure.",
+    "name": "TableColumnPriorityProp",
+    "notes": "On the raw `Table`, set it on BOTH the TableHead and the TableCell of a column; on `DataTable` set it once on the `ColumnDef` and it is stamped onto the <th> and every <td>. `actions` reserves its measure first so the row-action affordance can never be pushed outside the viewport; a column with no priority takes the remaining space (the free-text column).",
+    "usedBy": [
+      "Table",
+      "DataTable"
+    ],
+    "values": [
+      "primary",
+      "secondary",
+      "meta",
+      "actions"
+    ]
+  },
+  {
+    "concept": "Named hosted-identity FLOW MEASURE for AuthShell — the card max-width plus the desktop and mobile page gutters, all owned by component tokens.",
+    "name": "AuthShellPresetProp",
+    "notes": "Orthogonal to AuthShell's `variant` (which owns control density + heading size) and applied after it, so `variant=\"canonical\" preset=\"device-authorization\"` composes. device-authorization = 380px card / 5px inline gutter at 390; context-selection = 25rem card, edge-to-edge on mobile. Selecting a preset REPLACES any consumer-side --auth-shell-card-max-width override — a page-local width is the anti-pattern these presets exist to remove.",
+    "usedBy": [
+      "AuthShell"
+    ],
+    "values": [
+      "default",
+      "device-authorization",
+      "context-selection"
+    ]
+  },
+  {
+    "concept": "Avatar geometry — WHAT the identity mark represents: a person or an entity. Deliberately NOT the control ShapeProp (default|pill|sharp), whose `sharp` is --radius-sharp: 0 and cannot express the rounded rect an entity mark needs.",
+    "name": "AvatarShapeProp",
+    "notes": "circle (default, inert) = the round --radius-pill person avatar on the muted surface; square = the entity-header organization/service mark — a compact rounded square on the brand surface driven by --avatar-square-{radius,size,background,foreground}. Choose by meaning, never by look: a className=\"rounded-md bg-primary\" override on the call site is the anti-pattern this prop removes.",
+    "usedBy": [
+      "Avatar"
+    ],
+    "values": [
+      "circle",
+      "square"
+    ]
+  }
+]

package/dist/components/data-entry/input.js

@@ -13,7 +13,14 @@ import {
 } from "./control-appearance.js";
 import { resolveAllowClear } from "./control-surface.js";
 const inputBaseClass = [
-  "ui-control ui-input w-full rounded-[var(--control-radius)] transition-[color,box-shadow]",
+  // PER-EDGE RADIUS THROUGH A KNOB, because a joined control has to square one side (gh#841).
+  // `rounded-[var(--control-radius)]` is a UTILITY, and Tailwind v4 orders utilities after
+  // `@layer components` — so `.ui-input-group:has(…) .ui-input { border-start-start-radius: 0 }`
+  // resolved, was catalogued, and lost: the field kept 6px on its leading corners and drew a
+  // rounded edge exactly where the addon meets it. Fifth instance of the gh#366/#375/#819 trap.
+  // The repair is gh#366's: emit the value FROM a token as a utility, and let the components
+  // layer decide WHICH token — a custom property has no utility competing with it.
+  "ui-control ui-input w-full rounded-s-[var(--input-radius-start,var(--control-radius))] rounded-e-[var(--input-radius-end,var(--control-radius))] transition-[color,box-shadow]",
   "selection:bg-primary selection:text-primary-foreground",
   "placeholder:text-muted-foreground",
   "aria-invalid:border-destructive",

package/dist/components/layout/flex.d.ts

@@ -1,3 +1,3 @@
 import type { FlexProp } from "../../props/components/layout.prop.js";
-export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexMarkerProp, FlexProp, FlexProp as FlexProps, } from "../../props/components/layout.prop.js";
-export declare function Flex({ as: Element, direction, marker, grow, shrink, surface, bleed, reveal, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, hideBelowRaw, hideFromRaw, fill, width, className, style, children, ...props }: FlexProp): import("react").JSX.Element;
+export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexMarkerProp, FlexMeasureProp, FlexProp, FlexProp as FlexProps, } from "../../props/components/layout.prop.js";
+export declare function Flex({ as: Element, direction, marker, grow, shrink, surface, bleed, reveal, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, hideBelowRaw, hideFromRaw, fill, width, measure, className, style, children, ...props }: FlexProp): import("react").JSX.Element;

package/dist/components/layout/flex.js

@@ -33,6 +33,7 @@ function Flex({
   hideFromRaw,
   fill = false,
   width,
+  measure,
   className,
   style,
   children,
@@ -81,6 +82,7 @@ function Flex({
       "data-hide-from-raw": fromRaw,
       "data-fill": fill ? "" : void 0,
       "data-width-raw": width === void 0 ? void 0 : "",
+      "data-measure": measure,
       "data-gap-raw": gapRaw,
       className: cn("ui-flex", gapRaw === void 0 ? flexGapClass[gap] : void 0, className),
       "data-pad-raw": padRaw === void 0 ? void 0 : "",

package/dist/components/ui/tag-input.d.ts

@@ -40,6 +40,16 @@ export type TagInputProps = {
     maxTagCount?: MaxTagCountProp;
     /** The node standing in for what `maxTagCount` hid (antd `maxTagPlaceholder`). */
     maxTagPlaceholder?: MaxTagPlaceholderProp;
+    /**
+     * antd `maxTagTextLength` — cut each chip's TEXT to this many characters; the value is
+     * untouched and stays in `title` and in the remover's accessible name.
+     *
+     * It was declared on the public prop type and never destructured here, so a 71-character
+     * identifier set the chip's width and the chip set the row's, painting outside the control
+     * (gh#840). Declared and inert is the same defect as absent, with a worse failure mode:
+     * a consumer reads the prop, passes it, and watches nothing happen.
+     */
+    maxTagTextLength?: number;
     /** Render one chip yourself (antd `tagRender`) — receives the value and an `onClose` remover. */
     tagRender?: (props: {
         value: string;

package/dist/components/ui/tag-input.js

@@ -30,6 +30,7 @@ const TagInput = React.forwardRef(
     onClear,
     maxTagCount,
     maxTagPlaceholder,
+    maxTagTextLength,
     tagRender,
     tokenSeparators = [","]
   }, ref) => {
@@ -95,6 +96,12 @@ const TagInput = React.forwardRef(
           disabled && "ui-tag-input-disabled",
           className
         ),
+        onMouseDown: (event) => {
+          if (event.target !== event.currentTarget) return;
+          event.preventDefault();
+          const field = event.currentTarget.querySelector(".ui-tag-input-field");
+          field?.focus();
+        },
         children: [
           tags.length > 0 ? /* @__PURE__ */ jsxs("ul", { role: "list", className: "ui-tag-input-list", "data-slot": "tag-input-list", children: [
             visibleChips.map((chip) => /* @__PURE__ */ jsx(
@@ -110,7 +117,14 @@ const TagInput = React.forwardRef(
                   disabled: Boolean(disabled) || Boolean(readOnly),
                   onClose: () => removeAt(chip.index)
                 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  chip.value,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "ui-tag-input-chip-label",
+                      title: maxTagTextLength && chip.value.length > maxTagTextLength ? chip.value : void 0,
+                      children: maxTagTextLength && chip.value.length > maxTagTextLength ? `${chip.value.slice(0, maxTagTextLength)}\u2026` : chip.value
+                    }
+                  ),
                   !disabled && !readOnly ? /* @__PURE__ */ jsx(
                     "button",
                     {
@@ -125,7 +139,26 @@ const TagInput = React.forwardRef(
               },
               chip.value
             )),
-            omittedChips.length > 0 ? /* @__PURE__ */ jsx("li", { role: "listitem", className: "ui-tag-input-chip", "data-slot": "tag-input-overflow", children: overflow ?? t("dataEntry.selection.overflow", { count: omittedChips.length }) }) : null
+            omittedChips.length > 0 ? (
+              /* `+N` NAMES WHAT IT HIDES (gh#840). It used to be a bare `<li role="listitem">` with
+                 no title, no tabindex and no role — so a reader who saw `+1` had no way, by mouse
+                 or by keyboard, to learn which tag it stood for. antd's `maxTagPlaceholder` exists
+                 for exactly this; the default now carries the omitted values itself. */
+              /* @__PURE__ */ jsx(
+                "li",
+                {
+                  role: "listitem",
+                  className: "ui-tag-input-chip",
+                  "data-slot": "tag-input-overflow",
+                  tabIndex: 0,
+                  title: omittedChips.map((c) => c.value).join(", "),
+                  "aria-label": t("ui.tagInput.overflowLabel", {
+                    tags: omittedChips.map((c) => c.value).join(", ")
+                  }),
+                  children: overflow ?? t("dataEntry.selection.overflow", { count: omittedChips.length })
+                }
+              )
+            ) : null
           ] }) : null,
           /* @__PURE__ */ jsx(
             "input",

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

package/dist/i18n/messages/en.json

@@ -364,7 +364,8 @@
     "tagInput": {
       "inputLabel": "Add tags",
       "removeTag": "Remove {tag}",
-      "tagCount": "{count} tags"
+      "tagCount": "{count} tags",
+      "overflowLabel": "Hidden tags: {tags}"
     },
     "passwordInput": {
       "show": "Show password",
@@ -1173,5 +1174,26 @@
       "address": "Chiyoda, Tokyo",
       "rights": "Example Works. A fictional company, for documentation only."
     }
+  },
+  "showcase": {
+    "pagination": {
+      "recordCount": {
+        "one": "{count} record",
+        "other": "{count} records"
+      },
+      "loadMore": {
+        "one": "Load {count} more",
+        "other": "Load {count} more"
+      }
+    },
+    "flexMeasure": {
+      "title": "measure — full-bleed outside, a measured column inside",
+      "lead": "A band is a <section> carrying the edge-to-edge paint around one Flex that measure centres and caps at --page-measure-*. The gutter stays pad's job: measure adds none. narrow (42rem) and medium (48rem) are reading measures; wide (72rem) is the marketing one."
+    },
+    "tagInput": {
+      "longIdTitle": "Long identifiers and +N",
+      "ledgerLabel": "Ledger ID",
+      "ledgerHelper": "A 71-character identifier still stays inside the control"
+    }
   }
 }

package/dist/i18n/messages/ja.json

@@ -357,7 +357,8 @@
     "tagInput": {
       "inputLabel": "タグを追加",
       "removeTag": "{tag} を削除",
-      "tagCount": "{count} 件のタグ"
+      "tagCount": "{count} 件のタグ",
+      "overflowLabel": "非表示のタグ: {tags}"
     },
     "passwordInput": {
       "show": "パスワードを表示",
@@ -1155,5 +1156,24 @@
       "address": "東京都千代田区",
       "rights": "Example Works · ドキュメント用の架空の会社です。"
     }
+  },
+  "showcase": {
+    "pagination": {
+      "recordCount": {
+        "other": "{count} 件"
+      },
+      "loadMore": {
+        "other": "さらに {count} 件を読み込む"
+      }
+    },
+    "flexMeasure": {
+      "title": "measure · 全幅の外、測度の内",
+      "lead": "帯は塗りを持つ <section> で、その内側の一列を measure が中央寄せし --page-measure-* で止める。余白は pad の担当で measure は足さない。narrow（42rem）と medium（48rem）は読み物の測度、wide（72rem）はマーケティングの測度。"
+    },
+    "tagInput": {
+      "longIdTitle": "長い識別子と「+N」",
+      "ledgerLabel": "台帳ID",
+      "ledgerHelper": "71文字の識別子でも行からはみ出さない"
+    }
   }
 }

package/dist/i18n/messages/vi.json

@@ -358,7 +358,8 @@
     "tagInput": {
       "inputLabel": "Thêm thẻ",
       "removeTag": "Xóa {tag}",
-      "tagCount": "{count} thẻ"
+      "tagCount": "{count} thẻ",
+      "overflowLabel": "Thẻ đang ẩn: {tags}"
     },
     "passwordInput": {
       "show": "Hiện mật khẩu",
@@ -1156,5 +1157,24 @@
       "address": "Chiyoda, Tokyo",
       "rights": "Example Works. Một công ty hư cấu, chỉ dùng cho tài liệu."
     }
+  },
+  "showcase": {
+    "pagination": {
+      "recordCount": {
+        "other": "{count} bản ghi"
+      },
+      "loadMore": {
+        "other": "Tải thêm {count}"
+      }
+    },
+    "flexMeasure": {
+      "title": "measure — tràn viền bên ngoài, cột đo bên trong",
+      "lead": "Một dải là <section> mang phần nền tràn viền, bao quanh một Flex được measure canh giữa và chặn ở --page-measure-*. Lề vẫn do pad giữ: measure không thêm lề. narrow (42rem) và medium (48rem) là measure cho nội dung đọc; wide (72rem) là measure cho trang marketing."
+    },
+    "tagInput": {
+      "longIdTitle": "Định danh dài và +N",
+      "ledgerLabel": "Mã sổ cái",
+      "ledgerHelper": "Định danh 71 ký tự vẫn nằm trong khung"
+    }
   }
 }

package/dist/lib/variants.js

@@ -39,7 +39,10 @@ const flexGapClass = {
   6: "ui-flex-gap-6",
   8: "ui-flex-gap-8",
   10: "ui-flex-gap-10",
-  12: "ui-flex-gap-12"
+  12: "ui-flex-gap-12",
+  // Bậc BAND của trang marketing (gh#839) — xem GapStepProp.
+  20: "ui-flex-gap-20",
+  24: "ui-flex-gap-24"
 };
 function padStepToken(step) {
   if (step === "none" || step === 0) {

package/dist/props/components/data-entry.prop.d.ts

@@ -157,9 +157,28 @@ export type InputProp = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"
     prefix?: React.ReactNode;
     /** antd `suffix` — content pinned INSIDE the end of the field (%, 円, a hint glyph). */
     suffix?: React.ReactNode;
-    /** antd `addonBefore` — a segment welded OUTSIDE the start of the box (`https://`, a currency). */
+    /**
+     * antd `addonBefore` — a LABEL segment welded OUTSIDE the start of the box (`https://`, a
+     * currency code, a unit). For a glyph, use `prefix`: it sits INSIDE the field, so there is one
+     * box, one border and no seam to get wrong.
+     *
+     * KEPT, NOT DEPRECATED — the verdict gh#841 asked for, so the next reviewer does not re-litigate
+     * it. Verified in `ant-design@master`, not on the docs page: `components/input/Input.tsx` marks
+     * both addons `@deprecated Use Space.Compact instead` on the type AND fires a dev-time
+     * `devUseWarning('Input').deprecated(…)` for each, while still rendering them; both locale docs
+     * strike the rows through and the `addon` demo is flagged `debug`, i.e. hidden from the
+     * published page. So the deprecation is real, and it is a REFACTOR onto `Space.Compact` —
+     * a component this library does not have. Deprecating a prop whose replacement does not exist
+     * would leave the joined control with no supported spelling at all, and removing a public prop
+     * is breaking. `Input addonBefore` IS this library's joined control: it renders the
+     * `.ui-input-group` that squares the seam (gh#841). If a `Space`/compact primitive is ever
+     * ported, revisit this line — the antd steer is then followable and this becomes a migration.
+     */
     addonBefore?: React.ReactNode;
-    /** antd `addonAfter` — a segment welded OUTSIDE the end of the box (`.com`, a unit, a button). */
+    /**
+     * antd `addonAfter` — a segment welded OUTSIDE the end of the box (`.com`, a unit, a button).
+     * Deprecated upstream alongside `addonBefore`, and kept for the reason written there.
+     */
     addonAfter?: React.ReactNode;
     /** Character counter — antd `count`. */
     count?: ControlCountProp;

package/dist/props/components/layout.prop.d.ts

@@ -126,6 +126,16 @@ export type FlexDirectionProp = "row" | "col";
 export type FlexMarkerProp = "disc" | "decimal" | "none";
 export type FlexAlignProp = "start" | "center" | "end" | "stretch" | "baseline";
 export type FlexJustifyProp = "start" | "center" | "end" | "between" | "around" | "evenly";
+/**
+ * The bounded inline MEASURE of a centred column, named for the `--page-measure-*` token it reads
+ * — the same three words `PageContainer measure` uses, plus the marketing step that has no
+ * `PageContainer` branch (gh#839).
+ *
+ * It is the token family, not a new one: `narrow` (42rem) and `medium` (48rem) bracket
+ * Bringhurst's 45–75 character reading band, `wide` (72rem) is the MARKETING measure. Do not give
+ * a reading column `wide` — that rule is `--page-measure-wide`'s own, and it travels with the word.
+ */
+export type FlexMeasureProp = "narrow" | "medium" | "wide";
 /** @see Flex */
 export type FlexProp = React.HTMLAttributes<HTMLElement> & {
     /**
@@ -295,6 +305,38 @@ export type FlexProp = React.HTMLAttributes<HTMLElement> & {
      * call site đều ĐẾM ĐƯỢC, nên một kho đang trôi khỏi thang tự lộ ra bằng con số.
      */
     width?: WidthProp;
+    /**
+     * CENTRE this box and CAP it at a page measure — the inner half of "full-bleed outside, measured
+     * column inside" (gh#839).
+     *
+     * ## Why it is here and not on `PageContainer`
+     *
+     * `--page-measure-wide` shipped in 28.8.0 with no prop that reads it, and `PageContainer
+     * measure="wide"` was deliberately refused: a marketing page is a stack of full-bleed
+     * `<section>`s, and `PageContainer` owns page padding plus a header/toolbar/footer scaffold, so
+     * the pages that are the prop's proof could not have consumed it. That reasoning holds and is
+     * not reopened here. What it left behind is that NOTHING owned the centred inner column, and
+     * three unrelated pages each hand-wrote the same four declarations for it —
+     * `docs/showcase/marketing-page.tsx` as an inline `style` constant, `acme-website.tsx` as
+     * `.tx-shell` and `futurelastic-web.tsx` as `.fl-shell`. By `docs/TOKENS.md` a shape that
+     * appears in more than one place is tier 1.
+     *
+     * ## What it does, and what it deliberately does NOT
+     *
+     * `margin-inline: auto` + `inline-size: 100%` + `max-inline-size: var(--page-measure-{value})`.
+     * It does **not** add a gutter: the page inset is `pad={{ inline: 6 }}`, which already exists,
+     * and two owners for one padding is how a measure and a gutter drift apart. It is a MAX, so
+     * below the cap the box is fluid and nothing binds at 390px.
+     *
+     * An explicit `width` wins (it lands in the style attribute), which is the right order: a fixed
+     * column is a stronger statement than a cap.
+     *
+     * ## When NOT to reach for it
+     *
+     * Inside a `Card`, a `Dialog` or any surface that already owns its measure. This is PAGE
+     * geometry; a Flex that is a row of controls has no business carrying it.
+     */
+    measure?: FlexMeasureProp;
 };
 /** Container column counts; omitted steps inherit from the previous step. Base defaults to 1. */
 export type ResponsiveGridColumnsProp = number | {

package/dist/props/registry.d.ts

@@ -786,6 +786,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly FlexMeasureProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly FlexProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
@@ -821,6 +826,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "hideFrom";
             readonly local: true;
             readonly reason: "Inverse of hideBelow — keeps a compact-only region off the wide layout.";
+        }, {
+            readonly field: "measure";
+            readonly local: true;
+            readonly reason: 'The CENTRED, CAPPED column (narrow | medium | wide), backed by --page-measure-* — the inner half of "full-bleed outside, measured column inside" (gh#839). Same word and same three token steps as PageContainer `measure`, on the primitive a full-bleed <section> can actually use: PageContainer owns page padding and a header scaffold, which is why measure="wide" was refused there, and the refusal left the centred column with no owner at all — three showcases hand-wrote the same four declarations. It adds NO gutter (that is `pad`), and an explicit `width` wins over it.';
         }];
     };
     readonly ResponsiveGridFlowProp: {

package/dist/props/registry.js

@@ -795,6 +795,7 @@ const COMPONENT_PROP_REGISTRY = {
   FlexMarkerProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   FlexAlignProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   FlexJustifyProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
+  FlexMeasureProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   FlexProp: {
     group: "layout",
     file: "components/layout.prop.ts",
@@ -824,6 +825,11 @@ const COMPONENT_PROP_REGISTRY = {
         field: "hideFrom",
         local: true,
         reason: "Inverse of hideBelow \u2014 keeps a compact-only region off the wide layout."
+      },
+      {
+        field: "measure",
+        local: true,
+        reason: 'The CENTRED, CAPPED column (narrow | medium | wide), backed by --page-measure-* \u2014 the inner half of "full-bleed outside, measured column inside" (gh#839). Same word and same three token steps as PageContainer `measure`, on the primitive a full-bleed <section> can actually use: PageContainer owns page padding and a header scaffold, which is why measure="wide" was refused there, and the refusal left the centred column with no owner at all \u2014 three showcases hand-wrote the same four declarations. It adds NO gutter (that is `pad`), and an explicit `width` wins over it.'
       }
     ]
   },

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

@@ -84,7 +84,7 @@ export type GapNameProp = "none" | "xs" | "sm" | "md" | "lg" | "xl";
  * tên mang ý ĐỊNH ("cách nhau vừa phải, tuỳ trục"), số mang GIÁ TRỊ ("đúng
  * 12px"). Trộn hai nghĩa vào một thang là lý do thang cũ vừa thô vừa khó đoán.
  */
-export type GapStepProp = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+export type GapStepProp = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 20 | 24;
 export type GapProp = GapNameProp | GapStepProp;
 /**
  * Đệm TRONG của một primitive bố cục.