@godxjp/ui 31.31.7 → 32.0.0

package/docs/feedback/sheet.tsx

@@ -1,510 +0,0 @@
-import { useState } from "react";
-import {
-  Sheet,
-  SheetBody,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-  useSheetResponsiveMode,
-} from "@godxjp/ui/feedback";
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  Form,
-  FormField,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { SlidersHorizontal } from "lucide-react";
-
-/** Every branch of SheetHeader's `tone`, in the order the vocabulary declares them. */
-const headerTones = [
-  "default",
-  "success",
-  "warning",
-  "destructive",
-  "info",
-  "muted",
-  "neutral",
-] as const;
-
-/** Order lines behind the non-modal sheet — they stay editable while it is open. */
-const initialLines = [
-  { id: "coffee", name: "ブレンドコーヒー", unitPrice: 480, quantity: 2 },
-  { id: "sandwich", name: "ミックスサンド", unitPrice: 650, quantity: 1 },
-  { id: "cake", name: "チーズケーキ", unitPrice: 520, quantity: 1 },
-];
-
-const yen = new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" });
-
-/**
- * Sheet · side-panel drawer (Radix Dialog). Slides in from an edge. Compose
- * Sheet > SheetTrigger (asChild) > SheetContent(side) > SheetHeader >
- * SheetTitle (a11y required) > scrollable body > SheetFooter.
- *
- * SheetFooter is a PINNED action bar: it sticks to the bottom
- * via mt-auto, draws a full-bleed top border, and right-aligns its actions with
- * the PRIMARY button rightmost. A destructive / clear / reset action goes
- * far-LEFT · give THAT button className="me-auto". Never stack footer buttons
- * full-width or center them. See cardinal rule #41 "Drawer & dialog footer layout".
- *
- * Fields are real FormField + Input + Select primitives · never faked with
- * styled <span>/<div>. Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  // Card 1 · pre-opened so the pinned footer + clear-left/apply-right layout is visible at rest.
-  const [filterOpen, setFilterOpen] = useState(true);
-  const [account, setAccount] = useState("all");
-  const [status, setStatus] = useState("all");
-  const [source, setSource] = useState("all");
-  const [minAmount, setMinAmount] = useState("");
-  const [maxAmount, setMaxAmount] = useState("");
-
-  // Card 2 · quick-edit form: Cancel + Save, both right-aligned (primary rightmost).
-  const [editOpen, setEditOpen] = useState(false);
-  const [companyName, setCompanyName] = useState("株式会社サンプル");
-  const [registration, setRegistration] = useState("T1234567890123");
-
-  // Card 3 · edit with a destructive action: 削除 far-left (mr-auto), Cancel + Save right.
-  const [recordOpen, setRecordOpen] = useState(false);
-  const [memo, setMemo] = useState("4月度 経費精算");
-
-  // Card 4 · responsive detail panel. The SAME hook SheetContent uses, so the label below always
-  // reports the presentation the panel will actually render — resize the frame to 390 to see it flip.
-  const [detailOpen, setDetailOpen] = useState(false);
-  const presentation = useSheetResponsiveMode("auto");
-
-  // Card 5 · SheetHeader tone band. One panel, re-opened per branch, so only one overlay is ever
-  // mounted and the focus trap stays honest.
-  const [toneOpen, setToneOpen] = useState(false);
-  const [headerTone, setHeaderTone] = useState<(typeof headerTones)[number]>("default");
-
-  // Card 6 · non-modal sheet: the order lines behind it stay editable while it is open.
-  const [summaryOpen, setSummaryOpen] = useState(false);
-  const [lines, setLines] = useState(initialLines);
-  const total = lines.reduce((sum, line) => sum + line.unitPrice * line.quantity, 0);
-  const changeQuantity = (id: string, delta: number) => {
-    setLines((current) =>
-      current.map((line) =>
-        line.id === id ? { ...line, quantity: Math.max(0, line.quantity + delta) } : line,
-      ),
-    );
-  };
-
-  return (
-    <PageContainer
-      title="Sheet"
-      subtitle="side-panel drawer · filters, quick-edit, detail peek (NOT a Dialog replacement)"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Advanced filter (pre-opened, side=right)</CardTitle>
-            <CardDescription>
-              The defining footer pattern: actions are end-aligned, the primary 適用 is last, and
-              the clear/reset action クリア moves to the leading edge via
-              className=&quot;me-auto&quot;. The footer is pinned to the bottom with a full-bleed
-              top border; the body scrolls between a fixed header and footer (header inset == footer
-              inset). Fields are real FormField + Select + Input.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Sheet open={filterOpen} onOpenChange={setFilterOpen}>
-              <SheetTrigger asChild>
-                {/* data-axe-open: check:frame-axe presses this before its overlay scan. */}
-                <Button data-axe-open variant="outline" size="sm">
-                  <SlidersHorizontal />
-                  詳細検索
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="right" width={420}>
-                <SheetHeader
-                  tone="info"
-                  title="詳細検索"
-                  subtitle="条件を組み合わせて仕訳を絞り込みます。"
-                  extra={<Badge tone="info">3 条件</Badge>}
-                />
-                <SheetBody>
-                  <Form>
-                    <Flex direction="col" gap="md">
-                      <FormField id="filter-account" label="勘定科目">
-                        <Select aria-label="勘定科目" value={account} onValueChange={setAccount}>
-                          <SelectTrigger id="filter-account">
-                            <SelectValue placeholder="すべての勘定科目" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="all">すべての勘定科目</SelectItem>
-                            <SelectItem value="cash">現金</SelectItem>
-                            <SelectItem value="sales">売上高</SelectItem>
-                            <SelectItem value="expense">旅費交通費</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </FormField>
-                      <FormField id="filter-status" label="ステータス">
-                        <Select aria-label="ステータス" value={status} onValueChange={setStatus}>
-                          <SelectTrigger id="filter-status">
-                            <SelectValue placeholder="すべてのステータス" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="all">すべてのステータス</SelectItem>
-                            <SelectItem value="draft">下書き</SelectItem>
-                            <SelectItem value="approved">承認済み</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </FormField>
-                      <FormField id="filter-source" label="ソース">
-                        <Select aria-label="ソース" value={source} onValueChange={setSource}>
-                          <SelectTrigger id="filter-source">
-                            <SelectValue placeholder="すべてのソース" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="all">すべてのソース</SelectItem>
-                            <SelectItem value="manual">手入力</SelectItem>
-                            <SelectItem value="import">インポート</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </FormField>
-                      <FormField id="filter-amount-min" label="金額">
-                        <Flex direction="row" gap="sm" align="center">
-                          <Input
-                            id="filter-amount-min"
-                            className="min-w-0 flex-1"
-                            inputMode="numeric"
-                            placeholder="最小"
-                            value={minAmount}
-                            onChange={(e) => setMinAmount(e.target.value)}
-                          />
-                          <Text tone="muted" aria-hidden="true">
-                            –
-                          </Text>
-                          <Input
-                            id="filter-amount-max"
-                            aria-label="最大金額"
-                            className="min-w-0 flex-1"
-                            inputMode="numeric"
-                            placeholder="最大"
-                            value={maxAmount}
-                            onChange={(e) => setMaxAmount(e.target.value)}
-                          />
-                        </Flex>
-                      </FormField>
-                    </Flex>
-                  </Form>
-                </SheetBody>
-                <SheetFooter>
-                  <Button
-                    variant="outline"
-                    className="me-auto"
-                    onClick={() => {
-                      setAccount("all");
-                      setStatus("all");
-                      setSource("all");
-                      setMinAmount("");
-                      setMaxAmount("");
-                    }}
-                  >
-                    クリア
-                  </Button>
-                  <Button onClick={() => setFilterOpen(false)}>適用</Button>
-                </SheetFooter>
-              </SheetContent>
-            </Sheet>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Quick-edit form (Cancel + Save, right-aligned)</CardTitle>
-            <CardDescription>
-              No destructive action, so both buttons sit on the right: キャンセル (secondary) to the
-              left of 保存 (primary). Close programmatically on submit success.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Sheet open={editOpen} onOpenChange={setEditOpen}>
-              <SheetTrigger asChild>
-                <Button variant="ghost" size="sm">
-                  取引先を編集
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="right">
-                <SheetHeader>
-                  <SheetTitle>取引先編集 · 株式会社サンプル</SheetTitle>
-                  <SheetDescription>取引先の基本情報を編集します。</SheetDescription>
-                </SheetHeader>
-                <SheetBody>
-                  <Form>
-                    <Flex direction="col" gap="md">
-                      <FormField id="edit-company" label="会社名" required>
-                        <Input
-                          id="edit-company"
-                          value={companyName}
-                          onChange={(e) => setCompanyName(e.target.value)}
-                        />
-                      </FormField>
-                      <FormField id="edit-registration" label="登録番号" helper="T + 13桁">
-                        <Input
-                          id="edit-registration"
-                          value={registration}
-                          onChange={(e) => setRegistration(e.target.value)}
-                        />
-                      </FormField>
-                    </Flex>
-                  </Form>
-                </SheetBody>
-                <SheetFooter>
-                  <Button variant="outline" onClick={() => setEditOpen(false)}>
-                    キャンセル
-                  </Button>
-                  <Button onClick={() => setEditOpen(false)}>保存</Button>
-                </SheetFooter>
-              </SheetContent>
-            </Sheet>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Edit with destructive action (削除 far-left)</CardTitle>
-            <CardDescription>
-              A destructive / clear / reset action goes to the leading edge via
-              className=&quot;me-auto&quot; with variant=&quot;destructive&quot;, while キャンセル +
-              保存 stay grouped at the end. This is the same me-auto slot the filter&apos;s クリア
-              uses.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Sheet open={recordOpen} onOpenChange={setRecordOpen}>
-              <SheetTrigger asChild>
-                <Button variant="ghost" size="sm">
-                  仕訳を編集
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="right">
-                <SheetHeader>
-                  <SheetTitle>仕訳編集 · #2024-0412</SheetTitle>
-                  <SheetDescription>摘要を編集します。削除は元に戻せません。</SheetDescription>
-                </SheetHeader>
-                <SheetBody>
-                  <Flex direction="col" gap="md">
-                    <FormField id="record-memo" label="摘要">
-                      <Input
-                        id="record-memo"
-                        value={memo}
-                        onChange={(e) => setMemo(e.target.value)}
-                      />
-                    </FormField>
-                  </Flex>
-                </SheetBody>
-                <SheetFooter>
-                  <Button
-                    variant="destructive"
-                    className="me-auto"
-                    onClick={() => setRecordOpen(false)}
-                  >
-                    削除
-                  </Button>
-                  <Button variant="outline" onClick={() => setRecordOpen(false)}>
-                    キャンセル
-                  </Button>
-                  <Button onClick={() => setRecordOpen(false)}>保存</Button>
-                </SheetFooter>
-              </SheetContent>
-            </Sheet>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>
-              Responsive detail panel (responsive=&quot;auto&quot; · desktop side / mobile bottom)
-            </CardTitle>
-            <CardDescription>
-              ONE Sheet covers both viewports: above{" "}
-              <code>--sheet-responsive-breakpoint-width</code> (48rem / 768px) it is the desktop
-              side panel, at or below it the mobile bottom sheet capped by{" "}
-              <code>--sheet-bottom-max-height</code>. The breakpoint comes from a theme token. Never
-              re-derive it with a page-local <code>useMediaQuery</code>. Focus trap, Escape and
-              focus restoration are identical in both presentations because it is the same Radix
-              Dialog.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Text size="sm" tone="muted" aria-live="polite">
-                現在の表示: {presentation === "bottom" ? "bottom sheet (mobile)" : "side panel"}
-              </Text>
-              <Sheet open={detailOpen} onOpenChange={setDetailOpen}>
-                <SheetTrigger asChild>
-                  <Button variant="outline" size="sm">
-                    請求書の詳細
-                  </Button>
-                </SheetTrigger>
-                <SheetContent responsive="auto" width={420}>
-                  <SheetHeader
-                    title="請求書 INV-1024"
-                    subtitle="2026-07-30 発行 · 株式会社サンプル"
-                    extra={<Badge tone="success">支払済み</Badge>}
-                  />
-                  <SheetBody>
-                    <Flex direction="col" gap="md">
-                      <Text size="sm">
-                        レコードのdetail surfaceはdesktopでは右side panel、mobileではbottom
-                        sheetとして表示されます。
-                      </Text>
-                      <Text size="sm" tone="muted">
-                        幅は side panel のときだけ適用され、bottom sheet
-                        では全幅になります（widthはbottomでは無視されます）。
-                      </Text>
-                    </Flex>
-                  </SheetBody>
-                  <SheetFooter>
-                    <Button variant="outline" onClick={() => setDetailOpen(false)}>
-                      閉じる
-                    </Button>
-                  </SheetFooter>
-                </SheetContent>
-              </Sheet>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>SheetHeader tone band (every branch)</CardTitle>
-            <CardDescription>
-              SheetHeader carries the same header contract as DialogHeader: title, subtitle, an
-              extra slot and tone. tone tints only the band and leaves the text at the foreground
-              colour. default paints no band; muted and neutral share the same quiet band on
-              purpose, so a caller can name intent without adding colour. Close the pre-opened
-              filter panel above with Escape, then pick a branch.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="row" gap="sm" wrap>
-                {headerTones.map((tone) => (
-                  <Button
-                    key={tone}
-                    variant="outline"
-                    size="sm"
-                    onClick={() => {
-                      setHeaderTone(tone);
-                      setToneOpen(true);
-                    }}
-                  >
-                    {tone}
-                  </Button>
-                ))}
-              </Flex>
-              <Sheet open={toneOpen} onOpenChange={setToneOpen}>
-                <SheetContent side="right" width={420}>
-                  <SheetHeader
-                    tone={headerTone}
-                    title="承認ステータス"
-                    subtitle={`見出し帯は tone="${headerTone}" で描画しています。`}
-                    extra={<Badge tone={headerTone}>{headerTone}</Badge>}
-                  />
-                  <SheetBody>
-                    <Flex direction="col" gap="md">
-                      <Text size="sm">
-                        帯の色だけが tone
-                        に追従し、見出しと本文の文字色は変わりません。帯は本文と同じ左右インセットで全幅に広がります。
-                      </Text>
-                      <Text size="sm" tone="muted">
-                        extra スロットは帯の右端に固定され、閉じるボタンとは重なりません。
-                      </Text>
-                    </Flex>
-                  </SheetBody>
-                  <SheetFooter>
-                    <Button variant="outline" onClick={() => setToneOpen(false)}>
-                      閉じる
-                    </Button>
-                  </SheetFooter>
-                </SheetContent>
-              </Sheet>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Non-modal sheet: the list behind stays editable</CardTitle>
-            <CardDescription>
-              modal=&#123;false&#125; on Sheet renders a non-modal panel, a pattern WAI-ARIA APG
-              allows. The page behind keeps working: no scrim, no scroll lock, nothing hidden from
-              assistive tech, and a press outside does not close the panel. Open the order summary
-              (side=&quot;left&quot;, so the quantity controls stay uncovered), then change a
-              quantity below. The total inside the panel follows. Focus moves into the panel on
-              open, Tab can leave it, Escape closes it while focus is inside, and focus returns to
-              the trigger.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {lines.map((line) => (
-                <Flex key={line.id} direction="row" align="center" justify="between" gap="sm">
-                  <Text>{line.name}</Text>
-                  <Flex direction="row" align="center" gap="sm">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      aria-label={`${line.name}を減らす`}
-                      disabled={line.quantity === 0}
-                      onClick={() => changeQuantity(line.id, -1)}
-                    >
-                      −
-                    </Button>
-                    <Text aria-live="polite">{line.quantity}</Text>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      aria-label={`${line.name}を増やす`}
-                      onClick={() => changeQuantity(line.id, 1)}
-                    >
-                      ＋
-                    </Button>
-                  </Flex>
-                </Flex>
-              ))}
-              <Sheet modal={false} open={summaryOpen} onOpenChange={setSummaryOpen}>
-                <SheetTrigger asChild>
-                  <Button variant="outline" size="sm">
-                    注文サマリー
-                  </Button>
-                </SheetTrigger>
-                <SheetContent side="left" width={360}>
-                  <SheetHeader title="注文サマリー" subtitle="明細は背面で編集を続けられます。" />
-                  <SheetBody>
-                    <Flex direction="row" justify="between">
-                      <Text tone="muted">合計</Text>
-                      <Text>{yen.format(total)}</Text>
-                    </Flex>
-                  </SheetBody>
-                  <SheetFooter>
-                    <Button onClick={() => setSummaryOpen(false)}>完了</Button>
-                  </SheetFooter>
-                </SheetContent>
-              </Sheet>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/feedback/skeleton.tsx

@@ -1,168 +0,0 @@
-import {
-  Skeleton,
-  SkeletonArticle,
-  SkeletonAvatar,
-  SkeletonButton,
-  SkeletonDetail,
-  SkeletonImage,
-  SkeletonInput,
-  SkeletonNode,
-  SkeletonRows,
-  SkeletonStat,
-  SkeletonTable,
-} from "@godxjp/ui/feedback";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
-
-/**
- * Skeleton · loading placeholders. Three levels:
- *   Skeleton · custom pulsing block (h + w via className).
- *   SkeletonTable · pre-mount DataTable placeholder (rows, columns props).
- *   SkeletonStat · StatCard/KPI tile placeholder (no props; use in ResponsiveGrid).
- *   SkeletonDetail · single-record detail placeholder (title + metadata rows, no props).
- *   SkeletonArticle · avatar + heading + paragraph (Ant Design's own Skeleton shape).
- *   SkeletonAvatar/Button/Input/Node/Image · the shaped presets, also on the Skeleton namespace.
- * Never use a spinner overlay on skeletonable content.
- */
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Skeleton"
-      subtitle="loading placeholders · Skeleton (custom block) · SkeletonTable (DataTable pre-mount) · SkeletonStat (KPI tile) · SkeletonDetail (record page)"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Skeleton · custom pulsing blocks</CardTitle>
-            <CardDescription>
-              Base primitive. Pass className for h + w. Use when SkeletonTable / SkeletonStat do not
-              match the target layout (e.g. a single loading line, a media placeholder, inline
-              metadata).
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Skeleton className="h-5 w-48" />
-              <Skeleton className="h-4 w-72" />
-              <Skeleton className="h-4 w-60" />
-              <Flex direction="row" gap="sm" align="center">
-                <Skeleton className="size-10 rounded-full" />
-                <Flex direction="col" gap="xs">
-                  <Skeleton className="h-4 w-32" />
-                  <Skeleton className="h-3 w-24" />
-                </Flex>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>SkeletonArticle · avatar + heading + paragraph</CardTitle>
-            <CardDescription>
-              Ant Design's own Skeleton shape. Defaults follow it exactly: no avatar, a 38% heading
-              and three body lines; with an avatar the heading drops to 50% and the body to two
-              lines. `active` swaps the resting pulse for the travelling sheen · `round` pills every
-              line · `loading={false}` renders children instead.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="lg">
-              <SkeletonArticle />
-              <SkeletonArticle avatar />
-              <SkeletonArticle avatar active round paragraph={{ rows: 4, width: ["90%", "80%"] }} />
-              <SkeletonArticle avatar paragraph={false} title={{ width: "14rem" }} />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Shaped presets · the boxes the controls occupy</CardTitle>
-            <CardDescription>
-              Each preset carries the box of the control it stands in for, from the --control-height
-              tier · SkeletonButton is two heights wide, SkeletonInput five. Reachable as named
-              exports or through the Skeleton namespace (Skeleton.Button…).
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="row" gap="sm" align="center" wrap>
-                <SkeletonAvatar size="sm" />
-                <SkeletonAvatar />
-                <SkeletonAvatar size="lg" shape="square" />
-                <SkeletonButton size="sm" />
-                <SkeletonButton />
-                <SkeletonButton size="lg" shape="pill" active />
-                <SkeletonInput size="sm" />
-              </Flex>
-              <SkeletonInput block />
-              <Flex direction="row" gap="sm" align="center" wrap>
-                <SkeletonNode />
-                <SkeletonImage active />
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>SkeletonRows · generic repeated rows</CardTitle>
-            <CardDescription>
-              Use for non-table list layouts with deterministic row count.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <SkeletonRows rows={3} columns={2} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>SkeletonTable · DataTable pre-mount placeholder</CardTitle>
-            <CardDescription>
-              Drop-in while deferred prop / query resolves. Match rows to page size and columns to
-              column count so the layout does not jump on hydration. Do NOT wrap in Card · it owns
-              its own structure.
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <SkeletonTable rows={6} columns={6} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>SkeletonStat · KPI / StatCard tile placeholder</CardTitle>
-            <CardDescription>
-              Use inside a ResponsiveGrid · one SkeletonStat per expected StatCard. No props. Do NOT
-              wrap in an extra Card (SkeletonStat owns its own bordered box).
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={4}>
-              <SkeletonStat />
-              <SkeletonStat />
-              <SkeletonStat />
-              <SkeletonStat />
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>SkeletonDetail · single-record detail loading state</CardTitle>
-            <CardDescription>
-              The ready-made detail placeholder (title + metadata rows). Reach for this on a record
-              / show page while the record loads · do NOT hand-compose it from base Skeleton blocks.
-              No props.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <SkeletonDetail />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}