@godxjp/ui 19.1.0 → 19.3.1

package/docs/layout/admin-collection.tsx

@@ -0,0 +1,122 @@
+import { useMemo, useState } from "react";
+import { Plus } from "lucide-react";
+
+import { DataTable, type ColumnDef } from "@godxjp/ui/data-display";
+import { SearchInput } from "@godxjp/ui/data-entry";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Toolbar, ToolbarGroup } from "@godxjp/ui/navigation";
+
+type Locale = "ja" | "en" | "vi";
+type Organization = { id: string; name: string; slug: string; members: number; status: string };
+
+const copy = {
+  ja: {
+    title: "組織",
+    subtitle: "すべての組織を管理します",
+    search: "組織を検索",
+    create: "組織を作成",
+  },
+  en: {
+    title: "Organizations",
+    subtitle: "Manage every organization in this environment",
+    search: "Search organizations",
+    create: "Create organization",
+  },
+  vi: {
+    title: "Tổ chức",
+    subtitle: "Quản lý toàn bộ tổ chức trong môi trường này",
+    search: "Tìm kiếm tổ chức",
+    create: "Tạo tổ chức",
+  },
+} as const;
+
+const rows: Organization[] = [
+  { id: "org_01", name: "GoDX Japan", slug: "godx-japan", members: 142, status: "Active" },
+  {
+    id: "org_02",
+    name: "Famsys Operations",
+    slug: "famsys-operations",
+    members: 86,
+    status: "Active",
+  },
+  {
+    id: "org_03",
+    name: "International Customer Experience Division",
+    slug: "customer-experience-international",
+    members: 39,
+    status: "Review",
+  },
+  {
+    id: "org_04",
+    name: "Nền tảng vận hành Việt Nam",
+    slug: "van-hanh-viet-nam",
+    members: 71,
+    status: "Active",
+  },
+  {
+    id: "org_05",
+    name: "関西プロダクト開発統括部",
+    slug: "kansai-product-development",
+    members: 54,
+    status: "Active",
+  },
+];
+
+const columns: ColumnDef<Organization>[] = [
+  { key: "name", header: "Organization", render: (row) => <Text weight="medium">{row.name}</Text> },
+  { key: "slug", header: "Slug", render: (row) => <Text mono>{row.slug}</Text> },
+  { key: "members", header: "Members", align: "right" },
+  { key: "status", header: "Status" },
+];
+
+export default function AdminCollectionPreview() {
+  const [locale, setLocale] = useState<Locale>("ja");
+  const [query, setQuery] = useState("");
+  const labels = copy[locale];
+  const filtered = useMemo(
+    () =>
+      rows.filter((row) => `${row.name} ${row.slug}`.toLowerCase().includes(query.toLowerCase())),
+    [query],
+  );
+
+  return (
+    <PageContainer
+      preset="admin-collection"
+      title={labels.title}
+      subtitle={labels.subtitle}
+      extra={
+        <Button size="sm">
+          <Plus aria-hidden="true" />
+          {labels.create}
+        </Button>
+      }
+    >
+      <Toolbar aria-label="Admin collection controls">
+        <ToolbarGroup label={<span className="sr-only">{labels.search}</span>}>
+          <SearchInput
+            ariaLabel={labels.search}
+            placeholder={labels.search}
+            value={query}
+            onValueChange={setQuery}
+          />
+        </ToolbarGroup>
+        <ToolbarGroup label={<span className="sr-only">Locale</span>}>
+          <Flex gap="xs" wrap>
+            {(["ja", "en", "vi"] as const).map((language) => (
+              <Button
+                key={language}
+                size="sm"
+                variant={locale === language ? "default" : "outline"}
+                onClick={() => setLocale(language)}
+              >
+                {language.toUpperCase()}
+              </Button>
+            ))}
+          </Flex>
+        </ToolbarGroup>
+      </Toolbar>
+      <DataTable data={filtered} columns={columns} getRowId={(row) => row.id} />
+    </PageContainer>
+  );
+}

package/docs/layout/app-shell.tsx

@@ -0,0 +1,374 @@
+import { useState } from "react";
+import {
+  AppShell,
+  Breadcrumb,
+  Flex,
+  PageContainer,
+  ResponsiveGrid,
+  Sidebar,
+  SplitPane,
+  Topbar,
+} from "@godxjp/ui/layout";
+import type { SidebarSectionProp } from "@godxjp/ui/layout";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  StatCard,
+  Badge,
+  Avatar,
+  AvatarFallback,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@godxjp/ui/navigation";
+import {
+  LayoutDashboard,
+  FileText,
+  Receipt,
+  Users,
+  BookOpen,
+  Building2,
+  ShieldCheck,
+  Bell,
+  Plus,
+  ChevronDown,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Search,
+} from "lucide-react";
+
+/**
+ * AppShell · canonical admin frame.
+ * Real composition: AppShell + Sidebar + Topbar + PageContainer body.
+ * Japanese accounting shell (CoreBooks) with entity switcher, collapse toggle,
+ * notifications badge, and a dashboard page body.
+ * Composed only from real @godxjp/ui components.
+ * Includes an executable switch between the composed topbar and legacy topbarLeft/topbarRight/logo.
+ */
+
+const 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: "invoices", label: "請求書", icon: Receipt },
+    ],
+  },
+  {
+    label: "管理",
+    items: [
+      { id: "partners", label: "取引先", icon: Building2 },
+      { id: "users", label: "ユーザー", icon: Users },
+      { id: "roles", label: "権限", icon: ShieldCheck, disabled: true },
+    ],
+  },
+];
+
+const ENTITIES = [
+  { id: "acme", name: "株式会社アクメ" },
+  { id: "globex", name: "グローバル商事株式会社" },
+  { id: "initech", name: "イニテック有限会社" },
+] as const;
+
+export default function Demo() {
+  const [activeId, setActiveId] = useState("dashboard");
+  // Seeded collapsed at rest so the icon rail + collapsed reflow (data-collapsed)
+  // is visible in a static screenshot; the topbar toggle expands the full sidebar.
+  const [collapsed, setCollapsed] = useState(true);
+  const [activeEntity, setActiveEntity] = useState<(typeof ENTITIES)[number]["name"]>(
+    ENTITIES[0].name,
+  );
+  const [unread, setUnread] = useState(true);
+  const [legacyTopbar, setLegacyTopbar] = useState(false);
+  // Bar-less shell: topbar / topbarLeft / topbarRight / logo をすべて渡さない状態。
+  // チャット・メール・IDE のようにページ側が最上段を所有する画面のための構成。
+  const [barless, setBarless] = useState(false);
+
+  const sidebar = (
+    <Sidebar
+      activeId={activeId}
+      collapsed={collapsed}
+      onSelect={setActiveId}
+      sections={SECTIONS}
+      product={{ name: "CoreBooks", role: activeEntity }}
+      footer={
+        <Flex direction="col" gap="xs">
+          <Text as="div" weight="medium">
+            山田 太郎
+          </Text>
+          <Text as="div" size="xs" tone="muted">
+            システム管理者
+          </Text>
+        </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>
+          {/* Decorative brand mark — hidden below `sm` where the hamburger already anchors the
+              start of a narrow mobile topbar, so functional controls (entity switcher, search)
+              keep priority and the bar never overflows. */}
+          <Avatar className="rounded-md">
+            <AvatarFallback className="bg-primary text-primary-foreground font-bold">
+              C
+            </AvatarFallback>
+          </Avatar>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              {/* Entity switcher collapses to an icon-only control below `sm` so the topbar never
+                  overflows a narrow (mobile) viewport; the long tenant name truncates from `sm` up.
+                  `aria-label` keeps the accessible name at every width even when the label is hidden. */}
+              <Button variant="ghost" size="sm" aria-label={activeEntity} className="min-w-0">
+                <Building2 className="size-4 shrink-0 sm:hidden" aria-hidden="true" />
+                <span className="hidden min-w-0 truncate sm:inline">{activeEntity}</span>
+                <ChevronDown className="shrink-0" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-56">
+              <DropdownMenuLabel>エンティティ切替</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {ENTITIES.map((e) => (
+                <DropdownMenuItem key={e.id} onSelect={() => setActiveEntity(e.name)}>
+                  <Building2 className="size-4" />
+                  {e.name}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </>
+      }
+      center={
+        // Search collapses to an icon-only trigger below `sm` (fits a narrow topbar) and expands to
+        // the full-width search affordance from `sm` up. `aria-label` preserves the accessible name
+        // when the visible label is hidden.
+        <Button
+          variant="outline"
+          size="sm"
+          aria-label="検索"
+          className="text-muted-foreground w-auto justify-start sm:w-full sm:max-w-sm"
+        >
+          <Search />
+          <span className="hidden sm:inline">検索…</span>
+        </Button>
+      }
+      end={
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          aria-label="通知"
+          className="relative"
+          onClick={() => setUnread(false)}
+        >
+          <Bell />
+          {unread ? (
+            <span className="bg-destructive absolute end-1.5 top-1.5 size-1.5 rounded-full" />
+          ) : null}
+        </Button>
+      }
+    />
+  );
+
+  return (
+    <AppShell
+      sidebar={sidebar}
+      // barless では 4 スロットすべてが undefined ＝ <header class="app-topbar"> は描画されず、
+      // .app-root に data-topbar="none" が付いてバーの行が 0 になる（900px 以下だけ、
+      // ハンバーガーのためにヘッダーが戻る）。
+      topbar={barless || legacyTopbar ? undefined : topbar}
+      logo={
+        !barless && legacyTopbar ? (
+          <Avatar>
+            <AvatarFallback>L</AvatarFallback>
+          </Avatar>
+        ) : undefined
+      }
+      topbarLeft={
+        !barless && legacyTopbar ? (
+          <Button size="sm" variant="ghost" onClick={() => setLegacyTopbar(false)}>
+            Composed topbar を表示
+          </Button>
+        ) : undefined
+      }
+      topbarRight={!barless && legacyTopbar ? <Text>Legacy slots active</Text> : undefined}
+      sidebarCollapsed={collapsed}
+      // Shell-level breadcrumb slot (app-breadcrumb landmark) · distinct from
+      // PageContainer's own breadcrumb; here the shell owns the trail.
+      breadcrumb={
+        <Breadcrumb items={[{ label: "ホーム", to: "/" }, { label: "ダッシュボード" }]} />
+      }
+      // Shell-level footer slot (app-footer landmark) · distinct from the
+      // Sidebar footer (the user identity block) shown on the left rail.
+      footer={
+        <Flex justify="between" align="center">
+          <Text size="xs" tone="muted">
+            2026 CoreBooks 会計システム
+          </Text>
+          <Text size="xs" tone="muted">
+            バージョン 7.2.0
+          </Text>
+        </Flex>
+      }
+    >
+      <PageContainer
+        title="売上ダッシュボード"
+        subtitle={`${activeEntity} · 2026年5月`}
+        extra={
+          <Flex gap="sm">
+            <Button size="sm" variant="outline" onClick={() => setUnread(true)}>
+              <Bell />
+              通知をリセット
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                setBarless(false);
+                setLegacyTopbar(true);
+              }}
+            >
+              レガシースロットを表示
+            </Button>
+            <Button
+              size="sm"
+              variant={barless ? "default" : "outline"}
+              aria-pressed={barless}
+              onClick={() => setBarless((b) => !b)}
+            >
+              {barless ? "トップバーを戻す" : "トップバーなし（チャット型）"}
+            </Button>
+            <Button size="sm">
+              <Plus />
+              仕訳作成
+            </Button>
+          </Flex>
+        }
+      >
+        <Flex direction="col" gap="lg">
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>Responsive frame coverage</CardTitle>
+              <CardDescription>
+                Frame の Dimensions で 320 / 375 / 390 / 768 / 1024 / 1280 / 1440 / 1920px
+                を切り替え、sidebar・topbar・page actions・grid・split pane
+                の変換を同じ実用構成で確認する。900px 以下ではドックされたサイドバーが隠れ、
+                AppShell 所有のモバイルドロワー（トップバー左のハンバーガー → フォーカストラップ付き
+                Sheet · Esc で閉じてトリガーへフォーカス復帰）が navigation を提供する（gh#165）。
+                このデモは mobileNav を渡していないため、同じ Sidebar がドロワーに再利用される。
+              </CardDescription>
+              <CardDescription>
+                「トップバーなし（チャット型）」を押すと topbar / topbarLeft / topbarRight / logo の
+                4 スロットをすべて外した状態になる。バーに置くものが無い画面 （チャット・メール・IDE
+                ＝ ページ自身が最上段を所有する画面）で空のバーを残すと、 48px
+                の固定行＋境界線の上にページヘッダーがもう一段重なるため、AppShell は
+                <code> &lt;header&gt; </code>を描画せず <code>data-topbar=&quot;none&quot;</code>
+                でその行を 0 にする。 900px
+                以下でだけヘッダーはハンバーガー専用として戻る（ドックされたレールが 隠れる幅で
+                navigation を失わせないため）。空の <code>{"topbar={<></>}"}</code>
+                で代用しないこと ― それは 4 スロットが埋まった状態と同じで、バーの行は残る。
+              </CardDescription>
+              <CardDescription>
+                横方向のページ余白軸の持ち主は <code>--space-page-x</code> ひとつ（gh#330）。
+                トップバーは <code>.app-main</code> と同じグリッド列に載っている ―
+                つまりバー先頭のコントロールとページタイトルは同じ縦線に並ぶべきもので、
+                <code>--app-shell-bar-inset</code> はその持ち主を読む （
+                <code>--app-shell-bar-inset-compact</code> も同様に
+                <code>--space-page-compact-x</code>）。以前は両者が別々の値 （16px と
+                24px）を名乗り、しかも段が変わる幅まで違った（shell 900px · page
+                720px）ため、ズレは画面幅で変わった ― 1512px で 8px、720〜900px で 12px、 720px
+                未満で 4px。幅で変わる誤差はテーマ側で補正しようがない。 いまは狭幅の段も{" "}
+                <code>(max-width: 720px)</code> でページと同時に動く。 Frame の Dimensions
+                を切り替えて、バーとページ本文の左端が どの幅でも一致することを確認できる。
+              </CardDescription>
+            </CardHeader>
+          </Card>
+          <ResponsiveGrid columns={{ sm: 2, md: 4 }}>
+            <StatCard label="月次売上" value="¥8,200,000" delta="+12%" hint="先月比" />
+            <StatCard label="請求件数" value="312" delta="+4%" />
+            <StatCard label="売掛金残高" value="¥1,284,500" hint="未回収 18件" />
+            <StatCard label="回収率" value="96.8%" delta="+1.2%" />
+          </ResponsiveGrid>
+
+          <SplitPane
+            asideWidth="sm"
+            aside={
+              <Flex direction="col" gap="md">
+                <Card>
+                  <CardHeader>
+                    <CardTitle level={2}>最近の仕訳</CardTitle>
+                    <CardDescription>承認待ちの仕訳</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <Flex direction="col" gap="sm">
+                      {["JE-0041", "JE-0040", "JE-0039"].map((id) => (
+                        <Flex key={id} justify="between" align="center">
+                          <Text size="xs" tone="muted" mono>
+                            {id}
+                          </Text>
+                          <Badge tone="warning">保留中</Badge>
+                        </Flex>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </Card>
+              </Flex>
+            }
+          >
+            <Card>
+              <CardHeader>
+                <CardTitle level={2}>売上推移</CardTitle>
+                <CardDescription>過去6ヶ月の月次売上</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Flex direction="col" gap="sm">
+                  {[
+                    { month: "12月", amount: "¥7,100,000" },
+                    { month: "1月", amount: "¥6,800,000" },
+                    { month: "2月", amount: "¥7,400,000" },
+                    { month: "3月", amount: "¥8,000,000" },
+                    { month: "4月", amount: "¥7,900,000" },
+                    { month: "5月", amount: "¥8,200,000" },
+                  ].map((row) => (
+                    <Flex key={row.month} justify="between">
+                      <Text tone="muted">{row.month}</Text>
+                      <Text weight="medium">{row.amount}</Text>
+                    </Flex>
+                  ))}
+                </Flex>
+              </CardContent>
+            </Card>
+          </SplitPane>
+        </Flex>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/layout/aspect-ratio.tsx

@@ -0,0 +1,135 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Skeleton } from "@godxjp/ui/feedback";
+import { AspectRatio, Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * AspectRatio · Radix AspectRatio wrapper. Stabilises media/preview frames so
+ * they do not reflow during load. ratio = width / height (number). Children fill
+ * the constrained box · use object-fit: cover on images, width/height 100% on
+ * iframes and SVG charts. Do not use for unconstrained text content. Composed
+ * only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="AspectRatio"
+      subtitle="安定メディアフレーム · ロード中のレイアウトシフトを防ぐ"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ratio=&#123;16 / 9&#125; · 動画埋め込み（既定）</CardTitle>
+            <CardDescription>
+              動画・地図・ダッシュボードグラフの埋め込みに最適。既定値は 16/9。 子要素は
+              width/height 100% で親を満たす。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AspectRatio ratio={16 / 9}>
+              <Card variant="muted" className="h-full w-full">
+                <CardContent flush>
+                  <Flex align="center" justify="center" gap="xs">
+                    <Text tone="muted">16:9 動画プレビュー（サンプル）</Text>
+                  </Flex>
+                </CardContent>
+              </Card>
+            </AspectRatio>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ratio=&#123;4 / 3&#125; · 画像プレビュースロット</CardTitle>
+            <CardDescription>
+              商品画像・領収書スキャン・添付ファイルサムネイルのプレビュー枠。 img には object-fit:
+              cover を付与してアスペクト比を維持。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="max-w-xs">
+              <AspectRatio ratio={4 / 3}>
+                <Card variant="muted" className="h-full w-full">
+                  <CardContent flush>
+                    <Flex align="center" justify="center" gap="xs">
+                      <Text tone="muted">領収書スキャン 4:3</Text>
+                    </Flex>
+                  </CardContent>
+                </Card>
+              </AspectRatio>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ratio=&#123;1 / 1&#125; · 正方形サムネイル</CardTitle>
+            <CardDescription>
+              プロフィール画像・会社ロゴ・アイコン枠など正方形が必要な場合。 ratio=&#123;1&#125;
+              または ratio=&#123;1 / 1&#125; どちらでも可。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md" align="start" wrap>
+              {["株式会社 A", "合同会社 B", "有限会社 C"].map((name) => (
+                <div key={name} className="w-28">
+                  <AspectRatio ratio={1}>
+                    <Card variant="muted" className="h-full w-full">
+                      <CardContent flush>
+                        <Flex align="center" justify="center" gap="xs">
+                          <Text size="xs" tone="muted" className="text-center">
+                            {name}
+                          </Text>
+                        </Flex>
+                      </CardContent>
+                    </Card>
+                  </AspectRatio>
+                </div>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              ratio=&#123;21 / 9&#125; · ワイドバナー / チャートプレースホルダー
+            </CardTitle>
+            <CardDescription>
+              ダッシュボードの月次推移グラフや広告バナー用の超ワイド枠。 Skeleton
+              と組み合わせてローディング中のプレースホルダーにも使う。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AspectRatio ratio={21 / 9}>
+              <Card variant="muted" className="h-full w-full">
+                <CardContent flush>
+                  <Flex align="center" justify="center" gap="xs">
+                    <Text tone="muted">月次売上推移グラフ（21:9）</Text>
+                  </Flex>
+                </CardContent>
+              </Card>
+            </AspectRatio>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Skeleton 併用 · ロード中のプレースホルダー</CardTitle>
+            <CardDescription>
+              フレームの幅・高さを ratio で固定し、ロード完了後に画像へ差し替えても
+              レイアウトシフトが起きない。読み込み中は Skeleton を子要素に置く。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="max-w-xs">
+              <AspectRatio ratio={16 / 9}>
+                <Skeleton className="h-full w-full rounded-md" />
+              </AspectRatio>
+            </div>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}