@godxjp/ui 20.0.0 → 20.1.0

package/docs/layout/flex.tsx

@@ -260,6 +260,56 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>レスポンシブな操作行</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex
+              id="responsive-actions"
+              direction={{ base: "col", lg: "row" }}
+              gap="md"
+              align="start"
+            >
+              <Flex fill>
+                <Text>画面幅に合わせて操作をまとめます。</Text>
+              </Flex>
+              <Button>保存</Button>
+              <Button variant="outline">キャンセル</Button>
+            </Flex>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>軽い強調と行アクション</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex id="hover-notice" surface="warning" pad={3} tabIndex={0}>
+                <Text>締切を確認してください。</Text>
+                <Flex reveal="hover" surface="popover" gap="xs" pad={1}>
+                  <Button variant="ghost" size="sm">
+                    編集
+                  </Button>
+                  <Button variant="ghost" size="sm">
+                    解除
+                  </Button>
+                </Flex>
+              </Flex>
+              <Flex as="ul" direction="col" gap="xs">
+                <li>添付ファイルを確認</li>
+                <li>担当者を選択</li>
+              </Flex>
+              <Flex surface="muted" pad={{ block: 2, inline: 3 }}>
+                <Text as="code" chip decoration="line-through">
+                  old_status
+                </Text>
+                <Text>更新済み</Text>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/layout/responsive-grid.tsx

@@ -217,7 +217,7 @@ export default function Demo() {
             <CardDescription>
               名前付きコレクション geometry: コンテナ幅が lg ステップ（64rem）に達するまでは 1
               列、そこから 3 列に切り替わる。ResponsiveGrid には lg
-              より上のステップが無いため、1024px 相当でも 1440px 相当でも同じ 3 列になる —
+              より上のステップが無いため、1024px 相当でも 1440px 相当でも同じ 3 列になる ·
               課金プランカタログの「3/3/1」契約 （dxs-platform/platform#333）。`columns` の代わりに
               `preset` を渡すだけで、呼び出し側がブレークポイント値を自作する必要がない。
             </CardDescription>
@@ -254,6 +254,26 @@ export default function Demo() {
             </ResponsiveGrid>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>一覧と補助情報 2:1</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ base: 1, lg: 3 }} pad={{ block: 2 }}>
+              <ResponsiveGrid.Item span={{ base: 1, lg: 2 }}>
+                <Flex id="grid-main" surface="muted" pad={3}>
+                  <Text>メインの一覧</Text>
+                </Flex>
+              </ResponsiveGrid.Item>
+              <ResponsiveGrid.Item>
+                <Flex id="grid-rail" surface="muted" pad={3}>
+                  <Text>補助情報</Text>
+                </Flex>
+              </ResponsiveGrid.Item>
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/layout/topbar.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { AppShell, Flex, PageContainer, Sidebar, Topbar } from "@godxjp/ui/layout";
+import { AppShell, Flex, PageContainer, Sidebar, Topbar, TopbarItem } from "@godxjp/ui/layout";
 import type { SidebarSectionProp } from "@godxjp/ui/layout";
 import {
   Avatar,
@@ -154,18 +154,14 @@ export default function Demo() {
       <Badge tone="warning" className="text-xs">
         ステージング
       </Badge>
-      <Button
-        variant="ghost"
-        size="icon-sm"
+      <TopbarItem
         aria-label="通知"
-        className="relative"
+        badge={unread ? 12 : undefined}
+        badgeTone="destructive"
         onClick={() => setUnread(false)}
       >
         <Bell />
-        {unread ? (
-          <span className="bg-destructive absolute end-1.5 top-1.5 size-1.5 rounded-full" />
-        ) : null}
-      </Button>
+      </TopbarItem>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant="ghost" size="icon-sm" aria-label="アカウントメニュー">

package/docs/navigation/app-setting-picker.tsx

@@ -33,6 +33,17 @@ export default function Demo() {
         subtitle="kind で 1 つの AppProvider 設定を読み書きする統合ピッカー"
       >
         <Flex direction="col" gap="lg">
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>インライン表示</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Flex gap="md" align="center">
+                <Text>表示言語</Text>
+                <AppSettingPicker kind="locale" appearance="inline" id="setting-inline" />
+              </Flex>
+            </CardContent>
+          </Card>
           <Card>
             <CardHeader>
               <CardTitle level={2}>kind で対象設定を選ぶ</CardTitle>

package/docs/navigation/breadcrumb.tsx

@@ -129,6 +129,54 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        {/* Ant Design parity surface — separator / itemRender / item menu */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>separator · itemRender · menu (Ant Design パリティ)</CardTitle>
+            <CardDescription>
+              separator は既定のシェブロンを任意のノードに置き換える(空文字で消える)。常に
+              aria-hidden なので、読み上げは ol / li の構造のまま。menu は antd の
+              BreadcrumbItemType.menu で、その区切りを兄弟切り替えのメニューボタンにする
+              (パス付きエントリは role=&quot;menuitem&quot; を保ったまま本物のアンカーになる)。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <div id="antd-breadcrumb-slash">
+                <Breadcrumb
+                  ariaLabel="区切り文字のパンくず"
+                  separator="/"
+                  items={[
+                    { label: "ホーム", to: "/" },
+                    { label: "会員管理", to: "/members" },
+                    { label: "田中 太郎" },
+                  ]}
+                />
+              </div>
+              <div id="antd-breadcrumb-menu">
+                <Breadcrumb
+                  ariaLabel="プロジェクト切替のパンくず"
+                  items={[
+                    { label: "ホーム", to: "/" },
+                    {
+                      label: "プロジェクト A",
+                      to: "/p/a",
+                      menu: {
+                        items: [
+                          { value: "b", label: "プロジェクト B", to: "/p/b" },
+                          { value: "c", label: "プロジェクト C", to: "/p/c" },
+                          { value: "d", label: "プロジェクト D (準備中)", disabled: true },
+                        ],
+                      },
+                    },
+                    { label: "設定" },
+                  ]}
+                />
+              </div>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/navigation/dropdown-menu.tsx

@@ -37,6 +37,27 @@ export default function Demo() {
       subtitle="Radix dropdown · Trigger asChild + Content + Item/Separator/Sub"
     >
       <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>メニュー幅</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex wrap gap="md">
+              {(["auto", "trigger", "sm", "md", "lg"] as const).map((width) => (
+                <DropdownMenu key={width}>
+                  <DropdownMenuTrigger asChild>
+                    <Button id={`menu-width-${width}`} variant="outline">
+                      {width}
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent width={width}>
+                    <DropdownMenuItem>編集</DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
         {/* Row action menu — the most common use */}
         <Card>
           <CardHeader>

package/docs/navigation/pagination.tsx

@@ -235,6 +235,58 @@ export default function Demo() {
             />
           </CardContent>
         </Card>
+
+        {/* Ant Design parity surface — showQuickJumper / size / align / responsive */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>showQuickJumper · size · align (Ant Design パリティ)</CardTitle>
+            <CardDescription>
+              showQuickJumper はページ番号を直接入力するフィールド(Enter または goButton
+              で確定、範囲外はクランプ)。size=&quot;sm&quot; はバーに --control-height
+              を一度だけ再束縛するので、ページボタン・サイズ変更・ジャンプ欄が同時に縮む。align
+              は論理軸(start / center / end)。responsive は既定で有効で、モバイル幅では simple
+              形態に畳む。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <div id="antd-pagination-jumper">
+                <Pagination
+                  ariaLabel="クイックジャンパー付きページネーション"
+                  value={3}
+                  total={95}
+                  pageSize={10}
+                  showTotal
+                  showSizeChanger
+                  showQuickJumper
+                  onValueChange={() => {}}
+                />
+              </div>
+              <div id="antd-pagination-sm">
+                <Pagination
+                  ariaLabel="小サイズ・中央寄せのページネーション"
+                  value={3}
+                  total={95}
+                  pageSize={10}
+                  size="sm"
+                  align="center"
+                  showQuickJumper={{ goButton: "移動" }}
+                  onValueChange={() => {}}
+                />
+              </div>
+              <div id="antd-pagination-start">
+                <Pagination
+                  ariaLabel="先頭寄せのページネーション"
+                  value={3}
+                  total={95}
+                  pageSize={10}
+                  align="start"
+                  onValueChange={() => {}}
+                />
+              </div>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/navigation/steps.tsx

@@ -259,6 +259,43 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        {/* Ant Design parity surface — percent + navigation */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>percent · navigation (Ant Design パリティ)</CardTitle>
+            <CardDescription>
+              percent は antd と同じく「現在ステップ」の進捗のみ(0–100
+              にクランプ)。マーカーの周りに確定アークを描き、role=&quot;progressbar&quot;
+              として読み上げられる。type=&quot;navigation&quot; は antd
+              のスラブ型ナビゲーションバーで、既定のヘアライン
+              コネクタは切られ、代わりにシェブロンで繋がる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <div id="antd-steps-percent">
+                <Steps
+                  value={1}
+                  percent={40}
+                  items={[{ title: "申込" }, { title: "審査" }, { title: "完了" }]}
+                />
+              </div>
+              <div id="antd-steps-navigation">
+                <Steps
+                  type="navigation"
+                  value={1}
+                  onValueChange={() => {}}
+                  items={[
+                    { title: "申込", description: "受付済" },
+                    { title: "審査", description: "書類確認中" },
+                    { title: "完了", description: "未着手" },
+                  ]}
+                />
+              </div>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/navigation/tabs.tsx

@@ -46,6 +46,17 @@ const journalItems = [
 
 export default function Demo() {
   const [activeTab, setActiveTab] = useState("pending");
+  const [editableTabs, setEditableTabs] = useState([
+    { value: "je-0042", label: "JE-0042", content: <Text as="p">売上計上 ¥480,000</Text> },
+    { value: "je-0043", label: "JE-0043", content: <Text as="p">仕入計上 ¥120,000</Text> },
+    {
+      value: "je-0040",
+      label: "JE-0040 (固定)",
+      content: <Text as="p">給与支払 ¥2,800,000</Text>,
+      closable: false,
+    },
+  ]);
+  const [editableTab, setEditableTab] = useState("je-0042");
 
   return (
     <PageContainer
@@ -106,7 +117,7 @@ export default function Demo() {
             <CardTitle level={2}>320px stress · 長いローカライズラベル</CardTitle>
             <CardDescription>
               狭いコンテナでも長いラベルはクリップされず、水平タブリストが自身でスクロールする
-              。compact navigation への変換は Tabs API に存在しないため擬似実装しない —
+              。compact navigation への変換は Tabs API に存在しないため擬似実装しない ·
               スクロールが意図した縮退動作。
             </CardDescription>
           </CardHeader>
@@ -308,6 +319,91 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        {/* Ant Design parity surface — editable-card + extra + centered + placement + size */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Editable card · onEdit / extra / hideAdd</CardTitle>
+            <CardDescription>
+              variant=&quot;editable-card&quot; は Ant Design の editable-card。タブ内の ×
+              はポインタ用ショートカット(aria-hidden)で、キーボードでは Delete /
+              Backspace(aria-keyshortcuts)。追加ボタンは tablist の外にある本物の button。extra は
+              antd の tabBarExtraContent を論理軸(start / end)にしたもの。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tabs
+              id="antd-editable-card"
+              variant="editable-card"
+              value={editableTab}
+              onValueChange={setEditableTab}
+              onEdit={(target, action) => {
+                if (action === "add") {
+                  const next = `tab-${editableTabs.length + 1}`;
+                  setEditableTabs([
+                    ...editableTabs,
+                    {
+                      value: next,
+                      label: `新規 ${editableTabs.length + 1}`,
+                      content: <Text as="p">新規タブ {next}</Text>,
+                    },
+                  ]);
+                  setEditableTab(next);
+                  return;
+                }
+                const rest = editableTabs.filter((item) => item.value !== target);
+                setEditableTabs(rest);
+                if (target === editableTab && rest[0]) setEditableTab(rest[0].value);
+              }}
+              extra={{
+                end: (
+                  <Button size="sm" variant="outline">
+                    一括操作
+                  </Button>
+                ),
+              }}
+              items={editableTabs}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>tabPlacement · size · centered</CardTitle>
+            <CardDescription>
+              tabPlacement は antd 6.6.2 の名前で、値は論理軸(top / bottom / start / end)。start /
+              end は tablist を縦方向のロービングフォーカスに切り替える。size はライブラリの control
+              band(sm / md / lg)に対応。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <Tabs
+                id="antd-centered"
+                defaultValue="pending"
+                variant="line"
+                centered
+                items={journalItems}
+              />
+              <Tabs
+                id="antd-bottom"
+                defaultValue="pending"
+                variant="card"
+                tabPlacement="bottom"
+                size="sm"
+                items={journalItems}
+              />
+              <Tabs
+                id="antd-start"
+                defaultValue="pending"
+                variant="line"
+                tabPlacement="start"
+                size="lg"
+                items={journalItems}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/query/button-refetch.tsx

@@ -81,6 +81,7 @@ function VariantBlock() {
           <ButtonRefetch query={query} variant="ghost" label="ghost" />
           <ButtonRefetch query={query} variant="destructive" label="destructive" />
           <ButtonRefetch query={query} variant="link" label="link" />
+          <ButtonRefetch query={query} variant="bare" label="bare" />
         </Flex>
       </CardContent>
     </Card>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "20.0.0",
-  "godxUiMcp": "20.0.0",
+  "version": "20.1.0",
+  "godxUiMcp": "20.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -85,6 +85,22 @@
       "types": "./dist/components/charts/compact-bar-trend.d.ts",
       "import": "./dist/components/charts/compact-bar-trend.js"
     },
+    "./charts/line-chart": {
+      "types": "./dist/components/charts/line-chart.d.ts",
+      "import": "./dist/components/charts/line-chart.js"
+    },
+    "./charts/bar-chart": {
+      "types": "./dist/components/charts/bar-chart.d.ts",
+      "import": "./dist/components/charts/bar-chart.js"
+    },
+    "./charts/area-chart": {
+      "types": "./dist/components/charts/area-chart.d.ts",
+      "import": "./dist/components/charts/area-chart.js"
+    },
+    "./charts/pie-chart": {
+      "types": "./dist/components/charts/pie-chart.d.ts",
+      "import": "./dist/components/charts/pie-chart.js"
+    },
     "./ui": {
       "types": "./dist/components/ui/index.d.ts",
       "import": "./dist/components/ui/index.js"
@@ -316,6 +332,7 @@
     "test:visual:auth-registration": "node scripts/auth-shell-registration-visual.mjs",
     "test:visual:topbar-collision": "node scripts/topbar-collision-visual.mjs",
     "test:visual:table-collection-cjk": "node scripts/table-collection-cjk-visual.mjs",
+    "test:visual:chart-cjk-axis": "node scripts/chart-cjk-axis-visual.mjs",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "check:example-imports": "node scripts/check-example-imports.mjs",

package/scripts/_agent-setup.mjs

@@ -255,17 +255,34 @@ export function refreshGuineaPigSkill(root) {
   const target = join(dir, "SKILL.md");
   const optin = join(dir, ".guinea-pig-optin");
   if (!existsSync(optin) || !existsSync(target)) return false;
-  if (readFileSync(optin, "utf8").trim() === KIT_VERSION) return false;
 
   const base = readFileSync(join(SELF_ROOT, "scripts", "guinea-pig-skill.md"), "utf8");
+  /*
+   * The marker tracks the BASE TEXT, not the release — the same correction the consumer rule file
+   * needed, for the same reason. A version marker means editing this skill without cutting a
+   * release reaches nobody, and the skill is edited far more often than the version moves. The
+   * digest covers only the base: everything from the `# 8.` marker down belongs to the repo and
+   * must not make the package's own content look changed.
+   *
+   * `<version>:<digest>` rather than a bare digest, so the file still says which release wrote it
+   * to anyone reading it. Only the digest half is compared.
+   */
+  const stamp = `${KIT_VERSION}:${digestOf(base)}`;
+  if (readFileSync(optin, "utf8").trim().split(":").pop() === digestOf(base)) return false;
+
   const current = readFileSync(target, "utf8");
   const marker = "\n---\n\n# 8. ";
   const i = current.indexOf(marker);
   writeFileSync(target, base.replace(/\s*$/, "") + "\n" + (i < 0 ? "" : current.slice(i)));
-  writeFileSync(optin, `${KIT_VERSION}\n`);
+  writeFileSync(optin, `${stamp}\n`);
   return true;
 }
 
+/** The stamp `init-guinea-pig` writes on a fresh install, so the first refresh is a no-op. */
+export function guineaPigStamp() {
+  return `${KIT_VERSION}:${digestOf(readFileSync(join(SELF_ROOT, "scripts", "guinea-pig-skill.md"), "utf8"))}`;
+}
+
 /**
  * Install the common consumer rules as a PATH-TRIGGERED file, and wire them into `.ai/rules`.
  *

package/scripts/init-guinea-pig.mjs

@@ -11,7 +11,7 @@ import { copyFileSync, existsSync, mkdirSync, writeFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 
-import { KIT_VERSION, shouldSkip } from "./_agent-setup.mjs";
+import { KIT_VERSION, guineaPigStamp, shouldSkip } from "./_agent-setup.mjs";
 
 const root = process.env.INIT_CWD || process.cwd();
 const skip = shouldSkip(root);
@@ -28,10 +28,32 @@ if (skip === "no-package") {
 const source = join(dirname(fileURLToPath(import.meta.url)), "guinea-pig-skill.md");
 const target = join(root, ".claude", "skills", "godx-ui-guinea-pig", "SKILL.md");
 
+const optin = join(dirname(target), ".guinea-pig-optin");
+
 if (existsSync(target)) {
-  console.log(`  guinea-pig skill already present:\n    ${target}`);
+  /*
+   * PRESENT IS NOT THE SAME AS OPTED IN, and this used to exit here regardless — printing "its
+   * BASE sections now refresh on `npm update`" at a repo where they never would.
+   *
+   * `refreshGuineaPigSkill` keys entirely off the marker: no marker, no refresh, ever, and no
+   * report of it either. Measured across the three guinea pigs: one carried the marker and kept
+   * up; two had SKILL.md copied by an older path and had been reading whatever guidance was
+   * current the day it landed. Re-running is exactly how someone would try to fix that, so
+   * re-running has to actually fix it.
+   */
+  if (!existsSync(optin)) {
+    writeFileSync(optin, `${guineaPigStamp()}\n`);
+    console.log(`
+  guinea-pig skill was present but NOT opted in — its base sections would never have refreshed.
+  Marker written; it now tracks @godxjp/ui@${KIT_VERSION}:
+    • ${target}
+`);
+    process.exit(0);
+  }
+
+  console.log(`  guinea-pig skill already present and opted in:\n    ${target}`);
   console.log(
-    "\n  Its BASE sections now refresh on `npm update @godxjp/ui`; anything you appended below\n" +
+    "\n  Its BASE sections refresh on `npm update @godxjp/ui`; anything you appended below\n" +
       "  the `# 8.` marker is preserved. Re-running this command changes nothing.\n",
   );
   process.exit(0);
@@ -48,7 +70,7 @@ copyFileSync(source, target);
  * exact staleness this whole change exists to remove. The marker lives next to the skill rather
  * than in package.json so it travels with the thing it describes.
  */
-writeFileSync(join(dirname(target), ".guinea-pig-optin"), `${KIT_VERSION}\n`);
+writeFileSync(optin, `${guineaPigStamp()}\n`);
 
 console.log(`
   guinea-pig skill installed: