@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/date-timeline/DateTimeline.js

@@ -0,0 +1,358 @@
+import { jsxs as r, jsx as o, Fragment as Ke } from "react/jsx-runtime";
+import { useRef as Xe, useMemo as u, Fragment as U } from "react";
+import { cn as w } from "../../lib/cn.js";
+import { dateFormat as R } from "../../lib/intl-cache.js";
+import { assertPxPerDay as Se, assertMarkers as Be, timelineRange as Oe, unitTicks as Pe, trackWidth as Ce, instantToX as X, addDays as ae, layoutMarkerTags as Ge, layoutMarkerFlags as We, fromDayNumber as Fe, quarterOf as $e, yearOf as le, ZOOM_SLIDER_MAX as je, sliderToPxPerDay as He, pxPerDayToSlider as Ie, tickUnitFor as qe, scrollLeftToCenter as Ue, markerTagTop as Ze } from "../../lib/date-timeline/scale.js";
+import { Badge as ce } from "../Badge.js";
+import { Button as Ve } from "../Button.js";
+import { Tooltip as Ye } from "../Popover.js";
+import { Slider as Je } from "../Slider.js";
+import { Spinner as Qe } from "../Spinner.js";
+import { TimelineRow as ke } from "./TimelineRow.js";
+import { useBarDrag as et } from "./useBarDrag.js";
+import { useMarkerDrag as tt } from "./useMarkerDrag.js";
+import { useTimelineZoom as ot } from "./useTimelineZoom.js";
+import { useUiLocale as nt, useUiStrings as st } from "../../lib/i18n/provider.js";
+const it = 160, rt = [], at = 7, lt = 20, de = 4, Z = 18, ct = 2, dt = "border border-(--marker-color) bg-surface text-primary", V = (s) => s.color === void 0 ? void 0 : { "--marker-color": s.color }, ut = 12, ue = (s, n) => s.length * at + lt + (n ? ut : 0), bt = 2, Y = 26, be = 4, ft = 8, mt = 36, ht = 40, fe = 1, S = 2, me = "block min-w-0 max-w-full truncate rounded-l-none", he = (s, n) => {
+  const A = n ? "var(--marker-color)" : "var(--accent)";
+  return s === "dashed" ? { width: S, marginLeft: -S / 2, background: `repeating-linear-gradient(to bottom, ${A} 0 6px, transparent 6px 10px)` } : { width: fe, marginLeft: -fe / 2, background: A };
+};
+function pe({ pending: s, savingLabel: n }) {
+  return s ? /* @__PURE__ */ o(Qe, { size: "xs", label: n, className: "shrink-0" }) : /* @__PURE__ */ r("svg", { "aria-hidden": !0, viewBox: "0 0 6 10", className: "h-2.5 w-1.5 shrink-0 fill-current opacity-70", children: [
+    /* @__PURE__ */ o("circle", { cx: "1", cy: "1.5", r: "0.9" }),
+    /* @__PURE__ */ o("circle", { cx: "5", cy: "1.5", r: "0.9" }),
+    /* @__PURE__ */ o("circle", { cx: "1", cy: "5", r: "0.9" }),
+    /* @__PURE__ */ o("circle", { cx: "5", cy: "5", r: "0.9" }),
+    /* @__PURE__ */ o("circle", { cx: "1", cy: "8.5", r: "0.9" }),
+    /* @__PURE__ */ o("circle", { cx: "5", cy: "8.5", r: "0.9" })
+  ] });
+}
+function J({ marker: s }) {
+  return s.color === void 0 ? /* @__PURE__ */ o(ce, { tone: "accent", size: "sm", className: me, children: s.label }) : /* @__PURE__ */ o(ce, { color: s.color, size: "sm", className: me, children: s.label });
+}
+function zt({
+  items: s,
+  pxPerDay: n,
+  onPxPerDayChange: A,
+  onItemActivate: ye,
+  onItemChange: B,
+  today: Q,
+  markers: b = rt,
+  onMarkerChange: O,
+  onMarkerActivate: N,
+  weekStartsOn: k = 1,
+  hideLabelColumn: E = !1,
+  markerPlacement: ge = "header",
+  markerBandCaption: P,
+  lineStyle: T = "solid",
+  toolbar: ve,
+  empty: ee,
+  className: xe
+}) {
+  const f = nt(), l = st().dateTimeline, C = Xe(null), m = E ? 0 : it;
+  if (!B && s.some((e) => e.editable)) throw new Error("timeline: an editable item needs onItemChange");
+  if (!O && b.some((e) => e.editable)) throw new Error("timeline: an editable marker needs onMarkerChange");
+  const y = ge === "band";
+  if (y && P === void 0) throw new Error("timeline: markerPlacement band needs markerBandCaption");
+  const D = b.some((e) => e.pending === !0), G = u(() => Q ?? /* @__PURE__ */ new Date(), [Q]);
+  Se(n), Be(b);
+  const h = qe(n), a = u(
+    () => Oe(
+      s,
+      G,
+      h,
+      k,
+      b.map((e) => e.date)
+    ),
+    [s, G, h, k, b]
+  ), { drag: W, startDrag: we, consumeSwallowedClick: Ne } = et(s, n, B), { drag: F, startDrag: te, consumeSwallowedClick: _e, clearSwallowedClick: Re } = tt(b, n, a, O), oe = u(() => Pe(a, h, n), [a, h, n]), g = Ce(a, n), $ = X(G, a.startDay, n), p = u(
+    () => b.map((e) => F?.id === e.id ? { ...e, date: ae(e.date, F.days) } : e),
+    [b, F]
+  ), Ae = u(
+    () => p.map((e) => ({ marker: e, x: X(e.date, a.startDay, n), colored: e.color !== void 0 })),
+    [p, a, n]
+  ), ne = u(() => {
+    if (y) return [];
+    const e = p.map((t) => ({ x: X(t.date, a.startDay, n), width: ue(t.label, t.editable === !0) }));
+    return Ge(e, g, de).map(({ index: t, left: i, row: c }) => {
+      const d = p[t];
+      return { marker: d, x: e[t].x, tagWidth: e[t].width, left: i, row: c, colored: d.color !== void 0, style: V(d) };
+    });
+  }, [y, p, a, n, g]), j = u(() => {
+    if (!y) return [];
+    const e = p.map((t) => ({ x: X(t.date, a.startDay, n), width: ue(t.label, t.editable === !0) }));
+    return We(e, bt, de, mt).map(({ index: t, lane: i, maxWidth: c }) => ({
+      marker: p[t],
+      x: e[t].x,
+      lane: i,
+      maxWidth: c
+    }));
+  }, [y, p, a, n]), Ee = ne.reduce((e, t) => Math.max(e, t.row + 1), 0), se = j.reduce((e, t) => Math.max(e, t.lane + 1), 0), M = se === 0 ? 0 : se * Y + ft, Te = (e) => (t) => {
+    t.key !== "ArrowLeft" && t.key !== "ArrowRight" || (t.preventDefault(), O?.(e.id, ae(e.date, t.key === "ArrowLeft" ? -1 : 1)));
+  }, H = u(() => R(f, { dateStyle: "medium" }), [f]), De = u(() => R(f, { weekday: "short", month: "short", day: "numeric", year: "numeric" }), [f]), L = (e, t) => /* @__PURE__ */ o(Ye, { content: e.tooltip ?? `${e.label}, ${e.dateLabel ?? De.format(e.date)}`, children: t }), ie = (e) => ({
+    onClick: (t) => {
+      _e() || N?.(e.id, t.currentTarget);
+    },
+    onKeyDown: (t) => {
+      (t.key === "Enter" || t.key === " ") && Re(), Te(e)(t);
+    }
+  }), v = (e) => e.editable ? l.markerHandle(e.label, H.format(e.date)) : `${e.label}, ${H.format(e.date)}`, Me = u(() => {
+    const e = R(f, { month: "short" }), t = R(f, { month: "short", day: "numeric" }), i = R(f, { year: "numeric" });
+    return (c, d) => {
+      const z = Fe(c.startDay), x = i.format(z);
+      if (h === "quarters") return { primary: l.quarter($e(c.startDay), x), secondary: null };
+      const _ = d || le(c.startDay) !== le(c.startDay - 1);
+      return { primary: (h === "months" ? e : t).format(z), secondary: _ ? x : null };
+    };
+  }, [f, h, l]), re = () => {
+    const e = C.current;
+    e && (e.scrollLeft = Ue($, e.clientWidth, m));
+  }, I = s.length === 0, { zoomTo: Le, onKeyDown: ze } = ot({ scroller: C, pxPerDay: n, range: a, labelWidth: m, isEmpty: I, onPxPerDayChange: A, centerOnToday: re });
+  return /* @__PURE__ */ r("div", { className: w("flex min-w-0 flex-col gap-2", xe), onKeyDown: ze, children: [
+    /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+      /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ o(
+          Je,
+          {
+            size: "sm",
+            label: l.zoomLabel,
+            min: 0,
+            max: je,
+            step: 1,
+            value: Math.round(Ie(n)),
+            format: () => l.unit[h],
+            tooltip: "never",
+            onValueChange: (e) => {
+              if (typeof e != "number") throw new Error("timeline: the zoom slider is a single value");
+              Le(He(e));
+            },
+            className: "w-56 max-w-full"
+          }
+        ),
+        ve
+      ] }),
+      /* @__PURE__ */ o(Ve, { size: "sm", variant: "ghost", onClick: re, children: l.goToToday })
+    ] }),
+    I && ee === void 0 ? /* @__PURE__ */ o("p", { className: "rounded-md border border-border px-3 py-6 text-center text-sm text-secondary", children: l.empty }) : /* @__PURE__ */ o(
+      "div",
+      {
+        ref: C,
+        role: "region",
+        "aria-label": l.label,
+        tabIndex: 0,
+        className: "relative overflow-x-auto [container-type:inline-size] rounded-md border border-border bg-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand",
+        children: /* @__PURE__ */ r("div", { className: "relative", style: { width: m + g }, children: [
+          y && M > 0 && /* @__PURE__ */ r("div", { className: "flex border-b border-border bg-surface-inset", style: { height: M }, children: [
+            E ? (
+              /* DXUI-72: with no label column the caption sits inside the band at its left edge, pinned there while the dates scroll; a flag passing under it is hidden. */
+              /* @__PURE__ */ o("div", { className: "sticky left-0 z-20 w-0 shrink-0", children: /* @__PURE__ */ o(
+                "span",
+                {
+                  className: "absolute left-0 flex items-center bg-surface-inset px-2 text-xs font-semibold whitespace-nowrap text-secondary",
+                  style: { top: be, height: Y },
+                  children: P
+                }
+              ) })
+            ) : /* @__PURE__ */ o(
+              "div",
+              {
+                className: "sticky left-0 z-20 flex shrink-0 items-center border-r border-border bg-surface-inset px-3 text-xs font-semibold text-secondary",
+                style: { width: m },
+                children: P
+              }
+            ),
+            /* @__PURE__ */ o("div", { className: "relative shrink-0", style: { width: g }, children: j.map(({ marker: e, x: t, lane: i, maxWidth: c }) => /* @__PURE__ */ o(
+              "div",
+              {
+                className: "absolute z-10 flex items-stretch",
+                style: {
+                  left: t - S / 2,
+                  top: be + i * Y,
+                  maxWidth: c,
+                  borderLeft: `${S}px solid ${e.color ?? "var(--accent)"}`
+                },
+                children: L(
+                  e,
+                  e.editable ? /* @__PURE__ */ r(
+                    "button",
+                    {
+                      type: "button",
+                      "data-marker-handle": !0,
+                      disabled: D,
+                      "aria-busy": e.pending === !0 || void 0,
+                      "aria-label": v(e),
+                      className: w(
+                        "flex min-w-0 items-center gap-1 touch-none select-none focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand",
+                        D ? "cursor-default" : "cursor-grab active:cursor-grabbing"
+                      ),
+                      onPointerDown: (d) => te(d, e),
+                      ...ie(e),
+                      children: [
+                        /* @__PURE__ */ o(pe, { pending: e.pending === !0, savingLabel: l.markerSaving }),
+                        /* @__PURE__ */ o(J, { marker: e })
+                      ]
+                    }
+                  ) : N ? /* @__PURE__ */ o(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": v(e),
+                      className: "flex min-w-0 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand",
+                      onClick: (d) => N(e.id, d.currentTarget),
+                      children: /* @__PURE__ */ o(J, { marker: e })
+                    }
+                  ) : /* @__PURE__ */ o("span", { role: "img", tabIndex: 0, "aria-label": v(e), className: "flex min-w-0 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand", children: /* @__PURE__ */ o(J, { marker: e }) })
+                )
+              },
+              e.id
+            )) })
+          ] }),
+          y && M > 0 && j.map(({ marker: e, x: t }) => /* @__PURE__ */ o(
+            "span",
+            {
+              "aria-hidden": !0,
+              "data-line-style": T,
+              className: "pointer-events-none absolute top-0",
+              style: { ...V(e), ...he(T, e.color !== void 0), left: m + t, height: M + ht }
+            },
+            `seg-${e.id}`
+          )),
+          /* @__PURE__ */ r("div", { className: "flex border-b border-border", children: [
+            !E && /* @__PURE__ */ o(
+              "div",
+              {
+                className: "sticky left-0 z-20 shrink-0 border-r border-border bg-surface px-3 py-2 text-xs font-semibold text-secondary",
+                style: { width: m },
+                children: l.itemColumn
+              }
+            ),
+            /* @__PURE__ */ r("div", { className: "relative h-10 shrink-0", style: { width: g, marginTop: Ee * Z }, children: [
+              oe.map((e, t) => {
+                const i = Me(e, t === 0);
+                return /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: "absolute top-0 flex h-full flex-col justify-center overflow-hidden border-l border-border px-2 text-xs leading-tight text-secondary",
+                    style: { left: e.x, width: e.width },
+                    children: [
+                      /* @__PURE__ */ o("span", { className: "truncate font-medium", children: i.primary }),
+                      i.secondary && /* @__PURE__ */ o("span", { className: "truncate text-2xs text-muted-text", children: i.secondary })
+                    ]
+                  },
+                  e.startDay
+                );
+              }),
+              /* @__PURE__ */ o(
+                "span",
+                {
+                  className: "absolute top-0 z-10 -translate-x-1/2 rounded-b-sm bg-danger px-1 text-2xs font-semibold text-danger-contrast",
+                  style: { left: $ },
+                  children: l.today
+                }
+              ),
+              ne.map(({ marker: e, left: t, row: i, tagWidth: c, colored: d, style: z }) => {
+                const x = w(
+                  "absolute z-10 flex items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-t-sm text-2xs font-semibold",
+                  d ? dt : "bg-accent text-accent-contrast"
+                ), _ = { ...z, left: t, width: c, top: Ze(i, Z), height: Z - ct }, K = /* @__PURE__ */ r(Ke, { children: [
+                  d && /* @__PURE__ */ o("span", { "aria-hidden": !0, className: "size-1.5 shrink-0 rounded-full bg-(--marker-color)" }),
+                  /* @__PURE__ */ o("span", { className: "truncate", children: e.label })
+                ] });
+                return e.editable ? /* @__PURE__ */ o(U, { children: L(
+                  e,
+                  /* @__PURE__ */ r(
+                    "button",
+                    {
+                      type: "button",
+                      "data-marker-handle": !0,
+                      disabled: D,
+                      "aria-busy": e.pending === !0 || void 0,
+                      "aria-label": v(e),
+                      className: w(
+                        x,
+                        D ? "cursor-default" : "cursor-grab touch-none select-none active:cursor-grabbing",
+                        "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand"
+                      ),
+                      style: _,
+                      onPointerDown: (q) => te(q, e),
+                      ...ie(e),
+                      children: [
+                        /* @__PURE__ */ o(pe, { pending: e.pending === !0, savingLabel: l.markerSaving }),
+                        K
+                      ]
+                    }
+                  )
+                ) }, e.id) : N ? /* @__PURE__ */ o(U, { children: L(
+                  e,
+                  /* @__PURE__ */ o(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": v(e),
+                      className: w(x, "cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand"),
+                      style: _,
+                      onClick: (q) => N(e.id, q.currentTarget),
+                      children: K
+                    }
+                  )
+                ) }, e.id) : /* @__PURE__ */ o(U, { children: L(
+                  e,
+                  /* @__PURE__ */ o(
+                    "span",
+                    {
+                      role: "img",
+                      tabIndex: 0,
+                      "aria-label": v(e),
+                      className: w(x, "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand"),
+                      style: _,
+                      children: K
+                    }
+                  )
+                ) }, e.id);
+              })
+            ] })
+          ] }),
+          /* @__PURE__ */ r("div", { className: "relative", children: [
+            /* @__PURE__ */ r("div", { "aria-hidden": !0, className: "pointer-events-none absolute inset-y-0 z-0", style: { left: m, width: g }, children: [
+              oe.map((e) => /* @__PURE__ */ o("span", { className: "absolute inset-y-0 border-l border-border/60", style: { left: e.x } }, e.startDay)),
+              Ae.map(({ marker: e, x: t, colored: i }) => /* @__PURE__ */ o(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  "data-line-style": T,
+                  className: "absolute inset-y-0",
+                  style: { ...V(e), ...he(T, i), left: t }
+                },
+                e.id
+              )),
+              /* @__PURE__ */ o("span", { className: "absolute inset-y-0 w-px bg-danger", style: { left: $ } })
+            ] }),
+            s.map((e) => /* @__PURE__ */ o(
+              ke,
+              {
+                item: e,
+                range: a,
+                pxPerDay: n,
+                trackWidth: g,
+                labelWidth: m,
+                hideLabelColumn: E,
+                day: H,
+                dragging: W?.id === e.id && W.active ? W : null,
+                onPress: we,
+                consumeSwallowedClick: Ne,
+                onActivate: ye,
+                onChange: B
+              },
+              e.id
+            )),
+            I && /* @__PURE__ */ o("div", { className: "sticky left-0 z-10 flex min-h-64 w-[100cqw] items-center justify-center p-4", children: ee })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  zt as DateTimeline
+};
+//# sourceMappingURL=DateTimeline.js.map

package/dist/components/date-timeline/DateTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeline.js","sources":["../../../src/components/date-timeline/DateTimeline.tsx"],"sourcesContent":["import { Fragment, useMemo, useRef, type CSSProperties, type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiLocale, useUiStrings } from \"../../lib/i18n\";\nimport { dateFormat } from \"../../lib/intl-cache\";\nimport {\n  ZOOM_SLIDER_MAX,\n  assertMarkers,\n  assertPxPerDay,\n  addDays,\n  fromDayNumber,\n  instantToX,\n  layoutMarkerFlags,\n  layoutMarkerTags,\n  markerTagTop,\n  pxPerDayToSlider,\n  quarterOf,\n  scrollLeftToCenter,\n  sliderToPxPerDay,\n  tickUnitFor,\n  timelineRange,\n  trackWidth,\n  unitTicks,\n  yearOf,\n  type Tick,\n} from \"../../lib/date-timeline/scale\";\nimport { Badge } from \"../Badge\";\nimport { Button } from \"../Button\";\nimport type { IconStackTone } from \"../IconStack\";\nimport { Tooltip } from \"../Popover\";\nimport { Slider } from \"../Slider\";\nimport { Spinner } from \"../Spinner\";\nimport { TimelineRow } from \"./TimelineRow\";\nimport { useBarDrag } from \"./useBarDrag\";\nimport { useMarkerDrag } from \"./useMarkerDrag\";\nimport { useTimelineZoom } from \"./useTimelineZoom\";\n\n/* ============================================================================\n   TIMELINE (DXUI-45) — rows of items drawn as bars from start to end on a\n   horizontal date axis.\n\n   DATA ONLY. It knows nothing about what an item is: a `label`, a span, an\n   optional tone, progress and a `meta` slot. The host owns what a click does.\n\n   TWO COLUMNS, ONE SCROLLER. The label column is `position: sticky` inside the\n   same scrolling box as the dates, so a row's label and its bar can never drift\n   apart, and the dates scroll sideways under the labels (`hideLabelColumn` drops\n   the column and leaves the dates). The grid lines and the today line are ONE\n   overlay over the whole body rather than a segment per row.\n\n   OPENS ON TODAY. The scroll position is set before first paint so a viewer\n   never sees the far-left edge first. The arithmetic is `lib/date-timeline/scale.ts`.\n\n   ZOOM (DXUI-61, DEC-129). The scale is `pxPerDay`, continuous and controlled, and the\n   axis picks its tick unit (day, week, month, quarter) from it. Three inputs move it,\n   all together: Ctrl/Cmd + wheel (or a pinch) over the dates, Ctrl/Cmd + plus, minus and 0\n   while focus is inside, and the slider above. The page's own zoom is taken over only\n   there (DEC-130): the wheel only over the dates, the keys only with focus inside. A zoom\n   keeps one date still: under the pointer for the wheel, at the visible center otherwise.\n\n   A bar is a button, drawn at its true length to the day (DXUI-60). One too\n   narrow for its label shows it, and its meta, to the right of the bar as a tag\n   that belongs to the same button. Its accessible name carries the dates, because\n   the dates are drawn only as position and a screen-reader user has no x axis.\n\n   EDITING (DXUI-60). An item marked `editable` drags by its body (start and end\n   move together), its right edge (end only) and its left edge (start only),\n   snapping to whole days at every zoom; the one `onItemChange` fires once, on\n   release. The arrow keys do the same on the focused bar (arrows move, Shift+arrow\n   moves the end, Alt+arrow moves the start, a day per press). Escape during a\n   drag cancels it.\n\n   EDITABLE MARKERS (DXUI-67). A marker marked `editable` draws its tag as a grip-and-label\n   button: dragging it moves the line and the tag with the pointer, snapped to whole days and\n   kept on the axis, and `onMarkerChange(id, date)` fires once, on release. Left and right\n   arrows on the focused tag move it a day. Escape during a drag cancels it. `useMarkerDrag`.\n   ============================================================================ */\n\nexport interface DateTimelineMarker {\n  id: string;\n  date: Date;\n  /** Shown as the tag in the date header and in the line's accessible name, with its date. */\n  label: string;\n  /** Any CSS color, as Badge's `color` takes: the line, the tag's border and its swatch are drawn in it; the label is always the theme's text on an opaque surface, so it is legible in both themes whatever the color. The accent tone when omitted. */\n  color?: string;\n  /** The marker's tag is a drag handle (and takes the arrow keys); needs the timeline's `onMarkerChange`. */\n  editable?: boolean;\n  /**\n   * A save is in flight for this marker (DEC-111): its handle spins and cannot be dragged, and while any marker is pending every\n   * other handle is disabled until the answer is handled. Only meaningful on an `editable` marker.\n   */\n  pending?: boolean;\n  /**\n   * The long-form date shown after the label in the marker's tooltip (for example \"Wed, Nov 4, 2026\"). The component formats the marker's\n   * date in the locale when omitted; pass it when the caller has its own formatting for the date.\n   */\n  dateLabel?: string;\n  /**\n   * The marker's whole tooltip text (DXUI-73), shown exactly as given in place of `<label>, <date>`. Pass it when the label already\n   * holds part of what the tooltip should say (a short date), so the date is not repeated. `dateLabel` is ignored when this is set.\n   */\n  tooltip?: string;\n}\n\n/** Where a marker's label goes: a tag in the date header (the default) or a flag in its own band above the header (DXUI-68). */\nexport type DateTimelineMarkerPlacement = \"header\" | \"band\";\n\n/** A marker's line: 1px solid (the default) or 2px dashed, six pixels of color then four of gap (the approved design, DX-6451). */\nexport type DateTimelineMarkerLineStyle = \"solid\" | \"dashed\";\n\nexport type DateTimelineTone = IconStackTone;\n\nexport interface DateTimelineItem {\n  id: string;\n  label: string;\n  start: Date;\n  /** Must not be before `start`. */\n  end: Date;\n  tone?: DateTimelineTone;\n  /** 0..1 of the bar filled. */\n  progress?: number;\n  /** A small chip drawn at the right of the bar's label. Static content only: the bar is itself a button. */\n  meta?: ReactNode;\n  /** A second end instant (a plan's planned end), drawn as a marker on the row apart from the bar's end; both dates are in the bar's name and tooltip. */\n  plannedEnd?: Date;\n  /** The bar can be dragged and moved with the keyboard; needs the timeline's `onItemChange`. */\n  editable?: boolean;\n}\n\n/** An edited item's new dates, to the day: the time of day each end had is kept. */\nexport type DateTimelineChange = (id: string, start: Date, end: Date) => void;\n\nexport interface DateTimelineProps {\n  items: readonly DateTimelineItem[];\n  /**\n   * The scale, in pixels per calendar day, from 1 to 120 (DXUI-61); controlled, like a value. The axis ticks by day, week, month or\n   * quarter depending on it. Hold it in state and set it from `onPxPerDayChange`; `DEFAULT_PX_PER_DAY` (12) is a good start. A value\n   * outside the range throws.\n   */\n  pxPerDay: number;\n  /** Called with the new scale when the person zooms: Ctrl (or Cmd) + wheel or pinch over the timeline, Ctrl + plus / minus / 0 inside it, or the slider. */\n  onPxPerDayChange: (pxPerDay: number) => void;\n  onItemActivate: (id: string) => void;\n  /** Called once, on release (or per key press), with the item id and its new start and end. Required when any item is `editable`. */\n  onItemChange?: DateTimelineChange;\n  /** The instant the today line marks; the clock when omitted. Pass a fixed one in tests and demos. */\n  today?: Date;\n  /**\n   * Named dates drawn like the today line (DXUI-64): a full-height line under the bars and a tag with the label in the date\n   * header, in the accent tone instead of today's red. They widen the axis, so a marker outside every bar is still shown.\n   * Tags that would overlap, on the same day or close, stack in rows.\n   */\n  markers?: readonly DateTimelineMarker[];\n  /**\n   * Called with a marker's id and its label's element when the label is clicked or activated with Enter or Space (DXUI-69). The element\n   * lets the caller anchor a popover to it (DXUI-70). Every marker's label then becomes a button, so the caller can open its own editor.\n   * A drag of an `editable` marker's handle never also activates it.\n   */\n  onMarkerActivate?: (id: string, anchorEl: HTMLElement) => void;\n  /** Called once, on release (or per key press), with an `editable` marker's id and its new date, to the day (its time of day kept). Required when any marker is `editable`. */\n  onMarkerChange?: (id: string, date: Date) => void;\n  /** Where the markers' labels are drawn: `\"header\"` (default) as tags in the date header, or `\"band\"` as flags in a Phases band above it, which needs `markerBandCaption`. */\n  markerPlacement?: DateTimelineMarkerPlacement;\n  /** The caption of the band above the date header (for example \"Phases\"); required with `markerPlacement: \"band\"`. */\n  markerBandCaption?: string;\n  /** How each marker's line is drawn. `\"solid\"` (default) is the 1px line; `\"dashed\"` is 2px. The today line is always solid. */\n  lineStyle?: DateTimelineMarkerLineStyle;\n  /** First day of the week on the weeks axis: 0 = Sunday ... 6 = Saturday. Default Monday. */\n  weekStartsOn?: number;\n  /** Hide the sticky column of item labels, leaving the dates axis; each bar keeps its own label. */\n  hideLabelColumn?: boolean;\n  /** The caller's own controls (a button, a menu), drawn in the control row right beside the zoom slider. */\n  toolbar?: ReactNode;\n  /**\n   * What to show when `items` is empty (DXUI-72). Left out, the timeline is replaced by the plain \"no items\" sentence. Given, the whole\n   * timeline stays (dates, today line, markers, band, toolbar) and this is centered in the visible part of its body, staying put as it scrolls sideways.\n   */\n  empty?: ReactNode;\n  className?: string;\n}\n\n/** Width of the sticky label column (0 when hidden); the same number positions the scroll. */\nconst LABEL_COLUMN_PX = 160;\nconst NO_MARKERS: readonly DateTimelineMarker[] = [];\n/* A marker tag's width is estimated from its label (text-2xs semibold, about 7px a character) plus its padding, border and swatch, so the tags can be stacked and clamped without measuring. */\nconst MARKER_CHAR_PX = 7;\nconst MARKER_TAG_CHROME_PX = 20;\nconst MARKER_TAG_GAP_PX = 4;\nconst MARKER_TAG_ROW_PX = 18;\nconst MARKER_TAG_ROW_GAP_PX = 2;\n/* A custom color is the line, the tag's border and a swatch; the label is the theme's text on the opaque surface, whatever the color, so it is always legible (DXUI-64, AC 58314). */\nconst MARKER_TAG_COLOR = \"border border-(--marker-color) bg-surface text-primary\";\nconst markerStyle = (marker: DateTimelineMarker) => (marker.color === undefined ? undefined : ({ \"--marker-color\": marker.color } as CSSProperties));\n/* An editable marker's tag also holds the grip. */\nconst MARKER_GRIP_PX = 12;\nconst markerTagWidth = (label: string, editable: boolean) => label.length * MARKER_CHAR_PX + MARKER_TAG_CHROME_PX + (editable ? MARKER_GRIP_PX : 0);\n/* The Phases band (DXUI-68): two lanes of flags, each 26px tall, under a 4px top gap and above the header; a flag too close to the next one in its lane is cut short, never narrower than 36px. */\nconst MARKER_BAND_LANES = 2;\nconst MARKER_BAND_LANE_PX = 26;\nconst MARKER_BAND_TOP_PX = 4;\nconst MARKER_BAND_PAD_PX = 8;\nconst MARKER_BAND_MIN_PX = 36;\n/* The date header is h-10. */\nconst DATE_HEADER_PX = 40;\n/* A marker's line: solid is the 1px line; dashed is 2px wide with 6px of color and 4px of gap, the approved design's (DX-6451). */\nconst MARKER_SOLID_W_PX = 1;\nconst MARKER_DASHED_W_PX = 2;\nconst FLAG_BADGE = \"block min-w-0 max-w-full truncate rounded-l-none\";\n/* A line is the marker's color, or the accent when it has none (the header tag's own rule). */\nconst markerLineStyle = (lineStyle: DateTimelineMarkerLineStyle, colored: boolean): CSSProperties => {\n  const fill = colored ? \"var(--marker-color)\" : \"var(--accent)\";\n  return lineStyle === \"dashed\"\n    ? { width: MARKER_DASHED_W_PX, marginLeft: -MARKER_DASHED_W_PX / 2, background: `repeating-linear-gradient(to bottom, ${fill} 0 6px, transparent 6px 10px)` }\n    : { width: MARKER_SOLID_W_PX, marginLeft: -MARKER_SOLID_W_PX / 2, background: fill };\n};\n/* The grip on an editable marker's handle; a spinner while its save is in flight. */\nfunction MarkerGrip({ pending, savingLabel }: { pending: boolean; savingLabel: string }) {\n  if (pending) return <Spinner size=\"xs\" label={savingLabel} className=\"shrink-0\" />;\n  return (\n    <svg aria-hidden viewBox=\"0 0 6 10\" className=\"h-2.5 w-1.5 shrink-0 fill-current opacity-70\">\n      <circle cx=\"1\" cy=\"1.5\" r=\"0.9\" />\n      <circle cx=\"5\" cy=\"1.5\" r=\"0.9\" />\n      <circle cx=\"1\" cy=\"5\" r=\"0.9\" />\n      <circle cx=\"5\" cy=\"5\" r=\"0.9\" />\n      <circle cx=\"1\" cy=\"8.5\" r=\"0.9\" />\n      <circle cx=\"5\" cy=\"8.5\" r=\"0.9\" />\n    </svg>\n  );\n}\n/* A band flag's text: the marker's color on a colored one, the accent otherwise. */\nfunction FlagBadge({ marker }: { marker: DateTimelineMarker }) {\n  return marker.color === undefined ? (\n    <Badge tone=\"accent\" size=\"sm\" className={FLAG_BADGE}>{marker.label}</Badge>\n  ) : (\n    <Badge color={marker.color} size=\"sm\" className={FLAG_BADGE}>{marker.label}</Badge>\n  );\n}\n\nexport function DateTimeline({\n  items,\n  pxPerDay,\n  onPxPerDayChange,\n  onItemActivate,\n  onItemChange,\n  today,\n  markers = NO_MARKERS,\n  onMarkerChange,\n  onMarkerActivate,\n  weekStartsOn = 1,\n  hideLabelColumn = false,\n  markerPlacement = \"header\",\n  markerBandCaption,\n  lineStyle = \"solid\",\n  toolbar,\n  empty,\n  className,\n}: DateTimelineProps) {\n  const locale = useUiLocale();\n  const strings = useUiStrings().dateTimeline;\n  const scroller = useRef<HTMLDivElement>(null);\n  const labelWidth = hideLabelColumn ? 0 : LABEL_COLUMN_PX;\n  if (!onItemChange && items.some((item) => item.editable)) throw new Error(\"timeline: an editable item needs onItemChange\");\n\n  if (!onMarkerChange && markers.some((marker) => marker.editable)) throw new Error(\"timeline: an editable marker needs onMarkerChange\");\n  const band = markerPlacement === \"band\";\n  if (band && markerBandCaption === undefined) throw new Error(\"timeline: markerPlacement band needs markerBandCaption\");\n  const busy = markers.some((marker) => marker.pending === true);\n\n  const todayDate = useMemo(() => today ?? new Date(), [today]);\n  assertPxPerDay(pxPerDay);\n  assertMarkers(markers);\n  const unit = tickUnitFor(pxPerDay);\n  const range = useMemo(\n    () => timelineRange(\n      items,\n      todayDate,\n      unit,\n      weekStartsOn,\n      markers.map((marker) => marker.date),\n    ),\n    [items, todayDate, unit, weekStartsOn, markers],\n  );\n  const { drag, startDrag, consumeSwallowedClick } = useBarDrag(items, pxPerDay, onItemChange);\n  const { drag: markerDrag, startDrag: startMarkerDrag, consumeSwallowedClick: consumeMarkerClick, clearSwallowedClick: clearMarkerClick } = useMarkerDrag(markers, pxPerDay, range, onMarkerChange);\n  const ticks = useMemo(() => unitTicks(range, unit, pxPerDay), [range, unit, pxPerDay]);\n  const width = trackWidth(range, pxPerDay);\n  const todayX = instantToX(todayDate, range.startDay, pxPerDay);\n\n  // The marker being dragged is drawn at its dragged date, so its line and tag follow the pointer.\n  const shown = useMemo(\n    () => markers.map((marker) => (markerDrag?.id === marker.id ? { ...marker, date: addDays(marker.date, markerDrag.days) } : marker)),\n    [markers, markerDrag],\n  );\n  const lines = useMemo(\n    () => shown.map((marker) => ({ marker, x: instantToX(marker.date, range.startDay, pxPerDay), colored: marker.color !== undefined })),\n    [shown, range, pxPerDay],\n  );\n  const placed = useMemo(() => {\n    if (band) return [];\n    const tags = shown.map((marker) => ({ x: instantToX(marker.date, range.startDay, pxPerDay), width: markerTagWidth(marker.label, marker.editable === true) }));\n    return layoutMarkerTags(tags, width, MARKER_TAG_GAP_PX).map(({ index, left, row }) => {\n      const marker = shown[index]!;\n      return { marker, x: tags[index]!.x, tagWidth: tags[index]!.width, left, row, colored: marker.color !== undefined, style: markerStyle(marker) };\n    });\n  }, [band, shown, range, pxPerDay, width]);\n  const flags = useMemo(() => {\n    if (!band) return [];\n    const boxes = shown.map((marker) => ({ x: instantToX(marker.date, range.startDay, pxPerDay), width: markerTagWidth(marker.label, marker.editable === true) }));\n    return layoutMarkerFlags(boxes, MARKER_BAND_LANES, MARKER_TAG_GAP_PX, MARKER_BAND_MIN_PX).map(({ index, lane, maxWidth }) => ({\n      marker: shown[index]!,\n      x: boxes[index]!.x,\n      lane,\n      maxWidth,\n    }));\n  }, [band, shown, range, pxPerDay]);\n  const markerRows = placed.reduce((rows, p) => Math.max(rows, p.row + 1), 0);\n  const bandLanes = flags.reduce((lanes, f) => Math.max(lanes, f.lane + 1), 0);\n  const bandH = bandLanes === 0 ? 0 : bandLanes * MARKER_BAND_LANE_PX + MARKER_BAND_PAD_PX;\n  const moveByKey = (marker: DateTimelineMarker) => (e: KeyboardEvent<HTMLElement>) => {\n    if (e.key !== \"ArrowLeft\" && e.key !== \"ArrowRight\") return;\n    e.preventDefault();\n    onMarkerChange?.(marker.id, addDays(marker.date, e.key === \"ArrowLeft\" ? -1 : 1));\n  };\n\n  const day = useMemo(() => dateFormat(locale, { dateStyle: \"medium\" }), [locale]);\n  const longDay = useMemo(() => dateFormat(locale, { weekday: \"short\", month: \"short\", day: \"numeric\", year: \"numeric\" }), [locale]);\n  /* DXUI-69: every marker label carries a tooltip with its whole label and long date, for hover and keyboard focus. */\n  const tip = (marker: DateTimelineMarker, trigger: ReactElement) => (\n    <Tooltip content={marker.tooltip ?? `${marker.label}, ${marker.dateLabel ?? longDay.format(marker.date)}`}>{trigger}</Tooltip>\n  );\n  /* A click or Enter / Space on a label activates it; a click that ends a drag does not. Enter and Space clear the drag memory first, since they press with no pointer. */\n  const activateProps = (marker: DateTimelineMarker) => ({\n    onClick: (e: MouseEvent<HTMLElement>) => {\n      if (!consumeMarkerClick()) onMarkerActivate?.(marker.id, e.currentTarget);\n    },\n    onKeyDown: (e: KeyboardEvent<HTMLElement>) => {\n      if (e.key === \"Enter\" || e.key === \" \") clearMarkerClick();\n      moveByKey(marker)(e);\n    },\n  });\n  const markerButtonName = (marker: DateTimelineMarker) => (marker.editable ? strings.markerHandle(marker.label, day.format(marker.date)) : `${marker.label}, ${day.format(marker.date)}`);\n  const tickText = useMemo(() => {\n    const month = dateFormat(locale, { month: \"short\" });\n    const monthDay = dateFormat(locale, { month: \"short\", day: \"numeric\" });\n    const yearFmt = dateFormat(locale, { year: \"numeric\" });\n    return (tick: Tick, first: boolean): { primary: string; secondary: string | null } => {\n      const date = fromDayNumber(tick.startDay);\n      const yearText = yearFmt.format(date);\n      if (unit === \"quarters\") return { primary: strings.quarter(quarterOf(tick.startDay), yearText), secondary: null };\n      const newYear = first || yearOf(tick.startDay) !== yearOf(tick.startDay - 1);\n      const primary = (unit === \"months\" ? month : monthDay).format(date);\n      return { primary, secondary: newYear ? yearText : null };\n    };\n  }, [locale, unit, strings]);\n\n  const centerOnToday = () => {\n    const el = scroller.current;\n    if (el) el.scrollLeft = scrollLeftToCenter(todayX, el.clientWidth, labelWidth);\n  };\n\n  const isEmpty = items.length === 0;\n  const { zoomTo, onKeyDown } = useTimelineZoom({ scroller, pxPerDay, range, labelWidth, isEmpty, onPxPerDayChange, centerOnToday });\n\n  return (\n    <div className={cn(\"flex min-w-0 flex-col gap-2\", className)} onKeyDown={onKeyDown}>\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <Slider\n            size=\"sm\"\n            label={strings.zoomLabel}\n            min={0}\n            max={ZOOM_SLIDER_MAX}\n            step={1}\n            value={Math.round(pxPerDayToSlider(pxPerDay))}\n            format={() => strings.unit[unit]}\n            /* I18N-ALLOW: Slider tooltip display mode token, not text */\n            tooltip=\"never\"\n            onValueChange={(value) => {\n              if (typeof value !== \"number\") throw new Error(\"timeline: the zoom slider is a single value\");\n              zoomTo(sliderToPxPerDay(value));\n            }}\n            className=\"w-56 max-w-full\"\n          />\n          {toolbar}\n        </div>\n        <Button size=\"sm\" variant=\"ghost\" onClick={centerOnToday}>\n          {strings.goToToday}\n        </Button>\n      </div>\n\n      {isEmpty && empty === undefined ? (\n        <p className=\"rounded-md border border-border px-3 py-6 text-center text-sm text-secondary\">{strings.empty}</p>\n      ) : (\n        <div\n          ref={scroller}\n          role=\"region\"\n          aria-label={strings.label}\n          tabIndex={0}\n          className=\"relative overflow-x-auto [container-type:inline-size] rounded-md border border-border bg-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand\"\n        >\n          <div className=\"relative\" style={{ width: labelWidth + width }}>\n            {band && bandH > 0 && (\n              <div className=\"flex border-b border-border bg-surface-inset\" style={{ height: bandH }}>\n                {hideLabelColumn ? (\n                  /* DXUI-72: with no label column the caption sits inside the band at its left edge, pinned there while the dates scroll; a flag passing under it is hidden. */\n                  <div className=\"sticky left-0 z-20 w-0 shrink-0\">\n                    <span\n                      className=\"absolute left-0 flex items-center bg-surface-inset px-2 text-xs font-semibold whitespace-nowrap text-secondary\"\n                      style={{ top: MARKER_BAND_TOP_PX, height: MARKER_BAND_LANE_PX }}\n                    >\n                      {markerBandCaption}\n                    </span>\n                  </div>\n                ) : (\n                  <div\n                    className=\"sticky left-0 z-20 flex shrink-0 items-center border-r border-border bg-surface-inset px-3 text-xs font-semibold text-secondary\"\n                    style={{ width: labelWidth }}\n                  >\n                    {markerBandCaption}\n                  </div>\n                )}\n                <div className=\"relative shrink-0\" style={{ width }}>\n                  {flags.map(({ marker, x, lane, maxWidth }) => (\n                    <div\n                      key={marker.id}\n                      className=\"absolute z-10 flex items-stretch\"\n                      style={{\n                        left: x - MARKER_DASHED_W_PX / 2,\n                        top: MARKER_BAND_TOP_PX + lane * MARKER_BAND_LANE_PX,\n                        maxWidth,\n                        borderLeft: `${MARKER_DASHED_W_PX}px solid ${marker.color ?? \"var(--accent)\"}`,\n                      }}\n                    >\n                      {tip(\n                        marker,\n                        marker.editable ? (\n                          <button\n                            type=\"button\"\n                            data-marker-handle\n                            disabled={busy}\n                            aria-busy={marker.pending === true || undefined}\n                            aria-label={markerButtonName(marker)}\n                            className={cn(\n                              \"flex min-w-0 items-center gap-1 touch-none select-none focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand\",\n                              busy ? \"cursor-default\" : \"cursor-grab active:cursor-grabbing\",\n                            )}\n                            onPointerDown={(e) => startMarkerDrag(e, marker)}\n                            {...activateProps(marker)}\n                          >\n                            <MarkerGrip pending={marker.pending === true} savingLabel={strings.markerSaving} />\n                            <FlagBadge marker={marker} />\n                          </button>\n                        ) : onMarkerActivate ? (\n                          <button\n                            type=\"button\"\n                            aria-label={markerButtonName(marker)}\n                            className=\"flex min-w-0 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand\"\n                            onClick={(e) => onMarkerActivate(marker.id, e.currentTarget)}\n                          >\n                            <FlagBadge marker={marker} />\n                          </button>\n                        ) : (\n                          <span role=\"img\" tabIndex={0} aria-label={markerButtonName(marker)} className=\"flex min-w-0 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand\">\n                            <FlagBadge marker={marker} />\n                          </span>\n                        ),\n                      )}\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n            {band &&\n              bandH > 0 &&\n              flags.map(({ marker, x }) => (\n                <span\n                  key={`seg-${marker.id}`}\n                  aria-hidden\n                  data-line-style={lineStyle}\n                  className=\"pointer-events-none absolute top-0\"\n                  style={{ ...markerStyle(marker), ...markerLineStyle(lineStyle, marker.color !== undefined), left: labelWidth + x, height: bandH + DATE_HEADER_PX }}\n                />\n              ))}\n\n            <div className=\"flex border-b border-border\">\n              {!hideLabelColumn && (\n                <div\n                  className=\"sticky left-0 z-20 shrink-0 border-r border-border bg-surface px-3 py-2 text-xs font-semibold text-secondary\"\n                  style={{ width: labelWidth }}\n                >\n                  {strings.itemColumn}\n                </div>\n              )}\n              <div className=\"relative h-10 shrink-0\" style={{ width, marginTop: markerRows * MARKER_TAG_ROW_PX }}>\n                {ticks.map((tick, i) => {\n                  const text = tickText(tick, i === 0);\n                  return (\n                    <div\n                      key={tick.startDay}\n                      className=\"absolute top-0 flex h-full flex-col justify-center overflow-hidden border-l border-border px-2 text-xs leading-tight text-secondary\"\n                      style={{ left: tick.x, width: tick.width }}\n                    >\n                      <span className=\"truncate font-medium\">{text.primary}</span>\n                      {text.secondary && <span className=\"truncate text-2xs text-muted-text\">{text.secondary}</span>}\n                    </div>\n                  );\n                })}\n                <span\n                  className=\"absolute top-0 z-10 -translate-x-1/2 rounded-b-sm bg-danger px-1 text-2xs font-semibold text-danger-contrast\"\n                  style={{ left: todayX }}\n                >\n                  {strings.today}\n                </span>\n                {placed.map(({ marker, left, row, tagWidth, colored, style }) => {\n                  const className = cn(\n                    \"absolute z-10 flex items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-t-sm text-2xs font-semibold\",\n                    colored ? MARKER_TAG_COLOR : \"bg-accent text-accent-contrast\",\n                  );\n                  const tagStyle = { ...style, left, width: tagWidth, top: markerTagTop(row, MARKER_TAG_ROW_PX), height: MARKER_TAG_ROW_PX - MARKER_TAG_ROW_GAP_PX };\n                  const content = (\n                    <>\n                      {colored && <span aria-hidden className=\"size-1.5 shrink-0 rounded-full bg-(--marker-color)\" />}\n                      <span className=\"truncate\">{marker.label}</span>\n                    </>\n                  );\n                  if (!marker.editable) {\n                    return onMarkerActivate ? (\n                      <Fragment key={marker.id}>\n                        {tip(\n                          marker,\n                          <button\n                            type=\"button\"\n                            aria-label={markerButtonName(marker)}\n                            className={cn(className, \"cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand\")}\n                            style={tagStyle}\n                            onClick={(e) => onMarkerActivate(marker.id, e.currentTarget)}\n                          >\n                            {content}\n                          </button>,\n                        )}\n                      </Fragment>\n                    ) : (\n                      <Fragment key={marker.id}>\n                        {tip(\n                          marker,\n                          <span\n                            role=\"img\"\n                            tabIndex={0}\n                            aria-label={markerButtonName(marker)}\n                            className={cn(className, \"focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand\")}\n                            style={tagStyle}\n                          >\n                            {content}\n                          </span>,\n                        )}\n                      </Fragment>\n                    );\n                  }\n                  return (\n                    <Fragment key={marker.id}>\n                      {tip(\n                        marker,\n                        <button\n                          type=\"button\"\n                          data-marker-handle\n                          disabled={busy}\n                          aria-busy={marker.pending === true || undefined}\n                          aria-label={markerButtonName(marker)}\n                          className={cn(\n                            className,\n                            busy ? \"cursor-default\" : \"cursor-grab touch-none select-none active:cursor-grabbing\",\n                            \"focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand\",\n                          )}\n                          style={tagStyle}\n                          onPointerDown={(e) => startMarkerDrag(e, marker)}\n                          {...activateProps(marker)}\n                        >\n                          <MarkerGrip pending={marker.pending === true} savingLabel={strings.markerSaving} />\n                          {content}\n                        </button>,\n                      )}\n                    </Fragment>\n                  );\n                })}\n              </div>\n            </div>\n\n            <div className=\"relative\">\n              {/* The grid lines and the today line: one overlay, under the bars and the labels. */}\n              <div aria-hidden className=\"pointer-events-none absolute inset-y-0 z-0\" style={{ left: labelWidth, width }}>\n                {ticks.map((tick) => (\n                  <span key={tick.startDay} className=\"absolute inset-y-0 border-l border-border/60\" style={{ left: tick.x }} />\n                ))}\n                {lines.map(({ marker, x, colored }) => (\n                  <span\n                    key={marker.id}\n                    aria-hidden\n                    data-line-style={lineStyle}\n                    className=\"absolute inset-y-0\"\n                    style={{ ...markerStyle(marker), ...markerLineStyle(lineStyle, colored), left: x }}\n                  />\n                ))}\n                <span className=\"absolute inset-y-0 w-px bg-danger\" style={{ left: todayX }} />\n              </div>\n\n              {items.map((item) => (\n                <TimelineRow\n                  key={item.id}\n                  item={item}\n                  range={range}\n                  pxPerDay={pxPerDay}\n                  trackWidth={width}\n                  labelWidth={labelWidth}\n                  hideLabelColumn={hideLabelColumn}\n                  day={day}\n                  dragging={drag?.id === item.id && drag.active ? drag : null}\n                  onPress={startDrag}\n                  consumeSwallowedClick={consumeSwallowedClick}\n                  onActivate={onItemActivate}\n                  onChange={onItemChange}\n                />\n              ))}\n              {isEmpty && (\n                <div className=\"sticky left-0 z-10 flex min-h-64 w-[100cqw] items-center justify-center p-4\">{empty}</div>\n              )}\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["LABEL_COLUMN_PX","NO_MARKERS","MARKER_CHAR_PX","MARKER_TAG_CHROME_PX","MARKER_TAG_GAP_PX","MARKER_TAG_ROW_PX","MARKER_TAG_ROW_GAP_PX","MARKER_TAG_COLOR","markerStyle","marker","MARKER_GRIP_PX","markerTagWidth","label","editable","MARKER_BAND_LANES","MARKER_BAND_LANE_PX","MARKER_BAND_TOP_PX","MARKER_BAND_PAD_PX","MARKER_BAND_MIN_PX","DATE_HEADER_PX","MARKER_SOLID_W_PX","MARKER_DASHED_W_PX","FLAG_BADGE","markerLineStyle","lineStyle","colored","fill","MarkerGrip","pending","savingLabel","jsx","Spinner","FlagBadge","Badge","DateTimeline","items","pxPerDay","onPxPerDayChange","onItemActivate","onItemChange","today","markers","onMarkerChange","onMarkerActivate","weekStartsOn","hideLabelColumn","markerPlacement","markerBandCaption","toolbar","empty","className","locale","useUiLocale","strings","useUiStrings","scroller","useRef","labelWidth","item","band","busy","todayDate","useMemo","assertPxPerDay","assertMarkers","unit","tickUnitFor","range","timelineRange","drag","startDrag","consumeSwallowedClick","useBarDrag","markerDrag","startMarkerDrag","consumeMarkerClick","clearMarkerClick","useMarkerDrag","ticks","unitTicks","width","trackWidth","todayX","instantToX","shown","addDays","lines","placed","tags","layoutMarkerTags","index","left","row","flags","boxes","layoutMarkerFlags","lane","maxWidth","markerRows","rows","p","bandLanes","lanes","f","bandH","moveByKey","e","day","dateFormat","longDay","tip","trigger","Tooltip","activateProps","markerButtonName","tickText","month","monthDay","yearFmt","tick","first","date","fromDayNumber","yearText","quarterOf","newYear","yearOf","centerOnToday","el","scrollLeftToCenter","isEmpty","zoomTo","onKeyDown","useTimelineZoom","cn","jsxs","Slider","ZOOM_SLIDER_MAX","pxPerDayToSlider","value","sliderToPxPerDay","Button","x","i","text","tagWidth","style","tagStyle","markerTagTop","content","Fragment","TimelineRow"],"mappings":"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"}

package/dist/components/date-timeline/TimelineRow.js

@@ -0,0 +1,100 @@
+import { jsxs as s, Fragment as N, jsx as t } from "react/jsx-runtime";
+import { cn as v } from "../../lib/cn.js";
+import { formatPercent as B } from "../../lib/intl-cache.js";
+import { editSpan as E, barBox as X, clampProgress as L, instantToX as H } from "../../lib/date-timeline/scale.js";
+import { Tooltip as _ } from "../Popover.js";
+import { useUiLocale as I, useUiStrings as K } from "../../lib/i18n/provider.js";
+const M = {
+  neutral: "border-border bg-surface-raised text-secondary",
+  accent: "border-accent-border bg-accent-subtle text-accent-text",
+  success: "border-success-border bg-success-subtle text-success-text",
+  warning: "border-warning-border bg-warning-subtle text-warning-text",
+  danger: "border-danger-border bg-danger-subtle text-danger-text",
+  info: "border-info-border bg-info-subtle text-info-text",
+  muted: "border-muted-border bg-muted-subtle text-muted-text"
+}, O = 40, S = 8, $ = 120, j = 8, U = 1 / 4, C = 2;
+function F(e) {
+  const a = Math.min(j, e * U);
+  return a >= C ? a : 0;
+}
+function Z({ item: e, range: a, pxPerDay: f, trackWidth: A, labelWidth: p, hideLabelColumn: T, day: i, dragging: c, onPress: k, consumeSwallowedClick: G, onActivate: P, onChange: z }) {
+  const D = I(), b = K().dateTimeline, u = c ? E(e, c.edit, c.days) : e, o = X(u, a, f), g = i.format(u.start), m = i.format(u.end), l = e.progress === void 0 ? null : L(e.progress), h = l === null ? b.itemName(e.label, g, m) : b.itemNameProgress(e.label, g, m, B(l * 100, D)), x = e.plannedEnd ? `${h}, ${b.plannedEnd(i.format(e.plannedEnd))}` : h, w = o.width < $, n = F(o.width), y = /* @__PURE__ */ s(N, { children: [
+    /* @__PURE__ */ t("span", { className: "min-w-0 truncate", children: e.label }),
+    e.meta !== void 0 && /* @__PURE__ */ t("span", { className: "relative shrink-0", children: e.meta })
+  ] }), R = (r) => {
+    if (!e.editable || r.key !== "ArrowLeft" && r.key !== "ArrowRight") return;
+    r.preventDefault();
+    const d = E(e, r.altKey ? "start" : r.shiftKey ? "end" : "move", r.key === "ArrowLeft" ? -1 : 1);
+    (d.start.getTime() !== e.start.getTime() || d.end.getTime() !== e.end.getTime()) && z?.(e.id, d.start, d.end);
+  };
+  return /* @__PURE__ */ s("div", { className: "relative flex border-b border-border/60 last:border-b-0", style: { height: O }, children: [
+    !T && /* @__PURE__ */ t(_, { content: e.label, children: /* @__PURE__ */ t("div", { className: "sticky left-0 z-10 flex shrink-0 items-center border-r border-border bg-surface px-3 text-sm", style: { width: p }, children: /* @__PURE__ */ t("span", { className: "truncate", children: e.label }) }) }),
+    /* @__PURE__ */ s("div", { className: "relative shrink-0", style: { width: A }, children: [
+      e.plannedEnd && /* @__PURE__ */ t(
+        "span",
+        {
+          "aria-hidden": !0,
+          "data-planned-end": !0,
+          className: "pointer-events-none absolute top-1 bottom-1 z-[1] w-0 border-l-2 border-dashed border-warning",
+          style: { left: H(e.plannedEnd, a.startDay, f) },
+          children: /* @__PURE__ */ t("span", { className: "absolute -top-0.5 -left-[5px] size-2 rotate-45 bg-warning" })
+        }
+      ),
+      /* @__PURE__ */ t(_, { content: x, children: /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          "aria-label": x,
+          onClick: () => {
+            G() || P(e.id);
+          },
+          onPointerDown: (r) => k(r, e),
+          onKeyDown: R,
+          className: v(
+            "absolute top-1.5 bottom-1.5 z-[2] min-w-0 select-none text-left text-xs font-medium",
+            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand",
+            e.editable ? "cursor-grab touch-none active:cursor-grabbing" : "cursor-pointer",
+            // A bar too narrow for edge zones is still a target a pointer can hit: its hit area reaches past the bar.
+            e.editable && n === 0 && "before:absolute before:inset-y-0 before:-inset-x-1.5 before:content-['']"
+          ),
+          style: { left: o.left, width: o.width },
+          children: [
+            /* @__PURE__ */ s(
+              "span",
+              {
+                className: v(
+                  "absolute inset-0 flex items-center gap-1.5 overflow-clip rounded-md border px-2",
+                  "transition-[var(--tx-colors),filter] duration-(--dur-fast) hover:brightness-95",
+                  M[e.tone ?? "accent"]
+                ),
+                children: [
+                  l !== null && /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "absolute inset-y-0 left-0 bg-current opacity-25", style: { width: `${l * 100}%` } }),
+                  !w && /* Sticky just past the label column, so a bar scrolled partly under it keeps its text in view
+                  (clipped to the bar by `overflow-clip`, which unlike `hidden` leaves sticky working). */
+                  /* @__PURE__ */ t("span", { className: "sticky flex min-w-0 flex-1 items-center gap-1.5", style: { left: p + S }, children: y })
+                ]
+              }
+            ),
+            w && /* @__PURE__ */ t(
+              "span",
+              {
+                "data-tag": !0,
+                className: "absolute top-1/2 left-full ml-2 flex max-w-64 -translate-y-1/2 items-center gap-1.5 whitespace-nowrap rounded-md bg-surface/90 px-1.5 py-0.5",
+                children: y
+              }
+            ),
+            e.editable && n > 0 && /* @__PURE__ */ s(N, { children: [
+              /* @__PURE__ */ t("span", { "aria-hidden": !0, "data-edge": "start", className: "absolute inset-y-0 z-[1] cursor-ew-resize", style: { left: -n / 2, width: n } }),
+              /* @__PURE__ */ t("span", { "aria-hidden": !0, "data-edge": "end", className: "absolute inset-y-0 z-[1] cursor-ew-resize", style: { right: -n / 2, width: n } })
+            ] })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  Z as TimelineRow,
+  F as edgeGrabPx
+};
+//# sourceMappingURL=TimelineRow.js.map

package/dist/components/date-timeline/TimelineRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineRow.js","sources":["../../../src/components/date-timeline/TimelineRow.tsx"],"sourcesContent":["import type { KeyboardEvent, PointerEvent } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiLocale, useUiStrings } from \"../../lib/i18n\";\nimport { formatPercent } from \"../../lib/intl-cache\";\nimport { barBox, clampProgress, editSpan, instantToX, type DayRange } from \"../../lib/date-timeline/scale\";\nimport { Tooltip } from \"../Popover\";\nimport type { IconStackTone } from \"../IconStack\";\nimport type { DateTimelineChange, DateTimelineItem } from \"./DateTimeline\";\nimport type { Drag } from \"./useBarDrag\";\n\n/* ============================================================================\n   ONE ROW OF THE TIMELINE (DXUI-45, DXUI-60) — the sticky label, the bar and\n   its planned-end marker.\n\n   The bar is one button: a visual (clipped to the bar, holding the label when\n   it fits), the outside tag when it does not, and, on an editable bar, the two\n   edge grab zones. The drag itself is `useBarDrag`; this component only draws\n   what the drag says and forwards the press.\n   ============================================================================ */\n\nconst TONE: Record<IconStackTone, string> = {\n  neutral: \"border-border bg-surface-raised text-secondary\",\n  accent: \"border-accent-border bg-accent-subtle text-accent-text\",\n  success: \"border-success-border bg-success-subtle text-success-text\",\n  warning: \"border-warning-border bg-warning-subtle text-warning-text\",\n  danger: \"border-danger-border bg-danger-subtle text-danger-text\",\n  info: \"border-info-border bg-info-subtle text-info-text\",\n  muted: \"border-muted-border bg-muted-subtle text-muted-text\",\n};\n\nconst ROW_HEIGHT = 40;\n/** The bar's own horizontal padding (`px-2`): the sticky label sits this far past the label column. */\nconst BAR_PADDING_PX = 8;\n/** A bar narrower than this shows its label and meta as a tag to its right instead of inside it. */\nconst TAG_BELOW_PX = 120;\n/** The widest an edge's grab zone gets. */\nconst EDGE_GRAB_PX = 8;\n/** An edge zone sits half inside the bar, so the two together cover `grab` of its width; capped at a quarter of the width, at least three quarters of the bar stays its body. */\nconst EDGE_GRAB_MAX_SHARE = 1 / 4;\n/** Below this the edge zones would be too small to hit, so a bar this narrow has none: it moves, and its keys resize it. */\nconst MIN_EDGE_GRAB_PX = 2;\n\n/** The width of each edge's grab zone on a bar this wide; 0 when the bar is too narrow to have edges. */\nexport function edgeGrabPx(barWidth: number): number {\n  const grab = Math.min(EDGE_GRAB_PX, barWidth * EDGE_GRAB_MAX_SHARE);\n  return grab >= MIN_EDGE_GRAB_PX ? grab : 0;\n}\n\nexport interface TimelineRowProps {\n  item: DateTimelineItem;\n  range: DayRange;\n  pxPerDay: number;\n  trackWidth: number;\n  labelWidth: number;\n  hideLabelColumn: boolean;\n  day: Intl.DateTimeFormat;\n  /** The live drag when it is this item's and past the threshold. */\n  dragging: Drag | null;\n  onPress: (e: PointerEvent<HTMLElement>, item: DateTimelineItem) => void;\n  consumeSwallowedClick: () => boolean;\n  onActivate: (id: string) => void;\n  onChange: DateTimelineChange | undefined;\n}\n\nexport function TimelineRow({ item, range, pxPerDay, trackWidth, labelWidth, hideLabelColumn, day, dragging, onPress, consumeSwallowedClick, onActivate, onChange }: TimelineRowProps) {\n  const locale = useUiLocale();\n  const strings = useUiStrings().dateTimeline;\n  const shown = dragging ? editSpan(item, dragging.edit, dragging.days) : item;\n  const box = barBox(shown, range, pxPerDay);\n  const from = day.format(shown.start);\n  const to = day.format(shown.end);\n  const progress = item.progress === undefined ? null : clampProgress(item.progress);\n  const base =\n    progress === null ? strings.itemName(item.label, from, to) : strings.itemNameProgress(item.label, from, to, formatPercent(progress * 100, locale));\n  const name = item.plannedEnd ? `${base}, ${strings.plannedEnd(day.format(item.plannedEnd))}` : base;\n  const tagged = box.width < TAG_BELOW_PX;\n  const grab = edgeGrabPx(box.width);\n  const text = (\n    <>\n      <span className=\"min-w-0 truncate\">{item.label}</span>\n      {item.meta !== undefined && <span className=\"relative shrink-0\">{item.meta}</span>}\n    </>\n  );\n\n  const keyEdit = (e: KeyboardEvent<HTMLElement>) => {\n    if (!item.editable || (e.key !== \"ArrowLeft\" && e.key !== \"ArrowRight\")) return;\n    e.preventDefault();\n    const next = editSpan(item, e.altKey ? \"start\" : e.shiftKey ? \"end\" : \"move\", e.key === \"ArrowLeft\" ? -1 : 1);\n    if (next.start.getTime() !== item.start.getTime() || next.end.getTime() !== item.end.getTime()) onChange?.(item.id, next.start, next.end);\n  };\n\n  return (\n    <div className=\"relative flex border-b border-border/60 last:border-b-0\" style={{ height: ROW_HEIGHT }}>\n      {!hideLabelColumn && (\n        <Tooltip content={item.label}>\n          <div className=\"sticky left-0 z-10 flex shrink-0 items-center border-r border-border bg-surface px-3 text-sm\" style={{ width: labelWidth }}>\n            <span className=\"truncate\">{item.label}</span>\n          </div>\n        </Tooltip>\n      )}\n      <div className=\"relative shrink-0\" style={{ width: trackWidth }}>\n        {item.plannedEnd && (\n          <span\n            aria-hidden\n            data-planned-end\n            className=\"pointer-events-none absolute top-1 bottom-1 z-[1] w-0 border-l-2 border-dashed border-warning\"\n            style={{ left: instantToX(item.plannedEnd, range.startDay, pxPerDay) }}\n          >\n            <span className=\"absolute -top-0.5 -left-[5px] size-2 rotate-45 bg-warning\" />\n          </span>\n        )}\n        <Tooltip content={name}>\n          <button\n            type=\"button\"\n            aria-label={name}\n            onClick={() => {\n              if (!consumeSwallowedClick()) onActivate(item.id);\n            }}\n            onPointerDown={(e) => onPress(e, item)}\n            onKeyDown={keyEdit}\n            className={cn(\n              \"absolute top-1.5 bottom-1.5 z-[2] min-w-0 select-none text-left text-xs font-medium\",\n              \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand\",\n              item.editable ? \"cursor-grab touch-none active:cursor-grabbing\" : \"cursor-pointer\",\n              // A bar too narrow for edge zones is still a target a pointer can hit: its hit area reaches past the bar.\n              item.editable && grab === 0 && \"before:absolute before:inset-y-0 before:-inset-x-1.5 before:content-['']\",\n            )}\n            style={{ left: box.left, width: box.width }}\n          >\n            <span\n              className={cn(\n                \"absolute inset-0 flex items-center gap-1.5 overflow-clip rounded-md border px-2\",\n                \"transition-[var(--tx-colors),filter] duration-(--dur-fast) hover:brightness-95\",\n                TONE[item.tone ?? \"accent\"],\n              )}\n            >\n              {progress !== null && <span aria-hidden className=\"absolute inset-y-0 left-0 bg-current opacity-25\" style={{ width: `${progress * 100}%` }} />}\n              {!tagged && (\n                /* Sticky just past the label column, so a bar scrolled partly under it keeps its text in view\n                   (clipped to the bar by `overflow-clip`, which unlike `hidden` leaves sticky working). */\n                <span className=\"sticky flex min-w-0 flex-1 items-center gap-1.5\" style={{ left: labelWidth + BAR_PADDING_PX }}>\n                  {text}\n                </span>\n              )}\n            </span>\n            {tagged && (\n              <span\n                data-tag\n                className=\"absolute top-1/2 left-full ml-2 flex max-w-64 -translate-y-1/2 items-center gap-1.5 whitespace-nowrap rounded-md bg-surface/90 px-1.5 py-0.5\"\n              >\n                {text}\n              </span>\n            )}\n            {item.editable && grab > 0 && (\n              <>\n                <span aria-hidden data-edge=\"start\" className=\"absolute inset-y-0 z-[1] cursor-ew-resize\" style={{ left: -grab / 2, width: grab }} />\n                <span aria-hidden data-edge=\"end\" className=\"absolute inset-y-0 z-[1] cursor-ew-resize\" style={{ right: -grab / 2, width: grab }} />\n              </>\n            )}\n          </button>\n        </Tooltip>\n      </div>\n    </div>\n  );\n}\n"],"names":["TONE","ROW_HEIGHT","BAR_PADDING_PX","TAG_BELOW_PX","EDGE_GRAB_PX","EDGE_GRAB_MAX_SHARE","MIN_EDGE_GRAB_PX","edgeGrabPx","barWidth","grab","TimelineRow","item","range","pxPerDay","trackWidth","labelWidth","hideLabelColumn","day","dragging","onPress","consumeSwallowedClick","onActivate","onChange","locale","useUiLocale","strings","useUiStrings","shown","editSpan","box","barBox","from","to","progress","clampProgress","base","formatPercent","name","tagged","text","jsxs","Fragment","jsx","keyEdit","e","next","Tooltip","instantToX","cn"],"mappings":"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"}