@godxjp/ui 31.30.1 → 31.31.1

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

@@ -35,6 +35,8 @@ const RangeTimeline = React.forwardRef(
     defaultLabelWidth,
     onLabelWidthChange,
     busy = false,
+    planLabel: timelinePlanLabel,
+    links,
     className,
     ...props
   }, ref) {
@@ -115,10 +117,42 @@ const RangeTimeline = React.forwardRef(
       const row = rows.find((row2) => row2.id === current.id);
       const delta = deltaAt(event.clientX);
       cancel();
+      if (row?.shape === "milestone") {
+        if (row.end !== null && delta) onRangeChange?.(row.id, "end", delta);
+        return;
+      }
       if (!row || row.start === null || row.end === null) return;
       const bounded = current.edge === "start" ? Math.min(delta, row.end - row.start) : Math.max(delta, row.start - row.end);
       if (bounded) onRangeChange?.(row.id, current.edge, bounded);
     };
+    const rowElements = React.useRef(/* @__PURE__ */ new Map());
+    const bodyRef = React.useRef(null);
+    const [rowCentres, setRowCentres] = React.useState(null);
+    const hasLinks = Boolean(links && links.length > 0);
+    const measureRows = React.useCallback(() => {
+      const body2 = bodyRef.current;
+      if (!body2) return;
+      const y = {};
+      rowElements.current.forEach((element, id) => {
+        y[id] = element.offsetTop + element.offsetHeight / 2;
+      });
+      const rtl = getComputedStyle(body2).direction === "rtl";
+      setRowCentres((previous) => {
+        if (previous && previous.rtl === rtl && Object.keys(previous.y).length === Object.keys(y).length && Object.keys(y).every((id) => previous.y[id] === y[id]))
+          return previous;
+        return { rtl, y };
+      });
+    }, []);
+    React.useLayoutEffect(() => {
+      if (hasLinks) measureRows();
+    });
+    React.useEffect(() => {
+      const body2 = bodyRef.current;
+      if (!hasLinks || !body2 || typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => measureRows());
+      observer.observe(body2);
+      return () => observer.disconnect();
+    }, [hasLinks, measureRows]);
     const canvasStyle = {
       "--range-timeline-columns": Math.max(1, columns.length),
       "--range-timeline-units": units
@@ -196,7 +230,109 @@ const RangeTimeline = React.forwardRef(
       ] }),
       busy && /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-busy", "aria-hidden": "true" })
     ] });
-    const body = /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-body", role: nested ? "list" : void 0, children: [
+    const fractionOf = (row, edge) => {
+      if (row.end === null) return null;
+      if (row.shape === "milestone") return Math.min(1, Math.max(0, (row.end + 0.5) / units));
+      if (edge === "start")
+        return row.start === null ? null : Math.min(1, Math.max(0, row.start / units));
+      return Math.min(1, Math.max(0, (row.end + 1) / units));
+    };
+    const visibleIds = new Set(visibleRows.map((row) => row.id));
+    const drawnLinks = hasLinks ? links.flatMap((link) => {
+      const from = rows.find((row) => row.id === link.from);
+      const to = rows.find((row) => row.id === link.to);
+      if (!from || !to || !visibleIds.has(from.id) || !visibleIds.has(to.id)) return [];
+      const type = link.type ?? "FS";
+      const x1 = fractionOf(from, type[0] === "F" ? "end" : "start");
+      const x2 = fractionOf(to, type[1] === "F" ? "end" : "start");
+      const y1 = rowCentres?.y[from.id];
+      const y2 = rowCentres?.y[to.id];
+      if (x1 === null || x2 === null || y1 === void 0 || y2 === void 0) return [];
+      return [{ link, from, to, type, x1, x2, y1, y2 }];
+    }) : [];
+    const markerBase = `${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}-link-head`;
+    const physical = (fraction) => `${(rowCentres?.rtl ? 1 - fraction : fraction) * 100}%`;
+    const violatedLinks = drawnLinks.filter((drawn) => drawn.link.violated);
+    const linkLayer = hasLinks ? /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-links", children: [
+      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-links-track", children: [
+        /* @__PURE__ */ jsxs("svg", { className: "ui-range-timeline-links-svg", "aria-hidden": "true", focusable: "false", children: [
+          /* @__PURE__ */ jsx("defs", { children: ["normal", "violated"].map((kind) => /* @__PURE__ */ jsx(
+            "marker",
+            {
+              id: `${markerBase}-${kind}`,
+              className: "ui-range-timeline-link-head",
+              "data-violated": kind === "violated" ? "true" : void 0,
+              markerWidth: "8",
+              markerHeight: "8",
+              refX: "8",
+              refY: "4",
+              orient: "auto",
+              markerUnits: "userSpaceOnUse",
+              children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,4 L0,8 z" })
+            },
+            kind
+          )) }),
+          drawnLinks.map((drawn) => {
+            const middle = (drawn.x1 + drawn.x2) / 2;
+            const head = `url(#${markerBase}-${drawn.link.violated ? "violated" : "normal"})`;
+            return /* @__PURE__ */ jsxs(
+              "g",
+              {
+                className: "ui-range-timeline-link",
+                "data-link-id": drawn.link.id,
+                "data-violated": drawn.link.violated ? "true" : void 0,
+                children: [
+                  /* @__PURE__ */ jsx("line", { x1: physical(drawn.x1), y1: drawn.y1, x2: physical(middle), y2: drawn.y1 }),
+                  /* @__PURE__ */ jsx("line", { x1: physical(middle), y1: drawn.y1, x2: physical(middle), y2: drawn.y2 }),
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: physical(middle),
+                      y1: drawn.y2,
+                      x2: physical(drawn.x2),
+                      y2: drawn.y2,
+                      markerEnd: head
+                    }
+                  )
+                ]
+              },
+              drawn.link.id
+            );
+          })
+        ] }),
+        violatedLinks.map((drawn) => {
+          const name = drawn.link.label ? t("rangeTimeline.dependencyViolatedWith", { label: drawn.link.label }) : t("rangeTimeline.dependencyViolated");
+          return /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "ui-range-timeline-link-violation ui-focus-ring",
+                tabIndex: 0,
+                "aria-label": name,
+                style: {
+                  insetInlineStart: `${drawn.x2 * 100}%`,
+                  insetBlockStart: `${drawn.y2}px`
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: name })
+          ] }, drawn.link.id);
+        })
+      ] }),
+      violatedLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: "sr-only", children: violatedLinks.map((drawn) => /* @__PURE__ */ jsxs("li", { children: [
+        t("rangeTimeline.dependencyViolated"),
+        " ",
+        /* @__PURE__ */ jsx("span", { children: drawn.from.label }),
+        " \u2192",
+        " ",
+        /* @__PURE__ */ jsx("span", { children: drawn.to.label }),
+        " (",
+        drawn.type,
+        ")"
+      ] }, drawn.link.id)) })
+    ] }) : null;
+    const body = /* @__PURE__ */ jsxs("div", { ref: bodyRef, 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: [
@@ -213,21 +349,114 @@ const RangeTimeline = React.forwardRef(
       ] }),
       visibleRows.map((row, index) => {
         const idBase = `${reactId}-row-${rows.indexOf(row)}`;
-        const dated = row.start !== null && row.end !== null;
-        const rowStart = row.start ?? 0, rowEnd = row.end ?? 0;
+        const milestone = row.shape === "milestone";
+        const finishOnly = !milestone && row.start === null && row.end !== null;
+        const dated = milestone ? row.end !== null : row.start !== null && row.end !== null;
+        const point = milestone || finishOnly;
+        const rowEnd = row.end ?? 0;
+        const rowStart = point ? rowEnd : row.start ?? 0;
         const delta = preview?.id === row.id ? preview.delta : 0;
-        const start = Math.min(rowEnd, rowStart + (preview?.edge === "start" ? delta : 0));
-        const end = Math.max(rowStart, rowEnd + (preview?.edge === "end" ? delta : 0));
+        const start = point ? rowEnd + (preview?.edge === "end" ? delta : 0) : Math.min(rowEnd, rowStart + (preview?.edge === "start" ? delta : 0));
+        const end = point ? start : Math.max(rowStart, rowEnd + (preview?.edge === "end" ? delta : 0));
         const left = Math.max(0, start), right = Math.min(units, end + 1);
-        const plan = dated && row.plan && row.plan.start !== null && row.plan.end !== null ? row.plan : null;
+        const planStart = row.plan?.start ?? null, planEndKnown = row.plan?.end ?? null;
+        const plan = dated && !milestone && planStart !== null && planEndKnown !== null ? { start: planStart, end: planEndKnown } : null;
+        const planEnd = dated ? milestone ? planEndKnown ?? planStart : planEndKnown : null;
+        const planTick = dated && !milestone && !plan && (planStart !== null || planEndKnown !== null) ? planEndKnown !== null ? planEndKnown + 1 : planStart : null;
         const planLeft = plan ? Math.max(0, plan.start) : 0, planRight = plan ? Math.min(units, plan.end + 1) : 0;
-        const overrun = plan !== null && end > plan.end;
-        const early = plan !== null && end < plan.end;
-        const overrunLeft = overrun ? Math.max(left, Math.min(units, plan.end + 1)) : 0;
+        const overrun = planEnd !== null && end > planEnd;
+        const early = planEnd !== null && end < planEnd;
+        const clampUnit = (value) => Math.min(units, Math.max(0, value));
+        const overrunLeft = !overrun ? 0 : milestone ? clampUnit(planEnd + 0.5) : Math.max(left, Math.min(units, planEnd + 1));
+        const overrunRight = milestone ? clampUnit(end + 0.5) : right;
+        const earlyAt = milestone ? end + 0.5 : right;
+        const rowPlanLabel = row.planLabel ?? timelinePlanLabel;
+        const overrunText = rowPlanLabel ? t("rangeTimeline.overrunVs", { plan: rowPlanLabel, n: String(end - (planEnd ?? 0)) }) : t("rangeTimeline.overrun");
+        const earlyText = rowPlanLabel ? t("rangeTimeline.earlyVs", { plan: rowPlanLabel, n: String((planEnd ?? 0) - end) }) : t("rangeTimeline.early");
+        const barStyle = (inset) => ({
+          ...inset,
+          ...row.color && {
+            "--range-timeline-bar-color": row.color,
+            "--range-timeline-bar-ink": inkOn(row.color)
+          }
+        });
+        const allowsEdge = (edge) => !row.cancelled && !(row.openEnd && edge === "end") && (row.editable === void 0 || row.editable === true ? true : row.editable === false ? false : row.editable[edge] !== false);
+        const grip = (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 (milestone || (edge === "start" ? rowStart + delta2 <= rowEnd : rowEnd + delta2 >= rowStart))
+                onRangeChange?.(row.id, edge, delta2);
+            },
+            children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
+          },
+          edge
+        );
+        const tooltipHit = row.tooltip != null ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ui-range-timeline-bar-hit ui-focus-ring",
+              tabIndex: 0,
+              "aria-labelledby": `${idBase}-label`
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: row.tooltip })
+        ] }) : null;
+        const stateTexts = /* @__PURE__ */ jsxs(Fragment, { children: [
+          row.overdue && /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("rangeTimeline.overdue") }),
+          row.cancelled && /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("rangeTimeline.cancelled") }),
+          row.openEnd && !milestone && /* @__PURE__ */ jsx("span", { className: "sr-only", children: row.openEndLabel ?? t("rangeTimeline.openEnd") })
+        ] });
+        const emphasisText = row.emphasis ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: t(
+          row.emphasis === "critical" ? "rangeTimeline.emphasisCritical" : "rangeTimeline.emphasisWarning"
+        ) }) : null;
         return /* @__PURE__ */ jsxs(
           "div",
           {
             className: "ui-range-timeline-row",
+            "data-emphasis": row.emphasis,
+            ref: links && links.length > 0 ? (element) => {
+              if (element) rowElements.current.set(row.id, element);
+              else rowElements.current.delete(row.id);
+            } : void 0,
             ...nested && {
               role: "listitem",
               "aria-level": depthOf(row) + 1,
@@ -263,15 +492,19 @@ const RangeTimeline = React.forwardRef(
                         ]
                       }
                     ) : /* @__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 })
+                    /* @__PURE__ */ jsx("div", { id: `${idBase}-label`, className: "ui-range-timeline-label-content", children: row.label }),
+                    emphasisText
                   ]
                 }
-              ) : /* @__PURE__ */ jsx(
+              ) : /* @__PURE__ */ jsxs(
                 "div",
                 {
                   className: "ui-range-timeline-label",
                   id: row.tooltip != null ? `${idBase}-label` : void 0,
-                  children: row.label
+                  children: [
+                    row.label,
+                    emphasisText
+                  ]
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-track", children: [
@@ -283,14 +516,22 @@ const RangeTimeline = React.forwardRef(
                     style: { insetInlineStart: `${(today + 0.5) / units * 100}%` }
                   }
                 ),
-                !dated && /* @__PURE__ */ jsx("span", { className: "ui-range-timeline-outside", "data-direction": "none", children: /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.noDates") }) }),
-                dated && right <= left && (end < 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "before", children: [
+                !dated && !finishOnly && row.emptyHint !== false && /* @__PURE__ */ jsx("span", { className: "ui-range-timeline-outside", "data-direction": "none", children: /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: row.emptyHint ?? t("rangeTimeline.noDates") }) }),
+                (dated || finishOnly) && 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" })
                 ] })),
+                finishOnly && right > left && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "ui-range-timeline-finish",
+                    style: barStyle({ insetInlineStart: `${right / units * 100}%` }),
+                    children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: row.startUnknownLabel ?? t("rangeTimeline.startUnknown") })
+                  }
+                ),
                 plan && planRight > planLeft && /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -302,21 +543,37 @@ const RangeTimeline = React.forwardRef(
                     }
                   }
                 ),
-                overrun && right > overrunLeft && /* @__PURE__ */ jsxs(
+                planTick !== null && planTick >= 0 && planTick <= units && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "ui-range-timeline-plan-tick",
+                    style: { insetInlineStart: `${planTick / units * 100}%` }
+                  }
+                ),
+                milestone && planEnd !== null && planEnd >= 0 && planEnd < units && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "ui-range-timeline-plan-diamond",
+                    style: { insetInlineStart: `${(planEnd + 0.5) / units * 100}%` }
+                  }
+                ),
+                overrun && overrunRight > overrunLeft && /* @__PURE__ */ jsxs(
                   "span",
                   {
                     className: "ui-range-timeline-overrun",
                     style: {
                       insetInlineStart: `${overrunLeft / units * 100}%`,
-                      inlineSize: `${(right - overrunLeft) / units * 100}%`
+                      inlineSize: `${(overrunRight - overrunLeft) / units * 100}%`
                     },
                     children: [
-                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("rangeTimeline.overrun") }),
-                      row.varianceLabel !== false && /* @__PURE__ */ jsx("span", { className: "ui-range-timeline-variance", children: row.varianceLabel ?? t("rangeTimeline.lateBy", { n: String(end - plan.end) }) })
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: overrunText }),
+                      row.varianceLabel !== false && /* @__PURE__ */ jsx("span", { className: "ui-range-timeline-variance", children: row.varianceLabel ?? t("rangeTimeline.lateBy", { n: String(end - planEnd) }) })
                     ]
                   }
                 ),
-                dated && !plan && row.planNote != null && right > left && /* @__PURE__ */ jsx(
+                dated && planStart === null && planEndKnown === null && row.planNote != null && right > left && /* @__PURE__ */ jsx(
                   "span",
                   {
                     className: "ui-range-timeline-plan-note",
@@ -324,93 +581,55 @@ const RangeTimeline = React.forwardRef(
                     children: row.planNote
                   }
                 ),
-                early && right > left && right <= units && /* @__PURE__ */ jsx(
+                early && right > left && earlyAt <= units && /* @__PURE__ */ jsx(
                   "span",
                   {
                     className: "ui-range-timeline-early",
-                    style: { insetInlineStart: `${right / units * 100}%` },
-                    children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("rangeTimeline.early") })
+                    style: { insetInlineStart: `${earlyAt / units * 100}%` },
+                    children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: earlyText })
                   }
                 ),
-                dated && right > left && /* @__PURE__ */ jsxs(
+                early && right > left && earlyAt <= units && row.earlyLabel !== false && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "ui-range-timeline-early-label",
+                    style: { insetInlineStart: `${earlyAt / units * 100}%` },
+                    children: row.earlyLabel ?? t("rangeTimeline.earlyBy", { n: String(planEnd - end) })
+                  }
+                ),
+                milestone && dated && right > left && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "ui-range-timeline-milestone",
+                    "data-muted": row.muted ? "true" : void 0,
+                    "data-overdue": row.overdue ? "true" : void 0,
+                    "data-cancelled": row.cancelled ? "true" : void 0,
+                    style: barStyle({ insetInlineStart: `${(end + 0.5) / units * 100}%` }),
+                    children: [
+                      tooltipHit,
+                      stateTexts,
+                      onRangeChange && allowsEdge("end") && grip("end")
+                    ]
+                  }
+                ),
+                !milestone && dated && right > left && /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: "ui-range-timeline-bar",
                     "data-muted": row.muted ? "true" : void 0,
                     "data-overdue": row.overdue ? "true" : void 0,
-                    style: {
+                    "data-cancelled": row.cancelled ? "true" : void 0,
+                    "data-open-end": row.openEnd ? "true" : void 0,
+                    style: barStyle({
                       insetInlineStart: `${left / units * 100}%`,
-                      inlineSize: `${(right - left) / units * 100}%`,
-                      ...row.color && {
-                        "--range-timeline-bar-color": row.color,
-                        "--range-timeline-bar-ink": inkOn(row.color)
-                      }
-                    },
+                      inlineSize: `${(right - left) / units * 100}%`
+                    }),
                     children: [
-                      row.tooltip != null && /* @__PURE__ */ jsxs(Tooltip, { children: [
-                        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            className: "ui-range-timeline-bar-hit ui-focus-ring",
-                            tabIndex: 0,
-                            "aria-labelledby": `${idBase}-label`
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsx(TooltipContent, { children: row.tooltip })
-                      ] }),
-                      row.overdue && /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("rangeTimeline.overdue") }),
+                      tooltipHit,
+                      stateTexts,
                       onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
                         (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
-                      ).filter(
-                        (edge) => row.editable === void 0 || row.editable === true ? true : row.editable === false ? false : row.editable[edge] !== false
-                      ).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" ? rowStart + delta2 <= rowEnd : rowEnd + delta2 >= rowStart)
-                              onRangeChange(row.id, edge, delta2);
-                          },
-                          children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
-                        },
-                        edge
-                      ))
+                      ).filter(allowsEdge).map(grip)
                     ]
                   }
                 )
@@ -419,7 +638,8 @@ const RangeTimeline = React.forwardRef(
           },
           row.id
         );
-      })
+      }),
+      linkLayer
     ] });
     const sectionProps = {
       ...props,

package/dist/components/data-entry/record-picker.js

@@ -20,6 +20,7 @@ import {
 } from "../feedback/dialog.js";
 import { Command, CommandGroup } from "./command.js";
 import { Input } from "./input.js";
+import { isImeComposing } from "../../lib/ime.js";
 import { Select } from "./select.js";
 function selectLoadOptionsFor(loadOptions) {
   if (!loadOptions) return void 0;
@@ -223,6 +224,11 @@ const InlinePicker = React.forwardRef(function InlinePicker2({
               setOpenSuggest(true);
             },
             onFocus: () => setOpenSuggest(true),
+            onKeyDown: (event) => {
+              if (event.key !== "Enter" || isImeComposing(event)) return;
+              event.preventDefault();
+              if (!disabled) setDialogQuery(query);
+            },
             className: "ui-record-picker-inline-input",
             id,
             "data-field": fieldName,

package/dist/components/ui/segmented.js

@@ -39,6 +39,8 @@ const Segmented = React.forwardRef(function Segmented2({
   name,
   id,
   className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsx(
@@ -56,6 +58,8 @@ const Segmented = React.forwardRef(function Segmented2({
       onChange: onValueChange,
       isDisabled: disabled,
       name,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
       ...props,
       children: options.map((option) => /* @__PURE__ */ jsxs(
         AriaRadio,

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": "31.30.1",
+  "version": "31.31.1",
   "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

@@ -771,7 +771,17 @@
     "overdue": "Overdue",
     "overrun": "Over the plan",
     "early": "Ahead of the plan",
-    "lateBy": "+{n}d"
+    "lateBy": "+{n}d",
+    "startUnknown": "Start unknown",
+    "openEnd": "Completion not recorded",
+    "cancelled": "Cancelled",
+    "overrunVs": "{n}d behind {plan}",
+    "earlyVs": "{n}d ahead of {plan}",
+    "earlyBy": "-{n}d",
+    "dependencyViolated": "Dependency violated",
+    "dependencyViolatedWith": "Dependency violated: {label}",
+    "emphasisWarning": "At risk",
+    "emphasisCritical": "Critical path"
   },
   "chat": {
     "bubble": {

package/dist/i18n/messages/ja.json

@@ -746,7 +746,17 @@
     "overdue": "期限超過",
     "overrun": "予定超過",
     "early": "予定より早く完了",
-    "lateBy": "+{n}日"
+    "lateBy": "+{n}日",
+    "startUnknown": "開始日不明",
+    "openEnd": "完了未記録",
+    "cancelled": "中止",
+    "overrunVs": "{plan}より{n}日遅れ",
+    "earlyVs": "{plan}より{n}日早い",
+    "earlyBy": "-{n}日",
+    "dependencyViolated": "依存関係の違反",
+    "dependencyViolatedWith": "依存関係の違反：{label}",
+    "emphasisWarning": "要注意",
+    "emphasisCritical": "クリティカルパス"
   },
   "chat": {
     "bubble": {

package/dist/i18n/messages/vi.json

@@ -747,7 +747,17 @@
     "overdue": "Quá hạn",
     "overrun": "Vượt kế hoạch",
     "early": "Sớm hơn kế hoạch",
-    "lateBy": "+{n} ngày"
+    "lateBy": "+{n} ngày",
+    "startUnknown": "Chưa rõ ngày bắt đầu",
+    "openEnd": "Chưa ghi nhận hoàn thành",
+    "cancelled": "Đã hủy",
+    "overrunVs": "Chậm {n} ngày so với {plan}",
+    "earlyVs": "Sớm {n} ngày so với {plan}",
+    "earlyBy": "-{n} ngày",
+    "dependencyViolated": "Vi phạm phụ thuộc",
+    "dependencyViolatedWith": "Vi phạm phụ thuộc: {label}",
+    "emphasisWarning": "Có rủi ro",
+    "emphasisCritical": "Đường găng"
   },
   "chat": {
     "bubble": {