@godxjp/ui 31.31.7 → 32.0.0

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

@@ -1,70 +0,0 @@
-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

@@ -1,3 +0,0 @@
---- 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

@@ -1,84 +0,0 @@
-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

@@ -1,18 +0,0 @@
----
-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

@@ -1,61 +0,0 @@
-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

@@ -1,51 +0,0 @@
---- 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

@@ -1,101 +0,0 @@
-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>
-  );
-}

package/docs/layout/masonry.tsx

@@ -1,291 +0,0 @@
-import { useState } from "react";
-
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Thumbnail,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  AppShell,
-  Flex,
-  Masonry,
-  PageContainer,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-  type MasonryItemProp,
-} from "@godxjp/ui/layout";
-import { Bot, Images, Inbox, MessageSquare, Settings } from "lucide-react";
-
-import coverTerrain from "../assets/cover-terrain.svg";
-import shotPortrait from "../assets/shot-portrait.svg";
-
-/**
- * Masonry — Ant Design `Masonry` (6.0.0). A real inbox of mixed-height notes, not a tidy row of
- * equal cards: the tidy demo is the one that hides every defect this layout actually has.
- *
- * Every card on this page is an EDGE:
- * — a one-line note beside a twelve-line one, in the same run;
- * — an IMAGE tile whose height is declared so the columns do not jump when it decodes;
- * — a CJK tile of real Japanese prose at --line-height-body 1.7, which is taller per character
- *   than the Latin beside it;
- * — the single-column case, which is what every narrow viewport collapses to;
- * — a tile PINNED to the first column, which is where reading order and visual order part company;
- * — a responsive `columns` map, driven live by the viewport.
- *
- * Composed only from real @godxjp/ui components.
- */
-const sections: SidebarSectionProp[] = [
-  {
-    label: "受信",
-    items: [
-      { id: "inbox", label: "メモ", icon: Inbox },
-      { id: "gallery", label: "素材", icon: Images },
-      { id: "chat", label: "やりとり", icon: MessageSquare },
-      { id: "agents", label: "エージェント", icon: Bot },
-    ],
-  },
-  { label: "管理", items: [{ id: "settings", label: "設定", icon: Settings }] },
-];
-
-/** A one-line note. The shortest thing this layout ever has to place. */
-function ShortNote({ title, body }: { title: string; body: string }) {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{title}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Text size="sm">{body}</Text>
-      </CardContent>
-    </Card>
-  );
-}
-
-const LONG_BODY = [
-  "The rule the team keeps re-deriving: a masonry has two orders and they do not agree.",
-  "DOM order is the order of `items`, always, because every tile is absolutely positioned and",
-  "nothing reorders the markup. Visual order is the packing: tile four lands under whichever of",
-  "the first three columns is shortest, so it can paint ABOVE a tile that precedes it in the",
-  "source. That is the form, and the consequence is one line long: order the items by importance,",
-  "never by height.",
-  "",
-  "It matters most for the keyboard. Tab visits this card before the short one beside it even",
-  "when this card's top edge sits lower on the screen, and a screen reader reads them in the same",
-  "sequence. The alternative implementation, CSS `column-count`, is worse on exactly that axis:",
-  "it fills the first column to the bottom before starting the second, so in a thirty-tile feed",
-  "the second tile in the DOM paints at the bottom-left corner of the viewport.",
-].join(" ");
-
-const JA_BODY =
-  "日本語の本文は 1 文字あたりの高さが欧文より大きい。全角の仮名と漢字が em ボックスを埋めるので、" +
-  "--line-height-body の 1.7 がそのまま行の高さに効く。同じ文字数でも、欧文の隣に置くと列の高さが" +
-  "先に伸びるのはそのためで、段組みの詰め方はこの差をそのまま受け取る。短い注記と長い注記を同じ列に" +
-  "並べたときに、どちらが先に読まれるかは見た目ではなく items の順序が決める。ここを取り違えると、" +
-  "画面では上にあるカードが、読み上げでは最後に来る。";
-
-export default function MasonryDoc() {
-  const [columns, setColumns] = useState(3);
-  const [placed, setPlaced] = useState<number[]>([]);
-
-  const feed: MasonryItemProp[] = [
-    {
-      key: "one-line",
-      children: <ShortNote title="請求書 #4821" body="承認済み。" />,
-    },
-    {
-      key: "image",
-      // The declared height is what keeps the columns still while the image decodes: without it
-      // every tile below this one jumps the moment the bytes land.
-      height: 268,
-      children: (
-        <Card>
-          <CardContent>
-            <Thumbnail src={coverTerrain} width={480} height={270} alt="" />
-            <Text size="xs" tone="muted">
-              cover-terrain.svg · 480×270
-            </Text>
-          </CardContent>
-        </Card>
-      ),
-    },
-    {
-      key: "long",
-      children: (
-        <Card>
-          <CardHeader>
-            <CardTitle>Reading order vs visual order</CardTitle>
-            <CardDescription>Twelve lines, beside a one-line card.</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Text size="sm">{LONG_BODY}</Text>
-          </CardContent>
-        </Card>
-      ),
-    },
-    {
-      key: "ja",
-      children: (
-        <Card>
-          <CardHeader>
-            <CardTitle>行の高さは言語で変わる</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Text size="sm">{JA_BODY}</Text>
-          </CardContent>
-        </Card>
-      ),
-    },
-    {
-      key: "badge",
-      children: (
-        <Card>
-          <CardContent>
-            <Flex gap="sm" wrap>
-              <Badge>下書き</Badge>
-              <Badge variant="secondary">保留</Badge>
-              <Badge variant="outline">期限切れ</Badge>
-            </Flex>
-          </CardContent>
-        </Card>
-      ),
-    },
-    {
-      key: "pinned",
-      // PINNED. It stays fifth in the reading order whatever the packing does with it.
-      column: 0,
-      children: (
-        <Card>
-          <CardHeader>
-            <CardTitle>column: 0</CardTitle>
-            <CardDescription>
-              最初の列に固定。読み上げの順番は五番目のまま動かない。
-            </CardDescription>
-          </CardHeader>
-        </Card>
-      ),
-    },
-    {
-      key: "portrait",
-      height: 232,
-      children: (
-        <Card>
-          <CardContent>
-            <Thumbnail src={shotPortrait} width={360} height={640} alt="モバイル版の一覧画面" />
-          </CardContent>
-        </Card>
-      ),
-    },
-    {
-      key: "two-line",
-      children: (
-        <ShortNote
-          title="経費精算"
-          body="領収書が二枚不足しています。差し戻し前に担当者へ確認してください。"
-        />
-      ),
-    },
-    {
-      key: "shortest",
-      children: <ShortNote title="勤怠" body="—" />,
-    },
-  ];
-
-  return (
-    <AppShell
-      sidebar={
-        <Sidebar
-          activeId="inbox"
-          sections={sections}
-          onSelect={() => {}}
-          product={{ name: "CoreDesk", role: "メモ", color: "hsl(var(--primary))" }}
-        />
-      }
-      topbar={<Topbar />}
-    >
-      <PageContainer
-        title="段組みメモ"
-        subtitle="Masonry · 高さの揃わないカードを、そのつど一番低い列へ落としていく"
-      >
-        {/* THE REAL SCREEN. Responsive columns, a mixed feed, and the layout report. */}
-        <Flex direction="col" gap="sm">
-          <Flex gap="sm" align="center" wrap>
-            <Text size="sm" weight="medium">
-              columns · {columns} · fresh
-            </Text>
-            {[1, 2, 3, 4].map((count) => (
-              <Button
-                key={count}
-                size="sm"
-                variant={count === columns ? "default" : "outline"}
-                onClick={() => setColumns(count)}
-              >
-                {count}
-              </Button>
-            ))}
-            <Text size="xs" tone="muted">
-              {placed.length === 0
-                ? "onLayoutChange 待ち"
-                : `onLayoutChange · 列ごとの枚数 ${placed.join(" / ")}`}
-            </Text>
-          </Flex>
-          {/* `fresh` is ON here, and the reason is a measurement, not a preference: at 390px the
-              long English card re-wraps by one line AFTER the pass that measured it, and with the
-              container observer alone (antd's default) nothing notices — the container reported
-              2472.2px while its own content ended at 2489.7px. `fresh` observes each tile, so the
-              two agree. A feed with images and a live column count is exactly what it is for. */}
-          <Masonry
-            fresh
-            columns={columns}
-            gap="md"
-            items={feed}
-            onLayoutChange={(layout) => {
-              const perColumn = new Array<number>(columns).fill(0);
-              for (const entry of layout) perColumn[entry.column] += 1;
-              setPlaced(perColumn);
-            }}
-          />
-        </Flex>
-
-        {/* THE NARROW CASE, on purpose and at full width: one column is what every phone gets,
-            and it is the arrangement a three-column demo never shows. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            単一列 · columns={1}
-          </Text>
-          <Text size="xs" tone="muted">
-            狭い画面はここに収束する。段組みが消えても読み上げの順番は同じ。DOM の順序は items
-            の順序のまま。
-          </Text>
-          <Masonry columns={1} gap="sm" items={feed.slice(0, 4)} />
-        </Flex>
-
-        {/* THE VIEWPORT MAP. `columns` takes the same step names Flex direction does. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            columns={"{ base: 1, sm: 2, md: 3, xl: 4 }"}
-          </Text>
-          <Text size="xs" tone="muted">
-            sm 40rem · md 48rem · lg 64rem · xl 80rem。Ant Design の `xs` はここでは `base`、`xxl`
-            はない。
-          </Text>
-          <Masonry columns={{ base: 1, sm: 2, md: 3, xl: 4 }} gap="md" items={feed.slice(2)} />
-        </Flex>
-
-        {/* NO GAP AT ALL — Ant Design's own default, which is what a token-less masonry looks
-            like. Worth seeing once so the `gap` step is a decision rather than a habit. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            gap 省略 · Ant Design の既定は 0
-          </Text>
-          <Masonry columns={3} items={feed.slice(0, 5)} />
-        </Flex>
-      </PageContainer>
-    </AppShell>
-  );
-}