@godxjp/ui 27.5.0 → 27.7.0

package/dist/components/data-display/range-timeline.d.ts

@@ -6,6 +6,12 @@ export type RangeTimelineRow = {
     end: number;
     startLabel: string;
     endLabel: string;
+    /**
+     * Nesting level, 0 for a top-level row. Rows arrive flat and depth-first (a parent, then its
+     * descendants); a row is a parent when the row after it is deeper. The component draws the
+     * indent (`--range-timeline-indent-width` per level) and the disclosure.
+     */
+    depth?: number;
 };
 export type RangeTimelineProps = React.HTMLAttributes<HTMLElement> & {
     label: string;
@@ -28,6 +34,15 @@ export type RangeTimelineProps = React.HTMLAttributes<HTMLElement> & {
      * the header-only ruling. Colour `--range-timeline-grid-color`, weight `--range-timeline-grid-width`.
      */
     bordered?: boolean;
+    /**
+     * Controlled ids of the EXPANDED parent rows (same spelling as `Tree expandedValues`). A folded
+     * parent hides every descendant row — label and bar.
+     */
+    expandedValues?: readonly string[];
+    /** Uncontrolled initial expanded parents. Omitted: every parent starts expanded. */
+    defaultExpandedValues?: readonly string[];
+    /** Fires with the next expanded parent ids, for controlled and uncontrolled timelines alike. */
+    onExpandedValuesChange?: (values: string[]) => void;
 };
 /** A horizontal range axis. Units and labels are data; the design system owns all geometry. */
 export declare const RangeTimeline: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
@@ -51,4 +66,13 @@ export declare const RangeTimeline: React.ForwardRefExoticComponent<React.HTMLAt
      * the header-only ruling. Colour `--range-timeline-grid-color`, weight `--range-timeline-grid-width`.
      */
     bordered?: boolean;
+    /**
+     * Controlled ids of the EXPANDED parent rows (same spelling as `Tree expandedValues`). A folded
+     * parent hides every descendant row — label and bar.
+     */
+    expandedValues?: readonly string[];
+    /** Uncontrolled initial expanded parents. Omitted: every parent starts expanded. */
+    defaultExpandedValues?: readonly string[];
+    /** Fires with the next expanded parent ids, for controlled and uncontrolled timelines alike. */
+    onExpandedValuesChange?: (values: string[]) => void;
 } & React.RefAttributes<HTMLElement>>;

package/dist/components/data-display/range-timeline.js

@@ -2,13 +2,67 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
-import { ChevronLeft, ChevronRight, GripVertical } from "lucide-react";
+import { ChevronDown, ChevronLeft, ChevronRight, GripVertical } from "lucide-react";
 import { Button } from "../general/button.js";
 import { Text } from "../general/typography.js";
 import { cn } from "../../lib/utils.js";
 const RangeTimeline = React.forwardRef(
-  function RangeTimeline2({ label, columns, bands, rows, today, onRangeChange, bordered = true, className, ...props }, ref) {
+  function RangeTimeline2({
+    label,
+    columns,
+    bands,
+    rows,
+    today,
+    onRangeChange,
+    bordered = true,
+    expandedValues,
+    defaultExpandedValues,
+    onExpandedValuesChange,
+    className,
+    ...props
+  }, ref) {
     const { t } = useTranslation();
+    const reactId = React.useId();
+    const depthOf = (row) => Math.max(0, Math.floor(row.depth ?? 0));
+    const nested = rows.some((row) => depthOf(row) > 0);
+    const parents = rows.filter((row, index) => index + 1 < rows.length && depthOf(rows[index + 1]) > depthOf(row)).map((row) => row.id);
+    const [collapsed, setCollapsed] = React.useState(
+      () => new Set(
+        defaultExpandedValues ? parents.filter((id) => !defaultExpandedValues.includes(id)) : []
+      )
+    );
+    const isExpanded = (id) => expandedValues ? expandedValues.includes(id) : !collapsed.has(id);
+    const toggleRow = (id) => {
+      const open = !isExpanded(id);
+      if (!expandedValues) {
+        const next = new Set(collapsed);
+        if (open) next.delete(id);
+        else next.add(id);
+        setCollapsed(next);
+      }
+      onExpandedValuesChange?.(
+        parents.filter((parent) => parent === id ? open : isExpanded(parent))
+      );
+    };
+    let foldedAt = null;
+    const visibleRows = rows.filter((row) => {
+      const depth = depthOf(row);
+      if (foldedAt !== null && depth > foldedAt) return false;
+      foldedAt = parents.includes(row.id) && !isExpanded(row.id) ? depth : null;
+      return true;
+    });
+    const siblingsOf = (index) => {
+      const depth = depthOf(visibleRows[index]);
+      let first = index;
+      while (first > 0 && depthOf(visibleRows[first - 1]) >= depth) first -= 1;
+      let size = 0, position = 0;
+      for (let i = first; i < visibleRows.length && depthOf(visibleRows[i]) >= depth; i += 1) {
+        if (depthOf(visibleRows[i]) !== depth) continue;
+        size += 1;
+        if (i === index) position = size;
+      }
+      return { size, position };
+    };
     const units = Math.max(
       1,
       columns.reduce((sum, column) => sum + column.units, 0)
@@ -44,7 +98,10 @@ const RangeTimeline = React.forwardRef(
           "div",
           {
             className: "ui-range-timeline-canvas",
-            style: { "--range-timeline-columns": Math.max(1, columns.length) },
+            style: {
+              "--range-timeline-columns": Math.max(1, columns.length),
+              "--range-timeline-units": units
+            },
             children: [
               bands && bands.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-header", children: [
                 /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", "aria-hidden": "true" }),
@@ -52,7 +109,7 @@ const RangeTimeline = React.forwardRef(
                   "div",
                   {
                     className: "ui-range-timeline-column",
-                    style: { flex: band.units },
+                    style: { gridColumn: `span ${band.units}` },
                     children: /* @__PURE__ */ jsx(Text, { size: "xs", weight: "medium", children: band.label })
                   },
                   index
@@ -64,15 +121,15 @@ const RangeTimeline = React.forwardRef(
                   "div",
                   {
                     className: "ui-range-timeline-column",
-                    style: { flex: column.units },
+                    style: { gridColumn: `span ${column.units}` },
                     children: /* @__PURE__ */ jsx(Text, { size: "xs", children: column.label })
                   },
                   index
                 )) })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-body", children: [
-                (bordered || columns.some((column) => column.muted)) && // Decorative: the same flex/units layout as the header columns, laid once behind every
-                // row so each vertical rule runs the full body height exactly under its header column.
+              /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-body", role: nested ? "list" : void 0, children: [
+                (bordered || columns.some((column) => column.muted)) && // Decorative: the same unit tracks as the header columns, laid once behind every row so
+                // each vertical rule runs the full body height exactly under its header column.
                 /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-grid", "aria-hidden": "true", children: [
                   /* @__PURE__ */ jsx("div", {}),
                   /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", children: columns.map((column, index) => /* @__PURE__ */ jsx(
@@ -80,108 +137,153 @@ const RangeTimeline = React.forwardRef(
                     {
                       className: "ui-range-timeline-grid-column",
                       "data-muted": column.muted ? "true" : void 0,
-                      style: { flex: column.units }
+                      style: { gridColumn: `span ${column.units}` }
                     },
                     index
                   )) })
                 ] }),
-                rows.map((row) => {
+                visibleRows.map((row, index) => {
+                  const idBase = `${reactId}-row-${rows.indexOf(row)}`;
                   const delta = preview?.id === row.id ? preview.delta : 0;
                   const start = Math.min(row.end, row.start + (preview?.edge === "start" ? delta : 0));
                   const end = Math.max(row.start, row.end + (preview?.edge === "end" ? delta : 0));
                   const left = Math.max(0, start), right = Math.min(units, end + 1);
-                  return /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-row", children: [
-                    /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: row.label }),
-                    /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-track", children: [
-                      today != null && today >= 0 && today < units && /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          "aria-hidden": "true",
-                          className: "ui-range-timeline-today",
-                          style: { insetInlineStart: `${(today + 0.5) / units * 100}%` }
-                        }
-                      ),
-                      right <= left && (end < 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "before", children: [
-                        /* @__PURE__ */ jsx(
-                          ChevronLeft,
-                          {
-                            "aria-hidden": "true",
-                            className: "ui-range-timeline-outside-icon"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideBefore") })
-                      ] }) : /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "after", children: [
-                        /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideAfter") }),
-                        /* @__PURE__ */ jsx(
-                          ChevronRight,
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "ui-range-timeline-row",
+                      ...nested && {
+                        role: "listitem",
+                        "aria-level": depthOf(row) + 1,
+                        "aria-setsize": siblingsOf(index).size,
+                        "aria-posinset": siblingsOf(index).position
+                      },
+                      children: [
+                        nested ? /* @__PURE__ */ jsxs(
+                          "div",
                           {
-                            "aria-hidden": "true",
-                            className: "ui-range-timeline-outside-icon"
+                            className: "ui-range-timeline-label",
+                            "data-nested": "true",
+                            style: { "--range-timeline-depth": depthOf(row) },
+                            children: [
+                              parents.includes(row.id) ? /* @__PURE__ */ jsxs(
+                                Button,
+                                {
+                                  variant: "ghost",
+                                  size: "icon-xs",
+                                  className: "ui-range-timeline-disclosure",
+                                  "aria-expanded": isExpanded(row.id),
+                                  "aria-labelledby": `${idBase}-toggle ${idBase}-label`,
+                                  onClick: () => toggleRow(row.id),
+                                  children: [
+                                    /* @__PURE__ */ jsx("span", { id: `${idBase}-toggle`, hidden: true, children: t("rangeTimeline.childRows") }),
+                                    isExpanded(row.id) ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
+                                      ChevronRight,
+                                      {
+                                        "aria-hidden": "true",
+                                        className: "ui-range-timeline-disclosure-collapsed"
+                                      }
+                                    )
+                                  ]
+                                }
+                              ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-range-timeline-disclosure-spacer" }),
+                              /* @__PURE__ */ jsx("div", { id: `${idBase}-label`, className: "ui-range-timeline-label-content", children: row.label })
+                            ]
                           }
-                        )
-                      ] })),
-                      right > left && /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: "ui-range-timeline-bar",
-                          style: {
-                            insetInlineStart: `${left / units * 100}%`,
-                            inlineSize: `${(right - left) / units * 100}%`
-                          },
-                          children: onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
-                            (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
-                          ).map((edge) => /* @__PURE__ */ jsx(
-                            Button,
+                        ) : /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: row.label }),
+                        /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-track", children: [
+                          today != null && today >= 0 && today < units && /* @__PURE__ */ jsx(
+                            "span",
                             {
-                              variant: "ghost",
-                              size: "icon-xs",
-                              className: "ui-range-timeline-handle",
-                              "data-edge": edge,
-                              "aria-label": edge === "start" ? row.startLabel : row.endLabel,
-                              onPointerDown: (event) => {
-                                const width = track.current?.getBoundingClientRect().width ?? 0;
-                                if (!width || event.button !== 0) return;
-                                event.currentTarget.setPointerCapture(event.pointerId);
-                                drag.current = {
-                                  id: row.id,
-                                  edge,
-                                  x: event.clientX,
-                                  width,
-                                  direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
-                                };
-                              },
-                              onPointerMove: (event) => {
-                                if (drag.current)
-                                  setPreview({
-                                    id: drag.current.id,
-                                    edge: drag.current.edge,
-                                    delta: deltaAt(event.clientX)
-                                  });
-                              },
-                              onPointerUp: complete,
-                              onPointerCancel: cancel,
-                              onLostPointerCapture: cancel,
-                              onKeyDown: (event) => {
-                                if (event.key === "Escape") {
-                                  cancel();
-                                  return;
-                                }
-                                const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
-                                if (!step) return;
-                                event.preventDefault();
-                                const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
-                                const delta2 = step * direction;
-                                if (edge === "start" ? row.start + delta2 <= row.end : row.end + delta2 >= row.start)
-                                  onRangeChange(row.id, edge, delta2);
+                              "aria-hidden": "true",
+                              className: "ui-range-timeline-today",
+                              style: { insetInlineStart: `${(today + 0.5) / units * 100}%` }
+                            }
+                          ),
+                          right <= left && (end < 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "before", children: [
+                            /* @__PURE__ */ jsx(
+                              ChevronLeft,
+                              {
+                                "aria-hidden": "true",
+                                className: "ui-range-timeline-outside-icon"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideBefore") })
+                          ] }) : /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "after", children: [
+                            /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideAfter") }),
+                            /* @__PURE__ */ jsx(
+                              ChevronRight,
+                              {
+                                "aria-hidden": "true",
+                                className: "ui-range-timeline-outside-icon"
+                              }
+                            )
+                          ] })),
+                          right > left && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: "ui-range-timeline-bar",
+                              style: {
+                                insetInlineStart: `${left / units * 100}%`,
+                                inlineSize: `${(right - left) / units * 100}%`
                               },
-                              children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
-                            },
-                            edge
-                          ))
-                        }
-                      )
-                    ] })
-                  ] }, row.id);
+                              children: onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
+                                (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
+                              ).map((edge) => /* @__PURE__ */ jsx(
+                                Button,
+                                {
+                                  variant: "ghost",
+                                  size: "icon-xs",
+                                  className: "ui-range-timeline-handle",
+                                  "data-edge": edge,
+                                  "aria-label": edge === "start" ? row.startLabel : row.endLabel,
+                                  onPointerDown: (event) => {
+                                    const width = track.current?.getBoundingClientRect().width ?? 0;
+                                    if (!width || event.button !== 0) return;
+                                    event.currentTarget.setPointerCapture(event.pointerId);
+                                    drag.current = {
+                                      id: row.id,
+                                      edge,
+                                      x: event.clientX,
+                                      width,
+                                      direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
+                                    };
+                                  },
+                                  onPointerMove: (event) => {
+                                    if (drag.current)
+                                      setPreview({
+                                        id: drag.current.id,
+                                        edge: drag.current.edge,
+                                        delta: deltaAt(event.clientX)
+                                      });
+                                  },
+                                  onPointerUp: complete,
+                                  onPointerCancel: cancel,
+                                  onLostPointerCapture: cancel,
+                                  onKeyDown: (event) => {
+                                    if (event.key === "Escape") {
+                                      cancel();
+                                      return;
+                                    }
+                                    const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+                                    if (!step) return;
+                                    event.preventDefault();
+                                    const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+                                    const delta2 = step * direction;
+                                    if (edge === "start" ? row.start + delta2 <= row.end : row.end + delta2 >= row.start)
+                                      onRangeChange(row.id, edge, delta2);
+                                  },
+                                  children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
+                                },
+                                edge
+                              ))
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    row.id
+                  );
                 })
               ] })
             ]

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "27.5.0",
+  "version": "27.7.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -607,6 +607,7 @@
     "trendCurrent": "current"
   },
   "rangeTimeline": {
+    "childRows": "Child rows",
     "outsideAfter": "After the visible range",
     "outsideBefore": "Before the visible range",
     "schedule": "Schedule"

package/dist/i18n/messages/ja.json

@@ -594,6 +594,7 @@
     "trendCurrent": "現在"
   },
   "rangeTimeline": {
+    "childRows": "子の行",
     "outsideAfter": "表示範囲より後",
     "outsideBefore": "表示範囲より前",
     "schedule": "スケジュール"

package/dist/i18n/messages/vi.json

@@ -595,6 +595,7 @@
     "trendCurrent": "hiện tại"
   },
   "rangeTimeline": {
+    "childRows": "Hàng con",
     "outsideAfter": "Sau khoảng đang xem",
     "outsideBefore": "Trước khoảng đang xem",
     "schedule": "Lịch công việc"

package/dist/props/components/data-entry.prop.d.ts

@@ -745,8 +745,9 @@ export type CalendarProp = DayPickerProps & CalendarFooterProp & {
      *
      * Default `true` — the owner's call, from a real screen: with no ruling the month read as a
      * cloud of numbers and was "very hard to read". Pass `bordered={false}` for the floating-button
-     * look. The line colour is `--calendar-grid-border-color` (default `--input`, the ≥3:1 tier;
-     * the decorative `--border` measured 1.15:1 and was invisible as a 1px ruling).
+     * look. The line colour is `--calendar-grid-border-color` (default `--input` at 0.5 alpha,
+     * 1.74:1 light / 1.95:1 dark on the popover; the full `--input` read too dark, and the
+     * decorative `--border` measured 1.15:1 and was invisible as a 1px ruling).
      */
     bordered?: boolean;
     /** Decorate a day cell — 祝日, a booked day, a deadline. @see CalendarCellRenderProp */

package/dist/props/registry.d.ts

@@ -2950,7 +2950,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
         }, {
             readonly field: "rows";
             readonly local: true;
-            readonly reason: "Consumer-supplied interval records preserve true inclusive endpoints independently of clipping.";
+            readonly reason: "Consumer-supplied interval records preserve true inclusive endpoints independently of clipping; optional `depth` nests them (flat, depth-first; a row is a parent when the next row is deeper).";
         }, {
             readonly field: "today";
             readonly local: true;
@@ -2959,6 +2959,18 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "onRangeChange";
             readonly local: true;
             readonly reason: "An endpoint movement command, not an internally owned value; the consumer commits its row data.";
+        }, {
+            readonly field: "expandedValues";
+            readonly local: true;
+            readonly reason: "Controlled expanded parent row ids (gh#724) — the same spelling as `Tree expandedValues` (antd `expandedKeys` / Table `expandedRowKeys`), per docs/DESIGN-AUTHORITY.md.";
+        }, {
+            readonly field: "defaultExpandedValues";
+            readonly local: true;
+            readonly reason: "Uncontrolled initial expanded parents, same spelling as `Tree`; omitted, every parent starts expanded so adding `depth` never hides a row.";
+        }, {
+            readonly field: "onExpandedValuesChange";
+            readonly local: true;
+            readonly reason: "Next expanded parent ids, fired for controlled and uncontrolled timelines alike — the `Tree onExpandedValuesChange` callback.";
         }];
     };
     readonly ResponsiveGridProp: {

package/dist/props/registry.js

@@ -3460,7 +3460,7 @@ const COMPONENT_PROP_REGISTRY = {
       {
         field: "rows",
         local: true,
-        reason: "Consumer-supplied interval records preserve true inclusive endpoints independently of clipping."
+        reason: "Consumer-supplied interval records preserve true inclusive endpoints independently of clipping; optional `depth` nests them (flat, depth-first; a row is a parent when the next row is deeper)."
       },
       {
         field: "today",
@@ -3471,6 +3471,21 @@ const COMPONENT_PROP_REGISTRY = {
         field: "onRangeChange",
         local: true,
         reason: "An endpoint movement command, not an internally owned value; the consumer commits its row data."
+      },
+      {
+        field: "expandedValues",
+        local: true,
+        reason: "Controlled expanded parent row ids (gh#724) \u2014 the same spelling as `Tree expandedValues` (antd `expandedKeys` / Table `expandedRowKeys`), per docs/DESIGN-AUTHORITY.md."
+      },
+      {
+        field: "defaultExpandedValues",
+        local: true,
+        reason: "Uncontrolled initial expanded parents, same spelling as `Tree`; omitted, every parent starts expanded so adding `depth` never hides a row."
+      },
+      {
+        field: "onExpandedValuesChange",
+        local: true,
+        reason: "Next expanded parent ids, fired for controlled and uncontrolled timelines alike \u2014 the `Tree onExpandedValuesChange` callback."
       }
     ]
   },

package/dist/styles/control.css

@@ -2229,13 +2229,13 @@
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day,
   .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
-    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
-    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
+    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-week,
   .ui-calendar[data-bordered="true"] .ui-calendar-weekdays {
-    border-inline-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-inline-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
@@ -2247,7 +2247,7 @@
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-grid {
-    border-block-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-block-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day.invisible {
@@ -2268,8 +2268,8 @@
 
   .ui-calendar[data-bordered="true"] .ui-calendar-week-number,
   .ui-calendar[data-bordered="true"] .ui-calendar-week-number-header {
-    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
-    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
+    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day {

package/dist/styles/data-display-layout.css

@@ -1351,8 +1351,10 @@
     padding: var(--space-2);
     border-inline-end: 1px solid hsl(var(--range-timeline-border-color));
   }
+
   .ui-range-timeline-columns {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(var(--range-timeline-units, 1), minmax(0, 1fr));
   }
   .ui-range-timeline-column {
     min-inline-size: 0;
@@ -1390,12 +1392,12 @@
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-column,
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-label,
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-grid-column {
-    border-inline-end-color: var(--range-timeline-grid-color, hsl(var(--input)));
+    border-inline-end-color: var(--range-timeline-grid-color, hsl(var(--input) / 0.5));
   }
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-header + .ui-range-timeline-header,
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-row {
     border-block-start: var(--range-timeline-grid-width) solid
-      var(--range-timeline-grid-color, hsl(var(--input)));
+      var(--range-timeline-grid-color, hsl(var(--input) / 0.5));
   }
   .ui-range-timeline-outside {
     position: absolute;
@@ -1452,6 +1454,36 @@
     inset-block: 0;
     border-inline-start: 1px solid hsl(var(--primary));
   }
+
+  .ui-range-timeline-label[data-nested="true"] {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding-inline-start: calc(
+      var(--space-2) + var(--range-timeline-depth, 0) * var(--range-timeline-indent-width)
+    );
+  }
+  .ui-range-timeline-label-content {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .ui-range-timeline-disclosure,
+  .ui-range-timeline-disclosure-spacer {
+    flex-shrink: 0;
+  }
+  .ui-range-timeline-disclosure-spacer {
+    inline-size: var(--control-height-xs);
+  }
+
+  @media (pointer: coarse) {
+    .ui-range-timeline-disclosure-spacer {
+      inline-size: var(--control-height-default);
+    }
+  }
+
+  [dir="rtl"] .ui-range-timeline-disclosure-collapsed {
+    transform: scaleX(-1);
+  }
 }
 
 @layer components {

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

@@ -183,4 +183,6 @@
   --range-timeline-grid-width: var(--stroke-hairline);
 
   --range-timeline-muted-column-background: initial;
+
+  --range-timeline-indent-width: var(--space-4);
 }

package/docs/DESIGN-AUTHORITY.md

@@ -298,6 +298,23 @@ 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.
 
+- **`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
+  onto its controlled vocabulary as `expandedValues` / `defaultExpandedValues` /
+  `onExpandedValuesChange`, and a second spelling of the same axis is what
+  `check:prop-vocabulary` exists to prevent — so `RangeTimeline` reuses those three names exactly
+  (the values are row `id`s). The shape is also `Tree`'s: flat rows plus `depth`, the component
+  owns the indent (`--range-timeline-indent-width`) and the disclosure. Two deliberate differences
+  from `Tree`: (1) a row is a parent when the NEXT row is deeper — derived from the depth-first list,
+  never from a `hasChildren` flag, so a disclosure can never promise children that are not there;
+  (2) omitted `defaultExpandedValues` starts every parent EXPANDED (a `Tree` starts closed), so
+  adding `depth` to an existing schedule never hides a row. The disclosure is a real `Button`
+  (the row is not a focusable tree item, so APG's one-tab-stop rule does not apply), and the rows
+  are a `list` of `listitem`s with `aria-level` / `aria-setsize` / `aria-posinset` — the lightest
+  role that carries a level without promising the `tree` / `treegrid` arrow-key model. A timeline
+  with no `depth > 0` keeps its pre-#724 markup byte for byte.
+
 **A knob that only a fork could reach is not parity either.** antd's `components`,
 `filterDropdown`, `classNames`/`styles` semantic maps and `prefixCls` all exist to let a consumer
 replace the rendered markup. This library answers that layer with tokens (cardinal rule #45), so

package/docs/data-display/timeline.tsx

@@ -200,6 +200,42 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>月をまたぐ日単位の軸（bands）</CardTitle>
+            <CardDescription>
+              9月25日から10月7日まで。bands
+              の月の境界は、その月の1日の列の境界にぴったり重なります。
+              始まりが月の途中なので、最初の月の帯は6日分だけの幅です。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RangeTimeline
+              label={t("rangeTimeline.schedule")}
+              bands={[
+                { label: monthLabel(8), units: 6 },
+                { label: monthLabel(9), units: 7 },
+              ]}
+              columns={Array.from({ length: 13 }, (_, index) => {
+                const date = new Date(Date.UTC(2026, 8, 25 + index));
+                return {
+                  label: new Intl.NumberFormat(locale).format(date.getUTCDate()),
+                  units: 1,
+                  muted: date.getUTCDay() === 0 || date.getUTCDay() === 6,
+                };
+              })}
+              rows={[
+                { id: "migration", label: "移行", start: 3, end: 8 },
+                { id: "october", label: "10月の作業", start: 6, end: 12 },
+              ].map((row) => ({
+                ...row,
+                startLabel: dayLabel(25 + row.start),
+                endLabel: dayLabel(25 + row.end),
+              }))}
+            />
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>月単位の軸（列ごとに units が異なる）</CardTitle>
@@ -257,6 +293,47 @@ export default function Demo() {
             />
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>親子のある作業（depth と折りたたみ）</CardTitle>
+            <CardDescription>
+              行を深さ優先の順に並べ、depth
+              を渡すと、ラベルの列の中で段ごとに字下げされます。次の行が
+              より深い行は親になり、開閉ボタンが付きます。「実装」は defaultExpandedValues
+              に含まれていないため折りたたまれており、子の行もそのバーも表示されません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RangeTimeline
+              label={t("rangeTimeline.schedule")}
+              today={4}
+              columns={Array.from({ length: 14 }, (_, 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,
+                };
+              })}
+              defaultExpandedValues={["design", "api"]}
+              rows={[
+                { id: "design", label: "設計", depth: 0, start: 0, end: 5 },
+                { id: "screens", label: "画面設計", depth: 1, start: 0, end: 2 },
+                { id: "api", label: "API設計", depth: 1, start: 2, end: 5 },
+                { id: "endpoints", label: "エンドポイント定義", depth: 2, start: 2, end: 3 },
+                { id: "build", label: "実装", depth: 0, start: 6, end: 12 },
+                { id: "frontend", label: "フロントエンド", depth: 1, start: 6, end: 10 },
+                { id: "backend", label: "バックエンド", depth: 1, start: 6, end: 12 },
+                { id: "release", label: "リリース", depth: 0, start: 13, end: 13 },
+              ].map((row) => ({
+                ...row,
+                startLabel: dayLabel(row.start + 1),
+                endLabel: dayLabel(row.end + 1),
+              }))}
+            />
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/calendar.tsx

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

package/package.json

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

package/scripts/_agent-setup.mjs

@@ -16,12 +16,14 @@ import {
   existsSync,
   mkdirSync,
   readFileSync,
+  realpathSync,
   renameSync,
   statSync,
   unlinkSync,
   writeFileSync,
 } from "node:fs";
-import { basename, dirname, join } from "node:path";
+import { homedir } from "node:os";
+import { basename, dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
 /** This package's own root — the source of the version we stamp with. */
@@ -425,6 +427,83 @@ export function ensureMcpJson(root) {
   return created ? "created" : "added";
 }
 
+/**
+ * Registrations of the catalog server OUTSIDE the project — READ-ONLY (gh#722).
+ *
+ * `.mcp.json` is not the only place an agent's MCP servers come from. Claude Code keeps
+ * user-scoped servers in the top-level `mcpServers` of `~/.claude.json` (under
+ * `$CLAUDE_CONFIG_DIR` when that is set) and local-scoped ones — private to one checkout — under
+ * `projects[<absolute project path>].mcpServers` of the same file. Both are live beside the
+ * project's entry. Measured: a user-scoped `godxjp-ui` serving a ≤ 21.0.0 catalog answered next
+ * to the project's pinned `godx-ui`, and an agent took a removed component's page from it.
+ *
+ * That file belongs to the user, spans every project, and is not ours to edit: this only READS
+ * it. A missing, unreadable or malformed file yields nothing, silently. Returns
+ * `{ key, scope, pin }` per entry — never `env`, which is where secrets live.
+ */
+export function findOutOfProjectUiMcp(
+  root,
+  configDir = process.env.CLAUDE_CONFIG_DIR || homedir(),
+) {
+  try {
+    const read = readJsonFile(join(configDir, ".claude.json"));
+    if (read.state !== "ok") return [];
+    const found = [];
+    const collect = (servers, scope) => {
+      if (!servers || typeof servers !== "object" || Array.isArray(servers)) return;
+      for (const [key, entry] of Object.entries(servers)) {
+        if (!runsUiMcp(entry)) continue;
+        const parts = [entry.command, ...(Array.isArray(entry.args) ? entry.args : [])];
+        const pin = parts.find(
+          (part) => typeof part === "string" && /(^|\/)@godxjp\/ui-mcp(@|$)/.test(part),
+        );
+        found.push({ key, scope, pin });
+      }
+    };
+    collect(read.json.mcpServers, "user");
+    const projects = read.json.projects;
+    if (projects && typeof projects === "object" && !Array.isArray(projects)) {
+      const paths = new Set([resolve(root)]);
+      try {
+        paths.add(realpathSync(root));
+      } catch {
+        // A root that cannot be resolved is looked up by its given path only.
+      }
+      for (const path of paths) collect(projects[path]?.mcpServers, "local");
+    }
+    return found;
+  } catch {
+    return [];
+  }
+}
+
+const shellWord = (word) => (/^[\w.@/-]+$/.test(word) ? word : `'${word.replace(/'/g, "'\\''")}'`);
+
+/**
+ * What `sync-rules` and `init-agent` print about out-of-project registrations: key, pin, that it
+ * was left untouched, and the command that updates it. Empty string when there are none.
+ */
+export function outOfProjectUiMcpReport(root, configDir) {
+  const found = findOutOfProjectUiMcp(root, configDir);
+  if (found.length === 0) return "";
+  const expected = mcpServerFor(root).args[0];
+  let out =
+    `\n  @godxjp/ui → @godxjp/ui-mcp is ALSO registered outside this project, in Claude Code's ` +
+    `.claude.json.\n  It answers beside the project's .mcp.json entry (${expected}) and an agent ` +
+    `can call either — the tool names differ only by the key.\n`;
+  for (const { key, scope, pin } of found) {
+    const k = shellWord(key);
+    const runs = /@godxjp\/ui-mcp@\S+$/.test(pin ?? "")
+      ? pin
+      : `${pin ?? "@godxjp/ui-mcp"} (unpinned: resolves the latest release)`;
+    out +=
+      `    • "${key}" (${scope} scope) runs ${runs} — outside the project, left untouched.\n` +
+      `        remove it:  claude mcp remove ${k} -s ${scope}\n` +
+      `        or re-pin:  claude mcp remove ${k} -s ${scope} && claude mcp add ${k} -s ${scope} -- npx ${expected}\n`;
+  }
+  return out;
+}
+
 /** Ensure `.claude/settings.json` has the audit PostToolUse + workflow SessionStart hooks. */
 export function ensureClaudeHooks(root) {
   const path = join(root, ".claude", "settings.json");

package/scripts/cli.mjs

@@ -34,7 +34,11 @@ const HELP = {
   Refresh the package-owned agent files for the installed @godxjp/ui version: the godx-ui entry in
   .mcp.json, the managed CLAUDE.md block, .claude/godxjp-ui-workflow.md and .ai/rules/godxjp-ui.md.
   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.`,
+  where postinstall never runs and the rules go stale. Silent no-op in CI and when opted out.
+
+  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.`,
   audit: `godxjp-ui audit [dir …] [--changed] [--format json] [--quiet] [--rules]
 
   Static UI-standardization audit over source (regex, no browser, fast). Exits non-zero on errors.

package/scripts/init-agent-kit.mjs

@@ -4,6 +4,7 @@ import {
   ensureClaudeHooks,
   ensureClaudeMd,
   ensureMcpJson,
+  outOfProjectUiMcpReport,
   shouldSkip,
   writeWorkflowMd,
 } from "./_agent-setup.mjs";
@@ -28,6 +29,8 @@ console.log(
 );
 console.log(`    • .claude/godxjp-ui-workflow.md — ${md ? "created" : "already present"}`);
 console.log(`    • CLAUDE.md — godxjp-ui mandate (${claudeMd})`);
+const outside = outOfProjectUiMcpReport(root);
+if (outside) console.log(outside);
 console.log(`
   The auto-audit hook now runs on every Write/Edit of a .tsx file and feeds findings
   back to the agent — it cannot skip the audit. Restart your agent to load the MCP + hooks.

package/scripts/postinstall.mjs

@@ -8,6 +8,7 @@ import {
   ensureClaudeMd,
   ensureMcpJson,
   ensureConsumerRules,
+  outOfProjectUiMcpReport,
   refreshGuineaPigSkill,
   shouldSkip,
   writeWorkflowMd,
@@ -25,6 +26,10 @@ try {
   if (r.startsWith("left untouched") || r.startsWith("present (custom godx-ui")) {
     console.log(`\n  @godxjp/ui → .mcp.json ${r}\n`);
   }
+  // A registration outside the project is reported whatever the project file says, before any of
+  // the quiet exits below: it is live beside ours and nothing here will ever change it (gh#722).
+  const outside = outOfProjectUiMcpReport(root);
+  if (outside) console.log(outside);
   // The mandate is plain text the agent reads every turn (CLAUDE.md block + workflow file). It
   // changes nothing in the dev loop, so it is installed by default: an agent that never saw the
   // but no mandate). Only the hooks — which DO change the loop — stay behind `init-agent`.