@godxjp/ui 27.8.0 → 27.10.0

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

@@ -0,0 +1,205 @@
+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.tsx

@@ -296,6 +296,16 @@ export default function Demo() {
                 navigation を失わせないため）。空の <code>{"topbar={<></>}"}</code>
                 で代用しないこと ― それは 4 スロットが埋まった状態と同じで、バーの行は残る。
               </CardDescription>
+              <CardDescription>
+                ブランドの席も幅で動く（gh#728）。<code>.app-topbar-logo</code> は <code>sm</code>{" "}
+                の段より下で <code>--app-shell-brand-compact-max-inline-size</code>
+                （＝バーの高さ）まで切り詰められ、はみ出した分は inline-end 側から落ちる ―
+                どのロックアップもマークが先頭にあるからで、これは package
+                が「自分で描いていない絵」にできる唯一のこと。 何を出すかまで選びたいときは{" "}
+                <code>logoCompact</code> に別ノードを渡す：
+                <code>viewBox</code> は属性なので、どんな stylesheet でも書き換えられない。 実寸は{" "}
+                <code>layout/app-shell-narrow-bar</code> のページで確認できる。
+              </CardDescription>
               <CardDescription>
                 横方向のページ余白軸の持ち主は <code>--space-page-x</code> ひとつ。 トップバーは{" "}
                 <code>.app-main</code> と同じグリッド列に載っている ―

package/docs/layout/page-container.tsx

@@ -17,7 +17,7 @@ import type { ColumnDef } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
 import { SearchInput } from "@godxjp/ui/data-entry";
 import { ResponsiveGrid } from "@godxjp/ui/layout";
-import { Toolbar, ToolbarGroup } from "@godxjp/ui/navigation";
+import { Pagination, Toolbar, ToolbarGroup } from "@godxjp/ui/navigation";
 import { Plus, Download, Filter, Search } from "lucide-react";
 
 /**
@@ -129,6 +129,9 @@ export default function Demo() {
     { key: "ghost", label: "ghost" },
   ] as const;
 
+  /** The record pager that must sit AFTER the header's action cluster (`extra.end`). */
+  const [recordPage, setRecordPage] = useState(12);
+
   const densities = [
     { key: "compact", label: "compact" },
     { key: "default", label: "default" },
@@ -165,6 +168,69 @@ export default function Demo() {
         </ResponsiveGrid>
       </PageContainer>
 
+      {/* ── 1a. `extra` as { start, end } · 本人確認 → 操作 → ページャが最後 ── */}
+      {/* `extra` はノード 1 つでも、start / end の 2 スロットでも受ける（Tabs.extra と同じ形）。
+          レコード画面の並びは「誰の何か → 操作の束 → ページャ」で、ページャは操作の“あと”に
+          来る。1 スロットしかなかったころは、この最後の一つを本文の中に第二のヘッダ帯として
+          置くしかなく、アプリがヘッダを 2 種類抱えることになっていた。両方とも同じ
+          .ui-page-header-extra の直下に並ぶので、DOM 順がそのまま読み上げ順になる。 */}
+      <PageContainer
+        title="不具合 #1042 · 請求書の消費税区分が誤っている"
+        subtitle="Issue detail · 担当 佐藤 · 更新 2026-09-14"
+        breadcrumb={[
+          { label: "ホーム", to: "/" },
+          { label: "不具合", to: "/issues" },
+          { label: "#1042" },
+        ]}
+        breadcrumbLabel="不具合詳細のパンくず"
+        extra={{
+          start: (
+            <Flex gap="sm">
+              <Button variant="outline" size="sm">
+                <Download />
+                エクスポート
+              </Button>
+              <Button size="sm">
+                <Plus />
+                コメント
+              </Button>
+            </Flex>
+          ),
+          end: (
+            <Pagination
+              size="sm"
+              value={recordPage}
+              onValueChange={setRecordPage}
+              total={48}
+              pageSize={1}
+              simple
+              ariaLabel="不具合の前後移動"
+            />
+          ),
+        }}
+      >
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ページャはヘッダの最後に置く</CardTitle>
+            <CardDescription>
+              extra にノードを 1 つ渡したときは start に入るので、既存のページは 1
+              文字も変わらない。end を足したときだけ、その後ろにもう 1
+              スロットが増える。名前は論理方向（start / end）なので dir=&quot;rtl&quot;
+              でそのまま入れ替わる。本文の中にもう一段ヘッダ帯を作る必要はない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Descriptions
+              items={[
+                { label: "状態", value: "未対応" },
+                { label: "優先度", value: "高" },
+                { label: "報告者", value: "鈴木" },
+              ]}
+            />
+          </CardContent>
+        </Card>
+      </PageContainer>
+
       {/* ── 1b. Canonical page-header contract · status/meta band ── */}
       {/* PageContainer's embedded header IS the DXS PageHeader: breadcrumbs + title +
           subtitle + status/meta + actions + responsive overflow on ONE renderer. The

package/docs/layout/topbar.tsx

@@ -289,6 +289,10 @@ export default function Demo() {
                   },
                   { prop: "center", desc: "検索トリガー（Button）。コマンドパレットを開く" },
                   { prop: "end", desc: "通知ボタン + ユーザーメニュー（DropdownMenu）" },
+                  {
+                    prop: "overflow",
+                    desc: '"scroll"（既定）| "clip" · 収まらないときバーが横スクロールするか、切り落とすか',
+                  },
                   { prop: "children", desc: "3 slot を使わず完全カスタムにする場合の逃げ道" },
                 ].map(({ prop, desc }) => (
                   <Flex key={prop} align="start" gap="sm">
@@ -328,7 +332,13 @@ export default function Demo() {
               <CardTitle level={2}>320px stress · 長いローカライズ内容</CardTitle>
               <CardDescription>
                 1100px 以下では package-owned contract が center slot を隠し、start の最後の
-                ラベルを ellipsis で切り詰めて end utilities を保護する。
+                ラベルを ellipsis で切り詰めて end utilities を保護する。 それでも足りなくなったら
+                バーは<b>切り落とさず横スクロールする</b>（<code>overflow=&quot;scroll&quot;</code>
+                が既定 · gh#728）： start はセル 1 つ分の下限を、end
+                はセルの実寸を保つので、収まらない分は「半分だけ描かれる」のではなく
+                視界の外に出るだけになる。セルは DOM に残るため Tab
+                で到達でき、フォーカスが当たるとブラウザが可視域へスクロールする。
+                <code>overflow=&quot;clip&quot;</code> で以前の切り落としに戻せる。
               </CardDescription>
             </CardHeader>
             <CardContent>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "27.8.0",
-  "godxUiMcp": "27.8.0",
+  "version": "27.10.0",
+  "godxUiMcp": "27.10.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/scripts/cli.mjs

@@ -36,6 +36,9 @@ const HELP = {
   It is the postinstall step, run by hand — use it when the app installs with ignore-scripts=true,
   where postinstall never runs and the rules go stale. Silent no-op in CI and when opted out.
 
+  Restart the session afterwards: rewriting the .mcp.json pin does not relaunch an MCP server that
+  is already running, and that process keeps answering from the catalog it started with.
+
   It also READS Claude Code's ~/.claude.json and reports any @godxjp/ui-mcp registered there (user
   scope, or local scope for this project): key, pin, and the claude mcp command that updates it.
   That file is outside the project and is never written; env values are never printed.`,