fix(calendar-lab): rewrite zoom as GSAP flying-rect with proper async sequencing

- Replace panzoom + timeline approach with clean async/await GSAP tweens
- Flying rect morphs from cell position to full viewport (aspect ratio change)
- Fix zoomOut race condition: nested gsap.to inside tl.call fired outside timeline
- Fix opacity conflict: GSAP controls all opacity, CSS class only for pointer-events
- Fix gridLayerRef losing reference on :key remount during resize
- Make viewport dimensions reactive via ResizeObserver (vpWidth/vpHeight refs)
- Wait for fade-in completion before unlocking isAnimating

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/app/components/workspace/calendar/lab/CrmCalendarZoomCanvasLab.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Panzoom from "@panzoom/panzoom";
+import gsap from "gsap";
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
 import CrmCalendarLabYearRect from "./CrmCalendarLabYearRect.vue";
 import CrmCalendarLabMonthRect from "./CrmCalendarLabMonthRect.vue";
@@ -7,7 +7,7 @@ import CrmCalendarLabWeekRect from "./CrmCalendarLabWeekRect.vue";
 import CrmCalendarLabDayRect from "./CrmCalendarLabDayRect.vue";
 
 /* ------------------------------------------------------------------ */
-/*  Constants                                                          */
+/*  Types & constants                                                  */
 /* ------------------------------------------------------------------ */
 
 type Level = "year" | "month" | "week" | "day";
@@ -26,24 +26,31 @@ const MONTH_LABELS = [
   "May", "Jun", "Jul", "Aug",
   "Sep", "Oct", "Nov", "Dec",
 ];
+const DAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 
 const ZOOM_PRIME_STEPS = 2;
-const ZOOM_ANIMATION_MS = 800;
+const FLY_DURATION = 0.65;
-const CONTENT_FADE_MS = 180;
+const FADE_DURATION = 0.18;
-const VIEWPORT_PADDING = 20;
+const EASE = "power3.inOut";
 
 /* ------------------------------------------------------------------ */
 /*  Refs                                                               */
 /* ------------------------------------------------------------------ */
 
-const outlineViewportRef = ref<HTMLDivElement | null>(null);
+const viewportRef = ref<HTMLDivElement | null>(null);
-const outlineSceneRef = ref<HTMLDivElement | null>(null);
+const flyRectRef = ref<HTMLDivElement | null>(null);
-const panzoomRef = ref<ReturnType<typeof Panzoom> | null>(null);
+const contentRef = ref<HTMLDivElement | null>(null);
-const resizeObserver = ref<ResizeObserver | null>(null);
+const gridLayerRef = ref<HTMLDivElement | null>(null);
 
 const currentLevel = ref<Level>("year");
 const isAnimating = ref(false);
 const contentVisible = ref(true);
+const flyVisible = ref(false);
+const flyLabel = ref("");
+
+// Reactive viewport dimensions (updated by ResizeObserver)
+const vpWidth = ref(0);
+const vpHeight = ref(0);
 
 const selectedMonth = ref(0);
 const selectedWeek = ref(0);
@@ -58,8 +65,7 @@ const wheelPrimeDirection = ref<"" | Direction>("");
 const wheelPrimeTicks = ref(0);
 
 let primeTimer: ReturnType<typeof setTimeout> | null = null;
-let animationFrameId: number | null = null;
+let activeTweens: gsap.core.Tween[] = [];
-let animationToken = 0;
 
 /* ------------------------------------------------------------------ */
 /*  Computed                                                           */
@@ -69,235 +75,316 @@ const currentLevelIndex = computed(() => LEVELS.indexOf(currentLevel.value));
 const canZoomIn = computed(() => currentLevelIndex.value < LEVELS.length - 1);
 
 /* ------------------------------------------------------------------ */
-/*  Outline geometry — positions for each level's child outlines       */
+/*  Grid definitions                                                   */
 /* ------------------------------------------------------------------ */
 
-const SCENE_W = 1400;
+function getChildCount(level: Level): number {
-const SCENE_H = 900;
+  switch (level) {
+    case "year": return 12;
+    case "month": return 6;
+    case "week": return 7;
+    case "day": return 12;
+    default: return 0;
+  }
+}
 
-/** Outline rects are absolutely positioned inside the scene. */
+function getGridConfig(level: Level) {
-function yearOutlines() {
+  switch (level) {
-  const cols = 4;
+    case "year": return { cols: 4, rows: 3, gap: 10 };
-  const gap = 10;
+    case "month": return { cols: 1, rows: 6, gap: 8 };
-  const pad = 14;
+    case "week": return { cols: 7, rows: 1, gap: 6 };
-  const areaW = SCENE_W - 160 - pad * 2;
+    case "day": return { cols: 1, rows: 12, gap: 5 };
-  const areaH = SCENE_H - 100 - pad * 2;
+    default: return { cols: 1, rows: 1, gap: 0 };
-  const cardW = (areaW - gap * (cols - 1)) / cols;
+  }
-  const cardH = (areaH - gap * 2) / 3;
+}
-  const startX = 80 + pad;
-  const startY = 50 + pad;
 
-  return Array.from({ length: 12 }, (_, i) => {
+function getChildLabel(level: Level, index: number): string {
+  switch (level) {
+    case "year": return MONTH_LABELS[index] ?? "";
+    case "month": return `W${index + 1}`;
+    case "week": return DAY_LABELS[index] ?? "";
+    case "day": return `${8 + index}:00`;
+    default: return "";
+  }
+}
+
+function computeGridRects(level: Level, vw: number, vh: number) {
+  const count = getChildCount(level);
+  const { cols, rows, gap } = getGridConfig(level);
+  const pad = 24;
+
+  const areaW = vw - pad * 2;
+  const areaH = vh - pad * 2;
+  const cellW = (areaW - gap * Math.max(0, cols - 1)) / cols;
+  const cellH = (areaH - gap * Math.max(0, rows - 1)) / rows;
+
+  return Array.from({ length: count }, (_, i) => {
     const col = i % cols;
     const row = Math.floor(i / cols);
     return {
-      id: `outline-month-${i}`,
+      id: `cell-${level}-${i}`,
-      x: startX + col * (cardW + gap),
+      x: pad + col * (cellW + gap),
-      y: startY + row * (cardH + gap),
+      y: pad + row * (cellH + gap),
-      w: cardW,
+      w: cellW,
-      h: cardH,
+      h: cellH,
+      label: getChildLabel(level, i),
+      index: i,
     };
   });
 }
 
-function monthOutlines() {
+// Reactive: recomputes when currentLevel or vpWidth/vpHeight change
-  const rows = 6;
+const gridRects = computed(() => {
-  const gap = 8;
+  if (vpWidth.value <= 0 || vpHeight.value <= 0) return [];
-  const pad = 14;
+  return computeGridRects(currentLevel.value, vpWidth.value, vpHeight.value);
-  const areaW = SCENE_W - 160 - pad * 2;
-  const areaH = SCENE_H - 100 - pad * 2;
-  const rowH = (areaH - gap * (rows - 1)) / rows;
-  const startX = 80 + pad;
-  const startY = 50 + pad;
-
-  return Array.from({ length: rows }, (_, i) => ({
-    id: `outline-week-${i}`,
-    x: startX,
-    y: startY + i * (rowH + gap),
-    w: areaW,
-    h: rowH,
-  }));
-}
-
-function weekOutlines() {
-  const cols = 7;
-  const gap = 6;
-  const pad = 14;
-  const areaW = SCENE_W - 160 - pad * 2;
-  const areaH = SCENE_H - 100 - pad * 2;
-  const colW = (areaW - gap * (cols - 1)) / cols;
-  const startX = 80 + pad;
-  const startY = 50 + pad;
-
-  return Array.from({ length: cols }, (_, i) => ({
-    id: `outline-day-${i}`,
-    x: startX + i * (colW + gap),
-    y: startY,
-    w: colW,
-    h: areaH,
-  }));
-}
-
-function dayOutlines() {
-  const rows = 12;
-  const gap = 5;
-  const pad = 14;
-  const areaW = SCENE_W - 160 - pad * 2;
-  const areaH = SCENE_H - 100 - pad * 2;
-  const rowH = (areaH - gap * (rows - 1)) / rows;
-  const startX = 80 + pad;
-  const startY = 50 + pad;
-
-  return Array.from({ length: rows }, (_, i) => ({
-    id: `outline-slot-${i}`,
-    x: startX,
-    y: startY + i * (rowH + gap),
-    w: areaW,
-    h: rowH,
-  }));
-}
-
-const outlineRects = computed(() => {
-  switch (currentLevel.value) {
-    case "year": return yearOutlines();
-    case "month": return monthOutlines();
-    case "week": return weekOutlines();
-    case "day": return dayOutlines();
-    default: return [];
-  }
 });
 
 /* ------------------------------------------------------------------ */
-/*  Camera helpers (reused from CrmCalendarZoomLab)                    */
+/*  GSAP helpers                                                       */
 /* ------------------------------------------------------------------ */
 
-function easing(t: number) {
+/** Promise wrapper around gsap.to */
-  return 1 - (1 - t) ** 3;
+function tweenTo(target: gsap.TweenTarget, vars: gsap.TweenVars): Promise<void> {
-}
+  return new Promise((resolve) => {
-
+    const t = gsap.to(target, {
-function stopCameraAnimation() {
+      ...vars,
-  animationToken += 1;
+      onComplete: () => {
-  if (animationFrameId !== null) {
+        activeTweens = activeTweens.filter((tw) => tw !== t);
-    cancelAnimationFrame(animationFrameId);
-    animationFrameId = null;
-  }
-}
-
-function applyTransform(transform: { x: number; y: number; scale: number }) {
-  const panzoom = panzoomRef.value;
-  if (!panzoom) return;
-  panzoom.zoom(transform.scale, { animate: false, force: true });
-  panzoom.pan(transform.x, transform.y, { animate: false, force: true });
-}
-
-function computeTransformForRect(rect: { x: number; y: number; w: number; h: number }) {
-  const viewport = outlineViewportRef.value;
-  if (!viewport) return null;
-
-  const vw = Math.max(1, viewport.clientWidth);
-  const vh = Math.max(1, viewport.clientHeight);
-  const safeW = Math.max(1, vw - VIEWPORT_PADDING * 2);
-  const safeH = Math.max(1, vh - VIEWPORT_PADDING * 2);
-  const scale = Math.min(safeW / rect.w, safeH / rect.h);
-
-  const x = VIEWPORT_PADDING + (safeW - rect.w * scale) / 2 - rect.x * scale;
-  const y = VIEWPORT_PADDING + (safeH - rect.h * scale) / 2 - rect.y * scale;
-
-  return { x, y, scale };
-}
-
-function computeTransformForLevel() {
-  const viewport = outlineViewportRef.value;
-  if (!viewport) return null;
-
-  // Fit the whole scene container
-  const vw = Math.max(1, viewport.clientWidth);
-  const vh = Math.max(1, viewport.clientHeight);
-  const safeW = Math.max(1, vw - VIEWPORT_PADDING * 2);
-  const safeH = Math.max(1, vh - VIEWPORT_PADDING * 2);
-
-  // Scene area: the year article area
-  const areaX = 80;
-  const areaY = 50;
-  const areaW = SCENE_W - 160;
-  const areaH = SCENE_H - 100;
-
-  const scale = Math.min(safeW / areaW, safeH / areaH);
-  const x = VIEWPORT_PADDING + (safeW - areaW * scale) / 2 - areaX * scale;
-  const y = VIEWPORT_PADDING + (safeH - areaH * scale) / 2 - areaY * scale;
-
-  return { x, y, scale };
-}
-
-async function animateCamera(
-  target: { x: number; y: number; scale: number },
-  duration: number,
-): Promise<void> {
-  const panzoom = panzoomRef.value;
-  if (!panzoom) return;
-
-  if (duration <= 0) {
-    applyTransform(target);
-    return;
-  }
-
-  stopCameraAnimation();
-  const localToken = animationToken;
-  const startPan = panzoom.getPan();
-  const startScale = panzoom.getScale();
-  const startAt = performance.now();
-
-  await new Promise<void>((resolve) => {
-    const step = (now: number) => {
-      if (localToken !== animationToken) {
         resolve();
-        return;
+      },
-      }
+    });
-
+    activeTweens.push(t);
-      const elapsed = now - startAt;
-      const t = Math.max(0, Math.min(1, elapsed / duration));
-      const k = easing(t);
-
-      applyTransform({
-        x: startPan.x + (target.x - startPan.x) * k,
-        y: startPan.y + (target.y - startPan.y) * k,
-        scale: startScale + (target.scale - startScale) * k,
-      });
-
-      if (t < 1) {
-        animationFrameId = requestAnimationFrame(step);
-        return;
-      }
-
-      animationFrameId = null;
-      resolve();
-    };
-
-    animationFrameId = requestAnimationFrame(step);
   });
 }
 
-function fitLevelImmediate() {
+/** Kill all running tweens */
-  const transform = computeTransformForLevel();
+function killAllTweens() {
-  if (transform) applyTransform(transform);
+  for (const t of activeTweens) t.kill();
+  activeTweens = [];
+}
+
+/** Reset opacity of content and grid to safe state */
+function resetOpacity() {
+  const c = contentRef.value;
+  const g = gridLayerRef.value;
+  if (c) gsap.set(c, { opacity: 1 });
+  if (g) gsap.set(g, { opacity: 1 });
 }
 
 /* ------------------------------------------------------------------ */
-/*  Content fade helpers                                               */
+/*  Zoom In                                                            */
 /* ------------------------------------------------------------------ */
 
-function fadeOutContent(): Promise<void> {
+async function zoomIn() {
-  contentVisible.value = false;
+  if (isAnimating.value) return;
-  return new Promise((r) => setTimeout(r, CONTENT_FADE_MS));
+  if (currentLevelIndex.value >= LEVELS.length - 1) return;
-}
 
-function fadeInContent(): Promise<void> {
+  const hovIdx = getHoveredIndex();
+  const rects = gridRects.value;
+  const targetRect = rects[hovIdx];
+  if (!targetRect) return;
+
+  const flyEl = flyRectRef.value;
+  const contentEl = contentRef.value;
+  const gridEl = gridLayerRef.value;
+  if (!flyEl || !contentEl || !gridEl) return;
+
+  isAnimating.value = true;
+  killAllTweens();
+
+  const vw = vpWidth.value;
+  const vh = vpHeight.value;
+  const pad = 8;
+
+  // 1. Fade out content + grid
+  await Promise.all([
+    tweenTo(contentEl, { opacity: 0, duration: FADE_DURATION, ease: "power2.in" }),
+    tweenTo(gridEl, { opacity: 0, duration: FADE_DURATION, ease: "power2.in" }),
+  ]);
+
+  // 2. Position fly rect at source cell, show it
+  flyLabel.value = targetRect.label;
+  gsap.set(flyEl, {
+    left: targetRect.x,
+    top: targetRect.y,
+    width: targetRect.w,
+    height: targetRect.h,
+    opacity: 1,
+    borderRadius: 12,
+  });
+  flyVisible.value = true;
+
+  // 3. Animate fly rect → full viewport (morphing aspect ratio)
+  await tweenTo(flyEl, {
+    left: pad,
+    top: pad,
+    width: vw - pad * 2,
+    height: vh - pad * 2,
+    borderRadius: 14,
+    duration: FLY_DURATION,
+    ease: EASE,
+  });
+
+  // 4. Update selection
+  switch (currentLevel.value) {
+    case "year":
+      selectedMonth.value = hovIdx;
+      selectedWeek.value = 0;
+      selectedDay.value = 0;
+      break;
+    case "month":
+      selectedWeek.value = hovIdx;
+      selectedDay.value = 0;
+      break;
+    case "week":
+      selectedDay.value = hovIdx;
+      break;
+  }
+
+  // 5. Switch level
+  currentLevel.value = LEVELS[currentLevelIndex.value + 1]!;
+
+  // 6. Hide fly rect, prepare content
+  flyVisible.value = false;
   contentVisible.value = true;
-  return new Promise((r) => setTimeout(r, CONTENT_FADE_MS));
+  gsap.set(contentEl, { opacity: 0 });
+  gsap.set(gridEl, { opacity: 0 });
+  await nextTick();
+
+  // 7. Fade in new content + grid
+  await Promise.all([
+    tweenTo(contentEl, { opacity: 1, duration: 0.25, ease: "power2.out" }),
+    tweenTo(gridEl, { opacity: 1, duration: 0.25, ease: "power2.out" }),
+  ]);
+
+  isAnimating.value = false;
 }
 
 /* ------------------------------------------------------------------ */
-/*  Zoom logic                                                         */
+/*  Zoom Out                                                           */
+/* ------------------------------------------------------------------ */
+
+async function zoomOut() {
+  if (isAnimating.value) return;
+  if (currentLevelIndex.value <= 0) return;
+
+  const flyEl = flyRectRef.value;
+  const contentEl = contentRef.value;
+  const gridEl = gridLayerRef.value;
+  if (!flyEl || !contentEl || !gridEl) return;
+
+  isAnimating.value = true;
+  killAllTweens();
+
+  const vw = vpWidth.value;
+  const vh = vpHeight.value;
+  const pad = 8;
+
+  // Figure out which child index we came from
+  const prevIdx = currentLevelIndex.value - 1;
+  const parentLevel = LEVELS[prevIdx]!;
+  let fromIdx = 0;
+  switch (parentLevel) {
+    case "year": fromIdx = selectedMonth.value; break;
+    case "month": fromIdx = selectedWeek.value; break;
+    case "week": fromIdx = selectedDay.value; break;
+  }
+
+  // 1. Fade out current content + grid
+  await Promise.all([
+    tweenTo(contentEl, { opacity: 0, duration: FADE_DURATION, ease: "power2.in" }),
+    tweenTo(gridEl, { opacity: 0, duration: FADE_DURATION, ease: "power2.in" }),
+  ]);
+
+  // 2. Position fly rect at full viewport, show it
+  flyLabel.value = getChildLabel(parentLevel, fromIdx);
+  gsap.set(flyEl, {
+    left: pad,
+    top: pad,
+    width: vw - pad * 2,
+    height: vh - pad * 2,
+    opacity: 1,
+    borderRadius: 14,
+  });
+  flyVisible.value = true;
+
+  // 3. Switch to parent level so gridRects recomputes
+  contentVisible.value = false;
+  currentLevel.value = parentLevel;
+  await nextTick();
+
+  // 4. Get child rect position in the new grid
+  const rects = gridRects.value;
+  const childRect = rects[fromIdx];
+
+  if (childRect) {
+    // 5. Animate fly rect → child cell position (shrink + morph)
+    await tweenTo(flyEl, {
+      left: childRect.x,
+      top: childRect.y,
+      width: childRect.w,
+      height: childRect.h,
+      borderRadius: 12,
+      duration: FLY_DURATION,
+      ease: EASE,
+    });
+  }
+
+  // 6. Hide fly rect, show parent content
+  flyVisible.value = false;
+  contentVisible.value = true;
+  gsap.set(contentEl, { opacity: 0 });
+  gsap.set(gridEl, { opacity: 0 });
+  await nextTick();
+
+  // 7. Fade in parent content + grid
+  await Promise.all([
+    tweenTo(contentEl, { opacity: 1, duration: 0.25, ease: "power2.out" }),
+    tweenTo(gridEl, { opacity: 1, duration: 0.25, ease: "power2.out" }),
+  ]);
+
+  isAnimating.value = false;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Reset to year                                                      */
+/* ------------------------------------------------------------------ */
+
+async function resetToYear() {
+  if (isAnimating.value) return;
+  if (currentLevel.value === "year") return;
+
+  const contentEl = contentRef.value;
+  const gridEl = gridLayerRef.value;
+  if (!contentEl || !gridEl) return;
+
+  isAnimating.value = true;
+  killAllTweens();
+
+  // 1. Fade out
+  await Promise.all([
+    tweenTo(contentEl, { opacity: 0, duration: 0.2, ease: "power2.in" }),
+    tweenTo(gridEl, { opacity: 0, duration: 0.2, ease: "power2.in" }),
+  ]);
+
+  // 2. Switch level
+  currentLevel.value = "year";
+  contentVisible.value = true;
+  gsap.set(contentEl, { opacity: 0 });
+  gsap.set(gridEl, { opacity: 0 });
+  await nextTick();
+
+  // 3. Fade in
+  await Promise.all([
+    tweenTo(contentEl, { opacity: 1, duration: 0.3, ease: "power2.out" }),
+    tweenTo(gridEl, { opacity: 1, duration: 0.3, ease: "power2.out" }),
+  ]);
+
+  isAnimating.value = false;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Wheel / interaction                                                */
 /* ------------------------------------------------------------------ */
 
 function resetWheelPrime() {
@@ -325,113 +412,6 @@ function getHoveredIndex(): number {
   }
 }
 
-async function zoomIn() {
-  if (isAnimating.value) return;
-  if (currentLevelIndex.value >= LEVELS.length - 1) return;
-
-  const hovIdx = getHoveredIndex();
-  isAnimating.value = true;
-
-  // 1. Fade out content
-  await fadeOutContent();
-
-  // 2. Animate outline layer to target rect
-  const rects = outlineRects.value;
-  const targetRect = rects[hovIdx];
-  if (targetRect) {
-    const transform = computeTransformForRect(targetRect);
-    if (transform) {
-      await animateCamera(transform, ZOOM_ANIMATION_MS);
-    }
-  }
-
-  // 3. Update selection and switch level
-  switch (currentLevel.value) {
-    case "year":
-      selectedMonth.value = hovIdx;
-      selectedWeek.value = 0;
-      selectedDay.value = 0;
-      break;
-    case "month":
-      selectedWeek.value = hovIdx;
-      selectedDay.value = 0;
-      break;
-    case "week":
-      selectedDay.value = hovIdx;
-      break;
-  }
-
-  const nextIdx = currentLevelIndex.value + 1;
-  currentLevel.value = LEVELS[nextIdx]!;
-
-  // 4. Reset panzoom to fit new level (instant, no animation)
-  await nextTick();
-  fitLevelImmediate();
-
-  // 5. Fade in content
-  await fadeInContent();
-
-  isAnimating.value = false;
-}
-
-async function zoomOut() {
-  if (isAnimating.value) return;
-  if (currentLevelIndex.value <= 0) return;
-
-  isAnimating.value = true;
-
-  // 1. Fade out content
-  await fadeOutContent();
-
-  // 2. Switch to parent level
-  const prevIdx = currentLevelIndex.value - 1;
-  currentLevel.value = LEVELS[prevIdx]!;
-
-  // 3. Reset panzoom to fit — but start zoomed into the child position
-  await nextTick();
-
-  // Figure out which child we came from to start the camera there
-  const rects = outlineRects.value;
-  let fromIdx = 0;
-  switch (currentLevel.value) {
-    case "year": fromIdx = selectedMonth.value; break;
-    case "month": fromIdx = selectedWeek.value; break;
-    case "week": fromIdx = selectedDay.value; break;
-  }
-
-  const fromRect = rects[fromIdx];
-  if (fromRect) {
-    const zoomedTransform = computeTransformForRect(fromRect);
-    if (zoomedTransform) applyTransform(zoomedTransform);
-  }
-
-  // 4. Animate out to fit the whole level
-  const fitTransform = computeTransformForLevel();
-  if (fitTransform) {
-    await animateCamera(fitTransform, ZOOM_ANIMATION_MS);
-  }
-
-  // 5. Fade in content
-  await fadeInContent();
-
-  isAnimating.value = false;
-}
-
-async function resetToYear() {
-  if (isAnimating.value) return;
-  if (currentLevel.value === "year") return;
-
-  isAnimating.value = true;
-  await fadeOutContent();
-
-  currentLevel.value = "year";
-  await nextTick();
-  fitLevelImmediate();
-
-  await fadeInContent();
-  isAnimating.value = false;
-}
-
 function onWheel(event: WheelEvent) {
   event.preventDefault();
   if (isAnimating.value) return;
@@ -449,10 +429,9 @@ function onWheel(event: WheelEvent) {
   if (wheelPrimeTicks.value < ZOOM_PRIME_STEPS) {
     wheelPrimeTicks.value += 1;
 
-    // Visual hint on the hovered outline
     if (direction === "in") {
       const idx = getHoveredIndex();
-      const rects = outlineRects.value;
+      const rects = gridRects.value;
       if (rects[idx]) {
         startPrime(rects[idx].id);
       }
@@ -482,36 +461,30 @@ function isPrime(id: string) {
 /*  Lifecycle                                                          */
 /* ------------------------------------------------------------------ */
 
-onMounted(async () => {
+let resizeObserver: ResizeObserver | null = null;
-  await nextTick();
 
-  if (outlineSceneRef.value) {
+onMounted(() => {
-    panzoomRef.value = Panzoom(outlineSceneRef.value, {
+  // Initial measurement
-      animate: false,
+  if (viewportRef.value) {
-      maxScale: 24,
+    vpWidth.value = viewportRef.value.clientWidth;
-      minScale: 0.08,
+    vpHeight.value = viewportRef.value.clientHeight;
-      disablePan: true,
-      origin: "0 0",
-    });
   }
 
-  fitLevelImmediate();
+  resizeObserver = new ResizeObserver((entries) => {
-
+    for (const entry of entries) {
-  resizeObserver.value = new ResizeObserver(() => {
+      vpWidth.value = entry.contentRect.width;
-    if (!isAnimating.value) fitLevelImmediate();
+      vpHeight.value = entry.contentRect.height;
+    }
   });
-
+  if (viewportRef.value) {
-  if (outlineViewportRef.value) {
+    resizeObserver.observe(viewportRef.value);
-    resizeObserver.value.observe(outlineViewportRef.value);
   }
 });
 
 onBeforeUnmount(() => {
   if (primeTimer) clearTimeout(primeTimer);
-  stopCameraAnimation();
+  killAllTweens();
-  resizeObserver.value?.disconnect();
+  resizeObserver?.disconnect();
-  panzoomRef.value?.destroy();
-  panzoomRef.value = null;
 });
 </script>
 
@@ -524,21 +497,19 @@ onBeforeUnmount(() => {
     </header>
 
     <div
-      ref="outlineViewportRef"
+      ref="viewportRef"
       class="canvas-lab-viewport"
       :class="canZoomIn ? 'cursor-zoom-in' : 'cursor-zoom-out'"
       @wheel.prevent="onWheel"
       @dblclick="onDoubleClick"
     >
-      <!-- Layer 1: Outline rectangles (panzoom-controlled, can blur — they're just borders) -->
+      <!-- Grid cells (outline rects for current level) -->
-      <div ref="outlineSceneRef" class="canvas-lab-scene">
+      <div ref="gridLayerRef" class="canvas-grid-layer">
         <div
-          v-for="(rect, idx) in outlineRects"
+          v-for="(rect, idx) in gridRects"
           :key="rect.id"
-          class="canvas-outline-rect"
+          class="canvas-cell"
-          :class="[
+          :class="[isPrime(rect.id) ? 'canvas-cell-prime' : '']"
-            isPrime(rect.id) ? 'canvas-outline-prime' : '',
-          ]"
           :style="{
             left: `${rect.x}px`,
             top: `${rect.y}px`,
@@ -551,11 +522,23 @@ onBeforeUnmount(() => {
             currentLevel === 'week' ? (hoveredDay = idx) :
             undefined
           "
-        />
+        >
+          <span class="canvas-cell-label">{{ rect.label }}</span>
+        </div>
       </div>
 
-      <!-- Layer 2: Content overlay (always 1:1 scale, no blur) -->
+      <!-- Flying rect (GSAP-animated during transitions) -->
       <div
+        v-show="flyVisible"
+        ref="flyRectRef"
+        class="canvas-fly-rect"
+      >
+        <span class="canvas-fly-label">{{ flyLabel }}</span>
+      </div>
+
+      <!-- Content overlay (always 1:1 scale, opacity managed by GSAP) -->
+      <div
+        ref="contentRef"
         class="canvas-content-layer"
         :class="contentVisible ? 'canvas-content-visible' : ''"
       >
@@ -629,34 +612,62 @@ onBeforeUnmount(() => {
   overflow: hidden;
 }
 
-.canvas-lab-scene {
+.canvas-grid-layer {
   position: absolute;
-  width: 1400px;
+  inset: 0;
-  height: 900px;
-  will-change: transform;
 }
 
-/* Outline rects — just borders, no content */
+.canvas-cell {
-.canvas-outline-rect {
   position: absolute;
   border-radius: 12px;
-  border: 1px solid color-mix(in oklab, var(--color-base-content) 22%, transparent);
+  border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, transparent);
-  background: color-mix(in oklab, var(--color-base-200) 40%, transparent);
+  background: color-mix(in oklab, var(--color-base-200) 50%, transparent);
-  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
 }
 
-.canvas-outline-rect:hover {
+.canvas-cell:hover {
-  border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
+  border-color: color-mix(in oklab, var(--color-primary) 55%, transparent);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 24%, transparent) inset;
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 20%, transparent) inset;
 }
 
-.canvas-outline-prime {
+.canvas-cell-prime {
-  transform: scale(1.04);
+  transform: scale(1.03);
   border-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 40%, transparent) inset;
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 36%, transparent) inset;
+}
+
+.canvas-cell-label {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+  pointer-events: none;
+  user-select: none;
+}
+
+.canvas-fly-rect {
+  position: absolute;
+  border-radius: 12px;
+  border: 2px solid color-mix(in oklab, var(--color-primary) 70%, transparent);
+  background: color-mix(in oklab, var(--color-base-200) 60%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  pointer-events: none;
+  will-change: left, top, width, height;
+}
+
+.canvas-fly-label {
+  font-size: 1rem;
+  font-weight: 700;
+  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+  user-select: none;
 }
 
-/* Content overlay — always native scale */
 .canvas-content-layer {
   position: absolute;
   inset: 0;
@@ -664,13 +675,11 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: center;
   padding: 24px;
-  opacity: 0;
-  transition: opacity 180ms ease;
   pointer-events: none;
+  z-index: 5;
 }
 
 .canvas-content-visible {
-  opacity: 1;
   pointer-events: auto;
 }
 </style>

frontend/package-lock.json

@@ -30,6 +30,7 @@
         "daisyui": "^5.5.18",
         "graphql": "^16.12.0",
         "graphql-tag": "^2.12.6",
+        "gsap": "^3.14.2",
         "ioredis": "^5.7.0",
         "langfuse": "^3.38.6",
         "langsmith": "^0.5.4",
@@ -15131,6 +15132,12 @@
         }
       }
     },
+    "node_modules/gsap": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz",
+      "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/guid-typescript": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/guid-typescript/-/guid-typescript-1.0.9.tgz",

frontend/package.json

@@ -42,6 +42,7 @@
     "daisyui": "^5.5.18",
     "graphql": "^16.12.0",
     "graphql-tag": "^2.12.6",
+    "gsap": "^3.14.2",
     "ioredis": "^5.7.0",
     "langfuse": "^3.38.6",
     "langsmith": "^0.5.4",