@godxjp/ui 31.31.7 → 32.0.0

package/docs/layout/separator.tsx

@@ -1,327 +0,0 @@
-import { formatDate } from "@godxjp/ui/datetime";
-import {
-  Avatar,
-  AvatarFallback,
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, Separator } from "@godxjp/ui/layout";
-
-/**
- * Separator · Radix UI Separator wrapper for tokenized dividers. Default is
- * horizontal (section breaks). Set orientation="vertical" only when the parent
- * gives it a stable height (e.g. a row Flex with align="stretch"). decorative
- * defaults to true · set false only when the divider carries semantic meaning for
- * a11y.
- *
- * `label` INTERRUPTS the rule: a message stream's day divider, a "new messages"
- * watermark, an auth conjunction. A labelled rule flips `decorative` to false, so it is a real
- * role="separator" NAMED by the label (the visible node is aria-hidden, so the string is announced
- * exactly once). `labelAlign` is a controlled vocabulary value — start | center | end, logical, so
- * it flips under dir="rtl" — and `tone` moves the rule AND the label together, never colour alone.
- *
- * Composed only from real @godxjp/ui components; every date below is formatted with the package's
- * Intl/CLDR date subsystem on the active locale, never hand-built.
- */
-
-/** Fixed ISO-8601 instants so the page is deterministic across runs and locales. */
-const YESTERDAY_ISO = "2026-08-21";
-const TODAY_ISO = "2026-08-22";
-
-const LABEL_ALIGNMENTS = ["start", "center", "end"] as const;
-const TONES = ["default", "muted", "primary", "success", "warning", "destructive", "info"] as const;
-
-/** Stream fixtures — plain data, split by the calendar boundary each divider marks. */
-const BEFORE_YESTERDAY = [
-  {
-    initial: "佐",
-    name: "佐藤 智",
-    time: "09:12",
-    body: "おはようございます。昨夜のデプロイは無事完了しました。",
-  },
-  {
-    initial: "Ng",
-    name: "Nguyễn Minh",
-    time: "09:20",
-    body: "Cảm ơn anh. Em sẽ theo dõi log trong buổi sáng.",
-  },
-];
-
-const YESTERDAY = [
-  {
-    initial: "佐",
-    name: "佐藤 智",
-    time: "14:03",
-    body: "請求バッチの再実行を 15:00 に予定しています。",
-  },
-];
-
-const TODAY = [
-  {
-    initial: "Ng",
-    name: "Nguyễn Minh",
-    time: "08:41",
-    body: "Batch đã chạy xong, không có bản ghi lỗi nào.",
-  },
-  {
-    initial: "佐",
-    name: "佐藤 智",
-    time: "09:02",
-    body: "ありがとうございます。今週分のレポートにまとめます。",
-  },
-];
-
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Separator"
-      subtitle="水平・垂直区切り線 · セクション分割・ツールバーグループ・ラベル付き区切り"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>水平区切り（既定）</CardTitle>
-            <CardDescription>
-              orientation を省略すると horizontal。セクション間やフォームグループの分割に使う。 raw
-              border div は使わない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="col" gap="xs">
-                <Text weight="medium">基本情報</Text>
-                <Text tone="muted">取引先名・登録番号・請求先住所</Text>
-              </Flex>
-              <Separator />
-              <Flex direction="col" gap="xs">
-                <Text weight="medium">支払条件</Text>
-                <Text tone="muted">支払サイト・通貨・消費税区分</Text>
-              </Flex>
-              <Separator />
-              <Flex direction="col" gap="xs">
-                <Text weight="medium">銀行口座</Text>
-                <Text tone="muted">振込先金融機関・口座番号</Text>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>垂直区切り · ツールバーグループ</CardTitle>
-            <CardDescription>
-              orientation=&quot;vertical&quot; は親が安定した高さを与えているときのみ使用。
-              align=&quot;stretch&quot; の Flex 行で自然な高さを継承する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="sm" align="stretch" wrap>
-              <Flex direction="row" gap="sm">
-                <Button variant="outline" size="sm">
-                  インポート
-                </Button>
-                <Button variant="outline" size="sm">
-                  エクスポート
-                </Button>
-              </Flex>
-              <Separator orientation="vertical" className="hidden sm:block" />
-              <Flex direction="row" gap="sm">
-                <Button variant="outline" size="sm">
-                  一括承認
-                </Button>
-                <Button variant="outline" size="sm">
-                  一括却下
-                </Button>
-              </Flex>
-              <Separator orientation="vertical" className="hidden sm:block" />
-              <Button size="sm">新規作成</Button>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>decorative=&#123;false&#125; · セマンティック区切り</CardTitle>
-            <CardDescription>
-              decorative=&#123;false&#125; にすると role=&quot;separator&quot; が付与され
-              スクリーンリーダーが読み上げる。意味のある区切りにのみ使う。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="row" gap="sm" align="center" justify="between">
-                <Text weight="medium">承認済み請求書</Text>
-                <Badge tone="success">12件</Badge>
-              </Flex>
-              <Separator decorative={false} />
-              <Flex direction="row" gap="sm" align="center" justify="between">
-                <Text weight="medium">保留中請求書</Text>
-                <Badge tone="warning">4件</Badge>
-              </Flex>
-              <Separator decorative={false} />
-              <Flex direction="row" gap="sm" align="center" justify="between">
-                <Text weight="medium">却下済み請求書</Text>
-                <Badge tone="destructive">2件</Badge>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* ── — the real screen the labelled rule exists for ─────────────────────────── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>実画面 · チャンネルの投稿ストリーム</CardTitle>
-            <CardDescription>
-              日付が変わる境目に label 付きの区切りを置き、未読の先頭に &quot;新しいメッセージ&quot;
-              の透かしを置く（Slack / Mattermost の慣例）。日付は必ず Intl / CLDR
-              の日付サブシステムで整形する。未読の透かしは tone=&quot;primary&quot;
-              で線とラベルの両方が動くので、色だけの区別にならない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {BEFORE_YESTERDAY.map((post) => (
-                <Flex key={post.time} direction="row" gap="sm" align="start">
-                  <Avatar>
-                    <AvatarFallback>{post.initial}</AvatarFallback>
-                  </Avatar>
-                  <Flex direction="col" gap="xs">
-                    <Flex direction="row" gap="sm" align="baseline">
-                      <Text weight="medium">{post.name}</Text>
-                      <Text size="xs" tone="muted">
-                        {post.time}
-                      </Text>
-                    </Flex>
-                    <Text>{post.body}</Text>
-                  </Flex>
-                </Flex>
-              ))}
-
-              {/* Day divider — the label is the calendar boundary, formatted on the active locale. */}
-              <Separator label={formatDate(YESTERDAY_ISO, { kind: "long" })} labelAlign="start" />
-
-              {YESTERDAY.map((post) => (
-                <Flex key={post.time} direction="row" gap="sm" align="start">
-                  <Avatar>
-                    <AvatarFallback>{post.initial}</AvatarFallback>
-                  </Avatar>
-                  <Flex direction="col" gap="xs">
-                    <Flex direction="row" gap="sm" align="baseline">
-                      <Text weight="medium">{post.name}</Text>
-                      <Text size="xs" tone="muted">
-                        {post.time}
-                      </Text>
-                    </Flex>
-                    <Text>{post.body}</Text>
-                  </Flex>
-                </Flex>
-              ))}
-
-              {/* Unread watermark — content, not decoration, so it is announced. */}
-              <Separator label="新しいメッセージ" tone="primary" />
-              <Separator label={formatDate(TODAY_ISO, { kind: "long" })} labelAlign="start" />
-
-              {TODAY.map((post) => (
-                <Flex key={post.time} direction="row" gap="sm" align="start">
-                  <Avatar>
-                    <AvatarFallback>{post.initial}</AvatarFallback>
-                  </Avatar>
-                  <Flex direction="col" gap="xs">
-                    <Flex direction="row" gap="sm" align="baseline">
-                      <Text weight="medium">{post.name}</Text>
-                      <Text size="xs" tone="muted">
-                        {post.time}
-                      </Text>
-                    </Flex>
-                    <Text>{post.body}</Text>
-                  </Flex>
-                </Flex>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>labelAlign · start | center | end</CardTitle>
-            <CardDescription>
-              boolean ではなく controlled vocabulary。短い側の線だけが --separator-label-inset
-              で測られるグリッドトラックなので、dir=&quot;rtl&quot; では start と end
-              が自動的に入れ替わる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="lg">
-              {LABEL_ALIGNMENTS.map((align) => (
-                <Flex key={align} direction="col" gap="xs">
-                  <Text size="xs" tone="muted">
-                    labelAlign=&quot;{align}&quot;
-                  </Text>
-                  <Separator label="2026年8月22日" labelAlign={align} />
-                </Flex>
-              ))}
-              <Flex direction="col" gap="xs">
-                <Text size="xs" tone="muted">
-                  dir=&quot;rtl&quot; · labelAlign=&quot;start&quot;（短い側が右に反転）
-                </Text>
-                <div dir="rtl">
-                  <Separator label="رسائل جديدة" labelAlign="start" />
-                </div>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>tone · 線とラベルが一緒に動く</CardTitle>
-            <CardDescription>
-              tone は線の色だけでなくラベルの色も変える。色だけの区別にしないことで forced-colors
-              や色覚特性のある読者にも意味が残る（WCAG 1.4.1）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="lg">
-              {TONES.map((tone) => (
-                <Flex key={tone} direction="col" gap="xs">
-                  <Text size="xs" tone="muted">
-                    tone=&quot;{tone}&quot;
-                  </Text>
-                  <Separator label="新しいメッセージ" tone={tone} />
-                </Flex>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>content stress · 長いラベル・空ラベル</CardTitle>
-            <CardDescription>
-              両側の線は minmax(0, 1fr)
-              なので、翻訳が伸びても線が潰れるだけでコンテナからはみ出さない。 空文字や空白だけの
-              label はラベル無しと同じ扱いになり、素の線に戻る。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="lg">
-              <Separator label="ここから新しいメッセージが表示されています" />
-              <Separator label="Đây là nơi bắt đầu những tin nhắn chưa đọc của bạn" />
-              <Flex direction="col" gap="xs">
-                <Text size="xs" tone="muted">
-                  label=&quot; &quot;（空白のみ）→ 素の区切り線
-                </Text>
-                <Separator label=" " />
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/layout/service-role-panel.tsx

@@ -1,144 +0,0 @@
-/**
- * ServiceRolePanel — ロール一覧 ⇄ 詳細 (canonical master-detail roles surface).
- *
- * MasterDetail (rail=master) underneath owns all geometry: two tracks at 1440/1024, stacked
- * list-then-detail at 390. The panel adds selection (aria-current rows), locked system roles,
- * the built-in destructive AlertDialog (onDeleteRole fires only after confirm) and #216
- * lifecycle states. The detail body is consumer-composed — here a PermissionMatrix.
- */
-import * as React from "react";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Descriptions,
-  PermissionMatrix,
-} from "@godxjp/ui/data-display";
-import { Flex, PageContainer, ServiceRolePanel } from "@godxjp/ui/layout";
-import { toast } from "@godxjp/ui/feedback";
-import { grantKey } from "@godxjp/ui/lib/permission-grid";
-
-const ROLES = [
-  {
-    id: "owner",
-    name: "オーナー",
-    description: "契約・請求を含む全操作",
-    memberCount: 1,
-    locked: true,
-  },
-  { id: "operator", name: "オペレーター", description: "日常運用の操作", memberCount: 12 },
-  { id: "analyst", name: "アナリスト", description: "閲覧とレポート出力", memberCount: 34 },
-];
-
-const PERMISSIONS = [
-  { id: "instance.manage", name: "インスタンス管理", group: "運用" },
-  { id: "member.invite", name: "メンバー招待", group: "管理" },
-  { id: "report.export", name: "レポート出力", group: "レポート" },
-];
-
-const GRANTS = new Set<string>([
-  ...PERMISSIONS.map((p) => grantKey("owner", p.id)),
-  grantKey("operator", "instance.manage"),
-  grantKey("operator", "member.invite"),
-  grantKey("analyst", "report.export"),
-]);
-
-export default function Demo() {
-  const [selected, setSelected] = React.useState("operator");
-
-  return (
-    <PageContainer
-      title="ServiceRolePanel"
-      subtitle="ロールの一覧（レール）と選択中ロールの詳細。削除は破壊的確認ダイアログの後にのみ発火。"
-      density="compact"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>選択 + 削除確認</CardTitle>
-            <CardDescription>
-              locked の「オーナー」に削除ボタンは出ない。削除は AlertDialog で確認後に
-              onDeleteRole。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            {/* Two panels share this page, so each names its regions DISTINCTLY —
-                duplicate landmark names fail axe landmark-unique (same pattern as the
-                master-detail docs page). Single-instance apps keep the localized defaults. */}
-            <ServiceRolePanel
-              roles={ROLES}
-              value={selected}
-              onValueChange={setSelected}
-              onDeleteRole={(roleId) => toast.success(`ロール ${roleId} を削除しました（デモ）`)}
-              masterViewport="compact"
-              masterLabel="ロール一覧（編集可）"
-              detailLabel="選択中ロールの詳細"
-            >
-              {(role) =>
-                role && (
-                  <Flex direction="col" gap="md">
-                    <Descriptions>
-                      <Descriptions.Item label="ロール名">{role.name}</Descriptions.Item>
-                      <Descriptions.Item label="説明">{role.description ?? "—"}</Descriptions.Item>
-                      <Descriptions.Item label="メンバー数">
-                        {String(role.memberCount ?? 0)}
-                      </Descriptions.Item>
-                    </Descriptions>
-                    <PermissionMatrix
-                      roles={[role]}
-                      permissions={PERMISSIONS}
-                      grants={GRANTS}
-                      readOnly
-                    />
-                  </Flex>
-                )
-              }
-            </ServiceRolePanel>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>読み取り専用</CardTitle>
-            <CardDescription>readOnly では削除などの変更系アフォーダンスが消える。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ServiceRolePanel
-              roles={ROLES}
-              onDeleteRole={() => {}}
-              readOnly
-              masterLabel="ロール一覧（読み取り専用）"
-              detailLabel="ロールの詳細（読み取り専用）"
-            >
-              {(role) =>
-                role && (
-                  <Descriptions>
-                    <Descriptions.Item label="ロール名">{role.name}</Descriptions.Item>
-                  </Descriptions>
-                )
-              }
-            </ServiceRolePanel>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>ライフサイクル状態（#216 の語彙）</CardTitle>
-            <CardDescription>loading → denied → error → empty の優先順位。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <ServiceRolePanel roles={[]} loading />
-              <ServiceRolePanel roles={[]} denied />
-              <ServiceRolePanel roles={[]} error onRetry={() => {}} />
-              <ServiceRolePanel roles={[]} />
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}