@abraca/nuxt 0.3.0 → 1.5.0

package/dist/runtime/components/renderers/ATimelineRenderer.vue

@@ -1,9 +1,15 @@
 <script setup>
 import { ref, computed, watch, onBeforeUnmount } from "vue";
+import { useRuntimeConfig } from "#imports";
 import { useRendererBase } from "../../composables/useRendererBase";
 import { useTouchDrag } from "../../composables/useTouchDrag";
 import { useNodePanel } from "../../composables/useNodePanel";
+import { useTimelineView } from "../../composables/useTimelineView";
 import { DEFAULT_LOCALE } from "../../locale";
+import ATimelineToolbar from "./timeline/ATimelineToolbar.vue";
+import ATimelineLabelPanel from "./timeline/ATimelineLabelPanel.vue";
+import ATimelineAxis from "./timeline/ATimelineAxis.vue";
+import ATimelineBarArea from "./timeline/ATimelineBarArea.vue";
 const props = defineProps({
   docId: { type: String, required: true },
   childProvider: { type: null, required: true },
@@ -27,77 +33,139 @@ const {
   closePanel
 } = useNodePanel(childProviderRef);
 const myClientId = computed(() => props.childProvider?.awareness?.clientID ?? 0);
-const zoomLevel = ref("month");
-const ZOOM_CONFIG = {
-  week: { totalDays: 14, pixelsPerDay: 40, stepDays: 1 },
-  month: { totalDays: 60, pixelsPerDay: 14, stepDays: 7 },
-  quarter: { totalDays: 180, pixelsPerDay: 4, stepDays: 30 }
-};
-const cfg = computed(() => ZOOM_CONFIG[zoomLevel.value]);
+const timelineContainerRef = ref(null);
+const scrollBodyRef = ref(null);
+const storedPpd = computed(() => {
+  const entry = tree.treeMap.get(props.docId);
+  const val = entry?.meta?.timelinePixelsPerDay;
+  return val ? Number(val) : void 0;
+});
+const storedZoom = computed(
+  () => tree.treeMap.get(props.docId)?.meta?.timelineZoom
+);
+const storedCenter = computed(
+  () => tree.treeMap.get(props.docId)?.meta?.timelineCenterDate
+);
+const timelineEntries = computed(() => {
+  const directChildren = tree.childrenOf(null);
+  const result = [...directChildren];
+  for (const epic of directChildren) {
+    result.push(...tree.childrenOf(epic.id));
+  }
+  return result;
+});
+const tl = useTimelineView({
+  containerRef: timelineContainerRef,
+  scrollContainerRef: scrollBodyRef,
+  storedPixelsPerDay: storedPpd,
+  storedZoomLevel: storedZoom,
+  storedCenterDate: storedCenter,
+  entries: timelineEntries,
+  onViewChange: (ppd, centerDate) => {
+    if (!props.editable) return;
+    tree.updateMeta(props.docId, {
+      timelinePixelsPerDay: ppd,
+      timelineCenterDate: centerDate
+    });
+  }
+});
 const epics = computed(() => tree.childrenOf(null));
+let viewportBroadcastTimer = null;
+watch([tl.pixelsPerDay, tl.centerDate], () => {
+  if (viewportBroadcastTimer) clearTimeout(viewportBroadcastTimer);
+  viewportBroadcastTimer = setTimeout(() => {
+    viewportBroadcastTimer = null;
+    setLocalState({
+      "timeline:camera": {
+        pixelsPerDay: tl.pixelsPerDay.value,
+        centerMs: tl.centerDate.value.getTime(),
+        t: Date.now()
+      }
+    });
+  }, 150);
+});
+const showLabels = ref(true);
+const LABEL_MIN = 80;
+const LABEL_MAX = 480;
+const labelWidth = ref(192);
+let resizing = false;
+let resizeStartX = 0;
+let resizeStartWidth = 0;
+function onResizePointerDown(e) {
+  e.preventDefault();
+  resizing = true;
+  resizeStartX = e.clientX;
+  resizeStartWidth = labelWidth.value;
+  document.body.style.cursor = "col-resize";
+  document.body.style.userSelect = "none";
+  document.addEventListener("pointermove", onResizePointerMove);
+  document.addEventListener("pointerup", onResizePointerUp);
+}
+function onResizePointerMove(e) {
+  if (!resizing) return;
+  labelWidth.value = Math.max(LABEL_MIN, Math.min(LABEL_MAX, resizeStartWidth + (e.clientX - resizeStartX)));
+}
+function onResizePointerUp() {
+  resizing = false;
+  document.body.style.cursor = "";
+  document.body.style.userSelect = "";
+  document.removeEventListener("pointermove", onResizePointerMove);
+  document.removeEventListener("pointerup", onResizePointerUp);
+}
 function addEpic() {
   if (!props.editable) return;
-  const id = tree.createChild(null, locale.value.untitled);
+  const id = tree.createChild(null, locale.value.newEpic);
   const now = /* @__PURE__ */ new Date();
   const end = new Date(now);
   end.setDate(end.getDate() + 14);
   tree.updateMeta(id, {
-    dateStart: now.toISOString().slice(0, 10),
-    dateEnd: end.toISOString().slice(0, 10),
+    dateStart: tl.toDateStr(now),
+    dateEnd: tl.toDateStr(end),
     taskProgress: 0,
     color: "#6366f1"
   });
 }
+function addMilestone(epicId) {
+  if (!props.editable) return;
+  const id = tree.createChild(epicId ?? null, locale.value.newMilestone);
+  const now = tl.toDateStr(/* @__PURE__ */ new Date());
+  tree.updateMeta(id, {
+    dateStart: now,
+    color: "#f59e0b"
+  });
+}
 function addTask(epicId) {
   if (!props.editable) return;
-  const id = tree.createChild(epicId, locale.value.untitled);
+  const id = tree.createChild(epicId, locale.value.newTask);
   const now = /* @__PURE__ */ new Date();
   const end = new Date(now);
   end.setDate(end.getDate() + 7);
   tree.updateMeta(id, {
-    dateStart: now.toISOString().slice(0, 10),
-    dateEnd: end.toISOString().slice(0, 10),
+    dateStart: tl.toDateStr(now),
+    dateEnd: tl.toDateStr(end),
     taskProgress: 0,
     color: "#818cf8"
   });
 }
-const startOfAxis = computed(() => {
-  const d = /* @__PURE__ */ new Date();
-  d.setDate(1);
-  d.setMonth(d.getMonth() - 1);
-  return d;
-});
-const axisWidth = computed(() => cfg.value.totalDays * cfg.value.pixelsPerDay);
-function dateToOffset(dateStr) {
-  const d = new Date(dateStr);
-  const diff = Math.floor(
-    (d.getTime() - startOfAxis.value.getTime()) / (1e3 * 60 * 60 * 24)
-  );
-  return diff * cfg.value.pixelsPerDay;
-}
-function spanWidth(start, end) {
-  const s = new Date(start);
-  const e = new Date(end);
-  const days = Math.max(
-    1,
-    Math.ceil((e.getTime() - s.getTime()) / (1e3 * 60 * 60 * 24))
-  );
-  return days * cfg.value.pixelsPerDay;
+const renameId = ref(null);
+const renameValue = ref("");
+let renameCooldown = false;
+function startRename(id, label) {
+  if (!props.editable) return;
+  renameId.value = id;
+  renameValue.value = label;
+  renameCooldown = true;
+  setTimeout(() => {
+    renameCooldown = false;
+  }, 200);
 }
-const axisLabels = computed(() => {
-  const labels = [];
-  for (let i = 0; i < cfg.value.totalDays; i += cfg.value.stepDays) {
-    const d = new Date(startOfAxis.value);
-    d.setDate(d.getDate() + i);
-    const fmt = zoomLevel.value === "week" ? { weekday: "short", day: "numeric" } : { month: "short", day: "numeric" };
-    labels.push({
-      label: d.toLocaleDateString("en-US", fmt),
-      offset: i * cfg.value.pixelsPerDay
-    });
+function commitRename() {
+  if (renameCooldown) return;
+  if (renameId.value && renameValue.value.trim()) {
+    tree.renameEntry(renameId.value, renameValue.value.trim());
   }
-  return labels;
-});
-const todayOffset = computed(() => dateToOffset((/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
+  renameId.value = null;
+}
 function orderBetween(list, targetIdx) {
   const prev = list[targetIdx - 1];
   const next = list[targetIdx];
@@ -118,17 +186,6 @@ const {
     tree.moveEntry(srcId, null, newOrder);
   }
 });
-function taskFocusers(taskId) {
-  return states.value.filter(
-    (s) => s.clientId !== myClientId.value && s["timeline:focused"] === taskId
-  );
-}
-function focusTask(id) {
-  setLocalState({ "timeline:focused": id });
-}
-function clearFocus() {
-  setLocalState({ "timeline:focused": null });
-}
 const barDragId = ref(null);
 const barDragStart = ref({ clientX: 0, origStart: "", origEnd: "" });
 const barDidMove = ref(false);
@@ -140,7 +197,7 @@ function onBarPointerDown(e, id) {
   e.stopPropagation();
   const entry = tree.entries.value.find((en) => en.id === id);
   const meta = entry?.meta;
-  if (!meta?.dateStart || !meta?.dateEnd) return;
+  if (!meta?.dateStart) return;
   barDragId.value = id;
   barDidMove.value = false;
   barHoverEpicId.value = null;
@@ -148,42 +205,78 @@ function onBarPointerDown(e, id) {
   barDragStart.value = {
     clientX: e.clientX,
     origStart: meta.dateStart,
-    origEnd: meta.dateEnd
+    origEnd: meta.dateEnd ?? meta.dateStart
   };
-  e.currentTarget.setPointerCapture(e.pointerId);
+  document.addEventListener("pointermove", onDocBarPointerMove);
+  document.addEventListener("pointerup", onDocBarPointerUp);
 }
-function onBarPointerMove(e, id) {
-  if (barDragId.value !== id) return;
-  const entry = tree.entries.value.find((en) => en.id === id);
-  if (!entry?.meta?.dateStart) return;
+function onDocBarPointerMove(e) {
+  if (!barDragId.value) return;
+  const id = barDragId.value;
   const dx = e.clientX - barDragStart.value.clientX;
   if (Math.abs(dx) > 4) barDidMove.value = true;
   const els = document.elementsFromPoint(e.clientX, e.clientY);
   const epicEl = els.find((el) => el.dataset?.epicId);
   barHoverEpicId.value = epicEl?.dataset.epicId ?? null;
-  const daysShifted = Math.round(dx / cfg.value.pixelsPerDay);
+  const daysShifted = Math.round(dx / tl.pixelsPerDay.value);
   if (daysShifted === lastDaysShifted) return;
   lastDaysShifted = daysShifted;
   const MS = 24 * 60 * 60 * 1e3;
   const s0 = new Date(barDragStart.value.origStart).getTime();
   const e0 = new Date(barDragStart.value.origEnd).getTime();
-  tree.updateMeta(id, {
-    dateStart: new Date(s0 + daysShifted * MS).toISOString().slice(0, 10),
-    dateEnd: new Date(e0 + daysShifted * MS).toISOString().slice(0, 10)
-  });
+  const isMilestone = barDragStart.value.origStart === barDragStart.value.origEnd;
+  const newMeta = {
+    dateStart: new Date(s0 + daysShifted * MS).toISOString().slice(0, 10)
+  };
+  if (!isMilestone) {
+    newMeta.dateEnd = new Date(e0 + daysShifted * MS).toISOString().slice(0, 10);
+  }
+  tree.updateMeta(id, newMeta);
 }
-function onBarPointerUp(id, epicId) {
-  if (barDragId.value !== id) return;
-  barDragId.value = null;
-  if (epicId && barHoverEpicId.value && barHoverEpicId.value !== epicId) {
+function onDocBarPointerUp() {
+  document.removeEventListener("pointermove", onDocBarPointerMove);
+  document.removeEventListener("pointerup", onDocBarPointerUp);
+  if (!barDragId.value) return;
+  const id = barDragId.value;
+  const entry = tree.entries.value.find((en) => en.id === id);
+  const currentParent = entry?.parentId;
+  if (currentParent && barHoverEpicId.value && barHoverEpicId.value !== currentParent) {
     tree.moveEntry(id, barHoverEpicId.value, Date.now());
   }
+  barDragId.value = null;
   barHoverEpicId.value = null;
 }
 function onBarClick(id, label) {
   if (barDidMove.value) return;
   openNode(id, label);
 }
+function focusItem(id) {
+  setLocalState({ "timeline:focused": id });
+}
+function unfocusItem() {
+  setLocalState({ "timeline:focused": null });
+}
+function itemFocusers(itemId) {
+  const result = [];
+  for (const s of states.value) {
+    if (s.clientId === myClientId.value) continue;
+    if (s["timeline:focused"] === itemId && s.user) {
+      result.push({ name: s.user.name ?? "", color: s.user.color ?? "#888" });
+    }
+  }
+  return result;
+}
+const remoteViewers = computed(
+  () => states.value.filter((s) => s.clientId !== myClientId.value && s.user).map((s) => ({
+    clientId: s.clientId,
+    name: s.user?.name ?? "",
+    color: s.user?.color ?? "#888"
+  }))
+);
+function goToDate(dateStr) {
+  const d = new Date(dateStr);
+  if (!Number.isNaN(d.getTime())) tl.navigateTo(d);
+}
 watch(childDoc, (doc) => {
   if (!doc) return;
   const legacyMap = doc.getMap("task-dates");
@@ -202,59 +295,38 @@ watch(childDoc, (doc) => {
     for (const key of [...legacyMap.keys()]) legacyMap.delete(key);
   });
 }, { immediate: true });
-const containerRef = ref(null);
-function onPointerMove(e) {
-  const rect = containerRef.value?.getBoundingClientRect();
-  if (!rect) return;
-  setLocalState({
-    pos: {
-      x: (e.clientX - rect.left) / rect.width * 100,
-      y: (e.clientY - rect.top) / rect.height * 100
-    }
-  });
-}
-function clearCursor() {
-  setLocalState({ pos: null });
-}
 onBeforeUnmount(() => {
-  setLocalState({ "pos": null, "timeline:focused": null });
+  setLocalState({ "timeline:focused": null });
+  document.removeEventListener("pointermove", onDocBarPointerMove);
+  document.removeEventListener("pointerup", onDocBarPointerUp);
+  document.removeEventListener("pointermove", onResizePointerMove);
+  document.removeEventListener("pointerup", onResizePointerUp);
 });
 defineExpose({ connectedUsers });
 </script>
 
 <template>
-  <div
-    ref="containerRef"
-    class="flex-1 min-h-0 flex flex-col relative"
-    @pointermove="onPointerMove"
-    @pointerleave="clearCursor"
-  >
+  <div class="flex-1 min-h-0 flex flex-col relative">
     <!-- Toolbar -->
-    <div class="flex items-center justify-between px-4 py-2 border-b border-(--ui-border) shrink-0">
-      <div class="flex gap-1">
-        <UButton
-          v-for="z in ['week', 'month', 'quarter']"
-          :key="z"
-          :label="locale[z]"
-          size="xs"
-          :variant="zoomLevel === z ? 'solid' : 'ghost'"
-          color="neutral"
-          @click="zoomLevel = z"
-        />
-      </div>
-      <UButton
-        v-if="editable"
-        icon="i-lucide-plus"
-        size="xs"
-        variant="ghost"
-        color="neutral"
-        :label="locale.addEpic"
-        @click="addEpic"
-      />
-    </div>
+    <ATimelineToolbar
+      :pixels-per-day="tl.pixelsPerDay.value"
+      :is-mobile="tl.isMobile.value"
+      :show-labels="showLabels"
+      :remote-viewers="remoteViewers"
+      :editable="editable"
+      :labels="labels"
+      @zoom-in="tl.zoomIn()"
+      @zoom-out="tl.zoomOut()"
+      @today="tl.goToday()"
+      @go-to-date="goToDate"
+      @add-epic="addEpic"
+      @add-milestone="addMilestone()"
+      @toggle-labels="showLabels = !showLabels"
+      @fit="tl.fitToContent()"
+    />
 
     <!-- Content -->
-    <div class="flex-1 overflow-auto">
+    <div class="flex-1 min-h-0 overflow-hidden">
       <!-- Empty state -->
       <div
         v-if="epics.length === 0"
@@ -278,153 +350,103 @@ defineExpose({ connectedUsers });
 
       <div
         v-else
-        class="flex h-full"
+        class="flex flex-col h-full"
       >
-        <!-- Label panel -->
-        <div class="w-48 flex-shrink-0 border-r border-(--ui-border) sticky left-0 bg-(--ui-bg) z-10">
-          <div class="h-8 border-b border-(--ui-border)" />
-          <TransitionGroup
-            name="tepic"
-            tag="div"
+        <!-- Fixed axis header row -->
+        <div class="flex flex-shrink-0 bg-(--ui-bg) z-20">
+          <!-- Label panel header spacer -->
+          <div
+            class="flex-shrink-0 border-r border-(--ui-border) h-10 transition-[width] overflow-hidden"
+            :style="showLabels ? { width: labelWidth + 'px' } : { width: '0px' }"
+          />
+          <!-- Resize handle (header) -->
+          <div
+            v-if="showLabels"
+            class="flex-shrink-0 w-1 -ml-0.5 h-10 cursor-col-resize z-30 hover:bg-(--ui-primary)/30"
+            @pointerdown="onResizePointerDown"
+          />
+          <!-- Axis (wheel + pointer for zoom/pan) -->
+          <div
+            ref="timelineContainerRef"
+            class="flex-1 overflow-hidden cursor-grab select-none h-10 touch-none"
+            @wheel.prevent="tl.onWheel"
+            @pointerdown="tl.onPanPointerDown"
+            @pointermove="tl.onPanPointerMove"
+            @pointerup="tl.onPanPointerUp"
+            @touchstart.passive="tl.onTouchStart"
+            @touchmove="tl.onTouchMove"
+            @touchend.passive="tl.onTouchEnd"
           >
-            <div
-              v-for="epic in epics"
-              :key="epic.id"
-            >
-              <button
-                :data-drag-id="epic.id"
-                class="h-9 w-full flex items-center px-3 text-sm font-medium border-b border-(--ui-border) cursor-grab hover:bg-(--ui-bg-elevated) text-left transition-colors touch-none"
-                :class="{
-  'border-t-2 border-(--ui-primary)': epicDragOver === epic.id,
-  'opacity-40': epicDragId === epic.id
-}"
-                @pointerdown="editable && handleEpicPointerDown($event, epic.id)"
-                @click="openNode(epic.id, epic.label)"
-              >
-                <UIcon
-                  name="i-lucide-chevron-right"
-                  class="size-3 mr-1.5 text-(--ui-text-muted) shrink-0"
-                />
-                <span class="truncate">{{ epic.label }}</span>
-              </button>
-
-              <button
-                v-for="task in tree.childrenOf(epic.id)"
-                :key="task.id"
-                class="h-8 w-full flex items-center px-6 text-xs border-b border-(--ui-border) hover:bg-(--ui-bg-elevated) text-left"
-                @click="openNode(task.id, task.label)"
-              >
-                <span class="truncate text-(--ui-text-dimmed)">
-                  {{ task.label }}
-                </span>
-              </button>
-
-              <button
-                v-if="editable"
-                class="h-7 w-full flex items-center px-6 text-xs text-(--ui-text-dimmed) hover:text-(--ui-text) border-b border-(--ui-border) text-left"
-                @click="addTask(epic.id)"
-              >
-                + {{ locale.addTask.toLowerCase() }}
-              </button>
-            </div>
-          </TransitionGroup>
+            <ATimelineAxis
+              :labels="tl.axisLabels.value"
+              :today-offset="tl.todayOffset.value"
+              :container-width="tl.containerWidth.value"
+            />
+          </div>
         </div>
 
-        <!-- Timeline panel -->
-        <div class="flex-1 overflow-x-auto">
-          <div :style="{ width: `${axisWidth}px`, minWidth: '100%', position: 'relative' }">
-            <!-- Axis labels -->
-            <div class="h-8 relative border-b border-(--ui-border) sticky top-0 bg-(--ui-bg) z-10">
-              <div
-                v-for="lbl in axisLabels"
-                :key="lbl.offset"
-                class="absolute top-1.5 text-[10px] text-(--ui-text-muted) whitespace-nowrap px-0.5"
-                :style="{ left: `${lbl.offset}px` }"
-              >
-                {{ lbl.label }}
-              </div>
-              <!-- Today line -->
-              <div
-                class="absolute top-0 bottom-0 w-px bg-(--ui-primary) opacity-60"
-                :style="{ left: `${todayOffset}px` }"
-              />
-            </div>
+        <!-- Shared scrollable body -->
+        <div
+          ref="scrollBodyRef"
+          class="flex flex-1 min-h-0 overflow-y-auto overflow-x-hidden items-start"
+        >
+          <!-- Label panel -->
+          <ATimelineLabelPanel
+            :epics="epics"
+            :tree="tree"
+            :epic-drag-id="epicDragId"
+            :epic-drag-over="epicDragOver"
+            :rename-id="renameId"
+            :rename-value="renameValue"
+            :visible="showLabels"
+            :label-width="labelWidth"
+            :item-focusers="itemFocusers"
+            :editable="editable"
+            :labels="labels"
+            @open-node="openNode"
+            @add-task="addTask"
+            @add-milestone="addMilestone"
+            @epic-pointer-down="handleEpicPointerDown"
+            @start-rename="startRename"
+            @rename-input="renameValue = $event"
+            @rename-commit="commitRename"
+            @rename-cancel="renameId = null"
+            @delete-entry="tree.deleteEntry($event)"
+            @duplicate-entry="tree.duplicateEntry($event)"
+          />
 
-            <!-- Bars -->
-            <TransitionGroup
-              name="tepic"
-              tag="div"
-            >
-              <div
-                v-for="epic in epics"
-                :key="epic.id"
-                :data-epic-id="epic.id"
-                :class="barHoverEpicId === epic.id && barDragId ? 'bg-(--ui-primary)/5' : ''"
-              >
-                <!-- Epic bar row -->
-                <div class="h-9 relative border-b border-(--ui-border)">
-                  <div
-                    v-if="epic.meta?.dateStart && epic.meta?.dateEnd"
-                    class="absolute top-2 h-5 rounded text-white text-[10px] flex items-center px-2 font-medium select-none transition-opacity"
-                    :class="barDragId === epic.id ? 'opacity-60 cursor-grabbing' : 'cursor-grab hover:opacity-80'"
-                    :style="{
-  left: `${dateToOffset(epic.meta.dateStart)}px`,
-  width: `${spanWidth(epic.meta.dateStart, epic.meta.dateEnd)}px`,
-  background: epic.meta.color ?? '#6366f1',
-  maxWidth: '100%',
-  ...taskFocusers(epic.id).length ? { outline: `2px solid ${taskFocusers(epic.id)[0].user?.color}`, outlineOffset: '1px' } : {}
-}"
-                    @pointerdown="onBarPointerDown($event, epic.id)"
-                    @pointermove="onBarPointerMove($event, epic.id)"
-                    @pointerup="onBarPointerUp(epic.id)"
-                    @pointerenter="focusTask(epic.id)"
-                    @pointerleave="clearFocus"
-                    @click.stop="onBarClick(epic.id, epic.label)"
-                  >
-                    <span class="truncate">{{ epic.label }}</span>
-                  </div>
-                </div>
+          <!-- Resize handle (body) -->
+          <div
+            v-if="showLabels"
+            class="flex-shrink-0 w-1 -ml-0.5 cursor-col-resize z-30 hover:bg-(--ui-primary)/30"
+            @pointerdown="onResizePointerDown"
+          />
 
-                <!-- Task bar rows -->
-                <div
-                  v-for="task in tree.childrenOf(epic.id)"
-                  :key="task.id"
-                  class="h-8 relative border-b border-(--ui-border)"
-                >
-                  <div
-                    v-if="task.meta?.dateStart && task.meta?.dateEnd"
-                    class="absolute top-1.5 h-5 rounded text-white text-[10px] flex items-center px-2 select-none opacity-85 transition-opacity"
-                    :class="barDragId === task.id ? 'opacity-60 cursor-grabbing' : 'cursor-grab hover:opacity-80'"
-                    :style="{
-  left: `${dateToOffset(task.meta.dateStart)}px`,
-  width: `${spanWidth(task.meta.dateStart, task.meta.dateEnd)}px`,
-  background: task.meta.color ?? '#818cf8',
-  maxWidth: '100%',
-  ...taskFocusers(task.id).length ? { outline: `2px solid ${taskFocusers(task.id)[0].user?.color}`, outlineOffset: '1px' } : {}
-}"
-                    @pointerdown="onBarPointerDown($event, task.id)"
-                    @pointermove="onBarPointerMove($event, task.id)"
-                    @pointerup="onBarPointerUp(task.id, epic.id)"
-                    @pointerenter="focusTask(task.id)"
-                    @pointerleave="clearFocus"
-                    @click.stop="onBarClick(task.id, task.label)"
-                  >
-                    <span class="truncate">{{ task.label }}</span>
-                  </div>
-                </div>
-
-                <!-- Add task spacer -->
-                <div
-                  v-if="editable"
-                  class="h-7 border-b border-(--ui-border)"
-                />
-              </div>
-            </TransitionGroup>
-
-            <!-- Today vertical line across bars -->
-            <div
-              class="absolute top-8 bottom-0 w-px bg-(--ui-primary) opacity-20 pointer-events-none"
-              :style="{ left: `${todayOffset}px` }"
+          <!-- Bar area (wheel intercepted for zoom, pointer for pan) -->
+          <div
+            class="flex-1 relative cursor-grab select-none min-w-0 touch-none"
+            @wheel.prevent="tl.onWheel"
+            @pointerdown="tl.onPanPointerDown"
+            @pointermove="tl.onPanPointerMove"
+            @pointerup="tl.onPanPointerUp"
+            @touchstart.passive="tl.onTouchStart"
+            @touchmove="tl.onTouchMove"
+            @touchend.passive="tl.onTouchEnd"
+          >
+            <ATimelineBarArea
+              :epics="epics"
+              :tree="tree"
+              :date-to-x="tl.dateToX"
+              :span-width="tl.spanWidth"
+              :today-offset="tl.todayOffset.value"
+              :bar-drag-id="barDragId"
+              :bar-hover-epic-id="barHoverEpicId"
+              :item-focusers="itemFocusers"
+              :editable="editable"
+              @bar-pointer-down="onBarPointerDown"
+              @bar-click="onBarClick"
+              @focus-item="focusItem"
+              @unfocus-item="unfocusItem"
             />
           </div>
         </div>