@godxjp/ui 31.31.8 → 32.0.1

package/docs/layout/sidebar.tsx

@@ -1,689 +0,0 @@
-import { useState, type CSSProperties } from "react";
-import { Link } from "react-router-dom";
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  Sidebar,
-  SidebarHeader,
-  SidebarItem,
-  SidebarSection,
-  Topbar,
-  createSidebarLink,
-} from "@godxjp/ui/layout";
-import type { SidebarItemData, SidebarRenderItemProp, SidebarSectionProp } from "@godxjp/ui/layout";
-import {
-  Avatar,
-  AvatarFallback,
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@godxjp/ui/feedback";
-import { useTranslation } from "@godxjp/ui/i18n";
-import {
-  LayoutDashboard,
-  FileText,
-  Receipt,
-  Users,
-  BookOpen,
-  Building2,
-  ShieldCheck,
-  CreditCard,
-  Plus,
-  Boxes,
-  Star,
-  Settings,
-  PanelLeftClose,
-  PanelLeftOpen,
-  Search,
-  ChevronsUpDown,
-} from "lucide-react";
-
-/**
- * Sidebar · data-driven vertical nav rail.
- * Focus: every public prop · sections, groups with children[], product chip,
- * brand header, linkComponent (router links) + SidebarItem asChild, the
- * deprecated renderItem escape hatch, children composition, footer, active
- * item, collapsed icon-only mode.
- * Composed only from real @godxjp/ui components inside an AppShell frame.
- */
-
-const FULL_SECTIONS: SidebarSectionProp[] = [
-  {
-    label: "会計",
-    items: [
-      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
-      {
-        id: "ledger",
-        label: "元帳",
-        icon: BookOpen,
-        children: [
-          { id: "journal", label: "仕訳入力", icon: FileText },
-          { id: "recurring", label: "定期仕訳", icon: Receipt },
-          { id: "coa", label: "勘定科目", icon: CreditCard },
-        ],
-      },
-      { id: "invoices", label: "請求書", icon: Receipt, badge: 3 },
-      { id: "bills", label: "仕入請求書", icon: FileText },
-    ],
-  },
-  {
-    label: "マスタ",
-    items: [
-      { id: "partners", label: "取引先", icon: Building2 },
-      { id: "items", label: "品目", icon: CreditCard },
-    ],
-  },
-  {
-    label: "管理",
-    items: [
-      { id: "users", label: "ユーザー", icon: Users },
-      { id: "roles", label: "権限", icon: ShieldCheck, disabled: true },
-    ],
-  },
-];
-
-const BRAND_SECTIONS: SidebarSectionProp[] = [
-  {
-    label: "アプリ",
-    items: [
-      { id: "home", label: "ホーム", icon: LayoutDashboard },
-      { id: "projects", label: "プロジェクト", icon: Boxes },
-      { id: "settings", label: "設定", icon: Settings },
-    ],
-  },
-];
-
-const FAVOURITE_SECTIONS: SidebarSectionProp[] = [
-  {
-    label: "ナビゲーション",
-    items: [
-      { id: "overview", label: "概要", icon: LayoutDashboard },
-      { id: "reports", label: "レポート", icon: FileText },
-      { id: "members", label: "メンバー", icon: Users },
-    ],
-  },
-];
-
-const FAVOURITE_IDS = new Set(["overview", "members"]);
-
-/**
- * badgeTone · what a count MEANS, not what colour it is. `neutral`（既定）は「未読」、
- * `destructive` は「自分宛て」（メンション・DM）。`badge` には数値や文字列だけを渡します ·
- * ここに <Badge> を入れると .sb-badge の中にもう一枚ピルが入り、二重の丸が出ます。
- */
-const MENTION_SECTIONS: SidebarSectionProp[] = [
-  {
-    label: "チャンネル",
-    items: [
-      { id: "general", label: "general", icon: Boxes, badge: 12 },
-      { id: "accounting", label: "経理", icon: Receipt, badge: 3, badgeTone: "destructive" },
-      { id: "design", label: "design", icon: Star, badge: "9+", badgeTone: "neutral" },
-      { id: "random", label: "random", icon: LayoutDashboard },
-    ],
-  },
-];
-
-/**
- * nav row and nav icon read SEPARATE colour tokens. A service normally sets these once in
- * its theme.css (`:root` or a scoped `[data-tenant] .app-sidebar`); here they are scoped to one
- * demo frame so the default rail can sit next to the themed one. Icons only — geometry (16px icon,
- * 32px row, 10px gap) is untouched.
- */
-const CANONICAL_NAV_TOKENS = {
-  "--sidebar-nav-icon-foreground": "hsl(var(--foreground))",
-  "--sidebar-nav-icon-active-foreground": "hsl(var(--primary))",
-} as CSSProperties;
-
-/**
- * THE router-link contract. `createSidebarLink` adapts any router `Link` — React Router /
- * TanStack use `to`, Inertia and Next.js use `href` (the default, and
- * `inertiaSidebarLink(Link)` from `@godxjp/ui/inertia` is the same thing pre-bound). The consumer
- * writes NO row markup: the Sidebar composes the icon slot, the label, the badge, the active state
- * and the collapsed rail, and hands them to the link as `children`.
- */
-const RouterLink = createSidebarLink(Link, "to");
-
-/** Router-driven rows — each carries an `href`, which is what the link adapter navigates to. */
-const ROUTED_SECTIONS: SidebarSectionProp[] = [
-  {
-    label: "ナビゲーション",
-    items: [
-      { id: "overview", label: "概要", icon: LayoutDashboard, href: "/overview" },
-      {
-        id: "reports",
-        label: "レポート",
-        icon: FileText,
-        href: "/reports",
-        badge: 5,
-      },
-      {
-        id: "ledger",
-        label: "元帳",
-        icon: BookOpen,
-        children: [{ id: "journal-2", label: "仕訳入力", icon: Receipt, href: "/journal" }],
-      },
-      { id: "members", label: "メンバー", icon: Users, href: "/members", disabled: true },
-    ],
-  },
-];
-
-/**
- * renderItem · DEPRECATED — kept working for existing consumers. It leaves the row CONTENT
- * to the caller, which is how a `<Link>{item.label}</Link>` silently dropped every icon in
- * production. `rowProps` now carries the library-composed `children`, so spreading it (or rendering
- * `rowProps.children`) restores the canonical row; the star is a decorative, non-interactive affix.
- * Prefer `linkComponent` (above) or `SidebarItem asChild` for new code.
- */
-function renderFavouriteRow(
-  item: SidebarItemData,
-  rowProps: SidebarRenderItemProp,
-  onSelect: (id: string) => void,
-) {
-  return (
-    <a
-      href={`#${item.id}`}
-      onClick={(event) => {
-        event.preventDefault();
-        onSelect(item.id);
-      }}
-    >
-      {/* The icon + label come from the LIBRARY, not from hand-written .sb-icon / .sb-label spans. */}
-      {rowProps.children}
-      {FAVOURITE_IDS.has(item.id) ? (
-        <Star className="text-attention size-4 shrink-0 fill-current" aria-label="お気に入り" />
-      ) : null}
-    </a>
-  );
-}
-
-const COMPOSED_ITEMS: SidebarItemData[] = [
-  { id: "starred-1", label: "月次決算", icon: Star, href: "/close" },
-  { id: "starred-2", label: "売掛金一覧", icon: Receipt, href: "/receivables" },
-  { id: "starred-3", label: "取引先マスタ", icon: Building2, href: "/partners" },
-];
-
-export default function Demo() {
-  const { t } = useTranslation();
-  const [activeId, setActiveId] = useState("journal");
-  const [collapsed, setCollapsed] = useState(false);
-  const [brandActiveId, setBrandActiveId] = useState("projects");
-  const [renderActiveId, setRenderActiveId] = useState("overview");
-  const [routedActiveId, setRoutedActiveId] = useState("reports");
-  const [composedActiveId, setComposedActiveId] = useState("starred-1");
-  const [tokenActiveId, setTokenActiveId] = useState("overview");
-  const [mentionActiveId, setMentionActiveId] = useState("general");
-
-  const sidebar = (
-    <Sidebar
-      ariaLabel="会計アプリのメインナビゲーション"
-      activeId={activeId}
-      collapsed={collapsed}
-      onSelect={setActiveId}
-      sections={FULL_SECTIONS}
-      aria-label="ドッキングサイドバーのナビゲーション"
-      product={{
-        name: "CoreBooks",
-        role: "株式会社アクメ",
-        color: "hsl(var(--primary))",
-      }}
-      onProductClick={() => undefined}
-      /*
-       * footer · brand と同じ「関数を渡すと EFFECTIVE な collapsed が来る」形。自前の collapsed
-       * を読むと、AppShell が同じ Sidebar をドロワーにも渡す（ドロワーは展開表示に戻す）ため
-       * 全幅のドロワーの中でアイコンだけの足元になります。
-       */
-      /*
-       * action · the rail's ONE primary action (gh#1185), above the scrolling nav. Full width
-       * when expanded; icon-only with a tooltip in the collapsed rail.
-       */
-      action={(railCollapsed) =>
-        railCollapsed ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button size="sm" aria-label={t("sidebarDocs.newEntry")}>
-                <Plus />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right">{t("sidebarDocs.newEntry")}</TooltipContent>
-          </Tooltip>
-        ) : (
-          <Button size="sm" fullWidth>
-            <Plus />
-            {t("sidebarDocs.newEntry")}
-          </Button>
-        )
-      }
-      footer={(railCollapsed) =>
-        railCollapsed ? (
-          <Flex justify="center">
-            <Avatar className="size-7 shrink-0">
-              <AvatarFallback>山</AvatarFallback>
-            </Avatar>
-          </Flex>
-        ) : (
-          <Flex direction="col" gap="xs">
-            <Text as="div" weight="medium">
-              山田 太郎
-            </Text>
-            <Flex align="center" gap="xs">
-              <span className="bg-success size-1.5 rounded-full" />
-              <Text size="xs" tone="muted">
-                オンライン
-              </Text>
-            </Flex>
-          </Flex>
-        )
-      }
-    />
-  );
-
-  const topbar = (
-    <Topbar
-      start={
-        <>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            aria-label={collapsed ? "サイドバーを展開" : "サイドバーを折りたたむ"}
-            aria-pressed={collapsed}
-            onClick={() => setCollapsed((c) => !c)}
-          >
-            {collapsed ? <PanelLeftOpen /> : <PanelLeftClose />}
-          </Button>
-          <Avatar className="rounded-md">
-            <AvatarFallback className="bg-primary text-primary-foreground font-bold">
-              C
-            </AvatarFallback>
-          </Avatar>
-        </>
-      }
-      center={
-        <Button
-          variant="outline"
-          size="sm"
-          className="text-muted-foreground w-full max-w-sm justify-start"
-        >
-          <Search />
-          検索…
-        </Button>
-      }
-    />
-  );
-
-  return (
-    <AppShell sidebar={sidebar} topbar={topbar} sidebarCollapsed={collapsed}>
-      <PageContainer
-        title="Sidebar デモ"
-        subtitle="sections / groups / product chip / footer / active item"
-        breadcrumb={[{ label: "ホーム", to: "/" }, { label: "Sidebar デモ" }]}
-        extra={
-          <Button size="sm" variant="outline" onClick={() => setCollapsed((c) => !c)}>
-            {collapsed ? "サイドバーを展開" : "サイドバーを折りたたむ"}
-          </Button>
-        }
-      >
-        <Flex direction="col" gap="lg">
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>現在の状態</CardTitle>
-              <CardDescription>
-                左のレールに渡している sections prop の現在のアクティブ項目
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Badge variant="secondary">{activeId}</Badge>
-            </CardContent>
-          </Card>
-
-          {/* brand prop · replaces the product chip with a fully custom header (SidebarHeader). */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>brand プロップ</CardTitle>
-              <CardDescription>
-                product チップの代わりに SidebarHeader で完全に自作したヘッダーを差し込みます。
-                brand と product は排他です。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Card className="h-80 w-64 overflow-hidden">
-                <CardContent flush>
-                  <Flex direction="col">
-                    <Sidebar
-                      ariaLabel="ブランド例のナビゲーション"
-                      activeId={brandActiveId}
-                      onSelect={setBrandActiveId}
-                      sections={BRAND_SECTIONS}
-                      aria-label="brand プロップ例のナビゲーション"
-                      brand={
-                        <SidebarHeader>
-                          <Avatar className="size-7 shrink-0 rounded-md">
-                            <AvatarFallback className="bg-primary text-primary-foreground">
-                              <Boxes className="size-4" aria-hidden="true" />
-                            </AvatarFallback>
-                          </Avatar>
-                          <Flex direction="col" gap="xs" className="min-w-0">
-                            <Text weight="bold" truncate>
-                              Acme Suite
-                            </Text>
-                            <Text size="xs" tone="muted" truncate>
-                              v7.0 Enterprise
-                            </Text>
-                          </Flex>
-                        </SidebarHeader>
-                      }
-                    />
-                  </Flex>
-                </CardContent>
-              </Card>
-            </CardContent>
-          </Card>
-
-          {/* linkComponent prop · THE router-link contract — library composes the row. */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>linkComponent プロップ（ルーターリンク）</CardTitle>
-              <CardDescription>
-                フレームワークのルーター Link を渡すだけ。行の中身（アイコン・ラベル・バッジ・
-                アクティブ状態・折りたたみレール）は ライブラリ側が組み立てて children
-                として渡すので、 利用側が行マークアップを再実装することはありません。React Router /
-                TanStack は createSidebarLink(Link, &quot;to&quot;)、Inertia / Next.js は
-                createSidebarLink(Link)（または @godxjp/ui/inertia の
-                inertiaSidebarLink(Link)）を使います。 左は展開、右は折りたたみレールです。
-                どちらも同じ Link のままアイコンが残ります。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex gap="md" wrap>
-                <Card className="h-72 w-64 overflow-hidden">
-                  <CardContent flush>
-                    <Flex direction="col">
-                      <Sidebar
-                        ariaLabel="ルーターリンク行のナビゲーション"
-                        activeId={routedActiveId}
-                        onSelect={setRoutedActiveId}
-                        sections={ROUTED_SECTIONS}
-                        linkComponent={RouterLink}
-                        aria-label="linkComponent プロップ例のナビゲーション（展開）"
-                      />
-                    </Flex>
-                  </CardContent>
-                </Card>
-                <Card className="h-72 w-16 overflow-hidden">
-                  <CardContent flush>
-                    <Flex direction="col">
-                      <Sidebar
-                        ariaLabel="折りたたみレールのルーターリンク"
-                        activeId={routedActiveId}
-                        onSelect={setRoutedActiveId}
-                        sections={ROUTED_SECTIONS}
-                        linkComponent={RouterLink}
-                        collapsed
-                        aria-label="linkComponent プロップ例のナビゲーション（折りたたみ）"
-                      />
-                    </Flex>
-                  </CardContent>
-                </Card>
-              </Flex>
-            </CardContent>
-          </Card>
-
-          {/* renderItem prop · DEPRECATED escape hatch — kept for back-compat. */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>renderItem プロップ（非推奨）</CardTitle>
-              <CardDescription>
-                行の中身まで利用側が書く旧エスケープハッチ。これが原因で
-                <code>&lt;Link&gt;{"{item.label}"}&lt;/Link&gt;</code>
-                がアイコンを全て落とす回帰が発生しました。 現在は rowProps.children
-                にライブラリ製の行内容が入るので、それを描画すれば 正規の行が復元されます（ここでは
-                その右にお気に入りスターを添えています）。 新規コードでは linkComponent か
-                SidebarItem asChild を使ってください。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Card className="h-72 w-64 overflow-hidden">
-                <CardContent flush>
-                  <Flex direction="col">
-                    <Sidebar
-                      ariaLabel="カスタム行例のナビゲーション"
-                      activeId={renderActiveId}
-                      onSelect={setRenderActiveId}
-                      sections={FAVOURITE_SECTIONS}
-                      renderItem={(item, rowProps) =>
-                        renderFavouriteRow(item, rowProps, setRenderActiveId)
-                      }
-                      aria-label="renderItem プロップ例のナビゲーション"
-                    />
-                  </Flex>
-                </CardContent>
-              </Card>
-            </CardContent>
-          </Card>
-
-          {/* children prop · full nav override: compose SidebarSection / SidebarItem directly. */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>children プロップ（ナビ全体の差し替え）</CardTitle>
-              <CardDescription>
-                sections を使わず SidebarSection / SidebarItem を直接組み立てて、
-                ナビゲーション全体を 自前で構成します。右は同じ構成に SidebarItem の asChild
-                を足したものです。子として ルーターの Link
-                を「要素だけ」渡すと、アイコン・ラベル・バッジは ライブラリが差し込みます（。
-                children は書きません）。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex gap="md" wrap>
-                <Card className="h-64 w-64 overflow-hidden">
-                  <CardContent flush>
-                    <Flex direction="col">
-                      <Sidebar
-                        ariaLabel="構成可能な例のナビゲーション"
-                        activeId={composedActiveId}
-                        onSelect={setComposedActiveId}
-                      >
-                        <SidebarSection label="お気に入り">
-                          {COMPOSED_ITEMS.map((item) => (
-                            <SidebarItem
-                              key={item.id}
-                              item={item}
-                              active={composedActiveId === item.id}
-                              onActivate={setComposedActiveId}
-                            />
-                          ))}
-                        </SidebarSection>
-                      </Sidebar>
-                    </Flex>
-                  </CardContent>
-                </Card>
-                <Card className="h-64 w-64 overflow-hidden">
-                  <CardContent flush>
-                    <Flex direction="col">
-                      <Sidebar
-                        ariaLabel="asChild 例のナビゲーション"
-                        activeId={composedActiveId}
-                        onSelect={setComposedActiveId}
-                        aria-label="SidebarItem asChild 例のナビゲーション"
-                      >
-                        <SidebarSection label="お気に入り（asChild）">
-                          {COMPOSED_ITEMS.map((item) => (
-                            <SidebarItem
-                              key={item.id}
-                              item={item}
-                              active={composedActiveId === item.id}
-                              onActivate={setComposedActiveId}
-                              asChild
-                            >
-                              <Link to={item.href ?? "/"} />
-                            </SidebarItem>
-                          ))}
-                        </SidebarSection>
-                      </Sidebar>
-                    </Flex>
-                  </CardContent>
-                </Card>
-              </Flex>
-            </CardContent>
-          </Card>
-
-          {/* badgeTone · 未読（中立）と「自分宛て」（強調）を一本の軸で分ける。 */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>badgeTone プロップ（未読と自分宛ての区別）</CardTitle>
-              <CardDescription>
-                行のカウントが「未読」なのか「自分宛て（メンション・DM）」なのかを badgeTone
-                で表します。既定の neutral は従来のピルとバイト単位で同一で、
-                属性すら出しません。destructive のときだけ data-tone が付き、
-                --sidebar-badge-destructive-background / -foreground を読みます。 badge
-                には数値や文字列だけを渡してください · そこに &lt;Badge&gt; を入れると .sb-badge
-                の中にもう一枚ピルが入って丸が二重になります（実測 37.11×19.14 の 中に
-                25.11×19.14）。 色は 2 トークンだけが動き、ピルの高さも角丸も左右余白も
-                共通なので、未読行とメンション行は同じ列に揃ったままです。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Card className="h-64 w-64 overflow-hidden">
-                <CardContent flush>
-                  <Flex direction="col">
-                    <Sidebar
-                      ariaLabel="チャンネル一覧のナビゲーション"
-                      activeId={mentionActiveId}
-                      onSelect={setMentionActiveId}
-                      sections={MENTION_SECTIONS}
-                      aria-label="badgeTone 例のナビゲーション"
-                    />
-                  </Flex>
-                </CardContent>
-              </Card>
-            </CardContent>
-          </Card>
-
-          {/* Nav colour tokens · icon and label are themed SEPARATELY. */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>ナビの配色トークン（アイコンとラベルを別々に）</CardTitle>
-              <CardDescription>
-                行（ラベル）は --sidebar-nav-item-foreground、アイコンは
-                --sidebar-nav-icon-foreground を読みます。 既定値は従来どおり（どちらも
-                --muted-foreground）。 テーマ側でアイコンだけ濃くすれば、muted
-                テキスト全体の色を変えずに キャンバス基準の 16px
-                アイコンに揃えられます（ホバー/アクティブ/無効の各状態にも 対応トークンあり）。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex gap="md" wrap>
-                <Card className="h-64 w-64 overflow-hidden">
-                  <CardContent flush>
-                    <Flex direction="col">
-                      <Sidebar
-                        ariaLabel="既定の配色のナビゲーション"
-                        activeId={tokenActiveId}
-                        onSelect={setTokenActiveId}
-                        sections={FAVOURITE_SECTIONS}
-                        aria-label="既定の配色（アイコンは行の色を継承）"
-                      />
-                    </Flex>
-                  </CardContent>
-                </Card>
-                <Card className="h-64 w-64 overflow-hidden">
-                  <CardContent flush>
-                    <Flex
-                      direction="col"
-
-                      style={CANONICAL_NAV_TOKENS}
-                    >
-                      <Sidebar
-                        ariaLabel="アイコンを濃くしたナビゲーション"
-                        activeId={tokenActiveId}
-                        onSelect={setTokenActiveId}
-                        sections={FAVOURITE_SECTIONS}
-                        aria-label="トークン上書き（アイコンのみ --foreground）"
-                      />
-                    </Flex>
-                  </CardContent>
-                </Card>
-              </Flex>
-            </CardContent>
-          </Card>
-
-          {/* trailingIcon · 行の末尾に置く 16px の「開くよ」グリフ。badge（件数ピル）とは別枠。 */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>trailingIcon プロップ（末尾のグリフ）</CardTitle>
-              <CardDescription>
-                ワークスペース切替のような「押すと何か開く」行の末尾に置く 16px
-                のグリフです。件数ピルの badge とは別の枠で、背景も角丸も描きません · badge に ⌃⌄
-                を入れると .sb-badge の灰色ピル（実測 36×24、中の SVG は 24×24）に
-                なってしまうため、サイズを DS 側で固定した専用の枠にしています。 icon
-                と同じくコンポーネントを渡す形なので、SVG の寸法は 16px に固定されます。
-                折りたたみレールでは badge と同じように隠れます。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Card className="h-64 w-64 overflow-hidden">
-                <CardContent flush>
-                  <Flex direction="col">
-                    <Sidebar
-                      ariaLabel="切替行つきのナビゲーション"
-                      activeId={brandActiveId}
-                      onSelect={setBrandActiveId}
-                      sections={BRAND_SECTIONS}
-                      aria-label="trailingIcon 例のナビゲーション"
-                      footer={
-                        <SidebarItem
-                          item={{
-                            id: "workspace",
-                            label: "アクメ株式会社",
-                            icon: Building2,
-                            trailingIcon: ChevronsUpDown,
-                          }}
-                        />
-                      }
-                    />
-                  </Flex>
-                </CardContent>
-              </Card>
-            </CardContent>
-          </Card>
-
-          {/* Feature notes */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>主な機能</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="sm" className="text-sm">
-                {[
-                  "product chip · name / role（エンティティ名）/ color",
-                  "collapsed=true でアイコンのみのレール表示に切替",
-                  "children[] を持つ item は自動で折りたたみグループになる",
-                  "activeId が子孫にマッチすると親グループが自動展開",
-                  "badge prop で件数バッジをアイテムに付与可能（中身は数値・文字列のみ）",
-                  "badgeTone で未読（neutral）と自分宛て（destructive）を色だけで区別",
-                  "disabled=true で項目を非活性化（クリック不可）",
-                  "footer prop でスクロール外にユーザー情報を固定",
-                  "footer は brand と同じく関数も受け取る · 実効の collapsed が渡る",
-                  "trailingIcon で行の末尾に 16px のグリフ（切替の ⌃⌄ など）を置ける",
-                  "linkComponent · ルーター Link は「要素だけ」渡す。行の中身はライブラリが組み立てる",
-                  "linkComponent は葉・サブメニュー・折りたたみレール・フライアウトの全てに適用される",
-                  "グループのトリガーは aria-expanded を持つ開閉ボタンのままなので linkComponent は適用されない",
-                ].map((note) => (
-                  <Flex key={note} align="center" gap="sm">
-                    <Plus className="text-primary size-3 shrink-0" />
-                    <span>{note}</span>
-                  </Flex>
-                ))}
-              </Flex>
-            </CardContent>
-          </Card>
-        </Flex>
-      </PageContainer>
-    </AppShell>
-  );
-}