@godxjp/ui 31.31.8 → 32.0.1

package/docs/layout/app-shell-arrangements.tsx

@@ -1,225 +0,0 @@
-import { useState } from "react";
-import { AppShell, Flex, PageContainer, Sidebar, Topbar, TopbarItem } from "@godxjp/ui/layout";
-import type { SidebarSectionProp } from "@godxjp/ui/layout";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  Building2,
-  Hash,
-  LayoutDashboard,
-  MessagesSquare,
-  PanelLeftClose,
-  PanelLeftOpen,
-  Settings,
-  Users,
-} from "lucide-react";
-
-/**
- * AppShell · column arrangements.
- *
- * THE SHELL HAS TWO INDEPENDENT GEOMETRY AXES, and this page exists so they can be seen next to
- * each other rather than rediscovered:
- *
- *   - `topbarSpan` — how far the BAR reaches. "content" starts it beside the sidebar (the rail
- *     runs the full window height); "full" runs it edge to edge with the navigation beneath it.
- *   - `navRail`    — how many navigation COLUMNS there are. Passing the slot adds a second,
- *     narrower track before the sidebar: the workspace/organization switcher shape.
- *
- * They are axes, not a preset list. All four combinations are real product shapes, so there is no
- * invalid pairing and nothing to reconcile — which is why the rail is a SLOT and not a fourth
- * value bolted onto `topbarSpan`.
- *
- * Composed only from real @godxjp/ui components.
- */
-
-const WORKSPACE_RAIL: SidebarSectionProp[] = [
-  {
-    items: [
-      { id: "home", label: "ホーム", icon: LayoutDashboard },
-      { id: "chat", label: "チャット", icon: MessagesSquare },
-      { id: "people", label: "メンバー", icon: Users },
-      { id: "admin", label: "管理", icon: Settings },
-    ],
-  },
-];
-
-const CHANNELS: SidebarSectionProp[] = [
-  {
-    label: "チャンネル",
-    items: [
-      { id: "general", label: "general", icon: Hash },
-      { id: "design", label: "design", icon: Hash },
-      { id: "incident", label: "incident-2026", icon: Hash },
-    ],
-  },
-  {
-    label: "ダイレクトメッセージ",
-    items: [
-      { id: "dm-sato", label: "佐藤 花子", icon: Users },
-      { id: "dm-tanaka", label: "田中 一郎", icon: Users },
-    ],
-  },
-];
-
-export default function Demo() {
-  const [withRail, setWithRail] = useState(true);
-  const [fullSpan, setFullSpan] = useState(false);
-  const [collapsed, setCollapsed] = useState(false);
-
-  // The rail is ordinary navigation, so it is an ordinary <Sidebar> in icon-only mode — the shell
-  // owns the TRACK, never the content that goes in it.
-  const rail = (
-    <Sidebar aria-label="ワークスペース" activeId="chat" collapsed sections={WORKSPACE_RAIL} />
-  );
-
-  return (
-    <AppShell
-      topbarSpan={fullSpan ? "full" : "content"}
-      navRail={withRail ? rail : undefined}
-      navRailLabel="ワークスペース"
-      sidebarCollapsed={collapsed}
-      logo={
-        <Flex align="center" gap="sm">
-          <Building2 aria-hidden="true" />
-          <Text weight="medium">CoreChat</Text>
-        </Flex>
-      }
-      sidebar={
-        <Sidebar
-          aria-label="チャンネル"
-          activeId="general"
-          collapsed={collapsed}
-          sections={CHANNELS}
-        />
-      }
-      topbar={
-        <Topbar
-          start={
-            // A bar cell is a TopbarItem, not a Button: a Button in a bar is a --control-height
-            // pill floating in a taller strip, with its own hover fill and its own focus ring.
-            <TopbarItem
-              aria-label={collapsed ? "サイドバーを開く" : "サイドバーを閉じる"}
-              aria-expanded={!collapsed}
-              onClick={() => setCollapsed((c) => !c)}
-            >
-              {collapsed ? (
-                <PanelLeftOpen aria-hidden="true" />
-              ) : (
-                <PanelLeftClose aria-hidden="true" />
-              )}
-            </TopbarItem>
-          }
-        />
-      }
-    >
-      <PageContainer
-        title="列の構成"
-        subtitle={`${withRail ? "3 列" : "2 列"} · topbarSpan="${fullSpan ? "full" : "content"}"${
-          collapsed ? " · 折りたたみ" : ""
-        }`}
-        extra={
-          <Flex gap="sm">
-            <Button
-              size="sm"
-              variant={withRail ? "default" : "outline"}
-              aria-pressed={withRail}
-              onClick={() => setWithRail((v) => !v)}
-            >
-              navRail
-            </Button>
-            <Button
-              size="sm"
-              variant={fullSpan ? "default" : "outline"}
-              aria-pressed={fullSpan}
-              onClick={() => setFullSpan((v) => !v)}
-            >
-              topbarSpan=full
-            </Button>
-            <Button
-              size="sm"
-              variant={collapsed ? "default" : "outline"}
-              aria-pressed={collapsed}
-              onClick={() => setCollapsed((v) => !v)}
-            >
-              折りたたみ
-            </Button>
-          </Flex>
-        }
-      >
-        <Flex direction="col" gap="lg">
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>2 本の軸は独立している</CardTitle>
-              <CardDescription>
-                上の 3 つのボタンは互いに干渉しない。<code>navRail</code> は「ナビゲーションの列が
-                何本か」を、<code>topbarSpan</code> は「バーがどこまで伸びるか」を答える別々の軸で、
-                4 通りの組み合わせはすべて実在するプロダクトの形なので、禁止すべき組み合わせは
-                存在しない。だから rail は <code>topbarSpan</code> に足した 4 つ目の値ではなく
-                スロットとして実装されている ― プリセット名を 4 つ覚える API にはしない。
-              </CardDescription>
-              <CardDescription>
-                列幅はすべてトークン。<code>--app-shell-nav-rail-width</code>（4rem）が rail、
-                <code>--app-shell-sidebar-width</code>（16rem）がサイドバー、
-                <code>--app-shell-sidebar-collapsed-width</code>（4rem）が折りたたみ時の
-                サイドバー。3 つ目は 19.x では <code>--app-shell-rail-width</code> という名前で、
-                20.0.0 で追加された本物の rail と正面衝突した ― 同じ 4rem、同じ「rail」の綴り、
-                意味は別物。エイリアスを残さず改名したのは、どちらの読み方でも
-                もっともらしい幅に解決してしまい、静かに壊れるため。
-              </CardDescription>
-            </CardHeader>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>折りたたみは 1 本の列だけを畳む</CardTitle>
-              <CardDescription>
-                「折りたたみ」を押すと、サイドバーの列だけが 16rem → 4rem になり、rail
-                は幅を保つ。Slack の挙動であり、折りたたみ中も rail
-                の行き先に手が届き続ける唯一の形。 rail まで一緒に畳むと、意味の分からない
-                アイコンの帯が 2 本並ぶだけになる。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="sm">
-                <Flex justify="between">
-                  <Text tone="muted">rail</Text>
-                  <Text mono>{withRail ? "4rem（固定）" : "—"}</Text>
-                </Flex>
-                <Flex justify="between">
-                  <Text tone="muted">sidebar</Text>
-                  <Text mono>{collapsed ? "4rem" : "16rem"}</Text>
-                </Flex>
-                <Flex justify="between">
-                  <Text tone="muted">コンテンツ左端</Text>
-                  <Text mono>
-                    {withRail ? (collapsed ? "128px" : "320px") : collapsed ? "64px" : "256px"}
-                  </Text>
-                </Flex>
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>900px 以下では両方の列が消える</CardTitle>
-              <CardDescription>
-                Frame の Dimensions を 900px 以下にすると、rail とサイドバーの両方が隠れ、
-                AppShell 所有のドロワーが navigation を引き受ける。 rail
-                を渡している場合、ドロワーの既定値は「rail のあとにサイドバー」になる ―
-                両方の列が隠れる幅で <code>sidebar</code> だけを既定にすると、rail
-                が運んでいるアプリ階層の行き先が 端末によって存在したりしなかったりする。
-                いくつかの画面幅にしか無いコントロールは、コントロールではなく罠。
-              </CardDescription>
-              <CardDescription>
-                グリッドのテンプレートから領域名が消えるだけでは要素は消えない ―
-                実測では、狭幅テンプレートを当てて <code>.app-sidebar</code> だけを隠した状態で
-                rail が暗黙の列に自動配置され、33×168px の断片としてページ本文の上に残った。
-                だから狭幅ブロックは rail を明示的に隠す。
-              </CardDescription>
-            </CardHeader>
-          </Card>
-        </Flex>
-      </PageContainer>
-    </AppShell>
-  );
-}

package/docs/layout/app-shell-narrow-bar.tsx

@@ -1,205 +0,0 @@
-import { useState } from "react";
-import { AppShell, Flex, PageContainer, Sidebar, Topbar, TopbarItem } from "@godxjp/ui/layout";
-import type { 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 {
-  Bell,
-  CalendarDays,
-  ClipboardList,
-  FileText,
-  LayoutDashboard,
-  MessageSquare,
-  Search,
-  Settings,
-  Users,
-} from "lucide-react";
-
-/**
- * AppShell · 390px の細いバー — ブランドの縮退と Topbar の溢れ契約（gh#728）。
- *
- * 再現している形: 6:1 のロゴロックアップ（`--logo-size-sm` で 144x24）+ start 1 セル +
- * end 4 セル + ユーザーセル + AppShell 自身のドロワートリガー。27.8.0 ではこの組み合わせが
- * 390px で破綻していた — brand はどの幅でも 143.7px のまま、`.ui-topbar-start` は width 0、
- * end の最後のセルは x=384.8 w=132.3 で viewport の外に描かれていた。
- *
- * ここで見える契約は 2 つ:
- *   1. `logoCompact` — 狭いバーで `logo` の代わりに描かれる別ノード。別ノードなので `viewBox`
- *      ごと差し替えられる（stylesheet では属性を書き換えられない）。渡さなくても brand セル
- *      自体が縮むようになった（`--app-shell-brand-max-inline-size`）。
- *   2. `Topbar overflow="scroll"`（既定）— 足りなくなったらセルを切り落とさず、バー自身が
- *      インライン方向にスクロールする。セルは DOM に残るので Tab で到達でき、フォーカスが
- *      当たったセルはブラウザが可視域へ全体を送り込む。
- */
-const SECTIONS: SidebarSectionProp[] = [
-  {
-    label: "業務",
-    items: [
-      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
-      { id: "tasks", label: "タスク", icon: ClipboardList },
-      { id: "docs", label: "ドキュメント", icon: FileText },
-      { id: "members", label: "メンバー", icon: Users },
-    ],
-  },
-];
-
-/** 6:1 のロックアップ — design が実物の logotype を渡してくる形そのまま（inline `<svg>`）。 */
-function BrandLockup() {
-  return (
-    <svg
-      data-demo-brand="full"
-      viewBox="0 0 144 24"
-      role="img"
-      aria-label="ゴードエックス ワークスペース"
-      style={{ blockSize: "var(--logo-size-sm)", inlineSize: "auto" }}
-    >
-      <rect width="24" height="24" rx="6" fill="currentColor" opacity="0.18" />
-      <path d="M7 12h10M12 7v10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-      <text x="32" y="17" fontSize="14" fontWeight="600" fill="currentColor">
-        GoDX Workspace
-      </text>
-    </svg>
-  );
-}
-
-/** 同じブランドの「マークだけ」— viewBox が違うので stylesheet では作れないノード。 */
-function BrandMark() {
-  return (
-    <svg
-      data-demo-brand="compact"
-      viewBox="0 0 24 24"
-      role="img"
-      aria-label="ゴードエックス ワークスペース"
-      style={{ blockSize: "var(--logo-size-sm)", inlineSize: "auto" }}
-    >
-      <rect width="24" height="24" rx="6" fill="currentColor" opacity="0.18" />
-      <path d="M7 12h10M12 7v10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-    </svg>
-  );
-}
-
-export default function Demo() {
-  const [activeId, setActiveId] = useState("dashboard");
-  const [compactBrand, setCompactBrand] = useState(true);
-  const [unread, setUnread] = useState(7);
-
-  const end = (
-    <>
-      <TopbarItem aria-label="検索" icon={<Search aria-hidden="true" />} />
-      <TopbarItem aria-label="予定" icon={<CalendarDays aria-hidden="true" />} />
-      <TopbarItem aria-label="メッセージ" icon={<MessageSquare aria-hidden="true" />} />
-      <TopbarItem
-        aria-label={`通知 ${String(unread)} 件`}
-        badge={unread === 0 ? undefined : unread}
-        badgeTone="destructive"
-        icon={<Bell aria-hidden="true" />}
-        onClick={() => setUnread(0)}
-      />
-      <TopbarItem aria-label="アカウント">
-        <Avatar className="size-7">
-          <AvatarFallback>佐藤</AvatarFallback>
-        </Avatar>
-      </TopbarItem>
-    </>
-  );
-
-  return (
-    <AppShell
-      topbarSpan="full"
-      logo={<BrandLockup />}
-      logoCompact={compactBrand ? <BrandMark /> : undefined}
-      sidebar={<Sidebar activeId={activeId} onSelect={setActiveId} sections={SECTIONS} />}
-      topbar={
-        <Topbar
-          start={
-            <TopbarItem
-              aria-label="統括"
-              icon={<LayoutDashboard aria-hidden="true" />}
-              labelHideBelow="md"
-            >
-              統括
-            </TopbarItem>
-          }
-          end={end}
-        />
-      }
-    >
-      <PageContainer
-        title="390px の細いバー"
-        subtitle="brand の縮退 · Topbar の溢れ契約（gh#728）"
-        breadcrumb={[{ label: "ホーム", to: "/" }, { label: "390px の細いバー" }]}
-      >
-        <Flex direction="col" gap="lg">
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>ブランドセルは狭いバーで席を譲る</CardTitle>
-              <CardDescription>
-                `logoCompact` を渡すと、`logoCompactBelow`（既定 `sm`）の段より下でそのノードが
-                `logo` の代わりに描かれる。 渡さない場合でも brand セルは sm 未満で
-                `--app-shell-brand-compact-max-inline-size`（＝バーの高さ）まで詰められ、 はみ出した
-                分は inline-end 側から落ちる。27.8.0 のように 143.7px
-                のまま居座ることはもうない。ボタンで両方を比べられる。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex align="center" gap="md" wrap>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  aria-pressed={compactBrand}
-                  onClick={() => setCompactBrand((value) => !value)}
-                >
-                  <Settings />
-                  logoCompact: {compactBrand ? "あり" : "なし（既定の縮退のみ）"}
-                </Button>
-                <Badge tone={compactBrand ? "success" : "info"} icon={null}>
-                  {compactBrand ? "マークだけの viewBox に差し替え" : "6:1 ロックアップを縮小"}
-                </Badge>
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>溢れたクラスタは切り落とさずスクロールする</CardTitle>
-              <CardDescription>
-                `Topbar overflow="scroll"`（既定）。320px ではこのバーはまだ 44px
-                足りない。足りない分は start だけに押し付けられず（end も `flex: 0 1 auto`
-                になった）、残りは バー自身が横スクロールで引き受ける — start はセル 1
-                つ分の下限を、end はセルの実寸を保つので、 セルが「半分だけ描かれる」ことはない。
-                `display: none` にもならないので Tab
-                で到達でき、フォーカスの当たったセルはブラウザが可視域へ全体を送り込む。
-                `overflow="clip"` で 27.8.0 以前の切り落としに戻せる。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="sm" className="text-sm">
-                {[
-                  { prop: "start", desc: "統括セル（md 未満はアイコンのみ · 名前は残る）" },
-                  { prop: "end", desc: "検索 / 予定 / メッセージ / 通知 + アカウント" },
-                  { prop: "overflow", desc: '"scroll"（既定）| "clip"' },
-                ].map(({ prop, desc }) => (
-                  <Flex key={prop} align="start" gap="sm">
-                    <Badge variant="secondary" className="shrink-0">
-                      {prop}
-                    </Badge>
-                    <Text tone="muted">{desc}</Text>
-                  </Flex>
-                ))}
-              </Flex>
-            </CardContent>
-          </Card>
-        </Flex>
-      </PageContainer>
-    </AppShell>
-  );
-}

package/docs/layout/app-shell-states.tsx

@@ -1,171 +0,0 @@
-import { useState } from "react";
-import { AppShell, Flex, PageContainer, Sidebar, Topbar } from "@godxjp/ui/layout";
-import type { SidebarSectionProp } from "@godxjp/ui/layout";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Input } from "@godxjp/ui/data-entry";
-import {
-  Bell,
-  Building2,
-  FileText,
-  LayoutDashboard,
-  MessageSquare,
-  Plus,
-  Receipt,
-  Users,
-} from "lucide-react";
-
-/**
- * AppShell · grid states, one per URL.
- *
- * The shell's grid is keyed on four attributes — `data-sidebar`, `data-nav-rail(-position)`,
- * `data-collapsed` and `data-topbar-span` — and every combination is a real product shape. This
- * frame renders ONE AppShell in whichever state the query names, so a browser gate can walk all of
- * them (`scripts/check-app-shell-narrow-grid.mjs`) without stacking several `main` landmarks on a
- * single page:
- *
- *   ?topbarSpan=content|full   ?navRail=start|end|top|bottom   ?collapsed=1   ?sidebar=none
- *   ?responsive=docked   ?measure=narrow|medium   ?footer=1|row
- *
- * `measure` and `footer` feed `scripts/check-app-shell-page-width.mjs` (gh#672): the page is fluid
- * in the main column at every sidebar state, and a sticky footer band always spans `.app-main`,
- * even when a service caps content with `--app-shell-page-max-width` or the page sets `measure`.
- * The footer's CONTENT sits in the same column as the body (gh#682), so the two shapes a footer
- * takes are both rendered: `footer=1` an end-aligned action group, `footer=row` a full-row composer.
- *
- * With no query it is `topbarSpan="full"` without a rail — the state gh#474 found collapsing
- * `main` into a 170px implicit track below 900px, with the page actions laid out past the edge.
- */
-
-const SECTIONS: SidebarSectionProp[] = [
-  {
-    label: "会計",
-    items: [
-      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
-      { id: "journal", label: "仕訳", icon: FileText },
-      { id: "invoices", label: "請求書", icon: Receipt },
-    ],
-  },
-  {
-    label: "管理",
-    items: [
-      { id: "partners", label: "取引先", icon: Building2 },
-      { id: "users", label: "ユーザー", icon: Users },
-    ],
-  },
-];
-
-type RailPosition = "start" | "end" | "top" | "bottom";
-
-function readState() {
-  const params = new URLSearchParams(window.location.search);
-  const rail = params.get("navRail");
-  return {
-    topbarSpan: params.get("topbarSpan") === "content" ? ("content" as const) : ("full" as const),
-    navRail: (["start", "end", "top", "bottom"] as const).find((p) => p === rail) as
-      RailPosition | undefined,
-    collapsed: params.get("collapsed") === "1",
-    hasSidebar: params.get("sidebar") !== "none",
-    responsiveNavigation:
-      params.get("responsive") === "docked" ? ("docked" as const) : ("drawer" as const),
-    measure: (["narrow", "medium"] as const).find((m) => m === params.get("measure")),
-    footer: (["1", "row"] as const).find((f) => f === params.get("footer")),
-  };
-}
-
-export default function Demo() {
-  const [{ topbarSpan, navRail, collapsed, hasSidebar, responsiveNavigation, measure, footer }] =
-    useState(readState);
-  const [activeId, setActiveId] = useState("dashboard");
-  const strip = navRail === "top" || navRail === "bottom";
-
-  return (
-    <AppShell
-      topbarSpan={topbarSpan}
-      responsiveNavigation={responsiveNavigation}
-      sidebarCollapsed={collapsed}
-      sidebar={
-        hasSidebar ? (
-          <Sidebar
-            activeId={activeId}
-            collapsed={collapsed}
-            onSelect={setActiveId}
-            sections={SECTIONS}
-            product={{ name: "CoreBooks", role: "株式会社アクメ" }}
-          />
-        ) : undefined
-      }
-      navRail={
-        navRail ? (
-          <Flex direction={strip ? "row" : "col"} gap="xs" align="center">
-            <Button variant="ghost" size="icon-sm" aria-label="会計">
-              <Receipt />
-            </Button>
-            <Button variant="ghost" size="icon-sm" aria-label="チャット">
-              <MessageSquare />
-            </Button>
-          </Flex>
-        ) : undefined
-      }
-      navRailPosition={navRail}
-      topbar={
-        <Topbar
-          start={<Text weight="medium">CoreBooks</Text>}
-          end={
-            <Button variant="ghost" size="icon-sm" aria-label="通知">
-              <Bell />
-            </Button>
-          }
-        />
-      }
-    >
-      <PageContainer
-        title="請求書"
-        subtitle="株式会社アクメ · 2026年5月"
-        measure={measure}
-        footer={
-          footer === "1" ? (
-            <Flex gap="sm" align="center" justify="end">
-              <Button size="sm" variant="outline">
-                下書き保存
-              </Button>
-              <Button size="sm">コメントを送信する</Button>
-            </Flex>
-          ) : footer === "row" ? (
-            <Flex grow gap="sm" align="center">
-              <Flex grow>
-                <Input aria-label="コメント" placeholder="コメントを入力" />
-              </Flex>
-              <Button size="sm">送信</Button>
-            </Flex>
-          ) : undefined
-        }
-        stickyFooter={footer !== undefined}
-        extra={
-          <Flex gap="sm" wrap>
-            <Button size="sm" variant="outline">
-              取引先へ一括送信する
-            </Button>
-            <Button size="sm">
-              <Plus />
-              新しい請求書を作成する
-            </Button>
-          </Flex>
-        }
-      >
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>今月の請求</CardTitle>
-            <CardDescription>未送信 3 件 · 入金待ち 12 件</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Text tone="muted">
-              状態はクエリで切り替えます。どの状態でも 900px 以下では 1 列になり、main
-              は画面幅いっぱいに広がります。
-            </Text>
-          </CardContent>
-        </Card>
-      </PageContainer>
-    </AppShell>
-  );
-}