@godxjp/ui 19.1.0 → 19.3.1

package/docs/layout/resizable-panel.tsx

@@ -0,0 +1,419 @@
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  Flex,
+  PageContainer,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@godxjp/ui/layout";
+import { GripHorizontal, GripVertical, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import * as React from "react";
+import type { Layout, PanelImperativeHandle } from "react-resizable-panels";
+
+/**
+ * ResizablePanel · react-resizable-panels v4 compound primitive exported as
+ * ResizablePanelGroup / ResizablePanel / ResizableHandle. Always compose:
+ * ResizablePanelGroup wraps panels+handles; ResizableHandle sits between panels;
+ * ResizablePanel holds content. Group orientation is set with orientation
+ * ("horizontal" | "vertical"). minSize/maxSize prevent zero-collapse; collapsible
+ * + collapsedSize enable collapse-to-zero; defaultLayout + onLayoutChanged persist
+ * sizes. Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="ResizablePanel"
+      subtitle="ResizablePanelGroup + ResizablePanel + ResizableHandle · サイズ変更可能な分割レイアウト"
+    >
+      <Flex direction="col" gap="lg">
+        <HorizontalCard />
+        <VerticalCard />
+        <CollapsibleCard />
+        <PersistenceCard />
+        <DisabledCard />
+        <ThreePaneCard />
+      </Flex>
+    </PageContainer>
+  );
+}
+
+const frameStyle: React.CSSProperties = {
+  border: "1px solid var(--color-border)",
+  borderRadius: "var(--radius-md)",
+  overflow: "hidden",
+};
+
+/** orientation="horizontal" (default) · list + detail master/detail layout. */
+function HorizontalCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>水平分割 · リスト + 詳細</CardTitle>
+        <CardDescription>
+          orientation=&quot;horizontal&quot;（既定）。ResizableHandle をパネル間に配置。minSize
+          でゼロ崩壊を防ぐ。ハンドルをダブルクリックすると defaultSize に戻る。
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div style={{ height: "16rem", ...frameStyle }}>
+          <ResizablePanelGroup orientation="horizontal">
+            <ResizablePanel id="list-panel" defaultSize="35%" minSize="20%" maxSize="60%">
+              {/* No inner overflow: the panel is already the scroll container, and letting it own
+                  the scrolling is what earns the keyboard tab stop ResizablePanel now manages. */}
+              <Flex direction="col" gap="sm" style={{ padding: "1rem", height: "100%" }}>
+                <Text size="xs" weight="medium" tone="muted">
+                  請求書リスト
+                </Text>
+                {[
+                  { id: "INV-2024-001", label: "株式会社アルファ", status: "succeeded" },
+                  { id: "INV-2024-002", label: "合同会社ベータ", status: "pending" },
+                  { id: "INV-2024-003", label: "有限会社ガンマ", status: "scheduled" },
+                ].map((item) => (
+                  <Flex key={item.id} direction="row" gap="xs" align="center" justify="between">
+                    <Flex direction="col" gap="xs">
+                      <Text weight="medium">{item.id}</Text>
+                      <Text size="xs" tone="muted">
+                        {item.label}
+                      </Text>
+                    </Flex>
+                    <Badge status={item.status} />
+                  </Flex>
+                ))}
+              </Flex>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel id="detail-panel" defaultSize="65%" minSize="40%">
+              <Flex direction="col" gap="sm" style={{ padding: "1rem", height: "100%" }}>
+                <Text size="xs" weight="medium" tone="muted">
+                  詳細
+                </Text>
+                <Text weight="bold">INV-2024-001</Text>
+                <Flex direction="col" gap="xs">
+                  <Text>株式会社アルファ</Text>
+                  <Text tone="muted">金額: ¥1,320,000（税込）</Text>
+                  <Text tone="muted">支払期日: 2024-02-28</Text>
+                </Flex>
+                <Flex direction="row" gap="xs" wrap>
+                  <Button size="sm">承認</Button>
+                  <Button size="sm" variant="outline">
+                    却下
+                  </Button>
+                </Flex>
+              </Flex>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+/** orientation="vertical" · top/bottom split with a grip handle. */
+function VerticalCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>垂直分割 · エディタ + プレビュー</CardTitle>
+        <CardDescription>
+          orientation=&quot;vertical&quot; で上下分割。コードエディタ + 出力プレビューやフォーム +
+          確認画面などの用途。ResizableHandle に children を渡すとグリップアイコンで掴みやすくなる。
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div style={{ height: "18rem", ...frameStyle }}>
+          <ResizablePanelGroup orientation="vertical">
+            <ResizablePanel id="editor-panel" defaultSize="50%" minSize="25%">
+              <Flex direction="col" gap="sm" style={{ padding: "1rem", height: "100%" }}>
+                <Text size="xs" weight="medium" tone="muted">
+                  仕訳エディタ
+                </Text>
+                <Flex direction="col" gap="xs">
+                  <Flex direction="row" gap="sm" align="center" justify="between">
+                    <Text>売掛金 / 売上高</Text>
+                    <Badge tone="info">借方 ¥880,000</Badge>
+                  </Flex>
+                  <Flex direction="row" gap="sm" align="center" justify="between">
+                    <Text>仮受消費税 / 売上高</Text>
+                    <Badge variant="outline">貸方 ¥880,000</Badge>
+                  </Flex>
+                </Flex>
+              </Flex>
+            </ResizablePanel>
+            <ResizableHandle>
+              <GripHorizontal aria-hidden="true" size={16} />
+            </ResizableHandle>
+            <ResizablePanel id="preview-panel" defaultSize="50%" minSize="25%">
+              <Flex direction="col" gap="sm" style={{ padding: "1rem", height: "100%" }}>
+                <Text size="xs" weight="medium" tone="muted">
+                  プレビュー
+                </Text>
+                <Text tone="muted">
+                  仕訳内容のプレビューがここに表示されます。貸借が一致していることを確認してください。
+                </Text>
+                <Flex direction="row" gap="xs">
+                  <Button size="sm">保存</Button>
+                  <Button size="sm" variant="outline">
+                    クリア
+                  </Button>
+                </Flex>
+              </Flex>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * collapsible + collapsedSize · the sidebar collapses to zero and an imperative
+ * panelRef toggle expands/collapses it. Seeded collapsed at rest so the
+ * collapsed state is visible in a static screenshot.
+ */
+function CollapsibleCard() {
+  const panelRef = React.useRef<PanelImperativeHandle | null>(null);
+  const [collapsed, setCollapsed] = React.useState(true);
+
+  const toggle = () => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    if (panel.isCollapsed()) {
+      panel.expand();
+      setCollapsed(false);
+    } else {
+      panel.collapse();
+      setCollapsed(true);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>折りたたみ · collapsible サイドバー</CardTitle>
+        <CardDescription>
+          collapsible + collapsedSize=&#123;0&#125; でサイドバーをゼロまで折りたためる。panelRef の
+          collapse()/expand() でトグル。minSize 未満までドラッグしても自動で折りたたまれる。
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Flex direction="col" gap="sm">
+          <Flex direction="row" gap="xs" align="center">
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={toggle}
+              aria-pressed={!collapsed}
+              aria-label={collapsed ? "サイドバーを開く" : "サイドバーを閉じる"}
+            >
+              {collapsed ? (
+                <PanelLeftOpen aria-hidden="true" size={16} />
+              ) : (
+                <PanelLeftClose aria-hidden="true" size={16} />
+              )}
+              {collapsed ? "サイドバーを開く" : "サイドバーを閉じる"}
+            </Button>
+            <Text size="xs" tone="muted">
+              {collapsed ? "折りたたみ中" : "展開中"}
+            </Text>
+          </Flex>
+          <div style={{ height: "14rem", ...frameStyle }}>
+            <ResizablePanelGroup orientation="horizontal">
+              <ResizablePanel
+                panelRef={panelRef}
+                id="collapsible-sidebar"
+                collapsible
+                collapsedSize="0%"
+                defaultSize="0%"
+                minSize="15%"
+                maxSize="30%"
+                onResize={(size) => setCollapsed(size.asPercentage === 0)}
+              >
+                <Flex direction="col" gap="xs" style={{ padding: "0.75rem", height: "100%" }}>
+                  <Text size="xs" weight="medium" tone="muted">
+                    ナビゲーション
+                  </Text>
+                  {["売上", "仕入", "経費", "固定資産"].map((item) => (
+                    <Text key={item} size="sm" tone="muted">
+                      {item}
+                    </Text>
+                  ))}
+                </Flex>
+              </ResizablePanel>
+              <ResizableHandle>
+                <GripVertical aria-hidden="true" size={16} />
+              </ResizableHandle>
+              <ResizablePanel id="collapsible-main" defaultSize="100%" minSize="40%">
+                <Flex direction="col" gap="xs" style={{ padding: "0.75rem", height: "100%" }}>
+                  <Text size="xs" weight="medium" tone="muted">
+                    メインコンテンツ
+                  </Text>
+                  <Text tone="muted">サイドバーが折りたたまれると本文が全幅に広がる。</Text>
+                </Flex>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+        </Flex>
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * defaultLayout + onLayoutChanged + a stable id · sizes persist across reloads.
+ * In v4 a bare id does NOT persist; you must seed defaultLayout and capture
+ * onLayoutChanged. Here the saved layout is held in state and echoed on screen.
+ */
+function PersistenceCard() {
+  // Layout is a map of panel id -> flexGrow value (relative, not %).
+  const [layout, setLayout] = React.useState<Layout>({
+    "persisted-nav": 30,
+    "persisted-content": 70,
+  });
+
+  const total = Object.values(layout).reduce((sum, n) => sum + n, 0) || 1;
+  const ratio = [layout["persisted-nav"], layout["persisted-content"]]
+    .map((n) => `${Math.round(((n ?? 0) / total) * 100)}%`)
+    .join(" / ");
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>永続化 · defaultLayout + onLayoutChanged</CardTitle>
+        <CardDescription>
+          v4 では id 単体ではサイズは保存されない。defaultLayout で初期サイズを与え、onLayoutChanged
+          を localStorage 等に保存して復元する。現在の比率: {ratio}。
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div style={{ height: "14rem", ...frameStyle }}>
+          <ResizablePanelGroup
+            id="persisted-group"
+            orientation="horizontal"
+            defaultLayout={layout}
+            onLayoutChanged={setLayout}
+          >
+            <ResizablePanel id="persisted-nav" defaultSize="30%" minSize="20%" maxSize="50%">
+              <Flex direction="col" gap="xs" style={{ padding: "0.75rem", height: "100%" }}>
+                <Text size="xs" weight="medium" tone="muted">
+                  勘定科目
+                </Text>
+                <Text tone="muted">この比率は保存されます。</Text>
+              </Flex>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel id="persisted-content" defaultSize="70%" minSize="30%">
+              <Flex direction="col" gap="xs" style={{ padding: "0.75rem", height: "100%" }}>
+                <Text size="xs" weight="medium" tone="muted">
+                  仕訳一覧
+                </Text>
+                <Text tone="muted">ハンドルを動かすと上の比率表示が即時に更新される。</Text>
+              </Flex>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * disabled · read-only layout. Group disabled freezes all panels; an individual
+ * Separator can be disabled, and disableDoubleClick suppresses double-click reset.
+ */
+function DisabledCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>無効化 · disabled / disableDoubleClick</CardTitle>
+        <CardDescription>
+          ResizablePanelGroup に disabled
+          を渡すとレイアウトを固定（読み取り専用）にできる。Separator 単位の
+          disabled、ダブルクリックでのリセットを抑止する disableDoubleClick
+          もある。下の例はハンドルがグレーアウトし操作できない。
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div style={{ height: "12rem", ...frameStyle }}>
+          <ResizablePanelGroup orientation="horizontal" disabled>
+            <ResizablePanel id="disabled-left" defaultSize="40%" minSize="20%">
+              <Flex direction="col" gap="xs" style={{ padding: "0.75rem", height: "100%" }}>
+                <Text size="xs" weight="medium" tone="muted">
+                  確定済みレイアウト
+                </Text>
+                <Text tone="muted">承認後は配置を変更できません。</Text>
+              </Flex>
+            </ResizablePanel>
+            <ResizableHandle disabled disableDoubleClick />
+            <ResizablePanel id="disabled-right" defaultSize="60%" minSize="20%">
+              <Flex direction="col" gap="xs" style={{ padding: "0.75rem", height: "100%" }}>
+                <Text size="xs" weight="medium" tone="muted">
+                  プレビュー
+                </Text>
+                <Text tone="muted">読み取り専用ビュー。</Text>
+              </Flex>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+/** Three panes · multiple handles compose 3+ panes (IDE-style layout). */
+function ThreePaneCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>3ペイン · サイドバー + メイン + インスペクタ</CardTitle>
+        <CardDescription>
+          ResizableHandle を複数配置することで3ペイン以上に分割できる。IDE
+          スタイルのコードエディタやダッシュボードビルダーに適している。
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div style={{ height: "14rem", ...frameStyle }}>
+          <ResizablePanelGroup orientation="horizontal">
+            <ResizablePanel id="sidebar-3pane" defaultSize="20%" minSize="15%" maxSize="30%">
+              <Flex direction="col" gap="xs" style={{ padding: "0.75rem", height: "100%" }}>
+                <Text size="xs" weight="medium" tone="muted">
+                  ナビゲーション
+                </Text>
+                {["売上", "仕入", "経費", "固定資産"].map((item) => (
+                  <Text key={item} size="sm" tone="muted">
+                    {item}
+                  </Text>
+                ))}
+              </Flex>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel id="main-3pane" defaultSize="55%" minSize="30%">
+              <Flex direction="col" gap="xs" style={{ padding: "0.75rem", height: "100%" }}>
+                <Text size="xs" weight="medium" tone="muted">
+                  メインコンテンツ
+                </Text>
+                <Text tone="muted">勘定科目ツリーや仕訳一覧</Text>
+              </Flex>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel id="inspector-3pane" defaultSize="25%" minSize="15%" maxSize="40%">
+              <Flex direction="col" gap="xs" style={{ padding: "0.75rem", height: "100%" }}>
+                <Text size="xs" weight="medium" tone="muted">
+                  インスペクタ
+                </Text>
+                <Text tone="muted">選択項目の詳細・メタデータ</Text>
+              </Flex>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/docs/layout/responsive-grid.tsx

@@ -0,0 +1,243 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  StatCard,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer, ResponsiveGrid, SplitPane } from "@godxjp/ui/layout";
+
+/**
+ * ResponsiveGrid · equal-width multi-column tile grid with automatic responsive
+ * collapse (CSS container queries, not viewport). It OWNS its query container
+ * (container-type: inline-size), so it responds to the width available to the grid
+ * with no external container-type declaration (gh#165). Direct children are typically
+ * StatCard (self-contained bordered card · never wrap in Card/CardContent) or
+ * Card+CardContent for richer tile bodies. columns accepts a number OR breakpoint
+ * object { sm?, md?, lg? } — or use the named `preset` prop (e.g. "pricing-plans") for a
+ * recognised collection shape instead of hand-rolling the breakpoint map. Composed only from
+ * real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="ResponsiveGrid"
+      subtitle="等幅タイルグリッド · KPI・カード比較・ダッシュボード行"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>コンテナクエリで折り返し（自己所有のクエリコンテナ）</CardTitle>
+            <CardDescription>
+              同じ columns=&#123;4&#125; でも、コンテナ幅で列数が変わる。左の広い領域は 4
+              列、右の狭いサイドバー（約 20rem）は 1 列に折り返す。ビューポート幅は同一なので、
+              折り返しの基準がコンテナ幅であることが分かる。ResponsiveGrid は自身のクエリコンテナ
+              （container-type: inline-size）を持つため、外側に @container を用意しなくても正しく
+              折り返す（gh#165）。閾値はコンテナ幅 40 / 48 / 64rem。 列間の gap は
+              var(--space-stack-md) に固定で、prop では変更できない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <SplitPane
+              asideWidth="sm"
+              aside={
+                <Flex direction="col" gap="sm">
+                  <Text tone="muted">狭いコンテナ（約 20rem）→ sm=1 列</Text>
+                  {/* No wrapping `@container` needed — ResponsiveGrid OWNS its query container (gh#165). */}
+                  <ResponsiveGrid columns={4}>
+                    <StatCard label="今日の入金" value="¥420,000" />
+                    <StatCard label="未処理" value="6 件" />
+                  </ResponsiveGrid>
+                </Flex>
+              }
+            >
+              <Flex direction="col" gap="sm">
+                <Text tone="muted">広いコンテナ → lg=4 列</Text>
+                <ResponsiveGrid columns={4}>
+                  <StatCard label="月次売上" value="¥12,400,000" delta="+8%" hint="先月比" />
+                  <StatCard label="請求件数" value="486" delta="+12%" />
+                  <StatCard label="売掛金残高" value="¥3,180,000" hint="未回収 23件" />
+                  <StatCard label="回収率" value="97.2%" delta="+0.4%" />
+                </ResponsiveGrid>
+              </Flex>
+            </SplitPane>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Container stress · 320 / 768px 相当（外側コンテナ不要）</CardTitle>
+            <CardDescription>
+              固定幅の親の中でも、同じ columns=&#123;4&#125; が親幅で列数を変える。親には
+              container-type を付けていない。ResponsiveGrid が自身のスコープでクエリするため、
+              外側にコンテナ宣言がなくても 1 列に潰れない（gh#165）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {["max-w-80", "max-w-3xl"].map((width) => (
+                <div
+                  key={width}
+                  className={width}
+                  style={{ border: "1px solid hsl(var(--border))", padding: "var(--space-2)" }}
+                >
+                  <ResponsiveGrid columns={4}>
+                    {Array.from({ length: 4 }, (_, index) => (
+                      <div
+                        key={index}
+                        className="bg-muted rounded text-center"
+                        style={{ padding: "var(--space-3)" }}
+                      >
+                        {index + 1}
+                      </div>
+                    ))}
+                  </ResponsiveGrid>
+                </div>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>columns=&#123;4&#125; · KPI 行（StatCard 直置き）</CardTitle>
+            <CardDescription>
+              StatCard は自身がボーダー付き Card なので Card/CardContent でラップしない。 columns
+              数値指定時は sm=min(n,2) / md=min(n,3) / lg=n に自動変換。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={4}>
+              <StatCard label="月次売上" value="¥12,400,000" delta="+8%" hint="先月比" />
+              <StatCard label="請求件数" value="486" delta="+12%" />
+              <StatCard label="売掛金残高" value="¥3,180,000" hint="未回収 23件" />
+              <StatCard label="回収率" value="97.2%" delta="+0.4%" />
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>columns=&#123;3&#125; · 法人比較（Card+CardContent）</CardTitle>
+            <CardDescription>
+              StatCard 以外のリッチなタイルは Card+CardContent で構成。 columns=&#123;3&#125; → sm=2
+              / md=3 / lg=3 に自動変換。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={3}>
+              <Card>
+                <CardHeader>
+                  <CardTitle>東京本社</CardTitle>
+                  <CardDescription>JP-001</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Flex direction="col" gap="xs">
+                    <Text>売上: ¥8,200,000</Text>
+                    <Text tone="muted">取引先: 124社</Text>
+                  </Flex>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader>
+                  <CardTitle>大阪支社</CardTitle>
+                  <CardDescription>JP-002</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Flex direction="col" gap="xs">
+                    <Text>売上: ¥3,100,000</Text>
+                    <Text tone="muted">取引先: 57社</Text>
+                  </Flex>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader>
+                  <CardTitle>福岡拠点</CardTitle>
+                  <CardDescription>JP-003</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Flex direction="col" gap="xs">
+                    <Text>売上: ¥1,060,000</Text>
+                    <Text tone="muted">取引先: 31社</Text>
+                  </Flex>
+                </CardContent>
+              </Card>
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              columns=&#123;&#123; sm: 1, md: 2, lg: 4 &#125;&#125; ·
+              ブレークポイントオブジェクト（3 段制御）
+            </CardTitle>
+            <CardDescription>
+              ブレークポイント指定オブジェクト: sm / md / lg
+              キーでコンテナ幅ごとの列数を個別に制御。
+              未指定キーは下位にフォールバック（lg→md→sm、md→sm、sm 既定 1）。 数値指定（sm=min(n,2)
+              / md=min(n,3) / lg=n の自動変換）では作れない 「sm=1 / md=2 /
+              lg=4」のような任意の組み合わせを表現できる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
+              <StatCard layout="inline" label="契約金額" value="¥4,800,000" />
+              <StatCard layout="inline" label="消費税額" value="¥480,000" hint="税率 10%" />
+              <StatCard layout="inline" label="支払済" value="¥2,400,000" delta="-50%" inverse />
+              <StatCard layout="inline" label="残額" value="¥2,400,000" />
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              preset=&quot;pricing-plans&quot; · 課金プラン一覧（3/3/1）
+            </CardTitle>
+            <CardDescription>
+              名前付きコレクション geometry: コンテナ幅が lg ステップ（64rem）に達するまでは 1
+              列、そこから 3 列に切り替わる。ResponsiveGrid には lg
+              より上のステップが無いため、1024px 相当でも 1440px 相当でも同じ 3 列になる —
+              課金プランカタログの「3/3/1」契約 （dxs-platform/platform#333）。`columns` の代わりに
+              `preset` を渡すだけで、呼び出し側がブレークポイント値を自作する必要がない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid preset="pricing-plans">
+              <Card>
+                <CardHeader>
+                  <CardTitle>スタンダード</CardTitle>
+                  <CardDescription>¥9,800 / 月</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Text tone="muted">小規模チーム向けの基本プラン。</Text>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader>
+                  <CardTitle>プロフェッショナル</CardTitle>
+                  <CardDescription>¥29,800 / 月</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Text tone="muted">成長企業向けの推奨プラン。</Text>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader>
+                  <CardTitle>エンタープライズ</CardTitle>
+                  <CardDescription>お問い合わせ</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Text tone="muted">大規模組織向けのカスタムプラン。</Text>
+                </CardContent>
+              </Card>
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}