@jamesyong42/infinite-canvas 1.0.0 → 1.2.0

package/dist/index.cjs

@@ -1,821 +1,927 @@
-'use strict';
-
-var chunkVSHXWTJH_cjs = require('./chunk-VSHXWTJH.cjs');
-var React = require('react');
-var three = require('three');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-function WidgetProvider({ engine, children }) {
-  const resolver = React.useCallback(
-    (_entityId, widgetType) => {
-      const def = engine.getWidget(widgetType);
-      if (!def) return null;
-      if (chunkVSHXWTJH_cjs.isR3FWidget(def)) {
-        return { surface: "webgl", component: def.component };
-      }
-      return { surface: "dom", component: def.component };
-    },
-    [engine]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkVSHXWTJH_cjs.WidgetResolverProvider, { value: resolver, children });
-}
-var InfiniteCanvas = React__default.default.forwardRef(
-  function InfiniteCanvas2({
-    engine,
-    grid,
-    selection,
-    onSelectionChange,
-    onCameraChange,
-    onNavigationChange,
-    className,
-    style,
-    children
-  }, ref) {
-    const containerRef = React.useRef(null);
-    const onSelectionChangeRef = React.useRef(onSelectionChange);
-    const onCameraChangeRef = React.useRef(onCameraChange);
-    const onNavigationChangeRef = React.useRef(onNavigationChange);
-    React.useEffect(() => {
-      onSelectionChangeRef.current = onSelectionChange;
-    }, [onSelectionChange]);
-    React.useEffect(() => {
-      onCameraChangeRef.current = onCameraChange;
-    }, [onCameraChange]);
-    React.useEffect(() => {
-      onNavigationChangeRef.current = onNavigationChange;
-    }, [onNavigationChange]);
-    React.useImperativeHandle(
-      ref,
-      () => ({
-        panTo: (x, y) => {
-          engine.panTo(x, y);
-          engine.markDirty();
-        },
-        zoomTo: (zoom) => {
-          engine.zoomTo(zoom);
-          engine.markDirty();
-        },
-        zoomToFit: (padding) => {
-          engine.zoomToFit(void 0, padding);
-          engine.markDirty();
-        },
-        undo: () => {
-          engine.undo();
-          engine.markDirty();
-        },
-        redo: () => {
-          engine.redo();
-          engine.markDirty();
-        },
-        getEngine: () => engine
-      }),
-      [engine]
-    );
-    const webglCanvasRef = React.useRef(null);
-    const gridRendererRef = React.useRef(null);
-    const selectionRendererRef = React.useRef(null);
-    const cameraLayerRef = React.useRef(null);
-    const slotRefs = React.useRef(/* @__PURE__ */ new Map());
-    const [visibleEntities, setVisibleEntities] = React.useState([]);
-    const registerSlotRef = React.useCallback((entityId, el) => {
-      if (el) {
-        slotRefs.current.set(entityId, el);
-      } else {
-        slotRefs.current.delete(entityId);
-      }
-    }, []);
-    React.useLayoutEffect(() => {
-      const container = containerRef.current;
-      const canvas = webglCanvasRef.current;
-      if (!container || !canvas) return;
-      const gridEnabled = grid !== false;
-      let gridInst = null;
-      if (gridEnabled) {
-        gridInst = new chunkVSHXWTJH_cjs.GridRenderer(canvas);
-        gridRendererRef.current = gridInst;
-      }
-      const selInst = new chunkVSHXWTJH_cjs.SelectionRenderer();
-      selectionRendererRef.current = selInst;
-      const updateSize = () => {
-        const rect = container.getBoundingClientRect();
-        const dpr = window.devicePixelRatio;
-        engine.setViewport(rect.width, rect.height, dpr);
-        canvas.style.width = `${rect.width}px`;
-        canvas.style.height = `${rect.height}px`;
-        if (gridInst) {
-          gridInst.setSize(rect.width, rect.height, dpr);
-        }
-        selInst.setSize(new three.Vector2(rect.width * dpr, rect.height * dpr), dpr);
-      };
-      updateSize();
-      const observer = new ResizeObserver(updateSize);
-      observer.observe(container);
-      return () => {
-        observer.disconnect();
-        if (gridInst) {
-          gridInst.dispose();
-          gridRendererRef.current = null;
-        }
-        selInst.dispose();
-        selectionRendererRef.current = null;
-      };
-    }, [engine, grid]);
-    React.useEffect(() => {
-      const gridR = gridRendererRef.current;
-      if (gridR && grid !== false) {
-        const isDark = document.documentElement.classList.contains("dark");
-        gridR.setConfig({
-          dotColor: isDark ? [1, 1, 1] : [0, 0, 0],
-          dotAlpha: isDark ? 0.12 : 0.18,
-          ...grid
-        });
-      }
-      const selR = selectionRendererRef.current;
-      if (selR && selection) {
-        selR.setConfig(selection);
-      }
-      engine.markDirty();
-    }, [engine, grid, selection]);
-    React.useEffect(() => {
-      const container = containerRef.current;
-      if (!container) return;
-      const onWheel = (e) => {
-        e.preventDefault();
-        if (e.ctrlKey || e.metaKey) {
-          const rect = container.getBoundingClientRect();
-          engine.zoomAtPoint(e.clientX - rect.left, e.clientY - rect.top, -e.deltaY * 0.01);
-        } else {
-          engine.panBy(-e.deltaX, -e.deltaY);
-        }
-      };
-      container.addEventListener("wheel", onWheel, { passive: false });
-      return () => container.removeEventListener("wheel", onWheel);
-    }, [engine]);
-    React.useEffect(() => {
-      const container = containerRef.current;
-      if (!container) return;
-      let gesture = { type: "idle" };
-      let lastTapTime = 0;
-      let lastTapX = 0;
-      let lastTapY = 0;
-      const DOUBLE_TAP_MS = 300;
-      const DOUBLE_TAP_DIST = 30;
-      function isOnWidget(target) {
-        let el = target;
-        while (el && el !== container) {
-          if (el.hasAttribute("data-widget-slot")) return true;
-          el = el.parentElement;
-        }
-        return false;
-      }
-      function isInteractive(target) {
-        const el = target;
-        if (!el) return false;
-        const tag = el.tagName;
-        return tag === "INPUT" || tag === "TEXTAREA" || tag === "BUTTON" || tag === "SELECT" || el.isContentEditable || el.closest("button") !== null;
-      }
-      function getRect() {
-        return container?.getBoundingClientRect() ?? new DOMRect();
-      }
-      function touchDist(t1, t2) {
-        const dx = t1.clientX - t2.clientX;
-        const dy = t1.clientY - t2.clientY;
-        return Math.sqrt(dx * dx + dy * dy);
-      }
-      function touchCenter(t1, t2, rect) {
-        return {
-          x: (t1.clientX + t2.clientX) / 2 - rect.left,
-          y: (t1.clientY + t2.clientY) / 2 - rect.top
-        };
-      }
-      function cancelEngineGesture() {
-        if (gesture.type === "pending-entity" || gesture.type === "entity-dragging") {
-          engine.handlePointerUp();
-        }
-      }
-      const noMods = { shift: false, ctrl: false, alt: false, meta: false };
-      function onTouchStart(e) {
-        const rect = getRect();
-        const touches = e.touches;
-        if (touches.length >= 2) {
-          e.preventDefault();
-          cancelEngineGesture();
-          const dist = touchDist(touches[0], touches[1]);
-          const center = touchCenter(touches[0], touches[1], rect);
-          gesture = { type: "pinching", lastDist: dist, lastCx: center.x, lastCy: center.y };
-          return;
-        }
-        const touch = touches[0];
-        const x = touch.clientX - rect.left;
-        const y = touch.clientY - rect.top;
-        if (isInteractive(e.target)) return;
-        e.preventDefault();
-        const now = Date.now();
-        if (now - lastTapTime < DOUBLE_TAP_MS && Math.abs(x - lastTapX) < DOUBLE_TAP_DIST && Math.abs(y - lastTapY) < DOUBLE_TAP_DIST) {
-          lastTapTime = 0;
-          const directive = engine.handlePointerDown(x, y, 0, noMods);
-          try {
-            if (directive.action === "passthrough-track-drag") {
-              const selected = engine.getSelectedEntities();
-              if (selected.length === 1) {
-                engine.enterContainer(selected[0]);
-              }
-            } else {
-              const camera = engine.getCamera();
-              const target = camera.zoom < 0.9 ? 1 : camera.zoom < 1.8 ? 2 : 1;
-              engine.zoomAtPoint(x, y, (target - camera.zoom) / camera.zoom);
-            }
-          } finally {
-            engine.handlePointerUp();
-            engine.markDirty();
-          }
-          gesture = { type: "idle" };
-          return;
-        }
-        if (isOnWidget(e.target)) {
-          engine.handlePointerDown(x, y, 0, noMods);
-          gesture = { type: "pending-entity", x, y, time: now };
-        } else {
-          gesture = { type: "pending-pan", x, y, time: now };
-        }
-      }
-      function onTouchMove(e) {
-        e.preventDefault();
-        const rect = getRect();
-        const touches = e.touches;
-        if (gesture.type === "pinching" && touches.length >= 2) {
-          const dist = touchDist(touches[0], touches[1]);
-          const center = touchCenter(touches[0], touches[1], rect);
-          const scale = dist / gesture.lastDist;
-          engine.zoomAtPoint(center.x, center.y, scale - 1);
-          engine.panBy(center.x - gesture.lastCx, center.y - gesture.lastCy);
-          gesture.lastDist = dist;
-          gesture.lastCx = center.x;
-          gesture.lastCy = center.y;
-          return;
-        }
-        if (touches.length >= 2) {
-          cancelEngineGesture();
-          const dist = touchDist(touches[0], touches[1]);
-          const center = touchCenter(touches[0], touches[1], rect);
-          gesture = { type: "pinching", lastDist: dist, lastCx: center.x, lastCy: center.y };
-          return;
-        }
-        if (touches.length < 1) return;
-        const touch = touches[0];
-        const x = touch.clientX - rect.left;
-        const y = touch.clientY - rect.top;
-        if (gesture.type === "pending-pan") {
-          if (Math.abs(x - gesture.x) > chunkVSHXWTJH_cjs.DEAD_ZONE_TOUCH_PX || Math.abs(y - gesture.y) > chunkVSHXWTJH_cjs.DEAD_ZONE_TOUCH_PX) {
-            gesture = { type: "panning", lastX: x, lastY: y };
-          }
-          return;
-        }
-        if (gesture.type === "panning") {
-          engine.panBy(x - gesture.lastX, y - gesture.lastY);
-          gesture.lastX = x;
-          gesture.lastY = y;
-          return;
-        }
-        if (gesture.type === "pending-entity" || gesture.type === "entity-dragging") {
-          engine.handlePointerMove(x, y, noMods);
-          if (gesture.type === "pending-entity") {
-            if (Math.abs(x - gesture.x) > chunkVSHXWTJH_cjs.DEAD_ZONE_TOUCH_PX || Math.abs(y - gesture.y) > chunkVSHXWTJH_cjs.DEAD_ZONE_TOUCH_PX) {
-              gesture = { type: "entity-dragging" };
-            }
-          }
-        }
-      }
-      function onTouchEnd(e) {
-        e.preventDefault();
-        const remaining = e.touches.length;
-        const rect = getRect();
-        if (gesture.type === "pinching") {
-          if (remaining === 1) {
-            const t = e.touches[0];
-            gesture = {
-              type: "panning",
-              lastX: t.clientX - rect.left,
-              lastY: t.clientY - rect.top
-            };
-          } else if (remaining === 0) {
-            gesture = { type: "idle" };
-          }
-          return;
-        }
-        if (remaining > 0) return;
-        if (gesture.type === "pending-pan") {
-          engine.handlePointerDown(gesture.x, gesture.y, 0, noMods);
-          engine.handlePointerUp();
-          engine.markDirty();
-          lastTapTime = Date.now();
-          lastTapX = gesture.x;
-          lastTapY = gesture.y;
-        }
-        if (gesture.type === "pending-entity") {
-          engine.handlePointerUp();
-          engine.markDirty();
-          lastTapTime = Date.now();
-          lastTapX = gesture.x;
-          lastTapY = gesture.y;
-        }
-        if (gesture.type === "entity-dragging") {
-          engine.handlePointerUp();
-          engine.markDirty();
-        }
-        gesture = { type: "idle" };
-      }
-      function onTouchCancel(_e) {
-        gesture = { type: "idle" };
-        engine.handlePointerCancel();
-      }
-      container.addEventListener("touchstart", onTouchStart, { passive: false });
-      container.addEventListener("touchmove", onTouchMove, { passive: false });
-      container.addEventListener("touchend", onTouchEnd, { passive: false });
-      container.addEventListener("touchcancel", onTouchCancel, { passive: true });
-      return () => {
-        container.removeEventListener("touchstart", onTouchStart);
-        container.removeEventListener("touchmove", onTouchMove);
-        container.removeEventListener("touchend", onTouchEnd);
-        container.removeEventListener("touchcancel", onTouchCancel);
-      };
-    }, [engine]);
-    const onCanvasPointerDown = React.useCallback(
-      (e) => {
-        const target = e.target;
-        if (target?.closest("button, input, textarea, select, [contenteditable]")) return;
-        const rect = containerRef.current?.getBoundingClientRect();
-        if (!rect) return;
-        const directive = engine.handlePointerDown(
-          e.clientX - rect.left,
-          e.clientY - rect.top,
-          e.button,
-          {
-            shift: e.shiftKey,
-            ctrl: e.ctrlKey,
-            alt: e.altKey,
-            meta: e.metaKey
-          }
-        );
-        if (directive.action === "capture-resize" || directive.action === "passthrough-track-drag") {
-          containerRef.current?.setPointerCapture(e.pointerId);
-        }
-        if (directive.action === "capture-resize") e.preventDefault();
-      },
-      [engine]
-    );
-    const onCanvasPointerMove = React.useCallback(
-      (e) => {
-        const target = e.target;
-        if (target.closest?.("[data-widget-slot]") && target !== containerRef.current) {
-          return;
-        }
-        const rect = containerRef.current?.getBoundingClientRect();
-        if (!rect) return;
-        engine.handlePointerMove(e.clientX - rect.left, e.clientY - rect.top, {
-          shift: e.shiftKey,
-          ctrl: e.ctrlKey,
-          alt: e.altKey,
-          meta: e.metaKey
-        });
-      },
-      [engine]
-    );
-    const onCanvasPointerUp = React.useCallback(
-      (e) => {
-        if (containerRef.current?.hasPointerCapture(e.pointerId)) {
-          containerRef.current.releasePointerCapture(e.pointerId);
-        }
-        engine.handlePointerUp();
-      },
-      [engine]
-    );
-    React.useEffect(() => {
-      let rafId;
-      let running = true;
-      function loop() {
-        if (!running) return;
-        const didTick = engine.flushIfDirty();
-        if (didTick) {
-          const camera2 = engine.getCamera();
-          const changes = engine.getFrameChanges();
-          if (cameraLayerRef.current) {
-            cameraLayerRef.current.style.transform = `scale(${camera2.zoom}) translate(${-camera2.x}px, ${-camera2.y}px)`;
-          }
-          const cursor = engine.world.getResource(chunkVSHXWTJH_cjs.CursorResource).cursor;
-          if (containerRef.current && containerRef.current.style.cursor !== cursor) {
-            containerRef.current.style.cursor = cursor;
-          }
-          if (gridRendererRef.current) {
-            gridRendererRef.current.render(camera2.x, camera2.y, camera2.zoom);
-          }
-          if (selectionRendererRef.current && gridRendererRef.current) {
-            const selected = engine.getSelectedEntities();
-            const selBounds = [];
-            for (const id of selected) {
-              const wb = engine.get(id, chunkVSHXWTJH_cjs.WorldBounds);
-              if (wb)
-                selBounds.push({
-                  x: wb.worldX,
-                  y: wb.worldY,
-                  width: wb.worldWidth,
-                  height: wb.worldHeight
-                });
-            }
-            const hovId = engine.getHoveredEntity();
-            let hovBounds = null;
-            if (hovId !== null) {
-              const wb = engine.get(hovId, chunkVSHXWTJH_cjs.WorldBounds);
-              if (wb)
-                hovBounds = {
-                  x: wb.worldX,
-                  y: wb.worldY,
-                  width: wb.worldWidth,
-                  height: wb.worldHeight
-                };
-            }
-            selectionRendererRef.current.render(
-              gridRendererRef.current.getWebGLRenderer(),
-              camera2.x,
-              camera2.y,
-              camera2.zoom,
-              selBounds,
-              hovBounds,
-              engine.getSnapGuides(),
-              engine.getEqualSpacing()
-            );
-          }
-          for (const entityId of changes.positionsChanged) {
-            const el = slotRefs.current.get(entityId);
-            if (!el) continue;
-            const wb = engine.get(entityId, chunkVSHXWTJH_cjs.WorldBounds);
-            if (!wb) continue;
-            el.style.transform = `translate(${wb.worldX}px, ${wb.worldY}px)`;
-            el.style.width = `${wb.worldWidth}px`;
-            el.style.height = `${wb.worldHeight}px`;
-          }
-          if (changes.entered.length > 0 || changes.exited.length > 0) {
-            const visible2 = engine.getVisibleEntities();
-            setVisibleEntities(visible2.map((v) => v.entityId));
-          }
-          if (changes.selectionChanged && onSelectionChangeRef.current) {
-            onSelectionChangeRef.current(engine.getSelectedEntities());
-          }
-          if (changes.cameraChanged && onCameraChangeRef.current) {
-            onCameraChangeRef.current({ x: camera2.x, y: camera2.y, zoom: camera2.zoom });
-          }
-          if (changes.navigationChanged && onNavigationChangeRef.current) {
-            const navStack = engine.world.getResource(chunkVSHXWTJH_cjs.NavigationStackResource);
-            const depth = navStack.frames.length - 1;
-            const containerId = navStack.frames[navStack.frames.length - 1].containerId;
-            onNavigationChangeRef.current(depth, containerId);
-          }
-        }
-        rafId = requestAnimationFrame(loop);
-      }
-      engine.tick();
-      const visible = engine.getVisibleEntities();
-      setVisibleEntities(visible.map((v) => v.entityId));
-      const camera = engine.getCamera();
-      if (cameraLayerRef.current) {
-        cameraLayerRef.current.style.transform = `scale(${camera.zoom}) translate(${-camera.x}px, ${-camera.y}px)`;
-      }
-      if (gridRendererRef.current) {
-        gridRendererRef.current.render(camera.x, camera.y, camera.zoom);
-      }
-      for (const v of visible) {
-        const el = slotRefs.current.get(v.entityId);
-        if (!el) continue;
-        el.style.transform = `translate(${v.worldX}px, ${v.worldY}px)`;
-        el.style.width = `${v.worldWidth}px`;
-        el.style.height = `${v.worldHeight}px`;
-      }
-      rafId = requestAnimationFrame(loop);
-      return () => {
-        running = false;
-        cancelAnimationFrame(rafId);
-      };
-    }, [engine]);
-    React.useLayoutEffect(() => {
-      for (const entityId of visibleEntities) {
-        const el = slotRefs.current.get(entityId);
-        if (!el) continue;
-        const wb = engine.get(entityId, chunkVSHXWTJH_cjs.WorldBounds);
-        if (!wb) continue;
-        el.style.transform = `translate(${wb.worldX}px, ${wb.worldY}px)`;
-        el.style.width = `${wb.worldWidth}px`;
-        el.style.height = `${wb.worldHeight}px`;
-      }
-    }, [visibleEntities, engine]);
-    const { domEntities, webglEntities } = React.useMemo(() => {
-      const dom = [];
-      const webgl = [];
-      for (const id of visibleEntities) {
-        const w = engine.get(id, chunkVSHXWTJH_cjs.Widget);
-        if (w?.surface === "webgl") {
-          webgl.push(id);
-        } else {
-          dom.push(id);
-        }
-      }
-      return { domEntities: dom, webglEntities: webgl };
-    }, [visibleEntities, engine]);
-    const canvasContent = /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: containerRef,
-        className: `relative overflow-hidden ${className ?? ""}`,
-        style: {
-          ...style,
-          touchAction: "none",
-          backgroundColor: "var(--canvas-bg, #fafafa)"
-        },
-        onPointerDown: onCanvasPointerDown,
-        onPointerMove: onCanvasPointerMove,
-        onPointerUp: onCanvasPointerUp,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: webglCanvasRef, className: "absolute inset-0 pointer-events-none" }),
-          webglEntities.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(WebGLWidgetBridge, { engine, entities: webglEntities }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              ref: cameraLayerRef,
-              className: "absolute left-0 top-0 origin-top-left will-change-transform",
-              children: [
-                domEntities.map((entityId) => /* @__PURE__ */ jsxRuntime.jsx(chunkVSHXWTJH_cjs.WidgetSlot, { entityId, slotRef: registerSlotRef }, entityId)),
-                webglEntities.map((entityId) => /* @__PURE__ */ jsxRuntime.jsx(chunkVSHXWTJH_cjs.SelectionOverlaySlot, { entityId, slotRef: registerSlotRef }, entityId))
-              ]
-            }
-          ),
-          children
-        ]
-      }
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(chunkVSHXWTJH_cjs.EngineProvider, { value: engine, children: /* @__PURE__ */ jsxRuntime.jsx(chunkVSHXWTJH_cjs.ContainerRefProvider, { value: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(WidgetProvider, { engine, children: canvasContent }) }) });
-  }
-);
-function WebGLWidgetBridge({ engine, entities }) {
-  const resolver = chunkVSHXWTJH_cjs.useWidgetResolver();
-  const resolve = React.useCallback(
-    (entityId) => {
-      if (!resolver) return null;
-      const w = engine.get(entityId, chunkVSHXWTJH_cjs.Widget);
-      return resolver(entityId, w?.type ?? "");
-    },
-    [resolver, engine]
-  );
-  if (!resolver) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkVSHXWTJH_cjs.WebGLWidgetLayer, { engine, entities, resolve });
-}
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_WebGLWidgetLayer = require("./WebGLWidgetLayer-BBMuwzHq.cjs");
+const require_hooks = require("./hooks-DHShH86C.cjs");
+let react = require("react");
+react = require_WebGLWidgetLayer.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _react_three_fiber = require("@react-three/fiber");
+let three = require("three");
+//#region src/react/widget-hooks.ts
+/**
+* Returns the custom data attached to a widget entity.
+* Use the generic parameter for type safety: `useWidgetData<MyData>(entityId)`. Re-renders when data changes.
+*/
 function useWidgetData(entityId) {
-  const comp = chunkVSHXWTJH_cjs.useComponent(entityId, chunkVSHXWTJH_cjs.WidgetData);
-  return comp?.data ?? {};
+	return require_hooks.useComponent(entityId, require_hooks.WidgetData)?.data ?? {};
 }
+/**
+* Returns the current responsive breakpoint for a widget based on its screen-space size.
+* Re-renders when the breakpoint changes.
+*/
 function useBreakpoint(entityId) {
-  const comp = chunkVSHXWTJH_cjs.useComponent(entityId, chunkVSHXWTJH_cjs.WidgetBreakpoint);
-  return comp?.current ?? "normal";
+	return require_hooks.useComponent(entityId, require_hooks.WidgetBreakpoint)?.current ?? "normal";
 }
+/**
+* Returns child entity IDs of a container entity.
+* Re-renders when children are added or removed.
+*/
 function useChildren(entityId) {
-  const comp = chunkVSHXWTJH_cjs.useComponent(entityId, chunkVSHXWTJH_cjs.Children);
-  return comp?.ids ?? [];
+	return require_hooks.useComponent(entityId, require_hooks.Children)?.ids ?? [];
 }
+/**
+* Returns whether the entity is currently selected.
+* Re-renders when the entity's selection state changes.
+*/
 function useIsSelected(entityId) {
-  return chunkVSHXWTJH_cjs.useTag(entityId, chunkVSHXWTJH_cjs.Selected);
+	return require_hooks.useTag(entityId, require_hooks.Selected);
 }
+/**
+* Returns a function to update the widget's custom data.
+* Merges the patch into existing data via shallow spread.
+*/
 function useUpdateWidget(entityId) {
-  const engine = chunkVSHXWTJH_cjs.useLayoutEngine();
-  return React.useCallback(
-    (patch) => {
-      const existing = engine.get(entityId, chunkVSHXWTJH_cjs.WidgetData);
-      if (existing) {
-        engine.set(entityId, chunkVSHXWTJH_cjs.WidgetData, {
-          data: { ...existing.data, ...patch }
-        });
-      }
-    },
-    [engine, entityId]
-  );
+	const engine = require_hooks.useLayoutEngine();
+	return (0, react.useCallback)((patch) => {
+		const existing = engine.get(entityId, require_hooks.WidgetData);
+		if (existing) engine.set(entityId, require_hooks.WidgetData, { data: {
+			...existing.data,
+			...patch
+		} });
+	}, [engine, entityId]);
 }
-
-Object.defineProperty(exports, "Active", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.Active; }
-});
-Object.defineProperty(exports, "BreakpointConfigResource", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.BreakpointConfigResource; }
-});
-Object.defineProperty(exports, "CameraResource", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.CameraResource; }
-});
-Object.defineProperty(exports, "Children", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.Children; }
-});
-Object.defineProperty(exports, "CommandBuffer", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.CommandBuffer; }
-});
-Object.defineProperty(exports, "Container", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.Container; }
-});
-Object.defineProperty(exports, "CursorHint", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.CursorHint; }
-});
-Object.defineProperty(exports, "CursorResource", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.CursorResource; }
-});
-Object.defineProperty(exports, "DEFAULT_GRID_CONFIG", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.DEFAULT_GRID_CONFIG; }
-});
-Object.defineProperty(exports, "DEFAULT_SELECTION_CONFIG", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.DEFAULT_SELECTION_CONFIG; }
-});
-Object.defineProperty(exports, "Draggable", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.Draggable; }
-});
-Object.defineProperty(exports, "HandleSet", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.HandleSet; }
-});
-Object.defineProperty(exports, "Hitbox", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.Hitbox; }
-});
-Object.defineProperty(exports, "InteractionRole", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.InteractionRole; }
-});
-Object.defineProperty(exports, "Locked", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.Locked; }
-});
-Object.defineProperty(exports, "MoveCommand", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.MoveCommand; }
-});
-Object.defineProperty(exports, "NavigationStackResource", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.NavigationStackResource; }
-});
-Object.defineProperty(exports, "Parent", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.Parent; }
-});
-Object.defineProperty(exports, "Resizable", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.Resizable; }
-});
-Object.defineProperty(exports, "ResizeCommand", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.ResizeCommand; }
-});
-Object.defineProperty(exports, "Selectable", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.Selectable; }
-});
-Object.defineProperty(exports, "Selected", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.Selected; }
-});
-Object.defineProperty(exports, "SetComponentCommand", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.SetComponentCommand; }
-});
-Object.defineProperty(exports, "Transform2D", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.Transform2D; }
-});
-Object.defineProperty(exports, "ViewportResource", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.ViewportResource; }
-});
-Object.defineProperty(exports, "Visible", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.Visible; }
-});
-Object.defineProperty(exports, "Widget", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.Widget; }
-});
-Object.defineProperty(exports, "WidgetBreakpoint", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.WidgetBreakpoint; }
-});
-Object.defineProperty(exports, "WidgetData", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.WidgetData; }
-});
-Object.defineProperty(exports, "WidgetResolverProvider", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.WidgetResolverProvider; }
-});
-Object.defineProperty(exports, "WorldBounds", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.WorldBounds; }
-});
-Object.defineProperty(exports, "ZIndex", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.ZIndex; }
-});
-Object.defineProperty(exports, "ZoomConfigResource", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.ZoomConfigResource; }
-});
-Object.defineProperty(exports, "clamp", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.clamp; }
-});
-Object.defineProperty(exports, "createArchetypeRegistry", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.createArchetypeRegistry; }
-});
-Object.defineProperty(exports, "createLayoutEngine", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.createLayoutEngine; }
-});
-Object.defineProperty(exports, "createWidgetRegistry", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.createWidgetRegistry; }
-});
-Object.defineProperty(exports, "intersectsAABB", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.intersectsAABB; }
-});
-Object.defineProperty(exports, "isR3FWidget", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.isR3FWidget; }
-});
-Object.defineProperty(exports, "pointInAABB", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.pointInAABB; }
-});
-Object.defineProperty(exports, "screenToWorld", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.screenToWorld; }
-});
-Object.defineProperty(exports, "useCamera", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.useCamera; }
-});
-Object.defineProperty(exports, "useComponent", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.useComponent; }
-});
-Object.defineProperty(exports, "useContainerRef", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.useContainerRef; }
-});
-Object.defineProperty(exports, "useLayoutEngine", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.useLayoutEngine; }
-});
-Object.defineProperty(exports, "useQuery", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.useQuery; }
-});
-Object.defineProperty(exports, "useResource", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.useResource; }
-});
-Object.defineProperty(exports, "useTag", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.useTag; }
-});
-Object.defineProperty(exports, "useTaggedEntities", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.useTaggedEntities; }
-});
-Object.defineProperty(exports, "useWidgetResolver", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.useWidgetResolver; }
-});
-Object.defineProperty(exports, "worldBoundsToAABB", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.worldBoundsToAABB; }
-});
-Object.defineProperty(exports, "worldToScreen", {
-  enumerable: true,
-  get: function () { return chunkVSHXWTJH_cjs.worldToScreen; }
-});
+//#endregion
+//#region src/react/card.tsx
+/**
+* Built-in preset sizes, matching `CardPresetsResource` defaults.
+* Used by `createCardWidget` to set `defaultSize` at widget-registration
+* time (before the engine is constructed).
+*/
+const DEFAULT_CARD_PRESET_SIZES$1 = {
+	small: {
+		width: 155,
+		height: 155
+	},
+	medium: {
+		width: 329,
+		height: 155
+	},
+	large: {
+		width: 329,
+		height: 345
+	},
+	xl: {
+		width: 329,
+		height: 535
+	}
+};
+/**
+* Visual chrome for an iOS-style card: rounded corners, hairline ring,
+* soft drop shadow, and a subtle lift (scale + stronger shadow) while
+* the entity carries the `Dragging` tag.
+*
+* Uses CSS transitions — no animation library dependency.
+*/
+function CardFrame({ entityId, children, className, style }) {
+	const dragging = require_hooks.useTag(entityId, require_hooks.Dragging);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: {
+			width: "100%",
+			height: "100%",
+			borderRadius: "21.67px",
+			overflow: "hidden",
+			boxShadow: dragging ? "0 30px 60px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06)" : "0 20px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05)",
+			transform: dragging ? "scale(1.05)" : "scale(1)",
+			transformOrigin: "center center",
+			transition: "transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2)",
+			willChange: dragging ? "transform, box-shadow" : void 0,
+			...style
+		},
+		children
+	});
+}
+/**
+* Returns a paired widget + archetype for an iOS-style card. Register both
+* with `createLayoutEngine({ widgets: [card.widget], archetypes: [card.archetype] })`
+* (or via `engine.registerWidget` / `engine.registerArchetype`) and spawn with
+* `engine.spawn('your-card-type', { at, data })`.
+*
+* The produced widget is non-resizable (Selectable + Draggable only), wrapped
+* in `<CardFrame>`, and spawns with a `Card` component so `cardSystem` enforces
+* the preset size each tick.
+*/
+function createCardWidget(opts) {
+	const defaultSize = DEFAULT_CARD_PRESET_SIZES$1[opts.size];
+	const Render = opts.render;
+	const Component = ({ entityId }) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardFrame, {
+			entityId,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Render, {
+				entityId,
+				data: useWidgetData(entityId)
+			})
+		});
+	};
+	return {
+		widget: {
+			type: opts.type,
+			schema: opts.schema,
+			defaultData: opts.defaultData,
+			defaultSize,
+			component: Component
+		},
+		archetype: {
+			id: opts.type,
+			widget: opts.type,
+			components: [[require_hooks.Card, { preset: opts.size }]],
+			interactive: {
+				selectable: true,
+				draggable: true,
+				resizable: false,
+				selectionFrame: false
+			},
+			defaultSize
+		}
+	};
+}
+//#endregion
+//#region src/react/geometry-card.tsx
+/** Must match {@link CardPresetsResource} defaults. */
+const DEFAULT_CARD_PRESET_SIZES = {
+	small: {
+		width: 155,
+		height: 155
+	},
+	medium: {
+		width: 329,
+		height: 155
+	},
+	large: {
+		width: 329,
+		height: 345
+	},
+	xl: {
+		width: 329,
+		height: 535
+	}
+};
+/**
+* Pure-three rounded-rect extrude geometry — avoids a drei dependency.
+* Rounded corners match the DOM CardFrame radius (21.67 px).
+*/
+function makeRoundedCardGeometry(width, height, radius, depth) {
+	const shape = new three.Shape();
+	const r = Math.min(radius, Math.min(width, height) / 2);
+	const x = -width / 2;
+	const y = -height / 2;
+	shape.moveTo(x, y + r);
+	shape.lineTo(x, y + height - r);
+	shape.quadraticCurveTo(x, y + height, x + r, y + height);
+	shape.lineTo(x + width - r, y + height);
+	shape.quadraticCurveTo(x + width, y + height, x + width, y + height - r);
+	shape.lineTo(x + width, y + r);
+	shape.quadraticCurveTo(x + width, y, x + width - r, y);
+	shape.lineTo(x + r, y);
+	shape.quadraticCurveTo(x, y, x, y + r);
+	return new three.ExtrudeGeometry(shape, {
+		depth,
+		bevelEnabled: true,
+		bevelSegments: 3,
+		bevelSize: .6,
+		bevelThickness: .6
+	});
+}
+function CardBack({ width, height, color, roughness, metalness }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mesh", {
+		geometry: (0, react.useMemo)(() => makeRoundedCardGeometry(width, height, 21.67, 3), [width, height]),
+		position: [
+			0,
+			0,
+			-6
+		],
+		receiveShadow: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("meshStandardMaterial", {
+			color,
+			roughness,
+			metalness
+		})
+	});
+}
+/**
+* Returns a paired R3F widget + archetype for a card-shaped 3D widget.
+* Behaves like {@link createCardWidget} — fixed preset size, non-resizable,
+* no engine-drawn selection frame, and lifts on drag (scale + z) — but
+* renders a three.js scene instead of DOM content.
+*
+* Lighting: this helper adds no lights. Declare your own in the `geometry`
+* component (typically a local `pointLight` scoped with `distance`).
+*/
+function createGeometryCardWidget(opts) {
+	const defaultSize = DEFAULT_CARD_PRESET_SIZES[opts.size];
+	const Render = opts.geometry;
+	const backgroundConfig = opts.background ?? "card";
+	const resolvedBack = backgroundConfig === "transparent" ? null : backgroundConfig === "card" ? {
+		color: "#1C1C1E",
+		roughness: .55,
+		metalness: 0
+	} : {
+		color: backgroundConfig.color,
+		roughness: backgroundConfig.roughness ?? .55,
+		metalness: backgroundConfig.metalness ?? 0
+	};
+	const Component = ({ entityId, width, height }) => {
+		const data = useWidgetData(entityId);
+		const dragging = require_hooks.useTag(entityId, require_hooks.Dragging);
+		const groupRef = (0, react.useRef)(null);
+		(0, _react_three_fiber.useFrame)(() => {
+			const g = groupRef.current;
+			if (!g) return;
+			const targetScale = dragging ? 1.05 : 1;
+			const targetZ = dragging ? 8 : 0;
+			const s = g.scale.x;
+			g.scale.setScalar(s + (targetScale - s) * .2);
+			g.position.z += (targetZ - g.position.z) * .2;
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("group", {
+			ref: groupRef,
+			children: [resolvedBack && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardBack, {
+				width,
+				height,
+				color: resolvedBack.color,
+				roughness: resolvedBack.roughness,
+				metalness: resolvedBack.metalness
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Render, {
+				entityId,
+				data,
+				width,
+				height
+			})]
+		});
+	};
+	return {
+		widget: {
+			type: opts.type,
+			surface: "webgl",
+			schema: opts.schema,
+			defaultData: opts.defaultData,
+			defaultSize,
+			component: Component
+		},
+		archetype: {
+			id: opts.type,
+			widget: opts.type,
+			components: [[require_hooks.Card, { preset: opts.size }]],
+			interactive: {
+				selectable: true,
+				draggable: true,
+				resizable: false,
+				selectionFrame: false
+			},
+			defaultSize
+		}
+	};
+}
+//#endregion
+//#region src/react/WidgetProvider.tsx
+/**
+* Bridges the engine's widget registry to React context so WidgetSlot /
+* WebGLWidgetLayer can resolve components by type.
+*/
+function WidgetProvider({ engine, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks.WidgetResolverProvider, {
+		value: (0, react.useCallback)((_entityId, widgetType) => {
+			const def = engine.getWidget(widgetType);
+			if (!def) return null;
+			if (require_WebGLWidgetLayer.isR3FWidget(def)) return {
+				surface: "webgl",
+				component: def.component
+			};
+			return {
+				surface: "dom",
+				component: def.component
+			};
+		}, [engine]),
+		children
+	});
+}
+//#endregion
+//#region src/react/InfiniteCanvas.tsx
+const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine, grid, selection, onSelectionChange, onCameraChange, onNavigationChange, className, style, children }, ref) {
+	const containerRef = (0, react.useRef)(null);
+	const onSelectionChangeRef = (0, react.useRef)(onSelectionChange);
+	const onCameraChangeRef = (0, react.useRef)(onCameraChange);
+	const onNavigationChangeRef = (0, react.useRef)(onNavigationChange);
+	(0, react.useEffect)(() => {
+		onSelectionChangeRef.current = onSelectionChange;
+	}, [onSelectionChange]);
+	(0, react.useEffect)(() => {
+		onCameraChangeRef.current = onCameraChange;
+	}, [onCameraChange]);
+	(0, react.useEffect)(() => {
+		onNavigationChangeRef.current = onNavigationChange;
+	}, [onNavigationChange]);
+	(0, react.useImperativeHandle)(ref, () => ({
+		panTo: (x, y) => {
+			engine.panTo(x, y);
+			engine.markDirty();
+		},
+		zoomTo: (zoom) => {
+			engine.zoomTo(zoom);
+			engine.markDirty();
+		},
+		zoomToFit: (padding) => {
+			engine.zoomToFit(void 0, padding);
+			engine.markDirty();
+		},
+		undo: () => {
+			engine.undo();
+			engine.markDirty();
+		},
+		redo: () => {
+			engine.redo();
+			engine.markDirty();
+		},
+		getEngine: () => engine
+	}), [engine]);
+	const webglCanvasRef = (0, react.useRef)(null);
+	const gridRendererRef = (0, react.useRef)(null);
+	const selectionRendererRef = (0, react.useRef)(null);
+	const cameraLayerRef = (0, react.useRef)(null);
+	const slotRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const [visibleEntities, setVisibleEntities] = (0, react.useState)([]);
+	const registerSlotRef = (0, react.useCallback)((entityId, el) => {
+		if (el) slotRefs.current.set(entityId, el);
+		else slotRefs.current.delete(entityId);
+	}, []);
+	(0, react.useLayoutEffect)(() => {
+		const container = containerRef.current;
+		const canvas = webglCanvasRef.current;
+		if (!container || !canvas) return;
+		const gridEnabled = grid !== false;
+		let gridInst = null;
+		if (gridEnabled) {
+			gridInst = new require_WebGLWidgetLayer.GridRenderer(canvas);
+			gridRendererRef.current = gridInst;
+		}
+		const selInst = new require_WebGLWidgetLayer.SelectionRenderer();
+		selectionRendererRef.current = selInst;
+		const updateSize = () => {
+			const rect = container.getBoundingClientRect();
+			const dpr = window.devicePixelRatio;
+			engine.setViewport(rect.width, rect.height, dpr);
+			canvas.style.width = `${rect.width}px`;
+			canvas.style.height = `${rect.height}px`;
+			if (gridInst) gridInst.setSize(rect.width, rect.height, dpr);
+			selInst.setSize(new three.Vector2(rect.width * dpr, rect.height * dpr), dpr);
+		};
+		updateSize();
+		const observer = new ResizeObserver(updateSize);
+		observer.observe(container);
+		return () => {
+			observer.disconnect();
+			if (gridInst) {
+				gridInst.dispose();
+				gridRendererRef.current = null;
+			}
+			selInst.dispose();
+			selectionRendererRef.current = null;
+		};
+	}, [engine, grid]);
+	(0, react.useEffect)(() => {
+		const gridR = gridRendererRef.current;
+		if (gridR && grid !== false) {
+			const isDark = document.documentElement.classList.contains("dark");
+			gridR.setConfig({
+				dotColor: isDark ? [
+					1,
+					1,
+					1
+				] : [
+					0,
+					0,
+					0
+				],
+				dotAlpha: isDark ? .12 : .18,
+				...grid
+			});
+		}
+		const selR = selectionRendererRef.current;
+		if (selR && selection) selR.setConfig(selection);
+		engine.markDirty();
+	}, [
+		engine,
+		grid,
+		selection
+	]);
+	(0, react.useEffect)(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const onWheel = (e) => {
+			e.preventDefault();
+			if (e.ctrlKey || e.metaKey) {
+				const rect = container.getBoundingClientRect();
+				engine.zoomAtPoint(e.clientX - rect.left, e.clientY - rect.top, -e.deltaY * .01);
+			} else engine.panBy(-e.deltaX, -e.deltaY);
+		};
+		container.addEventListener("wheel", onWheel, { passive: false });
+		return () => container.removeEventListener("wheel", onWheel);
+	}, [engine]);
+	(0, react.useEffect)(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		let gesture = { type: "idle" };
+		let lastTapTime = 0;
+		let lastTapX = 0;
+		let lastTapY = 0;
+		const DOUBLE_TAP_MS = 300;
+		const DOUBLE_TAP_DIST = 30;
+		function isOnWidget(target) {
+			let el = target;
+			while (el && el !== container) {
+				if (el.hasAttribute("data-widget-slot")) return true;
+				el = el.parentElement;
+			}
+			return false;
+		}
+		function isInteractive(target) {
+			const el = target;
+			if (!el) return false;
+			const tag = el.tagName;
+			return tag === "INPUT" || tag === "TEXTAREA" || tag === "BUTTON" || tag === "SELECT" || el.isContentEditable || el.closest("button") !== null;
+		}
+		function getRect() {
+			return container?.getBoundingClientRect() ?? new DOMRect();
+		}
+		function touchDist(t1, t2) {
+			const dx = t1.clientX - t2.clientX;
+			const dy = t1.clientY - t2.clientY;
+			return Math.sqrt(dx * dx + dy * dy);
+		}
+		function touchCenter(t1, t2, rect) {
+			return {
+				x: (t1.clientX + t2.clientX) / 2 - rect.left,
+				y: (t1.clientY + t2.clientY) / 2 - rect.top
+			};
+		}
+		function cancelEngineGesture() {
+			if (gesture.type === "pending-entity" || gesture.type === "entity-dragging") engine.handlePointerUp();
+		}
+		const noMods = {
+			shift: false,
+			ctrl: false,
+			alt: false,
+			meta: false
+		};
+		function onTouchStart(e) {
+			const rect = getRect();
+			const touches = e.touches;
+			if (touches.length >= 2) {
+				e.preventDefault();
+				cancelEngineGesture();
+				const dist = touchDist(touches[0], touches[1]);
+				const center = touchCenter(touches[0], touches[1], rect);
+				gesture = {
+					type: "pinching",
+					lastDist: dist,
+					lastCx: center.x,
+					lastCy: center.y
+				};
+				return;
+			}
+			const touch = touches[0];
+			const x = touch.clientX - rect.left;
+			const y = touch.clientY - rect.top;
+			if (isInteractive(e.target)) return;
+			e.preventDefault();
+			const now = Date.now();
+			if (now - lastTapTime < DOUBLE_TAP_MS && Math.abs(x - lastTapX) < DOUBLE_TAP_DIST && Math.abs(y - lastTapY) < DOUBLE_TAP_DIST) {
+				lastTapTime = 0;
+				const directive = engine.handlePointerDown(x, y, 0, noMods);
+				try {
+					if (directive.action === "passthrough-track-drag") {
+						const selected = engine.getSelectedEntities();
+						if (selected.length === 1) engine.enterContainer(selected[0]);
+					} else {
+						const camera = engine.getCamera();
+						const target = camera.zoom < .9 ? 1 : camera.zoom < 1.8 ? 2 : 1;
+						engine.zoomAtPoint(x, y, (target - camera.zoom) / camera.zoom);
+					}
+				} finally {
+					engine.handlePointerUp();
+					engine.markDirty();
+				}
+				gesture = { type: "idle" };
+				return;
+			}
+			if (isOnWidget(e.target)) {
+				engine.handlePointerDown(x, y, 0, noMods);
+				gesture = {
+					type: "pending-entity",
+					x,
+					y,
+					time: now
+				};
+			} else gesture = {
+				type: "pending-pan",
+				x,
+				y,
+				time: now
+			};
+		}
+		function onTouchMove(e) {
+			e.preventDefault();
+			const rect = getRect();
+			const touches = e.touches;
+			if (gesture.type === "pinching" && touches.length >= 2) {
+				const dist = touchDist(touches[0], touches[1]);
+				const center = touchCenter(touches[0], touches[1], rect);
+				const scale = dist / gesture.lastDist;
+				engine.zoomAtPoint(center.x, center.y, scale - 1);
+				engine.panBy(center.x - gesture.lastCx, center.y - gesture.lastCy);
+				gesture.lastDist = dist;
+				gesture.lastCx = center.x;
+				gesture.lastCy = center.y;
+				return;
+			}
+			if (touches.length >= 2) {
+				cancelEngineGesture();
+				const dist = touchDist(touches[0], touches[1]);
+				const center = touchCenter(touches[0], touches[1], rect);
+				gesture = {
+					type: "pinching",
+					lastDist: dist,
+					lastCx: center.x,
+					lastCy: center.y
+				};
+				return;
+			}
+			if (touches.length < 1) return;
+			const touch = touches[0];
+			const x = touch.clientX - rect.left;
+			const y = touch.clientY - rect.top;
+			if (gesture.type === "pending-pan") {
+				if (Math.abs(x - gesture.x) > 8 || Math.abs(y - gesture.y) > 8) gesture = {
+					type: "panning",
+					lastX: x,
+					lastY: y
+				};
+				return;
+			}
+			if (gesture.type === "panning") {
+				engine.panBy(x - gesture.lastX, y - gesture.lastY);
+				gesture.lastX = x;
+				gesture.lastY = y;
+				return;
+			}
+			if (gesture.type === "pending-entity" || gesture.type === "entity-dragging") {
+				engine.handlePointerMove(x, y, noMods);
+				if (gesture.type === "pending-entity") {
+					if (Math.abs(x - gesture.x) > 8 || Math.abs(y - gesture.y) > 8) gesture = { type: "entity-dragging" };
+				}
+			}
+		}
+		function onTouchEnd(e) {
+			e.preventDefault();
+			const remaining = e.touches.length;
+			const rect = getRect();
+			if (gesture.type === "pinching") {
+				if (remaining === 1) {
+					const t = e.touches[0];
+					gesture = {
+						type: "panning",
+						lastX: t.clientX - rect.left,
+						lastY: t.clientY - rect.top
+					};
+				} else if (remaining === 0) gesture = { type: "idle" };
+				return;
+			}
+			if (remaining > 0) return;
+			if (gesture.type === "pending-pan") {
+				engine.handlePointerDown(gesture.x, gesture.y, 0, noMods);
+				engine.handlePointerUp();
+				engine.markDirty();
+				lastTapTime = Date.now();
+				lastTapX = gesture.x;
+				lastTapY = gesture.y;
+			}
+			if (gesture.type === "pending-entity") {
+				engine.handlePointerUp();
+				engine.markDirty();
+				lastTapTime = Date.now();
+				lastTapX = gesture.x;
+				lastTapY = gesture.y;
+			}
+			if (gesture.type === "entity-dragging") {
+				engine.handlePointerUp();
+				engine.markDirty();
+			}
+			gesture = { type: "idle" };
+		}
+		function onTouchCancel(_e) {
+			gesture = { type: "idle" };
+			engine.handlePointerCancel();
+		}
+		container.addEventListener("touchstart", onTouchStart, { passive: false });
+		container.addEventListener("touchmove", onTouchMove, { passive: false });
+		container.addEventListener("touchend", onTouchEnd, { passive: false });
+		container.addEventListener("touchcancel", onTouchCancel, { passive: true });
+		return () => {
+			container.removeEventListener("touchstart", onTouchStart);
+			container.removeEventListener("touchmove", onTouchMove);
+			container.removeEventListener("touchend", onTouchEnd);
+			container.removeEventListener("touchcancel", onTouchCancel);
+		};
+	}, [engine]);
+	const onCanvasPointerDown = (0, react.useCallback)((e) => {
+		if (e.target?.closest("button, input, textarea, select, [contenteditable]")) return;
+		const rect = containerRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		const directive = engine.handlePointerDown(e.clientX - rect.left, e.clientY - rect.top, e.button, {
+			shift: e.shiftKey,
+			ctrl: e.ctrlKey,
+			alt: e.altKey,
+			meta: e.metaKey
+		});
+		if (directive.action === "capture-resize" || directive.action === "passthrough-track-drag") containerRef.current?.setPointerCapture(e.pointerId);
+		if (directive.action === "capture-resize") e.preventDefault();
+	}, [engine]);
+	const onCanvasPointerMove = (0, react.useCallback)((e) => {
+		const target = e.target;
+		if (target.closest?.("[data-widget-slot]") && target !== containerRef.current) return;
+		const rect = containerRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		engine.handlePointerMove(e.clientX - rect.left, e.clientY - rect.top, {
+			shift: e.shiftKey,
+			ctrl: e.ctrlKey,
+			alt: e.altKey,
+			meta: e.metaKey
+		});
+	}, [engine]);
+	const onCanvasPointerUp = (0, react.useCallback)((e) => {
+		if (containerRef.current?.hasPointerCapture(e.pointerId)) containerRef.current.releasePointerCapture(e.pointerId);
+		engine.handlePointerUp();
+	}, [engine]);
+	(0, react.useEffect)(() => {
+		let rafId;
+		let running = true;
+		function loop() {
+			if (!running) return;
+			if (engine.flushIfDirty()) {
+				const camera = engine.getCamera();
+				const changes = engine.getFrameChanges();
+				if (cameraLayerRef.current) cameraLayerRef.current.style.transform = `scale(${camera.zoom}) translate(${-camera.x}px, ${-camera.y}px)`;
+				const cursor = engine.world.getResource(require_hooks.CursorResource).cursor;
+				if (containerRef.current && containerRef.current.style.cursor !== cursor) containerRef.current.style.cursor = cursor;
+				const profiler = engine.profiler;
+				const profilerOn = profiler.isEnabled();
+				let selectionFramesDrawn = 0;
+				let snapGuidesDrawn = 0;
+				let spacingIndicatorsDrawn = 0;
+				if (gridRendererRef.current) gridRendererRef.current.getWebGLRenderer().info.reset();
+				if (gridRendererRef.current) {
+					profiler.beginWebGL("grid");
+					gridRendererRef.current.render(camera.x, camera.y, camera.zoom);
+					profiler.endWebGL("grid");
+				}
+				if (selectionRendererRef.current && gridRendererRef.current) {
+					const selected = engine.getSelectedEntities();
+					const selBounds = [];
+					for (const id of selected) {
+						if (!engine.has(id, require_hooks.SelectionFrame)) continue;
+						const wb = engine.get(id, require_hooks.WorldBounds);
+						if (wb) selBounds.push({
+							x: wb.worldX,
+							y: wb.worldY,
+							width: wb.worldWidth,
+							height: wb.worldHeight
+						});
+					}
+					const hovId = engine.getHoveredEntity();
+					let hovBounds = null;
+					if (hovId !== null && engine.has(hovId, require_hooks.SelectionFrame)) {
+						const wb = engine.get(hovId, require_hooks.WorldBounds);
+						if (wb) hovBounds = {
+							x: wb.worldX,
+							y: wb.worldY,
+							width: wb.worldWidth,
+							height: wb.worldHeight
+						};
+					}
+					const snapGuides = engine.getSnapGuides();
+					const equalSpacing = engine.getEqualSpacing();
+					selectionFramesDrawn = selBounds.length + (hovBounds ? 1 : 0);
+					snapGuidesDrawn = snapGuides.length;
+					spacingIndicatorsDrawn = equalSpacing.length;
+					profiler.beginWebGL("selection");
+					selectionRendererRef.current.render(gridRendererRef.current.getWebGLRenderer(), camera.x, camera.y, camera.zoom, selBounds, hovBounds, snapGuides, equalSpacing);
+					profiler.endWebGL("selection");
+				}
+				if (profilerOn && gridRendererRef.current) {
+					const info = gridRendererRef.current.getWebGLRenderer().info;
+					profiler.recordWebGLStats({
+						drawCalls: info.render.calls,
+						triangles: info.render.triangles,
+						selectionFrames: selectionFramesDrawn,
+						snapGuides: snapGuidesDrawn,
+						spacingIndicators: spacingIndicatorsDrawn,
+						domPositionsUpdated: changes.positionsChanged.length
+					});
+				}
+				for (const entityId of changes.positionsChanged) {
+					const el = slotRefs.current.get(entityId);
+					if (!el) continue;
+					const wb = engine.get(entityId, require_hooks.WorldBounds);
+					if (!wb) continue;
+					el.style.transform = `translate(${wb.worldX}px, ${wb.worldY}px)`;
+					el.style.width = `${wb.worldWidth}px`;
+					el.style.height = `${wb.worldHeight}px`;
+				}
+				if (changes.entered.length > 0 || changes.exited.length > 0) setVisibleEntities(engine.getVisibleEntities().map((v) => v.entityId));
+				if (changes.selectionChanged && onSelectionChangeRef.current) onSelectionChangeRef.current(engine.getSelectedEntities());
+				if (changes.cameraChanged && onCameraChangeRef.current) onCameraChangeRef.current({
+					x: camera.x,
+					y: camera.y,
+					zoom: camera.zoom
+				});
+				if (changes.navigationChanged && onNavigationChangeRef.current) {
+					const navStack = engine.world.getResource(require_hooks.NavigationStackResource);
+					const depth = navStack.frames.length - 1;
+					const containerId = navStack.frames[navStack.frames.length - 1].containerId;
+					onNavigationChangeRef.current(depth, containerId);
+				}
+			}
+			rafId = requestAnimationFrame(loop);
+		}
+		engine.tick();
+		const visible = engine.getVisibleEntities();
+		setVisibleEntities(visible.map((v) => v.entityId));
+		const camera = engine.getCamera();
+		if (cameraLayerRef.current) cameraLayerRef.current.style.transform = `scale(${camera.zoom}) translate(${-camera.x}px, ${-camera.y}px)`;
+		if (gridRendererRef.current) gridRendererRef.current.render(camera.x, camera.y, camera.zoom);
+		for (const v of visible) {
+			const el = slotRefs.current.get(v.entityId);
+			if (!el) continue;
+			el.style.transform = `translate(${v.worldX}px, ${v.worldY}px)`;
+			el.style.width = `${v.worldWidth}px`;
+			el.style.height = `${v.worldHeight}px`;
+		}
+		rafId = requestAnimationFrame(loop);
+		return () => {
+			running = false;
+			cancelAnimationFrame(rafId);
+		};
+	}, [engine]);
+	(0, react.useLayoutEffect)(() => {
+		for (const entityId of visibleEntities) {
+			const el = slotRefs.current.get(entityId);
+			if (!el) continue;
+			const wb = engine.get(entityId, require_hooks.WorldBounds);
+			if (!wb) continue;
+			el.style.transform = `translate(${wb.worldX}px, ${wb.worldY}px)`;
+			el.style.width = `${wb.worldWidth}px`;
+			el.style.height = `${wb.worldHeight}px`;
+		}
+	}, [visibleEntities, engine]);
+	const { domEntities, webglEntities } = (0, react.useMemo)(() => {
+		const dom = [];
+		const webgl = [];
+		for (const id of visibleEntities) if (engine.get(id, require_hooks.Widget)?.surface === "webgl") webgl.push(id);
+		else dom.push(id);
+		return {
+			domEntities: dom,
+			webglEntities: webgl
+		};
+	}, [visibleEntities, engine]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks.EngineProvider, {
+		value: engine,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hooks.ContainerRefProvider, {
+			value: containerRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetProvider, {
+				engine,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: containerRef,
+					className: `relative overflow-hidden ${className ?? ""}`,
+					style: {
+						...style,
+						touchAction: "none",
+						backgroundColor: "var(--canvas-bg, #fafafa)"
+					},
+					onPointerDown: onCanvasPointerDown,
+					onPointerMove: onCanvasPointerMove,
+					onPointerUp: onCanvasPointerUp,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+							ref: webglCanvasRef,
+							className: "absolute inset-0 pointer-events-none"
+						}),
+						webglEntities.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WebGLWidgetBridge, {
+							engine,
+							entities: webglEntities
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-0 pointer-events-none" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							ref: cameraLayerRef,
+							className: "absolute left-0 top-0 origin-top-left will-change-transform",
+							children: [domEntities.map((entityId) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WebGLWidgetLayer.WidgetSlot, {
+								entityId,
+								slotRef: registerSlotRef
+							}, entityId)), webglEntities.map((entityId) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WebGLWidgetLayer.SelectionOverlaySlot, {
+								entityId,
+								slotRef: registerSlotRef
+							}, entityId))]
+						}),
+						children
+					]
+				})
+			})
+		})
+	});
+});
+/** Bridge component — reads widget resolver from context and passes to WebGLWidgetLayer */
+function WebGLWidgetBridge({ engine, entities }) {
+	const resolver = require_hooks.useWidgetResolver();
+	const resolve = (0, react.useCallback)((entityId) => {
+		if (!resolver) return null;
+		return resolver(entityId, engine.get(entityId, require_hooks.Widget)?.type ?? "");
+	}, [resolver, engine]);
+	if (!resolver) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WebGLWidgetLayer.WebGLWidgetLayer, {
+		engine,
+		entities,
+		resolve
+	});
+}
+//#endregion
+exports.Active = require_hooks.Active;
+exports.BreakpointConfigResource = require_hooks.BreakpointConfigResource;
+exports.CameraResource = require_hooks.CameraResource;
+exports.Card = require_hooks.Card;
+exports.CardFrame = CardFrame;
+exports.CardPresetsResource = require_hooks.CardPresetsResource;
+exports.Children = require_hooks.Children;
+exports.CommandBuffer = require_WebGLWidgetLayer.CommandBuffer;
+exports.Container = require_hooks.Container;
+exports.CursorHint = require_hooks.CursorHint;
+exports.CursorResource = require_hooks.CursorResource;
+exports.DEFAULT_GRID_CONFIG = require_WebGLWidgetLayer.DEFAULT_GRID_CONFIG;
+exports.DEFAULT_SELECTION_CONFIG = require_WebGLWidgetLayer.DEFAULT_SELECTION_CONFIG;
+exports.Draggable = require_hooks.Draggable;
+exports.Dragging = require_hooks.Dragging;
+exports.HandleSet = require_hooks.HandleSet;
+exports.Hitbox = require_hooks.Hitbox;
 exports.InfiniteCanvas = InfiniteCanvas;
+exports.InteractionRole = require_hooks.InteractionRole;
+exports.Locked = require_hooks.Locked;
+exports.MoveCommand = require_WebGLWidgetLayer.MoveCommand;
+exports.NavigationStackResource = require_hooks.NavigationStackResource;
+exports.Parent = require_hooks.Parent;
+exports.Resizable = require_hooks.Resizable;
+exports.ResizeCommand = require_WebGLWidgetLayer.ResizeCommand;
+exports.Selectable = require_hooks.Selectable;
+exports.Selected = require_hooks.Selected;
+exports.SelectionFrame = require_hooks.SelectionFrame;
+exports.SetComponentCommand = require_WebGLWidgetLayer.SetComponentCommand;
+exports.Transform2D = require_hooks.Transform2D;
+exports.ViewportResource = require_hooks.ViewportResource;
+exports.Visible = require_hooks.Visible;
+exports.Widget = require_hooks.Widget;
+exports.WidgetBreakpoint = require_hooks.WidgetBreakpoint;
+exports.WidgetData = require_hooks.WidgetData;
 exports.WidgetProvider = WidgetProvider;
+exports.WidgetResolverProvider = require_hooks.WidgetResolverProvider;
+exports.WorldBounds = require_hooks.WorldBounds;
+exports.ZIndex = require_hooks.ZIndex;
+exports.ZoomConfigResource = require_hooks.ZoomConfigResource;
+exports.clamp = require_WebGLWidgetLayer.clamp;
+exports.createArchetypeRegistry = require_WebGLWidgetLayer.createArchetypeRegistry;
+exports.createCardWidget = createCardWidget;
+exports.createGeometryCardWidget = createGeometryCardWidget;
+exports.createLayoutEngine = require_WebGLWidgetLayer.createLayoutEngine;
+exports.createWidgetRegistry = require_WebGLWidgetLayer.createWidgetRegistry;
+exports.intersectsAABB = require_WebGLWidgetLayer.intersectsAABB;
+exports.isR3FWidget = require_WebGLWidgetLayer.isR3FWidget;
+exports.pointInAABB = require_WebGLWidgetLayer.pointInAABB;
+exports.screenToWorld = require_WebGLWidgetLayer.screenToWorld;
+exports.useAllEntities = require_hooks.useAllEntities;
 exports.useBreakpoint = useBreakpoint;
+exports.useCamera = require_hooks.useCamera;
 exports.useChildren = useChildren;
+exports.useComponent = require_hooks.useComponent;
+exports.useContainerRef = require_hooks.useContainerRef;
+exports.useEntityComponents = require_hooks.useEntityComponents;
+exports.useEntityTags = require_hooks.useEntityTags;
 exports.useIsSelected = useIsSelected;
+exports.useLayoutEngine = require_hooks.useLayoutEngine;
+exports.useQuery = require_hooks.useQuery;
+exports.useRegisteredComponents = require_hooks.useRegisteredComponents;
+exports.useRegisteredTags = require_hooks.useRegisteredTags;
+exports.useResource = require_hooks.useResource;
+exports.useTag = require_hooks.useTag;
+exports.useTaggedEntities = require_hooks.useTaggedEntities;
 exports.useUpdateWidget = useUpdateWidget;
 exports.useWidgetData = useWidgetData;
-//# sourceMappingURL=index.cjs.map
+exports.useWidgetResolver = require_hooks.useWidgetResolver;
+exports.worldBoundsToAABB = require_WebGLWidgetLayer.worldBoundsToAABB;
+exports.worldToScreen = require_WebGLWidgetLayer.worldToScreen;
+
 //# sourceMappingURL=index.cjs.map