@elaraai/east-ui-components 1.0.13 → 1.0.14

package/dist/index.js

@@ -1170,8 +1170,13 @@ const globalCss = defineGlobalStyles({
   },
   /* ─── Drag & drop stages (drag-drop-visuals) ─────────────────────────
    * The DragLayerProvider drives these via data attributes; surfaces get
-   * the treatment for free by registering cells/sinks. */
-  "[data-dragging]": {
+   * the treatment for free by registering cells/sinks.
+   *
+   * Scoped `:not([data-scope])` so it dims only our own drag origins —
+   * Ark/Zag widgets (Slider, etc.) set `data-dragging` on themselves for
+   * their own drag state and carry a `data-scope`; without this exclusion
+   * a slider goes to 40% opacity while its thumb is dragged. */
+  "[data-dragging]:not([data-scope])": {
     opacity: "0.4"
   },
   "[data-drag-ghost]": {
@@ -2991,6 +2996,7 @@ const schematicSlotRecipe = defineSlotRecipe({
     "root",
     "canvas",
     "grid",
+    "cardLayer",
     "underlay",
     "zone",
     "zoneLabel",
@@ -3068,6 +3074,15 @@ const schematicSlotRecipe = defineSlotRecipe({
                 linear-gradient(to right, color-mix(in oklch, {colors.border.subtle} 22%, transparent) 1px, transparent 1px),
                 linear-gradient(to bottom, color-mix(in oklch, {colors.border.subtle} 22%, transparent) 1px, transparent 1px)`
     },
+    /* Holds the live `--cam-ppu` / `--cam-tx` / `--cam-ty` custom
+     * properties (written by applyCamera each frame). Transparent and
+     * click-through; each card re-enables its own pointer events so the
+     * full-cover layer never swallows canvas clicks (issue #57). */
+    cardLayer: {
+      position: "absolute",
+      inset: "0",
+      pointerEvents: "none"
+    },
     /* Links draw in pixel space; tone → token mapping lives here so
      * data only ever names a tone. */
     underlay: {
@@ -3264,6 +3279,7 @@ const schematicSlotRecipe = defineSlotRecipe({
     item: {
       position: "absolute",
       transform: "translate(-50%, -50%)",
+      pointerEvents: "auto",
       display: "flex",
       flexDirection: "column",
       gap: "2px",
@@ -3459,14 +3475,24 @@ const schematicSlotRecipe = defineSlotRecipe({
       minHeight: "0",
       overflowY: "auto",
       paddingBottom: "{spacing.2}",
-      lineHeight: "1.7"
-    },
+      lineHeight: "1.7",
+      // Row height shared by the sticky zone headers (their stacked `top`
+      // offset is a multiple of this) so an ancestor chain pins flush.
+      "--nav-row-h": "22px"
+    },
+    /* Zone headers pin to the top of the scroll area like a tree view: each
+     * depth level sticks at `top = depth × --nav-row-h` (set inline), so the
+     * area (and its ancestors) stays visible while you scroll its items.
+     * The opaque surface + z-index occlude the items scrolling underneath. */
     navZone: {
       display: "flex",
       alignItems: "center",
       gap: "{spacing.1}",
-      paddingY: "2px",
-      paddingRight: "{spacing.3}"
+      height: "var(--nav-row-h)",
+      paddingRight: "{spacing.3}",
+      position: "sticky",
+      background: "bg.surface",
+      zIndex: "1"
     },
     navCaret: {
       background: "transparent",
@@ -3513,6 +3539,9 @@ const schematicSlotRecipe = defineSlotRecipe({
       border: "none",
       paddingY: "2px",
       paddingRight: "{spacing.3}",
+      // Keep the auto-scroll-to-selected item clear of the pinned zone
+      // headers (up to two ancestor levels).
+      scrollMarginTop: "calc(var(--nav-row-h) * 2)",
       fontFamily: "mono",
       fontSize: "11px",
       letterSpacing: "0.06em",
@@ -61603,6 +61632,83 @@ function multiSelect(arr, left, right, n2, compare) {
     stack.push(left, mid, mid, right);
   }
 }
+const IDENTITY = { zoom: 1, tx: 0, ty: 0 };
+function project(x2, y2, cam) {
+  return { sx: x2 * cam.ppu + cam.tx, sy: y2 * cam.ppu + cam.ty };
+}
+function cardTranslateCss(x2, y2) {
+  return `translate(calc(var(--cam-ppu) * ${x2} * 1px + var(--cam-tx)), calc(var(--cam-ppu) * ${y2} * 1px + var(--cam-ty)))`;
+}
+function cardWidthCss(width) {
+  return `calc(var(--cam-ppu) * ${width} * 1px)`;
+}
+function viewportWorldBbox(cam, width, height) {
+  return {
+    minX: -cam.tx / cam.ppu,
+    minY: -cam.ty / cam.ppu,
+    maxX: (width - cam.tx) / cam.ppu,
+    maxY: (height - cam.ty) / cam.ppu
+  };
+}
+function bboxOverlaps(a2, b2) {
+  return a2.maxX >= b2.minX && a2.minX <= b2.maxX && a2.maxY >= b2.minY && a2.minY <= b2.maxY;
+}
+function pointsBbox(pts) {
+  if (pts.length === 0) return null;
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const p2 of pts) {
+    if (p2.x < minX) minX = p2.x;
+    if (p2.y < minY) minY = p2.y;
+    if (p2.x > maxX) maxX = p2.x;
+    if (p2.y > maxY) maxY = p2.y;
+  }
+  return { minX, minY, maxX, maxY };
+}
+function zoomAbout(prev, factor, px, py, min2, max2) {
+  const zoom = Math.max(min2, Math.min(max2, prev.zoom * factor));
+  if (zoom === 1) return IDENTITY;
+  const k2 = zoom / prev.zoom;
+  return { zoom, tx: px - k2 * (px - prev.tx), ty: py - k2 * (py - prev.ty) };
+}
+function nextMode(mode, event) {
+  switch (event) {
+    case "pointerDown":
+      return "panning";
+    case "wheel":
+      return "wheeling";
+    case "zoom":
+      return "wheeling";
+    case "flyStart":
+      return "flying";
+    case "pointerUp":
+      return mode === "panning" ? "idle" : mode;
+    case "flyEnd":
+      return mode === "flying" ? "idle" : mode;
+    case "cancel":
+      return "idle";
+  }
+}
+function cancelsFly(mode, event) {
+  return mode === "flying" && (event === "pointerDown" || event === "wheel" || event === "zoom" || event === "cancel");
+}
+function makeRafCoalescer(schedule, cancel) {
+  let handle2 = null;
+  return {
+    request(run) {
+      if (handle2 !== null) return;
+      handle2 = schedule(() => {
+        handle2 = null;
+        run();
+      });
+    },
+    cancel() {
+      if (handle2 !== null) {
+        cancel(handle2);
+        handle2 = null;
+      }
+    }
+  };
+}
 const css = (c2, a2 = 1) => a2 >= 1 ? `rgb(${c2[0]},${c2[1]},${c2[2]})` : `rgba(${c2[0]},${c2[1]},${c2[2]},${a2})`;
 function toneRGB(p2, tone, kind) {
   switch (tone) {
@@ -61683,6 +61789,7 @@ function arcFromBulge(p1, p2, bulge) {
   const mx = (p1.x + p2.x) / 2, my = (p1.y + p2.y) / 2;
   const d2 = chord / 2 / Math.tan(theta / 2);
   const cx2 = mx - dy / chord * d2, cy = my + dx / chord * d2;
+  if (!Number.isFinite(radius) || !Number.isFinite(d2) || !Number.isFinite(cx2) || !Number.isFinite(cy)) return null;
   return {
     cx: cx2,
     cy,
@@ -61710,22 +61817,76 @@ function traceVertices(ctx, pts, closed) {
     ctx.closePath();
   }
 }
+const MARKER_LABEL_FONT = '600 10px ui-monospace, "SF Mono", Menlo, monospace';
+const MARKER_DOT_RADIUS = 5;
+const MARKER_DOT_HIT_RADIUS = 10;
+const MARKER_PIN_PAD_X = 6, MARKER_PIN_DOT_W = 7, MARKER_PIN_GAP = 4, MARKER_PIN_H = 16;
+function markerHitbox(item, tier, cam, measure) {
+  const { sx, sy } = project(item.x, item.y, cam);
+  if (tier === "dot") return { kind: "circle", cx: sx, cy: sy, r: MARKER_DOT_HIT_RADIUS };
+  const tw = measure(item.label);
+  const w2 = MARKER_PIN_PAD_X + MARKER_PIN_DOT_W + MARKER_PIN_GAP + tw + MARKER_PIN_PAD_X;
+  return { kind: "rect", left: sx - w2 / 2, top: sy - MARKER_PIN_H / 2, w: w2, h: MARKER_PIN_H };
+}
+function markerHit(box, sx, sy) {
+  return box.kind === "circle" ? Math.hypot(sx - box.cx, sy - box.cy) <= box.r : sx >= box.left && sx <= box.left + box.w && sy >= box.top && sy <= box.top + box.h;
+}
+function hatchSpacing(rawSpacing) {
+  return Number.isFinite(rawSpacing) ? Math.max(1, rawSpacing) : 1;
+}
+function hatchSweepBounds(x2, y2, w2, h2, width, height, dx, dy, diag, spacing) {
+  const nx = -dy, ny = dx;
+  if (Math.abs(nx) <= 1e-6) return { oStart: -diag, oEnd: diag };
+  const cx0 = Math.max(x2, 0), cy0 = Math.max(y2, 0);
+  const cx1 = Math.min(x2 + w2, width), cy1 = Math.min(y2 + h2, height);
+  const cs = [cx0 * nx + cy0 * ny, cx1 * nx + cy0 * ny, cx0 * nx + cy1 * ny, cx1 * nx + cy1 * ny];
+  const oOfC = (c2) => (c2 - x2 * nx - (y2 - diag * dy) * ny) / nx;
+  const oA = oOfC(Math.min(...cs)), oB = oOfC(Math.max(...cs));
+  return {
+    oStart: Math.max(-diag, -diag + Math.floor((Math.min(oA, oB) + diag) / spacing) * spacing - spacing),
+    oEnd: Math.min(diag, Math.max(oA, oB) + spacing)
+  };
+}
+function zoneWorldBbox(zone, geom) {
+  const bb = { minX: zone.x, minY: zone.y, maxX: zone.x + zone.width, maxY: zone.y + zone.height };
+  if (geom !== void 0 && geom.type === "circle") {
+    const cx2 = zone.x + zone.width / 2, cy = zone.y + zone.height / 2, r2 = geom.value.radius;
+    bb.minX = Math.min(bb.minX, cx2 - r2);
+    bb.minY = Math.min(bb.minY, cy - r2);
+    bb.maxX = Math.max(bb.maxX, cx2 + r2);
+    bb.maxY = Math.max(bb.maxY, cy + r2);
+  } else if (geom !== void 0 && geom.type !== "rect") {
+    const g2 = pointsBbox(geom.value.vertices);
+    if (g2 !== null) {
+      bb.minX = Math.min(bb.minX, g2.minX);
+      bb.minY = Math.min(bb.minY, g2.minY);
+      bb.maxX = Math.max(bb.maxX, g2.maxX);
+      bb.maxY = Math.max(bb.maxY, g2.maxY);
+    }
+  }
+  return bb;
+}
 function paintSchematic(input) {
   var _a2, _b, _c, _d;
   const { ctx, value, cam, width, height, visibleItems, tiers, selected, centers, palette: p2 } = input;
   const wx = (x2) => x2 * cam.ppu + cam.tx;
   const wy = (y2) => y2 * cam.ppu + cam.ty;
   const ppu = cam.ppu;
-  ctx.clearRect(0, 0, width, height);
+  const viewBbox = viewportWorldBbox(cam, width, height);
+  ctx.save();
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  ctx.restore();
   ctx.lineJoin = "round";
   for (const zone of value.zones) {
+    const geom = getSomeorUndefined(zone.geometry);
+    if (!bboxOverlaps(zoneWorldBbox(zone, geom), viewBbox)) continue;
     const pattern = zone.pattern;
     const patternTone = (pattern.value.tone.type === "some" ? pattern.value.tone.value.type : void 0) ?? "muted";
     const tint = resolveTint(p2, getSomeorUndefined(zone.color), (_a2 = getSomeorUndefined(zone.tone)) == null ? void 0 : _a2.type, toneRGB(p2, patternTone, "zone"));
     const zbg = getSomeorUndefined(zone.bg);
     const zFillAlpha = getSomeorUndefined(zone.fillOpacity) ?? 0.15;
     const zWeight = getSomeorUndefined(zone.weight);
-    const geom = getSomeorUndefined(zone.geometry);
     const x2 = wx(zone.x), y2 = wy(zone.y), w2 = zone.width * ppu, h2 = zone.height * ppu;
     const fillShape = () => {
       if (zbg === void 0) return;
@@ -61773,8 +61934,8 @@ function paintSchematic(input) {
         }
       }
     } else if (pattern.type === "hatch") {
-      const spacing = pattern.value.spacing.type === "some" ? pattern.value.spacing.value : 8;
-      const angle = (pattern.value.angle.type === "some" ? pattern.value.angle.value : 45) * Math.PI / 180;
+      const spacing = hatchSpacing(getSomeorUndefined(pattern.value.spacing) ?? 8);
+      const angle = (getSomeorUndefined(pattern.value.angle) ?? 45) * Math.PI / 180;
       ctx.save();
       ctx.beginPath();
       ctx.rect(x2, y2, w2, h2);
@@ -61791,8 +61952,9 @@ function paintSchematic(input) {
       ctx.lineWidth = zWeight ?? 1;
       const dx = Math.cos(angle), dy = Math.sin(angle);
       const diag = Math.hypot(w2, h2);
+      const { oStart, oEnd } = hatchSweepBounds(x2, y2, w2, h2, width, height, dx, dy, diag, spacing);
       ctx.beginPath();
-      for (let o2 = -diag; o2 < diag; o2 += spacing) {
+      for (let o2 = oStart; o2 < oEnd; o2 += spacing) {
         ctx.moveTo(x2 + o2, y2 - diag * dy);
         ctx.lineTo(x2 + o2 + dx * 2 * diag, y2 - diag * dy + dy * 2 * diag);
       }
@@ -61826,6 +61988,8 @@ function paintSchematic(input) {
   for (const link2 of value.links) {
     const from = centers.get(link2.from), to = centers.get(link2.to);
     if (!from || !to) continue;
+    const linkBbox = pointsBbox([from, ...link2.via, to]);
+    if (linkBbox !== null && !bboxOverlaps(linkBbox, viewBbox)) continue;
     const anchors = [from, ...link2.via, to].map((q) => ({ x: wx(q.x), y: wy(q.y) }));
     const corner = link2.route.type === "orthogonal" ? link2.route.value.corner.type === "some" ? link2.route.value.corner.value : 8 : 0;
     const pts = link2.route.type === "orthogonal" ? orthogonalize(anchors) : anchors;
@@ -61899,7 +62063,7 @@ function paintSchematic(input) {
     const x2 = wx(item.x), y2 = wy(item.y);
     if (tier === "dot") {
       ctx.beginPath();
-      ctx.arc(x2, y2, 5, 0, Math.PI * 2);
+      ctx.arc(x2, y2, MARKER_DOT_RADIUS, 0, Math.PI * 2);
       ctx.fillStyle = tint;
       ctx.fill();
       ctx.lineWidth = 1.5;
@@ -61914,11 +62078,10 @@ function paintSchematic(input) {
       }
       continue;
     }
-    ctx.font = '600 10px ui-monospace, "SF Mono", Menlo, monospace';
-    const tw = ctx.measureText(item.label).width;
-    const padX = 6, dotW = 7, gap = 4, h2 = 16;
-    const w2 = padX + dotW + gap + tw + padX;
-    const left = x2 - w2 / 2, top = y2 - h2 / 2;
+    ctx.font = MARKER_LABEL_FONT;
+    const box = markerHitbox(item, "label", cam, (t4) => ctx.measureText(t4).width);
+    if (box.kind !== "rect") continue;
+    const { left, top, w: w2, h: h2 } = box;
     ctx.beginPath();
     (_d = ctx.roundRect) == null ? void 0 : _d.call(ctx, left, top, w2, h2, h2 / 2);
     if (!ctx.roundRect) ctx.rect(left, top, w2, h2);
@@ -61928,12 +62091,12 @@ function paintSchematic(input) {
     ctx.strokeStyle = isSel ? css(p2.fg) : css(p2.borderStrong);
     ctx.stroke();
     ctx.beginPath();
-    ctx.arc(left + padX + dotW / 2, y2, dotW / 2, 0, Math.PI * 2);
+    ctx.arc(left + MARKER_PIN_PAD_X + MARKER_PIN_DOT_W / 2, y2, MARKER_PIN_DOT_W / 2, 0, Math.PI * 2);
     ctx.fillStyle = tint;
     ctx.fill();
     ctx.fillStyle = css(p2.fg);
     ctx.textBaseline = "middle";
-    ctx.fillText(item.label, left + padX + dotW + gap, y2);
+    ctx.fillText(item.label, left + MARKER_PIN_PAD_X + MARKER_PIN_DOT_W + MARKER_PIN_GAP, y2);
   }
 }
 const TOKENS = {
@@ -61980,7 +62143,6 @@ const SchematicPaletteProbe = memo$2(function SchematicPaletteProbe2({ onResolve
 });
 library$1.add(icons$2);
 const schematicEqual = equalFor(Schematic.Types.Schematic);
-const IDENTITY = { zoom: 1, tx: 0, ty: 0 };
 const MAX_ZOOM = 40;
 const LOD_CARD_PPU = 30;
 const LOD_LABEL_PPU = 16;
@@ -62085,7 +62247,7 @@ function declutterTiers(items, tree, baseLod, ppu, selected) {
   if (selected !== null && tiers.has(selected)) tiers.set(selected, baseLod);
   return tiers;
 }
-const EastChakraSchematic = memo$2(function EastChakraSchematic2({ value }) {
+const EastChakraSchematic = memo$2(function EastChakraSchematic2({ value, storageKey }) {
   const styles2 = useSlotRecipe({ key: "schematic" })();
   const { width: W2, height: H } = value.extent;
   const onSelectFn = useMemo(() => getSomeorUndefined(value.onSelect), [value.onSelect]);
@@ -62095,14 +62257,17 @@ const EastChakraSchematic = memo$2(function EastChakraSchematic2({ value }) {
   const showMinimap = getSomeorUndefined(value.minimap) ?? value.items.length >= MINIMAP_AUTO;
   const fixedHeight = getSomeorUndefined(value.height);
   const [selected, setSelected] = useState(null);
-  const [view, setView] = useState(IDENTITY);
   const [query, setQuery] = useState("");
   const [openZone, setOpenZone] = useState(null);
-  const [navCollapsed, setNavCollapsed] = useState(false);
+  const { state: persisted, setState: setPersisted } = usePersistedState(storageKey, { navCollapsed: false });
+  const navCollapsed = persisted.navCollapsed;
+  const setNavCollapsed = useCallback((next) => setPersisted((prev) => ({ ...prev, navCollapsed: next })), [setPersisted]);
   const [palette, setPalette] = useState(null);
   const navTreeRef = useRef(null);
   const canvasRef = useRef(null);
   const drawRef = useRef(null);
+  const cardLayerRef = useRef(null);
+  const gridRef = useRef(null);
   const [size, setSize] = useState(null);
   useLayoutEffect(() => {
     const el = canvasRef.current;
@@ -62113,10 +62278,30 @@ const EastChakraSchematic = memo$2(function EastChakraSchematic2({ value }) {
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
+  const [dpr, setDpr] = useState(() => typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    let cleanup = () => {
+    };
+    const subscribe2 = () => {
+      const mql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      const onChange2 = () => {
+        cleanup();
+        setDpr(window.devicePixelRatio || 1);
+        subscribe2();
+      };
+      mql.addEventListener("change", onChange2);
+      cleanup = () => mql.removeEventListener("change", onChange2);
+    };
+    subscribe2();
+    return () => cleanup();
+  }, []);
+  const cameraRef = useRef(IDENTITY);
+  const modeRef = useRef("idle");
+  const animRef = useRef(null);
+  const [cameraSnapshot, setCameraSnapshot] = useState(IDENTITY);
   const fit = size !== null ? Math.min(size.w / W2, size.h / H) : 0;
-  const ppu = fit * view.zoom;
-  const wx = (x2) => x2 * ppu + view.tx;
-  const wy = (y2) => y2 * ppu + view.ty;
+  const ppu = fit * cameraSnapshot.zoom;
   const centers = useMemo(() => {
     const out = /* @__PURE__ */ new Map();
     for (const item of value.items) out.set(item.key, { x: item.x, y: item.y });
@@ -62149,12 +62334,12 @@ const EastChakraSchematic = memo$2(function EastChakraSchematic2({ value }) {
   const visibleItems = useMemo(() => {
     if (size === null || ppu === 0) return [];
     return index2.search({
-      minX: -view.tx / ppu,
-      minY: -view.ty / ppu,
-      maxX: (size.w - view.tx) / ppu,
-      maxY: (size.h - view.ty) / ppu
+      minX: -cameraSnapshot.tx / ppu,
+      minY: -cameraSnapshot.ty / ppu,
+      maxX: (size.w - cameraSnapshot.tx) / ppu,
+      maxY: (size.h - cameraSnapshot.ty) / ppu
     }).map((b2) => b2.item);
-  }, [index2, size, ppu, view]);
+  }, [index2, size, ppu, cameraSnapshot]);
   const nav = useMemo(() => buildNavTree(value.zones, value.items), [value.zones, value.items]);
   const zoneDisplay = useMemo(() => {
     const counts = /* @__PURE__ */ new Map();
@@ -62180,106 +62365,15 @@ const EastChakraSchematic = memo$2(function EastChakraSchematic2({ value }) {
     const indexOf = new Map(ordered.map((item, i2) => [item.key, i2]));
     return { ordered, indexOf };
   }, [nav]);
-  const animRef = useRef(null);
-  const viewRef = useRef(view);
-  viewRef.current = view;
-  const flyTo = useCallback((rect) => {
-    if (size === null || fit === 0) return;
-    const pad2 = 1.18;
-    const zoom = Math.min(MAX_ZOOM, Math.min(size.w / (rect.w * pad2 * fit), size.h / (rect.h * pad2 * fit)));
-    const target = {
-      zoom,
-      tx: size.w / 2 - (rect.x + rect.w / 2) * fit * zoom,
-      ty: size.h / 2 - (rect.y + rect.h / 2) * fit * zoom
-    };
-    const from = viewRef.current;
-    const start = performance.now();
-    if (animRef.current !== null) cancelAnimationFrame(animRef.current);
-    const step = (now) => {
-      const t4 = Math.min(1, (now - start) / 350);
-      const e3 = 1 - Math.pow(1 - t4, 3);
-      setView({
-        zoom: from.zoom + (target.zoom - from.zoom) * e3,
-        tx: from.tx + (target.tx - from.tx) * e3,
-        ty: from.ty + (target.ty - from.ty) * e3
-      });
-      if (t4 < 1) animRef.current = requestAnimationFrame(step);
-    };
-    animRef.current = requestAnimationFrame(step);
-  }, [size, fit]);
-  useEffect(() => () => {
-    if (animRef.current !== null) cancelAnimationFrame(animRef.current);
-  }, []);
-  const flyToItem = useCallback((item) => {
-    flyTo({ x: item.x - 4, y: item.y - 3, w: 8, h: 6 });
-    setSelected(item.key);
-    setOpenZone(nav.zoneOf.get(item.key) ?? null);
-    if (onSelectFn) queueMicrotask(() => onSelectFn(item.key));
-  }, [flyTo, nav.zoneOf, onSelectFn]);
-  const stepSelection = useCallback((delta) => {
-    const { ordered, indexOf } = itemOrder;
-    if (ordered.length === 0) return;
-    const idx = selected !== null ? indexOf.get(selected) ?? -1 : -1;
-    flyToItem(ordered[(idx + delta + ordered.length) % ordered.length]);
-  }, [itemOrder, selected, flyToItem]);
-  const flyToZone = useCallback((zone) => {
-    flyTo({ x: zone.x, y: zone.y, w: zone.width, h: zone.height });
-    setOpenZone(zone.key);
-  }, [flyTo]);
-  useEffect(() => {
-    const el = canvasRef.current;
-    if (!el) return;
-    const onWheel = (e3) => {
-      e3.preventDefault();
-      const rect = el.getBoundingClientRect();
-      const px = e3.clientX - rect.left, py = e3.clientY - rect.top;
-      setView((prev) => {
-        const zoom = Math.max(1, Math.min(MAX_ZOOM, prev.zoom * Math.exp(-e3.deltaY * 15e-4)));
-        const k2 = zoom / prev.zoom;
-        const next = { zoom, tx: px - k2 * (px - prev.tx), ty: py - k2 * (py - prev.ty) };
-        return zoom === 1 ? IDENTITY : next;
-      });
-    };
-    el.addEventListener("wheel", onWheel, { passive: false });
-    return () => el.removeEventListener("wheel", onWheel);
-  }, []);
-  const panRef = useRef(null);
-  const movedRef = useRef(false);
-  const onCanvasPointerDown = useCallback((e3) => {
-    if (e3.button !== 0) return;
-    if (e3.target.closest("button") !== null) return;
-    panRef.current = { x: e3.clientX, y: e3.clientY, tx: viewRef.current.tx, ty: viewRef.current.ty };
-    movedRef.current = false;
-    e3.currentTarget.setPointerCapture(e3.pointerId);
-  }, []);
-  const onCanvasPointerMove = useCallback((e3) => {
-    const pan = panRef.current;
-    if (!pan) return;
-    if (Math.abs(e3.clientX - pan.x) > 4 || Math.abs(e3.clientY - pan.y) > 4) movedRef.current = true;
-    setView((prev) => ({ ...prev, tx: pan.tx + e3.clientX - pan.x, ty: pan.ty + e3.clientY - pan.y }));
-  }, []);
-  const onCanvasPointerUp = useCallback(() => {
-    panRef.current = null;
-  }, []);
-  const resetView = useCallback(() => setView(IDENTITY), []);
-  const zoomBy = useCallback((factor) => {
-    if (size === null) return;
-    const px = size.w / 2, py = size.h / 2;
-    setView((prev) => {
-      const zoom = Math.max(1, Math.min(MAX_ZOOM, prev.zoom * factor));
-      const k2 = zoom / prev.zoom;
-      return zoom === 1 ? IDENTITY : { zoom, tx: px - k2 * (px - prev.tx), ty: py - k2 * (py - prev.ty) };
-    });
-  }, [size]);
   const [currentZone, setCurrentZone] = useState(void 0);
   useEffect(() => {
     const SPY_ENTER = 0.3, SPY_STAY = 0.18, SPY_MARGIN = 0.15;
-    if (size === null || ppu === 0 || view.zoom <= 1.05) {
+    if (size === null || ppu === 0 || cameraSnapshot.zoom <= 1.05) {
       setCurrentZone(void 0);
       return;
     }
-    const vx0 = -view.tx / ppu, vy0 = -view.ty / ppu;
-    const vx1 = (size.w - view.tx) / ppu, vy1 = (size.h - view.ty) / ppu;
+    const vx0 = -cameraSnapshot.tx / ppu, vy0 = -cameraSnapshot.ty / ppu;
+    const vx1 = (size.w - cameraSnapshot.tx) / ppu, vy1 = (size.h - cameraSnapshot.ty) / ppu;
     const viewArea = (vx1 - vx0) * (vy1 - vy0);
     const scoreOf = (z) => {
       const ix = Math.max(0, Math.min(vx1, z.x + z.width) - Math.max(vx0, z.x));
@@ -62303,73 +62397,321 @@ const EastChakraSchematic = memo$2(function EastChakraSchematic2({ value }) {
       }
       return bestScore >= SPY_ENTER ? best : void 0;
     });
-  }, [size, ppu, view, value.zones]);
+  }, [size, ppu, cameraSnapshot, value.zones]);
   const lod = ppu >= LOD_CARD_PPU ? "card" : ppu >= LOD_LABEL_PPU ? "label" : "dot";
   const centerTree = useMemo(() => buildCenterTree(visibleItems), [visibleItems]);
   const tiers = useMemo(() => declutterTiers(visibleItems, centerTree, lod, ppu, selected), [visibleItems, centerTree, lod, ppu, selected]);
   const lowerQuery = query.trim().toLowerCase();
   const searchHits = useMemo(() => lowerQuery === "" ? [] : value.items.filter((i2) => i2.key.toLowerCase().includes(lowerQuery) || i2.label.toLowerCase().includes(lowerQuery)).slice(0, 12), [lowerQuery, value.items]);
   const scaleLen = ppu > 0 ? niceScaleLength(ppu, 100) : 0;
-  useEffect(() => {
-    const canvas = drawRef.current;
-    if (canvas === null || size === null || palette === null) return;
-    const dpr = window.devicePixelRatio || 1;
-    const bw = Math.round(size.w * dpr), bh = Math.round(size.h * dpr);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const sizeRef = useRef(size);
+  sizeRef.current = size;
+  const fitRef = useRef(fit);
+  fitRef.current = fit;
+  const dprRef = useRef(dpr);
+  dprRef.current = dpr;
+  const paletteRef = useRef(palette);
+  paletteRef.current = palette;
+  const visibleItemsRef = useRef(visibleItems);
+  visibleItemsRef.current = visibleItems;
+  const tiersRef = useRef(tiers);
+  tiersRef.current = tiers;
+  const selectedRef = useRef(selected);
+  selectedRef.current = selected;
+  const centersRef = useRef(centers);
+  centersRef.current = centers;
+  const openZoneRef = useRef(openZone);
+  openZoneRef.current = openZone;
+  const lastPaintRef = useRef(null);
+  const applyCamera = useCallback(() => {
+    const sz = sizeRef.current;
+    if (sz === null) return;
+    const cam = cameraRef.current;
+    const ppuLive = fitRef.current * cam.zoom;
+    const dprLive = dprRef.current;
+    const layer = cardLayerRef.current;
+    if (layer !== null) {
+      layer.style.setProperty("--cam-ppu", String(ppuLive));
+      layer.style.setProperty("--cam-tx", `${cam.tx}px`);
+      layer.style.setProperty("--cam-ty", `${cam.ty}px`);
+    }
+    const grid = gridRef.current;
+    if (grid !== null) {
+      const len = ppuLive > 0 ? niceScaleLength(ppuLive, 100) : 0;
+      if (len > 0) {
+        const major = len * ppuLive, minor = major / 5;
+        grid.style.backgroundSize = `${major}px ${major}px, ${major}px ${major}px, ${minor}px ${minor}px, ${minor}px ${minor}px`;
+        grid.style.backgroundPosition = `${cam.tx}px 0, 0 ${cam.ty}px, ${cam.tx}px 0, 0 ${cam.ty}px`;
+      }
+    }
+    const canvas = drawRef.current, pal = paletteRef.current;
+    if (canvas === null || pal === null) return;
+    const last = lastPaintRef.current;
+    if (last !== null && last.zoom === cam.zoom && last.tx === cam.tx && last.ty === cam.ty && last.vis === visibleItemsRef.current && last.tiers === tiersRef.current && last.sel === selectedRef.current && last.pal === pal && last.w === sz.w && last.h === sz.h && last.dpr === dprLive && last.val === valueRef.current) return;
+    lastPaintRef.current = {
+      zoom: cam.zoom,
+      tx: cam.tx,
+      ty: cam.ty,
+      vis: visibleItemsRef.current,
+      tiers: tiersRef.current,
+      sel: selectedRef.current,
+      pal,
+      w: sz.w,
+      h: sz.h,
+      dpr: dprLive,
+      val: valueRef.current
+    };
+    const bw = Math.round(sz.w * dprLive), bh = Math.round(sz.h * dprLive);
     if (canvas.width !== bw || canvas.height !== bh) {
       canvas.width = bw;
       canvas.height = bh;
     }
     const ctx = canvas.getContext("2d");
     if (ctx === null) return;
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.setTransform(dprLive, 0, 0, dprLive, 0, 0);
     paintSchematic({
       ctx,
-      value,
-      cam: { ppu, tx: view.tx, ty: view.ty },
-      width: size.w,
-      height: size.h,
-      visibleItems,
-      tiers,
-      selected,
-      centers,
-      palette
+      value: valueRef.current,
+      cam: { ppu: ppuLive, tx: cam.tx, ty: cam.ty },
+      width: sz.w,
+      height: sz.h,
+      visibleItems: visibleItemsRef.current,
+      tiers: tiersRef.current,
+      selected: selectedRef.current,
+      centers: centersRef.current,
+      palette: pal
     });
-  }, [value, view, ppu, size, visibleItems, tiers, selected, centers, palette]);
-  const onCanvasClick = useCallback((e3) => {
-    if (size === null || movedRef.current) return;
-    const rect = e3.currentTarget.getBoundingClientRect();
-    const sx = e3.clientX - rect.left, sy = e3.clientY - rect.top;
-    const wxp = (sx - view.tx) / ppu, wyp = (sy - view.ty) / ppu;
-    for (const box of index2.search({ minX: wxp, minY: wyp, maxX: wxp, maxY: wyp })) {
-      const it = box.item;
+  }, []);
+  const coalescerRef = useRef(null);
+  if (coalescerRef.current === null && typeof requestAnimationFrame !== "undefined") {
+    coalescerRef.current = makeRafCoalescer(requestAnimationFrame, cancelAnimationFrame);
+  }
+  const requestRender = useCallback(() => {
+    const run = () => {
+      applyCamera();
+      const cam = cameraRef.current;
+      setCameraSnapshot((prev) => prev.zoom === cam.zoom && prev.tx === cam.tx && prev.ty === cam.ty ? prev : { zoom: cam.zoom, tx: cam.tx, ty: cam.ty });
+    };
+    const cz = coalescerRef.current;
+    if (cz !== null) cz.request(run);
+    else run();
+  }, [applyCamera]);
+  const cancelFlyRaf = useCallback(() => {
+    if (animRef.current !== null) {
+      cancelAnimationFrame(animRef.current);
+      animRef.current = null;
+    }
+  }, []);
+  const transition = useCallback((event) => {
+    if (cancelsFly(modeRef.current, event)) cancelFlyRaf();
+    modeRef.current = nextMode(modeRef.current, event);
+  }, [cancelFlyRaf]);
+  const flyTo = useCallback((rect) => {
+    if (sizeRef.current === null || fitRef.current === 0) return;
+    const pad2 = 1.18;
+    const frame = () => {
+      const sz = sizeRef.current, ft = fitRef.current;
+      if (sz === null || ft === 0) return null;
+      const zoom = Math.min(MAX_ZOOM, Math.min(sz.w / (rect.w * pad2 * ft), sz.h / (rect.h * pad2 * ft)));
+      return {
+        zoom,
+        tx: sz.w / 2 - (rect.x + rect.w / 2) * ft * zoom,
+        ty: sz.h / 2 - (rect.y + rect.h / 2) * ft * zoom
+      };
+    };
+    const from = { ...cameraRef.current };
+    const start = performance.now();
+    if (animRef.current !== null) cancelAnimationFrame(animRef.current);
+    transition("flyStart");
+    const step = (now) => {
+      const t4 = Math.min(1, (now - start) / 350);
+      const e3 = 1 - Math.pow(1 - t4, 3);
+      const target = frame();
+      if (target !== null) {
+        cameraRef.current = {
+          zoom: from.zoom + (target.zoom - from.zoom) * e3,
+          tx: from.tx + (target.tx - from.tx) * e3,
+          ty: from.ty + (target.ty - from.ty) * e3
+        };
+        applyCamera();
+        const cam = cameraRef.current;
+        setCameraSnapshot({ zoom: cam.zoom, tx: cam.tx, ty: cam.ty });
+      }
+      if (t4 < 1) {
+        animRef.current = requestAnimationFrame(step);
+      } else {
+        animRef.current = null;
+        transition("flyEnd");
+      }
+    };
+    animRef.current = requestAnimationFrame(step);
+  }, [applyCamera, transition]);
+  const zoneOverrideRef = useRef(null);
+  const flyToItem = useCallback((item) => {
+    flyTo({ x: item.x - 4, y: item.y - 3, w: 8, h: 6 });
+    setSelected(item.key);
+    zoneOverrideRef.current = null;
+    setOpenZone(nav.zoneOf.get(item.key) ?? null);
+    if (onSelectFn) queueMicrotask(() => onSelectFn(item.key));
+  }, [flyTo, nav.zoneOf, onSelectFn]);
+  const stepSelection = useCallback((delta) => {
+    const { ordered, indexOf } = itemOrder;
+    if (ordered.length === 0) return;
+    const idx = selected !== null ? indexOf.get(selected) ?? -1 : -1;
+    flyToItem(ordered[(idx + delta + ordered.length) % ordered.length]);
+  }, [itemOrder, selected, flyToItem]);
+  const flyToZone = useCallback((zone) => {
+    flyTo({ x: zone.x, y: zone.y, w: zone.width, h: zone.height });
+    zoneOverrideRef.current = null;
+    setOpenZone(zone.key);
+  }, [flyTo]);
+  useEffect(() => {
+    const el = canvasRef.current;
+    if (!el) return;
+    const onWheel = (e3) => {
+      e3.preventDefault();
+      const rect = el.getBoundingClientRect();
+      const px = e3.clientX - rect.left, py = e3.clientY - rect.top;
+      transition("wheel");
+      cameraRef.current = zoomAbout(cameraRef.current, Math.exp(-e3.deltaY * 15e-4), px, py, 1, MAX_ZOOM);
+      requestRender();
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [transition, requestRender]);
+  const panRef = useRef(null);
+  const movedRef = useRef(false);
+  const pickAt = useCallback((host, clientX, clientY) => {
+    var _a2, _b, _c;
+    const sz = sizeRef.current;
+    if (sz === null) return false;
+    const cam = cameraRef.current;
+    const ppuLive = fitRef.current * cam.zoom;
+    if (ppuLive === 0) return false;
+    const rect = host.getBoundingClientRect();
+    const sx = clientX - rect.left, sy = clientY - rect.top;
+    const wxp = (sx - cam.tx) / ppuLive, wyp = (sy - cam.ty) / ppuLive;
+    const select = (key) => {
+      setSelected(key);
+      if (onSelectFn) queueMicrotask(() => onSelectFn(key));
+    };
+    for (const it of visibleItems) {
       if ((tiers.get(it.key) ?? lod) !== "card") continue;
       const fp = getSomeorUndefined(it.footprint);
       if (fp === void 0 || fp.type === "rect") continue;
       const hit = fp.type === "circle" ? Math.hypot(wxp - it.x, wyp - it.y) <= fp.value.radius : pointInPolygon(wxp, wyp, fp.value.vertices);
       if (hit) {
-        setSelected(it.key);
-        if (onSelectFn) queueMicrotask(() => onSelectFn(it.key));
-        return;
+        select(it.key);
+        return true;
+      }
+    }
+    if (typeof document !== "undefined") {
+      const cardKey = (_b = (_a2 = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _a2.closest("[data-card-key]")) == null ? void 0 : _b.getAttribute("data-card-key");
+      if (cardKey !== null && cardKey !== void 0) {
+        select(cardKey);
+        return true;
       }
     }
+    const ctx = ((_c = drawRef.current) == null ? void 0 : _c.getContext("2d")) ?? null;
+    if (ctx !== null) {
+      ctx.save();
+      ctx.font = MARKER_LABEL_FONT;
+    }
+    const camScreen = { ppu: ppuLive, tx: cam.tx, ty: cam.ty };
     let best = null, bestD = Infinity;
     for (const it of visibleItems) {
       const tier = tiers.get(it.key) ?? lod;
       if (tier === "card") continue;
-      const d2 = Math.hypot(it.x * ppu + view.tx - sx, it.y * ppu + view.ty - sy);
-      const reach = tier === "dot" ? 9 : 18;
-      if (d2 < reach && d2 < bestD) {
+      const box = markerHitbox(it, tier, camScreen, (t4) => ctx !== null ? ctx.measureText(t4).width : t4.length * 6);
+      if (!markerHit(box, sx, sy)) continue;
+      const d2 = Math.hypot(it.x * ppuLive + cam.tx - sx, it.y * ppuLive + cam.ty - sy);
+      if (d2 < bestD) {
         best = it;
         bestD = d2;
       }
     }
-    if (best !== null) flyToItem(best);
-  }, [size, view, ppu, index2, tiers, lod, visibleItems, onSelectFn, flyToItem]);
+    if (ctx !== null) ctx.restore();
+    if (best !== null) {
+      flyToItem(best);
+      return true;
+    }
+    return false;
+  }, [tiers, lod, visibleItems, onSelectFn, flyToItem]);
+  const onCanvasPointerDown = useCallback((e3) => {
+    if (e3.button !== 0) return;
+    if (e3.target.closest("button") !== null) return;
+    transition("pointerDown");
+    panRef.current = { x: e3.clientX, y: e3.clientY, tx: cameraRef.current.tx, ty: cameraRef.current.ty };
+    movedRef.current = false;
+    e3.currentTarget.setPointerCapture(e3.pointerId);
+  }, [transition]);
+  const onCanvasPointerMove = useCallback((e3) => {
+    const pan = panRef.current;
+    if (!pan) return;
+    if (Math.abs(e3.clientX - pan.x) > 4 || Math.abs(e3.clientY - pan.y) > 4) movedRef.current = true;
+    cameraRef.current = { ...cameraRef.current, tx: pan.tx + e3.clientX - pan.x, ty: pan.ty + e3.clientY - pan.y };
+    requestRender();
+  }, [requestRender]);
+  const endPan = useCallback(() => {
+    if (panRef.current === null) return false;
+    panRef.current = null;
+    transition("pointerUp");
+    return true;
+  }, [transition]);
+  const onCanvasPointerUp = useCallback((e3) => {
+    const wasPress = endPan();
+    if (!wasPress || movedRef.current) return;
+    if (!pickAt(e3.currentTarget, e3.clientX, e3.clientY)) setSelected(null);
+  }, [endPan, pickAt]);
+  const onCanvasPointerCancel = useCallback(() => {
+    movedRef.current = false;
+    endPan();
+  }, [endPan]);
+  const resetView = useCallback(() => {
+    transition("cancel");
+    cameraRef.current = IDENTITY;
+    requestRender();
+  }, [transition, requestRender]);
+  const zoomBy = useCallback((factor) => {
+    const sz = sizeRef.current;
+    if (sz === null) return;
+    transition("zoom");
+    cameraRef.current = zoomAbout(cameraRef.current, factor, sz.w / 2, sz.h / 2, 1, MAX_ZOOM);
+    requestRender();
+  }, [transition, requestRender]);
+  const minimapDragRef = useRef(false);
+  const minimapJump = useCallback((el, clientX, clientY) => {
+    const sz = sizeRef.current;
+    if (sz === null) return;
+    const rect = el.getBoundingClientRect();
+    const cx2 = (clientX - rect.left) / rect.width * W2;
+    const cy = (clientY - rect.top) / rect.height * H;
+    const cam = cameraRef.current;
+    cameraRef.current = { ...cam, tx: sz.w / 2 - cx2 * fitRef.current * cam.zoom, ty: sz.h / 2 - cy * fitRef.current * cam.zoom };
+    requestRender();
+  }, [W2, H, requestRender]);
+  useEffect(() => () => {
+    var _a2;
+    (_a2 = coalescerRef.current) == null ? void 0 : _a2.cancel();
+    if (animRef.current !== null) cancelAnimationFrame(animRef.current);
+  }, [animRef]);
+  useLayoutEffect(() => {
+    applyCamera();
+  }, [applyCamera, value, visibleItems, tiers, selected, palette, size, dpr, fit, cameraSnapshot]);
   const toggleZone = useCallback((key) => {
-    setOpenZone((prev) => prev === key ? nav.parentOf.get(key) ?? null : key);
+    const collapsing = openZoneRef.current === key;
+    zoneOverrideRef.current = collapsing ? key : null;
+    setOpenZone(collapsing ? nav.parentOf.get(key) ?? null : key);
   }, [nav.parentOf]);
   useEffect(() => {
-    if (currentZone !== void 0) setOpenZone(currentZone);
+    if (currentZone === void 0) return;
+    if (zoneOverrideRef.current !== null) {
+      if (zoneOverrideRef.current === currentZone) return;
+      zoneOverrideRef.current = null;
+    }
+    setOpenZone(currentZone);
   }, [currentZone]);
   const openPath = useMemo(() => {
     const path2 = /* @__PURE__ */ new Set();
@@ -62394,7 +62736,15 @@ const EastChakraSchematic = memo$2(function EastChakraSchematic2({ value }) {
         Box,
         {
           css: styles2.navZone,
-          style: { paddingLeft: `${8 + depth * 14}px` },
+          style: {
+            paddingLeft: `${8 + depth * 14}px`,
+            // Pin this header below its ancestors' pinned headers
+            // (each level offset by one row) so the whole path stays
+            // visible while scrolling the zone's items; shallower
+            // levels stack above deeper ones.
+            top: `calc(var(--nav-row-h) * ${depth})`,
+            zIndex: 30 - depth
+          },
           ...node2.zone.key === currentZone ? { "data-current": "" } : {},
           children: [
             expandable ? /* @__PURE__ */ jsx(
@@ -62483,32 +62833,20 @@ const EastChakraSchematic = memo$2(function EastChakraSchematic2({ value }) {
         onPointerDown: onCanvasPointerDown,
         onPointerMove: onCanvasPointerMove,
         onPointerUp: onCanvasPointerUp,
+        onPointerCancel: onCanvasPointerCancel,
+        onLostPointerCapture: onCanvasPointerCancel,
         onDoubleClick: resetView,
         children: [
-          showGrid && size !== null && scaleLen > 0 && (() => {
-            const major = scaleLen * ppu;
-            const minor = major / 5;
-            return /* @__PURE__ */ jsx(
-              Box,
-              {
-                css: styles2.grid,
-                style: {
-                  backgroundSize: `${major}px ${major}px, ${major}px ${major}px, ${minor}px ${minor}px, ${minor}px ${minor}px`,
-                  backgroundPosition: `${view.tx}px 0, 0 ${view.ty}px, ${view.tx}px 0, 0 ${view.ty}px`
-                }
-              }
-            );
-          })(),
+          showGrid && size !== null && /* @__PURE__ */ jsx(Box, { ref: gridRef, css: styles2.grid }),
           size !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               "canvas",
               {
                 ref: drawRef,
-                onClick: onCanvasClick,
                 style: { position: "absolute", inset: 0, width: "100%", height: "100%" }
               }
             ),
-            visibleItems.map((item) => {
+            /* @__PURE__ */ jsx(Box, { ref: cardLayerRef, css: styles2.cardLayer, children: visibleItems.map((item) => {
               if ((tiers.get(item.key) ?? lod) !== "card") return null;
               const tone = statusTone(item.status);
               const isSelected = selected === item.key;
@@ -62522,17 +62860,14 @@ const EastChakraSchematic = memo$2(function EastChakraSchematic2({ value }) {
                 Box,
                 {
                   css: styles2.item,
+                  "data-card-key": item.key,
                   ...isSelected ? { "data-selected": "" } : {},
                   style: {
-                    left: wx(item.x),
-                    top: wy(item.y),
-                    ...typeof width === "number" ? { width: width * ppu } : {}
-                  },
-                  onClick: () => {
-                    setSelected(item.key);
-                    if (onSelectFn) queueMicrotask(() => onSelectFn(item.key));
+                    left: 0,
+                    top: 0,
+                    transform: `${cardTranslateCss(item.x, item.y)} translate(-50%, -50%)`,
+                    ...typeof width === "number" ? { width: cardWidthCss(width) } : {}
                   },
-                  onPointerDown: (e3) => e3.stopPropagation(),
                   children: [
                     /* @__PURE__ */ jsxs(Box, { css: styles2.itemHead, children: [
                       iconDef !== void 0 && /* @__PURE__ */ jsx(Box, { as: "span", css: styles2.itemIcon, children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: iconDef }) }),
@@ -62546,7 +62881,7 @@ const EastChakraSchematic = memo$2(function EastChakraSchematic2({ value }) {
                 },
                 item.key
               );
-            }),
+            }) }),
             /* @__PURE__ */ jsxs(Box, { css: styles2.controls, children: [
               /* @__PURE__ */ jsx(Box, { as: "button", css: styles2.controlButton, "aria-label": "Zoom in", title: "Zoom in (scroll)", onClick: () => zoomBy(1.5), children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faPlus }) }),
               /* @__PURE__ */ jsx(Box, { as: "button", css: styles2.controlButton, "aria-label": "Zoom out", title: "Zoom out (scroll)", onClick: () => zoomBy(1 / 1.5), children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faMinus }) }),
@@ -62590,16 +62925,20 @@ const EastChakraSchematic = memo$2(function EastChakraSchematic2({ value }) {
                 style: { width: 150, height: 150 * H / W2 },
                 onPointerDown: (e3) => {
                   e3.stopPropagation();
-                  const rect = e3.currentTarget.getBoundingClientRect();
-                  const cx2 = (e3.clientX - rect.left) / rect.width * W2;
-                  const cy = (e3.clientY - rect.top) / rect.height * H;
-                  if (size !== null) {
-                    setView((prev) => ({
-                      ...prev,
-                      tx: size.w / 2 - cx2 * fit * prev.zoom,
-                      ty: size.h / 2 - cy * fit * prev.zoom
-                    }));
-                  }
+                  const el = e3.currentTarget;
+                  el.setPointerCapture(e3.pointerId);
+                  transition("cancel");
+                  minimapDragRef.current = true;
+                  minimapJump(el, e3.clientX, e3.clientY);
+                },
+                onPointerMove: (e3) => {
+                  if (!minimapDragRef.current) return;
+                  e3.stopPropagation();
+                  minimapJump(e3.currentTarget, e3.clientX, e3.clientY);
+                },
+                onPointerUp: (e3) => {
+                  minimapDragRef.current = false;
+                  e3.currentTarget.releasePointerCapture(e3.pointerId);
                 },
                 children: [
                   value.zones.map((zone) => /* @__PURE__ */ jsx(
@@ -62620,8 +62959,8 @@ const EastChakraSchematic = memo$2(function EastChakraSchematic2({ value }) {
                     {
                       css: styles2.minimapViewport,
                       style: {
-                        left: `${Math.max(0, -view.tx / ppu / W2 * 100)}%`,
-                        top: `${Math.max(0, -view.ty / ppu / H * 100)}%`,
+                        left: `${Math.max(0, -cameraSnapshot.tx / ppu / W2 * 100)}%`,
+                        top: `${Math.max(0, -cameraSnapshot.ty / ppu / H * 100)}%`,
                         width: `${Math.min(100, size.w / ppu / W2 * 100)}%`,
                         height: `${Math.min(100, size.h / ppu / H * 100)}%`
                       }