@godxjp/ui 19.1.0 → 19.3.1

package/docs/layout/legal-document-shell/_data.ts

@@ -0,0 +1,110 @@
+/**
+ * Legal copy fixtures for the LegalDocumentShell pages.
+ *
+ * DATA ONLY (a `.ts` module, never a `.tsx` "kit") — the pages compose the real
+ * `@godxjp/ui` primitives themselves, so a consumer can copy any page verbatim.
+ * All legal text is CONSUMER-owned; the shell only receives it through `sections`.
+ */
+
+export type LegalSectionFixture = {
+  id: string;
+  title: string;
+  paragraphs: string[];
+};
+
+/** Canonical JA terms-of-service document (SCR-005 shape). */
+export const TERMS_JA: LegalSectionFixture[] = [
+  {
+    id: "acceptance",
+    title: "第1条(本規約への同意)",
+    paragraphs: [
+      "本規約は、GodX 株式会社(以下「当社」といいます)が提供する各種サービス(以下「本サービス」といいます)の利用条件を定めるものです。利用者は、本サービスを利用することにより、本規約のすべての条項に同意したものとみなされます。",
+      "当社は、必要と判断した場合には、利用者に事前に通知することなく本規約を変更することがあります。変更後の本規約は、当社所定のウェブサイトに掲示された時点から効力を生じるものとします。",
+    ],
+  },
+  {
+    id: "accounts",
+    title: "第2条(アカウントの管理)",
+    paragraphs: [
+      "利用者は、自己の責任において、本サービスのアカウント情報を適切に管理するものとします。利用者は、いかなる場合にも、アカウントを第三者に譲渡または貸与することはできません。",
+      "アカウント情報が第三者によって使用されたことによって生じた損害について、当社に故意または重大な過失がある場合を除き、当社は一切の責任を負いません。",
+    ],
+  },
+  {
+    id: "prohibited",
+    title: "第3条(禁止事項)",
+    paragraphs: [
+      "利用者は、本サービスの利用にあたり、法令または公序良俗に違反する行為、当社もしくは第三者の知的財産権を侵害する行為、本サービスの運営を妨害するおそれのある行為を行ってはなりません。",
+      "当社は、利用者が前項に違反したと判断した場合、事前の通知なく、当該利用者に対して本サービスの全部または一部の利用を停止することができます。",
+    ],
+  },
+  {
+    id: "data-retention",
+    title: "第4条(データの保持期間)",
+    paragraphs: [
+      "当社は、会計関連法令および犯罪収益移転防止法に基づき、取引記録を取引終了日から7年間保持します。保持期間の経過後、当社は速やかに当該記録を削除または匿名化します。",
+      "利用者は、いつでも自己の個人データの開示、訂正または削除を請求することができます。ただし、法令上の保持義務が優先する場合はこの限りではありません。",
+    ],
+  },
+  {
+    id: "third-party",
+    title: "第5条(第三者サービスの利用)",
+    paragraphs: [
+      "本サービスは、決済、本人確認、通知配信などの目的で第三者のサービスを利用することがあります。当該第三者サービスの利用にあたっては、当該第三者が定める利用条件が別途適用されます。",
+    ],
+  },
+  {
+    id: "disclaimer",
+    title: "第6条(免責事項)",
+    paragraphs: [
+      "当社は、本サービスに事実上または法律上の瑕疵がないことを明示的にも黙示的にも保証しておりません。当社は、本サービスに起因して利用者に生じたあらゆる損害について、当社の故意または重過失による場合を除き、一切の責任を負いません。",
+    ],
+  },
+  {
+    id: "governing-law",
+    title: "第7条(準拠法および管轄裁判所)",
+    paragraphs: [
+      "本規約の解釈にあたっては、日本法を準拠法とします。本サービスに関して紛争が生じた場合には、東京地方裁判所を第一審の専属的合意管轄裁判所とします。",
+    ],
+  },
+  {
+    id: "contact",
+    title: "第8条(お問い合わせ窓口)",
+    paragraphs: [
+      "本規約に関するお問い合わせは、当社所定のお問い合わせフォームまたは legal@example.com までご連絡ください。",
+    ],
+  },
+];
+
+/**
+ * Mixed-script wrapping fixture: the same document rendered with deliberately hostile
+ * line-breaking material in JA (no spaces / kinsoku), EN (long compounds + a very long URL)
+ * and VI (diacritic-heavy words that must never break mid-word).
+ */
+export const WRAPPING_MIXED: LegalSectionFixture[] = [
+  {
+    id: "ja-kinsoku",
+    title: "日本語の長文セクション(禁則処理・行分割の確認)",
+    paragraphs: [
+      "当社は、個人情報の保護に関する法律その他の関係法令等を遵守し、利用者の個人情報を適正に取り扱うとともに、個人情報の漏えい、滅失または毀損の防止その他の個人情報の安全管理のために必要かつ適切な措置を講じるものとします。",
+      "「特定個人情報等」「要配慮個人情報」「仮名加工情報」「匿名加工情報」——これらの用語は、いずれも個人情報保護法に定義される意味を有し、句読点や括弧が行頭に来ないよう禁則処理が適用されます。",
+    ],
+  },
+  {
+    id: "en-long-compounds",
+    title:
+      "2. Cross-border data transfers, sub-processor notifications and telecommunications-infrastructure obligations",
+    paragraphs: [
+      "The Controller acknowledges that the Processor may engage sub-processors established outside the European Economic Area, provided that an adequacy decision, standard contractual clauses, or another transfer mechanism recognised under Chapter V of the General Data Protection Regulation is in place.",
+      "The current sub-processor register is published at https://example.com/legal/sub-processors/register?revision=2026-04-01&format=machine-readable and is updated at least thirty calendar days before any addition takes effect.",
+    ],
+  },
+  {
+    id: "vi-dau-thanh",
+    title: "3. Quyền riêng tư và nghĩa vụ bảo mật thông tin của người dùng",
+    paragraphs: [
+      "Chúng tôi chỉ thu thập những thông tin thực sự cần thiết để cung cấp dịch vụ, và tuyệt đối không chia sẻ dữ liệu cá nhân của bạn với bên thứ ba khi chưa nhận được sự đồng ý rõ ràng bằng văn bản.",
+      "Người dùng có quyền yêu cầu truy cập, chỉnh sửa hoặc xoá dữ liệu cá nhân của mình bất cứ lúc nào, trừ trường hợp pháp luật hiện hành quy định nghĩa vụ lưu trữ bắt buộc đối với dữ liệu đó.",
+    ],
+  },
+];

package/docs/layout/legal-document-shell/examples/desktop-1440.md

@@ -0,0 +1,12 @@
+---
+title: Viewport 1440x900
+viewport: 1440x900
+---
+
+Reference desktop geometry. The shell is wider than 56rem, so the contents render as a **sticky rail**
+on the start side — spanning the header, body and footer rows — beside a 46rem measure-capped
+document column.
+
+Scroll the frame: the active contents entry tracks the reading line (`aria-current="location"` + the
+leading marker + a heavier weight), and the rail stays pinned at
+`--legal-document-toc-inset-block-start`.

package/docs/layout/legal-document-shell/examples/desktop-1440.tsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { CenteredShell, Flex, LegalDocumentShell, Topbar } from "@godxjp/ui/layout";
+import { Button, Logo, Text } from "@godxjp/ui/general";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+
+import { TERMS_JA } from "../_data";
+
+/**
+ * Viewport fixture — 1440×900 (desktop).
+ *
+ * Reference geometry: the shell is wider than 56rem, so the contents become a STICKY rail on the
+ * start side, spanning the header / body / footer rows, beside a 46rem measure-capped column.
+ * The rail stays in view for the whole scroll; the active entry tracks the reading line.
+ */
+export default function Demo() {
+  const [activeSection, setActiveSection] = useState("acceptance");
+
+  return (
+    <CenteredShell
+      width="lg"
+      topbar={
+        <Topbar
+          start={
+            <Flex align="center" gap="sm">
+              <Logo glyph="G" />
+              <Text weight="medium">GodX ID</Text>
+            </Flex>
+          }
+          end={<AppSettingPicker kind="locale" />}
+        />
+      }
+      footer={
+        <Text size="xs" tone="muted">
+          2026 GodX 株式会社
+        </Text>
+      }
+    >
+      <LegalDocumentShell
+        title="利用規約"
+        version="2.4"
+        effectiveDate="2026-04-01"
+        summary="本規約は、GodX ID および連携する各サービスの利用条件を定めるものです。ご利用の前に必ずお読みください。"
+        contentsLabel="目次"
+        activeSection={activeSection}
+        onActiveSectionChange={setActiveSection}
+        sections={TERMS_JA.map((section) => ({
+          id: section.id,
+          title: section.title,
+          content: (
+            <Flex direction="col" gap="sm">
+              {section.paragraphs.map((paragraph) => (
+                <Text as="p" key={paragraph}>
+                  {paragraph}
+                </Text>
+              ))}
+            </Flex>
+          ),
+        }))}
+        documentNavigation={
+          <Flex direction="col" gap="xs" role="group" aria-label="法的文書">
+            <Button variant="secondary" size="sm" fullWidth aria-current="page">
+              利用規約
+            </Button>
+            <Button variant="ghost" size="sm" fullWidth>
+              プライバシーポリシー
+            </Button>
+            <Button variant="ghost" size="sm" fullWidth>
+              Cookie ポリシー
+            </Button>
+          </Flex>
+        }
+        footerAction={
+          <Flex gap="sm" wrap>
+            <Button size="sm">同意する</Button>
+            <Button size="sm" variant="outline">
+              PDF をダウンロード
+            </Button>
+          </Flex>
+        }
+      />
+    </CenteredShell>
+  );
+}

package/docs/layout/legal-document-shell/examples/mobile-390.md

@@ -0,0 +1,22 @@
+---
+title: Viewport 390x844
+viewport: 390x844
+---
+
+## Documented mobile behaviour
+
+Below the **56rem** container threshold the shell collapses to one column and the DOM order is
+exactly the reading order:
+
+1. document header (`h1` · version · `<time>` effective date · summary)
+2. **contents** — a static compact block
+3. the sections
+4. `footerAction`
+
+The rail is **deliberately not sticky and not height-capped** at this size: pinning a 8-item contents
+list on a 390×844 screen costs more vertical space than it saves, and a height-capped inner scroller
+inside a page scroller is a known touch-scroll trap. The entries stay real anchors with the same
+`--legal-document-scroll-offset` and the same focus handoff, so tapping one jumps to — and focuses —
+the section.
+
+Nothing here is a media query: the same rules apply to a 56rem-narrow pane on a large screen.

package/docs/layout/legal-document-shell/examples/mobile-390.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { CenteredShell, Flex, LegalDocumentShell, Topbar } from "@godxjp/ui/layout";
+import { Button, Logo, Text } from "@godxjp/ui/general";
+
+import { TERMS_JA } from "../_data";
+
+/**
+ * Viewport fixture — 390×844 (mobile).
+ *
+ * Below the 56rem container threshold the shell collapses to ONE column and the DOM order is what
+ * you read: document header → contents → sections → footer actions.
+ *
+ * The contents rail is deliberately **static** here — not sticky and not height-capped — so a phone
+ * never loses vertical space to pinned chrome. The entries are still real anchors with the same
+ * scroll offset and focus handoff, so tapping one jumps to (and focuses) the section.
+ */
+export default function Demo() {
+  const [activeSection, setActiveSection] = useState("acceptance");
+
+  return (
+    <CenteredShell
+      width="lg"
+      topbar={
+        <Topbar
+          start={
+            <Flex align="center" gap="sm">
+              <Logo glyph="G" />
+              <Text weight="medium">GodX ID</Text>
+            </Flex>
+          }
+        />
+      }
+      footer={
+        <Text size="xs" tone="muted">
+          2026 GodX 株式会社
+        </Text>
+      }
+    >
+      <LegalDocumentShell
+        title="利用規約"
+        version="2.4"
+        effectiveDate="2026-04-01"
+        summary="本規約は、GodX ID および連携する各サービスの利用条件を定めるものです。"
+        contentsLabel="目次"
+        activeSection={activeSection}
+        onActiveSectionChange={setActiveSection}
+        sections={TERMS_JA.map((section) => ({
+          id: section.id,
+          title: section.title,
+          content: (
+            <Flex direction="col" gap="sm">
+              {section.paragraphs.map((paragraph) => (
+                <Text as="p" key={paragraph}>
+                  {paragraph}
+                </Text>
+              ))}
+            </Flex>
+          ),
+        }))}
+        footerAction={
+          <Flex gap="sm" wrap>
+            <Button size="sm" fullWidth>
+              同意する
+            </Button>
+          </Flex>
+        }
+      />
+    </CenteredShell>
+  );
+}

package/docs/layout/legal-document-shell/examples/tablet-1024.md

@@ -0,0 +1,3 @@
+--- title: Viewport 1024x900 viewport: 1024x900 ---
+
+Nothing overflows horizontally and **no consumer CSS changes** between 1440 and 1024 — the shell's own container query does the work.

package/docs/layout/legal-document-shell/examples/tablet-1024.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { CenteredShell, Flex, LegalDocumentShell, Topbar } from "@godxjp/ui/layout";
+import { Button, Logo, Text } from "@godxjp/ui/general";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+
+import { TERMS_JA } from "../_data";
+
+/**
+ * Viewport fixture — 1024×900 (tablet / small laptop).
+ *
+ * Still above the 56rem container threshold, so the sticky rail is kept and only the document
+ * column narrows: the rail track is fixed (`--legal-document-toc-width`) while the measure track is
+ * `minmax(0, 46rem)`. Nothing overflows horizontally, and no consumer CSS changes between 1440 and
+ * 1024 — the shell's own container query does the work.
+ */
+export default function Demo() {
+  const [activeSection, setActiveSection] = useState("acceptance");
+
+  return (
+    <CenteredShell
+      width="lg"
+      topbar={
+        <Topbar
+          start={
+            <Flex align="center" gap="sm">
+              <Logo glyph="G" />
+              <Text weight="medium">GodX ID</Text>
+            </Flex>
+          }
+          end={<AppSettingPicker kind="locale" />}
+        />
+      }
+      footer={
+        <Text size="xs" tone="muted">
+          2026 GodX 株式会社
+        </Text>
+      }
+    >
+      <LegalDocumentShell
+        title="利用規約"
+        version="2.4"
+        effectiveDate="2026-04-01"
+        summary="本規約は、GodX ID および連携する各サービスの利用条件を定めるものです。ご利用の前に必ずお読みください。"
+        contentsLabel="目次"
+        activeSection={activeSection}
+        onActiveSectionChange={setActiveSection}
+        sections={TERMS_JA.map((section) => ({
+          id: section.id,
+          title: section.title,
+          content: (
+            <Flex direction="col" gap="sm">
+              {section.paragraphs.map((paragraph) => (
+                <Text as="p" key={paragraph}>
+                  {paragraph}
+                </Text>
+              ))}
+            </Flex>
+          ),
+        }))}
+        documentNavigation={
+          <Flex direction="col" gap="xs" role="group" aria-label="法的文書">
+            <Button variant="secondary" size="sm" fullWidth aria-current="page">
+              利用規約
+            </Button>
+            <Button variant="ghost" size="sm" fullWidth>
+              プライバシーポリシー
+            </Button>
+            <Button variant="ghost" size="sm" fullWidth>
+              Cookie ポリシー
+            </Button>
+          </Flex>
+        }
+        footerAction={
+          <Flex gap="sm" wrap>
+            <Button size="sm">同意する</Button>
+            <Button size="sm" variant="outline">
+              PDF をダウンロード
+            </Button>
+          </Flex>
+        }
+      />
+    </CenteredShell>
+  );
+}

package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.md

@@ -0,0 +1,18 @@
+---
+title: Wrapping JA / EN / VI
+viewport: 1440x900
+---
+
+One document, three scripts, deliberately hostile line-breaking material.
+
+| Script | Hazard                                      | Rule that handles it                                       |
+| ------ | ------------------------------------------- | ---------------------------------------------------------- |
+| JA     | no spaces; punctuation may not start a line | `line-break: strict` (kinsoku)                             |
+| EN     | long compounds and a query-string URL       | `overflow-wrap: break-word` — breaks those, and only those |
+| VI     | diacritic-heavy words                       | `word-break: normal` — "nghĩa" is never split mid-word     |
+
+All three read at `--legal-document-body-line-height` (1.8) inside the 46rem measure, and a long `h2`
+wraps within the measure while keeping `--legal-document-section-title-gap` to its body.
+
+Resize the frame down to 390px: the rules are width-independent, so nothing changes except the
+column count.

package/docs/layout/legal-document-shell/examples/wrapping-ja-en-vi.tsx

@@ -0,0 +1,61 @@
+import { CenteredShell, Flex, LegalDocumentShell, Topbar } from "@godxjp/ui/layout";
+import { Button, Logo, Text } from "@godxjp/ui/general";
+
+import { WRAPPING_MIXED } from "../_data";
+
+/**
+ * Wrapping fixture — long JA / EN / VI sections.
+ *
+ * The same document rendered with deliberately hostile line-breaking material:
+ *
+ * - **JA** — no spaces at all; `line-break: strict` applies kinsoku so a 、。」 never starts a line.
+ * - **EN** — very long compounds and a query-string URL; `overflow-wrap: break-word` breaks those
+ *   (and only those) rather than pushing a horizontal scrollbar onto the page.
+ * - **VI** — diacritic-heavy words; `word-break: normal` keeps them whole, so "nghĩa" is never split.
+ *
+ * Heading rhythm holds too: a very long `h2` wraps inside the measure and keeps the
+ * `--legal-document-section-title-gap` to its body. Resize the frame to check every width.
+ */
+export default function Demo() {
+  return (
+    <CenteredShell
+      width="lg"
+      topbar={
+        <Topbar
+          start={
+            <Flex align="center" gap="sm">
+              <Logo glyph="G" />
+              <Text weight="medium">GodX ID</Text>
+            </Flex>
+          }
+        />
+      }
+    >
+      <LegalDocumentShell
+        title="Data Processing Agreement · データ処理契約 · Thoả thuận xử lý dữ liệu"
+        version="1.12"
+        effectiveDate="2026-04-01"
+        summary="A single document carrying Japanese, English and Vietnamese sections. The wrapping, kinsoku and heading rhythm must hold in all three at every width."
+        contentsLabel="Contents"
+        sections={WRAPPING_MIXED.map((section) => ({
+          id: section.id,
+          title: section.title,
+          content: (
+            <Flex direction="col" gap="sm">
+              {section.paragraphs.map((paragraph) => (
+                <Text as="p" key={paragraph}>
+                  {paragraph}
+                </Text>
+              ))}
+            </Flex>
+          ),
+        }))}
+        footerAction={
+          <Button size="sm" variant="outline">
+            Download PDF
+          </Button>
+        }
+      />
+    </CenteredShell>
+  );
+}

package/docs/layout/legal-document-shell/index.md

@@ -0,0 +1,51 @@
+--- title: Overview viewport: 1440x900 ---
+
+The long-form **legal / policy document** surface — terms of service, privacy policy, DPA, cookie policy, SLA, EULA. It renders semantic `article` / `nav` / `section` landmarks and **real anchors**, while every word of legal text stays owned by the consumer (`sections`).
+
+## What the shell owns (so no app re-implements it)
+
+| Capability           | Behaviour                                                                                                                                  |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| Readable measure     | `--legal-document-measure-max-width` (46rem) caps the header, the body and the footer at every viewport.                                   |
+| Sticky contents rail | At **≥56rem of shell width** the contents pin beside a measure-capped column and span the whole scroll.                                    |
+| Compact/mobile rail  | Below 56rem the shell is one column: header → contents → sections → footer. The rail is **static** — never pinned, never capped.           |
+| Scroll spy           | An `IntersectionObserver` marks the section at the reading line `aria-current="location"` (+ a marker + a weight — never colour alone).    |
+| Hash navigation      | `#section-id` on arrival selects that section; activating an entry rewrites the hash with `history.replaceState` (Back is never hijacked). |
+| Scroll offset        | `scroll-margin-block-start: var(--legal-document-scroll-offset)` — a jump lands below sticky chrome with no offset arithmetic.             |
+| Focus handoff        | The target `<section tabIndex={-1}>` takes focus (`preventScroll`) with a **visible ring**, so keyboard users arrive inside it.            |
+| Reduced motion       | The smooth scroll degrades to an instant jump under `prefers-reduced-motion: reduce`.                                                      |
+| i18n                 | `effectiveDate` takes **ISO 8601** in and is rendered with `Intl.DateTimeFormat` in the active locale, inside `<time dateTime>`.           |
+
+## Breakpoint is a CONTAINER query, not a viewport query
+
+Dropped into a narrow pane on a 1440px screen it correctly stays single-column; given a wide pane on a small screen it can split. See the three viewport fixtures under **Examples**.
+
+## API
+
+```tsx
+<LegalDocumentShell
+  title="利用規約"
+  version="2.4"
+  effectiveDate="2026-04-01" // ISO 8601 in → Intl.DateTimeFormat out
+  summary={summary}
+  contentsLabel="目次"
+  sections={sections} // { id, title, content }[]
+  activeSection={activeSection} // controlled …
+  onActiveSectionChange={setActiveSection} // … pair; omit both for uncontrolled
+  documentNavigation={switcher} // rail slot, above the contents
+  footerAction={actions} // below the last section
+/>
+```
+
+`defaultActiveSection` gives the uncontrolled form (defaults to the first section).
+
+## Theming
+
+Every value is a `--legal-document-*` component token — the measure, the rail width/offset, the section rhythm, the body leading, the active-entry colours (role-mirror knobs, so a scoped `[data-tenant]` / `.dark` override reaches them).
+
+```css
+--legal-document-toc-border: 1px solid hsl(var(--border));
+--legal-document-header-border: 1px solid hsl(var(--border));
+```
+
+A consumer needs **no** `className` and no `.legal-*` CSS.

package/docs/layout/legal-document-shell/index.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { CenteredShell, Flex, LegalDocumentShell, Topbar } from "@godxjp/ui/layout";
+import { Button, Logo, Text } from "@godxjp/ui/general";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+
+import { TERMS_JA } from "./_data";
+
+/**
+ * LegalDocumentShell — the long-form legal/policy document surface (terms, privacy, DPA, cookie
+ * policy, SLA) with a table of contents.
+ *
+ * This is the canonical hosted legal screen: a `CenteredShell` (brand bar + locale picker + page
+ * footer) whose column holds the document. The shell owns the geometry AND the behaviour — sticky
+ * contents rail at ≥56rem, scroll-spy `aria-current`, hash deep links with a token-driven scroll
+ * offset, focus handoff into the target section, reduced-motion-aware scrolling. All legal text is
+ * consumer-owned and arrives through `sections`.
+ *
+ * Shown here: controlled `activeSection` / `onActiveSectionChange`, `version` + ISO `effectiveDate`
+ * (formatted with `Intl.DateTimeFormat`), `summary`, `contentsLabel`, the `documentNavigation` rail
+ * slot and the `footerAction` slot. Composed only from real @godxjp/ui components — zero custom CSS.
+ */
+
+const DOCUMENTS = [
+  { id: "terms", label: "利用規約" },
+  { id: "privacy", label: "プライバシーポリシー" },
+  { id: "cookies", label: "Cookie ポリシー" },
+];
+
+export default function Demo() {
+  const [documentId, setDocumentId] = useState("terms");
+  const [activeSection, setActiveSection] = useState("acceptance");
+
+  return (
+    <CenteredShell
+      width="lg"
+      topbar={
+        <Topbar
+          start={
+            <Flex align="center" gap="sm">
+              <Logo glyph="G" />
+              <Text weight="medium">GodX ID</Text>
+            </Flex>
+          }
+          end={<AppSettingPicker kind="locale" />}
+        />
+      }
+      footer={
+        <Text size="xs" tone="muted">
+          2026 GodX 株式会社
+        </Text>
+      }
+    >
+      <LegalDocumentShell
+        title="利用規約"
+        version="2.4"
+        effectiveDate="2026-04-01"
+        summary="本規約は、GodX ID および連携する各サービスの利用条件を定めるものです。ご利用の前に必ずお読みください。"
+        contentsLabel="目次"
+        sections={TERMS_JA.map((section) => ({
+          id: section.id,
+          title: section.title,
+          content: (
+            <Flex direction="col" gap="sm">
+              {section.paragraphs.map((paragraph) => (
+                <Text as="p" key={paragraph}>
+                  {paragraph}
+                </Text>
+              ))}
+            </Flex>
+          ),
+        }))}
+        activeSection={activeSection}
+        onActiveSectionChange={setActiveSection}
+        documentNavigation={
+          <Flex direction="col" gap="xs" role="group" aria-label="法的文書">
+            {DOCUMENTS.map((document) => (
+              <Button
+                key={document.id}
+                variant={document.id === documentId ? "secondary" : "ghost"}
+                size="sm"
+                fullWidth
+                aria-current={document.id === documentId ? "page" : undefined}
+                onClick={() => setDocumentId(document.id)}
+              >
+                {document.label}
+              </Button>
+            ))}
+          </Flex>
+        }
+        footerAction={
+          <Flex gap="sm" wrap>
+            <Button size="sm">同意する</Button>
+            <Button size="sm" variant="outline">
+              PDF をダウンロード
+            </Button>
+          </Flex>
+        }
+      />
+    </CenteredShell>
+  );
+}