@jamesyong42/infinite-canvas 0.0.1

package/dist/advanced.cjs

@@ -0,0 +1,1578 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/advanced.ts
+var advanced_exports = {};
+__export(advanced_exports, {
+  ContainerRefProvider: () => ContainerRefProvider,
+  DEFAULT_GRID_CONFIG: () => DEFAULT_GRID_CONFIG,
+  DEFAULT_SELECTION_CONFIG: () => DEFAULT_SELECTION_CONFIG,
+  EngineProvider: () => EngineProvider,
+  GridRenderer: () => GridRenderer,
+  Profiler: () => Profiler,
+  SelectionFrame: () => SelectionFrame,
+  SelectionOverlaySlot: () => SelectionOverlaySlot,
+  SelectionRenderer: () => SelectionRenderer,
+  SpatialIndex: () => SpatialIndex,
+  WebGLWidgetLayer: () => WebGLWidgetLayer,
+  WebGLWidgetSlot: () => WebGLWidgetSlot,
+  WidgetSlot: () => WidgetSlot,
+  computeSnapGuides: () => computeSnapGuides,
+  deserializeWorld: () => deserializeWorld,
+  serializeEntities: () => serializeEntities,
+  serializeWorld: () => serializeWorld
+});
+module.exports = __toCommonJS(advanced_exports);
+
+// src/react/webgl/GridRenderer.ts
+var THREE = __toESM(require("three"), 1);
+var DEFAULT_GRID_CONFIG = {
+  spacings: [8, 64, 512],
+  dotColor: [0, 0, 0],
+  dotAlpha: 0.18,
+  fadeIn: [4, 12],
+  fadeOut: [250, 500],
+  dotRadius: [0.5, 1.4],
+  levelWeight: [1, 0.4]
+};
+var vertexShader = (
+  /* glsl */
+  `
+void main() {
+	gl_Position = vec4(position.xy, 0.0, 1.0);
+}
+`
+);
+var fragmentShader = (
+  /* glsl */
+  `
+precision highp float;
+
+uniform vec2 u_resolution;    // device pixels
+uniform vec2 u_camera;        // world-space top-left
+uniform float u_zoom;         // CSS zoom
+uniform float u_dpr;          // device pixel ratio
+uniform vec3 u_spacings;      // world-unit grid spacings
+uniform vec3 u_dotColor;      // dot RGB
+uniform float u_dotAlpha;     // dot base alpha
+uniform vec2 u_fadeIn;        // CSS-px [start, end]
+uniform vec2 u_fadeOut;       // CSS-px [start, end]
+uniform vec2 u_dotRadius;     // CSS-px [min, max]
+uniform vec2 u_levelWeight;   // [base, step]
+
+void main() {
+	vec2 devicePos = gl_FragCoord.xy;
+	devicePos.y = u_resolution.y - devicePos.y;
+
+	float effectiveZoom = u_zoom * u_dpr;
+	vec2 worldPos = devicePos / effectiveZoom + u_camera;
+
+	float totalAlpha = 0.0;
+
+	for (int i = 0; i < 3; i++) {
+		float spacing;
+		if (i == 0) spacing = u_spacings.x;
+		else if (i == 1) spacing = u_spacings.y;
+		else spacing = u_spacings.z;
+
+		// Screen spacing in CSS pixels (DPR-independent for consistent fading)
+		float cssSpacing = spacing * u_zoom;
+
+		// Fade curve
+		float opacity = 0.0;
+		if (cssSpacing >= u_fadeIn.x && cssSpacing < u_fadeIn.y) {
+			opacity = (cssSpacing - u_fadeIn.x) / (u_fadeIn.y - u_fadeIn.x);
+		} else if (cssSpacing >= u_fadeIn.y && cssSpacing < u_fadeOut.x) {
+			opacity = 1.0;
+		} else if (cssSpacing >= u_fadeOut.x && cssSpacing < u_fadeOut.y) {
+			opacity = 1.0 - (cssSpacing - u_fadeOut.x) / (u_fadeOut.y - u_fadeOut.x);
+		}
+		if (opacity <= 0.001) continue;
+
+		// Distance to nearest grid intersection in device pixels
+		vec2 f = fract(worldPos / spacing + 0.5) - 0.5;
+		float dist = length(f) * spacing * effectiveZoom;
+
+		// Dot radius in device pixels \u2014 grows as grid becomes sparser
+		float t = clamp((cssSpacing - u_fadeIn.x) / 40.0, 0.0, 1.0);
+		float radius = mix(u_dotRadius.x, u_dotRadius.y, t) * u_dpr;
+
+		// Anti-aliased dot (0.5 device pixel smoothstep)
+		float dot = 1.0 - smoothstep(radius - 0.5, radius + 0.5, dist);
+
+		// Larger grid levels get progressively stronger dots
+		float weight = u_levelWeight.x + float(i) * u_levelWeight.y;
+		totalAlpha += dot * opacity * weight;
+	}
+
+	gl_FragColor = vec4(u_dotColor, clamp(totalAlpha * u_dotAlpha, 0.0, 1.0));
+}
+`
+);
+var GridRenderer = class {
+  renderer;
+  scene;
+  camera;
+  material;
+  mesh;
+  constructor(canvas) {
+    this.renderer = new THREE.WebGLRenderer({
+      canvas,
+      alpha: true,
+      antialias: false,
+      premultipliedAlpha: false
+    });
+    this.renderer.setClearColor(0, 0);
+    this.scene = new THREE.Scene();
+    this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    this.material = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      uniforms: {
+        u_resolution: { value: new THREE.Vector2(1, 1) },
+        u_camera: { value: new THREE.Vector2(0, 0) },
+        u_zoom: { value: 1 },
+        u_dpr: { value: 1 },
+        u_spacings: { value: new THREE.Vector3(8, 64, 512) },
+        u_dotColor: { value: new THREE.Vector3(0, 0, 0) },
+        u_dotAlpha: { value: 0.18 },
+        u_fadeIn: { value: new THREE.Vector2(4, 12) },
+        u_fadeOut: { value: new THREE.Vector2(250, 500) },
+        u_dotRadius: { value: new THREE.Vector2(0.5, 1.4) },
+        u_levelWeight: { value: new THREE.Vector2(1, 0.4) }
+      },
+      transparent: true,
+      depthTest: false,
+      depthWrite: false
+    });
+    const geometry = new THREE.BufferGeometry();
+    const vertices = new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]);
+    geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+    this.mesh = new THREE.Mesh(geometry, this.material);
+    this.scene.add(this.mesh);
+  }
+  /** Apply a (partial) grid config. Only provided fields are updated. */
+  setConfig(config) {
+    const u = this.material.uniforms;
+    if (config.spacings) u.u_spacings.value.set(...config.spacings);
+    if (config.dotColor) u.u_dotColor.value.set(...config.dotColor);
+    if (config.dotAlpha !== void 0) u.u_dotAlpha.value = config.dotAlpha;
+    if (config.fadeIn) u.u_fadeIn.value.set(...config.fadeIn);
+    if (config.fadeOut) u.u_fadeOut.value.set(...config.fadeOut);
+    if (config.dotRadius) u.u_dotRadius.value.set(...config.dotRadius);
+    if (config.levelWeight) u.u_levelWeight.value.set(...config.levelWeight);
+  }
+  setSize(width, height, dpr = 1) {
+    this.renderer.setSize(width, height, false);
+    this.renderer.setPixelRatio(dpr);
+    const u = this.material.uniforms;
+    u.u_resolution.value.set(width * dpr, height * dpr);
+    u.u_dpr.value = dpr;
+  }
+  render(cameraX, cameraY, zoom) {
+    const u = this.material.uniforms;
+    u.u_camera.value.set(cameraX, cameraY);
+    u.u_zoom.value = zoom;
+    this.renderer.render(this.scene, this.camera);
+  }
+  dispose() {
+    this.mesh.geometry.dispose();
+    this.material.dispose();
+    this.renderer.dispose();
+  }
+  /** Expose for future WebGL widget rendering */
+  getWebGLRenderer() {
+    return this.renderer;
+  }
+};
+
+// src/react/webgl/SelectionRenderer.ts
+var THREE2 = __toESM(require("three"), 1);
+var DEFAULT_SELECTION_CONFIG = {
+  outlineColor: [0.051, 0.6, 1],
+  // #0d99ff (Figma blue)
+  outlineWidth: 1.5,
+  hoverColor: [0.051, 0.6, 1],
+  hoverWidth: 1,
+  handleSize: 8,
+  handleFill: [1, 1, 1],
+  handleBorder: [0.051, 0.6, 1],
+  handleBorderWidth: 1.5,
+  groupDash: 4
+};
+var MAX_ENTITIES = 32;
+var vertexShader2 = (
+  /* glsl */
+  `
+void main() {
+	gl_Position = vec4(position.xy, 0.0, 1.0);
+}
+`
+);
+var fragmentShader2 = (
+  /* glsl */
+  `
+precision highp float;
+
+uniform vec2 u_resolution;
+uniform vec2 u_camera;
+uniform float u_zoom;
+uniform float u_dpr;
+
+// Selection data
+uniform int u_count;
+uniform vec4 u_bounds[${MAX_ENTITIES}];   // (worldX, worldY, width, height)
+uniform int u_hoverIdx;                   // -1 = none
+uniform vec4 u_groupBounds;              // group bbox (0 if count <= 1)
+uniform int u_hasGroup;
+
+// Snap guides
+uniform int u_guideCount;
+uniform vec4 u_guides[16];               // (axis: 0=x/1=y, position, 0, 0)
+uniform int u_spacingCount;
+uniform vec4 u_spacings[8];              // equal-spacing segments: (axis, from, to, perpPos)
+uniform vec3 u_guideColor;
+
+// Style
+uniform vec3 u_outlineColor;
+uniform float u_outlineWidth;
+uniform vec3 u_hoverColor;
+uniform float u_hoverWidth;
+uniform float u_handleSize;
+uniform vec3 u_handleFill;
+uniform vec3 u_handleBorder;
+uniform float u_handleBorderWidth;
+uniform float u_groupDash;
+
+// SDF for axis-aligned rectangle outline (returns distance to edge)
+float sdRectOutline(vec2 p, vec2 center, vec2 halfSize) {
+	vec2 d = abs(p - center) - halfSize;
+	float outside = length(max(d, 0.0));
+	float inside = min(max(d.x, d.y), 0.0);
+	return abs(outside + inside);
+}
+
+// SDF for filled square
+float sdSquare(vec2 p, vec2 center, float halfSize) {
+	vec2 d = abs(p - center) - vec2(halfSize);
+	return max(d.x, d.y);
+}
+
+void main() {
+	if (u_count == 0 && u_hoverIdx < 0) discard;
+
+	vec2 devicePos = gl_FragCoord.xy;
+	devicePos.y = u_resolution.y - devicePos.y;
+
+	float effectiveZoom = u_zoom * u_dpr;
+	vec2 worldPos = devicePos / effectiveZoom + u_camera;
+
+	// Screen-space conversion factor
+	float pxToWorld = 1.0 / effectiveZoom;
+
+	vec4 color = vec4(0.0);
+
+	// --- Hover outline ---
+	if (u_hoverIdx >= 0 && u_hoverIdx < ${MAX_ENTITIES}) {
+		vec4 b = u_bounds[u_hoverIdx];
+		vec2 center = vec2(b.x + b.z * 0.5, b.y + b.w * 0.5);
+		vec2 halfSize = vec2(b.z, b.w) * 0.5;
+		float dist = sdRectOutline(worldPos, center, halfSize);
+		float width = u_hoverWidth * pxToWorld;
+		float alpha = 1.0 - smoothstep(width - pxToWorld * 0.5, width + pxToWorld * 0.5, dist);
+		color = max(color, vec4(u_hoverColor, alpha * 0.6));
+	}
+
+	// --- Selection outlines ---
+	for (int i = 0; i < ${MAX_ENTITIES}; i++) {
+		if (i >= u_count) break;
+		vec4 b = u_bounds[i];
+		vec2 center = vec2(b.x + b.z * 0.5, b.y + b.w * 0.5);
+		vec2 halfSize = vec2(b.z, b.w) * 0.5;
+
+		// Outline
+		float dist = sdRectOutline(worldPos, center, halfSize);
+		float width = u_outlineWidth * pxToWorld;
+		float outlineAlpha = 1.0 - smoothstep(width - pxToWorld * 0.5, width + pxToWorld * 0.5, dist);
+		color = max(color, vec4(u_outlineColor, outlineAlpha));
+
+		// 8 resize handles
+		float hs = u_handleSize * 0.5 * pxToWorld;
+		float bw = u_handleBorderWidth * pxToWorld;
+		vec2 corners[8];
+		corners[0] = vec2(b.x, b.y);                          // nw
+		corners[1] = vec2(b.x + b.z * 0.5, b.y);              // n
+		corners[2] = vec2(b.x + b.z, b.y);                    // ne
+		corners[3] = vec2(b.x + b.z, b.y + b.w * 0.5);        // e
+		corners[4] = vec2(b.x + b.z, b.y + b.w);              // se
+		corners[5] = vec2(b.x + b.z * 0.5, b.y + b.w);        // s
+		corners[6] = vec2(b.x, b.y + b.w);                    // sw
+		corners[7] = vec2(b.x, b.y + b.w * 0.5);              // w
+
+		for (int h = 0; h < 8; h++) {
+			float d = sdSquare(worldPos, corners[h], hs);
+			// Fill (white)
+			float fillAlpha = 1.0 - smoothstep(-pxToWorld * 0.5, pxToWorld * 0.5, d);
+			// Border
+			float borderDist = abs(d + bw * 0.5) - bw * 0.5;
+			float borderAlpha = 1.0 - smoothstep(-pxToWorld * 0.5, pxToWorld * 0.5, borderDist);
+
+			if (fillAlpha > 0.01) {
+				// Composite: border color on top of fill
+				vec3 handleColor = mix(u_handleFill, u_handleBorder, borderAlpha);
+				color = vec4(handleColor, max(fillAlpha, color.a));
+			}
+		}
+	}
+
+	// --- Group bounding box (dashed) ---
+	if (u_hasGroup == 1 && u_count > 1) {
+		vec4 gb = u_groupBounds;
+		vec2 center = vec2(gb.x + gb.z * 0.5, gb.y + gb.w * 0.5);
+		vec2 halfSize = vec2(gb.z, gb.w) * 0.5;
+		float dist = sdRectOutline(worldPos, center, halfSize);
+		float width = u_outlineWidth * 0.75 * pxToWorld;
+		float lineAlpha = 1.0 - smoothstep(width - pxToWorld * 0.5, width + pxToWorld * 0.5, dist);
+
+		// Dash pattern along the rectangle perimeter
+		if (u_groupDash > 0.0 && lineAlpha > 0.01) {
+			vec2 rel = worldPos - vec2(gb.x, gb.y);
+			float perim;
+			// Approximate perimeter position for dash
+			if (abs(rel.y) < width || abs(rel.y - gb.w) < width) {
+				perim = rel.x;
+			} else {
+				perim = rel.y;
+			}
+			float dashWorld = u_groupDash * pxToWorld;
+			float dashPattern = step(0.5, fract(perim / (dashWorld * 2.0)));
+			lineAlpha *= dashPattern;
+		}
+
+		color = max(color, vec4(u_outlineColor, lineAlpha * 0.5));
+	}
+
+	// --- Snap guide lines ---
+	for (int i = 0; i < 16; i++) {
+		if (i >= u_guideCount) break;
+		vec4 g = u_guides[i];
+		float guideWidth = 0.5 * pxToWorld;
+		float dist;
+		if (g.x < 0.5) {
+			// Vertical line (x-axis alignment)
+			dist = abs(worldPos.x - g.y);
+		} else {
+			// Horizontal line (y-axis alignment)
+			dist = abs(worldPos.y - g.y);
+		}
+		float guideAlpha = 1.0 - smoothstep(guideWidth - pxToWorld * 0.3, guideWidth + pxToWorld * 0.3, dist);
+		color = max(color, vec4(u_guideColor, guideAlpha * 0.8));
+	}
+
+	// --- Equal spacing indicators ---
+	for (int i = 0; i < 8; i++) {
+		if (i >= u_spacingCount) break;
+		vec4 s = u_spacings[i];
+		float lineWidth = 0.5 * pxToWorld;
+		float segAlpha = 0.0;
+		if (s.x < 0.5) {
+			// Horizontal segment (x-axis gap)
+			float yDist = abs(worldPos.y - s.w);
+			float xInRange = step(s.y, worldPos.x) * step(worldPos.x, s.z);
+			// Center line
+			segAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, yDist)) * xInRange;
+			// End bars (perpendicular marks at from and to)
+			float barHeight = 4.0 * pxToWorld;
+			float barFromDist = abs(worldPos.x - s.y);
+			float barFromAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, barFromDist))
+				* (1.0 - smoothstep(barHeight, barHeight + pxToWorld, abs(worldPos.y - s.w)));
+			float barToDist = abs(worldPos.x - s.z);
+			float barToAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, barToDist))
+				* (1.0 - smoothstep(barHeight, barHeight + pxToWorld, abs(worldPos.y - s.w)));
+			segAlpha = max(segAlpha, max(barFromAlpha, barToAlpha));
+		} else {
+			// Vertical segment (y-axis gap)
+			float xDist = abs(worldPos.x - s.w);
+			float yInRange = step(s.y, worldPos.y) * step(worldPos.y, s.z);
+			segAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, xDist)) * yInRange;
+			float barWidth = 4.0 * pxToWorld;
+			float barFromAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, abs(worldPos.y - s.y)))
+				* (1.0 - smoothstep(barWidth, barWidth + pxToWorld, abs(worldPos.x - s.w)));
+			float barToAlpha = (1.0 - smoothstep(lineWidth, lineWidth + pxToWorld, abs(worldPos.y - s.z)))
+				* (1.0 - smoothstep(barWidth, barWidth + pxToWorld, abs(worldPos.x - s.w)));
+			segAlpha = max(segAlpha, max(barFromAlpha, barToAlpha));
+		}
+		color = max(color, vec4(u_guideColor, segAlpha * 0.7));
+	}
+
+	if (color.a < 0.01) discard;
+	gl_FragColor = color;
+}
+`
+);
+var SelectionRenderer = class {
+  material;
+  mesh;
+  scene;
+  camera;
+  constructor() {
+    this.scene = new THREE2.Scene();
+    this.camera = new THREE2.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    const boundsDefault = [];
+    for (let i = 0; i < MAX_ENTITIES; i++) {
+      boundsDefault.push(new THREE2.Vector4(0, 0, 0, 0));
+    }
+    this.material = new THREE2.ShaderMaterial({
+      vertexShader: vertexShader2,
+      fragmentShader: fragmentShader2,
+      uniforms: {
+        u_resolution: { value: new THREE2.Vector2(1, 1) },
+        u_camera: { value: new THREE2.Vector2(0, 0) },
+        u_zoom: { value: 1 },
+        u_dpr: { value: 1 },
+        u_count: { value: 0 },
+        u_bounds: { value: boundsDefault },
+        u_hoverIdx: { value: -1 },
+        u_groupBounds: { value: new THREE2.Vector4(0, 0, 0, 0) },
+        u_hasGroup: { value: 0 },
+        // Style (Figma defaults)
+        u_outlineColor: { value: new THREE2.Vector3(...DEFAULT_SELECTION_CONFIG.outlineColor) },
+        u_outlineWidth: { value: DEFAULT_SELECTION_CONFIG.outlineWidth },
+        u_hoverColor: { value: new THREE2.Vector3(...DEFAULT_SELECTION_CONFIG.hoverColor) },
+        u_hoverWidth: { value: DEFAULT_SELECTION_CONFIG.hoverWidth },
+        u_handleSize: { value: DEFAULT_SELECTION_CONFIG.handleSize },
+        u_handleFill: { value: new THREE2.Vector3(...DEFAULT_SELECTION_CONFIG.handleFill) },
+        u_handleBorder: { value: new THREE2.Vector3(...DEFAULT_SELECTION_CONFIG.handleBorder) },
+        u_handleBorderWidth: { value: DEFAULT_SELECTION_CONFIG.handleBorderWidth },
+        u_groupDash: { value: DEFAULT_SELECTION_CONFIG.groupDash },
+        // Snap guides
+        u_guideCount: { value: 0 },
+        u_guides: { value: Array.from({ length: 16 }, () => new THREE2.Vector4(0, 0, 0, 0)) },
+        u_spacingCount: { value: 0 },
+        u_spacings: { value: Array.from({ length: 8 }, () => new THREE2.Vector4(0, 0, 0, 0)) },
+        u_guideColor: { value: new THREE2.Vector3(1, 0, 0.55) }
+        // magenta/pink
+      },
+      transparent: true,
+      depthTest: false,
+      depthWrite: false
+    });
+    const geometry = new THREE2.BufferGeometry();
+    const vertices = new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]);
+    geometry.setAttribute("position", new THREE2.BufferAttribute(vertices, 3));
+    this.mesh = new THREE2.Mesh(geometry, this.material);
+    this.scene.add(this.mesh);
+  }
+  setConfig(config) {
+    const u = this.material.uniforms;
+    if (config.outlineColor) u.u_outlineColor.value.set(...config.outlineColor);
+    if (config.outlineWidth !== void 0) u.u_outlineWidth.value = config.outlineWidth;
+    if (config.hoverColor) u.u_hoverColor.value.set(...config.hoverColor);
+    if (config.hoverWidth !== void 0) u.u_hoverWidth.value = config.hoverWidth;
+    if (config.handleSize !== void 0) u.u_handleSize.value = config.handleSize;
+    if (config.handleFill) u.u_handleFill.value.set(...config.handleFill);
+    if (config.handleBorder) u.u_handleBorder.value.set(...config.handleBorder);
+    if (config.handleBorderWidth !== void 0)
+      u.u_handleBorderWidth.value = config.handleBorderWidth;
+    if (config.groupDash !== void 0) u.u_groupDash.value = config.groupDash;
+  }
+  setSize(resolution, dpr) {
+    this.material.uniforms.u_resolution.value.copy(resolution);
+    this.material.uniforms.u_dpr.value = dpr;
+  }
+  render(renderer, cameraX, cameraY, zoom, selected, hovered, guides = [], spacings = []) {
+    const u = this.material.uniforms;
+    u.u_camera.value.set(cameraX, cameraY);
+    u.u_zoom.value = zoom;
+    const count = Math.min(selected.length, MAX_ENTITIES);
+    u.u_count.value = count;
+    for (let i = 0; i < count; i++) {
+      const b = selected[i];
+      u.u_bounds.value[i].set(b.x, b.y, b.width, b.height);
+    }
+    if (hovered && count < MAX_ENTITIES) {
+      let hoverIdx = -1;
+      for (let i = 0; i < count; i++) {
+        const b = selected[i];
+        if (b.x === hovered.x && b.y === hovered.y) {
+          hoverIdx = i;
+          break;
+        }
+      }
+      if (hoverIdx < 0) {
+        u.u_bounds.value[count].set(hovered.x, hovered.y, hovered.width, hovered.height);
+        u.u_hoverIdx.value = count;
+      } else {
+        u.u_hoverIdx.value = -1;
+      }
+    } else {
+      u.u_hoverIdx.value = -1;
+    }
+    if (count > 1) {
+      let minX = Number.POSITIVE_INFINITY, minY = Number.POSITIVE_INFINITY, maxX = Number.NEGATIVE_INFINITY, maxY = Number.NEGATIVE_INFINITY;
+      for (let i = 0; i < count; i++) {
+        const b = selected[i];
+        minX = Math.min(minX, b.x);
+        minY = Math.min(minY, b.y);
+        maxX = Math.max(maxX, b.x + b.width);
+        maxY = Math.max(maxY, b.y + b.height);
+      }
+      u.u_groupBounds.value.set(minX, minY, maxX - minX, maxY - minY);
+      u.u_hasGroup.value = 1;
+    } else {
+      u.u_hasGroup.value = 0;
+    }
+    const gCount = Math.min(guides.length, 16);
+    u.u_guideCount.value = gCount;
+    for (let i = 0; i < gCount; i++) {
+      const g = guides[i];
+      u.u_guides.value[i].set(g.axis === "x" ? 0 : 1, g.position, 0, 0);
+    }
+    let sIdx = 0;
+    for (const sp of spacings) {
+      for (const seg of sp.segments) {
+        if (sIdx >= 8) break;
+        u.u_spacings.value[sIdx].set(sp.axis === "x" ? 0 : 1, seg.from, seg.to, sp.perpPosition);
+        sIdx++;
+      }
+    }
+    u.u_spacingCount.value = sIdx;
+    const prevAutoClear = renderer.autoClear;
+    renderer.autoClear = false;
+    renderer.render(this.scene, this.camera);
+    renderer.autoClear = prevAutoClear;
+  }
+  dispose() {
+    this.mesh.geometry.dispose();
+    this.material.dispose();
+  }
+};
+
+// src/react/webgl/WebGLWidgetLayer.tsx
+var import_fiber2 = require("@react-three/fiber");
+var import_react4 = require("react");
+var THREE3 = __toESM(require("three"), 1);
+
+// src/react/context.ts
+var import_react = require("react");
+var EngineContext = (0, import_react.createContext)(null);
+var EngineProvider = EngineContext.Provider;
+var ContainerRefContext = (0, import_react.createContext)(null);
+var ContainerRefProvider = ContainerRefContext.Provider;
+function useContainerRef() {
+  return (0, import_react.useContext)(ContainerRefContext);
+}
+function useLayoutEngine() {
+  const engine = (0, import_react.useContext)(EngineContext);
+  if (!engine) {
+    throw new Error("useLayoutEngine must be used within an <InfiniteCanvas>");
+  }
+  return engine;
+}
+var WidgetResolverContext = (0, import_react.createContext)(null);
+var WidgetResolverProvider = WidgetResolverContext.Provider;
+function useWidgetResolver() {
+  return (0, import_react.useContext)(WidgetResolverContext);
+}
+
+// src/react/webgl/WebGLWidgetSlot.tsx
+var import_fiber = require("@react-three/fiber");
+var import_react3 = require("react");
+
+// src/ecs/define.ts
+function defineComponent(name, defaults) {
+  return Object.freeze({ name, defaults, __kind: "component" });
+}
+function defineTag(name) {
+  return Object.freeze({ name, __kind: "tag" });
+}
+
+// src/components.ts
+var Transform2D = defineComponent("Transform2D", {
+  x: 0,
+  y: 0,
+  width: 100,
+  height: 100,
+  rotation: 0
+});
+var WorldBounds = defineComponent("WorldBounds", {
+  worldX: 0,
+  worldY: 0,
+  worldWidth: 0,
+  worldHeight: 0
+});
+var ZIndex = defineComponent("ZIndex", { value: 0 });
+var Parent = defineComponent("Parent", { id: 0 });
+var Children = defineComponent("Children", { ids: [] });
+var Widget = defineComponent("Widget", {
+  surface: "dom",
+  type: ""
+});
+var WidgetData = defineComponent("WidgetData", {
+  data: {}
+});
+var WidgetBreakpoint = defineComponent("WidgetBreakpoint", {
+  current: "normal",
+  screenWidth: 0,
+  screenHeight: 0
+});
+var Container = defineComponent("Container", { enterable: true });
+var Selectable = defineTag("Selectable");
+var Draggable = defineTag("Draggable");
+var Resizable = defineTag("Resizable");
+var Locked = defineTag("Locked");
+var Selected = defineTag("Selected");
+var Active = defineTag("Active");
+var Visible = defineTag("Visible");
+
+// src/react/hooks.ts
+var import_react2 = require("react");
+function useComponent(entity, type) {
+  const engine = useLayoutEngine();
+  const [value, setValue] = (0, import_react2.useState)(() => engine.get(entity, type));
+  (0, import_react2.useEffect)(() => {
+    setValue(engine.get(entity, type));
+    const unsub = engine.world.onComponentChanged(
+      type,
+      (_id, _prev, next) => {
+        setValue({ ...next });
+      },
+      entity
+    );
+    return unsub;
+  }, [engine, entity, type]);
+  return value;
+}
+
+// src/react/webgl/WebGLWidgetSlot.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function WebGLWidgetSlot({ entityId, component: WidgetComponent }) {
+  const groupRef = (0, import_react3.useRef)(null);
+  const engine = useLayoutEngine();
+  const wb = useComponent(entityId, WorldBounds);
+  (0, import_fiber.useFrame)(() => {
+    if (!groupRef.current) return;
+    const bounds = engine.get(entityId, WorldBounds);
+    if (!bounds) return;
+    groupRef.current.position.set(
+      bounds.worldX + bounds.worldWidth / 2,
+      -(bounds.worldY + bounds.worldHeight / 2),
+      0
+    );
+  });
+  if (!wb) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("group", { ref: groupRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WidgetComponent, { entityId, width: wb.worldWidth, height: wb.worldHeight }) });
+}
+
+// src/react/webgl/WebGLWidgetLayer.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function CameraSync({ engine }) {
+  const { camera, size } = (0, import_fiber2.useThree)();
+  (0, import_fiber2.useFrame)(() => {
+    const cam = engine.getCamera();
+    const ortho = camera;
+    ortho.left = 0;
+    ortho.right = size.width / cam.zoom;
+    ortho.top = 0;
+    ortho.bottom = -(size.height / cam.zoom);
+    ortho.near = 0.1;
+    ortho.far = 1e4;
+    ortho.position.set(cam.x, -cam.y, 1e3);
+    ortho.updateProjectionMatrix();
+  });
+  return null;
+}
+function WebGLWidgetLayer({ engine, entities, resolve }) {
+  const canvasRef = (0, import_react4.useRef)(null);
+  const initialCamera = (0, import_react4.useMemo)(() => {
+    const cam = new THREE3.OrthographicCamera(0, 1, 0, -1, 0.1, 1e4);
+    cam.position.set(0, 0, 1e3);
+    return cam;
+  }, []);
+  const widgetEntries = (0, import_react4.useMemo)(() => {
+    const result = [];
+    for (const id of entities) {
+      const resolved = resolve(id);
+      if (resolved && resolved.surface === "webgl") {
+        result.push({
+          entityId: id,
+          component: resolved.component
+        });
+      }
+    }
+    return result;
+  }, [entities, resolve]);
+  if (widgetEntries.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_fiber2.Canvas,
+    {
+      ref: canvasRef,
+      camera: initialCamera,
+      frameloop: "always",
+      gl: { alpha: true, antialias: true },
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        zIndex: 1
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(EngineProvider, { value: engine, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CameraSync, { engine }),
+        widgetEntries.map(({ entityId, component }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WebGLWidgetSlot, { entityId, component }, entityId))
+      ] })
+    }
+  );
+}
+
+// src/react/WidgetSlot.tsx
+var import_react5 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function getMods(e) {
+  return { shift: e.shiftKey, ctrl: e.ctrlKey, alt: e.altKey, meta: e.metaKey };
+}
+var WidgetSlot = (0, import_react5.memo)(function WidgetSlot2({ entityId, slotRef }) {
+  const wrapperRef = (0, import_react5.useRef)(null);
+  const engine = useLayoutEngine();
+  const containerRefObj = useContainerRef();
+  const resolve = useWidgetResolver();
+  const widgetComp = useComponent(entityId, Widget);
+  const resolved = resolve?.(entityId, widgetComp?.type ?? "");
+  const WidgetComponent = resolved?.component ?? null;
+  (0, import_react5.useEffect)(() => {
+    slotRef(entityId, wrapperRef.current);
+    return () => slotRef(entityId, null);
+  }, [entityId, slotRef]);
+  const toLocal = (0, import_react5.useCallback)(
+    (e) => {
+      const rect = containerRefObj?.current?.getBoundingClientRect();
+      if (!rect) return { x: e.clientX, y: e.clientY };
+      return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    },
+    [containerRefObj]
+  );
+  const onPointerDown = (0, import_react5.useCallback)(
+    (e) => {
+      const target = e.target;
+      if (target.closest("button, input, textarea, select, [contenteditable]")) {
+        e.stopPropagation();
+        return;
+      }
+      const { x, y } = toLocal(e);
+      const directive = engine.handlePointerDown(x, y, e.button, getMods(e));
+      e.stopPropagation();
+      if (directive.action === "capture-resize" || directive.action === "passthrough-track-drag") {
+        wrapperRef.current?.setPointerCapture(e.pointerId);
+      }
+      if (directive.action === "capture-resize") {
+        e.preventDefault();
+      }
+    },
+    [engine, toLocal]
+  );
+  const capturedRef = (0, import_react5.useRef)(false);
+  const onPointerMove = (0, import_react5.useCallback)(
+    (e) => {
+      const { x, y } = toLocal(e);
+      const directive = engine.handlePointerMove(x, y, getMods(e));
+      if (directive.action === "capture-drag" && !capturedRef.current) {
+        capturedRef.current = true;
+        e.stopPropagation();
+      }
+    },
+    [engine, toLocal]
+  );
+  const onPointerUp = (0, import_react5.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      capturedRef.current = false;
+      if (wrapperRef.current?.hasPointerCapture(e.pointerId)) {
+        wrapperRef.current.releasePointerCapture(e.pointerId);
+      }
+      engine.handlePointerUp();
+    },
+    [engine]
+  );
+  const onDoubleClick = (0, import_react5.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      engine.enterContainer(entityId);
+    },
+    [engine, entityId]
+  );
+  const wb = engine.get(entityId, WorldBounds);
+  const initialStyle = wb ? {
+    transform: `translate(${wb.worldX}px, ${wb.worldY}px)`,
+    width: `${wb.worldWidth}px`,
+    height: `${wb.worldHeight}px`
+  } : {};
+  const content = WidgetComponent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WidgetComponent, { entityId }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-full w-full rounded border border-dashed border-gray-300 bg-gray-50" });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref: wrapperRef,
+      "data-widget-slot": "",
+      className: "absolute left-0 top-0 origin-top-left will-change-transform",
+      style: initialStyle,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onDoubleClick,
+      children: content
+    }
+  );
+});
+
+// src/react/SelectionFrame.tsx
+var import_react6 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SelectionFrame = (0, import_react6.memo)(function SelectionFrame2(_props) {
+  const handleClass = "absolute h-2.5 w-2.5 rounded-sm border-2 border-blue-500 bg-white";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "pointer-events-none absolute inset-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 rounded border-2 border-blue-500" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `${handleClass} pointer-events-auto -left-1.5 -top-1.5 cursor-nw-resize`,
+        "data-handle": "nw"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `${handleClass} pointer-events-auto -right-1.5 -top-1.5 cursor-ne-resize`,
+        "data-handle": "ne"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `${handleClass} pointer-events-auto -bottom-1.5 -left-1.5 cursor-sw-resize`,
+        "data-handle": "sw"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `${handleClass} pointer-events-auto -bottom-1.5 -right-1.5 cursor-se-resize`,
+        "data-handle": "se"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `${handleClass} pointer-events-auto -top-1.5 left-1/2 -translate-x-1/2 cursor-n-resize`,
+        "data-handle": "n"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `${handleClass} pointer-events-auto -bottom-1.5 left-1/2 -translate-x-1/2 cursor-s-resize`,
+        "data-handle": "s"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `${handleClass} pointer-events-auto -left-1.5 top-1/2 -translate-y-1/2 cursor-w-resize`,
+        "data-handle": "w"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `${handleClass} pointer-events-auto -right-1.5 top-1/2 -translate-y-1/2 cursor-e-resize`,
+        "data-handle": "e"
+      }
+    )
+  ] });
+});
+
+// src/react/SelectionOverlaySlot.tsx
+var import_react7 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function getMods2(e) {
+  return { shift: e.shiftKey, ctrl: e.ctrlKey, alt: e.altKey, meta: e.metaKey };
+}
+var SelectionOverlaySlot = (0, import_react7.memo)(function SelectionOverlaySlot2({
+  entityId,
+  slotRef
+}) {
+  const wrapperRef = (0, import_react7.useRef)(null);
+  const engine = useLayoutEngine();
+  const containerRefObj = useContainerRef();
+  (0, import_react7.useEffect)(() => {
+    slotRef(entityId, wrapperRef.current);
+    return () => slotRef(entityId, null);
+  }, [entityId, slotRef]);
+  const toLocal = (0, import_react7.useCallback)(
+    (e) => {
+      const rect = containerRefObj?.current?.getBoundingClientRect();
+      if (!rect) return { x: e.clientX, y: e.clientY };
+      return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    },
+    [containerRefObj]
+  );
+  const capturedRef = (0, import_react7.useRef)(false);
+  const onPointerDown = (0, import_react7.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      const { x, y } = toLocal(e);
+      const directive = engine.handlePointerDown(x, y, e.button, getMods2(e));
+      if (directive.action === "capture-resize" || directive.action === "passthrough-track-drag") {
+        wrapperRef.current?.setPointerCapture(e.pointerId);
+      }
+      if (directive.action === "capture-resize") {
+        e.preventDefault();
+      }
+    },
+    [engine, toLocal]
+  );
+  const onPointerMove = (0, import_react7.useCallback)(
+    (e) => {
+      const { x, y } = toLocal(e);
+      const directive = engine.handlePointerMove(x, y, getMods2(e));
+      if (directive.action === "capture-drag" && !capturedRef.current) {
+        capturedRef.current = true;
+        e.stopPropagation();
+      }
+    },
+    [engine, toLocal]
+  );
+  const onPointerUp = (0, import_react7.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      capturedRef.current = false;
+      if (wrapperRef.current?.hasPointerCapture(e.pointerId)) {
+        wrapperRef.current.releasePointerCapture(e.pointerId);
+      }
+      engine.handlePointerUp();
+    },
+    [engine]
+  );
+  const onDoubleClick = (0, import_react7.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      engine.enterContainer(entityId);
+    },
+    [engine, entityId]
+  );
+  const wb = engine.get(entityId, WorldBounds);
+  const initialStyle = wb ? {
+    transform: `translate(${wb.worldX}px, ${wb.worldY}px)`,
+    width: `${wb.worldWidth}px`,
+    height: `${wb.worldHeight}px`
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      ref: wrapperRef,
+      className: "absolute left-0 top-0 origin-top-left will-change-transform",
+      style: initialStyle,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onDoubleClick
+    }
+  );
+});
+
+// src/serialization.ts
+function serializeWorld(world, componentTypes, tagTypes, camera, navigationFrames) {
+  const entities = [];
+  const allEntities = world.query();
+  for (const entityId of allEntities) {
+    const components = {};
+    const tags = [];
+    for (const type of componentTypes) {
+      const data = world.getComponent(entityId, type);
+      if (data !== void 0) {
+        components[type.name] = structuredClone(data);
+      }
+    }
+    for (const type of tagTypes) {
+      if (world.hasTag(entityId, type)) {
+        if (type.name !== "Active" && type.name !== "Visible") {
+          tags.push(type.name);
+        }
+      }
+    }
+    if (Object.keys(components).length > 0 || tags.length > 0) {
+      entities.push({ id: entityId, components, tags });
+    }
+  }
+  return {
+    version: 1,
+    entities,
+    resources: {
+      camera: { ...camera },
+      navigationStack: structuredClone(navigationFrames)
+    }
+  };
+}
+function deserializeWorld(world, doc, componentTypes, tagTypes) {
+  const compByName = /* @__PURE__ */ new Map();
+  for (const t of componentTypes) compByName.set(t.name, t);
+  const tagByName = /* @__PURE__ */ new Map();
+  for (const t of tagTypes) tagByName.set(t.name, t);
+  for (const entityId of world.query()) {
+    world.destroyEntity(entityId);
+  }
+  for (const entry of doc.entities) {
+    const entity = world.createEntity();
+    for (const [compName, data] of Object.entries(entry.components)) {
+      const type = compByName.get(compName);
+      if (type) {
+        world.addComponent(entity, type, data);
+      }
+    }
+    for (const tagName of entry.tags) {
+      const type = tagByName.get(tagName);
+      if (type) {
+        world.addTag(entity, type);
+      }
+    }
+  }
+}
+function serializeEntities(world, entityIds, componentTypes, tagTypes) {
+  const result = [];
+  const visited = /* @__PURE__ */ new Set();
+  function visit(entityId) {
+    if (visited.has(entityId)) return;
+    visited.add(entityId);
+    const components = {};
+    const tags = [];
+    for (const type of componentTypes) {
+      const data = world.getComponent(entityId, type);
+      if (data !== void 0) {
+        components[type.name] = structuredClone(data);
+      }
+    }
+    for (const type of tagTypes) {
+      if (world.hasTag(entityId, type)) {
+        if (type.name !== "Active" && type.name !== "Visible") {
+          tags.push(type.name);
+        }
+      }
+    }
+    result.push({ id: entityId, components, tags });
+    const children = components["Children"];
+    if (children?.ids) {
+      for (const childId of children.ids) {
+        visit(childId);
+      }
+    }
+  }
+  for (const id of entityIds) {
+    visit(id);
+  }
+  return result;
+}
+
+// src/snap.ts
+function computeSnapGuides(dragged, references, threshold) {
+  const guides = [];
+  const spacings = [];
+  let snapDx = 0;
+  let snapDy = 0;
+  const dLeft = dragged.x;
+  const dRight = dragged.x + dragged.width;
+  const dCenterX = dragged.x + dragged.width / 2;
+  const dTop = dragged.y;
+  const dBottom = dragged.y + dragged.height;
+  const dCenterY = dragged.y + dragged.height / 2;
+  let bestSnapX = Number.POSITIVE_INFINITY;
+  let bestSnapY = Number.POSITIVE_INFINITY;
+  let bestDx = 0;
+  let bestDy = 0;
+  const xGuides = [];
+  const yGuides = [];
+  for (const ref of references) {
+    const rLeft = ref.x;
+    const rRight = ref.x + ref.width;
+    const rCenterX = ref.x + ref.width / 2;
+    const rTop = ref.y;
+    const rBottom = ref.y + ref.height;
+    const rCenterY = ref.y + ref.height / 2;
+    const xPairs = [
+      [dLeft, rLeft, "edge"],
+      [dLeft, rRight, "edge"],
+      [dRight, rLeft, "edge"],
+      [dRight, rRight, "edge"],
+      [dCenterX, rCenterX, "center"],
+      [dLeft, rCenterX, "edge"],
+      [dRight, rCenterX, "edge"]
+    ];
+    for (const [dVal, rVal, type] of xPairs) {
+      const dist = Math.abs(dVal - rVal);
+      if (dist <= threshold) {
+        const dx = rVal - dVal;
+        if (dist < bestSnapX) {
+          bestSnapX = dist;
+          bestDx = dx;
+          xGuides.length = 0;
+        }
+        if (dist <= bestSnapX + 0.01) {
+          xGuides.push({ axis: "x", position: rVal, type });
+        }
+      }
+    }
+    const yPairs = [
+      [dTop, rTop, "edge"],
+      [dTop, rBottom, "edge"],
+      [dBottom, rTop, "edge"],
+      [dBottom, rBottom, "edge"],
+      [dCenterY, rCenterY, "center"],
+      [dTop, rCenterY, "edge"],
+      [dBottom, rCenterY, "edge"]
+    ];
+    for (const [dVal, rVal, type] of yPairs) {
+      const dist = Math.abs(dVal - rVal);
+      if (dist <= threshold) {
+        const dy = rVal - dVal;
+        if (dist < bestSnapY) {
+          bestSnapY = dist;
+          bestDy = dy;
+          yGuides.length = 0;
+        }
+        if (dist <= bestSnapY + 0.01) {
+          yGuides.push({ axis: "y", position: rVal, type });
+        }
+      }
+    }
+  }
+  const eqResult = computeEqualSpacing(dragged, references, threshold);
+  if (bestSnapX <= threshold) {
+    snapDx = bestDx;
+  } else if (eqResult.snapDx !== void 0) {
+    snapDx = eqResult.snapDx;
+  }
+  if (bestSnapY <= threshold) {
+    snapDy = bestDy;
+  } else if (eqResult.snapDy !== void 0) {
+    snapDy = eqResult.snapDy;
+  }
+  if (bestSnapX <= threshold) {
+    const seen = /* @__PURE__ */ new Set();
+    for (const g of xGuides) {
+      if (!seen.has(g.position)) {
+        seen.add(g.position);
+        guides.push(g);
+      }
+    }
+  }
+  if (bestSnapY <= threshold) {
+    const seen = /* @__PURE__ */ new Set();
+    for (const g of yGuides) {
+      if (!seen.has(g.position)) {
+        seen.add(g.position);
+        guides.push(g);
+      }
+    }
+  }
+  const snappedBounds = {
+    x: dragged.x + snapDx,
+    y: dragged.y + snapDy,
+    width: dragged.width,
+    height: dragged.height
+  };
+  const eqFinal = computeEqualSpacing(snappedBounds, references, threshold * 0.5);
+  spacings.push(...eqFinal.indicators);
+  return { snapDx, snapDy, guides, spacings };
+}
+function computeEqualSpacing(dragged, references, threshold) {
+  const indicators = [];
+  let snapDx;
+  let snapDy;
+  const xResult = checkAxisSpacing(dragged, references, threshold, "x");
+  if (xResult) {
+    snapDx = xResult.snap;
+    indicators.push(...xResult.indicators);
+  }
+  const yResult = checkAxisSpacing(dragged, references, threshold, "y");
+  if (yResult) {
+    snapDy = yResult.snap;
+    indicators.push(...yResult.indicators);
+  }
+  return { snapDx, snapDy, indicators };
+}
+function checkAxisSpacing(dragged, references, threshold, axis) {
+  const isX = axis === "x";
+  const pos = (b) => isX ? b.x : b.y;
+  const size = (b) => isX ? b.width : b.height;
+  const perpPos = (b) => isX ? b.y : b.x;
+  const perpSize = (b) => isX ? b.height : b.width;
+  const end = (b) => pos(b) + size(b);
+  const neighbors = references.filter(
+    (ref) => perpPos(ref) < perpPos(dragged) + perpSize(dragged) && perpPos(ref) + perpSize(ref) > perpPos(dragged)
+  );
+  if (neighbors.length < 1) return null;
+  const sorted = [...neighbors].sort((a, b) => pos(a) - pos(b));
+  const refGaps = [];
+  for (let i = 0; i < sorted.length - 1; i++) {
+    const gap = pos(sorted[i + 1]) - end(sorted[i]);
+    if (gap > 0.1) {
+      refGaps.push({ from: sorted[i], to: sorted[i + 1], gap });
+    }
+  }
+  let bestSnap = null;
+  let bestIndicators = [];
+  let bestDiff = Number.POSITIVE_INFINITY;
+  let leftN = null;
+  let rightN = null;
+  for (const ref of sorted) {
+    if (end(ref) <= pos(dragged) + threshold) {
+      if (!leftN || end(ref) > end(leftN)) leftN = ref;
+    }
+    if (pos(ref) >= end(dragged) - threshold) {
+      if (!rightN || pos(ref) < pos(rightN)) rightN = ref;
+    }
+  }
+  if (leftN && rightN) {
+    const lGap = pos(dragged) - end(leftN);
+    const rGap = pos(rightN) - end(dragged);
+    const diff = Math.abs(lGap - rGap);
+    if (diff <= threshold && diff < bestDiff) {
+      const idealPos = (end(leftN) + pos(rightN) - size(dragged)) / 2;
+      const snap = idealPos - pos(dragged);
+      const equalGap = (pos(rightN) - end(leftN) - size(dragged)) / 2;
+      if (equalGap > 0.1) {
+        const perpY = computePerpCenter(dragged, [leftN, rightN], isX);
+        bestSnap = snap;
+        bestDiff = diff;
+        bestIndicators = [
+          {
+            axis,
+            gap: equalGap,
+            segments: [
+              { from: end(leftN), to: idealPos },
+              { from: idealPos + size(dragged), to: pos(rightN) }
+            ],
+            perpPosition: perpY
+          }
+        ];
+      }
+    }
+  }
+  for (const refGap of refGaps) {
+    const patternGap = refGap.gap;
+    if (rightN === null || pos(refGap.to) >= end(dragged) - threshold * 2) {
+      const chainEnd = refGap.to;
+      const dragGap = pos(dragged) - end(chainEnd);
+      const diff = Math.abs(dragGap - patternGap);
+      if (diff <= threshold && diff < bestDiff) {
+        const idealPos = end(chainEnd) + patternGap;
+        const snap = idealPos - pos(dragged);
+        const perpY = computePerpCenter(dragged, [refGap.from, refGap.to], isX);
+        bestSnap = snap;
+        bestDiff = diff;
+        bestIndicators = [
+          {
+            axis,
+            gap: patternGap,
+            segments: [
+              { from: end(refGap.from), to: pos(refGap.to) },
+              { from: end(chainEnd), to: idealPos }
+            ],
+            perpPosition: perpY
+          }
+        ];
+      }
+    }
+    if (leftN === null || end(refGap.from) <= pos(dragged) + threshold * 2) {
+      const chainStart = refGap.from;
+      const dragGap = pos(chainStart) - end(dragged);
+      const diff = Math.abs(dragGap - patternGap);
+      if (diff <= threshold && diff < bestDiff) {
+        const idealPos = pos(chainStart) - patternGap - size(dragged);
+        const snap = idealPos - pos(dragged);
+        const perpY = computePerpCenter(dragged, [refGap.from, refGap.to], isX);
+        bestSnap = snap;
+        bestDiff = diff;
+        bestIndicators = [
+          {
+            axis,
+            gap: patternGap,
+            segments: [
+              { from: idealPos + size(dragged), to: pos(chainStart) },
+              { from: end(refGap.from), to: pos(refGap.to) }
+            ],
+            perpPosition: perpY
+          }
+        ];
+      }
+    }
+  }
+  if (bestSnap !== null) {
+    return { snap: bestSnap, indicators: bestIndicators };
+  }
+  return null;
+}
+function computePerpCenter(dragged, refs, isX) {
+  const perpPos = (b) => isX ? b.y : b.x;
+  const perpSize = (b) => isX ? b.height : b.width;
+  const allBounds = [dragged, ...refs];
+  const maxStart = Math.max(...allBounds.map(perpPos));
+  const minEnd = Math.min(...allBounds.map((b) => perpPos(b) + perpSize(b)));
+  return maxStart + (minEnd - maxStart) / 2;
+}
+
+// src/profiler.ts
+var RING_SIZE = 300;
+var Profiler = class {
+  enabled = false;
+  ring = [];
+  writeIdx = 0;
+  filled = false;
+  // Scratch state for current frame
+  frameStart = 0;
+  currentSystems = {};
+  visibilityMs = 0;
+  currentTick = 0;
+  /** Enable/disable profiling. When disabled, all methods are no-ops. */
+  setEnabled(on) {
+    this.enabled = on;
+    if (!on) {
+      this.ring = [];
+      this.writeIdx = 0;
+      this.filled = false;
+    }
+  }
+  isEnabled() {
+    return this.enabled;
+  }
+  /** Call at the start of engine.tick() */
+  beginFrame(tick) {
+    if (!this.enabled) return;
+    this.currentTick = tick;
+    this.currentSystems = {};
+    this.visibilityMs = 0;
+    this.frameStart = performance.now();
+    performance.mark("ic-frame-start");
+  }
+  /** Call around each system execution */
+  beginSystem(name) {
+    if (!this.enabled) return;
+    performance.mark(`ic-sys-${name}-start`);
+  }
+  endSystem(name) {
+    if (!this.enabled) return;
+    performance.mark(`ic-sys-${name}-end`);
+    try {
+      const measure = performance.measure(
+        `ic:${name}`,
+        `ic-sys-${name}-start`,
+        `ic-sys-${name}-end`
+      );
+      this.currentSystems[name] = measure.duration;
+    } catch {
+    }
+    performance.clearMarks(`ic-sys-${name}-start`);
+    performance.clearMarks(`ic-sys-${name}-end`);
+  }
+  /** Call around the visibility computation phase */
+  beginVisibility() {
+    if (!this.enabled) return;
+    performance.mark("ic-vis-start");
+  }
+  endVisibility() {
+    if (!this.enabled) return;
+    performance.mark("ic-vis-end");
+    try {
+      const measure = performance.measure("ic:visibility", "ic-vis-start", "ic-vis-end");
+      this.visibilityMs = measure.duration;
+    } catch {
+    }
+    performance.clearMarks("ic-vis-start");
+    performance.clearMarks("ic-vis-end");
+  }
+  /** Call at the end of engine.tick() */
+  endFrame(entityCount, visibleCount) {
+    if (!this.enabled) return;
+    performance.mark("ic-frame-end");
+    let totalMs = 0;
+    try {
+      const measure = performance.measure("ic:frame", "ic-frame-start", "ic-frame-end");
+      totalMs = measure.duration;
+    } catch {
+      totalMs = performance.now() - this.frameStart;
+    }
+    performance.clearMarks("ic-frame-start");
+    performance.clearMarks("ic-frame-end");
+    const sample = {
+      tick: this.currentTick,
+      timestamp: performance.now(),
+      totalMs,
+      systems: { ...this.currentSystems },
+      visibilityMs: this.visibilityMs,
+      entityCount,
+      visibleCount
+    };
+    if (this.ring.length < RING_SIZE) {
+      this.ring.push(sample);
+    } else {
+      this.ring[this.writeIdx] = sample;
+    }
+    this.writeIdx = (this.writeIdx + 1) % RING_SIZE;
+    if (this.ring.length >= RING_SIZE) this.filled = true;
+  }
+  /** Get the last N frame samples (newest first) */
+  getSamples(count) {
+    const n = Math.min(count ?? this.ring.length, this.ring.length);
+    const result = [];
+    for (let i = 0; i < n; i++) {
+      const idx = (this.writeIdx - 1 - i + this.ring.length) % this.ring.length;
+      if (idx >= 0 && idx < this.ring.length) {
+        result.push(this.ring[idx]);
+      }
+    }
+    return result;
+  }
+  /** Compute rolling statistics from the ring buffer */
+  getStats() {
+    const samples = this.ring;
+    const n = samples.length;
+    if (n === 0) {
+      return {
+        fps: 0,
+        frameTime: { avg: 0, p50: 0, p95: 0, p99: 0, max: 0 },
+        systemAvg: {},
+        systemP95: {},
+        budgetUsed: 0,
+        sampleCount: 0
+      };
+    }
+    const frameTimes = samples.map((s) => s.totalMs).sort((a, b) => a - b);
+    const newest = samples[this.filled ? (this.writeIdx - 1 + RING_SIZE) % RING_SIZE : n - 1];
+    const oldest = samples[this.filled ? this.writeIdx : 0];
+    const spanMs = newest.timestamp - oldest.timestamp;
+    const fps = spanMs > 0 ? Math.round((n - 1) / spanMs * 1e3) : 0;
+    const percentile = (sorted, p) => {
+      const idx = Math.floor(p / 100 * (sorted.length - 1));
+      return sorted[idx] ?? 0;
+    };
+    const avg = frameTimes.reduce((a, b) => a + b, 0) / n;
+    const systemNames = /* @__PURE__ */ new Set();
+    for (const s of samples) {
+      for (const name of Object.keys(s.systems)) systemNames.add(name);
+    }
+    const systemAvg = {};
+    const systemP95 = {};
+    for (const name of systemNames) {
+      const times = samples.map((s) => s.systems[name] ?? 0).sort((a, b) => a - b);
+      systemAvg[name] = times.reduce((a, b) => a + b, 0) / n;
+      systemP95[name] = percentile(times, 95);
+    }
+    return {
+      fps,
+      frameTime: {
+        avg,
+        p50: percentile(frameTimes, 50),
+        p95: percentile(frameTimes, 95),
+        p99: percentile(frameTimes, 99),
+        max: frameTimes[frameTimes.length - 1]
+      },
+      systemAvg,
+      systemP95,
+      budgetUsed: avg / 16.67 * 100,
+      sampleCount: n
+    };
+  }
+  /** Clear all collected data */
+  clear() {
+    this.ring = [];
+    this.writeIdx = 0;
+    this.filled = false;
+  }
+};
+
+// src/spatial.ts
+var import_rbush = __toESM(require("rbush"), 1);
+var RBush = typeof import_rbush.default.default === "function" ? import_rbush.default.default : import_rbush.default;
+var SpatialIndex = class {
+  tree = new RBush();
+  entries = /* @__PURE__ */ new Map();
+  upsert(entityId, bounds) {
+    const existing = this.entries.get(entityId);
+    if (existing) {
+      this.tree.remove(existing);
+    }
+    const entry = { ...bounds, entityId };
+    this.entries.set(entityId, entry);
+    this.tree.insert(entry);
+  }
+  remove(entityId) {
+    const existing = this.entries.get(entityId);
+    if (existing) {
+      this.tree.remove(existing);
+      this.entries.delete(entityId);
+    }
+  }
+  /** Query all entries intersecting the given AABB */
+  search(bounds) {
+    return this.tree.search(bounds);
+  }
+  /** Find the topmost entity at a point (by z-order — caller sorts) */
+  searchPoint(x, y, tolerance = 0) {
+    return this.tree.search({
+      minX: x - tolerance,
+      minY: y - tolerance,
+      maxX: x + tolerance,
+      maxY: y + tolerance
+    });
+  }
+  clear() {
+    this.tree.clear();
+    this.entries.clear();
+  }
+  get size() {
+    return this.entries.size;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ContainerRefProvider,
+  DEFAULT_GRID_CONFIG,
+  DEFAULT_SELECTION_CONFIG,
+  EngineProvider,
+  GridRenderer,
+  Profiler,
+  SelectionFrame,
+  SelectionOverlaySlot,
+  SelectionRenderer,
+  SpatialIndex,
+  WebGLWidgetLayer,
+  WebGLWidgetSlot,
+  WidgetSlot,
+  computeSnapGuides,
+  deserializeWorld,
+  serializeEntities,
+  serializeWorld
+});
+//# sourceMappingURL=advanced.cjs.map