@godxjp/ui 27.8.0 → 27.9.0

package/dist/styles/shell-layout.css

@@ -737,6 +737,28 @@
     align-items: center;
   }
 
+  .app-topbar-logo {
+    max-inline-size: var(--app-shell-brand-max-inline-size);
+    min-inline-size: 0;
+    flex: 0 1 auto;
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
+  }
+
+  .app-topbar-brand {
+    display: contents;
+  }
+
+  @media (width < 40rem) {
+    .app-topbar-logo {
+      max-inline-size: var(--app-shell-brand-compact-max-inline-size);
+    }
+
+    .app-topbar-logo [data-slot="logo-wordmark"] {
+      display: none;
+    }
+  }
+
   .app-topbar-custom {
     display: flex;
     min-width: 0;
@@ -1997,12 +2019,32 @@
     flex: 1 1 0%;
     justify-content: center;
   }
+
   .ui-topbar-end {
     max-width: 100%;
-    flex: 0 0 auto;
+    flex: 0 1 auto;
     margin-inline-start: auto;
   }
 
+  .ui-topbar[data-overflow="scroll"] {
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scrollbar-width: none;
+  }
+
+  .ui-topbar[data-overflow="scroll"]::-webkit-scrollbar {
+    display: none;
+  }
+
+  .ui-topbar[data-overflow="scroll"] > .ui-topbar-end {
+    max-inline-size: none;
+    min-inline-size: auto;
+  }
+
+  .ui-topbar[data-overflow="scroll"] > .ui-topbar-start {
+    min-inline-size: var(--topbar-item-min-width);
+  }
+
   .ui-topbar-item {
     display: inline-flex;
     min-width: var(--topbar-item-min-width);

package/dist/tokens/components/control.css

@@ -281,14 +281,17 @@
   --tree-select-empty-space-block: var(--space-6);
 
   --calendar-space-inset: var(--space-3);
+
   --calendar-month-space-gap: var(--space-4);
   --calendar-caption-space-inline: var(--space-8);
   --calendar-caption-font-size: var(--font-size-sm);
   --calendar-nav-space-block-start: var(--space-3);
-  --calendar-nav-space-inline: var(--space-1);
+
+  --calendar-nav-space-inline: var(--calendar-space-inset);
 
   --calendar-nav-rest-alpha: 0.7;
-  --calendar-grid-space-block-start: var(--space-4);
+
+  --calendar-grid-space-block-start: var(--space-3);
   --calendar-week-space-block-start: var(--space-2);
   --calendar-weekday-font-size: var(--font-size-xs);
   --calendar-weekday-radius: var(--radius-md);

package/dist/tokens/components/data-display.css

@@ -132,9 +132,12 @@
   --thumbnail-radius: var(--radius);
 
   --timeline-dot-done-background: initial;
+  --timeline-dot-done-foreground: initial;
   --timeline-dot-current-background: initial;
   --timeline-line-completed-background: initial;
 
+  --timeline-dot-current-ring-width: var(--stroke-xl);
+
   --qr-code-foreground: 0 0% 0%;
   --qr-code-background: 0 0% 100%;
   --qr-code-size-xs: 6rem;
@@ -173,9 +176,15 @@
 
 :root {
   --range-timeline-label-width: var(--app-shell-sidebar-width);
-  --range-timeline-unit-width: calc(var(--control-height-sm) * 2);
+
+  --range-timeline-unit-width: var(--range-timeline-unit-width-default);
+
+  --range-timeline-unit-width-compact: calc(var(--control-height-sm) * 1.5);
+  --range-timeline-unit-width-default: calc(var(--control-height-sm) * 2);
+  --range-timeline-unit-width-comfortable: calc(var(--control-height-sm) * 2.5);
   --range-timeline-row-height: var(--control-height-lg);
   --range-timeline-bar-height: var(--control-height-sm);
+
   --range-timeline-border-color: var(--border);
 
   --range-timeline-grid-color: initial;

package/dist/tokens/components/shell.css

@@ -43,6 +43,9 @@
   --app-shell-bar-inset-compact: var(--space-page-compact-x);
   --app-shell-bar-gap: var(--space-3);
 
+  --app-shell-brand-max-inline-size: none;
+  --app-shell-brand-compact-max-inline-size: var(--app-shell-bar-height);
+
   --app-shell-sidebar-width: 16rem;
   --app-shell-sidebar-collapsed-width: 4rem;
 

package/dist/tokens/components/tree.css

@@ -19,6 +19,8 @@
 
   --tree-line-color: initial;
 
+  --tree-divider-color: initial;
+
   --tree-node-hover-background: initial;
   --tree-node-selected-background: initial;
   --tree-node-selected-foreground: initial;

package/docs/DESIGN-AUTHORITY.md

@@ -298,6 +298,26 @@ bottomEnd | none` (`TablePaginationPositionProp`, default `['bottomEnd']`), the
   purpose: omitted, `flow="columns"` keeps `start` and `flow="rows"` keeps the grid's stretch, so
   no existing grid moves; antd's `Row` default is `top` in every case.
 
+- **`Tree.divided` — a new capability, named from this library, not from antd (gh#732).** antd's
+  `Tree` has no horizontal rule between nodes at all (only `showLine`, the VERTICAL parent/child
+  rail), so there is no antd spelling to port and nothing to be out of parity with. The name was
+  picked from the two the library already uses for the idea, and they are not interchangeable here:
+  **`bordered` means a GRID** — `Table` / `DataTable` "outer frame + vertical rules between
+  columns", `Descriptions` "bordered table with shaded label cells", `Calendar` "rule the day
+  grid", `RangeTimeline` "row rules, header rule, a vertical rule per column" — while the
+  horizontal hairline BETWEEN rows of a vertical list is called a **divider** everywhere it exists
+  (`--list-row-border` on `ListRow`, `--command-item-divider-color`, `--table-flush-divider-*`,
+  `--card-*-divider`). A `Tree` has no columns and no frame, so `bordered` would promise chrome the
+  prop does not draw and would collide with a real Tree frame later. `Command.split` is the same
+  hairline, but that name is antd `List.split` adopted verbatim (gh#699) and carries a second
+  meaning there — zero list padding, rows bled to the panel edge — which `Tree` must not inherit.
+  So: `divided`, matching the token `--tree-divider-color`, a positive boolean adjective like
+  `striped` (gh#700). It **defaults to `false`**, unlike `RangeTimeline bordered`: a Gantt body is
+  unreadable without a grid, whereas `Tree`'s documented chrome default is quiet (cardinal rule
+  #44 — `showLine` ships off for the same reason, and the token file states it), and default-on
+  would rule every existing tree, including the picker-sized and `size="xs"` outlines where a rule
+  every 24px is noise rather than structure. A tree used as page navigation opts in.
+
 - **`RangeTimeline` nested rows take `Tree`'s spelling, not antd's (gh#724).** antd has no Gantt;
   the nearest names are `Tree expandedKeys` / `defaultExpandedKeys` / `onExpand` and `Table
 expandable.expandedRowKeys` / `onExpandedRowsChange`. This library already mapped the Tree ones

package/docs/FRAME-COVERAGE-REPORT.md

@@ -45,7 +45,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | CardBar | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | TimeRangePicker | ✓ | · | · | · | · | · | · | · | · | · |
 | VisuallyHidden | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
-| RangeTimeline | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
+| RangeTimeline | **✗** | · | N/A | N/A | · | · | · | · | · | · |
 | PageContainer | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | Flex | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | ResponsiveGrid | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |

package/docs/data-display/timeline.tsx

@@ -1,3 +1,5 @@
+import type { CSSProperties } from "react";
+
 import { useTranslation } from "@godxjp/ui/i18n";
 import {
   Card,
@@ -142,7 +144,10 @@ export default function Demo() {
             <CardTitle level={2}>承認・消費税トラッカー</CardTitle>
             <CardDescription>
               variant="status" は status ごとにグリフを切り替えます（done → チェック、current →
-              塗りつぶしドット、pending → 連番）。
+              塗りつぶしドット、pending → 連番）。進捗レールの色は1つだけ：
+              done・current・通過済みの線 はすべて --primary で塗られ、current
+              はリング（--timeline-dot-current-ring-width）と グリフで区別します。Steps の finish /
+              process と同じ約束です。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -163,6 +168,31 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>進捗レールの色をテーマで戻す</CardTitle>
+            <CardDescription>
+              done の緑と current の紫という 27.8 までの配色に戻したい場合は、塗りとインクを
+              対にしてテーマで指定します。塗りだけを戻すと、若竹の緑にほぼ白のグリフが乗って 2.18:1
+              になり AA を満たしません（gh#643）。同じ要領で --timeline-dot-current-background と
+              --timeline-line-completed-background も再着色できます。
+            </CardDescription>
+          </CardHeader>
+          {/* The knobs are declared on the CARD BODY, not on the Timeline: custom properties
+              inherit, so one scope retints every Timeline inside it — which is how a service
+              theme sets them (once, globally, or under `[data-tenant]`), not per call site. */}
+          <CardContent
+            style={
+              {
+                "--timeline-dot-done-background": "hsl(var(--success))",
+                "--timeline-dot-done-foreground": "hsl(var(--success-foreground))",
+              } as CSSProperties
+            }
+          >
+            <Timeline variant="status" items={approvalItems} />
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>RangeTimeline</CardTitle>
@@ -236,6 +266,52 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>密度（density）— 1日の列幅</CardTitle>
+            <CardDescription>
+              同じ31日分の軸を density で三段。compact は1日42px、default
+              は従来どおり56px、comfortable は70px です。動くのは列幅だけで、行の高さもバーの高さも
+              ラベル列の幅も変わりません。画面に入る日数を増やしたいときは compact
+              を選びます（app.css でトークンを書く必要はありません）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {(["compact", "default", "comfortable"] as const).map((density) => (
+                <div key={density}>
+                  <Text size="xs" tone="muted">
+                    density=&quot;{density}&quot;
+                  </Text>
+                  <RangeTimeline
+                    label={t("rangeTimeline.schedule")}
+                    density={density}
+                    today={8}
+                    bands={[{ label: monthLabel(8), units: 31 }]}
+                    columns={Array.from({ length: 31 }, (_, index) => {
+                      const weekday = new Date(Date.UTC(2026, 8, index + 1)).getUTCDay();
+                      return {
+                        label: new Intl.NumberFormat(locale).format(index + 1),
+                        units: 1,
+                        muted: weekday === 0 || weekday === 6,
+                      };
+                    })}
+                    rows={[
+                      { id: "design", label: "要件定義", start: 0, end: 6 },
+                      { id: "build", label: "実装", start: 7, end: 22 },
+                      { id: "review", label: "レビュー", start: 20, end: 29 },
+                    ].map((row) => ({
+                      ...row,
+                      startLabel: dayLabel(row.start + 1),
+                      endLabel: dayLabel(row.end + 1),
+                    }))}
+                  />
+                </div>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>月単位の軸（列ごとに units が異なる）</CardTitle>

package/docs/data-display/tree.tsx

@@ -100,6 +100,48 @@ const fileDetails: Record<string, { size: string; changed: string }> = {
   "docs/tree.mdx": { size: "4.1 KB", changed: "2026-09-10" },
 };
 
+// ── the page index used as NAVIGATION inside a Card (`divided`, gh#732) ──────────────────────
+const wikiPages: TreeNodeProp[] = [
+  {
+    value: "handbook",
+    label: "社内ハンドブック",
+    children: [
+      { value: "handbook/onboarding", label: "入社手続き", isLeaf: true },
+      { value: "handbook/expenses", label: "経費精算", isLeaf: true },
+      {
+        value: "handbook/security",
+        label: "情報セキュリティ",
+        children: [
+          { value: "handbook/security/passwords", label: "パスワード規程", isLeaf: true },
+          { value: "handbook/security/incidents", label: "インシデント報告", isLeaf: true },
+        ],
+      },
+    ],
+  },
+  {
+    value: "product",
+    label: "プロダクト仕様",
+    children: [
+      { value: "product/release", label: "リリース手順", isLeaf: true },
+      { value: "product/support", label: "サポート窓口", isLeaf: true },
+    ],
+  },
+  { value: "minutes", label: "議事録", isLeaf: true },
+];
+
+const wikiPageDetails: Record<string, { updated: string; author: string }> = {
+  handbook: { updated: "2026-09-01", author: "総務部" },
+  "handbook/onboarding": { updated: "2026-08-18", author: "人事部" },
+  "handbook/expenses": { updated: "2026-07-30", author: "経理部" },
+  "handbook/security": { updated: "2026-09-11", author: "情報システム部" },
+  "handbook/security/passwords": { updated: "2026-09-11", author: "情報システム部" },
+  "handbook/security/incidents": { updated: "2026-06-02", author: "情報システム部" },
+  product: { updated: "2026-09-14", author: "プロダクト部" },
+  "product/release": { updated: "2026-09-14", author: "プロダクト部" },
+  "product/support": { updated: "2026-05-20", author: "CS部" },
+  minutes: { updated: "2026-09-16", author: "総務部" },
+};
+
 // ── card 3 · async branches (fieldNames + loadData + titleRender) ────────────────────────────
 type Department = { id: string; name: string; leaf?: boolean; units?: Department[] };
 
@@ -130,6 +172,8 @@ export default function Demo() {
   const [granted, setGranted] = React.useState<string[]>(["billing.invoice.read"]);
   // Card 2 — selection is controlled and drives the detail pane.
   const [openFile, setOpenFile] = React.useState<string | undefined>("src/components/tree.tsx");
+  // The page index — the tree IS the navigation, so selection is what the reading pane follows.
+  const [openPage, setOpenPage] = React.useState<string | undefined>("handbook/security/passwords");
   // Card 3 — async children land in state, exactly as a real fetch would.
   const [departments, setDepartments] = React.useState<Department[]>(initialDepartments);
   // Card 5 — independent (strict) checks, and a multi-select tree.
@@ -239,6 +283,56 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ページ一覧をナビゲーションに使う（divided）</CardTitle>
+            <CardDescription>
+              ドキュメント／wiki のページ一覧のように、ツリーそのものが画面のナビゲーションになる
+              ときは divided で行間に罫を引きます。罫は各行の block-start に 1
+              本ずつ、外側の最初の行にだけ引かれません。 深さに関係なく行の幅いっぱいに走るので
+              （インデントは行の padding であって margin ではありません）、 子行が「表の中の表」に
+              見えることはありません。色は --tree-divider-color（既定 hsl(var(--border))）。 divided
+              は既定オフで、このページの他のカードがその既定の姿です。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex gap="lg" wrap>
+              <Card className="w-72">
+                <CardHeader>
+                  <CardTitle level={3}>ページ一覧</CardTitle>
+                </CardHeader>
+                <CardContent flush>
+                  <Tree
+                    aria-label="ページ一覧"
+                    divided
+                    treeData={wikiPages}
+                    defaultExpandAll
+                    value={openPage}
+                    onValueChange={(next) => setOpenPage(next as string | undefined)}
+                  />
+                </CardContent>
+              </Card>
+              <Flex direction="col" gap="sm">
+                {openPage && wikiPageDetails[openPage] ? (
+                  <Descriptions
+                    items={[
+                      { label: "パス", children: openPage },
+                      { label: "最終更新", children: wikiPageDetails[openPage].updated },
+                      { label: "更新者", children: wikiPageDetails[openPage].author },
+                    ]}
+                  />
+                ) : (
+                  <EmptyState
+                    icon={FolderTree}
+                    title="ページが選択されていません"
+                    description="左の一覧からページを選んでください。"
+                  />
+                )}
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>組織ツリー（loadData · fieldNames · titleRender）</CardTitle>

package/docs/data-entry/calendar.tsx

@@ -77,8 +77,9 @@ export default function Demo() {
               罫線 (bordered) · 既定で表示 / bordered={"{false}"} で解除
             </CardTitle>
             <CardDescription>
-              日と日の間に罫線を引くのが既定。線色は --calendar-grid-border-color (既定 --input の
-              50%、背景に対し約 1.7:1)。選択日・今日・範囲の始点/中間/終点・無効日・前後月の日が
+              日と日の間に罫線を引くのが既定。線色は --calendar-grid-border-color (既定 --border、
+              背景に対し約 1.15:1)。表の行やカードの枠と同じ段なので、罫線が枠より濃くなることは
+              ない。選択日・今日・範囲の始点/中間/終点・無効日・前後月の日が
               罫線の中でも判別できる。罫線なしの浮いたボタン表示にしたい場合のみ bordered=
               {"{false}"} を渡す。
             </CardDescription>

package/docs/general/icon.tsx

@@ -183,7 +183,9 @@ export default function Demo() {
 
               <Flex direction="col" gap="xs">
                 <Heading level={3}>Button の中 · 明示した段が Button の既定に勝つ</Heading>
-                <Flex direction="row" gap="sm" align="center">
+                {/* 320px では 2 つのラベル付き Button が 1 行に収まらない。Button はラベル幅より
+                    縮まないので、行を折り返させるのは並べた側の責任（`wrap`）。 */}
+                <Flex direction="row" gap="sm" align="center" wrap>
                   <Button size="sm">
                     <Icon as={Download} size="sm" />
                     書き出す

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> と同じグリッド列に載っている ―