@godxjp/ui 31.31.7 → 32.0.0

package/docs/showcase/org-switcher.tsx

@@ -1,320 +0,0 @@
-/**
- * Showcase · OrgSwitcher — sidebar organization/tenant switcher (Slack/Linear pattern)
- *
- * Requested by dxs-platform as a "first-class OrgSwitcher component".
- * GATE 0 — Framework-Component Test verdict: **COMPOSITION PATTERN**, not a framework
- * component. It owns NO new behaviour — search/keyboard/filtering come from `Command`
- * (cmdk), open/focus-trap/dismiss from `Popover`, the trigger from `Button` + `Avatar`.
- * It is fully expressible today from existing primitives + tokens (the issue itself asks
- * to "compose an interim from existing primitives"), its `current`/`organizations`/
- * `onSelect`/`footerActions` shape is screen-shaped, and `Sidebar` already ships the
- * `brand`/`product` + `onProductClick` slot designed to host exactly this. So it lives
- * here as a real, copy-pasteable recipe — NOT in `src/components/`.
- *
- * Composition map (OrgSwitcher block → @godxjp/ui primitive):
- *   sidebar-top card ........... Sidebar `brand` slot (renders above the nav scroll area)
- *   current-org trigger ........ Button(ghost) + Avatar(fallback initial) + Text(name/role)
- *   floating panel ............. Popover (open/close/focus-trap/Esc/outside-click)
- *   searchable org list ........ Command + CommandInput + CommandList + CommandItem
- *   current marker ............. Check icon + sr-only "(đang chọn)" (never colour-only)
- *   footer actions ............. Button(ghost) rows — "Tạo tổ chức" / "Tham gia bằng mã mời"
- *   app chrome ................. AppShell + Sidebar + Topbar + PageContainer
- *
- * a11y: trigger has an accessible name announcing the current org; the list is cmdk's
- * combobox→listbox with `role=option`; the active org carries a visible Check AND an
- * sr-only status word; every icon is `aria-hidden`; footer actions are siblings of the
- * list (no nested interactive controls). RTL-safe: logical spacing only (`ps-/pe-/ms-/
- * text-start`); `border-t`/`p-*` are direction-neutral.
- */
-import * as React from "react";
-import {
-  Boxes,
-  Check,
-  ChevronsUpDown,
-  LayoutDashboard,
-  Plus,
-  Settings,
-  Shield,
-  TicketPlus,
-  Users,
-} from "lucide-react";
-
-import { Button, Heading, Text } from "@godxjp/ui/general";
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  Separator,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-} from "@godxjp/ui/layout";
-import {
-  Avatar,
-  AvatarFallback,
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@godxjp/ui/data-display";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@godxjp/ui/data-entry";
-
-type Org = { id: string; name: string; role: string };
-
-const ORGS: Org[] = [
-  { id: "acme-hq", name: "Acme Holdings", role: "Quản trị viên" },
-  { id: "acme-jp", name: "Acme Japan K.K.", role: "Quản lý chi nhánh" },
-  { id: "acme-logi", name: "Acme Logistics", role: "Điều phối" },
-  { id: "bluewave", name: "BlueWave Retail", role: "Thành viên" },
-  { id: "northwind", name: "Northwind Trading", role: "Kế toán" },
-];
-
-/** First grapheme of the org name, upper-cased — a stable, emoji-free monogram. */
-function monogram(name: string): string {
-  return Array.from(name.trim())[0]?.toUpperCase() ?? "?";
-}
-
-type OrgSwitcherProps = {
-  organizations: Org[];
-  currentId: string;
-  onSelect: (id: string) => void;
-  onCreate: () => void;
-  onJoin: () => void;
-};
-
-/**
- * OrgSwitcher — the reusable recipe. A `Popover` whose trigger is the current-org card
- * and whose panel is a searchable `Command` list of orgs plus create/join footer actions.
- * Copy this function into a consumer app; every import is a real `@godxjp/ui` primitive.
- */
-function OrgSwitcher({ organizations, currentId, onSelect, onCreate, onJoin }: OrgSwitcherProps) {
-  const [open, setOpen] = React.useState(false);
-  const [query, setQuery] = React.useState("");
-  const current = organizations.find((org) => org.id === currentId) ?? organizations[0];
-
-  function choose(id: string) {
-    onSelect(id);
-    setOpen(false);
-    setQuery("");
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          aria-label={`Tổ chức hiện tại: ${current.name}. Nhấn để đổi tổ chức`}
-          className="w-full justify-between"
-        >
-          {/* Inside a Button, i.e. inside a <button>, whose content model is phrasing content
-              only — so every Flex on this branch renders as a <span>. */}
-          <Flex as="span" align="center" gap="sm" className="min-w-0">
-            <Avatar className="size-7 rounded-md">
-              <AvatarFallback>{monogram(current.name)}</AvatarFallback>
-            </Avatar>
-            <Flex as="span" direction="col" gap="none" className="min-w-0 text-start">
-              <Text as="span" size="sm" weight="medium" truncate>
-                {current.name}
-              </Text>
-              <Text as="span" size="xs" tone="muted" truncate>
-                {current.role}
-              </Text>
-            </Flex>
-          </Flex>
-          <ChevronsUpDown aria-hidden className="size-4 shrink-0 opacity-60" />
-        </Button>
-      </PopoverTrigger>
-      {/* `flush` — the Command list owns its own inset, so its rows and separators run edge to
-          edge inside the popover instead of being indented by the panel padding. */}
-      <PopoverContent flush align="start" sideOffset={6} className="w-64">
-        <Command label="Chọn tổ chức">
-          <CommandInput
-            placeholder="Tìm tổ chức…"
-            aria-label="Tìm tổ chức"
-            value={query}
-            onValueChange={setQuery}
-          />
-          <CommandList>
-            <CommandEmpty>Không tìm thấy tổ chức.</CommandEmpty>
-            <CommandGroup heading="Tổ chức của bạn">
-              {organizations.map((org) => {
-                const active = org.id === currentId;
-                return (
-                  <CommandItem
-                    key={org.id}
-                    value={`${org.name} ${org.role}`}
-                    keywords={[org.id]}
-                    onSelect={() => choose(org.id)}
-                  >
-                    <Flex as="span" align="center" gap="sm" className="w-full min-w-0">
-                      <Avatar className="size-6 rounded">
-                        <AvatarFallback>{monogram(org.name)}</AvatarFallback>
-                      </Avatar>
-                      <Flex as="span" direction="col" gap="none" className="min-w-0 text-start">
-                        <Text as="span" size="sm" truncate>
-                          {org.name}
-                        </Text>
-                        <Text as="span" size="xs" tone="muted" truncate>
-                          {org.role}
-                        </Text>
-                      </Flex>
-                      {active ? (
-                        <Check aria-hidden className="text-primary ms-auto size-4 shrink-0" />
-                      ) : null}
-                    </Flex>
-                    {active ? <span className="sr-only">(đang chọn)</span> : null}
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-          </CommandList>
-          <Separator />
-          {/* Menu-style footer: the two actions read as one list, so no seam between them. */}
-          <Flex direction="col" gap="none">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="w-full justify-start"
-              onClick={() => {
-                onCreate();
-                setOpen(false);
-              }}
-            >
-              <Plus aria-hidden className="size-4" />
-              Tạo tổ chức mới
-            </Button>
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="w-full justify-start"
-              onClick={() => {
-                onJoin();
-                setOpen(false);
-              }}
-            >
-              <TicketPlus aria-hidden className="size-4" />
-              Tham gia bằng mã mời
-            </Button>
-          </Flex>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-const SECTIONS: SidebarSectionProp[] = [
-  {
-    label: "Điều hành",
-    items: [
-      { id: "overview", label: "Tổng quan", icon: LayoutDashboard },
-      { id: "workspaces", label: "Không gian làm việc", icon: Boxes },
-      { id: "members", label: "Thành viên", icon: Users },
-    ],
-  },
-  {
-    label: "Quản trị",
-    items: [
-      { id: "roles", label: "Vai trò", icon: Shield },
-      { id: "settings", label: "Cài đặt", icon: Settings },
-    ],
-  },
-];
-
-export default function OrgSwitcherShowcase() {
-  const [activeId, setActiveId] = React.useState("overview");
-  const [currentOrg, setCurrentOrg] = React.useState("acme-hq");
-  const [lastAction, setLastAction] = React.useState<string | null>(null);
-
-  const current = ORGS.find((org) => org.id === currentOrg) ?? ORGS[0];
-
-  return (
-    <AppShell
-      sidebar={
-        <Sidebar
-          activeId={activeId}
-          onSelect={setActiveId}
-          sections={SECTIONS}
-          brand={
-            <OrgSwitcher
-              organizations={ORGS}
-              currentId={currentOrg}
-              onSelect={(id) => {
-                setCurrentOrg(id);
-                setLastAction(null);
-              }}
-              onCreate={() => setLastAction("Mở luồng tạo tổ chức mới")}
-              onJoin={() => setLastAction("Mở luồng nhập mã mời")}
-            />
-          }
-          footer={
-            <Flex direction="col" gap="xs">
-              <Text size="xs" weight="medium">
-                Satoshi Yamamoto
-              </Text>
-              <Text size="xs" tone="muted">
-                Trực tuyến · Tokyo
-              </Text>
-            </Flex>
-          }
-        />
-      }
-      topbar={
-        <Topbar
-          start={
-            <Text size="sm" weight="medium">
-              Acme Console
-            </Text>
-          }
-          end={
-            <Avatar className="size-7 rounded-md">
-              <AvatarFallback>SY</AvatarFallback>
-            </Avatar>
-          }
-        />
-      }
-    >
-      <PageContainer
-        title="Bảng điều khiển"
-        subtitle={`Tổ chức: ${current.name} · ${current.role}`}
-      >
-        <Card>
-          <CardHeader>
-            <CardTitle>OrgSwitcher (mẫu tổ hợp)</CardTitle>
-            <CardDescription>
-              Thẻ tổ chức ở đầu Sidebar mở một danh sách tìm kiếm bằng Command, kèm hành động tạo tổ
-              chức và tham gia bằng mã mời. Toàn bộ dựng từ primitive @godxjp/ui · không thêm
-              component framework.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm" align="start">
-              <Flex align="center" gap="sm">
-                <Heading level={4}>Tổ chức đang chọn</Heading>
-                <Badge tone="info">{current.name}</Badge>
-              </Flex>
-              <Text size="sm" tone="muted">
-                Đổi tổ chức từ thẻ ở góc trên Sidebar để cập nhật giá trị này.
-              </Text>
-              {lastAction ? <Badge tone="warning">{lastAction}</Badge> : null}
-            </Flex>
-          </CardContent>
-        </Card>
-      </PageContainer>
-    </AppShell>
-  );
-}

package/docs/showcase/permission-matrix.tsx

@@ -1,354 +0,0 @@
-/**
- * Showcase · permission-matrix — 権限マトリクス (RBAC role × permission grid)
- *
- * A role × permission matrix with a STICKY first column (権限), ✓/— cells, a
- * two-role COMPARE mode, and a 差分のみ (differences-only) filter — the pattern
- * DXS role tabs (SCR-203) and the org role editor (SCR-111b) each hand-rolled
- *. Read-only by default.
- *
- * SINCE the grid itself IS a package export — `PermissionMatrix` from
- * `@godxjp/ui/data-display` (see docs/data-display/permission-matrix.tsx). The
- * original Gate-0 "composition pattern" verdict was OUTCOME-corrected the same
- * way ErrorSurface was: a consumer cannot import a docs page, so the
- * canonical grid needed an importable home. Prefer the export in app code.
- *
- * This showcase remains as the COMPOSED form of the same screen — the full
- * hand-built Table-family version with its own compare controls — for consumers
- * who need a variant the export does not model. The shared grant/diff DATA
- * logic stays in the pure, tested `@godxjp/ui/lib/permission-grid` util (no
- * strings, no React), used identically by the export and by this composition.
- *
- * GAP: DataTable/ColumnDef cannot pin the FIRST column (only the header row and a
- * single trailing `pin:'end'` column). So the sticky-権限 column is composed from
- * the real Table family primitives with `sticky start-0` + a token edge — exactly
- * as docs/showcase/table-sticky-columns.tsx does. No hand-rolled <table>, no raw
- * HTML controls: role pickers = Select, the diff toggle = Switch, cells = Badge.
- *
- * DNA: compact density, semantic tokens only (success ✓, muted —, warning 差分),
- * shape-encoded state (Check vs Minus icon, never colour-only) + sr-only text for
- * screen readers, quiet JP copy, no emoji.
- */
-import * as React from "react";
-import { Check, Minus } from "lucide-react";
-
-import {
-  Badge,
-  Card,
-  CardAction,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@godxjp/ui/data-display";
-import { Form, FormField, Label, Select, Switch } from "@godxjp/ui/data-entry";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { cn } from "@godxjp/ui/lib/utils";
-import {
-  type ComparePair,
-  countDifferences,
-  countGrants,
-  grantKey,
-  hasGrant,
-  rolesDifferOnPermission,
-  visibleRows,
-} from "@godxjp/ui/lib/permission-grid";
-
-// ── ドメイン: ロール（列）と権限（行） ───────────────────────────────────────
-type Role = { id: string; name: string; hint: string };
-type Permission = { id: string; name: string; description: string; category: string };
-
-const ROLES: Role[] = [
-  { id: "admin", name: "管理者", hint: "全操作" },
-  { id: "editor", name: "編集者", hint: "作成・編集" },
-  { id: "viewer", name: "閲覧者", hint: "閲覧のみ" },
-  { id: "guest", name: "ゲスト", hint: "限定共有" },
-];
-
-const PERMISSIONS: Permission[] = [
-  {
-    id: "user.manage",
-    name: "ユーザー管理",
-    description: "メンバーの追加・停止・権限変更",
-    category: "管理",
-  },
-  { id: "member.invite", name: "メンバー招待", description: "招待リンクの発行", category: "管理" },
-  {
-    id: "billing.view",
-    name: "請求書の閲覧",
-    description: "請求・支払い履歴の参照",
-    category: "請求",
-  },
-  { id: "billing.edit", name: "請求書の編集", description: "請求先・明細の変更", category: "請求" },
-  {
-    id: "report.export",
-    name: "レポート出力",
-    description: "CSV / PDF のエクスポート",
-    category: "レポート",
-  },
-  { id: "audit.view", name: "監査ログ閲覧", description: "操作履歴の参照", category: "レポート" },
-  {
-    id: "apikey.issue",
-    name: "APIキー発行",
-    description: "連携用トークンの発行",
-    category: "連携",
-  },
-  { id: "settings.edit", name: "設定変更", description: "組織設定・SSO の変更", category: "設定" },
-];
-
-/** 付与マトリクス（authz キャッシュと同じ `role permission` タプルの Set）。 */
-const GRANTS: ReadonlySet<string> = new Set<string>([
-  // 管理者: 全権限
-  ...PERMISSIONS.map((p) => grantKey("admin", p.id)),
-  // 編集者
-  grantKey("editor", "member.invite"),
-  grantKey("editor", "billing.view"),
-  grantKey("editor", "report.export"),
-  grantKey("editor", "apikey.issue"),
-  // 閲覧者
-  grantKey("viewer", "billing.view"),
-  grantKey("viewer", "report.export"),
-  grantKey("viewer", "audit.view"),
-  // ゲスト
-  grantKey("guest", "billing.view"),
-]);
-
-const roleOptions = ROLES.map((r) => ({ value: r.id, label: r.name }));
-const roleName = (id: string) => ROLES.find((r) => r.id === id)?.name ?? id;
-
-// ── セル: ✓ 許可 / — 不許可（shape + sr-only、色のみで状態を示さない） ────────
-function GrantCell({ granted }: { granted: boolean }) {
-  return granted ? (
-    <Badge tone="success" variant="outline" className="justify-center">
-      <Check aria-hidden="true" />
-      <span className="sr-only">許可</span>
-    </Badge>
-  ) : (
-    <Flex align="center" justify="center" gap="none" className="text-muted-foreground">
-      <Minus aria-hidden="true" className="size-4" />
-      <span className="sr-only">不許可</span>
-    </Flex>
-  );
-}
-
-// 固定列（先頭 = 権限）— スクロールする本体が下を通るので不透明背景 + トークン端。
-// `.ui-permission-matrix-pin` is the packaged component's own class (gh#874 fixed its opaque
-// base + tone/hover/selected compositing in `data-display-layout.css`) — reused here rather than
-// hand-rolled so this showcase gets the identical answer instead of drifting from it again.
-const PIN_START = "ui-permission-matrix-pin";
-
-export default function Demo() {
-  const [compareA, setCompareA] = React.useState("editor");
-  const [compareB, setCompareB] = React.useState("viewer");
-  const [diffOnly, setDiffOnly] = React.useState(false);
-
-  const compare = React.useMemo<ComparePair>(() => [compareA, compareB], [compareA, compareB]);
-  const compared = new Set(compare);
-  const sameRole = compareA === compareB;
-
-  const rows = visibleRows(PERMISSIONS, GRANTS, { compare, diffOnly: diffOnly && !sameRole });
-  const diffN = sameRole ? 0 : countDifferences(PERMISSIONS, GRANTS, compare);
-
-  return (
-    <PageContainer
-      title="権限マトリクス"
-      subtitle="ロール × 権限の付与状況。先頭列を固定し、2 ロールを比較して差分のみ抽出できる（既定は読み取り専用）。"
-      density="compact"
-    >
-      <Flex direction="col" gap="lg">
-        {/* ── 比較コントロール ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>比較</CardTitle>
-            <Text size="xs" tone="muted">
-              2 つのロールを選ぶと差分を強調表示。「差分のみ」で一致行を隠す。
-            </Text>
-          </CardHeader>
-          <CardContent>
-            <Form>
-              <Flex direction="row" wrap align="end" gap="md">
-                <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-diff-only"
-                    size="sm"
-                    checked={diffOnly}
-                    onCheckedChange={setDiffOnly}
-                    disabled={sameRole}
-                  />
-                  <Label htmlFor="pm-diff-only">差分のみ</Label>
-                </Flex>
-                <Flex direction="row" align="center" gap="xs" aria-live="polite">
-                  {sameRole ? (
-                    <Text size="xs" tone="muted">
-                      同一ロールを比較中
-                    </Text>
-                  ) : (
-                    <>
-                      <Badge tone={diffN > 0 ? "warning" : "success"} variant="outline">
-                        差分 {diffN} 件
-                      </Badge>
-                      <Text size="xs" tone="muted">
-                        {roleName(compareA)} vs {roleName(compareB)}
-                      </Text>
-                    </>
-                  )}
-                </Flex>
-              </Flex>
-            </Form>
-          </CardContent>
-        </Card>
-
-        {/* ── マトリクス本体 ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>ロール × 権限</CardTitle>
-            <CardAction>
-              <Text size="xs" tone="muted" tabular>
-                権限 {rows.length} / {PERMISSIONS.length} 件 · ロール {ROLES.length}
-              </Text>
-            </CardAction>
-          </CardHeader>
-          <CardContent flush>
-            <div className="ui-permission-matrix overflow-x-auto">
-              <Table className="min-w-[760px]">
-                <TableHeader className="bg-secondary [&_tr]:bg-secondary">
-                  <TableRow className="bg-secondary hover:bg-secondary">
-                    <TableHead className={PIN_START}>権限</TableHead>
-                    {ROLES.map((role) => {
-                      const isCompared = !sameRole && compared.has(role.id);
-                      return (
-                        <TableHead
-                          key={role.id}
-                          className={cn("text-center", isCompared && "bg-primary/[0.06]")}
-                          aria-label={isCompared ? `${role.name}（比較対象）` : role.name}
-                        >
-                          <Flex direction="col" align="center" gap="none" className="leading-tight">
-                            <Flex align="center" gap="xs">
-                              <Text weight="medium">{role.name}</Text>
-                              {isCompared && (
-                                <Badge tone="primary" variant="outline">
-                                  {role.id === compareA ? "A" : "B"}
-                                </Badge>
-                              )}
-                            </Flex>
-                            <Text size="2xs" tone="muted">
-                              {role.hint} · {countGrants(PERMISSIONS, GRANTS, role.id)}件
-                            </Text>
-                          </Flex>
-                        </TableHead>
-                      );
-                    })}
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {rows.map((perm) => {
-                    const isDiffRow =
-                      !sameRole && rolesDifferOnPermission(GRANTS, compare, perm.id);
-                    return (
-                      <TableRow
-                        key={perm.id}
-                        // Same hand-off the PermissionMatrix component uses (gh#872): the wash,
-                        // the leading rail and the hover step belong to `styles/table-layout.css`,
-                        // which reads `--surface-warning` first — so this hand-composed table is
-                        // re-groundable by a tenant theme exactly like the packaged one. A local
-                        // `bg-warning/[0.07]` here would be a second, private warning surface.
-                        data-tone={isDiffRow ? "warning" : undefined}
-                        aria-label={isDiffRow ? `${perm.name} · 比較ロール間で差分あり` : undefined}
-                      >
-                        <TableCell className={cn(PIN_START, "align-middle")}>
-                          <Flex direction="col" className="leading-tight">
-                            <Flex align="center" gap="xs">
-                              <Text weight="medium">{perm.name}</Text>
-                              {isDiffRow && (
-                                <Badge tone="warning" variant="outline">
-                                  差分
-                                </Badge>
-                              )}
-                            </Flex>
-                            <Text size="2xs" tone="muted">
-                              {perm.category} · {perm.description}
-                            </Text>
-                          </Flex>
-                        </TableCell>
-                        {ROLES.map((role) => {
-                          const isCompared = !sameRole && compared.has(role.id);
-                          return (
-                            <TableCell
-                              key={role.id}
-                              className={cn(
-                                "text-center align-middle",
-                                isCompared && "bg-primary/[0.04]",
-                              )}
-                            >
-                              <GrantCell granted={hasGrant(GRANTS, role.id, perm.id)} />
-                            </TableCell>
-                          );
-                        })}
-                      </TableRow>
-                    );
-                  })}
-                </TableBody>
-              </Table>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* ── 凡例 ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>凡例</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap gap="md" align="center">
-              <Flex direction="row" align="center" gap="xs">
-                <Badge tone="success" variant="outline" className="justify-center">
-                  <Check aria-hidden="true" />
-                </Badge>
-                <Text size="xs" tone="muted">
-                  許可
-                </Text>
-              </Flex>
-              <Flex direction="row" align="center" gap="xs">
-                <Flex align="center" gap="none" className="text-muted-foreground">
-                  <Minus aria-hidden="true" className="size-4" />
-                </Flex>
-                <Text size="xs" tone="muted">
-                  不許可
-                </Text>
-              </Flex>
-              <Flex direction="row" align="center" gap="xs">
-                <Badge tone="warning" variant="outline">
-                  差分
-                </Badge>
-                <Text size="xs" tone="muted">
-                  比較 A / B で付与が異なる行
-                </Text>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}