@arbidocs/blocks 0.3.185 → 0.4.0

package/dist/chunk-4EZVCGRL.js

@@ -0,0 +1,803 @@
+"use client";
+import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronLeft, ChevronRight, ZoomOut, ZoomIn, Calendar, X } from 'lucide-react';
+import { cn } from '@arbidocs/react/ui';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+// src/timeline/span.ts
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var WEEKDAY_NAMES = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+var DAY_MS = 864e5;
+function monthLabel(d) {
+  return `${MONTH_NAMES[d.getUTCMonth()]} ${d.getUTCFullYear()}`;
+}
+function utcDay(d) {
+  return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()));
+}
+function dayKey(d) {
+  return d.toISOString().slice(0, 10);
+}
+function parseIso(iso) {
+  if (!iso) return null;
+  const d = new Date(iso);
+  return isNaN(d.getTime()) ? null : d;
+}
+function isMidnight(d) {
+  return d.getUTCHours() === 0 && d.getUTCMinutes() === 0 && d.getUTCSeconds() === 0;
+}
+function isEndOfDay(d) {
+  return d.getUTCHours() === 23 && d.getUTCMinutes() === 59;
+}
+function lastDayOfMonth(d) {
+  return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + 1, 0)).getUTCDate();
+}
+function day(d) {
+  return `${d.getUTCDate()} ${MONTHS[d.getUTCMonth()]} ${d.getUTCFullYear()}`;
+}
+function zonedDayAndTime(d, timeZone) {
+  const parts = Object.fromEntries(
+    new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      hourCycle: "h23",
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    }).formatToParts(d).map((p) => [p.type, p.value])
+  );
+  return { day: `${parts.day} ${parts.month} ${parts.year}`, hh: parts.hour, mm: parts.minute };
+}
+function formatSpan(startIso, endIso, timezone) {
+  if (!startIso) return "";
+  const start = new Date(startIso);
+  const end = endIso ? new Date(endIso) : start;
+  if (startIso === endIso) {
+    if (timezone) {
+      try {
+        const zoned = zonedDayAndTime(start, timezone);
+        return `${zoned.day}, ${zoned.hh}:${zoned.mm} ${timezone}`;
+      } catch {
+      }
+    }
+    const hh = String(start.getUTCHours()).padStart(2, "0");
+    const mm = String(start.getUTCMinutes()).padStart(2, "0");
+    return `${day(start)}, ${hh}:${mm} UTC`;
+  }
+  if (isMidnight(start) && isEndOfDay(end)) {
+    const sameDay = start.getUTCFullYear() === end.getUTCFullYear() && start.getUTCMonth() === end.getUTCMonth() && start.getUTCDate() === end.getUTCDate();
+    if (sameDay) return day(start);
+    const firstOfMonth = start.getUTCDate() === 1;
+    const endsMonth = end.getUTCDate() === lastDayOfMonth(end);
+    const sameMonth = start.getUTCFullYear() === end.getUTCFullYear() && start.getUTCMonth() === end.getUTCMonth();
+    if (firstOfMonth && endsMonth && sameMonth) {
+      return `${MONTHS[start.getUTCMonth()]} ${start.getUTCFullYear()}`;
+    }
+    const wholeYear = firstOfMonth && endsMonth && start.getUTCMonth() === 0 && end.getUTCMonth() === 11 && start.getUTCFullYear() === end.getUTCFullYear();
+    if (wholeYear) return String(start.getUTCFullYear());
+    return `${day(start)} \u2013 ${day(end)}`;
+  }
+  return `${day(start)} \u2013 ${day(end)}`;
+}
+var DEFAULT_MAX_LANES = 3;
+var MAX_WEEKS = 2600;
+function TimelineCalendar({
+  items,
+  onSelect,
+  selectedIds,
+  maxLanes = DEFAULT_MAX_LANES,
+  navigatorContainer,
+  navigatorTotal,
+  emptyState,
+  className,
+  testId = "timeline-calendar"
+}) {
+  const dated = useMemo(() => items.filter((i) => i.start), [items]);
+  const sortedItems = useMemo(
+    () => [...dated].sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()),
+    [dated]
+  );
+  const indexById = useMemo(() => new Map(sortedItems.map((it, i) => [it.id, i])), [sortedItems]);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const scrollRef = useRef(null);
+  const select = useCallback(
+    (index) => {
+      const clamped = Math.max(0, Math.min(sortedItems.length - 1, index));
+      setActiveIndex(clamped);
+      onSelect?.(sortedItems[clamped]);
+      return clamped;
+    },
+    [onSelect, sortedItems]
+  );
+  const scrollToItem = useCallback(
+    (id, behavior) => {
+      scrollRef.current?.querySelector(`[data-testid="${testId}-entry-${id}"]`)?.scrollIntoView({ block: "center", behavior });
+    },
+    [testId]
+  );
+  const lastNavScrollRef = useRef(null);
+  const goTo = useCallback(
+    (index) => {
+      const target = sortedItems[select(index)];
+      if (target) {
+        lastNavScrollRef.current = target.id;
+        scrollToItem(target.id, "smooth");
+      }
+    },
+    [select, sortedItems, scrollToItem]
+  );
+  const selectedKey = (selectedIds ?? []).join("\0");
+  useEffect(() => {
+    const id = selectedKey ? selectedKey.split("\0")[0] : null;
+    if (!id) return;
+    if (lastNavScrollRef.current === id) {
+      lastNavScrollRef.current = null;
+      return;
+    }
+    scrollToItem(id, "auto");
+  }, [selectedKey, scrollToItem]);
+  const weeks = useMemo(() => {
+    if (dated.length === 0) return [];
+    const times = dated.flatMap((i) => [
+      new Date(i.start).getTime(),
+      new Date(i.end ?? i.start).getTime()
+    ]);
+    const first = utcDay(new Date(Math.min(...times)));
+    const last = utcDay(new Date(Math.max(...times)));
+    const gridStart = new Date(first);
+    gridStart.setUTCDate(first.getUTCDate() - (first.getUTCDay() + 6) % 7);
+    const out = [];
+    const cursor = new Date(gridStart);
+    while (cursor <= last && out.length < MAX_WEEKS) {
+      out.push(
+        Array.from({ length: 7 }, (_, d) => {
+          const day2 = new Date(cursor);
+          day2.setUTCDate(cursor.getUTCDate() + d);
+          return day2;
+        })
+      );
+      cursor.setUTCDate(cursor.getUTCDate() + 7);
+    }
+    return out;
+  }, [dated]);
+  const segmentsByWeek = useMemo(() => {
+    if (weeks.length === 0) return [];
+    const gridStartMs = weeks[0][0].getTime();
+    const WEEK_MS2 = 7 * DAY_MS;
+    const ranged = dated.map((item) => ({
+      item,
+      start: utcDay(new Date(item.start)),
+      end: utcDay(new Date(item.end ?? item.start))
+    }));
+    ranged.sort((a, b) => {
+      const lenA = b.end.getTime() - b.start.getTime();
+      const lenB = a.end.getTime() - a.start.getTime();
+      return lenA - lenB || a.start.getTime() - b.start.getTime();
+    });
+    const buckets = weeks.map(() => []);
+    for (const r of ranged) {
+      const from = Math.max(0, Math.floor((r.start.getTime() - gridStartMs) / WEEK_MS2));
+      const to = Math.min(weeks.length - 1, Math.floor((r.end.getTime() - gridStartMs) / WEEK_MS2));
+      for (let w = from; w <= to; w++) buckets[w].push(r);
+    }
+    return weeks.map((week, wi) => {
+      const weekStart = week[0];
+      const weekEnd = week[6];
+      const laneEnds = [];
+      const segments = [];
+      let overflow = 0;
+      for (const { item, start, end } of buckets[wi]) {
+        const from = start < weekStart ? weekStart : start;
+        const to = end > weekEnd ? weekEnd : end;
+        const startCol = Math.round((from.getTime() - weekStart.getTime()) / DAY_MS);
+        const endCol = Math.round((to.getTime() - weekStart.getTime()) / DAY_MS);
+        let lane = laneEnds.findIndex((last) => last < startCol);
+        if (lane === -1) lane = laneEnds.length;
+        if (lane >= maxLanes) {
+          overflow += 1;
+          continue;
+        }
+        laneEnds[lane] = endCol;
+        segments.push({
+          item,
+          startCol,
+          span: endCol - startCol + 1,
+          isStart: start >= weekStart,
+          isEnd: end <= weekEnd,
+          lane
+        });
+      }
+      return { segments, overflow };
+    });
+  }, [weeks, dated, maxLanes]);
+  if (weeks.length === 0 && emptyState) {
+    return /* @__PURE__ */ jsx(Fragment, { children: emptyState });
+  }
+  const selectedSet = new Set(selectedIds ?? []);
+  const selectedIndex = sortedItems.findIndex((i) => selectedSet.has(i.id));
+  const currentIndex = selectedIndex >= 0 ? selectedIndex : activeIndex;
+  const navigator = /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5", "data-testid": `${testId}-nav`, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Previous event",
+        "data-testid": `${testId}-nav-prev`,
+        disabled: sortedItems.length === 0 || currentIndex === null || currentIndex <= 0,
+        onClick: () => goTo((currentIndex ?? 0) - 1),
+        className: "rounded p-0.5 text-muted-foreground enabled:hover:bg-accent enabled:hover:text-foreground disabled:opacity-30",
+        children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "tabular-nums text-sm font-light text-muted-foreground",
+        "data-testid": `${testId}-nav-position`,
+        children: [
+          currentIndex !== null ? currentIndex + 1 : "\u2013",
+          " /",
+          " ",
+          navigatorTotal ?? (sortedItems.length > 0 ? sortedItems.length : "\u2013")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Next event",
+        "data-testid": `${testId}-nav-next`,
+        disabled: sortedItems.length === 0 || currentIndex !== null && currentIndex >= sortedItems.length - 1,
+        onClick: () => goTo(currentIndex === null ? 0 : currentIndex + 1),
+        className: "rounded p-0.5 text-muted-foreground enabled:hover:bg-accent enabled:hover:text-foreground disabled:opacity-30",
+        children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full", className), "data-testid": testId, children: [
+    navigatorContainer === void 0 ? navigator && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-end border-b border-border px-2 py-1", children: navigator }) : navigatorContainer && navigator && createPortal(navigator, navigatorContainer),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 border-b border-border bg-background", children: WEEKDAY_NAMES.map((d) => /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-xs text-muted-foreground text-center", children: d }, d)) }),
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto", "data-testid": `${testId}-scroll`, children: weeks.map((week, wi) => {
+      const { segments, overflow } = segmentsByWeek[wi];
+      const monthStartDay = week.find((d) => d.getUTCDate() === 1);
+      const marker = monthStartDay ?? (wi === 0 ? week[0] : void 0);
+      return /* @__PURE__ */ jsxs("div", { children: [
+        marker && // Sticky, so the month you are LOOKING at names itself: it
+        // pins to the top of the scroller while you are inside it and
+        // is pushed up by the next one. No scroll listener needed.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sticky top-0 z-10 px-3 py-1 text-xs font-medium text-foreground bg-background/95 backdrop-blur border-y border-border/60",
+            "data-testid": `${testId}-month-${marker.getUTCFullYear()}-${String(
+              marker.getUTCMonth() + 1
+            ).padStart(2, "0")}`,
+            children: monthLabel(marker)
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "border-b border-border/40", children: [
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 bg-background", children: week.map((day2) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-testid": `${testId}-day-${dayKey(day2)}`,
+              className: cn(
+                "px-1 pt-1 text-xs border-r border-border/40",
+                day2.getUTCDate() === 1 ? "text-foreground font-medium" : "text-muted-foreground/60"
+              ),
+              children: day2.getUTCDate()
+            },
+            dayKey(day2)
+          )) }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "grid auto-rows-[24px] grid-cols-7 gap-y-0.5 px-0.5 pb-1 bg-muted/40 pointer-coarse:auto-rows-[32px]",
+              style: { minHeight: 62 },
+              children: [
+                segments.map((seg) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => select(indexById.get(seg.item.id) ?? 0),
+                    title: `${formatSpan(seg.item.start, seg.item.end)} \u2014 ${seg.item.label}`,
+                    "data-testid": `${testId}-entry-${seg.item.id}`,
+                    style: {
+                      gridColumn: `${seg.startCol + 1} / span ${seg.span}`,
+                      gridRow: seg.lane + 1
+                    },
+                    className: cn(
+                      // One line per event (truncated), so several events stack
+                      // compactly on the same day instead of a few tall bars
+                      // pushing the rest into a "+n more". Every event is the
+                      // SAME neutral colour; the one open in the composer is
+                      // marked by the caller (a ring), not by a different fill.
+                      "block h-full w-full truncate text-left text-xs leading-5 px-1.5",
+                      "bg-muted text-muted-foreground",
+                      seg.isStart && "rounded-l",
+                      seg.isEnd && "rounded-r"
+                    ),
+                    children: seg.isStart ? seg.item.label : " "
+                  },
+                  `${seg.item.id}-${seg.startCol}`
+                )),
+                overflow > 0 && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "text-xs text-muted-foreground px-1",
+                    style: { gridColumn: "1 / span 7", gridRow: maxLanes + 1 },
+                    children: [
+                      "+",
+                      overflow,
+                      " more"
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] }, dayKey(week[0]));
+    }) })
+  ] });
+}
+var TIMELINE_ZOOM = { MIN: 1, MAX: 10, STEP: 0.25 };
+function TimelineZoomControl({
+  zoom,
+  onZoomChange,
+  className,
+  testId = "timeline-gantt"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1",
+        className
+      ),
+      "data-testid": `${testId}-zoom`,
+      children: [
+        /* @__PURE__ */ jsx(ZoomOut, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            "aria-label": "Timeline zoom",
+            "data-testid": `${testId}-zoom-slider`,
+            min: TIMELINE_ZOOM.MIN,
+            max: TIMELINE_ZOOM.MAX,
+            step: TIMELINE_ZOOM.STEP,
+            value: zoom,
+            onChange: (e) => onZoomChange(Number(e.target.value)),
+            className: "h-1 w-24 cursor-pointer accent-primary"
+          }
+        ),
+        /* @__PURE__ */ jsx(ZoomIn, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs("span", { className: "w-11 shrink-0 text-right text-xs tabular-nums text-muted-foreground", children: [
+          Math.round(zoom * 100),
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+var NEUTRAL_BAR = "#94a3b8";
+function barBackground(colors) {
+  const c = (colors ?? []).filter(Boolean).slice(0, 3);
+  if (c.length === 0) return NEUTRAL_BAR;
+  if (c.length === 1) return c[0];
+  const step = 100 / c.length;
+  const stops = c.map((col, i) => `${col} ${i * step}% ${(i + 1) * step}%`).join(", ");
+  return `linear-gradient(180deg, ${stops})`;
+}
+var WEEK_MS = 7 * 24 * 60 * 60 * 1e3;
+function formatAxisDate(d, intervalDays) {
+  if (intervalDays < 45) {
+    return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+  }
+  if (intervalDays < 365 * 2) {
+    return d.toLocaleDateString("en-US", { month: "short", year: "numeric" });
+  }
+  return d.toLocaleDateString("en-US", { year: "numeric" });
+}
+function TimelineGantt({
+  items,
+  onSelect,
+  selectedIds,
+  renderDetail,
+  labelWidth = 240,
+  onLabelWidthChange,
+  minLabelWidth = 120,
+  maxLabelWidth = 600,
+  zoom: zoomProp,
+  onZoomChange,
+  navigatorContainer,
+  navigatorTotal,
+  emptyMessage = "Nothing dated yet.",
+  className,
+  testId = "timeline-gantt"
+}) {
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [internalZoom, setInternalZoom] = useState(1);
+  const zoomControlled = zoomProp != null && onZoomChange != null;
+  const zoomValue = zoomControlled ? zoomProp : internalZoom;
+  const setZoomValue = zoomControlled ? onZoomChange : setInternalZoom;
+  const dragRef = useRef(null);
+  const chartRef = useRef(null);
+  const gutterBodyRef = useRef(null);
+  const startResize = (e) => {
+    if (!onLabelWidthChange) return;
+    e.preventDefault();
+    dragRef.current = { startX: e.clientX, startWidth: labelWidth };
+    const onMove = (ev) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      const next = Math.min(
+        maxLabelWidth,
+        Math.max(minLabelWidth, drag.startWidth + (ev.clientX - drag.startX))
+      );
+      onLabelWidthChange(next);
+    };
+    const onUp = () => {
+      dragRef.current = null;
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+  const rows = items.filter((i) => parseIso(i.start) !== null).slice().sort((a, b) => parseIso(a.start).getTime() - parseIso(b.start).getTime());
+  const select = (index) => {
+    setActiveIndex(index);
+    onSelect?.(index === null ? null : rows[index]);
+  };
+  const selectedSet = new Set(selectedIds ?? []);
+  const selectedRowIndex = rows.findIndex((r) => selectedSet.has(r.id));
+  const currentIndex = selectedRowIndex >= 0 ? selectedRowIndex : activeIndex;
+  const goTo = (index) => select(Math.max(0, Math.min(rows.length - 1, index)));
+  const navigator = /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5 text-sm font-light", "data-testid": `${testId}-nav`, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Previous event",
+        "data-testid": `${testId}-nav-prev`,
+        disabled: rows.length === 0 || currentIndex === null || currentIndex <= 0,
+        onClick: () => goTo((currentIndex ?? 0) - 1),
+        className: "rounded p-0.5 text-muted-foreground enabled:hover:bg-accent enabled:hover:text-foreground disabled:opacity-30",
+        children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "tabular-nums text-muted-foreground", "data-testid": `${testId}-nav-position`, children: [
+      currentIndex !== null ? currentIndex + 1 : "\u2013",
+      " /",
+      " ",
+      navigatorTotal ?? (rows.length > 0 ? rows.length : "\u2013")
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Next event",
+        "data-testid": `${testId}-nav-next`,
+        disabled: rows.length === 0 || currentIndex !== null && currentIndex >= rows.length - 1,
+        onClick: () => goTo(currentIndex === null ? 0 : currentIndex + 1),
+        className: "rounded p-0.5 text-muted-foreground enabled:hover:bg-accent enabled:hover:text-foreground disabled:opacity-30",
+        children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": `${testId}-empty-state`,
+        className: cn(
+          "flex flex-col items-center justify-center py-16 text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Calendar, { className: "w-12 h-12 mb-3 opacity-30" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm", children: emptyMessage }),
+          navigatorContainer && createPortal(navigator, navigatorContainer)
+        ]
+      }
+    );
+  }
+  const allDates = rows.flatMap((i) => {
+    const s = parseIso(i.start);
+    return [s, parseIso(i.end ?? null) ?? s];
+  });
+  const minTime = Math.min(...allDates.map((d) => d.getTime()));
+  const maxTime = Math.max(...allDates.map((d) => d.getTime()));
+  const pad = Math.max((maxTime - minTime) * 0.04, WEEK_MS);
+  const axisMin = new Date(minTime - pad);
+  const axisMax = new Date(maxTime + pad);
+  const axisRange = axisMax.getTime() - axisMin.getTime();
+  const toPercent = (d) => Math.min(100, Math.max(0, (d.getTime() - axisMin.getTime()) / axisRange * 100));
+  const tickCount = Math.max(2, Math.min(50, Math.round(8 * zoomValue) + 1));
+  const tickStep = axisRange / (tickCount - 1);
+  const tickIntervalDays = tickStep / DAY_MS;
+  const ticks = Array.from(
+    { length: tickCount },
+    (_, i) => new Date(axisMin.getTime() + tickStep * i)
+  );
+  const today = /* @__PURE__ */ new Date();
+  const todayPct = toPercent(today);
+  const showToday = today > axisMin && today < axisMax;
+  const activeItem = activeIndex !== null ? rows[activeIndex] : null;
+  const detail = activeItem ? renderDetail?.(activeItem) : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col p-5", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          "data-testid": `${testId}-gutter-divider`,
+          style: { left: `calc(20px + ${labelWidth}px)` },
+          className: "pointer-events-none absolute top-0 bottom-0 z-30 w-[3px] -translate-x-1/2 bg-border"
+        }
+      ),
+      onLabelWidthChange && /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "separator",
+          "aria-orientation": "vertical",
+          "aria-label": "Resize event column",
+          "data-testid": `${testId}-label-resizer`,
+          onMouseDown: startResize,
+          style: { left: `calc(20px + ${labelWidth}px)` },
+          className: "absolute top-0 bottom-0 z-30 w-2 -translate-x-1/2 cursor-col-resize group",
+          children: /* @__PURE__ */ jsx("div", { className: "mx-auto h-full w-[3px] transition-colors group-hover:bg-primary" })
+        }
+      ),
+      !zoomControlled && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 z-30 shadow-sm", children: /* @__PURE__ */ jsx(TimelineZoomControl, { zoom: zoomValue, onZoomChange: setZoomValue, testId }) }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex min-h-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { style: { width: labelWidth, flexShrink: 0 }, className: "flex min-h-0 flex-col", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-1 flex h-6 shrink-0 items-center gap-1 border-b border-border pr-3 text-sm font-medium text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { children: "Event" }),
+            navigatorContainer === void 0 ? /* @__PURE__ */ jsx("span", { className: "ml-auto", children: navigator }) : navigatorContainer && createPortal(navigator, navigatorContainer)
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: gutterBodyRef,
+              "data-testid": `${testId}-gutter`,
+              className: "min-h-0 flex-1 overflow-hidden",
+              onWheel: (e) => {
+                if (chartRef.current) chartRef.current.scrollTop += e.deltaY;
+              },
+              children: /* @__PURE__ */ jsx("div", { className: "pt-4 pb-6", children: rows.map((item, i) => {
+                const isActive = activeIndex === i;
+                const isSelected = selectedIds?.includes(item.id) ?? false;
+                const highlighted = isActive || isSelected;
+                const zebra = i % 2 === 1;
+                return (
+                  // Fixed h-9 = the track row's h-7 bar + py-1, so the two
+                  // columns stay row-for-row aligned. Clicking the label
+                  // selects the row exactly like its bar does — the label IS
+                  // the event's title, so it should be a target too. Keep the
+                  // `break-words leading-snug` tail on THIS element — a scoped
+                  // CSS rule (.facts-gantt .break-words.leading-snug) clamps it
+                  // to one line. A selected row gets the tint plus a left
+                  // accent bar, mirroring the facts table's edited-row mark.
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      onClick: () => select(isActive ? null : i),
+                      className: cn(
+                        "flex h-9 cursor-pointer items-center rounded border-l-[3px] pr-3 text-xs font-medium",
+                        isSelected ? "border-l-primary bg-primary/10" : zebra ? "border-l-transparent bg-muted" : "border-l-transparent bg-background",
+                        highlighted ? "text-foreground" : "text-muted-foreground",
+                        "break-words leading-snug"
+                      ),
+                      title: item.label,
+                      children: /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
+                        /* @__PURE__ */ jsxs("span", { className: "mr-1 tabular-nums text-muted-foreground/60", children: [
+                          i + 1,
+                          "."
+                        ] }),
+                        item.label
+                      ] })
+                    },
+                    item.id
+                  )
+                );
+              }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: chartRef,
+            "data-testid": `${testId}-scroller`,
+            onScroll: (e) => {
+              if (gutterBodyRef.current) gutterBodyRef.current.scrollTop = e.currentTarget.scrollTop;
+            },
+            className: cn(
+              "scrollbar-subtle relative min-h-0 min-w-0 flex-1 overflow-y-auto",
+              zoomValue > 1 ? "overflow-x-auto" : "overflow-x-hidden"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "relative min-h-full",
+                style: { width: `${zoomValue * 100}%`, minWidth: "100%" },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-20 mb-1 h-6 border-b border-border bg-background", children: ticks.map((tick, i) => {
+                    const isFirst = i === 0;
+                    const isLast = i === ticks.length - 1;
+                    const edgeShift = isFirst ? "translate-x-1" : isLast ? "-translate-x-full" : "-translate-x-1/2";
+                    return /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: { left: `${toPercent(tick)}%` },
+                        className: `absolute bottom-1 text-xs text-muted-foreground whitespace-nowrap select-none ${edgeShift}`,
+                        children: formatAxisDate(tick, tickIntervalDays)
+                      },
+                      i
+                    );
+                  }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "relative pt-4", children: [
+                    ticks.map((tick, i) => /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "aria-hidden": true,
+                        className: "pointer-events-none absolute top-0 bottom-0 z-10 border-l-2 border-border/30",
+                        style: { left: `${toPercent(tick)}%` }
+                      },
+                      `grid-${i}`
+                    )),
+                    showToday && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: "pointer-events-none absolute top-0 bottom-0 z-10",
+                        style: { left: `${todayPct}%` },
+                        children: [
+                          /* @__PURE__ */ jsx("div", { className: "h-full border-l-2 border-dashed border-muted-foreground/50" }),
+                          /* @__PURE__ */ jsx("span", { className: "absolute top-0 -translate-x-1/2 rounded border bg-background px-1 text-xs text-muted-foreground", children: "today" })
+                        ]
+                      }
+                    ),
+                    rows.map((item, i) => {
+                      const startDate = parseIso(item.start);
+                      const endDate = parseIso(item.end ?? null) ?? startDate;
+                      const leftPct = toPercent(startDate);
+                      const dayPct = DAY_MS / axisRange * 100;
+                      const widthPct = Math.max(dayPct, toPercent(endDate) - toPercent(startDate));
+                      const isActive = activeIndex === i;
+                      const isSelected = selectedIds?.includes(item.id) ?? false;
+                      const highlighted = isActive || isSelected;
+                      const zebra = i % 2 === 1;
+                      return (
+                        // Fixed h-9 (h-7 bar + py-1) — the gutter's label rows use
+                        // the same height, which is what keeps the columns aligned.
+                        /* @__PURE__ */ jsx("div", { className: "h-9 py-1", children: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "relative h-7 overflow-visible rounded-md border border-border",
+                              isSelected ? "bg-primary/10" : zebra ? "bg-muted" : "bg-background"
+                            ),
+                            children: /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                "data-testid": `${testId}-bar-${i}`,
+                                "aria-label": item.label,
+                                "aria-pressed": highlighted,
+                                style: {
+                                  left: `${leftPct}%`,
+                                  width: `${widthPct}%`,
+                                  // Colour-coded by the item's labels (up to three), not by
+                                  // row order — see barBackground / TimelineItem.colors.
+                                  background: barBackground(item.colors),
+                                  boxShadow: highlighted ? "0 0 0 2px white, 0 0 0 4px #6366f1" : "0 1px 3px rgba(0,0,0,.2)"
+                                },
+                                title: formatSpan(item.start, item.end) || void 0,
+                                className: "absolute top-0.5 h-6 min-w-[6px] rounded cursor-pointer transition-[filter] hover:brightness-110 focus:outline-none",
+                                onClick: () => select(isActive ? null : i)
+                              }
+                            )
+                          }
+                        ) }, item.id)
+                      );
+                    })
+                  ] })
+                ]
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": `${testId}-side-panel`,
+        className: cn(
+          "border-l bg-muted/20 flex flex-col shrink-0 overflow-hidden transition-all duration-300",
+          activeItem ? "w-60 open" : "w-0"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "w-60 p-4 flex flex-col gap-3 transition-opacity duration-200",
+              activeItem ? "opacity-100" : "opacity-0"
+            ),
+            children: activeItem && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "data-testid": `${testId}-panel-close`,
+                  className: "w-6 h-6 rounded flex items-center justify-center text-muted-foreground hover:bg-muted",
+                  onClick: () => select(null),
+                  "aria-label": "Close panel",
+                  children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-testid": `${testId}-panel-title`,
+                    className: "text-sm font-semibold text-foreground leading-snug",
+                    children: [
+                      activeIndex !== null && /* @__PURE__ */ jsxs("span", { className: "mr-1 tabular-nums text-muted-foreground", children: [
+                        activeIndex + 1,
+                        "."
+                      ] }),
+                      activeItem.label
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mt-1 text-xs text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx(Calendar, { className: "w-3 h-3 shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { children: formatSpan(activeItem.start, activeItem.end) || "Date unknown" })
+                ] })
+              ] }),
+              activeItem.description && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("hr", { className: "border-border" }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1", children: "Summary" }),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      "data-testid": `${testId}-panel-desc`,
+                      className: "text-xs text-muted-foreground leading-relaxed",
+                      children: activeItem.description
+                    }
+                  )
+                ] })
+              ] }),
+              detail && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("hr", { className: "border-border" }),
+                detail
+              ] })
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { TIMELINE_ZOOM, TimelineCalendar, TimelineGantt, TimelineZoomControl, dayKey, formatSpan, monthLabel, parseIso, utcDay };
+//# sourceMappingURL=chunk-4EZVCGRL.js.map
+//# sourceMappingURL=chunk-4EZVCGRL.js.map