@godxjp/ui 31.31.8 → 32.0.0

package/docs/foundation/_theme-editor-scope.ts

@@ -1,222 +0,0 @@
-/**
- * What the Theme Editor page needs that is NOT React: the repo's own brand derivation, the two
- * stylesheet facts it takes as arguments, and the ONE style object that makes a previewed seed
- * actually reach the components under it.
- *
- * `deriveBrand` is `scripts/gen-brand.mjs`'s body (src/tokens/__tests__/brand-derivation.ts).
- * Importing it — rather than porting it — is why the page's export and `pnpm gen:brand` emit the
- * same bytes for the same hex. `wcag-contrast.ts`'s own opening line says why there is one copy of
- * the luminance formula; this is the same argument one level up.
- */
-import type { CSSProperties } from "react";
-
-import {
-  asTriplet,
-  deriveBrand,
-  triplet,
-  type BrandChannels,
-  type BrandTheme,
-  type Hsl,
-} from "../../src/tokens/__tests__/brand-derivation";
-
-export {
-  AA_TEXT,
-  NON_TEXT,
-  asTriplet,
-  contrast,
-  deriveBrand,
-  hslToRgb,
-  parseHex,
-  toHex,
-  toHsl,
-  round,
-} from "../../src/tokens/__tests__/brand-derivation";
-export type {
-  Brand,
-  BrandChannels,
-  BrandTheme,
-  ContrastRow,
-  Hsl,
-} from "../../src/tokens/__tests__/brand-derivation";
-
-/* ── what the stylesheet says, asked of the browser rather than copied here ─────────────────── */
-
-/**
- * `gen:brand` reads `--background` and the three `-channels` expressions out of `foundation.css`
- * and `derived.css` with `node:fs`. A page has no filesystem, and a literal copied into this file
- * would be a third place the canvas colour lives — stale the first time someone retunes the spine.
- * So the page asks the DOCUMENT, which is the same declarations after the same cascade.
- *
- * The CANVASES come from the CSSOM rather than `getComputedStyle`, because the page needs BOTH at
- * once and an element can only be in one theme at a time: read live, a page rendered under
- * `data-theme="dark"` would report the dark canvas as the light one and the whole dark-seed search
- * would target the wrong number, silently. The CSSOM carries both declarations side by side no
- * matter which theme is on screen.
- *
- * The CHANNELS are the opposite case: `--primary-hover-darken-channels` and its three siblings are
- * declared once at `:root` and never re-scoped (`.dark` only repoints `--primary-hover-channels`
- * AT one of them), so a computed read is correct under any theme and is one line instead of a walk.
- */
-export type ThemeSpine = { lightCanvas: Hsl; darkCanvas: Hsl; channels: BrandChannels };
-
-/** Every style rule in the document, walking into `@layer` / `@media` / `@supports` and nesting. */
-function* styleRules(rules: CSSRuleList): Generator<CSSStyleRule> {
-  for (const rule of Array.from(rules)) {
-    if ("selectorText" in rule) yield rule as CSSStyleRule;
-    const nested = (rule as CSSGroupingRule).cssRules;
-    if (nested) yield* styleRules(nested);
-  }
-}
-
-/** The LAST `--background` declared by a rule this selector test accepts — cascade order. */
-function canvasFrom(accepts: (selector: string) => boolean): Hsl | null {
-  let found: Hsl | null = null;
-  for (const sheet of Array.from(document.styleSheets)) {
-    let rules: CSSRuleList;
-    try {
-      rules = sheet.cssRules;
-    } catch {
-      /* A cross-origin sheet refuses `cssRules`. Ours are same-origin; skip anything else. */
-      continue;
-    }
-    for (const rule of styleRules(rules)) {
-      if (!accepts(rule.selectorText)) continue;
-      const value = rule.style.getPropertyValue("--background").trim();
-      if (!value) continue;
-      try {
-        found = triplet(value);
-      } catch {
-        /* Not a plain `H S% L%` triple — not a canvas this derivation can use. */
-      }
-    }
-  }
-  return found;
-}
-
-/**
- * The probe fallback, for the one case the CSSOM cannot answer: a sheet the document can paint from
- * but not read. It costs a layout, so it only runs when the walk came back empty.
- */
-function canvasByProbe(dark: boolean): Hsl | null {
-  const probe = document.createElement("div");
-  if (dark) probe.className = "dark";
-  document.body.append(probe);
-  try {
-    const value = getComputedStyle(probe).getPropertyValue("--background").trim();
-    return value ? triplet(value) : null;
-  } catch {
-    return null;
-  } finally {
-    probe.remove();
-  }
-}
-
-const channel = (name: string) =>
-  getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-
-/** The spine this document is actually painting, or `null` when it cannot be read at all. */
-export function readThemeSpine(): ThemeSpine | null {
-  const lightCanvas = canvasFrom((s) => s.trim() === ":root") ?? canvasByProbe(false);
-  const darkCanvas = canvasFrom((s) => /\[data-theme=["']?dark/.test(s)) ?? canvasByProbe(true);
-  const channels: BrandChannels = {
-    hoverDarken: channel("--primary-hover-darken-channels"),
-    activeDarken: channel("--primary-active-darken-channels"),
-    hoverLighten: channel("--primary-hover-lighten-channels"),
-  };
-  if (!lightCanvas || !darkCanvas) return null;
-  if (!channels.hoverDarken || !channels.activeDarken || !channels.hoverLighten) return null;
-  return { lightCanvas, darkCanvas, channels };
-}
-
-/* ── the scope a preview pane declares ──────────────────────────────────────────────────────── */
-
-/**
- * THE THREE TOKENS `gen:brand` EMITS ARE THE THREE A SCOPE MUST DECLARE, and that is not a
- * coincidence — it is the freeze rule (docs/TOKENS.md) read from the other end.
- *
- * `--primary` and `--primary-foreground` are ordinary roles: declare them on the pane and every
- * descendant paints from them, including `--primary-hover` and `--text-link`, which are `initial`
- * knobs whose defaults re-resolve at the element that paints (gh#678, gh#664). Writing THOSE here
- * is the drift `gen:brand` refuses to emit, so this does not write them either.
- *
- * `--ring` is the one that bites. `derived.css` declares `--ring: var(--primary)` — and a `var()`
- * substitutes where it is DECLARED, so at `:root` it computed against the package's own seed and
- * inherits that frozen answer into every subtree. The dark pane escapes by accident (it carries
- * `.dark`, and `derived.css` re-declares `--ring: var(--primary)` in that block too, which
- * re-substitutes on the pane); the LIGHT pane does not, and a focus ring in the old brand colour
- * on a re-themed button is exactly the defect. `derived.css` says so in as many words: "a
- * `--primary` scoped BELOW `<html>` does not reach `--ring` … a nested scope sets `--ring`
- * itself". So both panes set it, which is also what a consumer's `:root` gets from `gen:brand`.
- *
- * The `-channels` PAIR is written only when the seed's label runs against the theme's default,
- * because that is the one thing CSS cannot infer: the label decides which way a state steps, and
- * only the author knows the label. It is a role-mirror, so it is written as `var(--…-channels)`
- * and never as a resolved literal.
- */
-export function previewScope(theme: BrandTheme): CSSProperties {
-  const scope: Record<string, string> = {
-    "--primary": asTriplet(theme.seed),
-    "--primary-foreground": asTriplet(theme.label),
-    "--ring": asTriplet(theme.seed),
-  };
-  if (theme.repointsChannels) {
-    scope["--primary-hover-channels"] = `var(--primary-hover-${theme.polarity}-channels)`;
-    scope["--primary-active-channels"] = `var(--primary-active-${theme.polarity}-channels)`;
-  }
-  return scope as CSSProperties;
-}
-
-/* ── the seeds a demo must not avoid ────────────────────────────────────────────────────────── */
-
-/**
- * AN EDITOR THAT ONLY DEMOS A NICE BLUE PROVES NOTHING. Each of these is here because it produces
- * an answer the happy path hides; `hex` is the only input, everything else is measured.
- */
-export type SeedPreset = {
-  id: "godx" | "blue" | "very-light" | "very-dark" | "sunflower";
-  hex: string;
-};
-
-export const SEED_PRESETS: SeedPreset[] = [
-  /* The package's own `--primary`: the export must reproduce foundation.css's light block. */
-  { id: "godx", hex: "#7A00FF" },
-  /* An ordinary, well-behaved brand — every row clears, so a passing readout is visible too. */
-  { id: "blue", hex: "#2563EB" },
-  /* Near-white: the label flips to black and the fill cannot clear 3:1 on a near-white canvas. */
-  { id: "very-light", hex: "#FFF9C4" },
-  /* Near-black: the dark-seed search runs all the way to pure white to hold parity. */
-  { id: "very-dark", hex: "#0B0B14" },
-  /* A dark label in light and a light label in dark — the seed that repoints the `-channels`
-   * pair in BOTH theme blocks, which nothing else here exercises. */
-  { id: "sunflower", hex: "#F5D60A" },
-];
-
-/** One place that knows how a hex becomes a brand, so the page never calls `deriveBrand` twice. */
-export function brandFor(
-  spine: ThemeSpine,
-  hex: string,
-  name: string,
-  foreground: string | null,
-  darkLightness: number | null,
-) {
-  return deriveBrand({ hex, name, foreground, darkLightness, ...spine });
-}
-
-/**
- * THE COMMAND THAT REPRODUCES THIS EXPORT, or `null` when nothing does.
- *
- * The seed and the forced label are both `gen:brand` flags, so those exports are byte-identical to
- * what the CLI writes and the page can say which command to run. An AUTHORED dark lightness is
- * not: the generator searches for parity and has no flag to override it, so the page has to stop
- * claiming agreement rather than print a command that emits something else.
- */
-export function genBrandCommand(
-  hex: string,
-  name: string,
-  foreground: string | null,
-  darkLightnessOverridden: boolean,
-): string | null {
-  if (darkLightnessOverridden) return null;
-  const flags = foreground ? ` --foreground '${foreground}'` : "";
-  return `pnpm gen:brand '${hex}' --name ${name}${flags}`;
-}

package/docs/foundation/colors.tsx

@@ -1,207 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
-
-/**
- * Colors · design-token foundation. Every swatch is a real semantic Tailwind
- * utility wired to the reference-design token (@theme in src/styles/index.css); no raw
- * hex, no raw palette. Composed only from real @godxjp/ui components.
- */
-const surfaces = [
-  { cls: "bg-background text-foreground", token: "--background", role: "page" },
-  { cls: "bg-card text-card-foreground", token: "--card", role: "raised surface" },
-  { cls: "bg-popover text-popover-foreground", token: "--popover", role: "overlay surface" },
-  { cls: "bg-secondary text-secondary-foreground", token: "--secondary", role: "muted fill" },
-  { cls: "bg-muted text-muted-foreground", token: "--muted", role: "muted" },
-  { cls: "bg-accent text-accent-foreground", token: "--accent", role: "hover" },
-];
-
-// Structural neutrals · hairlines, field borders, focus ring. Shown as fills so
-// the named token is visible (in practice they paint borders/outlines, not areas).
-const structural = [
-  { cls: "bg-border", token: "--border", role: "hairline / divider" },
-  { cls: "bg-input", token: "--input", role: "field border" },
-  { cls: "bg-ring", token: "--ring", role: "focus ring" },
-];
-
-const status = [
-  { cls: "bg-primary text-primary-foreground", token: "--primary", role: "brand action" },
-  { cls: "bg-success text-success-foreground", token: "--success", role: "若竹 success" },
-  { cls: "bg-warning text-warning-foreground", token: "--warning", role: "山吹 warning" },
-  { cls: "bg-info text-info-foreground", token: "--info", role: "群青 info" },
-  { cls: "bg-attention text-attention-foreground", token: "--attention", role: "朱 attention" },
-  { cls: "bg-destructive text-destructive-foreground", token: "--destructive", role: "茜 danger" },
-];
-
-const waIro = [
-  { cls: "bg-wa-ai", token: "--wa-ai", role: "藍 indigo" },
-  { cls: "bg-wa-gunjo", token: "--wa-gunjo", role: "群青 ultramarine" },
-  { cls: "bg-wa-ruri", token: "--wa-ruri", role: "瑠璃 lapis" },
-  { cls: "bg-wa-kon", token: "--wa-kon", role: "紺 navy" },
-  { cls: "bg-wa-wakatake", token: "--wa-wakatake", role: "若竹 young bamboo" },
-  { cls: "bg-wa-moegi", token: "--wa-moegi", role: "萌葱 spring green" },
-  { cls: "bg-wa-yamabuki", token: "--wa-yamabuki", role: "山吹 mountain yellow" },
-  { cls: "bg-wa-shu", token: "--wa-shu", role: "朱 vermilion" },
-  { cls: "bg-wa-akane", token: "--wa-akane", role: "茜 madder" },
-  { cls: "bg-wa-enji", token: "--wa-enji", role: "臙脂 cochineal" },
-  { cls: "bg-wa-sakura", token: "--wa-sakura", role: "桜 cherry (soft bg)" },
-  { cls: "bg-wa-sumi", token: "--wa-sumi", role: "墨 ink" },
-  { cls: "bg-wa-nezu", token: "--wa-nezu", role: "鼠 mouse grey" },
-];
-
-// Chart accents · neutral decorative primitives for series colour, NOT business
-// semantics. Wired to --color-chart-1…6 (bg-chart-N utilities).
-const charts = [
-  { cls: "bg-chart-1", token: "--chart-1", role: "series 1" },
-  { cls: "bg-chart-2", token: "--chart-2", role: "series 2" },
-  { cls: "bg-chart-3", token: "--chart-3", role: "series 3" },
-  { cls: "bg-chart-4", token: "--chart-4", role: "series 4" },
-  { cls: "bg-chart-5", token: "--chart-5", role: "series 5" },
-  { cls: "bg-chart-6", token: "--chart-6", role: "series 6" },
-];
-
-type Swatch = { cls: string; token: string; role: string };
-
-/** One swatch tile: a token-coloured box (with foreground text when paired) + its token name + role. */
-function SwatchTile({ swatch, text }: { swatch: Swatch; text?: boolean }) {
-  return (
-    <Flex direction="col" gap="xs">
-      {/* ui-audit-disable-next-line no-hand-rolled-surface no-utility-layout no-utility-spacing — a swatch showing the token itself; the fill IS the subject */}
-      <div className={`border-border flex h-14 items-end rounded-md border p-2 ${swatch.cls}`}>
-        {text ? (
-          /* `tone="inherit"` — the specimen's whole job is to show the token's PAIRED foreground,
-             and every other tone is an absolute colour. Without it `Text` repainted itself in
-             `--foreground` over `--primary` and measured 2.45:1 on this very page (gh#643). */
-          <Text size="xs" mono tone="inherit" className="leading-none">
-            Aa 亜
-          </Text>
-        ) : null}
-      </div>
-      <div>
-        <Text as="div" size="xs" mono>
-          {swatch.token}
-        </Text>
-        <Text as="div" size="xs" tone="muted">
-          {swatch.role}
-        </Text>
-      </div>
-    </Flex>
-  );
-}
-
-/**
- * A token group rendered TWICE · light theme then a `.dark`-scoped copy · so a
- * single static screenshot proves both renditions defined in foundation.css.
- * Themed groups (`dark`) re-paint under the `.dark` wrapper; decorative groups
- * (wa-iro, chart) are theme-invariant and render once.
- */
-function SwatchGroup({ items, text, dark }: { items: Swatch[]; text?: boolean; dark?: boolean }) {
-  const grid = (
-    <ResponsiveGrid columns={{ sm: 2, md: 3, lg: 4 }}>
-      {items.map((s) => (
-        <SwatchTile key={s.token} swatch={s} text={text} />
-      ))}
-    </ResponsiveGrid>
-  );
-  if (!dark) return grid;
-  return (
-    <Flex direction="col" gap="md">
-      <Flex direction="col" gap="sm">
-        <Text as="div" size="xs" tone="muted" weight="medium">
-          Light
-        </Text>
-        {grid}
-      </Flex>
-      {/* ui-audit-disable-next-line no-utility-spacing — a swatch showing the token itself; the fill IS the subject */}
-      <Flex direction="col" gap="sm" className="bg-background text-foreground dark rounded-md p-3">
-        <Text as="div" size="xs" tone="muted" weight="medium">
-          Dark (.dark)
-        </Text>
-        <ResponsiveGrid columns={{ sm: 2, md: 3, lg: 4 }}>
-          {items.map((s) => (
-            <SwatchTile key={s.token} swatch={s} text={text} />
-          ))}
-        </ResponsiveGrid>
-      </Flex>
-    </Flex>
-  );
-}
-
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Colors"
-      subtitle="Semantic roles + 和色 (wa-iro) · OKLCH, 渋み (chroma ≤ 0.18)"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Semantic surfaces</CardTitle>
-            <CardDescription>
-              Page / raised / overlay / muted neutrals. Use these; never invent a new grey. Each box
-              shows its own foreground text token. Every role is redefined under .dark.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <SwatchGroup items={surfaces} text dark />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Structural neutrals</CardTitle>
-            <CardDescription>
-              Hairlines, field borders, focus ring. In practice these paint borders and outlines,
-              not areas. They are shown as fills here so the named token is visible. Also themed
-              under .dark.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <SwatchGroup items={structural} dark />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Brand & status</CardTitle>
-            <CardDescription>
-              Fixed semantic mapping: never substitute. primary = the single most important action;
-              status is success / warning / info / attention / danger. Lifted for contrast under
-              .dark.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <SwatchGroup items={status} text dark />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>和色 wa-iro · decorative only</CardTitle>
-            <CardDescription>
-              Traditional Japanese accents for charts / tags / tenant theming. NEVER map a wa-iro
-              hue to a semantic role beyond the five canonical ones above. Fixed hex ·
-              theme-invariant.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <SwatchGroup items={waIro} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Chart accents</CardTitle>
-            <CardDescription>
-              Series colours for data visualisation: neutral decorative primitives, NOT business
-              semantics. Use bg-chart-1…6 in order; theme-invariant like wa-iro.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <SwatchGroup items={charts} />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/foundation/density.tsx

@@ -1,242 +0,0 @@
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  DataTable,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import {
-  Checkbox,
-  Field,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Switch,
-} from "@godxjp/ui/data-entry";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * Density · design-token foundation. One knob (`<PageContainer density>`) swaps a
- * single CSS class (`.ui-density-compact|default|comfortable`) that retunes
- * --control-height, --control-padding-x, --checkbox-size, --switch-* and the φ
- * unit. The first card renders the SAME real controls inside each density-scoped
- * subtree so the retune is visible at rest. The DataTable owns a separate density
- * prop (--table-row-height / --table-cell-padding-y), shown in its own card.
- * Composed only from real @godxjp/ui components.
- */
-
-type Line = { id: string; item: string; qty: string };
-
-const lines: Line[] = [
-  { id: "L-01", item: "ライセンス", qty: "12" },
-  { id: "L-02", item: "保守費", qty: "1" },
-  { id: "L-03", item: "初期構築", qty: "1" },
-];
-
-const columns: ColumnDef<Line>[] = [
-  { key: "id", header: "明細", width: "w-20" },
-  { key: "item", header: "品目" },
-  {
-    key: "qty",
-    header: "数量",
-    align: "right",
-    render: (row) => <Text tabular>{row.qty}</Text>,
-  },
-];
-
-/** The same real controls, rendered once per density column. */
-function DensitySample({ idPrefix }: { idPrefix: string }) {
-  return (
-    <Flex direction="col" gap="md">
-      <Input defaultValue="株式会社ベトヤ" aria-label="取引先名" />
-      <Select aria-label="状態" defaultValue="paid" name={`${idPrefix}-status`}>
-        <SelectTrigger id={`${idPrefix}-status`}>
-          <SelectValue placeholder="状態を選択" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="draft">下書き</SelectItem>
-          <SelectItem value="sent">送付済</SelectItem>
-          <SelectItem value="paid">入金済</SelectItem>
-        </SelectContent>
-      </Select>
-      <Flex direction="row" align="center" gap="md" wrap>
-        <Field id={`${idPrefix}-tax`} label="税込表示">
-          <Checkbox id={`${idPrefix}-tax`} defaultChecked />
-        </Field>
-        <Field id={`${idPrefix}-mail`} label="自動送信">
-          <Switch id={`${idPrefix}-mail`} defaultChecked />
-        </Field>
-      </Flex>
-      <Flex direction="row" align="center" gap="sm" wrap>
-        <Button size="sm">保存</Button>
-        <Button size="sm" variant="outline">
-          下書き
-        </Button>
-        <Button size="sm" variant="ghost" disabled>
-          ロック中
-        </Button>
-      </Flex>
-    </Flex>
-  );
-}
-
-const density = [
-  {
-    cls: "ui-density-compact",
-    label: "compact",
-    role: "kintone 風の密なテーブル",
-  },
-  {
-    cls: "ui-density-default",
-    label: "default",
-    role: "標準アプリ画面",
-  },
-  {
-    cls: "ui-density-comfortable",
-    label: "comfortable",
-    role: "公開 / モバイル · WCAG タッチ floor",
-  },
-];
-
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Density"
-      subtitle="One knob · <PageContainer density> · retunes controls, tables, checkbox/switch, φ unit"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Same UI, three densities</CardTitle>
-            <CardDescription>
-              Set density once per page via {"<PageContainer density>"} · never the .ui-density-*
-              classes directly. Flip the one prop and Input, Select, Checkbox, Switch and Button all
-              re-tune their height, padding and the φ rhythm together. 44px (comfortable) is the
-              WCAG / Digital Agency touch floor.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            {/* A STACK ON A PHONE, said with `direction` rather than left to `wrap`.
-                `wrap` never fired here: each column carries `min-w-0 flex-1`, and an item that
-                may shrink to nothing never reaches the wrap threshold — so at 375px this was
-                three 92px columns, and the unbreakable `density="comfortable"` label painted
-                36px over its neighbour with no scrollport to reach it. */}
-            <Flex direction={{ base: "col", md: "row" }} gap="lg" align="start" wrap>
-              {density.map((d) => (
-                <Flex key={d.cls} direction="col" gap="sm" className="min-w-0 flex-1 sm:min-w-72">
-                  <Flex direction="row" align="center" justify="between" gap="sm">
-                    <Text size="xs" mono>
-                      density=&quot;{d.label}&quot;
-                    </Text>
-                    {d.label === "default" && <Badge variant="secondary">default</Badge>}
-                  </Flex>
-                  <Text size="xs" tone="muted">
-                    {d.role}
-                  </Text>
-                  <div className={d.cls}>
-                    <DensitySample idPrefix={d.label} />
-                  </div>
-                </Flex>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Table row density (DataTable density)</CardTitle>
-            <CardDescription>
-              The DataTable owns its own density axis: density=&quot;compact&quot; vs
-              density=&quot;comfortable&quot; swaps --table-row-height and --table-cell-padding-y.
-              The density toggle in the table toolbar drives the same prop at runtime.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            {/* A STACK ON A PHONE, said with `direction` rather than left to `wrap`.
-                `wrap` never fired here: each column carries `min-w-0 flex-1`, and an item that
-                may shrink to nothing never reaches the wrap threshold — so at 375px this was
-                three 92px columns, and the unbreakable `density="comfortable"` label painted
-                36px over its neighbour with no scrollport to reach it. */}
-            <Flex direction={{ base: "col", md: "row" }} gap="lg" align="start" wrap>
-              <Flex direction="col" gap="sm" className="min-w-0 flex-1 sm:min-w-72">
-                <Text size="xs" mono>
-                  density=&quot;compact&quot;
-                </Text>
-                <Card>
-                  <CardContent flush>
-                    <DataTable
-                      data={lines}
-                      columns={columns}
-                      getRowId={(row) => row.id}
-                      density="compact"
-                    />
-                  </CardContent>
-                </Card>
-              </Flex>
-              <Flex direction="col" gap="sm" className="min-w-0 flex-1 sm:min-w-72">
-                <Text size="xs" mono>
-                  density=&quot;comfortable&quot;
-                </Text>
-                <Card>
-                  <CardContent flush>
-                    <DataTable
-                      data={lines}
-                      columns={columns}
-                      getRowId={(row) => row.id}
-                      density="comfortable"
-                    />
-                  </CardContent>
-                </Card>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Page-level knob (PageContainer density)</CardTitle>
-            <CardDescription>
-              In a real screen you pass density to the page shell once; this nested PageContainer is
-              the comfortable knob applied to a whole form. Note the taller controls and looser φ
-              rhythm versus the compact column above.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <PageContainer
-              density="comfortable"
-              title="請求書を作成"
-              subtitle="comfortable density · login / mobile surfaces"
-            >
-              <Flex direction="col" gap="md">
-                <Input defaultValue="2024-04-12" aria-label="発行日" />
-                <Select aria-label="通貨" defaultValue="JPY" name="page-currency">
-                  <SelectTrigger id="page-currency">
-                    <SelectValue placeholder="通貨を選択" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="JPY">JPY 日本円</SelectItem>
-                    <SelectItem value="USD">USD 米ドル</SelectItem>
-                  </SelectContent>
-                </Select>
-                <Field id="page-terms" label="利用規約に同意する">
-                  <Checkbox id="page-terms" defaultChecked />
-                </Field>
-                <Flex direction="row" gap="sm" wrap>
-                  <Button>発行する</Button>
-                  <Button variant="outline">下書き保存</Button>
-                </Flex>
-              </Flex>
-            </PageContainer>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}