@godxjp/ui 30.6.0 → 30.7.1

package/README.md

@@ -160,9 +160,22 @@ The framework ships colors, the type scale, the wa-iro palette, and (opt-in) bun
 @source "../views";
 ```
 
-### Slim build — ship only the CSS you use
-
-`@godxjp/ui/styles` is the zero-config all-in-one (every component's CSS + bundled fonts). Managing fonts yourself (next/font, a system stack, an extension that must not ship font files)? Load the same layers without the faces:
+### Where the CSS weight actually is — the font faces, not the components
+
+`@godxjp/ui/styles` is the zero-config all-in-one: every component's layers **plus 729 `@font-face`
+declarations** for the bundled CJK faces. Those declarations are render-blocking CSS on every page,
+separate from the font FILES (which load lazily, per glyph range). Measured on a fresh Vite 8 +
+Tailwind v4 app using 15 components (gh#971):
+
+| entry                    | CSS emitted | gzip       |
+| ------------------------ | ----------- | ---------- |
+| `@godxjp/ui/styles`      | 1,303,803 B | **367 KB** |
+| `@godxjp/ui/styles/core` | 581,210 B   | **86 KB**  |
+
+So if CSS weight matters, **the one change that moves it is the import line** — 77% of it is the face
+declarations. `core` is not a per-component slice: it still carries every component's layers (about
+64 KB gzip for all ~165), it only drops the faces. Load fonts another way (next/font, a system stack,
+your own `@font-face`) and take the same layers without them:
 
 ```css
 @import "@godxjp/ui/styles/core"; /* every component layer, no @font-face */

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` 30.6.0.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 30.7.1.** 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.
@@ -47,7 +47,7 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
    task is a task** — "build a settings page", "confirm a destructive delete", "a list page with
    filters" — start HERE, not at the components. Then fetch `patterns/<name>.json` for complete,
    copy-paste-ready code. A component index answers "does X exist"; it cannot answer "build Y".
-1. `components-index.json` — 46 KB, all 173 components as name + group +
+1. `components-index.json` — 46 KB, all 175 components as name + group +
    tagline. Read this when you already know the SHAPE you need. Each entry may carry `absorbed`:
    names that **do not exist** and map to it — `Combobox`, `Autocomplete`, `CountrySelect` and
    `SearchSelect` are all `Select`. If you are about to hand-roll something, search this field

package/agent/components/RecordPicker.json

@@ -33,7 +33,7 @@
       "type": "(SearchSelectOptionProp | SelectOptionGroupProp)[]"
     },
     {
-      "description": "Server fetcher, debounced, and it runs on BOTH branches — a picker whose `count` is small still fetches from the server rather than showing an empty dropdown (gh#942). `filters` carries YOUR OWN vocabulary back (the `name` of each declared filter), so the server reads the keys it already understands instead of a shape this component invented; the dropdown branch draws no filters, so it passes an empty object. Return `nextCursor` to page: the dialog shows a Load more button and APPENDS, so nothing the user already scrolled past is lost.",
+      "description": "Server fetcher, debounced, and it runs on BOTH branches — a picker whose `count` is small still fetches from the server rather than showing an empty dropdown (gh#942). `filters` carries YOUR OWN vocabulary back (the `name` of each declared filter), so the server reads the keys it already understands instead of a shape this component invented; the dropdown branch draws no filters, so it passes an empty object. Return `nextCursor` to page: the dialog shows a Load more button and APPENDS, so nothing the user already scrolled past is lost. `cursor` is EXACTLY the `nextCursor` your previous response returned for the same `query` (undefined on the first page) — the same in all three shapes, dropdown included; an offset or an opaque token both work. Before gh#964 the dropdown sent the page NUMBER instead, so an offset server read \"2\" as offset 2 and returned duplicate rows; if you worked around that, remove the workaround.",
       "name": "loadOptions",
       "type": "(params: { query: string; filters: Record<string, string>; cursor?: string }) => Promise<{ options: SearchSelectOptionProp[]; count?: number; nextCursor?: string }>"
     },

package/agent/components/Skeleton.json

@@ -38,10 +38,6 @@
     31
   ],
   "storyPath": "feedback/Skeleton.stories.tsx",
-  "subParts": [
-    "SkeletonDetail",
-    "SkeletonStat"
-  ],
   "tagline": "Base pulsing skeleton block, and the namespace the shaped presets hang off (Skeleton.Avatar / .Button / .Input / .Node / .Image / .Article).",
   "usage": [
     "DO use Skeleton for a custom block when SkeletonRows/Table/Stat/Article do not match the final layout.",

package/agent/components/SkeletonDetail.json

@@ -0,0 +1,31 @@
+{
+  "example": "import { SkeletonDetail } from \"@godxjp/ui/feedback\";\n\n<SkeletonDetail />",
+  "group": "feedback",
+  "importPath": "@godxjp/ui/feedback",
+  "name": "SkeletonDetail",
+  "props": [],
+  "related": [
+    "SkeletonStat — the same propless treatment for a KPI tile.",
+    "SkeletonRows — flat list lines, not label/value pairs.",
+    "SkeletonTable — tabular placeholder with a header band.",
+    "Skeleton — the bare block this preset is built from; reach for it when you need a shape this one does not draw.",
+    "Descriptions — the component this placeholder is standing in for."
+  ],
+  "rules": [
+    3,
+    31
+  ],
+  "storyPath": "feedback/Skeleton.stories.tsx",
+  "tagline": "Fixed-shape placeholder for a RECORD page — title, subtitle, then a bordered box of six label/value pairs. Takes no props: the shape IS the contract, so every detail screen loads identically.",
+  "usage": [
+    "DO use it while a single record's data resolves — a detail page, a drawer showing one entity, a Descriptions block.",
+    "DO leave it propless. It has no `rows` knob on purpose: a record page that loads with a different number of lines each time reads as a layout bug, and `Skeleton` is there for a bespoke shape.",
+    "DON'T use it for a list or a table — SkeletonRows draws flat lines, SkeletonTable draws a header band.",
+    "Import from `@godxjp/ui/feedback` (canonical). `@godxjp/ui/admin` re-exports it for admin pages."
+  ],
+  "useCases": [
+    "Detail page body before the record arrives",
+    "Drawer or sheet opened on a row while its full entity loads",
+    "Descriptions block placeholder"
+  ]
+}

package/agent/components/SkeletonStat.json

@@ -0,0 +1,30 @@
+{
+  "example": "import { SkeletonStat } from \"@godxjp/ui/feedback\";\nimport { ResponsiveGrid } from \"@godxjp/ui/layout\";\n\n<ResponsiveGrid columns={{ base: 1, sm: 2, lg: 4 }} gap=\"md\">\n  {Array.from({ length: 4 }).map((_, i) => (\n    <SkeletonStat key={i} />\n  ))}\n</ResponsiveGrid>",
+  "group": "feedback",
+  "importPath": "@godxjp/ui/feedback",
+  "name": "SkeletonStat",
+  "props": [],
+  "related": [
+    "StatCard — the loaded component this stands in for; match the grid, not just the size.",
+    "SkeletonDetail — the same propless treatment for a record page.",
+    "SkeletonRows — flat list lines.",
+    "Skeleton — the bare block this preset is built from."
+  ],
+  "rules": [
+    3,
+    31
+  ],
+  "storyPath": "feedback/Skeleton.stories.tsx",
+  "tagline": "Fixed-shape placeholder for ONE KPI tile — label, big value, caption. Takes no props, so a row of tiles loads at a uniform height and nothing reflows when the numbers arrive.",
+  "usage": [
+    "DO render one per StatCard while the figures load, inside the same grid the loaded tiles use.",
+    "DO leave it propless — it mirrors StatCard's three-line rhythm exactly, which is what stops the row jumping on hydration.",
+    "DON'T wrap it in a Card yourself if the loaded state uses StatCard; put it where the StatCard goes so the surface is identical.",
+    "Import from `@godxjp/ui/feedback` (canonical). `@godxjp/ui/admin` re-exports it for admin pages."
+  ],
+  "useCases": [
+    "Dashboard KPI row before the metrics query resolves",
+    "A single figure on a detail page loading separately from the record",
+    "Placeholder inside a ResponsiveGrid of StatCards"
+  ]
+}

package/agent/components-index.json

@@ -607,6 +607,16 @@
     "name": "Skeleton",
     "tagline": "Base pulsing skeleton block, and the namespace the shaped presets hang off (Skeleton.Avatar / .Button / .Input / .Node / .Image / .Article)."
   },
+  {
+    "group": "feedback",
+    "name": "SkeletonDetail",
+    "tagline": "Fixed-shape placeholder for a RECORD page — title, subtitle, then a bordered box of six label/value pairs. Takes no props: the shape IS the contract, so every detail screen loads identically."
+  },
+  {
+    "group": "feedback",
+    "name": "SkeletonStat",
+    "tagline": "Fixed-shape placeholder for ONE KPI tile — label, big value, caption. Takes no props, so a row of tiles loads at a uniform height and nothing reflows when the numbers arrive."
+  },
   {
     "group": "feedback",
     "name": "SkeletonArticle",

package/agent/components.json

@@ -6019,7 +6019,7 @@
         "type": "(SearchSelectOptionProp | SelectOptionGroupProp)[]"
       },
       {
-        "description": "Server fetcher, debounced, and it runs on BOTH branches — a picker whose `count` is small still fetches from the server rather than showing an empty dropdown (gh#942). `filters` carries YOUR OWN vocabulary back (the `name` of each declared filter), so the server reads the keys it already understands instead of a shape this component invented; the dropdown branch draws no filters, so it passes an empty object. Return `nextCursor` to page: the dialog shows a Load more button and APPENDS, so nothing the user already scrolled past is lost.",
+        "description": "Server fetcher, debounced, and it runs on BOTH branches — a picker whose `count` is small still fetches from the server rather than showing an empty dropdown (gh#942). `filters` carries YOUR OWN vocabulary back (the `name` of each declared filter), so the server reads the keys it already understands instead of a shape this component invented; the dropdown branch draws no filters, so it passes an empty object. Return `nextCursor` to page: the dialog shows a Load more button and APPENDS, so nothing the user already scrolled past is lost. `cursor` is EXACTLY the `nextCursor` your previous response returned for the same `query` (undefined on the first page) — the same in all three shapes, dropdown included; an offset or an opaque token both work. Before gh#964 the dropdown sent the page NUMBER instead, so an offset server read \"2\" as offset 2 and returned duplicate rows; if you worked around that, remove the workaround.",
         "name": "loadOptions",
         "type": "(params: { query: string; filters: Record<string, string>; cursor?: string }) => Promise<{ options: SearchSelectOptionProp[]; count?: number; nextCursor?: string }>"
       },
@@ -11480,10 +11480,6 @@
       31
     ],
     "storyPath": "feedback/Skeleton.stories.tsx",
-    "subParts": [
-      "SkeletonDetail",
-      "SkeletonStat"
-    ],
     "tagline": "Base pulsing skeleton block, and the namespace the shaped presets hang off (Skeleton.Avatar / .Button / .Input / .Node / .Image / .Article).",
     "usage": [
       "DO use Skeleton for a custom block when SkeletonRows/Table/Stat/Article do not match the final layout.",
@@ -11497,6 +11493,67 @@
       "Inline metadata placeholder"
     ]
   },
+  {
+    "example": "import { SkeletonDetail } from \"@godxjp/ui/feedback\";\n\n<SkeletonDetail />",
+    "group": "feedback",
+    "importPath": "@godxjp/ui/feedback",
+    "name": "SkeletonDetail",
+    "props": [],
+    "related": [
+      "SkeletonStat — the same propless treatment for a KPI tile.",
+      "SkeletonRows — flat list lines, not label/value pairs.",
+      "SkeletonTable — tabular placeholder with a header band.",
+      "Skeleton — the bare block this preset is built from; reach for it when you need a shape this one does not draw.",
+      "Descriptions — the component this placeholder is standing in for."
+    ],
+    "rules": [
+      3,
+      31
+    ],
+    "storyPath": "feedback/Skeleton.stories.tsx",
+    "tagline": "Fixed-shape placeholder for a RECORD page — title, subtitle, then a bordered box of six label/value pairs. Takes no props: the shape IS the contract, so every detail screen loads identically.",
+    "usage": [
+      "DO use it while a single record's data resolves — a detail page, a drawer showing one entity, a Descriptions block.",
+      "DO leave it propless. It has no `rows` knob on purpose: a record page that loads with a different number of lines each time reads as a layout bug, and `Skeleton` is there for a bespoke shape.",
+      "DON'T use it for a list or a table — SkeletonRows draws flat lines, SkeletonTable draws a header band.",
+      "Import from `@godxjp/ui/feedback` (canonical). `@godxjp/ui/admin` re-exports it for admin pages."
+    ],
+    "useCases": [
+      "Detail page body before the record arrives",
+      "Drawer or sheet opened on a row while its full entity loads",
+      "Descriptions block placeholder"
+    ]
+  },
+  {
+    "example": "import { SkeletonStat } from \"@godxjp/ui/feedback\";\nimport { ResponsiveGrid } from \"@godxjp/ui/layout\";\n\n<ResponsiveGrid columns={{ base: 1, sm: 2, lg: 4 }} gap=\"md\">\n  {Array.from({ length: 4 }).map((_, i) => (\n    <SkeletonStat key={i} />\n  ))}\n</ResponsiveGrid>",
+    "group": "feedback",
+    "importPath": "@godxjp/ui/feedback",
+    "name": "SkeletonStat",
+    "props": [],
+    "related": [
+      "StatCard — the loaded component this stands in for; match the grid, not just the size.",
+      "SkeletonDetail — the same propless treatment for a record page.",
+      "SkeletonRows — flat list lines.",
+      "Skeleton — the bare block this preset is built from."
+    ],
+    "rules": [
+      3,
+      31
+    ],
+    "storyPath": "feedback/Skeleton.stories.tsx",
+    "tagline": "Fixed-shape placeholder for ONE KPI tile — label, big value, caption. Takes no props, so a row of tiles loads at a uniform height and nothing reflows when the numbers arrive.",
+    "usage": [
+      "DO render one per StatCard while the figures load, inside the same grid the loaded tiles use.",
+      "DO leave it propless — it mirrors StatCard's three-line rhythm exactly, which is what stops the row jumping on hydration.",
+      "DON'T wrap it in a Card yourself if the loaded state uses StatCard; put it where the StatCard goes so the surface is identical.",
+      "Import from `@godxjp/ui/feedback` (canonical). `@godxjp/ui/admin` re-exports it for admin pages."
+    ],
+    "useCases": [
+      "Dashboard KPI row before the metrics query resolves",
+      "A single figure on a detail page loading separately from the record",
+      "Placeholder inside a ResponsiveGrid of StatCards"
+    ]
+  },
   {
     "example": "import { SkeletonArticle } from \"@godxjp/ui/feedback\";\n\n<SkeletonArticle avatar active paragraph={{ rows: 3 }} />",
     "group": "feedback",

package/agent/index.json

@@ -1,7 +1,7 @@
 {
   "counts": {
     "anti-ai-tells": 26,
-    "components": 173,
+    "components": 175,
     "patterns": 21,
     "rules": 50,
     "tokens": 2074,
@@ -10,7 +10,7 @@
   "files": [
     {
       "file": "components-index.json",
-      "note": "46 KB — name + group + tagline for all 173. FETCH THIS FIRST, then fetch only the components you chose.",
+      "note": "46 KB — name + group + tagline for all 175. FETCH THIS FIRST, then fetch only the components you chose.",
       "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json"
     },
     {
@@ -48,7 +48,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/v30.6.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v30.7.1/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",
@@ -62,5 +62,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": "30.6.0"
+  "version": "30.7.1"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 173 components, 2074 design tokens,
-> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 30.6.0.
+> A Japanese-enterprise React design system: 175 components, 2074 design tokens,
+> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 30.7.1.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@30.6.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@30.7.1`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -15,7 +15,7 @@ that can only fetch URLs.
 ## Catalog
 
 - [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 21 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
-- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 46 KB — all 173 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
+- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 46 KB — all 175 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/&lt;Name&gt;.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–34 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
 - [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.2 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
 - [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 103 `semantic` roles, 1760 `component` knobs.
@@ -26,7 +26,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/v30.6.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v30.7.1/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/agent/rules.json

@@ -195,7 +195,7 @@
     "title": "Long text columns get an explicit width"
   },
   {
-    "body": "Author and verify every page at 320–390px FIRST. Page sections are spaced by `PageContainer` itself (`--page-body-gap` between its direct children). Inside a section spacing comes only from `Flex` `gap` (vertical rhythm = `Flex direction=\"col\"`, control rows = the default `direction=\"row\"`) + `ResponsiveGrid columns={2|3|4}` (which collapse to a single column on narrow screens) — never raw `p-*` / `gap-*` / `space-*` utilities for page layout (the static audit rejects them). Styles are loaded whole: `@godxjp/ui/styles` or `styles/core`, never a hand-picked set of layers.",
+    "body": "Author and verify every page at 320–390px FIRST. Page sections are spaced by `PageContainer` itself (`--page-body-gap` between its direct children). Inside a section spacing comes only from `Flex` `gap` (vertical rhythm = `Flex direction=\"col\"`, control rows = the default `direction=\"row\"`) + `ResponsiveGrid columns={2|3|4}` (which collapse to a single column on narrow screens) — never raw `p-*` / `gap-*` / `space-*` utilities for page layout (the static audit rejects them). Styles are loaded whole: `@godxjp/ui/styles` or `styles/core`, never a hand-picked set of layers. They differ ONLY in the 729 bundled CJK `@font-face` declarations, and that difference is most of the CSS: 367 KB vs 86 KB gzip for a 15-component app (gh#971) — pick `styles/core` whenever the app loads fonts another way.",
     "number": 40,
     "title": "Pages are mobile-first"
   },

package/dist/app/app-provider.js

@@ -27,7 +27,7 @@ import {
   PREFERS_DARK_SCHEME_QUERY
 } from "./theme-axes.js";
 import { resolveDefaultTimeFormat } from "./time-format-labels.js";
-import { resolveDefaultTimezone } from "./timezones.js";
+import { resolveDefaultTimezone, resolveHydrationSafeTimezone } from "./timezones.js";
 import {
   APP_REQUEST_HEADER_DATE_FORMAT,
   APP_REQUEST_HEADER_LOCALE,
@@ -53,10 +53,6 @@ function buildRequestHeaders(locale, timezone, timeFormat, dateFormat) {
     [APP_REQUEST_HEADER_DATE_FORMAT]: dateFormat
   };
 }
-function resolveHydrationSafeTimezone(defaultTimezone, systemTimezone) {
-  if (defaultTimezone === "browser") return systemTimezone ?? "UTC";
-  return resolveDefaultTimezone(defaultTimezone, systemTimezone);
-}
 function AppProvider({
   children,
   defaultLocale = "vi",

package/dist/app/timezones.d.ts

@@ -24,5 +24,20 @@ export declare function getTimezoneOffsetLabel(timezone: string, locale?: AppLoc
 export declare function formatTimezoneDisplayLabel(timezone: string, locale?: AppLocale): string;
 export declare function getTimezoneLabel(timezone: string, locale: AppLocale, fallbackLocale?: AppLocale): string;
 export declare function resolveDefaultTimezone(defaultTimezone: "browser" | "system" | (string & {}), systemTimezone?: string): string;
+/**
+ * The timezone to use BEFORE the browser's is known — the first render, and anything that formats
+ * before AppProvider has synced (gh#968).
+ *
+ * `"browser"` answers UTC here, not the browser's zone: a server cannot know the browser's zone, so
+ * resolving it on the first render would render one time on the server and another on the client.
+ * AppProvider settles to the real browser zone in an effect afterwards.
+ *
+ * It lives here, not inside AppProvider, so the module-level datetime fallback (`lib/datetime/sync`)
+ * can call the SAME function. Before gh#968 that fallback hard-coded `Asia/Ho_Chi_Minh` while this
+ * answered UTC — two different answers to "nothing is configured yet". The Vietnamese one was the
+ * worse of the two because it looks right: a JST attendance timestamp read 2 hours off, and nothing
+ * about `01/05/2026 14:30` says so. UTC is at least visibly not the user's local time.
+ */
+export declare function resolveHydrationSafeTimezone(defaultTimezone: "browser" | "system" | (string & {}), systemTimezone?: string): string;
 /** Vitest only — reset cached IANA list between cases. */
 export declare function resetIanaTimezoneCacheForTests(): void;

package/dist/app/timezones.js

@@ -141,6 +141,10 @@ function resolveDefaultTimezone(defaultTimezone, systemTimezone) {
   if (defaultTimezone === "system") return systemTimezone ?? "UTC";
   return defaultTimezone;
 }
+function resolveHydrationSafeTimezone(defaultTimezone, systemTimezone) {
+  if (defaultTimezone === "browser") return systemTimezone ?? "UTC";
+  return resolveDefaultTimezone(defaultTimezone, systemTimezone);
+}
 function resetIanaTimezoneCacheForTests() {
   cachedAllTimezones = null;
   cachedTimezoneSet = null;
@@ -157,6 +161,7 @@ export {
   isValidIanaTimezone,
   resetIanaTimezoneCacheForTests,
   resolveDefaultTimezone,
+  resolveHydrationSafeTimezone,
   resolveTimezoneForIntl,
   resolveTimezonePickerOptions
 };

package/dist/components/data-entry/record-picker.d.ts

@@ -33,6 +33,32 @@ export type { RecordPickerProp, RecordPickerProp as RecordPickerProps };
  * hands over the labels it already has, and it is merged ahead of whatever loads later, so a chip
  * never renders as a raw id and never disappears when the query changes.
  */
+/**
+ * Adapt RecordPicker's cursor contract to Select's page-numbered loader (gh#964).
+ *
+ * `loadOptions` is typed to receive the `nextCursor` the server returned last time — an offset, an
+ * opaque token, whatever the server minted. The inline and dialog shapes pass it straight back.
+ * This adapter used to pass `String(page)` instead, so page 2 reached the server as "2" and a
+ * consumer implementing the type as written read it as offset 2: duplicated and missing rows, with
+ * no error. The server's `nextCursor` was used only as a has-more flag.
+ *
+ * Select asks for pages by number, so the adapter remembers, per query, which cursor fetches which
+ * page: page 1 has none, and page N+1 is whatever page N's response said. A new query starts its
+ * own chain, so one query's cursor can never be sent with another's text — a user typing,
+ * deleting and retyping can make Select ask for page 2 of an earlier query after a later one began.
+ *
+ * The chains live in this closure, so they are discarded whenever `loadOptions` itself changes
+ * (the caller memoises on it): a cursor minted by one data source is meaningless to the next.
+ *
+ * @internal Exported for tests only; the package barrel re-exports RecordPicker by name, not this.
+ */
+export declare function selectLoadOptionsFor(loadOptions: RecordPickerProp["loadOptions"]): (({ query, page }: {
+    query: string;
+    page: number;
+}) => Promise<{
+    options: SearchSelectOptionProp[];
+    hasMore: boolean;
+}>) | undefined;
 export declare const RecordPicker: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "defaultValue" | "onChange" | "value"> & {
     mode?: "single" | "multiple";
     shape?: "auto" | "inline";

package/dist/components/data-entry/record-picker.js

@@ -21,6 +21,19 @@ import {
 import { Command, CommandGroup } from "./command.js";
 import { Input } from "./input.js";
 import { Select } from "./select.js";
+function selectLoadOptionsFor(loadOptions) {
+  if (!loadOptions) return void 0;
+  const chains = /* @__PURE__ */ new Map();
+  return async ({ query, page }) => {
+    if (page === 1) chains.set(query, /* @__PURE__ */ new Map());
+    const chain = chains.get(query);
+    const cursor = page === 1 ? void 0 : chain?.get(page);
+    if (page > 1 && cursor === void 0) return { options: [], hasMore: false };
+    const r = await loadOptions({ query, filters: {}, cursor });
+    if (r.nextCursor !== void 0) chains.get(query)?.set(page + 1, r.nextCursor);
+    return { options: r.options, hasMore: r.nextCursor !== void 0 };
+  };
+}
 const RecordPicker = React.forwardRef(
   function RecordPicker2({
     mode = "single",
@@ -57,17 +70,7 @@ const RecordPicker = React.forwardRef(
       },
       [controlled, isMultiple, onValueChange]
     );
-    const selectLoadOptions = React.useMemo(
-      () => loadOptions ? async ({ query, page }) => {
-        const r = await loadOptions({
-          query,
-          filters: {},
-          cursor: page > 1 ? String(page) : void 0
-        });
-        return { options: r.options, hasMore: r.nextCursor !== void 0 };
-      } : void 0,
-      [loadOptions]
-    );
+    const selectLoadOptions = React.useMemo(() => selectLoadOptionsFor(loadOptions), [loadOptions]);
     const staticOptions = React.useMemo(
       () => options ? normalizeSelectOptions(options) : [],
       [options]
@@ -542,5 +545,6 @@ const DialogPicker = React.forwardRef(function DialogPicker2({
   ] });
 });
 export {
-  RecordPicker
+  RecordPicker,
+  selectLoadOptionsFor
 };

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

package/dist/lib/datetime/sync.d.ts

@@ -8,7 +8,7 @@ export type DatetimeContext = {
     dateFormat: AppDateFormat;
 };
 /** Sync module-level datetime prefs from AppProvider (mirrors syncI18nLocale). */
-export declare function syncDatetimeContext(partial: Pick<DatetimeContext, "locale" | "timezone" | "timeFormat" | "dateFormat"> & {
+export declare function syncDatetimeContext(prefs: Pick<DatetimeContext, "locale" | "timezone" | "timeFormat" | "dateFormat"> & {
     dateFnsLocale?: Locale;
 }): void;
 export declare function getDatetimeContext(): Readonly<DatetimeContext>;

package/dist/lib/datetime/sync.js

@@ -1,22 +1,23 @@
 import { getDateFnsLocale } from "../../app/locales.js";
 import { resolveDefaultDateFormat } from "../../app/date-format-labels.js";
+import { resolveHydrationSafeTimezone } from "../../app/timezones.js";
 const DEFAULT_LOCALE = "vi";
 const defaultContext = () => ({
   locale: DEFAULT_LOCALE,
   dateFnsLocale: getDateFnsLocale(DEFAULT_LOCALE),
-  timezone: "Asia/Ho_Chi_Minh",
+  timezone: resolveHydrationSafeTimezone("browser"),
   timeFormat: "24h",
   dateFormat: resolveDefaultDateFormat(DEFAULT_LOCALE)
 });
 let syncedContext = defaultContext();
 let liveRelativeFormattingEnabled = true;
-function syncDatetimeContext(partial) {
+function syncDatetimeContext(prefs) {
   syncedContext = {
-    locale: partial.locale,
-    timezone: partial.timezone,
-    timeFormat: partial.timeFormat,
-    dateFormat: partial.dateFormat,
-    dateFnsLocale: partial.dateFnsLocale ?? getDateFnsLocale(partial.locale)
+    locale: prefs.locale,
+    timezone: prefs.timezone,
+    timeFormat: prefs.timeFormat,
+    dateFormat: prefs.dateFormat,
+    dateFnsLocale: prefs.dateFnsLocale ?? getDateFnsLocale(prefs.locale)
   };
 }
 function getDatetimeContext() {

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

@@ -1170,7 +1170,15 @@ export type RecordPickerProp = Omit<React.ButtonHTMLAttributes<HTMLButtonElement
     onValueChange?: (value: string | string[] | null) => void;
     /** Static rows, client-filtered. Provide this OR `loadOptions`. */
     options?: (SearchSelectOptionProp | SelectOptionGroupProp)[];
-    /** Server fetcher. `filters` carries the consumer's own filter vocabulary. */
+    /**
+     * Server fetcher. `filters` carries the consumer's own filter vocabulary.
+     *
+     * `cursor` is EXACTLY the `nextCursor` your previous response returned for the same `query` —
+     * an offset, an opaque token, whatever your server minted — and `undefined` for the first page.
+     * The same in every shape: under `threshold` (dropdown), `inline`, and the dialog. Return no
+     * `nextCursor` when the list is finished; that is what ends paging. (Before gh#964 the dropdown
+     * sent the page NUMBER here instead, so an offset-based server read "2" as offset 2.)
+     */
     loadOptions?: (params: {
         query: string;
         filters: Record<string, string>;

package/dist/styles/navigation-layout.css

@@ -52,6 +52,16 @@
     border-width: var(--stroke-hairline);
   }
 
+  [data-slot="tabs-list"][data-variant="line"] {
+    position: relative;
+    z-index: 1;
+  }
+
+  [data-slot="tabs"]:has([data-slot="tabs-list"][data-variant="line"])
+    > :is([data-slot="tabs-panel"], [data-slot="tabs-content"]) {
+    isolation: isolate;
+  }
+
   [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
     content: "";
     position: absolute;

package/dist/styles/table-layout.css

@@ -60,7 +60,8 @@
   }
 
   .ui-table-row[data-tone] {
-    background-image: linear-gradient(
+
+    --table-row-tone-layer: linear-gradient(
       var(
         --table-row-tone-surface,
         hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
@@ -70,6 +71,7 @@
         hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
       )
     );
+    background-image: var(--table-row-tone-layer);
   }
 
   :where([data-slot="table"] > tbody > tr:nth-child(even of :not([data-expanded-row]))) {
@@ -440,48 +442,60 @@
     box-shadow: 6px 0 6px -5px hsl(var(--foreground) / 0.12);
   }
 
+  :where(.ui-table-row[data-tone]) > :is(.ui-data-table-pin-end, .ui-data-table-pin-start) {
+    background-image: var(--table-row-tone-layer);
+  }
+
   :where([data-slot="table"] > tbody > tr:nth-child(even of :not([data-expanded-row])))
     > :is(.ui-data-table-pin-end, .ui-data-table-pin-start) {
-    background-image: linear-gradient(
-      color-mix(
-        in srgb,
-        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
-        transparent
-      ),
-      color-mix(
-        in srgb,
-        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
-        transparent
-      )
-    );
+    background-image:
+      var(--table-row-tone-layer, none),
+      linear-gradient(
+        color-mix(
+          in srgb,
+          var(--table-row-striped-background, hsl(var(--muted) / 0.8))
+            var(--table-row-striped-alpha),
+          transparent
+        ),
+        color-mix(
+          in srgb,
+          var(--table-row-striped-background, hsl(var(--muted) / 0.8))
+            var(--table-row-striped-alpha),
+          transparent
+        )
+      );
   }
 
   .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-end,
   .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-start {
-    background-image: linear-gradient(
-      var(
-        --table-row-hover-background,
-        hsl(var(--accent) / var(--table-row-hover-background-alpha, 0.7))
-      ),
-      var(
-        --table-row-hover-background,
-        hsl(var(--accent) / var(--table-row-hover-background-alpha, 0.7))
-      )
-    );
+    background-image:
+      var(--table-row-tone-layer, none),
+      linear-gradient(
+        var(
+          --table-row-hover-background,
+          hsl(var(--accent) / var(--table-row-hover-background-alpha, 0.7))
+        ),
+        var(
+          --table-row-hover-background,
+          hsl(var(--accent) / var(--table-row-hover-background-alpha, 0.7))
+        )
+      );
   }
 
   .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-end,
   .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-start {
-    background-image: linear-gradient(
-      var(
-        --table-row-selected-background,
-        hsl(var(--muted) / var(--table-row-selected-background-alpha, 0.3))
-      ),
-      var(
-        --table-row-selected-background,
-        hsl(var(--muted) / var(--table-row-selected-background-alpha, 0.3))
-      )
-    );
+    background-image:
+      var(--table-row-tone-layer, none),
+      linear-gradient(
+        var(
+          --table-row-selected-background,
+          hsl(var(--muted) / var(--table-row-selected-background-alpha, 0.3))
+        ),
+        var(
+          --table-row-selected-background,
+          hsl(var(--muted) / var(--table-row-selected-background-alpha, 0.3))
+        )
+      );
   }
 
   .ui-data-table-ellipsis {

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **173**
-- With ≥1 frame: **152** · zero-frame: **21**
+- Public components: **175**
+- With ≥1 frame: **152** · zero-frame: **23**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -22,6 +22,8 @@
 - [ ] `ServiceCatalogCta`
 - [ ] `SkeletonRows`
 - [ ] `OverlayPortalProvider`
+- [ ] `SkeletonDetail`
+- [ ] `SkeletonStat`
 - [ ] `SkeletonArticle`
 - [ ] `SkeletonAvatar`
 - [ ] `SkeletonButton`
@@ -154,6 +156,8 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Avatar | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | Separator | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Skeleton | ✓ | N/A | · | N/A | · | · | · | · | · | · |
+| SkeletonDetail | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
+| SkeletonStat | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | SkeletonArticle | **✗** | N/A | · | N/A | · | · | · | · | · | · |
 | SkeletonAvatar | **✗** | ✓ | N/A | N/A | · | · | · | · | · | · |
 | SkeletonButton | **✗** | ✓ | N/A | N/A | · | · | · | · | · | · |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "30.6.0",
-  "godxUiMcp": "30.6.0",
+  "version": "30.7.1",
+  "godxUiMcp": "30.7.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",