@jamesyong42/infinite-canvas 1.0.0 → 1.2.0

package/dist/index.mjs

@@ -0,0 +1,855 @@
+import { C as MoveCommand, E as createArchetypeRegistry, S as CommandBuffer, T as SetComponentCommand, _ as intersectsAABB, a as DEFAULT_GRID_CONFIG, b as worldBoundsToAABB, c as SelectionOverlaySlot, g as clamp, i as SelectionRenderer, m as isR3FWidget, o as GridRenderer, p as createWidgetRegistry, r as DEFAULT_SELECTION_CONFIG, s as WidgetSlot, t as WebGLWidgetLayer, u as createLayoutEngine, v as pointInAABB, w as ResizeCommand, x as worldToScreen, y as screenToWorld } from "./WebGLWidgetLayer-C3p1tnpm.mjs";
+import { A as Draggable, B as SelectionFrame, C as ViewportResource, D as Children, E as Card, F as Locked, G as WidgetData, H as Visible, I as Parent, K as WorldBounds, L as Resizable, M as HandleSet, N as Hitbox, O as Container, P as InteractionRole, R as Selectable, S as NavigationStackResource, T as Active, U as Widget, V as Transform2D, W as WidgetBreakpoint, _ as useWidgetResolver, a as useEntityTags, b as CardPresetsResource, c as useRegisteredTags, d as useTaggedEntities, f as ContainerRefProvider, g as useLayoutEngine, h as useContainerRef, i as useEntityComponents, j as Dragging, k as CursorHint, l as useResource, m as WidgetResolverProvider, n as useCamera, o as useQuery, p as EngineProvider, q as ZIndex, r as useComponent, s as useRegisteredComponents, t as useAllEntities, u as useTag, v as BreakpointConfigResource, w as ZoomConfigResource, x as CursorResource, y as CameraResource, z as Selected } from "./hooks-BwY7rRHg.mjs";
+import React, { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { ExtrudeGeometry, Shape, Vector2 } from "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) {
+	return useComponent(entityId, 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) {
+	return useComponent(entityId, WidgetBreakpoint)?.current ?? "normal";
+}
+/**
+* Returns child entity IDs of a container entity.
+* Re-renders when children are added or removed.
+*/
+function useChildren(entityId) {
+	return useComponent(entityId, Children)?.ids ?? [];
+}
+/**
+* Returns whether the entity is currently selected.
+* Re-renders when the entity's selection state changes.
+*/
+function useIsSelected(entityId) {
+	return useTag(entityId, 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 = useLayoutEngine();
+	return useCallback((patch) => {
+		const existing = engine.get(entityId, WidgetData);
+		if (existing) engine.set(entityId, WidgetData, { data: {
+			...existing.data,
+			...patch
+		} });
+	}, [engine, entityId]);
+}
+//#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 = useTag(entityId, Dragging);
+	return /* @__PURE__ */ 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__ */ jsx(CardFrame, {
+			entityId,
+			children: /* @__PURE__ */ 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: [[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 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 ExtrudeGeometry(shape, {
+		depth,
+		bevelEnabled: true,
+		bevelSegments: 3,
+		bevelSize: .6,
+		bevelThickness: .6
+	});
+}
+function CardBack({ width, height, color, roughness, metalness }) {
+	return /* @__PURE__ */ jsx("mesh", {
+		geometry: useMemo(() => makeRoundedCardGeometry(width, height, 21.67, 3), [width, height]),
+		position: [
+			0,
+			0,
+			-6
+		],
+		receiveShadow: true,
+		children: /* @__PURE__ */ 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 = useTag(entityId, Dragging);
+		const groupRef = useRef(null);
+		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__ */ jsxs("group", {
+			ref: groupRef,
+			children: [resolvedBack && /* @__PURE__ */ jsx(CardBack, {
+				width,
+				height,
+				color: resolvedBack.color,
+				roughness: resolvedBack.roughness,
+				metalness: resolvedBack.metalness
+			}), /* @__PURE__ */ 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: [[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__ */ jsx(WidgetResolverProvider, {
+		value: useCallback((_entityId, widgetType) => {
+			const def = engine.getWidget(widgetType);
+			if (!def) return null;
+			if (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.forwardRef(function InfiniteCanvas({ engine, grid, selection, onSelectionChange, onCameraChange, onNavigationChange, className, style, children }, ref) {
+	const containerRef = useRef(null);
+	const onSelectionChangeRef = useRef(onSelectionChange);
+	const onCameraChangeRef = useRef(onCameraChange);
+	const onNavigationChangeRef = useRef(onNavigationChange);
+	useEffect(() => {
+		onSelectionChangeRef.current = onSelectionChange;
+	}, [onSelectionChange]);
+	useEffect(() => {
+		onCameraChangeRef.current = onCameraChange;
+	}, [onCameraChange]);
+	useEffect(() => {
+		onNavigationChangeRef.current = onNavigationChange;
+	}, [onNavigationChange]);
+	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 = useRef(null);
+	const gridRendererRef = useRef(null);
+	const selectionRendererRef = useRef(null);
+	const cameraLayerRef = useRef(null);
+	const slotRefs = useRef(/* @__PURE__ */ new Map());
+	const [visibleEntities, setVisibleEntities] = useState([]);
+	const registerSlotRef = useCallback((entityId, el) => {
+		if (el) slotRefs.current.set(entityId, el);
+		else slotRefs.current.delete(entityId);
+	}, []);
+	useLayoutEffect(() => {
+		const container = containerRef.current;
+		const canvas = webglCanvasRef.current;
+		if (!container || !canvas) return;
+		const gridEnabled = grid !== false;
+		let gridInst = null;
+		if (gridEnabled) {
+			gridInst = new GridRenderer(canvas);
+			gridRendererRef.current = gridInst;
+		}
+		const selInst = new 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 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]);
+	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
+	]);
+	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]);
+	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 = 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 = 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 = useCallback((e) => {
+		if (containerRef.current?.hasPointerCapture(e.pointerId)) containerRef.current.releasePointerCapture(e.pointerId);
+		engine.handlePointerUp();
+	}, [engine]);
+	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(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, SelectionFrame)) continue;
+						const wb = engine.get(id, 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, SelectionFrame)) {
+						const wb = engine.get(hovId, 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, 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(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]);
+	useLayoutEffect(() => {
+		for (const entityId of visibleEntities) {
+			const el = slotRefs.current.get(entityId);
+			if (!el) continue;
+			const wb = engine.get(entityId, 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 } = useMemo(() => {
+		const dom = [];
+		const webgl = [];
+		for (const id of visibleEntities) if (engine.get(id, Widget)?.surface === "webgl") webgl.push(id);
+		else dom.push(id);
+		return {
+			domEntities: dom,
+			webglEntities: webgl
+		};
+	}, [visibleEntities, engine]);
+	return /* @__PURE__ */ jsx(EngineProvider, {
+		value: engine,
+		children: /* @__PURE__ */ jsx(ContainerRefProvider, {
+			value: containerRef,
+			children: /* @__PURE__ */ jsx(WidgetProvider, {
+				engine,
+				children: /* @__PURE__ */ 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__ */ jsx("canvas", {
+							ref: webglCanvasRef,
+							className: "absolute inset-0 pointer-events-none"
+						}),
+						webglEntities.length > 0 && /* @__PURE__ */ jsx(WebGLWidgetBridge, {
+							engine,
+							entities: webglEntities
+						}),
+						/* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none" }),
+						/* @__PURE__ */ jsxs("div", {
+							ref: cameraLayerRef,
+							className: "absolute left-0 top-0 origin-top-left will-change-transform",
+							children: [domEntities.map((entityId) => /* @__PURE__ */ jsx(WidgetSlot, {
+								entityId,
+								slotRef: registerSlotRef
+							}, entityId)), webglEntities.map((entityId) => /* @__PURE__ */ jsx(SelectionOverlaySlot, {
+								entityId,
+								slotRef: registerSlotRef
+							}, entityId))]
+						}),
+						children
+					]
+				})
+			})
+		})
+	});
+});
+/** Bridge component — reads widget resolver from context and passes to WebGLWidgetLayer */
+function WebGLWidgetBridge({ engine, entities }) {
+	const resolver = useWidgetResolver();
+	const resolve = useCallback((entityId) => {
+		if (!resolver) return null;
+		return resolver(entityId, engine.get(entityId, Widget)?.type ?? "");
+	}, [resolver, engine]);
+	if (!resolver) return null;
+	return /* @__PURE__ */ jsx(WebGLWidgetLayer, {
+		engine,
+		entities,
+		resolve
+	});
+}
+//#endregion
+export { Active, BreakpointConfigResource, CameraResource, Card, CardFrame, CardPresetsResource, Children, CommandBuffer, Container, CursorHint, CursorResource, DEFAULT_GRID_CONFIG, DEFAULT_SELECTION_CONFIG, Draggable, Dragging, HandleSet, Hitbox, InfiniteCanvas, InteractionRole, Locked, MoveCommand, NavigationStackResource, Parent, Resizable, ResizeCommand, Selectable, Selected, SelectionFrame, SetComponentCommand, Transform2D, ViewportResource, Visible, Widget, WidgetBreakpoint, WidgetData, WidgetProvider, WidgetResolverProvider, WorldBounds, ZIndex, ZoomConfigResource, clamp, createArchetypeRegistry, createCardWidget, createGeometryCardWidget, createLayoutEngine, createWidgetRegistry, intersectsAABB, isR3FWidget, pointInAABB, screenToWorld, useAllEntities, useBreakpoint, useCamera, useChildren, useComponent, useContainerRef, useEntityComponents, useEntityTags, useIsSelected, useLayoutEngine, useQuery, useRegisteredComponents, useRegisteredTags, useResource, useTag, useTaggedEntities, useUpdateWidget, useWidgetData, useWidgetResolver, worldBoundsToAABB, worldToScreen };
+
+//# sourceMappingURL=index.mjs.map