@arbidocs/blocks 0.3.177 → 0.3.180

package/dist/{chunk-6HGMAQLB.cjs → chunk-DBAUZD7A.cjs}

@@ -6,6 +6,7 @@ var react = require('react');
 var lucideReact = require('lucide-react');
 var ui = require('@arbidocs/react/ui');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 
 // src/theme/tokens.ts
 var THEME_STYLE_ID = "arbi-theme-vars";
@@ -678,20 +679,62 @@ function formatSpan(startIso, endIso, timezone) {
   return `${day(start)} \u2013 ${day(end)}`;
 }
 var DEFAULT_MAX_LANES = 3;
-var MAX_WEEKS = 520;
-function isPrecise(item) {
-  if (!item.start || !item.end) return false;
-  return item.start.slice(0, 10) === item.end.slice(0, 10);
-}
+var MAX_WEEKS = 2600;
 function TimelineCalendar({
   items,
   onSelect,
+  selectedIds,
   maxLanes = DEFAULT_MAX_LANES,
+  navigatorContainer,
+  navigatorTotal,
   emptyState,
   className,
   testId = "timeline-calendar"
 }) {
   const dated = react.useMemo(() => items.filter((i) => i.start), [items]);
+  const sortedItems = react.useMemo(
+    () => [...dated].sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()),
+    [dated]
+  );
+  const indexById = react.useMemo(() => new Map(sortedItems.map((it, i) => [it.id, i])), [sortedItems]);
+  const [activeIndex, setActiveIndex] = react.useState(null);
+  const scrollRef = react.useRef(null);
+  const select = react.useCallback(
+    (index) => {
+      const clamped = Math.max(0, Math.min(sortedItems.length - 1, index));
+      setActiveIndex(clamped);
+      onSelect?.(sortedItems[clamped]);
+      return clamped;
+    },
+    [onSelect, sortedItems]
+  );
+  const scrollToItem = react.useCallback(
+    (id, behavior) => {
+      scrollRef.current?.querySelector(`[data-testid="${testId}-entry-${id}"]`)?.scrollIntoView({ block: "center", behavior });
+    },
+    [testId]
+  );
+  const lastNavScrollRef = react.useRef(null);
+  const goTo = react.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");
+  react.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 = react.useMemo(() => {
     if (dated.length === 0) return [];
     const times = dated.flatMap((i) => [
@@ -717,22 +760,32 @@ function TimelineCalendar({
     return out;
   }, [dated]);
   const segmentsByWeek = react.useMemo(() => {
-    return weeks.map((week) => {
+    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 overlapping = dated.map((item) => ({
-        item,
-        start: utcDay(new Date(item.start)),
-        end: utcDay(new Date(item.end ?? item.start))
-      })).filter(({ start, end }) => start <= weekEnd && end >= weekStart).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 laneEnds = [];
       const segments = [];
       let overflow = 0;
-      for (const { item, start, end } of overlapping) {
+      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);
@@ -759,9 +812,52 @@ function TimelineCalendar({
   if (weeks.length === 0 && emptyState) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5", "data-testid": `${testId}-nav`, children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+      }
+    )
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("flex flex-col h-full", className), "data-testid": testId, children: [
+    navigatorContainer === void 0 ? navigator && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center justify-end border-b border-border px-2 py-1", children: navigator }) : navigatorContainer && navigator && reactDom.createPortal(navigator, navigatorContainer),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 border-b border-border bg-background", children: WEEKDAY_NAMES.map((d) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1 text-[11px] text-muted-foreground text-center", children: d }, d)) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", "data-testid": `${testId}-scroll`, children: weeks.map((week, wi) => {
+    /* @__PURE__ */ jsxRuntime.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);
@@ -796,13 +892,13 @@ function TimelineCalendar({
             "div",
             {
               className: "grid grid-cols-7 gap-y-0.5 px-0.5 pb-1 bg-muted/40",
-              style: { gridAutoRows: "minmax(18px, auto)", minHeight: 62 },
+              style: { gridAutoRows: "18px", minHeight: 62 },
               children: [
                 segments.map((seg) => /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     type: "button",
-                    onClick: () => onSelect?.(seg.item),
+                    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: {
@@ -810,8 +906,13 @@ function TimelineCalendar({
                       gridRow: seg.lane + 1
                     },
                     className: ui.cn(
-                      "text-left text-[10px] leading-[13px] py-[2px] px-1 min-h-[18px] whitespace-normal break-words line-clamp-3",
-                      isPrecise(seg.item) ? "bg-primary/20 text-foreground" : "bg-muted text-muted-foreground",
+                      // 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-[10px] leading-[14px] py-[1px] px-1",
+                      "bg-muted text-muted-foreground",
                       seg.isStart && "rounded-l",
                       seg.isEnd && "rounded-r"
                     ),
@@ -839,38 +940,152 @@ function TimelineCalendar({
     }) })
   ] });
 }
-var BAR_PALETTE = [
-  {
-    gradient: "linear-gradient(90deg, #6366f1, #818cf8)",
-    shadow: "0 2px 6px rgba(99,102,241,.35)"
-  },
-  {
-    gradient: "linear-gradient(90deg, #8b5cf6, #a78bfa)",
-    shadow: "0 2px 6px rgba(139,92,246,.35)"
-  },
-  { gradient: "linear-gradient(90deg, #ef4444, #f87171)", shadow: "0 2px 6px rgba(239,68,68,.35)" },
-  {
-    gradient: "linear-gradient(90deg, #f59e0b, #fbbf24)",
-    shadow: "0 2px 6px rgba(245,158,11,.35)"
-  },
-  { gradient: "linear-gradient(90deg, #22c55e, #4ade80)", shadow: "0 2px 6px rgba(34,197,94,.35)" },
-  { gradient: "linear-gradient(90deg, #06b6d4, #22d3ee)", shadow: "0 2px 6px rgba(6,182,212,.35)" }
-];
+var TIMELINE_ZOOM = { MIN: 1, MAX: 10, STEP: 0.25 };
+function TimelineZoomControl({
+  zoom,
+  onZoomChange,
+  className,
+  testId = "timeline-gantt"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ui.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__ */ jsxRuntime.jsx(lucideReact.ZoomOut, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ZoomIn, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "w-11 shrink-0 text-right text-[11px] 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) {
-  return d.toLocaleDateString("en-US", { month: "short", year: "numeric" });
+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] = react.useState(null);
+  const [internalZoom, setInternalZoom] = react.useState(1);
+  const zoomControlled = zoomProp != null && onZoomChange != null;
+  const zoomValue = zoomControlled ? zoomProp : internalZoom;
+  const setZoomValue = zoomControlled ? onZoomChange : setInternalZoom;
+  const dragRef = react.useRef(null);
+  const chartRef = react.useRef(null);
+  const gutterBodyRef = react.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) => parseIso2(i.start) !== null).slice().sort((a, b) => parseIso2(a.start).getTime() - parseIso2(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__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-sm font-light", "data-testid": `${testId}-nav`, children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+      }
+    )
+  ] });
   if (rows.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -882,7 +1097,8 @@ function TimelineGantt({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "w-12 h-12 mb-3 opacity-30" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: emptyMessage })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: emptyMessage }),
+          navigatorContainer && reactDom.createPortal(navigator, navigatorContainer)
         ]
       }
     );
@@ -898,89 +1114,200 @@ function TimelineGantt({
   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: 5 },
-    (_, i) => new Date(axisMin.getTime() + axisRange * i / 4)
+    { 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;
-  const select = (index) => {
-    setActiveIndex(index);
-    onSelect?.(index === null ? null : rows[index]);
-  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("flex h-full min-h-0", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 p-5 overflow-x-auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex mb-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col p-5", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mx-auto h-full w-[3px] transition-colors group-hover:bg-primary" })
+        }
+      ),
+      !zoomControlled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-2 z-30 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(TimelineZoomControl, { zoom: zoomValue, onZoomChange: setZoomValue, testId }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex min-h-0 flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: labelWidth, flexShrink: 0 }, className: "flex min-h-0 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: "Event" }),
+            navigatorContainer === void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: navigator }) : navigatorContainer && reactDom.createPortal(navigator, navigatorContainer)
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      onClick: () => select(isActive ? null : i),
+                      className: ui.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__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-1 tabular-nums text-muted-foreground/60", children: [
+                          i + 1,
+                          "."
+                        ] }),
+                        item.label
+                      ] })
+                    },
+                    item.id
+                  )
+                );
+              }) })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            style: { width: labelWidth, flexShrink: 0 },
-            className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground pb-1",
-            children: "Event"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 relative h-6 border-b border-border", children: ticks.map((tick, i) => /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            style: { left: `${toPercent(tick)}%` },
-            className: "absolute bottom-1 text-[10px] text-muted-foreground -translate-x-1/2 whitespace-nowrap select-none",
-            children: formatAxisDate(tick)
-          },
-          i
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mt-2", children: [
-        showToday && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "absolute top-0 bottom-0 pointer-events-none z-10",
-            style: {
-              left: `calc(${labelWidth}px + (100% - ${labelWidth}px) * ${todayPct / 100})`
+            ref: chartRef,
+            "data-testid": `${testId}-scroller`,
+            onScroll: (e) => {
+              if (gutterBodyRef.current) gutterBodyRef.current.scrollTop = e.currentTarget.scrollTop;
             },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full border-l-2 border-dashed border-muted-foreground/50" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-5 -translate-x-1/2 text-[9px] text-muted-foreground bg-background border rounded px-1", children: "today" })
-            ]
-          }
-        ),
-        rows.map((item, i) => {
-          const startDate = parseIso2(item.start);
-          const endDate = parseIso2(item.end ?? null) ?? startDate;
-          const leftPct = toPercent(startDate);
-          const widthPct = Math.max(1, toPercent(endDate) - toPercent(startDate));
-          const color = BAR_PALETTE[i % BAR_PALETTE.length];
-          const isActive = activeIndex === i;
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center mb-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: { width: labelWidth, flexShrink: 0 },
-                className: "text-xs font-medium text-muted-foreground pr-3 break-words leading-snug",
-                children: item.label
-              }
+            className: ui.cn(
+              "scrollbar-subtle relative min-h-0 min-w-0 flex-1 overflow-y-auto",
+              zoomValue > 1 ? "overflow-x-auto" : "overflow-x-hidden"
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-7 bg-muted/30 border border-border rounded-md relative overflow-visible", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                "data-testid": `${testId}-bar-${i}`,
-                "aria-label": item.label,
-                "aria-pressed": isActive,
-                style: {
-                  left: `${leftPct}%`,
-                  width: `${widthPct}%`,
-                  background: color.gradient,
-                  boxShadow: isActive ? "0 0 0 2px white, 0 0 0 4px #6366f1" : color.shadow
-                },
-                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)
+                className: "relative min-h-full",
+                style: { width: `${zoomValue * 100}%`, minWidth: "100%" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: { left: `${toPercent(tick)}%` },
+                        className: `absolute bottom-1 text-[10px] text-muted-foreground whitespace-nowrap select-none ${edgeShift}`,
+                        children: formatAxisDate(tick, tickIntervalDays)
+                      },
+                      i
+                    );
+                  }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative pt-4", children: [
+                    ticks.map((tick, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: "pointer-events-none absolute top-0 bottom-0 z-10",
+                        style: { left: `${todayPct}%` },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full border-l-2 border-dashed border-muted-foreground/50" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-0 -translate-x-1/2 rounded border bg-background px-1 text-[9px] text-muted-foreground", children: "today" })
+                        ]
+                      }
+                    ),
+                    rows.map((item, i) => {
+                      const startDate = parseIso2(item.start);
+                      const endDate = parseIso2(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__ */ jsxRuntime.jsx("div", { className: "h-9 py-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: ui.cn(
+                              "relative h-7 overflow-visible rounded-md border border-border",
+                              isSelected ? "bg-primary/10" : zebra ? "bg-muted" : "bg-background"
+                            ),
+                            children: /* @__PURE__ */ jsxRuntime.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)
+                      );
+                    })
+                  ] })
+                ]
               }
-            ) })
-          ] }, item.id);
-        })
+            )
+          }
+        )
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1010,12 +1337,18 @@ function TimelineGantt({
                 }
               ) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
                     "data-testid": `${testId}-panel-title`,
                     className: "text-sm font-semibold text-foreground leading-snug",
-                    children: activeItem.label
+                    children: [
+                      activeIndex !== null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-1 tabular-nums text-muted-foreground", children: [
+                        activeIndex + 1,
+                        "."
+                      ] }),
+                      activeItem.label
+                    ]
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mt-1 text-xs text-muted-foreground", children: [
@@ -2038,6 +2371,7 @@ exports.SectionHeading = SectionHeading;
 exports.Spacer = Spacer;
 exports.Steps = Steps;
 exports.THEME_STYLE_ID = THEME_STYLE_ID;
+exports.TIMELINE_ZOOM = TIMELINE_ZOOM;
 exports.Tabs = Tabs;
 exports.TeamGrid = TeamGrid;
 exports.Testimonial = Testimonial;
@@ -2046,6 +2380,7 @@ exports.ThemeEditor = ThemeEditor;
 exports.Timeline = Timeline;
 exports.TimelineCalendar = TimelineCalendar;
 exports.TimelineGantt = TimelineGantt;
+exports.TimelineZoomControl = TimelineZoomControl;
 exports.VideoEmbed = VideoEmbed;
 exports.applyFontVars = applyFontVars;
 exports.applyStoredTheme = applyStoredTheme;
@@ -2078,5 +2413,5 @@ exports.toHslTriplet = toHslTriplet;
 exports.useAssetRenderer = useAssetRenderer;
 exports.useAssetResolverActive = useAssetResolverActive;
 exports.utcDay = utcDay;
-//# sourceMappingURL=chunk-6HGMAQLB.cjs.map
-//# sourceMappingURL=chunk-6HGMAQLB.cjs.map
+//# sourceMappingURL=chunk-DBAUZD7A.cjs.map
+//# sourceMappingURL=chunk-DBAUZD7A.cjs.map