@weasel-js/labkit 1.1.0 → 1.3.0-pre.0

package/dist/chunk-HFDVGF4X.js

@@ -0,0 +1,170 @@
+import { useVisibleRaf } from './chunk-Z6HJ5FEM.js';
+import { createContext, useContext, useCallback, useRef, useEffect } from 'react';
+
+// src/surface/composeRects.ts
+function composeRects(container, tiles) {
+  const out = /* @__PURE__ */ new Map();
+  for (const [id, tile] of tiles) {
+    out.set(id, {
+      x: tile.left - container.left,
+      y: tile.top - container.top,
+      w: tile.width,
+      h: tile.height
+    });
+  }
+  return out;
+}
+function rectsEqual(a, b) {
+  return a !== void 0 && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+}
+
+// src/surface/deviceRect.ts
+function toDeviceRect(rect, surfaceHeight, dpr) {
+  const snap = (v) => Math.round(v * dpr) / dpr;
+  const x = snap(rect.x);
+  const y = snap(surfaceHeight - rect.y - rect.h);
+  return {
+    x,
+    y,
+    w: snap(rect.x + rect.w) - x,
+    h: snap(surfaceHeight - rect.y) - y
+  };
+}
+var SurfaceContext = createContext(null);
+function useSurfaceOptional() {
+  return useContext(SurfaceContext);
+}
+function useSurface() {
+  const surface = useContext(SurfaceContext);
+  if (!surface) throw new Error("[labkit] useSurface requires a surface owner above it");
+  return surface;
+}
+function useSurfaceTile(id) {
+  const surface = useSurfaceOptional();
+  return useCallback(
+    (el) => {
+      surface?.registerTile(id, el);
+    },
+    [surface, id]
+  );
+}
+function useTiledSurface({ onFrame }) {
+  const container = useRef(null);
+  const tiles = useRef(/* @__PURE__ */ new Map());
+  const rects = useRef(/* @__PURE__ */ new Map());
+  const dirty = useRef(/* @__PURE__ */ new Set());
+  const needsMeasure = useRef(true);
+  const observer = useRef(null);
+  const lastDpr = useRef(0);
+  const onFrameRef = useRef(onFrame);
+  onFrameRef.current = onFrame;
+  const measure = useCallback(() => {
+    const el = container.current;
+    if (!el) return false;
+    const boxes = /* @__PURE__ */ new Map();
+    for (const [id, tile] of tiles.current) boxes.set(id, tile.getBoundingClientRect());
+    const next = composeRects(el.getBoundingClientRect(), boxes);
+    let changed = next.size !== rects.current.size;
+    for (const [id, rect] of next) {
+      if (!rectsEqual(rects.current.get(id), rect)) changed = true;
+    }
+    rects.current = next;
+    return changed;
+  }, []);
+  const frameLoop = useVisibleRaf(
+    () => {
+      const el = container.current;
+      if (!el) {
+        dirty.current.clear();
+        return;
+      }
+      if (needsMeasure.current) {
+        needsMeasure.current = false;
+        if (measure()) for (const id of rects.current.keys()) dirty.current.add(id);
+      }
+      const dpr = globalThis.devicePixelRatio ?? 1;
+      if (dpr !== lastDpr.current) {
+        lastDpr.current = dpr;
+        for (const id of rects.current.keys()) dirty.current.add(id);
+      }
+      if (dirty.current.size === 0) return;
+      const box = el.getBoundingClientRect();
+      onFrameRef.current({
+        dirty: new Set(dirty.current),
+        rects: new Map(rects.current),
+        dpr,
+        size: { width: box.width, height: box.height }
+      });
+      dirty.current.clear();
+    },
+    // The host attaches its container through `containerRef`, which may land
+    // well after this hook's first effect; the gate re-resolves it per request.
+    { target: () => container.current }
+  );
+  const schedule = useCallback(() => {
+    frameLoop.request();
+  }, [frameLoop]);
+  const invalidate = useCallback(
+    (id) => {
+      dirty.current.add(id);
+      schedule();
+    },
+    [schedule]
+  );
+  const invalidateAll = useCallback(() => {
+    for (const id of tiles.current.keys()) dirty.current.add(id);
+    schedule();
+  }, [schedule]);
+  const invalidateRects = useCallback(() => {
+    needsMeasure.current = true;
+    schedule();
+  }, [schedule]);
+  const registerTile = useCallback(
+    (id, el) => {
+      const known = tiles.current.get(id);
+      if (known === el) return;
+      if (known) observer.current?.unobserve(known);
+      if (el) {
+        tiles.current.set(id, el);
+        observer.current?.observe(el);
+      } else {
+        tiles.current.delete(id);
+        rects.current.delete(id);
+        dirty.current.delete(id);
+      }
+      needsMeasure.current = true;
+      schedule();
+    },
+    [schedule]
+  );
+  const containerRef = useCallback(
+    (el) => {
+      if (container.current === el) return;
+      if (container.current) observer.current?.unobserve(container.current);
+      container.current = el;
+      if (el) observer.current?.observe(el);
+      needsMeasure.current = true;
+      schedule();
+    },
+    [schedule]
+  );
+  useEffect(() => {
+    const ro = new ResizeObserver(() => {
+      needsMeasure.current = true;
+      schedule();
+    });
+    observer.current = ro;
+    if (container.current) ro.observe(container.current);
+    for (const el of tiles.current.values()) ro.observe(el);
+    return () => {
+      ro.disconnect();
+      observer.current = null;
+      frameLoop.cancel();
+    };
+  }, [schedule, frameLoop]);
+  return { invalidate, invalidateAll, invalidateRects, registerTile, containerRef };
+}
+
+export { SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceOptional, useSurfaceTile, useTiledSurface };
+//# sourceMappingURL=chunk-HFDVGF4X.js.map
+//# sourceMappingURL=chunk-HFDVGF4X.js.map

package/dist/chunk-HFDVGF4X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/surface/composeRects.ts","../src/surface/deviceRect.ts","../src/surface/SurfaceContext.ts","../src/surface/useSurfaceTile.ts","../src/surface/useTiledSurface.ts"],"names":["useCallback"],"mappings":"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","file":"chunk-HFDVGF4X.js","sourcesContent":["import type { Box, Rect } from './rect';\n\n/** Every tile's box expressed against the container's origin. */\nexport function composeRects(container: Box, tiles: ReadonlyMap<string, Box>): Map<string, Rect> {\n  const out = new Map<string, Rect>();\n  for (const [id, tile] of tiles) {\n    out.set(id, {\n      x: tile.left - container.left,\n      y: tile.top - container.top,\n      w: tile.width,\n      h: tile.height,\n    });\n  }\n  return out;\n}\n\nexport function rectsEqual(a: Rect | undefined, b: Rect): boolean {\n  return a !== undefined && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;\n}\n","import type { Rect } from './rect';\n\n/**\n * A DOM rect as a GL viewport rect: origin at the bottom-left, every edge snapped\n * to the device-pixel grid. Still CSS pixels, because three.js applies its own\n * pixel ratio — snapping here is what stops a tile and its neighbour rounding\n * apart and leaving a hairline column between them.\n */\nexport function toDeviceRect(rect: Rect, surfaceHeight: number, dpr: number): Rect {\n  const snap = (v: number) => Math.round(v * dpr) / dpr;\n  const x = snap(rect.x);\n  const y = snap(surfaceHeight - rect.y - rect.h);\n  return {\n    x,\n    y,\n    w: snap(rect.x + rect.w) - x,\n    h: snap(surfaceHeight - rect.y) - y,\n  };\n}\n","import { createContext } from 'react';\nimport type { SurfaceHandle } from './useTiledSurface';\n\n/** Null when no surface owner is above — a lab with no shared surface at all. */\nexport const SurfaceContext = createContext<SurfaceHandle | null>(null);\n","import { useCallback, useContext } from 'react';\nimport { SurfaceContext } from './SurfaceContext';\nimport type { SurfaceHandle } from './useTiledSurface';\n\n/** The surface above, or null. Use this where a surface is genuinely optional. */\nexport function useSurfaceOptional(): SurfaceHandle | null {\n  return useContext(SurfaceContext);\n}\n\n/** The surface above. Throws where a caller cannot work without one. */\nexport function useSurface(): SurfaceHandle {\n  const surface = useContext(SurfaceContext);\n  if (!surface) throw new Error('[labkit] useSurface requires a surface owner above it');\n  return surface;\n}\n\n/**\n * A ref callback that publishes this element's rect to the surface under `id`.\n *\n * Attach it to whichever element the surface should draw into — that is not\n * necessarily the trial's own element, since a trial may hold a drawn pane beside\n * an undrawn one, or none at all.\n */\nexport function useSurfaceTile(id: string): (el: HTMLElement | null) => void {\n  const surface = useSurfaceOptional();\n  return useCallback(\n    (el: HTMLElement | null) => {\n      surface?.registerTile(id, el);\n    },\n    [surface, id],\n  );\n}\n","import { useVisibleRaf } from '@weasel-js/core';\nimport { useCallback, useEffect, useRef } from 'react';\nimport { composeRects, rectsEqual } from './composeRects';\nimport type { Box, Rect } from './rect';\n\n/** What a surface owner is handed once per animation frame. `rects` carries every\n *  tile, not only the dirty ones: a scissored draw has to know where it is drawing\n *  relative to a surface that may have resized under it. */\nexport interface SurfaceFrame {\n  dirty: ReadonlySet<string>;\n  rects: ReadonlyMap<string, Rect>;\n  dpr: number;\n  size: { width: number; height: number };\n}\n\n/** The invalidators and the two ref callbacks that publish geometry. */\nexport interface SurfaceHandle {\n  /** Mark one tile for redraw. */\n  invalidate: (id: string) => void;\n  /** Mark every tile — what a resize or a tile-set change means. */\n  invalidateAll: () => void;\n  /** Re-measure before the next frame. The escape hatch for a host that knows it\n   *  moved something a ResizeObserver cannot see. */\n  invalidateRects: () => void;\n  registerTile: (id: string, el: HTMLElement | null) => void;\n  containerRef: (el: HTMLElement | null) => void;\n}\n\nexport interface UseTiledSurfaceOptions {\n  onFrame: (frame: SurfaceFrame) => void;\n}\n\nexport function useTiledSurface({ onFrame }: UseTiledSurfaceOptions): SurfaceHandle {\n  const container = useRef<HTMLElement | null>(null);\n  const tiles = useRef(new Map<string, HTMLElement>());\n  const rects = useRef(new Map<string, Rect>());\n  const dirty = useRef(new Set<string>());\n  const needsMeasure = useRef(true);\n  const observer = useRef<ResizeObserver | null>(null);\n  const lastDpr = useRef(0);\n\n  // Held in a ref so a caller passing an inline closure does not re-create every\n  // callback below on each render.\n  const onFrameRef = useRef(onFrame);\n  onFrameRef.current = onFrame;\n\n  const measure = useCallback((): boolean => {\n    const el = container.current;\n    if (!el) return false;\n    const boxes = new Map<string, Box>();\n    for (const [id, tile] of tiles.current) boxes.set(id, tile.getBoundingClientRect());\n    const next = composeRects(el.getBoundingClientRect(), boxes);\n    let changed = next.size !== rects.current.size;\n    for (const [id, rect] of next) {\n      if (!rectsEqual(rects.current.get(id), rect)) changed = true;\n    }\n    rects.current = next;\n    return changed;\n  }, []);\n\n  const frameLoop = useVisibleRaf(\n    () => {\n      const el = container.current;\n      if (!el) {\n        dirty.current.clear();\n        return;\n      }\n      if (needsMeasure.current) {\n        needsMeasure.current = false;\n        if (measure()) for (const id of rects.current.keys()) dirty.current.add(id);\n      }\n      const dpr = globalThis.devicePixelRatio ?? 1;\n      if (dpr !== lastDpr.current) {\n        lastDpr.current = dpr;\n        for (const id of rects.current.keys()) dirty.current.add(id);\n      }\n      if (dirty.current.size === 0) return;\n      const box = el.getBoundingClientRect();\n      onFrameRef.current({\n        dirty: new Set(dirty.current),\n        rects: new Map(rects.current),\n        dpr,\n        size: { width: box.width, height: box.height },\n      });\n      dirty.current.clear();\n    },\n    // The host attaches its container through `containerRef`, which may land\n    // well after this hook's first effect; the gate re-resolves it per request.\n    { target: () => container.current },\n  );\n\n  const schedule = useCallback(() => {\n    frameLoop.request();\n  }, [frameLoop]);\n\n  const invalidate = useCallback(\n    (id: string) => {\n      dirty.current.add(id);\n      schedule();\n    },\n    [schedule],\n  );\n\n  const invalidateAll = useCallback(() => {\n    for (const id of tiles.current.keys()) dirty.current.add(id);\n    schedule();\n  }, [schedule]);\n\n  const invalidateRects = useCallback(() => {\n    needsMeasure.current = true;\n    schedule();\n  }, [schedule]);\n\n  const registerTile = useCallback(\n    (id: string, el: HTMLElement | null) => {\n      const known = tiles.current.get(id);\n      if (known === el) return;\n      if (known) observer.current?.unobserve(known);\n      if (el) {\n        tiles.current.set(id, el);\n        observer.current?.observe(el);\n      } else {\n        tiles.current.delete(id);\n        rects.current.delete(id);\n        dirty.current.delete(id);\n      }\n      needsMeasure.current = true;\n      schedule();\n    },\n    [schedule],\n  );\n\n  const containerRef = useCallback(\n    (el: HTMLElement | null) => {\n      if (container.current === el) return;\n      if (container.current) observer.current?.unobserve(container.current);\n      container.current = el;\n      if (el) observer.current?.observe(el);\n      needsMeasure.current = true;\n      schedule();\n    },\n    [schedule],\n  );\n\n  useEffect(() => {\n    const ro = new ResizeObserver(() => {\n      needsMeasure.current = true;\n      schedule();\n    });\n    observer.current = ro;\n    if (container.current) ro.observe(container.current);\n    for (const el of tiles.current.values()) ro.observe(el);\n    return () => {\n      ro.disconnect();\n      observer.current = null;\n      frameLoop.cancel();\n    };\n  }, [schedule, frameLoop]);\n\n  return { invalidate, invalidateAll, invalidateRects, registerTile, containerRef };\n}\n"]}

package/dist/chunk-LN6JDUGB.js

@@ -0,0 +1,106 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+// src/job/useJob.ts
+var IDLE = { status: "idle", done: 0, total: null, failures: [], error: null };
+function sameKey(a, b) {
+  if (a === null || b === null) return a === b;
+  return a.length === b.length && a.every((v, i) => Object.is(v, b[i]));
+}
+function useJob({
+  capability,
+  config,
+  state,
+  setState
+}) {
+  const [progress, setProgress] = useState(IDLE);
+  const token = useRef(0);
+  const abort = useRef(null);
+  const capRef = useRef(capability);
+  capRef.current = capability;
+  const configRef = useRef(config);
+  configRef.current = config;
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const setStateRef = useRef(setState);
+  setStateRef.current = setState;
+  const cancel = useCallback(() => {
+    token.current += 1;
+    abort.current?.abort();
+    abort.current = null;
+    setProgress(IDLE);
+  }, []);
+  const start = useCallback(() => {
+    token.current += 1;
+    const mine = token.current;
+    abort.current?.abort();
+    const controller = new AbortController();
+    abort.current = controller;
+    setProgress({ ...IDLE, status: "running" });
+    void (async () => {
+      try {
+        const iterable = capRef.current.run({
+          config: configRef.current,
+          state: stateRef.current,
+          signal: controller.signal
+        });
+        for await (const event of iterable) {
+          if (token.current !== mine) return;
+          if (event.kind === "total") {
+            setProgress((p) => ({ ...p, total: event.total }));
+          } else if (event.kind === "failed") {
+            setProgress((p) => ({
+              ...p,
+              failures: [...p.failures, { index: event.index, error: event.error }]
+            }));
+          } else {
+            const fold = capRef.current.onItem;
+            const item = event.item;
+            setStateRef.current((prev) => fold(item, prev));
+            setProgress((p) => ({ ...p, done: p.done + 1 }));
+          }
+        }
+        if (token.current !== mine) return;
+        setProgress((p) => ({ ...p, status: "done" }));
+      } catch (err) {
+        if (token.current !== mine) return;
+        setProgress((p) => ({
+          ...p,
+          status: "error",
+          error: err instanceof Error ? err.message : String(err)
+        }));
+      }
+    })();
+  }, []);
+  const lastKey = useRef(null);
+  const started = useRef(false);
+  const auto = capability.auto === true;
+  const key = capability.key ? capability.key(config, state) : null;
+  useEffect(() => {
+    if (!auto) return;
+    if (started.current && sameKey(lastKey.current, key)) return;
+    lastKey.current = key;
+    started.current = true;
+    start();
+  }, [auto, key, start]);
+  useEffect(
+    () => () => {
+      token.current += 1;
+      abort.current?.abort();
+      abort.current = null;
+    },
+    []
+  );
+  return {
+    status: progress.status,
+    done: progress.done,
+    total: progress.total,
+    failures: progress.failures,
+    error: progress.error,
+    start,
+    cancel
+  };
+}
+
+export { useJob };
+//# sourceMappingURL=chunk-LN6JDUGB.js.map
+//# sourceMappingURL=chunk-LN6JDUGB.js.map

package/dist/chunk-LN6JDUGB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/job/useJob.ts"],"names":[],"mappings":"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","file":"chunk-LN6JDUGB.js","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { JobCapability, JobFailure, JobHandle, JobStatus } from './types';\n\nexport interface UseJobOptions<TS, TC, TItem> {\n  capability: JobCapability<TS, TC, TItem>;\n  config: TC;\n  state: TS;\n  setState: (next: TS | ((prev: TS) => TS)) => void;\n}\n\ninterface Progress {\n  status: JobStatus;\n  done: number;\n  total: number | null;\n  failures: JobFailure[];\n  error: string | null;\n}\n\nconst IDLE: Progress = { status: 'idle', done: 0, total: null, failures: [], error: null };\n\nfunction sameKey(a: readonly unknown[] | null, b: readonly unknown[] | null): boolean {\n  if (a === null || b === null) return a === b;\n  return a.length === b.length && a.every((v, i) => Object.is(v, b[i]));\n}\n\nexport function useJob<TS, TC, TItem>({\n  capability,\n  config,\n  state,\n  setState,\n}: UseJobOptions<TS, TC, TItem>): JobHandle {\n  const [progress, setProgress] = useState<Progress>(IDLE);\n\n  // A run is identified by a token. Every result checks its token before touching\n  // state, so a superseded run finishes harmlessly instead of racing the winner.\n  const token = useRef(0);\n  const abort = useRef<AbortController | null>(null);\n\n  // Read through refs: `run` is called once per run and must see the values as of\n  // that moment rather than re-subscribing on every render.\n  const capRef = useRef(capability);\n  capRef.current = capability;\n  const configRef = useRef(config);\n  configRef.current = config;\n  const stateRef = useRef(state);\n  stateRef.current = state;\n  const setStateRef = useRef(setState);\n  setStateRef.current = setState;\n\n  const cancel = useCallback(() => {\n    token.current += 1;\n    abort.current?.abort();\n    abort.current = null;\n    setProgress(IDLE);\n  }, []);\n\n  const start = useCallback(() => {\n    token.current += 1;\n    const mine = token.current;\n    abort.current?.abort();\n    const controller = new AbortController();\n    abort.current = controller;\n    setProgress({ ...IDLE, status: 'running' });\n\n    void (async () => {\n      try {\n        const iterable = capRef.current.run({\n          config: configRef.current,\n          state: stateRef.current,\n          signal: controller.signal,\n        });\n        for await (const event of iterable) {\n          if (token.current !== mine) return;\n          if (event.kind === 'total') {\n            setProgress((p) => ({ ...p, total: event.total }));\n          } else if (event.kind === 'failed') {\n            setProgress((p) => ({\n              ...p,\n              failures: [...p.failures, { index: event.index, error: event.error }],\n            }));\n          } else {\n            const fold = capRef.current.onItem;\n            const item = event.item;\n            setStateRef.current((prev) => fold(item, prev));\n            setProgress((p) => ({ ...p, done: p.done + 1 }));\n          }\n        }\n        if (token.current !== mine) return;\n        setProgress((p) => ({ ...p, status: 'done' }));\n      } catch (err) {\n        if (token.current !== mine) return;\n        setProgress((p) => ({\n          ...p,\n          status: 'error',\n          error: err instanceof Error ? err.message : String(err),\n        }));\n      }\n    })();\n  }, []);\n\n  // Re-run when the declared key changes. `auto` covers the first mount too.\n  const lastKey = useRef<readonly unknown[] | null>(null);\n  const started = useRef(false);\n  const auto = capability.auto === true;\n  const key = capability.key ? capability.key(config, state) : null;\n  // `key` is compared element-wise inside; depending on the array identity here\n  // would restart the job on every render.\n  useEffect(() => {\n    if (!auto) return;\n    if (started.current && sameKey(lastKey.current, key)) return;\n    lastKey.current = key;\n    started.current = true;\n    start();\n  }, [auto, key, start]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(\n    () => () => {\n      token.current += 1;\n      abort.current?.abort();\n      abort.current = null;\n    },\n    [],\n  );\n\n  return {\n    status: progress.status,\n    done: progress.done,\n    total: progress.total,\n    failures: progress.failures,\n    error: progress.error,\n    start,\n    cancel,\n  };\n}\n"]}

package/dist/{chunk-574LJAV4.js → chunk-NS54R52R.js}

@@ -1,4 +1,5 @@
 import { CanvasStackContext } from './chunk-CPUJ3QXL.js';
+import { useVisibleRaf } from './chunk-Z6HJ5FEM.js';
 import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -15,9 +16,14 @@ function screenToWorld(screen, view) {
     y: (screen.y - view.pan.y) / view.zoom
   };
 }
-function useLayerScheduler({ layers, view, canvasRefs, size }) {
+function useLayerScheduler({
+  layers,
+  view,
+  canvasRefs,
+  size,
+  host
+}) {
   const dirty = useRef(/* @__PURE__ */ new Set());
-  const rafId = useRef(null);
   const lastRenderRef = useRef(/* @__PURE__ */ new Map());
   useEffect(() => {
     for (const layer of layers) {
@@ -32,9 +38,8 @@ function useLayerScheduler({ layers, view, canvasRefs, size }) {
   useEffect(() => {
     for (const layer of layers) dirty.current.add(layer.id);
   }, [view, size, layers]);
-  useEffect(() => {
-    const tick = () => {
-      rafId.current = null;
+  const frameLoop = useVisibleRaf(
+    () => {
       if (dirty.current.size === 0) return;
       const map = canvasRefs.current;
       if (!map) {
@@ -55,19 +60,17 @@ function useLayerScheduler({ layers, view, canvasRefs, size }) {
         ctx.restore();
       }
       dirty.current.clear();
-    };
-    if (dirty.current.size > 0 && rafId.current === null) {
-      rafId.current = requestAnimationFrame(tick);
-    }
-    return () => {
-      if (rafId.current !== null) {
-        cancelAnimationFrame(rafId.current);
-        rafId.current = null;
-      }
-    };
+    },
+    { target: host }
+  );
+  useEffect(() => {
+    if (dirty.current.size > 0) frameLoop.request();
   });
 }
 var DRAG_THRESHOLD = 3;
+function isPositiveFinite(n) {
+  return Number.isFinite(n) && n > 0;
+}
 function usePanZoom({
   view,
   onViewChange,
@@ -77,6 +80,7 @@ function usePanZoom({
   const dragRef = useRef(null);
   const viewRef = useRef(view);
   viewRef.current = view;
+  const initialZoomRef = useRef(isPositiveFinite(view.zoom) ? view.zoom : null);
   const onWheel = useCallback(
     (e) => {
       e.preventDefault();
@@ -84,9 +88,13 @@ function usePanZoom({
       const cursorX = e.clientX - rect.left;
       const cursorY = e.clientY - rect.top;
       const v = viewRef.current;
+      const initialZoom = initialZoomRef.current;
+      const effectiveMin = initialZoom == null ? minZoom : Math.min(minZoom, initialZoom);
+      const effectiveMax = initialZoom == null ? maxZoom : Math.max(maxZoom, initialZoom);
       const factor = Math.exp(-e.deltaY * 1e-3);
-      const nextZoom = Math.min(maxZoom, Math.max(minZoom, v.zoom * factor));
-      const ratio = nextZoom / v.zoom;
+      const rawZoom = isPositiveFinite(v.zoom) ? v.zoom : 1;
+      const nextZoom = Math.min(effectiveMax, Math.max(effectiveMin, rawZoom * factor));
+      const ratio = nextZoom / rawZoom;
       const nextPan = {
         x: cursorX - (cursorX - v.pan.x) * ratio,
         y: cursorY - (cursorY - v.pan.y) * ratio
@@ -136,6 +144,8 @@ function CanvasStack({
   layers,
   view,
   onViewChange,
+  minZoom,
+  maxZoom,
   width = "100%",
   height = "100%",
   className,
@@ -168,8 +178,8 @@ function CanvasStack({
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  const handlers = usePanZoom({ view, onViewChange });
-  useLayerScheduler({ layers, view, canvasRefs: canvasMap, size });
+  const handlers = usePanZoom({ view, onViewChange, minZoom, maxZoom });
+  useLayerScheduler({ layers, view, canvasRefs: canvasMap, size, host: containerRef });
   const ctxValue = useMemo(() => ({ view }), [view]);
   const containerStyle = { width, height };
   const canvasPx = {
@@ -218,5 +228,5 @@ function CanvasStack({
 }
 
 export { CanvasStack, screenToWorld, worldToScreen };
-//# sourceMappingURL=chunk-574LJAV4.js.map
-//# sourceMappingURL=chunk-574LJAV4.js.map
+//# sourceMappingURL=chunk-NS54R52R.js.map
+//# sourceMappingURL=chunk-NS54R52R.js.map

package/dist/chunk-NS54R52R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/canvas/canvasCoords.ts","../src/canvas/useLayerScheduler.ts","../src/canvas/usePanZoom.ts","../src/canvas/CanvasStack.tsx"],"names":["useRef","useEffect"],"mappings":"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","file":"chunk-NS54R52R.js","sourcesContent":["import type { Point, ViewTransform } from '../instrument/types';\n\n/** Project a world point into screen coordinates under a view. */\nexport function worldToScreen(world: Point, view: ViewTransform): Point {\n  return {\n    x: world.x * view.zoom + view.pan.x,\n    y: world.y * view.zoom + view.pan.y,\n  };\n}\n\n/** Unproject a screen point back to world coordinates under a view. */\nexport function screenToWorld(screen: Point, view: ViewTransform): Point {\n  return {\n    x: (screen.x - view.pan.x) / view.zoom,\n    y: (screen.y - view.pan.y) / view.zoom,\n  };\n}\n","import { useVisibleRaf } from '@weasel-js/core';\nimport { type RefObject, useEffect, useRef } from 'react';\nimport type { ViewTransform } from '../instrument/types';\n\n/** One layer of a canvas stack: its id, whether it is currently shown, and how\n *  it paints itself. */\nexport interface CanvasLayerDescriptor {\n  id: string;\n  visible: boolean;\n  render: (ctx: CanvasRenderingContext2D, view: ViewTransform) => void;\n}\n\ninterface SchedulerOptions {\n  layers: CanvasLayerDescriptor[];\n  view: ViewTransform;\n  canvasRefs: RefObject<Map<string, HTMLCanvasElement>>;\n  size: { width: number; height: number; dpr: number };\n  /** The element the stack occupies. Given one, the scheduler also stops while\n   *  the stack sits outside the viewport. */\n  host?: RefObject<Element | null>;\n}\n\nexport function useLayerScheduler({\n  layers,\n  view,\n  canvasRefs,\n  size,\n  host,\n}: SchedulerOptions): void {\n  const dirty = useRef<Set<string>>(new Set());\n  const lastRenderRef = useRef<Map<string, CanvasLayerDescriptor['render']>>(new Map());\n\n  useEffect(() => {\n    for (const layer of layers) {\n      const prev = lastRenderRef.current.get(layer.id);\n      if (prev !== layer.render) dirty.current.add(layer.id);\n      lastRenderRef.current.set(layer.id, layer.render);\n    }\n    for (const id of [...lastRenderRef.current.keys()]) {\n      if (!layers.find((l) => l.id === id)) lastRenderRef.current.delete(id);\n    }\n  }, [layers]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: re-mark dirty when view or size changes\n  useEffect(() => {\n    for (const layer of layers) dirty.current.add(layer.id);\n  }, [view, size, layers]);\n\n  // Painting only what is dirty is not the same as doing nothing: a hidden tab\n  // still commits React updates, and the effect above marks every layer dirty\n  // on any view or size change. The gate is what actually stops the work.\n  const frameLoop = useVisibleRaf(\n    () => {\n      if (dirty.current.size === 0) return;\n      const map = canvasRefs.current;\n      if (!map) {\n        dirty.current.clear();\n        return;\n      }\n      for (const layer of layers) {\n        if (!dirty.current.has(layer.id)) continue;\n        if (!layer.visible) continue;\n        const canvas = map.get(layer.id);\n        if (!canvas) continue;\n        const ctx = canvas.getContext('2d');\n        if (!ctx) continue;\n        ctx.save();\n        ctx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);\n        ctx.clearRect(0, 0, size.width, size.height);\n        layer.render(ctx, view);\n        ctx.restore();\n      }\n      dirty.current.clear();\n    },\n    { target: host },\n  );\n\n  useEffect(() => {\n    if (dirty.current.size > 0) frameLoop.request();\n  });\n}\n","import { type PointerEvent, useCallback, useRef, type WheelEvent } from 'react';\nimport type { ViewTransform } from '../instrument/types';\n\nexport interface UsePanZoomOptions {\n  view: ViewTransform;\n  onViewChange: (v: ViewTransform) => void;\n  /** The opening `view.zoom` always stays reachable, widening these past\n   *  whatever is passed here if it would otherwise exclude it. */\n  minZoom?: number;\n  maxZoom?: number;\n}\n\nexport interface PanZoomHandlers {\n  onWheel: (e: WheelEvent<HTMLElement>) => void;\n  onPointerDown: (e: PointerEvent<HTMLElement>) => void;\n  onPointerMove: (e: PointerEvent<HTMLElement>) => void;\n  onPointerUp: (e: PointerEvent<HTMLElement>) => void;\n  isDragging: () => boolean;\n}\n\ninterface DragState {\n  pointerId: number;\n  startScreenX: number;\n  startScreenY: number;\n  startPan: { x: number; y: number };\n  moved: boolean;\n}\n\nconst DRAG_THRESHOLD = 3;\n\nfunction isPositiveFinite(n: number): boolean {\n  return Number.isFinite(n) && n > 0;\n}\n\nexport function usePanZoom({\n  view,\n  onViewChange,\n  minZoom = 0.1,\n  maxZoom = 32,\n}: UsePanZoomOptions): PanZoomHandlers {\n  const dragRef = useRef<DragState | null>(null);\n  const viewRef = useRef(view);\n  viewRef.current = view;\n  // Captured once, from the view the canvas opened at — not the current view,\n  // which would let a prior zoom-out shrink the range and trap the opening\n  // view unreachable behind it.\n  const initialZoomRef = useRef(isPositiveFinite(view.zoom) ? view.zoom : null);\n\n  const onWheel = useCallback(\n    (e: WheelEvent<HTMLElement>) => {\n      e.preventDefault();\n      const rect = e.currentTarget.getBoundingClientRect();\n      const cursorX = e.clientX - rect.left;\n      const cursorY = e.clientY - rect.top;\n      const v = viewRef.current;\n      const initialZoom = initialZoomRef.current;\n      const effectiveMin = initialZoom == null ? minZoom : Math.min(minZoom, initialZoom);\n      const effectiveMax = initialZoom == null ? maxZoom : Math.max(maxZoom, initialZoom);\n      const factor = Math.exp(-e.deltaY * 0.001);\n      const rawZoom = isPositiveFinite(v.zoom) ? v.zoom : 1;\n      const nextZoom = Math.min(effectiveMax, Math.max(effectiveMin, rawZoom * factor));\n      const ratio = nextZoom / rawZoom;\n      const nextPan = {\n        x: cursorX - (cursorX - v.pan.x) * ratio,\n        y: cursorY - (cursorY - v.pan.y) * ratio,\n      };\n      onViewChange({ zoom: nextZoom, pan: nextPan });\n    },\n    [onViewChange, minZoom, maxZoom],\n  );\n\n  const onPointerDown = useCallback((e: PointerEvent<HTMLElement>) => {\n    if (e.button !== 0) return;\n    e.currentTarget.setPointerCapture(e.pointerId);\n    dragRef.current = {\n      pointerId: e.pointerId,\n      startScreenX: e.clientX,\n      startScreenY: e.clientY,\n      startPan: { ...viewRef.current.pan },\n      moved: false,\n    };\n  }, []);\n\n  const onPointerMove = useCallback(\n    (e: PointerEvent<HTMLElement>) => {\n      const drag = dragRef.current;\n      if (!drag || drag.pointerId !== e.pointerId) return;\n      const dx = e.clientX - drag.startScreenX;\n      const dy = e.clientY - drag.startScreenY;\n      if (!drag.moved && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;\n      drag.moved = true;\n      onViewChange({\n        zoom: viewRef.current.zoom,\n        pan: { x: drag.startPan.x + dx, y: drag.startPan.y + dy },\n      });\n    },\n    [onViewChange],\n  );\n\n  const onPointerUp = useCallback((e: PointerEvent<HTMLElement>) => {\n    const drag = dragRef.current;\n    if (!drag || drag.pointerId !== e.pointerId) return;\n    if (e.currentTarget.hasPointerCapture(e.pointerId)) {\n      e.currentTarget.releasePointerCapture(e.pointerId);\n    }\n    dragRef.current = null;\n  }, []);\n\n  const isDragging = useCallback(() => dragRef.current?.moved === true, []);\n\n  return { onWheel, onPointerDown, onPointerMove, onPointerUp, isDragging };\n}\n","import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';\nimport type { Point, ViewTransform } from '../instrument/types';\nimport { CanvasStackContext } from './CanvasStackContext';\nimport { screenToWorld } from './canvasCoords';\nimport { type CanvasLayerDescriptor, useLayerScheduler } from './useLayerScheduler';\nimport { usePanZoom } from './usePanZoom';\n\n/** Props for `<CanvasStack>`. */\nexport interface CanvasStackProps {\n  layers: CanvasLayerDescriptor[];\n  view: ViewTransform;\n  onViewChange: (v: ViewTransform) => void;\n  minZoom?: number;\n  maxZoom?: number;\n  width?: number | string;\n  height?: number | string;\n  className?: string;\n  onHitTest?: (worldPos: Point) => void;\n  children?: ReactNode;\n}\n\n/** Stacks one `<canvas>` per layer and drives them from a shared view, so a\n *  layer that changes rarely is not redrawn with one that changes every frame.\n *  Handles sizing, device pixel ratio, and pan/zoom. */\nexport function CanvasStack({\n  layers,\n  view,\n  onViewChange,\n  minZoom,\n  maxZoom,\n  width = '100%',\n  height = '100%',\n  className,\n  onHitTest,\n  children,\n}: CanvasStackProps) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const canvasMap = useRef<Map<string, HTMLCanvasElement>>(new Map());\n  const [size, setSize] = useState({ width: 0, height: 0, dpr: 1 });\n\n  const setCanvasRef = (id: string, el: HTMLCanvasElement | null): void => {\n    if (el) canvasMap.current.set(id, el);\n    else canvasMap.current.delete(id);\n  };\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    const update = () => {\n      const rect = el.getBoundingClientRect();\n      const dpr = window.devicePixelRatio ?? 1;\n      setSize((prev) => {\n        if (prev.width === rect.width && prev.height === rect.height && prev.dpr === dpr) {\n          return prev;\n        }\n        return { width: rect.width, height: rect.height, dpr };\n      });\n    };\n    update();\n    if (typeof ResizeObserver === 'undefined') return;\n    const ro = new ResizeObserver(update);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const handlers = usePanZoom({ view, onViewChange, minZoom, maxZoom });\n  useLayerScheduler({ layers, view, canvasRefs: canvasMap, size, host: containerRef });\n\n  const ctxValue = useMemo(() => ({ view }), [view]);\n\n  const containerStyle: CSSProperties = { width, height };\n  const canvasPx = {\n    width: Math.max(0, Math.round(size.width * size.dpr)),\n    height: Math.max(0, Math.round(size.height * size.dpr)),\n  };\n  const canvasCss: CSSProperties = {\n    width: size.width,\n    height: size.height,\n  };\n\n  const handlePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {\n    const wasDragging = handlers.isDragging();\n    handlers.onPointerUp(e);\n    if (!wasDragging && onHitTest && containerRef.current) {\n      const rect = containerRef.current.getBoundingClientRect();\n      const screen = { x: e.clientX - rect.left, y: e.clientY - rect.top };\n      onHitTest(screenToWorld(screen, view));\n    }\n  };\n\n  return (\n    <CanvasStackContext.Provider value={ctxValue}>\n      <div\n        ref={containerRef}\n        className={className ? `lk-canvas-stack ${className}` : 'lk-canvas-stack'}\n        style={containerStyle}\n        onWheel={handlers.onWheel}\n        onPointerDown={handlers.onPointerDown}\n        onPointerMove={handlers.onPointerMove}\n        onPointerUp={handlePointerUp}\n      >\n        {layers.map((layer) => (\n          <canvas\n            key={layer.id}\n            ref={(el) => setCanvasRef(layer.id, el)}\n            className=\"lk-canvas-stack__canvas\"\n            width={canvasPx.width}\n            height={canvasPx.height}\n            style={{ ...canvasCss, display: layer.visible ? 'block' : 'none' }}\n          />\n        ))}\n        <div className=\"lk-canvas-stack__overlay\">{children}</div>\n      </div>\n    </CanvasStackContext.Provider>\n  );\n}\n"]}

package/dist/{chunk-NRKWVTVT.js → chunk-O2BULFHX.js}

@@ -1,4 +1,5 @@
-import { c, p } from './chunk-C6GJKPUI.js';
+import { c2, p } from './chunk-TLGRYALP.js';
+import { DragHandleGlyph } from './chunk-PQJ5B2U2.js';
 import { useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -29,7 +30,7 @@ function LayerStack({
     });
   }, [items]);
   const dragItems = items.map((it) => ({ id: String(it.id), label: it.kind }));
-  const drag = c({
+  const drag = c2({
     items: dragItems,
     selectedIds: [],
     onReorder: (ids, targetIndex) => {
@@ -145,17 +146,7 @@ function LayerStack({
     )
   ] });
 }
-function DragHandleGlyph() {
-  return /* @__PURE__ */ jsxs("svg", { width: "12", height: "16", viewBox: "0 0 8 16", fill: "currentColor", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "2", cy: "3", r: "1.1" }),
-    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "3", r: "1.1" }),
-    /* @__PURE__ */ jsx("circle", { cx: "2", cy: "8", r: "1.1" }),
-    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "8", r: "1.1" }),
-    /* @__PURE__ */ jsx("circle", { cx: "2", cy: "13", r: "1.1" }),
-    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "13", r: "1.1" })
-  ] });
-}
 
 export { LayerStack };
-//# sourceMappingURL=chunk-NRKWVTVT.js.map
-//# sourceMappingURL=chunk-NRKWVTVT.js.map
+//# sourceMappingURL=chunk-O2BULFHX.js.map
+//# sourceMappingURL=chunk-O2BULFHX.js.map

package/dist/chunk-O2BULFHX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/layers/LayerStack.tsx"],"names":["c"],"mappings":"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","file":"chunk-O2BULFHX.js","sourcesContent":["import { type CSSProperties, type ReactNode, type RefCallback, useEffect, useState } from 'react';\nimport { dlog, useReorderDragList } from '../../passthrough/weasel-ui';\nimport { DragHandleGlyph } from '../../primitives/DragHandleGlyph';\n\n/** One card in a layer stack: its identity, the label shown when collapsed,\n *  and the optional select hoisted into its header. */\nexport interface LayerStackItem {\n  /** Stable id used for keys, onRemove, onReorder. Numeric to match\n   *  common id-from-nextId conventions; string ids also work. */\n  id: number | string;\n  /** Short kind label rendered in the header when no primary select\n   *  is hoisted (e.g. \"shadow\", \"stroke\"). */\n  kind: string;\n  /** When present, hoist this select into the card header so the user\n   *  can switch mode/shape without expanding. */\n  primaryValue?: string;\n  primaryOptions?: string[];\n  /** Accent CSS color used as the left border / index-badge fill. */\n  accent?: string;\n  /** Optional badge text rendered before the primary control\n   *  (e.g. tail index \"1\", \"2\", \"3\"). When omitted a drag handle\n   *  glyph renders in its place. */\n  badge?: string;\n  /** Initial expanded state. Defaults to true for newly-added items. */\n  defaultExpanded?: boolean;\n}\n\n/** Props for `<LayerStack>`. */\nexport interface LayerStackProps {\n  title: string;\n  items: LayerStackItem[];\n  /** Kinds the user can add via the header palette. */\n  paletteKinds: string[];\n  onAdd: (kind: string) => void;\n  onRemove: (id: number | string) => void;\n  onReorder: (orderedIds: Array<number | string>) => void;\n  onPrimaryChange: (id: number | string, nextValue: string) => void;\n  /** Render the body controls for each item. */\n  renderBody: (item: LayerStackItem) => ReactNode;\n  /** Hide the title + palette row (used when an outer wrap renders its\n   *  own head — see speech-balloons Tails panel). */\n  hideHead?: boolean;\n}\n\n/** A drag-reorderable stack of expandable cards, with a palette in the header\n *  for adding more. The body of each card is the caller's to render. */\nexport function LayerStack({\n  title,\n  items,\n  paletteKinds,\n  onAdd,\n  onRemove,\n  onReorder,\n  onPrimaryChange,\n  renderBody,\n  hideHead,\n}: LayerStackProps) {\n  const [expandedIds, setExpandedIds] = useState<Set<number | string>>(\n    () => new Set(items.filter((i) => i.defaultExpanded !== false).map((i) => i.id)),\n  );\n\n  useEffect(() => {\n    setExpandedIds((prev) => {\n      let next: Set<number | string> | null = null;\n      for (const item of items) {\n        if (item.defaultExpanded === false) continue;\n        if (prev.has(item.id)) continue;\n        if (next === null) next = new Set(prev);\n        next.add(item.id);\n      }\n      return next ?? prev;\n    });\n  }, [items]);\n\n  const dragItems = items.map((it) => ({ id: String(it.id), label: it.kind }));\n  const drag = useReorderDragList({\n    items: dragItems,\n    selectedIds: [],\n    onReorder: (ids, targetIndex) => {\n      dlog('layer-stack', 'onReorder', { ids, targetIndex });\n      const orig = items.map((i) => i.id);\n      const moving = new Set(ids);\n      const remaining = orig.filter((id) => !moving.has(String(id)));\n      const movedIds = items.map((i) => i.id).filter((id) => moving.has(String(id)));\n      // weasel reports targetIndex against the original list (which includes\n      // the dragged row). Each moved item that originally sat before\n      // targetIndex needs to shift the insertion point left by one.\n      const shift = orig.filter((id, idx) => moving.has(String(id)) && idx < targetIndex).length;\n      const adjusted = targetIndex - shift;\n      const out = [...remaining];\n      out.splice(adjusted, 0, ...movedIds);\n      onReorder(out);\n    },\n  });\n\n  const toggleExpanded = (id: number | string) => {\n    setExpandedIds((s) => {\n      const n = new Set(s);\n      if (n.has(id)) n.delete(id);\n      else n.add(id);\n      return n;\n    });\n  };\n\n  return (\n    <div className=\"lk-layer-stack\">\n      {!hideHead && (\n        <div className=\"lk-layer-stack__head\">\n          <h2 className=\"lk-layer-stack__title\">{title}</h2>\n          <div className=\"lk-layer-stack__palette\">\n            {paletteKinds.map((k) => (\n              <button\n                key={k}\n                type=\"button\"\n                className=\"lk-layer-stack__add\"\n                onClick={() => {\n                  dlog('layer-stack', 'onAdd', { kind: k });\n                  onAdd(k);\n                }}\n                aria-label={`Add ${k}`}\n              >\n                {k}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n      <div\n        className=\"lk-layer-stack__list\"\n        ref={drag.containerProps.ref as RefCallback<HTMLDivElement>}\n        onPointerMove={drag.containerProps.onPointerMove}\n        onPointerUp={drag.containerProps.onPointerUp}\n        onPointerCancel={drag.containerProps.onPointerCancel}\n      >\n        {items.map((item, i) => {\n          const expanded = expandedIds.has(item.id);\n          const draggedId = drag.state.draggedIds?.[0];\n          const isDragging = draggedId === String(item.id);\n          const showHintBefore = drag.state.targetIndex === i && draggedId !== String(item.id);\n          const showHintAfter = drag.state.targetIndex === items.length && i === items.length - 1;\n          const cardCls = [\n            'lk-layer-card',\n            expanded ? 'is-expanded' : 'is-collapsed',\n            isDragging ? 'is-dragging' : '',\n            item.accent ? 'has-accent' : '',\n          ]\n            .filter(Boolean)\n            .join(' ');\n          const cardStyle = item.accent\n            ? ({ '--lk-layer-card-accent': item.accent } as CSSProperties)\n            : undefined;\n          const { onPointerDown } = drag.rowProps(String(item.id), i);\n          return (\n            <div key={item.id} className=\"lk-layer-card-wrap\">\n              {showHintBefore && <div className=\"lk-layer-stack__drop-hint\" />}\n              <div className={cardCls} data-testid={`lk-layer-card-${item.id}`} style={cardStyle}>\n                <div className=\"lk-layer-card__head\">\n                  <button\n                    type=\"button\"\n                    className=\"lk-layer-card__handle\"\n                    aria-label={`Drag to reorder layer ${item.id}`}\n                    onPointerDown={onPointerDown}\n                    onClick={() => toggleExpanded(item.id)}\n                  >\n                    {item.badge ?? <DragHandleGlyph />}\n                  </button>\n                  {item.primaryValue !== undefined && item.primaryOptions ? (\n                    <select\n                      className=\"lk-layer-card__primary\"\n                      value={item.primaryValue}\n                      aria-label={`Primary select for layer ${item.id}`}\n                      onChange={(e) => onPrimaryChange(item.id, e.target.value)}\n                      onClick={(e) => e.stopPropagation()}\n                    >\n                      {item.primaryOptions.map((o) => (\n                        <option key={o} value={o}>\n                          {o}\n                        </option>\n                      ))}\n                    </select>\n                  ) : (\n                    <span className=\"lk-layer-card__kind\">{item.kind}</span>\n                  )}\n                  <button\n                    type=\"button\"\n                    className=\"lk-layer-card__remove\"\n                    aria-label=\"Remove layer\"\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onRemove(item.id);\n                    }}\n                  >\n                    ✕\n                  </button>\n                </div>\n                {expanded && <div className=\"lk-layer-card__body\">{renderBody(item)}</div>}\n              </div>\n              {showHintAfter && <div className=\"lk-layer-stack__drop-hint\" />}\n            </div>\n          );\n        })}\n        {items.length === 0 && (\n          <div className=\"lk-layer-stack__empty\">No layers — add one above.</div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}