@godxjp/ui 31.5.0 → 31.7.0

package/docs/data-display/data-table/examples/server-paged.tsx

@@ -26,6 +26,10 @@ import { Download, FileText, LayoutDashboard, Plus, ReceiptText } from "lucide-r
  * showTotal, onChange }}` — the real Pagination, total beside the page numbers, bottom-end. The
  * table is compact, so the pager is `size="sm"` and sits on the same control step as the toolbar
  * buttons above it. `data` is only the current page; the footer offers ceil(total / pageSize).
+ *
+ * Selection on a server-paged list (gh#1036): the header checkbox ticks THIS PAGE, and says so.
+ * Once the page is fully ticked, `rowSelection.matching` offers every matching row; while that is
+ * chosen the bulk action sends the query's filter to the server instead of a list of ids.
  */
 const sections: SidebarSectionProp[] = [
   {
@@ -86,6 +90,8 @@ export default function Demo() {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const rows = useMemo(() => fetchPage(page, pageSize), [page, pageSize]);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const [allMatching, setAllMatching] = useState(false);
 
   return (
     <AppShell
@@ -126,6 +132,17 @@ export default function Demo() {
               data={rows}
               columns={columns}
               getRowId={(row) => row.id}
+              rowSelection={{
+                selectedRowKeys: selectedKeys,
+                onChange: (keys) => {
+                  setSelectedKeys(keys);
+                },
+                matching: {
+                  total: SERVER_TOTAL,
+                  selected: allMatching,
+                  onSelectedChange: setAllMatching,
+                },
+              }}
               pagination={{
                 total: SERVER_TOTAL,
                 current: page,
@@ -144,6 +161,12 @@ export default function Demo() {
                     <Download />
                     エクスポート
                   </Button>
+                  {/* While "all matching" is chosen the count is the server's, not the page's. */}
+                  <DataTable.BulkActions count={allMatching ? SERVER_TOTAL : undefined}>
+                    <Button size="sm" variant="outline">
+                      Mark as paid
+                    </Button>
+                  </DataTable.BulkActions>
                 </Flex>
                 <DataTable.ViewOptions />
               </DataTable.Toolbar>

package/docs/data-display/data-table/index.md

@@ -5,3 +5,5 @@ The admin list primitive — sticky header, sorting, bulk selection, density tog
 See the "Approval queue" example.
 
 See the "Selectable inbox" example for a `ListRow` hosted in a selectable DataTable: mark that column `flush: true` so the cell drops its own padding and the ListRow owns the inset (gh#1016).
+
+See the "Server paged" example for selection on a server-paged list (gh#1036). `rowSelection.selectAllLabel` names the header checkbox; `rowSelection.matching={{ total, selected, onSelectedChange }}` adds the "Select all N matching rows" banner once the page is fully ticked. antd has no equivalent of `matching` — it is the Gmail / Jira / GitHub pattern, and the one deliberate deviation from antd's `rowSelection` here. While `selected` is true every row of any page shows ticked; send the query's filter to the server instead of the ids. Unticking a row or "Clear selection" reports `false`. `selections` also takes antd's `DataTable.SELECTION_ALL` / `SELECTION_INVERT` / `SELECTION_NONE` mixed with custom entries.

package/docs/data-display/progress.tsx

@@ -6,6 +6,7 @@ import {
   CardTitle,
   Progress,
 } from "@godxjp/ui/data-display";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
@@ -13,6 +14,7 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
  * Composed only from real @godxjp/ui components.
  */
 export default function Demo() {
+  const { t, locale } = useTranslation();
   return (
     <PageContainer title="Progress" subtitle="0–100 bar · optional label + semantic tone">
       <Flex direction="col" gap="lg">
@@ -37,11 +39,10 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>shape=&quot;ring&quot;</CardTitle>
             <CardDescription>
-              同じメーターを弧で描きます。バーと同じ value / tone / size / ARIA
-              のまま、label がリングの内側に入ります。狭いアプリバーで「18 / 42
-              件」を見出しの横に出したいとき、バー＋キャプションの 2
-              段ではなく 1 マスで済むのが理由です。数値が重要なときではなく、
-              場所が正方形のときに選びます。
+              同じメーターを弧で描きます。バーと同じ value / tone / size / ARIA のまま、label
+              がリングの内側に入ります。狭いアプリバーで「18 / 42
+              件」を見出しの横に出したいとき、バー＋キャプションの 2 段ではなく 1
+              マスで済むのが理由です。数値が重要なときではなく、 場所が正方形のときに選びます。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -68,7 +69,10 @@ export default function Demo() {
               1 つの合計を状態ごとに分割します。割合ではなく実数を渡すと、各スライスの比率は
               コンポーネントが計算します。メーターより背の高いトラックになるのは、0.5rem の pill
               上に 3 色を並べると比率が読めなくなるためです。role=&quot;img&quot;
-              として、全スライスを 1 つの名前で読み上げます。
+              として、全スライスを 1 つの名前で読み上げます。total を渡すと全体は合計ではなく total
+              になり、残りはトラックのまま「残り」として読み上げます（antd の percent +
+              success.percent と同じく、未塗りのトラックが残り。antd の全体は常に 100
+              ですが、ここは実数の単位で total を指定します）。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -89,6 +93,20 @@ export default function Demo() {
                 ]}
                 label="みどり農産株式会社（0 件のスライスは幅 0）"
               />
+              {/* total を渡すと、スライスは合計ではなく total に対して描かれ、残りはトラックのまま。
+                  読み上げには残り（remainderLabel）が Intl 形式の数値で入ります。 */}
+              <Progress
+                segments={[
+                  { value: 3, tone: "success", label: t("progressDocs.testRun.passed") },
+                  { value: 1, tone: "destructive", label: t("progressDocs.testRun.failed") },
+                  { value: 2, tone: "warning", label: t("progressDocs.testRun.blocked") },
+                ]}
+                total={400}
+                remainderLabel={t("progressDocs.testRun.notRun")}
+                label={t("progressDocs.testRun.caption", {
+                  total: new Intl.NumberFormat(locale).format(400),
+                })}
+              />
             </Flex>
           </CardContent>
         </Card>

package/docs/data-display/timeline.tsx

@@ -230,6 +230,39 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* sticky sits OUTSIDE a Card on purpose: Card clips (`overflow: hidden`), and a clipping
+            ancestor becomes the box the header sticks to — the same limit as antd Table sticky. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>sticky · the axis stays on screen (gh#1044)</CardTitle>
+            <CardDescription>
+              A long schedule scrolled by the page, placed as a page section rather than inside a
+              Card (a Card clips, which would pin the header to the card instead of the viewport).
+              With sticky the band and tick rows stay at the top of the viewport — offsetHeader
+              clears a fixed app topbar — and still scroll sideways with the body.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+        <RangeTimeline
+          data-testid="range-timeline-sticky"
+          label={t("rangeTimeline.schedule")}
+          sticky={{ offsetHeader: 0 }}
+          today={8}
+          bands={[{ label: monthLabel(8), units: 30 }]}
+          columns={Array.from({ length: 30 }, (_, index) => ({
+            label: new Intl.NumberFormat(locale).format(index + 1),
+            units: 1,
+          }))}
+          rows={Array.from({ length: 40 }, (_, index) => ({
+            id: `task-${index + 1}`,
+            label: `Task ${index + 1}`,
+            start: index % 20,
+            end: (index % 20) + 5,
+            startLabel: dayLabel((index % 20) + 1),
+            endLabel: dayLabel((index % 20) + 6),
+          }))}
+        />
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>月をまたぐ日単位の軸（bands）</CardTitle>

package/docs/data-display/tree.tsx

@@ -12,7 +12,9 @@ import {
   Tree,
   type TreeNodeProp,
 } from "@godxjp/ui/data-display";
+import { SearchInput } from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer, Separator } from "@godxjp/ui/layout";
 import { Building2, FolderTree, ShieldCheck } from "lucide-react";
 
@@ -167,7 +169,85 @@ function attachChildren(nodes: Department[], id: string, children: Department[])
   );
 }
 
+// ── card 4 · a long lazy level (height + virtual · filterTreeNode · retry) ────────────────────
+// The godx-task shape (gh#1041-1043): 2 suites → 28 sections → up to 421 cases per section,
+// fetched when a section opens. antd's Tree has no "load more" node — `height` keeps a 421-row
+// level to a few dozen DOM rows — so the one paged section below composes its own: a leaf whose
+// selection asks for the next page. It is a real treeitem, so the keyboard reaches it.
+const CASE_PAGE = 100;
+// The data carries VALUES only; every visible label is derived from the value through `t()` at
+// render (`labelSuiteTree`), so the demo follows the active locale like the library's chrome does.
+const suites: TreeNodeProp[] = [1, 2].map((suiteNumber) => ({
+  value: `suite-${suiteNumber}`,
+  label: "",
+  children: Array.from({ length: 14 }, (_, sectionIndex) => ({
+    value: `suite-${suiteNumber}/section-${sectionIndex + 1}`,
+    label: "",
+    isLeaf: false,
+  })),
+}));
+
+function caseNodes(section: string, from: number, to: number): TreeNodeProp[] {
+  return Array.from({ length: to - from }, (_, index) => ({
+    value: `${section}/case-${from + index + 1}`,
+    label: "",
+    isLeaf: true,
+  }));
+}
+
+function withChildren(
+  nodes: TreeNodeProp[],
+  value: string,
+  children: TreeNodeProp[],
+): TreeNodeProp[] {
+  return nodes.map((node) =>
+    node.value === value
+      ? { ...node, children }
+      : node.children
+        ? { ...node, children: withChildren(node.children, value, children) }
+        : node,
+  );
+}
+
+function labelSuiteTree(
+  nodes: TreeNodeProp[],
+  t: ReturnType<typeof useTranslation>["t"],
+): TreeNodeProp[] {
+  return nodes.map((node) => {
+    const value = node.value;
+    let label: string;
+    if (value.endsWith("::more")) {
+      label = t("treeDocs.longList.loadMore", { count: CASE_PAGE });
+    } else if (/\/case-\d+$/.test(value)) {
+      label = t("treeDocs.longList.case", {
+        number: String(Number(value.split("case-").pop())).padStart(3, "0"),
+      });
+    } else if (/\/section-\d+$/.test(value)) {
+      const number = Number(value.split("section-").pop());
+      const key =
+        value === "suite-1/section-2"
+          ? "treeDocs.longList.sectionFailing"
+          : value === "suite-1/section-3"
+            ? "treeDocs.longList.sectionPaged"
+            : "treeDocs.longList.section";
+      label = t(key, { number, count: CASE_PAGE });
+    } else {
+      label = t(
+        value === "suite-1"
+          ? "treeDocs.longList.suiteIntegration"
+          : "treeDocs.longList.suiteAcceptance",
+      );
+    }
+    return {
+      ...node,
+      label,
+      children: node.children ? labelSuiteTree(node.children, t) : undefined,
+    };
+  });
+}
+
 export default function Demo() {
+  const { t } = useTranslation();
   // Card 1 — checks are controlled so the readout beside the tree can never disagree with it.
   const [granted, setGranted] = React.useState<string[]>(["billing.invoice.read"]);
   // Card 2 — selection is controlled and drives the detail pane.
@@ -179,6 +259,45 @@ export default function Demo() {
   // Card 5 — independent (strict) checks, and a multi-select tree.
   const [strictChecks, setStrictChecks] = React.useState<string[]>(["people", "people.read"]);
   const [picked, setPicked] = React.useState<string[]>(["billing", "audit"]);
+  // Card 4 — the long lazy level.
+  const [suiteTree, setSuiteTree] = React.useState<TreeNodeProp[]>(suites);
+  const [caseQuery, setCaseQuery] = React.useState("");
+  // "" (not undefined) keeps the tree CONTROLLED while nothing is open.
+  const [openCase, setOpenCase] = React.useState("");
+  const failedOnce = React.useRef(false);
+
+  const loadSection = async (node: TreeNodeProp) => {
+    await new Promise((resolve) => setTimeout(resolve, 600));
+    if (node.value === "suite-1/section-2" && !failedOnce.current) {
+      failedOnce.current = true;
+      // Rejected: the branch folds back shut, and opening it again asks again (gh#1041).
+      throw new Error("network");
+    }
+    const paged = node.value === "suite-1/section-3";
+    const children = caseNodes(node.value, 0, paged ? CASE_PAGE : 421);
+    if (paged) {
+      children.push({
+        value: `${node.value}::more`,
+        label: "",
+        isLeaf: true,
+      });
+    }
+    setSuiteTree((current) => withChildren(current, node.value, children));
+  };
+
+  const loadMoreCases = (moreValue: string) => {
+    const section = moreValue.replace(/::more$/, "");
+    setSuiteTree((current) => {
+      const sectionNode = current
+        .flatMap((suite) => suite.children ?? [])
+        .find((node) => node.value === section);
+      const loaded = (sectionNode?.children ?? []).filter((node) => !node.value.endsWith("::more"));
+      const next = caseNodes(section, loaded.length, Math.min(421, loaded.length + CASE_PAGE));
+      const more =
+        loaded.length + next.length < 421 ? [{ value: moreValue, label: "", isLeaf: true }] : [];
+      return withChildren(current, section, [...loaded, ...next, ...more]);
+    });
+  };
 
   const loadDepartment = async (node: TreeNodeProp) => {
     // A real delay, so the Skeleton row and aria-busy are OBSERVABLE rather than theoretical.
@@ -365,6 +484,41 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("treeDocs.longList.title")}</CardTitle>
+            <CardDescription>{t("treeDocs.longList.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <SearchInput
+                ariaLabel={t("treeDocs.longList.searchLabel")}
+                placeholder={t("treeDocs.longList.searchPlaceholder")}
+                value={caseQuery}
+                onValueChange={setCaseQuery}
+                onSearch={() => {}}
+              />
+              <Tree
+                aria-label={t("treeDocs.longList.treeLabel")}
+                treeData={labelSuiteTree(suiteTree, t)}
+                height={360}
+                defaultExpandedValues={["suite-1"]}
+                loadData={loadSection}
+                filterTreeNode={(node) =>
+                  caseQuery.trim() !== "" && String(node.label).includes(caseQuery.trim())
+                }
+                value={openCase}
+                onValueChange={(next) => {
+                  // The "load more" leaf is an action, not a selection — it never stays selected,
+                  // so choosing it again always asks for the next page.
+                  if (typeof next === "string" && next.endsWith("::more")) loadMoreCases(next);
+                  else setOpenCase((next as string | undefined) ?? "");
+                }}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>checkStrictly と multiple（チェックと選択は別の軸）</CardTitle>

package/docs/data-entry/branch-scope-picker.tsx

@@ -54,7 +54,12 @@ export default function Demo() {
             </CardHeader>
             <CardContent>
               <FormField label="適用範囲" required>
-                <BranchScopePicker branches={BRANCHES} value={scope} onValueChange={setScope} />
+                <BranchScopePicker
+                  branches={BRANCHES}
+                  value={scope}
+                  onValueChange={setScope}
+                  notFoundContent="No branch matches that search"
+                />
               </FormField>
             </CardContent>
           </Card>

package/docs/data-entry/record-picker.tsx

@@ -109,6 +109,7 @@ export default function Demo() {
                 value={owner}
                 onValueChange={(v) => setOwner(v as string)}
                 dialogTitle="Choose an owner"
+                notFoundContent="No one matches that name"
               />
               <Text as="p" size="2xs" tone="muted" tabular>
                 value: {JSON.stringify(owner)}

package/docs/data-entry/transfer.tsx

@@ -104,6 +104,7 @@ export default function Demo() {
               defaultValue={[]}
               showSearch
               pagination={{ pageSize: 3 }}
+              locale={{ notFoundContent: ["No matching accounts", "Nothing selected yet"] }}
               name="accounts[]"
             />
           </CardContent>

package/docs/general/typography.tsx

@@ -21,8 +21,10 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  DataTable,
+  Tree,
 } from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Breadcrumb, Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 
 /**
  * Text + Heading — the typographic primitives. Use these INSTEAD of a hand-rolled
@@ -46,8 +48,15 @@ const headingTones = [
   { tone: "info", title: "システムメンテナンスのお知らせ" },
 ] as const;
 
+type SuiteRow = { id: string; title: string };
+
 export default function Demo() {
   const { t } = useTranslation();
+  const longTitle = t("textExamples.ellipsisLongTitle");
+  const suiteRows: SuiteRow[] = [
+    { id: "TS-0412", title: longTitle },
+    { id: "TS-0413", title: t("textExamples.ellipsisShortTitle") },
+  ];
   return (
     <PageContainer
       title="Typography"
@@ -388,6 +397,80 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("textExamples.ellipsisTitle")}</CardTitle>
+            <CardDescription>{t("textExamples.ellipsisDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <ResponsiveGrid columns={{ sm: 2, lg: 3 }}>
+                <Flex direction="col" gap="xs">
+                  <Text size="xs" tone="muted">
+                    {t("textExamples.ellipsisPlain")}
+                  </Text>
+                  <Text ellipsis={{ tooltip: true }}>{longTitle}</Text>
+                </Flex>
+                <Flex direction="col" gap="xs">
+                  <Text size="xs" tone="muted">
+                    {t("textExamples.ellipsisLink")}
+                  </Text>
+                  <Text asChild link ellipsis={{ tooltip: true }}>
+                    <a href="#typography">{longTitle}</a>
+                  </Text>
+                </Flex>
+                <Flex direction="col" gap="xs">
+                  <Text size="xs" tone="muted">
+                    {t("textExamples.ellipsisTree")}
+                  </Text>
+                  <Tree
+                    aria-label={t("textExamples.ellipsisTree")}
+                    treeData={[
+                      {
+                        value: "suite",
+                        label: longTitle,
+                        children: [
+                          { value: "case-1", label: t("textExamples.ellipsisShortTitle") },
+                        ],
+                      },
+                    ]}
+                    defaultExpandedValues={["suite"]}
+                    titleRender={(node) => <Text ellipsis={{ tooltip: true }}>{node.label}</Text>}
+                  />
+                </Flex>
+              </ResponsiveGrid>
+              <DataTable<SuiteRow>
+                label={t("textExamples.ellipsisTable")}
+                data={suiteRows}
+                getRowId={(row) => row.id}
+                columns={[
+                  { key: "id", header: "ID", width: "7rem", render: (row) => row.id },
+                  {
+                    key: "title",
+                    header: (
+                      <Text ellipsis={{ tooltip: true }}>
+                        {t("textExamples.ellipsisLongHeader")}
+                      </Text>
+                    ),
+                    width: "12rem",
+                    ellipsis: true,
+                    sortable: true,
+                    sorter: (a, b) => a.title.localeCompare(b.title),
+                    render: (row) => <Text ellipsis={{ tooltip: true }}>{row.title}</Text>,
+                  },
+                ]}
+              />
+              <Breadcrumb
+                ariaLabel={t("textExamples.ellipsisBreadcrumb")}
+                items={[
+                  { label: t("textExamples.ellipsisCrumbHome"), to: "#typography" },
+                  { label: longTitle, to: "#typography", ellipsis: true },
+                  { label: longTitle, ellipsis: true },
+                ]}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
         <Card>
           <CardHeader>
             <CardTitle level={2}>copyable · editable · 装飾</CardTitle>

package/docs/i18n/messages/en.json

@@ -6,7 +6,18 @@
     "breakDescription": "An identifier with nowhere to break — an email address, a coupon code, a login ID — takes break=\"anywhere\", and the column stays inside the viewport even in a table cell. whitespace=\"pre-wrap\" is for newlines a person typed; it cannot wrap an identifier in a table cell.",
     "breakColumnOwner": "Owner",
     "breakColumnEmail": "Email address",
-    "breakSampleName": "Sato"
+    "breakSampleName": "Sato",
+    "ellipsisTitle": "ellipsis · the full text in a tooltip while it is cut",
+    "ellipsisDescription": "ellipsis={{ tooltip: true }} keeps one line and shows the whole text on hover and on keyboard focus of the control it sits in (the link, the tree item, the sort button). A title that fits shows no tooltip, and the Text never becomes a tab stop of its own.",
+    "ellipsisPlain": "Plain Text",
+    "ellipsisLink": "Text asChild · link",
+    "ellipsisTree": "Tree titleRender",
+    "ellipsisTable": "Test suites",
+    "ellipsisBreadcrumb": "Truncated breadcrumb",
+    "ellipsisCrumbHome": "Home",
+    "ellipsisLongTitle": "Q3 integration test · payment module · invoice re-issue scenarios and acceptance criteria review",
+    "ellipsisShortTitle": "Login smoke test",
+    "ellipsisLongHeader": "Latest run name (release candidate 2026-09)"
   },
   "themeShowcase": {
     "page": {
@@ -1450,5 +1461,41 @@
     "nameColumn": "Name",
     "inviteTitle": "Send invitation",
     "send": "Send"
+  },
+  "treeDocs": {
+    "longList": {
+      "title": "Long child lists (height · virtual · filterTreeNode)",
+      "description": "2 suites → 28 sections → up to 421 cases. With height the tree scrolls inside that height and renders only the rows in view (antd height + virtual). Nodes matching the search are highlighted by filterTreeNode, never hidden. Section 2 fails its first loadData and fetches again when reopened. Section 3 shows how to compose a paged API: selecting the last leaf loads the next 100.",
+      "searchLabel": "Search cases",
+      "searchPlaceholder": "Highlight by case name (e.g. 042)",
+      "treeLabel": "Test suites",
+      "suiteIntegration": "Integration tests",
+      "suiteAcceptance": "Acceptance tests",
+      "section": "Section {number}",
+      "sectionFailing": "Section {number} (first load fails)",
+      "sectionPaged": "Section {number} ({count} at a time)",
+      "case": "Case {number}",
+      "loadMore": {
+        "one": "Load {count} more",
+        "other": "Load {count} more"
+      }
+    }
+  },
+  "progressDocs": {
+    "testRun": {
+      "passed": "Passed",
+      "failed": "Failed",
+      "blocked": "Blocked",
+      "notRun": "Not run",
+      "caption": "Regression suite — {total} cases"
+    }
+  },
+  "breadcrumbExamples": {
+    "ellipsisTitle": "ellipsis · a long segment on one line",
+    "ellipsisDescription": "ellipsis on a segment keeps the trail on one line and cuts that label with \"…\"; the full label shows in a tooltip on hover and when the crumb link takes keyboard focus. antd Breadcrumb has no per-item ellipsis — the shape is Typography’s. PageContainer breadcrumb takes the same item field.",
+    "ellipsisAria": "Truncated breadcrumb",
+    "home": "Home",
+    "longSuite": "Q3 integration test · payment module · invoice re-issue scenarios",
+    "longSection": "Acceptance criteria review for the release candidate of September 2026"
   }
 }

package/docs/i18n/messages/ja.json

@@ -6,7 +6,18 @@
     "breakDescription": "メールアドレス・クーポンコード・ログイン ID のような区切りのない識別子は break=\"anywhere\"。表のセルでも列が画面幅に収まります。whitespace=\"pre-wrap\" は人が入力した改行のためのもので、表のセルでは識別子を折り返せません。",
     "breakColumnOwner": "担当者",
     "breakColumnEmail": "メールアドレス",
-    "breakSampleName": "佐藤"
+    "breakSampleName": "佐藤",
+    "ellipsisTitle": "ellipsis · 省略中は全文をツールチップで",
+    "ellipsisDescription": "ellipsis={{ tooltip: true }} は 1 行に収め、ホバーと、置かれたコントロール（リンク・ツリー項目・並べ替えボタン）へのキーボードフォーカスで全文を表示します。収まるタイトルにはツールチップを出さず、Text 自体はタブ移動先になりません。",
+    "ellipsisPlain": "通常の Text",
+    "ellipsisLink": "Text asChild · リンク",
+    "ellipsisTree": "Tree の titleRender",
+    "ellipsisTable": "テストスイート",
+    "ellipsisBreadcrumb": "省略付きパンくずリスト",
+    "ellipsisCrumbHome": "ホーム",
+    "ellipsisLongTitle": "第3四半期 結合テスト 決済モジュール 請求書再発行シナリオと受入基準のレビュー",
+    "ellipsisShortTitle": "ログインのスモークテスト",
+    "ellipsisLongHeader": "最新の実行名（2026年9月 リリース候補）"
   },
   "themeShowcase": {
     "page": {
@@ -1444,5 +1455,40 @@
     "nameColumn": "氏名",
     "inviteTitle": "招待を送信",
     "send": "送信"
+  },
+  "treeDocs": {
+    "longList": {
+      "title": "長い子リスト（height · virtual · filterTreeNode）",
+      "description": "2 スイート → 28 セクション → 最大 421 ケース。height を渡すとツリー自身がその高さでスクロールし、見えている行だけを描画します（antd の height + virtual）。検索語に一致するノードは filterTreeNode で強調されるだけで、隠れません。セクション 2 は初回の loadData が失敗し、もう一度開くと再取得します。セクション 3 は API がページングされている場合の組み立て例で、末尾の葉を選ぶと次の 100 件を読み込みます。",
+      "searchLabel": "ケースを検索",
+      "searchPlaceholder": "ケース名で強調（例: 042）",
+      "treeLabel": "テストスイート",
+      "suiteIntegration": "結合テスト",
+      "suiteAcceptance": "受入テスト",
+      "section": "セクション {number}",
+      "sectionFailing": "セクション {number}（初回の読み込みが失敗）",
+      "sectionPaged": "セクション {number}（{count} 件ずつ）",
+      "case": "ケース {number}",
+      "loadMore": {
+        "other": "さらに {count} 件を読み込む"
+      }
+    }
+  },
+  "progressDocs": {
+    "testRun": {
+      "passed": "合格",
+      "failed": "失敗",
+      "blocked": "ブロック",
+      "notRun": "未実施",
+      "caption": "回帰テスト — 全 {total} 件"
+    }
+  },
+  "breadcrumbExamples": {
+    "ellipsisTitle": "ellipsis · 長いセグメントを 1 行に",
+    "ellipsisDescription": "セグメントに ellipsis を付けるとパンくずは 1 行のまま、そのラベルを「…」で省略します。全文はホバーと、パンくずのリンクへのキーボードフォーカスでツールチップに出ます。antd の Breadcrumb に項目単位の省略はなく、形は Typography に合わせています。PageContainer の breadcrumb も同じ項目フィールドを受け付けます。",
+    "ellipsisAria": "省略付きパンくずリスト",
+    "home": "ホーム",
+    "longSuite": "第3四半期 結合テスト 決済モジュール 請求書再発行シナリオ",
+    "longSection": "2026年9月 リリース候補の受入基準レビュー"
   }
 }