@godxjp/ui 19.3.1 → 19.4.0

package/dist/styles/shell-layout.css

@@ -112,9 +112,19 @@
   .ui-auth-shell-bar {
     display: flex;
     align-items: center;
+
+    flex-wrap: wrap;
+    gap: var(--auth-shell-bar-gap);
     padding: var(--auth-shell-bar-padding);
   }
 
+  .ui-auth-shell-bar-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--auth-shell-bar-gap);
+    margin-inline-start: auto;
+  }
+
   .ui-auth-shell-main {
     display: flex;
     flex: 1 1 auto;
@@ -142,6 +152,15 @@
     --auth-shell-main-padding: var(--auth-shell-canonical-main-padding);
   }
 
+  .ui-auth-shell[data-measure="wide"]:not([data-preset]) {
+    --auth-shell-card-max-width: var(--auth-shell-wide-card-max-width);
+    --auth-shell-main-align: flex-start;
+  }
+
+  .ui-auth-shell[data-measure="wide"]:not([data-preset]) .ui-auth-shell-card {
+    margin-block: auto;
+  }
+
   .ui-auth-shell[data-preset] .ui-auth-shell-card {
     display: flex;
     flex-direction: column;
@@ -1417,6 +1436,135 @@
   }
 }
 
+@layer components {
+  .ui-mobile-shell {
+    --control-height: var(--mobile-shell-control-height);
+
+    --mobile-shell-padding-inline: calc(
+      var(--mobile-shell-inset-inline) + var(--mobile-shell-safe-inset-inline)
+    );
+    display: flex;
+
+    block-size: var(--mobile-shell-block-size);
+    flex-direction: column;
+    overflow: hidden;
+    background: hsl(var(--background));
+  }
+
+  .ui-mobile-shell[data-height="fill"] {
+    --mobile-shell-block-size: 100%;
+  }
+
+  .ui-mobile-shell-chrome {
+    display: flex;
+    min-inline-size: 0;
+    flex: 0 0 auto;
+    flex-direction: column;
+  }
+
+  .ui-mobile-shell-status {
+    display: flex;
+    min-block-size: calc(
+      var(--mobile-shell-status-bar-height) + var(--mobile-shell-safe-inset-block-start)
+    );
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mobile-shell-region-gap);
+    padding-block-start: var(--mobile-shell-safe-inset-block-start);
+    padding-inline: var(--mobile-shell-padding-inline);
+    background: hsl(var(--card));
+  }
+
+  .ui-mobile-shell-header {
+    display: flex;
+    min-block-size: var(--mobile-shell-header-bar-height);
+    min-inline-size: 0;
+    flex: 0 0 auto;
+
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
+    align-items: center;
+    gap: var(--mobile-shell-region-gap);
+    padding-inline: var(--mobile-shell-padding-inline);
+    border-block-end: 1px solid hsl(var(--border));
+    background: hsl(var(--card));
+    background-image: var(--topbar-gradient);
+  }
+
+  .ui-mobile-shell-header:first-child {
+    min-block-size: calc(
+      var(--mobile-shell-header-bar-height) + var(--mobile-shell-safe-inset-block-start)
+    );
+    padding-block-start: var(--mobile-shell-safe-inset-block-start);
+  }
+
+  .ui-mobile-shell-main {
+    display: flex;
+    min-block-size: 0;
+    min-inline-size: 0;
+
+    flex: 1 1 auto;
+    flex-direction: column;
+    overflow-y: auto;
+
+    overscroll-behavior-block: contain;
+
+    contain: paint;
+    padding-block: var(--mobile-shell-main-padding-block);
+    padding-inline: var(--mobile-shell-padding-inline);
+    background-image: var(--gradient-glow);
+  }
+
+  .ui-mobile-shell-main:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--region-focus-ring-width)
+      var(--region-focus-ring-color, hsl(var(--focus-ring-color, var(--ring))));
+  }
+
+  .ui-mobile-shell-actions {
+    display: flex;
+    min-inline-size: 0;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--mobile-shell-region-gap);
+    padding-block: var(--mobile-shell-actions-padding-block);
+    padding-inline: var(--mobile-shell-padding-inline);
+    border-block-start: 1px solid hsl(var(--border));
+    background: hsl(var(--card));
+  }
+
+  .ui-mobile-shell-tabbar {
+    display: flex;
+    min-block-size: calc(
+      var(--mobile-shell-tab-bar-height) + var(--mobile-shell-safe-inset-block-end)
+    );
+    min-inline-size: 0;
+    flex: 0 0 auto;
+    padding-block-end: var(--mobile-shell-safe-inset-block-end);
+    padding-inline: var(--mobile-shell-safe-inset-inline);
+    border-block-start: 1px solid hsl(var(--border));
+    background: hsl(var(--card));
+  }
+
+  .ui-mobile-shell-tabbar > * {
+    min-inline-size: 0;
+    flex: 1 1 0;
+  }
+
+  .ui-mobile-shell-actions:last-child {
+    padding-block-end: calc(
+      var(--mobile-shell-actions-padding-block) + var(--mobile-shell-safe-inset-block-end)
+    );
+  }
+
+  .ui-mobile-shell-main:last-child {
+    padding-block-end: calc(
+      var(--mobile-shell-main-padding-block) + var(--mobile-shell-safe-inset-block-end)
+    );
+  }
+}
+
 @layer components {
 
   .ui-centered-shell[data-preset="public-landing"] {

package/dist/styles/table-layout.css

@@ -46,6 +46,17 @@
     padding-inline-end: 0;
   }
 
+  [data-slot="table-cell"][data-indent] {
+    padding-inline-start: calc(
+      var(--table-cell-space-x) + var(--table-cell-indent-level, 0) *
+        var(--table-cell-indent-space-step)
+    );
+  }
+
+  [data-slot="table-cell"][data-flush] {
+    padding: 0;
+  }
+
   .ui-data-table-toolbar {
     display: flex;
     flex-wrap: wrap;
@@ -520,7 +531,9 @@
 
     [data-collapse-below="sm"] .ui-table-row {
       display: block;
-      border: 1px solid hsl(var(--border));
+
+      height: auto;
+      border: var(--stroke-hairline) solid hsl(var(--border));
       border-radius: var(--radius-md);
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);
@@ -562,7 +575,9 @@
 
     [data-collapse-below="md"] .ui-table-row {
       display: block;
-      border: 1px solid hsl(var(--border));
+
+      height: auto;
+      border: var(--stroke-hairline) solid hsl(var(--border));
       border-radius: var(--radius-md);
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);
@@ -604,7 +619,9 @@
 
     [data-collapse-below="lg"] .ui-table-row {
       display: block;
-      border: 1px solid hsl(var(--border));
+
+      height: auto;
+      border: var(--stroke-hairline) solid hsl(var(--border));
       border-radius: var(--radius-md);
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);
@@ -646,7 +663,9 @@
 
     [data-collapse-below="xl"] .ui-table-row {
       display: block;
-      border: 1px solid hsl(var(--border));
+
+      height: auto;
+      border: var(--stroke-hairline) solid hsl(var(--border));
       border-radius: var(--radius-md);
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);

package/dist/tokens/components/control.css

@@ -31,6 +31,7 @@
 
   --rating-focus-ring-offset: 2px;
 
+  --checkbox-border-width: var(--stroke-hairline);
   --checkbox-size: calc(1rem * var(--scaling));
   --checkbox-size-compact: 0.875rem;
   --checkbox-size-comfortable: 1.125rem;

package/dist/tokens/components/data-display.css

@@ -83,6 +83,26 @@
   --scroll-area-bar-padding: 1px;
   --scroll-area-thumb-radius: var(--radius-pill);
 
+  --timeline-grid-hour-height: 2.5rem;
+  --timeline-grid-axis-width: 3.25rem;
+  --timeline-grid-column-min-width: 6rem;
+  --timeline-grid-event-min-height: 1.5rem;
+  --timeline-grid-axis-font-size: var(--font-size-2xs);
+  --timeline-grid-head-font-size: var(--font-size-xs);
+  --timeline-grid-event-font-size: var(--font-size-2xs);
+  --timeline-grid-event-gap: var(--space-1);
+  --timeline-grid-event-space-inset: var(--space-1);
+  --timeline-grid-event-radius: var(--radius-sm);
+  --timeline-grid-event-border-width: var(--stroke-md);
+  --timeline-grid-now-width: var(--stroke-sm);
+
+  --timeline-grid-line-color: initial;
+  --timeline-grid-event-color: initial;
+
+  --timeline-grid-event-muted-color: hsl(var(--foreground));
+  --timeline-grid-now-color: initial;
+  --timeline-grid-current-tint: initial;
+
   --permission-matrix-label-width: 16rem;
   --permission-matrix-role-space-gap: var(--space-1);
   --permission-matrix-name-space-gap: 0.375rem;

package/dist/tokens/components/shell.css

@@ -107,6 +107,10 @@
   --auth-shell-main-padding: var(--space-6);
   --auth-shell-footer-padding: var(--space-3) var(--space-6) var(--space-4);
 
+  --auth-shell-bar-gap: var(--space-inline-sm);
+
+  --auth-shell-wide-card-max-width: 64rem;
+
   --auth-shell-canonical-control-height: var(--band-height-lg);
   --auth-shell-canonical-card-max-width: 22.5rem;
   --auth-shell-canonical-heading-size: var(--font-size-base);
@@ -228,3 +232,21 @@
     --app-shell-bar-height: var(--band-height-3xl);
   }
 }
+
+:root {
+  --mobile-shell-block-size: 100dvh;
+  --mobile-shell-safe-inset-block-start: env(safe-area-inset-top);
+  --mobile-shell-safe-inset-block-end: env(safe-area-inset-bottom);
+  --mobile-shell-safe-inset-inline: max(env(safe-area-inset-left), env(safe-area-inset-right));
+
+  --mobile-shell-inset-inline: var(--space-4);
+
+  --mobile-shell-control-height: var(--control-height-comfortable);
+  --mobile-shell-region-gap: var(--space-2);
+  --mobile-shell-status-bar-height: var(--band-height-lg);
+  --mobile-shell-header-bar-height: var(--band-height-3xl);
+
+  --mobile-shell-tab-bar-height: calc(var(--band-height-3xl) + var(--space-2));
+  --mobile-shell-main-padding-block: var(--space-4);
+  --mobile-shell-actions-padding-block: var(--space-3);
+}

package/dist/tokens/components/table.css

@@ -8,6 +8,8 @@
   --table-cell-padding-y: var(--space-2);
   --table-cell-space-x: var(--control-padding-x);
 
+  --table-cell-indent-space-step: var(--space-4);
+
   --table-border-color: initial;
   --table-pagination-padding-y: initial;
   --table-pagination-padding-x: initial;

package/docs/SPACING.md

@@ -42,15 +42,28 @@ Implementation: `src/tokens/base.css` (values) · layout owners: `src/styles/*-l
 | `--card-space-body-y`                             | `--space-section-active` | Header↔body gap                            |
 | `--card-space-header-y` / `--card-space-footer-y` | `--space-stack-sm`       | Banded header + separated footer band      |
 
-| Component                 | Use                                                |
-| ------------------------- | -------------------------------------------------- |
-| `StatCard`                | KPI / stat tile (`solo` path)                      |
-| `CardContent solo`        | Body-only card (same padding as `StatCard`)        |
-| `CardContent flush tight` | Edge-to-edge table/tabs in card                    |
-| `ui-card-inset-x`         | Align nested cells to shell (tables in flush body) |
+| Component                 | Use                                         |
+| ------------------------- | ------------------------------------------- |
+| `StatCard`                | KPI / stat tile (`solo` path)               |
+| `CardContent solo`        | Body-only card (same padding as `StatCard`) |
+| `CardContent flush tight` | Edge-to-edge table/tabs in card             |
 
 See preview **Data Display → Card** for live examples.
 
+### Inset classes (padding on something that is not a `Card*` slot)
+
+`Card*` slots get their padding from `data-slot`. Everything else that must sit on the same rhythm (a table cell, a grid header strip, a scroll body, a sticky action row, a full-bleed toolbar) uses one of three public classes. They are the only legal way to take card-token padding onto a plain element, because the audit rejects Tailwind `p-*` / `px-*` (`no-utility-spacing`).
+
+Pick by AXIS, and note that the three do **not** share one value: each reads a different card token, so `ui-card-inset` is not `ui-card-inset-x` plus `ui-card-inset-y`.
+
+| Class             | Axis               | Token                   | Use when                                                                                                                                                                                                     |
+| ----------------- | ------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `ui-card-inset-x` | inline (start/end) | `--card-space-inset`    | The element must line up with the card shell edge, and the block axis is owned by something else (a fixed row height, a table cell). Rows in a `CardContent flush` table, a header strip in a bordered grid. |
+| `ui-card-inset-y` | block (top/bottom) | `--card-space-header-y` | The element runs edge to edge inline but needs the band rhythm of a banded header / separated footer. A weekday header strip, a full-bleed toolbar cell.                                                     |
+| `ui-card-inset`   | all four sides     | `--card-space-body-y`   | A self-contained panel that owns its own padding on every side: a scrollable body, a sticky action bar, an expanded row panel below a table row.                                                             |
+
+Because `ui-card-inset-x` reads `--card-space-inset`, it follows the card it sits in: a `Card density="tight"` or `"cozy"` moves those cells with the shell. The other two read fixed steps (band and body) and do not.
+
 ## MCP
 
 `get_pattern page-sections` (a page of Cards, spaced by the page) · `get_rule 40` (mobile-first spacing) · `list_audit_rules` (the spacing rules the CLI enforces).

package/docs/charts/compact-bar-trend.tsx

@@ -13,13 +13,12 @@ import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 
 /**
- * CompactBarTrend — the DEPENDENCY-FREE compact bar trend (gh#218).
+ * CompactBarTrend — the DEPENDENCY-FREE compact bar trend.
  *
- * `BarChart` needs the `recharts` optional peer; a platform whose policy forbids screen
- * implementers from adding dependencies cannot use it, and used to fall back to a page-local
- * grid with inline heights. `CompactBarTrend` closes that gap: the marks are token-sized CSS
- * blocks, so the canonical SCR-201 admin dashboard gets a real framework chart with zero
- * consumer CSS, zero inline height math and zero hardcoded colour.
+ * `BarChart` needs the `recharts` optional peer, so a platform whose policy forbids screen
+ * implementers from adding dependencies cannot use it. The marks here are token-sized CSS
+ * blocks instead, so a dashboard gets a real framework chart with zero consumer CSS, zero
+ * inline height math and zero hardcoded colour.
  *
  * Everything below is composed from real @godxjp/ui primitives only.
  */

package/docs/data-display/avatar.tsx

@@ -25,12 +25,10 @@ import portraitSlate from "../assets/portrait-slate.svg";
  * URL against PREVIEW_BASE — an absolute "/assets/…" would 404 wherever the site is served from a
  * sub-path.
  *
- * They used to be `https://picsum.photos/...`. A docs page that fetches a THIRD-PARTY image cannot
- * render without the public internet, and on CI it does not merely look wrong — it hangs: the
- * request never settles, `networkidle` never fires, and `page.goto` times out at 30s. That is what
- * failed `data-display-avatar` and `data-display-card-index` at every viewport in both the axe and
- * geometry sweeps (gh#333), long after the preview server itself was fixed. Committed files cost
- * no request that can hang and no service that can disappear.
+ * A docs page must never fetch a THIRD-PARTY image: without the public internet it cannot render,
+ * and on CI it does not merely look wrong, it hangs — the request never settles, `networkidle`
+ * never fires, and `page.goto` times out. Committed files cost no request that can hang and no
+ * service that can disappear.
  */
 
 /**
@@ -93,7 +91,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* shape="square" — the entity-header organization / service mark (gh#249) */}
+        {/* shape="square" — the entity-header organization / service mark */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>エンティティヘッダー · shape=&quot;square&quot;</CardTitle>
@@ -136,7 +134,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* appearance="tinted" — the capability medallion (gh#12) */}
+        {/* appearance="tinted" — the capability medallion */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>
@@ -192,7 +190,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* presence — the realtime reachability dot (gh#309) */}
+        {/* presence — the realtime reachability dot */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>プレゼンス · presence</CardTitle>

package/docs/data-display/badge.tsx

@@ -59,7 +59,7 @@ const tones = [
 const statuses = ["active", "draft", "pending", "cancelled", "failed", "scheduled"];
 
 /**
- * Subscription/billing lifecycle keys (gh#216). They ship the SAME canonical status→tone→icon
+ * Subscription/billing lifecycle keys. They ship the SAME canonical status→tone→icon
  * map as every other key, so a billing screen never keeps a page-local colour table. They are
  * demoed explicitly because their i18n labels were once missing. A missing key renders the raw
  * `status.trialing` string, and only a rendered demo makes that regression visible.

package/docs/data-display/card/index.tsx

@@ -23,10 +23,12 @@ import { MoreHorizontal } from "lucide-react";
 
 import coverTerrain from "../../assets/cover-terrain.svg";
 
-/* A committed SVG under docs/assets, imported so the bundler rewrites the URL against
+/*
+ *  A committed SVG under docs/assets, imported so the bundler rewrites the URL against
  * PREVIEW_BASE. It replaces a picsum.photos fetch that hung `networkidle` and timed this page out
- * at 30s in CI (gh#333); it was briefly an inline data: URI, which fixed the hang but put 700
- * unreadable characters in the middle of the example a consumer is meant to copy. */
+ * at 30s in CI; it was briefly an inline data: URI, which fixed the hang but put 700
+ * unreadable characters in the middle of the example a consumer is meant to copy.
+ */
 
 /**
  * Card — surface container. Body content ALWAYS goes in CardContent (a bare Card
@@ -131,7 +133,7 @@ export default function Demo() {
           </ResponsiveGrid>
         </Flex>
 
-        {/* accentPlacement="perimeter" — the semantic attention border (gh#12) */}
+        {/* accentPlacement="perimeter" — the semantic attention border */}
         <Flex direction="col" gap="sm">
           <Text as="div" weight="medium">
             Accent · accentPlacement=&quot;perimeter&quot; (全周のアテンションボーダー)

package/docs/data-display/data-table/examples/approval-queue.tsx

@@ -19,7 +19,7 @@ import {
 import { ClipboardCheck, LayoutDashboard, MoreHorizontal, ScrollText } from "lucide-react";
 
 /**
- * Access-approval queue (SCR-105 / gh#253) — the canonical five-column approval collection driven
+ * Access-approval queue (SCR-105 / ) — the canonical five-column approval collection driven
  * by the TanStack-powered DataTable, at 1440 · 1024 · 390 with ONLY public API.
  *
  * The whole responsive contract is two props: `preset="action-collection"` on the DataTable and a

package/docs/data-display/data-table/index.tsx

@@ -230,7 +230,7 @@ export default function Demo() {
           <DataTable data={[]} columns={columns} getRowId={(row) => row.id} />
         </Flex>
 
-        {/* gh#216 — the two failure states, in the same table grid as empty/loading. */}
+        {/* — the two failure states, in the same table grid as empty/loading. */}
         <Flex direction="col" gap="sm">
           <Text as="div" weight="medium">
             エラー（error · role=&quot;alert&quot; · onRetry で再試行を表示）

package/docs/data-display/permission-matrix.tsx

@@ -1,7 +1,7 @@
 /**
- * PermissionMatrix — 権限マトリクス (canonical RBAC role × permission grid, gh#257).
+ * PermissionMatrix — 権限マトリクス (canonical RBAC role × permission grid, ).
  *
- * A REAL export from `@godxjp/ui/data-display` (the gh#251 lesson: a consumer cannot import a
+ * A REAL export from `@godxjp/ui/data-display` (the lesson: a consumer cannot import a
  * docs page). Read-only ✓/— by default; `onGrantChange` switches to editable checkbox cells with
  * locked roles kept read-only; compare + 差分のみ come from `lib/permission-grid`; lifecycle
  * states follow the DataTable #216 vocabulary. Domain data below is demo-only — the library

package/docs/data-display/scroll-area.tsx

@@ -27,7 +27,7 @@ const entries = Array.from(
 const shortEntries = entries.slice(0, 3);
 
 /**
- * The live-stream screen (gh#311). A deterministic clock: the demo never reads `Date.now()`, so the
+ * The live-stream screen. A deterministic clock: the demo never reads `Date.now()`, so the
  * frame is stable, and every timestamp still goes through `Intl.DateTimeFormat` (IANA tz, 24h).
  */
 const STREAM_EPOCH = Date.UTC(2026, 2, 3, 0, 30, 0);

package/docs/data-display/table.tsx

@@ -131,7 +131,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* ── The flush full-bleed FRAME contract (gh#305 · gh#306) ───────────────────────────
+        {/* ── The flush full-bleed FRAME contract ───────────────────────────
             Four cards, side by side, so the whole rule is visible at once: which edges a
             full-bleed table keeps inside a card, and who draws the line under the header. */}
         <Card>

package/docs/data-display/timeline-grid.tsx

@@ -0,0 +1,119 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  TimelineGrid,
+  type TimelineGridColumnProp,
+  type TimelineGridEventProp,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * TimelineGrid — a vertical hour axis, one column per day, and event blocks placed by start time
+ * and duration. It is the time-axis half of the Timeline family; Timeline itself is one lane of
+ * ordered events with no scale.
+ */
+const WEEK: TimelineGridColumnProp[] = [
+  { id: "05-11", label: "月 11" },
+  { id: "05-12", label: "火 12" },
+  { id: "05-13", label: "水 13" },
+  { id: "05-14", label: "木 14", description: "本日", current: true },
+  { id: "05-15", label: "金 15" },
+];
+
+const SHIFTS: TimelineGridEventProp[] = [
+  { id: "s1", columnId: "05-11", start: "09:00", end: "22:00", title: "通し", description: "佐藤" },
+  { id: "s2", columnId: "05-12", start: "06:00", end: "22:00", title: "有給", description: "鈴木" },
+  { id: "s3", columnId: "05-14", start: "09:00", end: "17:30", title: "早番", description: "田中" },
+  { id: "s4", columnId: "05-14", start: "13:00", end: "22:00", title: "遅番", description: "高橋" },
+  // end at or before start = the shift runs into the next day (夜勤 22:00–06:00).
+  { id: "s5", columnId: "05-14", start: "22:00", end: "06:00", title: "夜勤", description: "伊藤" },
+  { id: "s6", columnId: "05-15", start: "09:00", end: "17:30", title: "早番", description: "佐藤" },
+  { id: "s7", columnId: "05-15", start: "18:00", end: "21:00", title: "残業", description: "鈴木" },
+];
+
+// One column, a finer axis, and a colour carried by the record itself — the day view of the same
+// data. `color` is decorative: the block still prints its hours and its title as text.
+const ROOMS: TimelineGridColumnProp[] = [
+  { id: "a", label: "会議室 A", description: "12名" },
+  { id: "b", label: "会議室 B", description: "6名" },
+];
+
+const BOOKINGS: TimelineGridEventProp[] = [
+  {
+    id: "b1",
+    columnId: "a",
+    start: "09:30",
+    end: "10:30",
+    title: "定例会",
+    description: "営業部",
+    color: "var(--wa-gunjo)",
+  },
+  {
+    id: "b2",
+    columnId: "a",
+    start: "10:00",
+    end: "11:00",
+    title: "面談",
+    description: "人事",
+    color: "var(--wa-akane)",
+  },
+  {
+    id: "b3",
+    columnId: "b",
+    start: "13:00",
+    end: "14:30",
+    title: "設計レビュー",
+    description: "開発部",
+    color: "var(--wa-wakatake)",
+  },
+];
+
+export default function Demo() {
+  return (
+    <PageContainer title="TimelineGrid" subtitle="時間軸に沿って予定ブロックを置く週／日グリッド">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>週シフト</CardTitle>
+            <CardDescription>
+              start / end で軸を 06:00–24:00 に固定し、interval=2
+              で2時間ごとに目盛りを引きます。木曜の早番と遅番は時間が重なるため、自動で横に並びます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <TimelineGrid
+              label="週シフト 2026年5月11日〜15日"
+              columns={WEEK}
+              events={SHIFTS}
+              start="06:00"
+              end="24:00"
+              interval={2}
+              now="14:35"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>会議室の予約</CardTitle>
+            <CardDescription>
+              start / end を省略すると、軸は予定の範囲から自動で決まります。onEventSelect
+              を渡すと各ブロックが button になり、キーボードでも選べます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <TimelineGrid
+              label="会議室の予約 5月14日"
+              columns={ROOMS}
+              events={BOOKINGS}
+              onEventSelect={() => {}}
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/branch-scope-picker.tsx

@@ -1,5 +1,5 @@
 /**
- * BranchScopePicker — 適用範囲 (all branches vs an explicit subset, gh#257).
+ * BranchScopePicker — 適用範囲 (all branches vs an explicit subset).
  *
  * One controlled `{ mode, branchIds }` value; real RadioGroup + CheckboxGroup + SearchInput
  * underneath. `error` is FIELD VALIDATION (aria-errormessage); a failed branch read is

package/docs/data-entry/input-otp.tsx

@@ -140,7 +140,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* align — the centred challenge, without a consumer wrapper div (gh#12) */}
+        {/* Align — the centred challenge, without a consumer wrapper div */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>中央寄せ（align=&quot;center&quot;）</CardTitle>

package/docs/data-entry/textarea.tsx

@@ -18,7 +18,7 @@ const SEED_MESSAGES: Message[] = [
 ];
 
 /**
- * The godx-chatter composer (gh#310). One line at rest, grows line by line, scrolls itself past
+ * The godx-chatter composer. One line at rest, grows line by line, scrolls itself past
  * eight rows, and collapses back to one line the moment the post is sent — the send button just
  * resets the controlled value, and `autoGrow` follows it without a single line of layout code.
  */

package/docs/data-entry/toggle-count.tsx

@@ -14,7 +14,7 @@ import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
- * Toggle `count` — the counted, PRESSED chip (gh#312).
+ * Toggle `count` — the counted, PRESSED chip.
  *
  * `Button` owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`) and `Toggle`
  * owns the pressed state, so a faceted filter chip ("未対応 42", selected or not) and a reaction