@godxjp/ui 19.3.1 → 19.4.1

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/popover.tsx

@@ -135,7 +135,10 @@ export default function Demo() {
             <Flex direction="row" wrap gap="sm">
               <Popover>
                 <PopoverTrigger asChild>
-                  <Button variant="outline">side=top</Button>
+                  {/* data-axe-open: opened by check-frame-axe before its overlay scan. */}
+                  <Button data-axe-open variant="outline">
+                    side=top
+                  </Button>
                 </PopoverTrigger>
                 <PopoverContent side="top" aria-label="上側の配置例">
                   <PopoverDescription>上に開きます。</PopoverDescription>

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/date-picker.tsx

@@ -33,7 +33,8 @@ export default function Demo() {
               形式に整形され、 解釈できない入力は元の値へ復帰する。
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          {/* data-axe-open: check-frame-axe opens the calendar before scanning. */}
+          <CardContent data-axe-open>
             <FormField id="issue-date" label="発行日" required>
               <DatePicker
                 id="issue-date"

package/docs/data-entry/form-field/index.tsx

@@ -130,7 +130,7 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>Field identity · data-field (gh#337)</CardTitle>
+            <CardTitle level={2}>Field identity · data-field</CardTitle>
             <CardDescription>
               項目キーを control の data-field に出す。既定は id から導出。id が DOM
               一意化のためのもので項目キーと違う場合だけ field を明示する。AppProvider
@@ -176,7 +176,7 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>Static value · mixed with editable fields (gh#294)</CardTitle>
+            <CardTitle level={2}>Static value · mixed with editable fields</CardTitle>
             <CardDescription>
               staticText renders a read-only VALUE as a FormField itself: Descriptions.Item's exact
               value typography, no control, no id/aria-* wiring. An immutable name/email row and an

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/select-matrix.tsx

@@ -142,7 +142,8 @@ export default function Demo() {
               references. The internal search textbox has its own visible-purpose accessible name.
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          {/* data-axe-open: check-frame-axe opens the searchable panel before scanning. */}
+          <CardContent data-axe-open>
             <FormField
               id="searchable-invalid"
               label="担当拠点"

package/docs/data-entry/select.tsx

@@ -82,7 +82,9 @@ export default function Demo() {
               Pass an options array; name= submits the value with the form.
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          {/* data-axe-open: check-frame-axe opens this Select before scanning, so the
+              overlay-open a11y state is measured. See docs/FRAME-A11Y-CI.md. */}
+          <CardContent data-axe-open>
             <FormField id="status" label="状態">
               <Select
                 id="status"

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

package/docs/feedback/alert.tsx

@@ -139,7 +139,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* Banner — the SAME component at the page measure (gh#255). variant="banner" swaps only
+        {/* Banner — the SAME component at the page measure. variant="banner" swaps only
             the box: square, edge-to-edge, ruled on the block-end edge, measured by the --banner-*
             tokens. Every tone, the icon, the actions grid and the dismiss ✕ are inherited from the
             inline alert above, so there is nothing new to learn and nothing duplicated.

package/docs/feedback/banner.tsx

@@ -5,7 +5,7 @@ import { Button } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
- * Banner · full-bleed page/shell attention strip (godxjp-ui#255) — the Alert
+ * Banner · full-bleed page/shell attention strip — the Alert
  * primitive with the structural axis fixed to variant="banner". Persistent,
  * page/shell-scoped, at most one per surface. tone owns colour + icon +
  * live-region politeness; onDismiss renders the built-in dismiss (last in focus

package/docs/feedback/dialog.tsx

@@ -109,7 +109,8 @@ export default function Demo() {
           <CardContent>
             <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
               <DialogTrigger asChild>
-                <Button variant="outline" size="sm">
+                {/* data-axe-open: opened by check-frame-axe before its overlay scan. */}
+                <Button data-axe-open variant="outline" size="sm">
                   取引詳細を見る
                 </Button>
               </DialogTrigger>

package/docs/feedback/sheet.tsx

@@ -213,7 +213,8 @@ export default function Demo() {
           <CardContent>
             <Sheet open={editOpen} onOpenChange={setEditOpen}>
               <SheetTrigger asChild>
-                <Button variant="ghost" size="sm">
+                {/* data-axe-open: opened by check-frame-axe before its overlay scan. */}
+                <Button data-axe-open variant="ghost" size="sm">
                   取引先を編集
                 </Button>
               </SheetTrigger>

package/docs/foundation/email-tokens.tsx

@@ -25,7 +25,7 @@ import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 import { buildEmailSpecimenHtml } from "./_email-specimen";
 
 /**
- * Email tokens · the `@godxjp/ui/email` contract (issue #227).
+ * Email tokens · the `@godxjp/ui/email` contract.
  *
  * A transactional email is rendered by Blade/Twig/MJML, by clients that strip `<style>`, ignore
  * CSS custom properties and block remote images — so neither the React components nor the CSS

package/docs/general/activity.tsx

@@ -12,7 +12,7 @@ import { Flex, PageContainer, Separator } from "@godxjp/ui/layout";
 
 /**
  * Activity · the official AMBIENT-motion primitive: a continuous, unbounded "something is happening
- * right now, elsewhere". The LOOP counterpart to `Reveal`'s one-shot entrance (gh#313).
+ * right now, elsewhere". The LOOP counterpart to `Reveal`'s one-shot entrance.
  *
  * Reads the DS motion tokens (`--activity-interval`, `--activity-stagger-step`,
  * `--activity-mark-offset`, `--activity-color`, `--ease-standard`) so a consumer never hand-rolls a

package/docs/layout/app-shell.tsx

@@ -282,8 +282,8 @@ export default function Demo() {
                 を切り替え、sidebar・topbar・page actions・grid・split pane
                 の変換を同じ実用構成で確認する。900px 以下ではドックされたサイドバーが隠れ、
                 AppShell 所有のモバイルドロワー（トップバー左のハンバーガー → フォーカストラップ付き
-                Sheet · Esc で閉じてトリガーへフォーカス復帰）が navigation を提供する（gh#165）。
-                このデモは mobileNav を渡していないため、同じ Sidebar がドロワーに再利用される。
+                Sheet · Esc で閉じてトリガーへフォーカス復帰）が navigation を提供する。 このデモは
+                mobileNav を渡していないため、同じ Sidebar がドロワーに再利用される。
               </CardDescription>
               <CardDescription>
                 「トップバーなし（チャット型）」を押すと topbar / topbarLeft / topbarRight / logo の
@@ -297,8 +297,8 @@ export default function Demo() {
                 で代用しないこと ― それは 4 スロットが埋まった状態と同じで、バーの行は残る。
               </CardDescription>
               <CardDescription>
-                横方向のページ余白軸の持ち主は <code>--space-page-x</code> ひとつ（gh#330）。
-                トップバーは <code>.app-main</code> と同じグリッド列に載っている ―
+                横方向のページ余白軸の持ち主は <code>--space-page-x</code> ひとつ。 トップバーは{" "}
+                <code>.app-main</code> と同じグリッド列に載っている ―
                 つまりバー先頭のコントロールとページタイトルは同じ縦線に並ぶべきもので、
                 <code>--app-shell-bar-inset</code> はその持ち主を読む （
                 <code>--app-shell-bar-inset-compact</code> も同様に

package/docs/layout/auth-account-summary.tsx

@@ -8,7 +8,7 @@ import { AuthAccountSummary, AuthStack, PageContainer } from "@godxjp/ui/layout"
  * the account address, and exactly one ghost action. Everything else is consumer data.
  *
  * The address CLIPS with an ellipsis, so it declares its own line box rather than inheriting one
- * (gh#254): a tight inherited line-height makes the clip box shorter than the font's ascent plus
+ *: a tight inherited line-height makes the clip box shorter than the font's ascent plus
  * descent and shears Vietnamese tone marks and Latin descenders off, while the DOM text stays
  * correct. The Vietnamese row below is the regression case for that.
  */

package/docs/layout/auth-recovery/examples/mobile-390.tsx

@@ -9,7 +9,7 @@ import { AppSettingPicker } from "@godxjp/ui/navigation";
 /**
  * Viewport fixture — 390x844 (mobile). THE MOBILE CONTRACT, decided here.
  *
- * ⚠️ The 390 canonical reference supplied with gh#233 is a desktop 2x2 COMPOSITE that overflows and
+ * ⚠️ The 390 canonical reference supplied with is a desktop 2x2 COMPOSITE that overflows and
  * crops horizontally. It is not a route-level mobile artboard and it was NOT traced. The behaviour
  * below is a decided, documented contract — see the Overview page.
  *

package/docs/layout/auth-recovery/examples/password-recovery.tsx

@@ -28,8 +28,6 @@ export default function Demo() {
   const [password, setPassword] = useState("Godx-2026");
   const [confirmation, setConfirmation] = useState("Godx-202");
 
-  // The address is masked by the SERVER before it reaches the panel — the library never
-  // reconstructs an identifier, it only renders the string the consumer sends.
   const maskedEmail = "h*****@example.co.jp";
 
   return (

package/docs/layout/auth-shell-context.tsx

@@ -16,7 +16,7 @@ import { AuthFooter, AuthIdentity, AuthShell, Flex } from "@godxjp/ui/layout";
 import { AppSettingPicker } from "@godxjp/ui/navigation";
 
 /**
- * AuthShell preset="context-selection" (gh#217) — the canonical organisation / context picker.
+ * AuthShell preset="context-selection" — the canonical organisation / context picker.
  *
  * The preset owns the whole page measure: a 25rem card at 1440/1024 and an edge-to-edge card at
  * 390 (0 inline gutter), plus the vertical rhythm between the three direct sections of the auth

package/docs/layout/auth-shell-device.tsx

@@ -18,7 +18,7 @@ import {
 import { AppSettingPicker, Steps } from "@godxjp/ui/navigation";
 
 /**
- * AuthShell preset="device-authorization" (gh#220) — the canonical OAuth device-grant screen.
+ * AuthShell preset="device-authorization" — the canonical OAuth device-grant screen.
  *
  * The whole page measure is owned by the preset: a 380px card at 1440/1024 and a 5px inline page
  * gutter at 390 (card x=5px, width=380px). Nothing here sets a width, an inset or a colour — a
@@ -28,7 +28,7 @@ import { AppSettingPicker, Steps } from "@godxjp/ui/navigation";
  * `variant="canonical"` still owns control density + heading size; the preset only re-measures.
  * Verify at 1440x900 · 1024x900 · 390x844.
  *
- * gh#12 — the preset also owns the CODE FIELD now: `--otp-slot-{inline,block}-size` come from
+ * The preset also owns the CODE FIELD now: `--otp-slot-{inline,block}-size` come from
  * `--auth-shell-device-otp-slot-*`, so each 4-slot grouped box measures the canonical 112x54
  * instead of the 146x38 the square control tier produced. Nothing on this page sets it. The row is
  * centred with `align="center"` (not a wrapper div) and the progress marker is the canonical

package/docs/layout/auth-shell-registration.tsx

@@ -33,7 +33,7 @@ import {
 import { AppSettingPicker } from "@godxjp/ui/navigation";
 
 /**
- * AuthShell preset="registration" (gh#256) — the canonical sign-up measure.
+ * AuthShell preset="registration" — the canonical sign-up measure.
  *
  * The preset owns the whole page geometry: a 360px (22.5rem) form measure at 1440/1024, a 15px
  * inline gutter at 390 (card x=15, width=360 — the same page rhythm as preset="login", so

package/docs/layout/auth-shell.tsx

@@ -14,7 +14,7 @@ import {
  * SCR-001 Login visual contract. `?state=standalone|one-line|wrapped` drives the package visual
  * test; all three keep the same card anchor without consumer CSS or fake requester data.
  *
- * The composition mirrors the documented consumer page exactly (gh#263): NO top brand bar (the
+ * The composition mirrors the documented consumer page exactly: NO top brand bar (the
  * canonical SCR-001 artboard has none — the in-flow AuthIdentity mark IS the brand), a header-less
  * `<CardContent solo>` body, `AuthFooter` as the third direct child (the login preset's third grid
  * row), and a plain 12px text-link row like the artboard's.

package/docs/layout/master-detail.tsx

@@ -102,7 +102,7 @@ const COLLAPSE_STEPS = ["token", "sm", "md", "lg", "xl", "false"] as const;
 const MASTER_VIEWPORTS = ["auto", "compact", "standard"] as const;
 
 /**
- * 実サービスの「長い」コレクション (gh#231)。auto のままだと一覧が数千 px に伸び、
+ * 実サービスの「長い」コレクション。auto のままだと一覧が数千 px に伸び、
  * 積み重なった 390px 画面では詳細がフォールドの遥か下に押し出される。
  */
 const MEMBERS = Array.from({ length: 60 }, (_, i) => ({
@@ -339,7 +339,7 @@ export default function Demo() {
           </Card>
         </MasterDetail>
 
-        {/* ── 3. masterViewport — 長い実コレクションを境界付きビューポートに収める (gh#231)。
+        {/* ── 3. masterViewport — 長い実コレクションを境界付きビューポートに収める。
                auto: 一覧が 60 行ぶん伸び、390px では詳細がフォールドの遥か下に落ちる。
                compact / standard: --master-detail-master-viewport-* が block サイズを
                上限とし、コレクションは region の中でスクロールする。

package/docs/layout/mobile-shell.tsx

@@ -0,0 +1,101 @@
+import * as React from "react";
+import { Inbox, Package, ScanLine, Truck } from "lucide-react";
+
+import { Badge, Card, CardContent } from "@godxjp/ui/data-display";
+import { Button, Heading, Text } from "@godxjp/ui/general";
+import { Flex, MobileShell } from "@godxjp/ui/layout";
+
+/**
+ * MobileShell — the handheld app shell: a status band, an app bar, ONE scroll region, a sticky
+ * action bar and a bottom tab bar. The two things a composed `Card` stack cannot do are exactly
+ * what the shell owns: the root is one screen tall so the DOCUMENT never scrolls (the tab bar can
+ * never slide away under a collapsing URL bar), and every band pads itself out of the device
+ * safe areas. Zero custom CSS — no `min-h-dvh`, no `position: sticky`, no page gutter by hand.
+ */
+const ITEMS = [
+  { rc: "RC-204881", name: "洗顔フォーム", status: "未仕分け", tone: "warning" as const },
+  { rc: "RC-204882", name: "日焼け止め", status: "棚上", tone: "info" as const },
+  { rc: "RC-204879", name: "ビタミン B", status: "棚上", tone: "info" as const },
+  { rc: "RC-204875", name: "歯ブラシ", status: "梱包済み", tone: "muted" as const },
+  { rc: "RC-204871", name: "入浴剤", status: "棚上", tone: "info" as const },
+  { rc: "RC-204864", name: "解熱鎮痛薬", status: "梱包済み", tone: "muted" as const },
+];
+
+const TABS = [
+  { id: "inbound", label: "入庫", icon: Inbox },
+  { id: "packing", label: "梱包", icon: Package },
+  { id: "outbound", label: "出庫", icon: Truck },
+];
+
+export default function Demo() {
+  const [tab, setTab] = React.useState("inbound");
+
+  return (
+    <MobileShell
+      statusBar={
+        <>
+          <Text size="sm" weight="medium" tabular>
+            9:41
+          </Text>
+          <Text size="sm" weight="medium" tone="muted" tabular>
+            Acme Handy
+          </Text>
+        </>
+      }
+      header={
+        <Flex align="center" justify="between" gap="xs" className="w-full">
+          <Heading level={3} as="h1">
+            入庫
+          </Heading>
+          <Button variant="ghost" size="sm">
+            選択
+          </Button>
+        </Flex>
+      }
+      actions={
+        <>
+          <Button className="flex-[2]">
+            <ScanLine aria-hidden="true" />
+            スキャン
+          </Button>
+          <Button variant="outline" className="flex-1">
+            手入力
+          </Button>
+        </>
+      }
+      tabBar={TABS.map((t) => {
+        const Icon = t.icon;
+        return (
+          <Button
+            key={t.id}
+            variant="ghost"
+            onClick={() => setTab(t.id)}
+            aria-current={t.id === tab ? "page" : undefined}
+            className="h-full flex-col rounded-none"
+          >
+            <Icon aria-hidden="true" />
+            <Text size="2xs">{t.label}</Text>
+          </Button>
+        );
+      })}
+    >
+      <Flex direction="col" gap="sm">
+        {ITEMS.map((item) => (
+          <Card key={item.rc} density="tight">
+            <CardContent solo>
+              <Flex align="center" justify="between" gap="sm">
+                <Flex direction="col" gap="none">
+                  <Text weight="medium">{item.name}</Text>
+                  <Text size="xs" mono tone="muted" tabular>
+                    {item.rc}
+                  </Text>
+                </Flex>
+                <Badge tone={item.tone}>{item.status}</Badge>
+              </Flex>
+            </CardContent>
+          </Card>
+        ))}
+      </Flex>
+    </MobileShell>
+  );
+}