@godxjp/ui 31.31.8 → 32.0.0

package/docs/data-display/marquee.tsx

@@ -1,254 +0,0 @@
-import { useState } from "react";
-
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Marquee,
-} from "@godxjp/ui/data-display";
-import { Switch } from "@godxjp/ui/data-entry";
-import { Heading, Link, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, Separator } from "@godxjp/ui/layout";
-
-/**
- * Marquee · a track of content that travels continuously, and the WCAG 2.2.2 pause control that
- * makes that legal.
- *
- * Every card on this page is an EDGE, because the tidy demo is the one that hides the defects this
- * component actually has:
- * · ONE item in a full-width track, which is the case that needs the most clones;
- * · FORTY items, which is the case that proves the pace is measured and not per-cycle;
- * · a 71-character unbreakable string, wider than a phone;
- * · a track NARROWER than one item, where there is nothing to clone into;
- * · CJK beside Latin beside Vietnamese, at three different optical widths;
- * · the paused state, which is where the content has to stay readable;
- * · a controlled "stop all motion" switch driving two tracks at once.
- *
- * Composed only from real @godxjp/ui components. All copy is consumer-owned and localized.
- */
-
-const PARTNERS = [
-  "フジワラ運輸",
-  "Meridian Foods",
-  "Công ty Đại Việt",
-  "北陸電機",
-  "Halden Systems",
-  "三和商会",
-  "Vinh Phat Logistics",
-  "東海システム",
-];
-
-/** Forty items · the case a per-cycle duration would send across the screen forty times too fast. */
-const FORTY = Array.from({ length: 40 }, (_, index) => `SKU-${String(index + 1).padStart(4, "0")}`);
-
-/** 71 characters, no break opportunity anywhere in it. */
-const UNBREAKABLE = "SUPPLYCHAINRECONCILIATIONBATCHIDENTIFIER2026Q3NOBREAKOPPORTUNITY0000001";
-
-export default function MarqueeDoc() {
-  const [motion, setMotion] = useState(true);
-
-  return (
-    <PageContainer title="Marquee" subtitle="連続して流れるトラックと、それを止める操作">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>ロゴウォール · 既定のかたち</CardTitle>
-            <CardDescription>
-              `fade` で両端をマスクし、`pauseOnHover` を足した 8 件。コピー数は測って決まる（内容幅
-              ÷ 表示幅 + 1）ので、ウィンドウを横に伸ばせばクローンが増える。停止ボタンは常にあり、
-              Tab で到達できる。各社名はリンクなので、トラック内にフォーカスが入ると自動で止まる
-              （動いているリンクは押せないため）。クローン側のリンクは Tab の順路に出てこない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Marquee fade pauseOnHover label="取引先ロゴ">
-              {PARTNERS.map((name) => (
-                <Link key={name} href={`#partner-${encodeURIComponent(name)}`}>
-                  {name}
-                </Link>
-              ))}
-            </Marquee>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>1 件 と 40 件 · 速度は件数で変わらない</CardTitle>
-            <CardDescription>
-              1 周の所要時間ではなく「1 画面ぶんを流れる時間」が `--marquee-interval` なので、1
-              件でも 40 件でも見た目の速さは同じ。1 件のトラックはクローンが最も多く、 40
-              件のトラックはクローンが 1 枚で足りる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Heading level={3}>1 件</Heading>
-              <Marquee label="在庫同期の状態">
-                <Badge tone="info">在庫同期 · 実行中</Badge>
-              </Marquee>
-              <Separator />
-              <Heading level={3}>40 件</Heading>
-              <Marquee label="処理中の SKU">
-                {FORTY.map((sku) => (
-                  <Text key={sku} size="xs" tone="muted">
-                    {sku}
-                  </Text>
-                ))}
-              </Marquee>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>折り返せない 71 文字と、1 件より狭いトラック</CardTitle>
-            <CardDescription>
-              分割点のない 71 文字は電話の画面より広い。狭い枠に入れると「表示幅 ÷ 内容幅」は 1
-              を下回るので、クローンは最小の 1 枚になり、それでも継ぎ目なく回る。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Heading level={3}>全幅</Heading>
-              <Marquee label="照合バッチ識別子">
-                <Text size="sm">{UNBREAKABLE}</Text>
-              </Marquee>
-              <Separator />
-              <Heading level={3}>幅 14rem · 1 件より狭い枠</Heading>
-              <div style={{ inlineSize: "14rem", maxInlineSize: "100%" }}>
-                <Marquee label="照合バッチ識別子・狭い枠">
-                  <Text size="sm">{UNBREAKABLE}</Text>
-                </Marquee>
-              </div>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>日本語 · Latin · Tiếng Việt が同じ行に並ぶ</CardTitle>
-            <CardDescription>
-              全角の仮名漢字、欧文、そしてダイアクリティカルの付いたベトナム語は 1 文字あたりの幅も
-              行の高さも違う。同じトラックに置いたときの継ぎ目とベースラインはここで見る。
-              `direction="end"` は読み方向の逆に流れる版で、`dir="rtl"` では両方が反転する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Marquee gap={6} speed="slow" label="多言語の見出し">
-                <Text size="sm">品質保証部 · 月次レビュー</Text>
-                <Text size="sm">Quality Assurance · Monthly review</Text>
-                <Text size="sm">Đảm bảo chất lượng · Đánh giá hàng tháng</Text>
-              </Marquee>
-              <Separator />
-              <Marquee gap={6} speed="fast" direction="end" label="多言語の見出し・逆方向">
-                <Text size="sm">品質保証部 · 月次レビュー</Text>
-                <Text size="sm">Quality Assurance · Monthly review</Text>
-                <Text size="sm">Đảm bảo chất lượng · Đánh giá hàng tháng</Text>
-              </Marquee>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>止まった状態 · WebAIM の推奨する既定</CardTitle>
-            <CardDescription>
-              `defaultPlay={false}` で始めると、内容は止まったまま読める。停止中もリンクは Tab
-              で辿れて、押せる。動いている最中にトラック内へフォーカスが入った場合も自動で止まる
-              （動いているリンクは押せないため）。ボタンの名前は「次に起きること」を言う。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Marquee defaultPlay={false} fade label="社内のお知らせ">
-              <Text size="sm">2026-10-01 · 社内システム定期メンテナンス</Text>
-              <Link href="#maintenance">詳細</Link>
-              <Text size="sm">2026-10-14 · 新しい経費申請フォームに切替</Text>
-              <Link href="#expense">申請の手順</Link>
-            </Marquee>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>`play` で外から止める</CardTitle>
-            <CardDescription>
-              制御された `play` / `onPlayChange` は、画面全体の「動きを止める」1
-              つのスイッチから複数のトラックを同時に止めるためにある。各トラックの停止ボタンは
-              そのまま残る（2.2.2 の要件は個々の操作で満たす）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex align="center" gap="sm">
-                <Switch
-                  id="stop-all-motion"
-                  checked={motion}
-                  onCheckedChange={setMotion}
-                  aria-label="このページの動きを有効にする"
-                />
-                <Text size="sm">
-                  {motion ? "このページの動きは有効" : "このページの動きは停止中"}
-                </Text>
-              </Flex>
-              <Marquee play={motion} onPlayChange={setMotion} label="取引先ロゴ・上段">
-                {PARTNERS.slice(0, 4).map((name) => (
-                  <Text key={name} size="sm" tone="muted">
-                    {name}
-                  </Text>
-                ))}
-              </Marquee>
-              <Marquee
-                play={motion}
-                onPlayChange={setMotion}
-                direction="end"
-                label="取引先ロゴ・下段"
-              >
-                {PARTNERS.slice(4).map((name) => (
-                  <Text key={name} size="sm" tone="muted">
-                    {name}
-                  </Text>
-                ))}
-              </Marquee>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>使う前に読むこと</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Heading level={3}>止められる動きでも、止まっている方が良いことは多い</Heading>
-              <Text tone="muted">
-                自動で流れる内容は Nielsen Norman Group も WebAIM も勧めていない。NN/g
-                は「ユーザーが操作していないのに画面が動くのは不快で、読み終える前に消える」と書き、
-                WebAIM は「アニメーションは既定で止めておくことを勧める」と書いている。この
-                コンポーネントはその判断を奪わない。止める操作は必ず付いてくるし、`defaultPlay=
-                {"{false}"}` は 1 つのプロパティで済む。動かす理由が言えないなら、静止した `Flex
-                wrap` や `ResponsiveGrid` のロゴウォールの方が良い。
-              </Text>
-              <Heading level={3}>OS のモーション低減設定では一切動かない</Heading>
-              <Text tone="muted">
-                `prefers-reduced-motion: reduce` のとき、クローンも停止ボタンも作らず、1
-                件ぶんの内容を横スクロールできる領域として出す。横方向の平行移動は前庭系の
-                トリガーそのもので、控えめにする版というものが無いため（WCAG 2.2 SC 2.2.2 / SC
-                2.3.3）。
-              </Text>
-              <Heading level={3}>テーマ側のつまみ</Heading>
-              <Text tone="muted">
-                --marquee-interval · --marquee-interval-slow · --marquee-interval-fast ·
-                --marquee-gap-inline · --marquee-mask-width。時間はモーション層
-                （foundation.css）に、幾何はコンポーネント層（tokens/components/marquee.css）にある。
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-display/org-chart.tsx

@@ -1,165 +0,0 @@
-import {
-  Avatar,
-  AvatarFallback,
-  Badge,
-  Card,
-  CardContent,
-  OrgChart,
-  type OrgChartNodeProp,
-} from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-} from "@godxjp/ui/layout";
-import { Bot, Building2, Settings, Users } from "lucide-react";
-
-/**
- * OrgChart — who reports to whom, people and AI agents on one chart (gh#1034).
- *
- * Three levels: the CEO, three department heads, and their reports, two of which are AI agents.
- * An agent's box is dashed and its accessible name ends in "AI agent", so the difference is never
- * the stroke alone. The chart is an APG tree view: Tab lands on one box, the arrow keys walk it.
- *
- * Narrow the preview: under 40rem of CONTAINER width the same data turns into an indented Tree.
- * The second card is deliberately narrow to show that form beside the wide one.
- *
- * Composed only from real @godxjp/ui components.
- */
-const sections: SidebarSectionProp[] = [
-  {
-    label: "Organization",
-    items: [
-      { id: "chart", label: "Org chart", icon: Building2 },
-      { id: "members", label: "Members", icon: Users },
-      { id: "agents", label: "Agents", icon: Bot },
-    ],
-  },
-  { label: "Admin", items: [{ id: "settings", label: "Settings", icon: Settings }] },
-];
-
-const mark = (initials: string) => (
-  <Avatar size="sm">
-    <AvatarFallback>{initials}</AvatarFallback>
-  </Avatar>
-);
-
-const agentMark = (
-  <Avatar size="sm" appearance="tinted">
-    <AvatarFallback>
-      <Bot aria-hidden="true" />
-    </AvatarFallback>
-  </Avatar>
-);
-
-const org: OrgChartNodeProp[] = [
-  {
-    key: "ceo",
-    name: "Haruka Tanaka",
-    title: "Chief Executive Officer",
-    avatar: mark("HT"),
-    children: [
-      {
-        key: "cto",
-        name: "Kenji Watanabe",
-        title: "Chief Technology Officer",
-        avatar: mark("KW"),
-        children: [
-          {
-            key: "review-agent",
-            name: "Review Agent",
-            title: "Code review · pull requests",
-            variant: "agent",
-            avatar: agentMark,
-            extra: <Badge tone="success">Running</Badge>,
-          },
-          {
-            key: "platform",
-            name: "Mai Suzuki",
-            title: "Platform Lead",
-            avatar: mark("MS"),
-          },
-        ],
-      },
-      {
-        key: "coo",
-        name: "Daniel Park",
-        title: "Chief Operating Officer",
-        avatar: mark("DP"),
-        children: [
-          {
-            key: "support-agent",
-            name: "Support Agent",
-            title: "Tier-1 customer support",
-            variant: "agent",
-            avatar: agentMark,
-            extra: <Badge tone="warning">Paused</Badge>,
-          },
-          {
-            key: "ops",
-            name: "Linh Nguyen",
-            title: "Operations Manager",
-            avatar: mark("LN"),
-          },
-        ],
-      },
-      {
-        key: "cfo",
-        name: "Sofia Rossi",
-        title: "Chief Financial Officer",
-        avatar: mark("SR"),
-        children: [
-          {
-            key: "controller",
-            name: "Takumi Ito",
-            title: "Financial Controller",
-            avatar: mark("TI"),
-          },
-        ],
-      },
-    ],
-  },
-];
-
-export default function OrgChartDoc() {
-  return (
-    <AppShell
-      sidebar={
-        <Sidebar
-          activeId="chart"
-          sections={sections}
-          onSelect={() => {}}
-          product={{ name: "CoreDesk", role: "Admin", color: "hsl(var(--primary))" }}
-        />
-      }
-      topbar={<Topbar />}
-    >
-      <PageContainer
-        title="Org chart"
-        subtitle="OrgChart · people and AI agents, top-down. Dashed boxes are agents."
-      >
-        <Card>
-          <CardContent>
-            <OrgChart data={org} label="Company org chart" />
-          </CardContent>
-        </Card>
-
-        {/* THE NARROW FORM: the same data under 40rem of container width. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            narrow container · the same data as a Tree
-          </Text>
-          <Card className="max-w-sm">
-            <CardContent>
-              <OrgChart data={org} label="Company org chart (list)" />
-            </CardContent>
-          </Card>
-        </Flex>
-      </PageContainer>
-    </AppShell>
-  );
-}

package/docs/data-display/permission-matrix.tsx

@@ -1,188 +0,0 @@
-/**
- * PermissionMatrix — 権限マトリクス (canonical RBAC role × permission grid, ).
- *
- * A REAL export from `@godxjp/ui/data-display` (the lesson: a consumer cannot import a
- * docs page). Read-only ✓/— by default; `onGrantChange` switches to editable checkbox cells with
- * locked roles kept read-only; compare + 差分のみ come from `lib/permission-grid`; lifecycle
- * states follow the DataTable #216 vocabulary. Domain data below is demo-only — the library
- * encodes no platform role or permission.
- */
-import * as React from "react";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  PermissionMatrix,
-} from "@godxjp/ui/data-display";
-import { Form, FormField, Label, Select, Switch } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { grantKey } from "@godxjp/ui/lib/permission-grid";
-
-const ROLES = [
-  { id: "admin", name: "管理者", description: "全操作", locked: true },
-  { id: "editor", name: "編集者", description: "作成・編集" },
-  { id: "viewer", name: "閲覧者", description: "閲覧のみ" },
-];
-
-const PERMISSIONS = [
-  { id: "user.manage", name: "ユーザー管理", description: "メンバーの追加・停止", group: "管理" },
-  { id: "member.invite", name: "メンバー招待", description: "招待リンクの発行", group: "管理" },
-  {
-    id: "billing.view",
-    name: "請求書の閲覧",
-    description: "請求・支払い履歴の参照",
-    group: "請求",
-  },
-  { id: "billing.edit", name: "請求書の編集", description: "請求先・明細の変更", group: "請求" },
-  {
-    id: "report.export",
-    name: "レポート出力",
-    description: "CSV / PDF のエクスポート",
-    group: "レポート",
-  },
-];
-
-const INITIAL_GRANTS = new Set<string>([
-  ...PERMISSIONS.map((p) => grantKey("admin", p.id)),
-  grantKey("editor", "member.invite"),
-  grantKey("editor", "billing.view"),
-  grantKey("editor", "report.export"),
-  grantKey("viewer", "billing.view"),
-]);
-
-const roleOptions = ROLES.map((r) => ({ value: r.id, label: r.name }));
-
-export default function Demo() {
-  const [grants, setGrants] = React.useState<ReadonlySet<string>>(INITIAL_GRANTS);
-  const [compareA, setCompareA] = React.useState("editor");
-  const [compareB, setCompareB] = React.useState("viewer");
-  const [diffOnly, setDiffOnly] = React.useState(false);
-
-  return (
-    <PageContainer
-      title="PermissionMatrix"
-      subtitle="ロール × 権限の付与グリッド。既定は読み取り専用、onGrantChange で編集可能。"
-      density="compact"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>読み取り専用（既定）</CardTitle>
-            <CardDescription>
-              onGrantChange を渡さない限りセルは ✓/—（形状 + sr-only、色のみに依存しない）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <PermissionMatrix roles={ROLES} permissions={PERMISSIONS} grants={grants} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>編集可能 + ロック済みロール</CardTitle>
-            <CardDescription>
-              onGrantChange があるとセルは実 Checkbox。locked の「管理者」列は読み取り専用のまま。
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <PermissionMatrix
-              roles={ROLES}
-              permissions={PERMISSIONS}
-              grants={grants}
-              onGrantChange={(roleId, permissionId, granted) => {
-                setGrants((prev) => {
-                  const next = new Set(prev);
-                  if (granted) next.add(grantKey(roleId, permissionId));
-                  else next.delete(grantKey(roleId, permissionId));
-                  return next;
-                });
-              }}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>比較 + 差分のみ</CardTitle>
-            <CardDescription>
-              compare の 2 ロール列を強調し、diffOnly で一致行を隠す（lib/permission-grid
-              と同一ロジック）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Form>
-                <Flex direction="row" wrap align="end" gap="md">
-                  {/* Bare Select has NO accessible name (axe button-name) — the compare
-                    pickers are labelled through FormField, exactly as the showcase does. */}
-                  <FormField label="比較 A">
-                    <Select
-                      value={compareA}
-                      onValueChange={setCompareA}
-                      options={roleOptions}
-                      className="w-40"
-                    />
-                  </FormField>
-                  <FormField label="比較 B">
-                    <Select
-                      value={compareB}
-                      onValueChange={setCompareB}
-                      options={roleOptions}
-                      className="w-40"
-                    />
-                  </FormField>
-                  <Flex direction="row" align="center" gap="sm">
-                    <Switch
-                      id="pm-doc-diff-only"
-                      size="sm"
-                      checked={diffOnly}
-                      onCheckedChange={setDiffOnly}
-                    />
-                    <Label htmlFor="pm-doc-diff-only">差分のみ</Label>
-                  </Flex>
-                </Flex>
-              </Form>
-              <Card variant="outline" className="overflow-hidden">
-                <CardContent flush>
-                  <div>
-                    <PermissionMatrix
-                      roles={ROLES}
-                      permissions={PERMISSIONS}
-                      grants={grants}
-                      compare={[compareA, compareB]}
-                      diffOnly={diffOnly}
-                    />
-                  </div>
-                </CardContent>
-              </Card>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>ライフサイクル状態（#216 と同じ語彙）</CardTitle>
-            <CardDescription>loading → denied → error → empty の優先順位。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <PermissionMatrix roles={ROLES} permissions={PERMISSIONS} grants={grants} loading />
-              <PermissionMatrix roles={ROLES} permissions={[]} grants={grants} denied />
-              <PermissionMatrix
-                roles={ROLES}
-                permissions={[]}
-                grants={grants}
-                error
-                onRetry={() => {}}
-              />
-              <PermissionMatrix roles={ROLES} permissions={[]} grants={grants} />
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-display/popover-touch.tsx

@@ -1,27 +0,0 @@
-import { useState } from "react";
-import {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverTrigger,
-} from "@godxjp/ui/data-display";
-import { Button } from "@godxjp/ui/general";
-import { PageContainer } from "@godxjp/ui/layout";
-
-/** Dedicated closed-state coarse-pointer journey: trigger → action → close. */
-export default function Demo() {
-  const [open, setOpen] = useState(false);
-  return (
-    <PageContainer title="Popover touch journey">
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button>フィルターを開く</Button>
-        </PopoverTrigger>
-        <PopoverContent aria-label="フィルター操作">
-          <PopoverDescription>タッチ操作の確認用パネルです。</PopoverDescription>
-          <Button onClick={() => setOpen(false)}>適用して閉じる</Button>
-        </PopoverContent>
-      </Popover>
-    </PageContainer>
-  );
-}