@woven-canvas/core 1.0.6 → 1.0.10

package/build/index.js

@@ -8,21 +8,21 @@ var __export = (target, all) => {
 import {
   CanvasComponentDef as CanvasComponentDef7,
   CanvasSingletonDef as CanvasSingletonDef12,
-  defineCanvasComponent as defineCanvasComponent22,
+  defineCanvasComponent as defineCanvasComponent23,
   defineCanvasSingleton as defineCanvasSingleton3,
-  Synced as Synced9
+  Synced as Synced10
 } from "@woven-ecs/canvas-store";
 import {
-  addComponent as addComponent12,
+  addComponent as addComponent13,
   ComponentDef,
-  createEntity as createEntity9,
+  createEntity as createEntity10,
   defineQuery as defineQuery22,
   defineSystem,
   EventType,
-  field as field36,
+  field as field37,
   getBackrefs as getBackrefs5,
   getResources as getResources15,
-  hasComponent as hasComponent20,
+  hasComponent as hasComponent21,
   isAlive as isAlive3,
   MainThreadSystem as MainThreadSystem2,
   removeComponent as removeComponent7,
@@ -122,6 +122,7 @@ var SetCursor = defineCommand("set-cursor");
 var AddFrameHighlight = defineCommand("frame-add-highlight");
 var RemoveFrameHighlight = defineCommand("frame-remove-highlight");
 var AssignFrameChildren = defineCommand("frame-assign-children");
+var PlaceBlockEvent = defineCommand("place-block");
 
 // src/commands/selection.ts
 var SelectBlock = defineCommand("select-block");
@@ -163,8 +164,10 @@ __export(components_exports, {
   HitGeometry: () => HitGeometry,
   Hovered: () => Hovered,
   Image: () => Image,
+  Layer: () => Layer,
   MAX_HIT_ARCS: () => MAX_HIT_ARCS,
   MAX_HIT_CAPSULES: () => MAX_HIT_CAPSULES,
+  MAX_HIT_POLYGON_POINTS: () => MAX_HIT_POLYGON_POINTS,
   Opacity: () => Opacity,
   Pointer: () => Pointer,
   PointerButton: () => PointerButton,
@@ -472,6 +475,7 @@ var BlockDef = z.object({
   resizeMode: z.enum([ResizeMode.Scale, ResizeMode.Text, ResizeMode.Free, ResizeMode.GroupOnly]).default(ResizeMode.Scale),
   canRotate: z.boolean().default(true),
   canScale: z.boolean().default(true),
+  snappable: z.boolean().default(true),
   interactable: z.boolean().default(true),
   excludeFromRankBounds: z.boolean().default(false),
   connectors: BlockDefConnectors.default(BlockDefConnectors.parse({}))
@@ -539,7 +543,10 @@ var BlockSchema = {
   /** How the block can be resized */
   resizeMode: field2.enum(ResizeMode).default(ResizeMode.Default),
   /** Parent block ID — position is relative to parent if set */
-  parentId: field2.ref()
+  parentId: field2.ref(),
+  /** Layer membership — carried by every block directly (a frame and its
+   *  children each get their own `layerId`; no inheritance). Null = unlayered. */
+  layerId: field2.ref()
 };
 var _worldPos = [0, 0];
 var BlockDef2 = class extends CanvasComponentDef {
@@ -1028,19 +1035,25 @@ var Held = defineCanvasComponent9(
 );
 
 // src/components/HitGeometry.ts
-import { Arc, Capsule, Mat2 } from "@woven-canvas/math";
+import { Arc, Capsule, Mat2, Polygon } from "@woven-canvas/math";
 import { CanvasComponentDef as CanvasComponentDef4 } from "@woven-ecs/canvas-store";
 import { field as field11 } from "@woven-ecs/core";
 var _uvToWorldMatrix = [1, 0, 0, 1, 0, 0];
+var _polyPt = [0, 0];
 var MAX_HIT_CAPSULES = 64;
 var FLOATS_PER_CAPSULE = 5;
 var MAX_HIT_ARCS = 2;
 var FLOATS_PER_ARC = 7;
+var MAX_HIT_POLYGON_POINTS = 128;
+var FLOATS_PER_POLYGON_POINT = 2;
+var _worldPolygon = new Float32Array(MAX_HIT_POLYGON_POINTS * FLOATS_PER_POLYGON_POINT);
 var HitGeometrySchema = {
   hitCapsules: field11.buffer(field11.float32()).size(MAX_HIT_CAPSULES * FLOATS_PER_CAPSULE),
   capsuleCount: field11.uint16().default(0),
   hitArcs: field11.buffer(field11.float32()).size(MAX_HIT_ARCS * FLOATS_PER_ARC),
-  arcCount: field11.uint16().default(0)
+  arcCount: field11.uint16().default(0),
+  hitPolygon: field11.buffer(field11.float32()).size(MAX_HIT_POLYGON_POINTS * FLOATS_PER_POLYGON_POINT),
+  polygonPointCount: field11.uint16().default(0)
 };
 var HitGeometryDef = class extends CanvasComponentDef4 {
   constructor() {
@@ -1151,8 +1164,27 @@ var HitGeometryDef = class extends CanvasComponentDef4 {
         return true;
       }
     }
+    const polygonPointCount = this.fillWorldPolygon(hitGeometry.hitPolygon, hitGeometry.polygonPointCount);
+    if (polygonPointCount > 0 && Polygon.containsPointEvenOdd(_worldPolygon, polygonPointCount, point)) {
+      return true;
+    }
     return false;
   }
+  /**
+   * Transform the UV polygon into the shared `_worldPolygon` scratch buffer
+   * using the current `_uvToWorldMatrix` (caller must have built it first).
+   * Returns the vertex count. Allocation-free.
+   */
+  fillWorldPolygon(hitPolygon, count) {
+    for (let i = 0; i < count; i++) {
+      _polyPt[0] = hitPolygon[i * 2];
+      _polyPt[1] = hitPolygon[i * 2 + 1];
+      Mat2.transformPoint(_uvToWorldMatrix, _polyPt);
+      _worldPolygon[i * 2] = _polyPt[0];
+      _worldPolygon[i * 2 + 1] = _polyPt[1];
+    }
+    return count;
+  }
   /**
    * Check if an AABB intersects with the entity's hit geometry.
    * Hit geometry is stored in UV coordinates (0-1) relative to the block.
@@ -1192,6 +1224,10 @@ var HitGeometryDef = class extends CanvasComponentDef4 {
         return true;
       }
     }
+    const polygonPointCount = this.fillWorldPolygon(hitGeometry.hitPolygon, hitGeometry.polygonPointCount);
+    if (polygonPointCount > 0 && Polygon.intersectsAabb(_worldPolygon, polygonPointCount, aabb)) {
+      return true;
+    }
     return false;
   }
   /**
@@ -1229,6 +1265,11 @@ var HitGeometryDef = class extends CanvasComponentDef4 {
       const worldArc = Arc.create(worldA[0], worldA[1], worldB[0], worldB[1], worldC[0], worldC[1], thickness);
       pts.push(...Arc.getExtrema(worldArc));
     }
+    for (let i = 0; i < hitGeometry.polygonPointCount; i++) {
+      const world = [hitGeometry.hitPolygon[i * 2], hitGeometry.hitPolygon[i * 2 + 1]];
+      Mat2.transformPoint(_uvToWorldMatrix, world);
+      pts.push(world);
+    }
     return pts;
   }
   // ============================================
@@ -1331,6 +1372,27 @@ var HitGeometryDef = class extends CanvasComponentDef4 {
     const uvC = Block.worldToUv(ctx, entityId, worldC);
     this.addArcUv(ctx, entityId, uvA, uvB, uvC, worldThickness);
   }
+  /**
+   * Set the filled hit polygon from UV vertices, replacing any existing one.
+   * Positions are in UV coordinates (0-1) relative to the block. The polygon is
+   * implicitly closed and tested with the even-odd fill rule.
+   *
+   * @param ctx - ECS context
+   * @param entityId - Entity ID
+   * @param uvPoints - Polygon vertices in UV coordinates [[x, y], ...]
+   */
+  setPolygonUv(ctx, entityId, uvPoints) {
+    const hitGeometry = this.write(ctx, entityId);
+    const count = Math.min(uvPoints.length, MAX_HIT_POLYGON_POINTS);
+    for (let i = 0; i < count; i++) {
+      hitGeometry.hitPolygon[i * 2] = uvPoints[i][0];
+      hitGeometry.hitPolygon[i * 2 + 1] = uvPoints[i][1];
+    }
+    hitGeometry.polygonPointCount = count;
+    if (uvPoints.length > MAX_HIT_POLYGON_POINTS) {
+      console.warn(`HitGeometry: polygon truncated to ${MAX_HIT_POLYGON_POINTS} points`);
+    }
+  }
   /**
    * Clear all hit geometry from an entity.
    *
@@ -1341,6 +1403,7 @@ var HitGeometryDef = class extends CanvasComponentDef4 {
     const hitGeometry = this.write(ctx, entityId);
     hitGeometry.capsuleCount = 0;
     hitGeometry.arcCount = 0;
+    hitGeometry.polygonPointCount = 0;
   }
 };
 var HitGeometry = new HitGeometryDef();
@@ -1364,19 +1427,39 @@ var Image = defineCanvasComponent11(
   }
 );
 
-// src/components/Opacity.ts
+// src/components/Layer.ts
 import { defineCanvasComponent as defineCanvasComponent12 } from "@woven-ecs/canvas-store";
 import { field as field13 } from "@woven-ecs/core";
-var Opacity = defineCanvasComponent12(
+var Layer = defineCanvasComponent12(
+  { name: "layer", sync: "document" },
+  {
+    /** Parent frame/page entity this layer belongs to — back-reference. Layers
+     *  exist only for sorting; they have no geometry of their own. */
+    parentId: field13.ref(),
+    /** Z-order rank among the page's layers (LexoRank string). Higher sorts in front. */
+    rank: field13.string().max(36).default(""),
+    /** Display name shown in the layers panel. */
+    label: field13.string().max(128).default("Layer"),
+    /** When true, blocks in this layer are not selectable (skipped by hit-testing). */
+    locked: field13.boolean().default(false),
+    /** When true, the layer is not rendered and is skipped by hit-testing. */
+    hidden: field13.boolean().default(false)
+  }
+);
+
+// src/components/Opacity.ts
+import { defineCanvasComponent as defineCanvasComponent13 } from "@woven-ecs/canvas-store";
+import { field as field14 } from "@woven-ecs/core";
+var Opacity = defineCanvasComponent13(
   { name: "opacity" },
   {
-    value: field13.uint8().default(255)
+    value: field14.uint8().default(255)
   }
 );
 
 // src/components/Pointer.ts
 import { CanvasComponentDef as CanvasComponentDef5 } from "@woven-ecs/canvas-store";
-import { field as field14 } from "@woven-ecs/core";
+import { field as field15 } from "@woven-ecs/core";
 var PointerButton = {
   None: "none",
   Left: "left",
@@ -1393,30 +1476,30 @@ var PointerType = {
 var SAMPLE_COUNT = 6;
 var PointerSchema = {
   /** Unique pointer ID (from PointerEvent.pointerId) */
-  pointerId: field14.uint16().default(0),
+  pointerId: field15.uint16().default(0),
   /** Current position relative to the editor element [x, y] */
-  position: field14.tuple(field14.float32(), 2).default([0, 0]),
+  position: field15.tuple(field15.float32(), 2).default([0, 0]),
   /** Position where the pointer went down [x, y] */
-  downPosition: field14.tuple(field14.float32(), 2).default([0, 0]),
+  downPosition: field15.tuple(field15.float32(), 2).default([0, 0]),
   /** Frame number when the pointer went down (for click detection) */
-  downFrame: field14.uint32().default(0),
+  downFrame: field15.uint32().default(0),
   /** Which button is pressed */
-  button: field14.enum(PointerButton).default(PointerButton.None),
+  button: field15.enum(PointerButton).default(PointerButton.None),
   /** Type of pointer device */
-  pointerType: field14.enum(PointerType).default(PointerType.Mouse),
+  pointerType: field15.enum(PointerType).default(PointerType.Mouse),
   /** Pressure from 0 to 1 (for pen/touch) */
-  pressure: field14.float32().default(0),
+  pressure: field15.float32().default(0),
   /** Whether the pointer event target was not the editor element */
-  obscured: field14.boolean().default(false),
+  obscured: field15.boolean().default(false),
   // Velocity tracking (ring buffer for position samples)
   /** Ring buffer of previous positions [x0, y0, x1, y1, ...] @internal */
-  _prevPositions: field14.array(field14.float32(), SAMPLE_COUNT * 2),
+  _prevPositions: field15.array(field15.float32(), SAMPLE_COUNT * 2),
   /** Ring buffer of timestamps for each position sample @internal */
-  _prevTimes: field14.array(field14.float32(), SAMPLE_COUNT),
+  _prevTimes: field15.array(field15.float32(), SAMPLE_COUNT),
   /** Total number of samples added (used for ring buffer indexing) @internal */
-  _sampleCount: field14.int32().default(0),
+  _sampleCount: field15.int32().default(0),
   /** Computed velocity [vx, vy] in pixels per second @internal */
-  _velocity: field14.tuple(field14.float32(), 2).default([0, 0])
+  _velocity: field15.tuple(field15.float32(), 2).default([0, 0])
 };
 var PointerDef = class extends CanvasComponentDef5 {
   constructor() {
@@ -1527,96 +1610,96 @@ function addPointerSample(pointer, position, time) {
 }
 
 // src/components/ScaleWithZoom.ts
-import { defineCanvasComponent as defineCanvasComponent13 } from "@woven-ecs/canvas-store";
-import { field as field15 } from "@woven-ecs/core";
-var ScaleWithZoom = defineCanvasComponent13(
+import { defineCanvasComponent as defineCanvasComponent14 } from "@woven-ecs/canvas-store";
+import { field as field16 } from "@woven-ecs/core";
+var ScaleWithZoom = defineCanvasComponent14(
   { name: "scaleWithZoom" },
   {
     /** Pivot point for scaling as [x, y] (0-1, default 0.5,0.5 = center) */
-    anchor: field15.tuple(field15.float64(), 2).default([0.5, 0.5]),
+    anchor: field16.tuple(field16.float64(), 2).default([0.5, 0.5]),
     /** Initial position as [left, top] at zoom=1 */
-    startPosition: field15.tuple(field15.float64(), 2).default([0, 0]),
+    startPosition: field16.tuple(field16.float64(), 2).default([0, 0]),
     /** Initial size as [width, height] at zoom=1 */
-    startSize: field15.tuple(field15.float64(), 2).default([0, 0]),
+    startSize: field16.tuple(field16.float64(), 2).default([0, 0]),
     /** Scale multiplier per dimension: [x, y] (0 = no zoom effect, 1 = full zoom effect, 0.5 = half effect) */
-    scaleMultiplier: field15.tuple(field15.float64(), 2).default([1, 1])
+    scaleMultiplier: field16.tuple(field16.float64(), 2).default([1, 1])
   }
 );
 
 // src/components/Selected.ts
-import { defineCanvasComponent as defineCanvasComponent14 } from "@woven-ecs/canvas-store";
-var Selected = defineCanvasComponent14({ name: "selected" }, {});
+import { defineCanvasComponent as defineCanvasComponent15 } from "@woven-ecs/canvas-store";
+var Selected = defineCanvasComponent15({ name: "selected" }, {});
 
 // src/components/SelectionBox.ts
-import { defineCanvasComponent as defineCanvasComponent15 } from "@woven-ecs/canvas-store";
-var SelectionBox = defineCanvasComponent15({ name: "selectionBox" }, {});
+import { defineCanvasComponent as defineCanvasComponent16 } from "@woven-ecs/canvas-store";
+var SelectionBox = defineCanvasComponent16({ name: "selectionBox" }, {});
 
 // src/components/Shape.ts
-import { defineCanvasComponent as defineCanvasComponent16 } from "@woven-ecs/canvas-store";
-import { field as field16 } from "@woven-ecs/core";
+import { defineCanvasComponent as defineCanvasComponent17 } from "@woven-ecs/canvas-store";
+import { field as field17 } from "@woven-ecs/core";
 var StrokeKind = {
   Solid: "solid",
   Dashed: "dashed",
   None: "none"
 };
-var Shape = defineCanvasComponent16(
+var Shape = defineCanvasComponent17(
   { name: "shape", sync: "document" },
   {
     /** The kind of shape to render (e.g. 'rectangle', 'ellipse', or custom shape key) */
-    kind: field16.string().default("rectangle"),
+    kind: field17.string().default("rectangle"),
     /** Stroke style */
-    strokeKind: field16.enum(StrokeKind).default(StrokeKind.Solid),
+    strokeKind: field17.enum(StrokeKind).default(StrokeKind.Solid),
     /** Stroke width in pixels */
-    strokeWidth: field16.uint16().default(2),
+    strokeWidth: field17.uint16().default(2),
     /** Stroke color - red component (0-255) */
-    strokeRed: field16.uint8().default(0),
+    strokeRed: field17.uint8().default(0),
     /** Stroke color - green component (0-255) */
-    strokeGreen: field16.uint8().default(0),
+    strokeGreen: field17.uint8().default(0),
     /** Stroke color - blue component (0-255) */
-    strokeBlue: field16.uint8().default(0),
+    strokeBlue: field17.uint8().default(0),
     /** Stroke color - alpha component (0-255) */
-    strokeAlpha: field16.uint8().default(255),
+    strokeAlpha: field17.uint8().default(255),
     /** Fill color - red component (0-255) */
-    fillRed: field16.uint8().default(255),
+    fillRed: field17.uint8().default(255),
     /** Fill color - green component (0-255) */
-    fillGreen: field16.uint8().default(255),
+    fillGreen: field17.uint8().default(255),
     /** Fill color - blue component (0-255) */
-    fillBlue: field16.uint8().default(255),
+    fillBlue: field17.uint8().default(255),
     /** Fill color - alpha component (0-255) */
-    fillAlpha: field16.uint8().default(0)
+    fillAlpha: field17.uint8().default(0)
   }
 );
 
 // src/components/Text.ts
-import { defineCanvasComponent as defineCanvasComponent17 } from "@woven-ecs/canvas-store";
-import { field as field17 } from "@woven-ecs/core";
-var Text = defineCanvasComponent17(
+import { defineCanvasComponent as defineCanvasComponent18 } from "@woven-ecs/canvas-store";
+import { field as field18 } from "@woven-ecs/core";
+var Text = defineCanvasComponent18(
   { name: "text", sync: "document" },
   {
     /** HTML content (supports rich text formatting) */
-    content: field17.string().max(1e4).default(""),
+    content: field18.string().max(1e4).default(""),
     /** Font size in pixels */
-    fontSizePx: field17.float64().default(24),
+    fontSizePx: field18.float64().default(24),
     /** Font family name */
-    fontFamily: field17.string().max(64).default(""),
+    fontFamily: field18.string().max(64).default(""),
     /** Line height multiplier */
-    lineHeight: field17.float64().default(1.2),
+    lineHeight: field18.float64().default(1.2),
     /** Letter spacing in em units */
-    letterSpacingEm: field17.float64().default(0),
+    letterSpacingEm: field18.float64().default(0),
     /** Whether width is constrained (text wraps) */
-    constrainWidth: field17.boolean().default(true),
+    constrainWidth: field18.boolean().default(true),
     /** Default text alignment for new paragraphs */
-    defaultAlignment: field17.enum(TextAlignment).default(TextAlignment.Left)
+    defaultAlignment: field18.enum(TextAlignment).default(TextAlignment.Left)
   }
 );
 
 // src/components/TransformBox.ts
-import { defineCanvasComponent as defineCanvasComponent18 } from "@woven-ecs/canvas-store";
-var TransformBox = defineCanvasComponent18({ name: "transformBox" }, {});
+import { defineCanvasComponent as defineCanvasComponent19 } from "@woven-ecs/canvas-store";
+var TransformBox = defineCanvasComponent19({ name: "transformBox" }, {});
 
 // src/components/TransformHandle.ts
-import { defineCanvasComponent as defineCanvasComponent19 } from "@woven-ecs/canvas-store";
-import { field as field18 } from "@woven-ecs/core";
+import { defineCanvasComponent as defineCanvasComponent20 } from "@woven-ecs/canvas-store";
+import { field as field19 } from "@woven-ecs/core";
 
 // src/cursors.ts
 var CursorKind = /* @__PURE__ */ ((CursorKind2) => {
@@ -1717,39 +1800,39 @@ var CURSORS = {
 };
 
 // src/components/TransformHandle.ts
-var TransformHandle = defineCanvasComponent19(
+var TransformHandle = defineCanvasComponent20(
   { name: "transformHandle" },
   {
-    kind: field18.string().max(16).default(TransformHandleKind.Scale),
-    vectorX: field18.int8().default(0),
-    vectorY: field18.int8().default(0),
-    transformBox: field18.ref(),
-    cursorKind: field18.string().max(16).default("drag" /* Drag */)
+    kind: field19.string().max(16).default(TransformHandleKind.Scale),
+    vectorX: field19.int8().default(0),
+    vectorY: field19.int8().default(0),
+    transformBox: field19.ref(),
+    cursorKind: field19.string().max(16).default("drag" /* Drag */)
   }
 );
 
 // src/components/User.ts
-import { defineCanvasComponent as defineCanvasComponent20 } from "@woven-ecs/canvas-store";
-import { field as field19 } from "@woven-ecs/core";
-var User = defineCanvasComponent20(
+import { defineCanvasComponent as defineCanvasComponent21 } from "@woven-ecs/canvas-store";
+import { field as field20 } from "@woven-ecs/core";
+var User = defineCanvasComponent21(
   { name: "user", sync: "ephemeral" },
   {
-    userId: field19.string().max(36),
-    sessionId: field19.string().max(36),
-    color: field19.string().max(7),
-    name: field19.string().max(100),
-    avatar: field19.string().max(500),
-    position: field19.tuple(field19.float32(), 2).default([0, 0])
+    userId: field20.string().max(36),
+    sessionId: field20.string().max(36),
+    color: field20.string().max(7),
+    name: field20.string().max(100),
+    avatar: field20.string().max(500),
+    position: field20.tuple(field20.float32(), 2).default([0, 0])
   }
 );
 
 // src/components/VerticalAlign.ts
-import { defineCanvasComponent as defineCanvasComponent21 } from "@woven-ecs/canvas-store";
-import { field as field20 } from "@woven-ecs/core";
-var VerticalAlign = defineCanvasComponent21(
+import { defineCanvasComponent as defineCanvasComponent22 } from "@woven-ecs/canvas-store";
+import { field as field21 } from "@woven-ecs/core";
+var VerticalAlign = defineCanvasComponent22(
   { name: "verticalAlign", sync: "document" },
   {
-    value: field20.enum(VerticalAlignment).default(VerticalAlignment.Top)
+    value: field21.enum(VerticalAlignment).default(VerticalAlignment.Top)
   }
 );
 
@@ -1788,20 +1871,20 @@ __export(singletons_exports, {
 
 // src/singletons/Camera.ts
 import { CanvasSingletonDef as CanvasSingletonDef2 } from "@woven-ecs/canvas-store";
-import { field as field22 } from "@woven-ecs/core";
+import { field as field23 } from "@woven-ecs/core";
 
 // src/singletons/Screen.ts
 import { CanvasSingletonDef } from "@woven-ecs/canvas-store";
-import { field as field21 } from "@woven-ecs/core";
+import { field as field22 } from "@woven-ecs/core";
 var ScreenSchema = {
   /** Width of the editor element in pixels */
-  width: field21.float64().default(0),
+  width: field22.float64().default(0),
   /** Height of the editor element in pixels */
-  height: field21.float64().default(0),
+  height: field22.float64().default(0),
   /** Left offset of the editor element relative to the viewport */
-  left: field21.float64().default(0),
+  left: field22.float64().default(0),
   /** Top offset of the editor element relative to the viewport */
-  top: field21.float64().default(0)
+  top: field22.float64().default(0)
 };
 var ScreenDef = class extends CanvasSingletonDef {
   constructor() {
@@ -1828,15 +1911,15 @@ var Screen = new ScreenDef();
 // src/singletons/Camera.ts
 var CameraSchema = {
   /** Top position of the camera in world coordinates */
-  top: field22.float64().default(0),
+  top: field23.float64().default(0),
   /** Left position of the camera in world coordinates */
-  left: field22.float64().default(0),
+  left: field23.float64().default(0),
   /** Zoom level (1 = 100%, 2 = 200%, 0.5 = 50%) */
-  zoom: field22.float64().default(1),
+  zoom: field23.float64().default(1),
   /** Whether the camera viewport intersects any blocks */
-  canSeeBlocks: field22.boolean().default(true),
+  canSeeBlocks: field23.boolean().default(true),
   /** Reference to a block that the camera can currently see (for optimization) */
-  lastSeenBlock: field22.ref()
+  lastSeenBlock: field23.ref()
 };
 var CameraDef = class extends CanvasSingletonDef2 {
   constructor() {
@@ -1912,22 +1995,22 @@ var Camera = new CameraDef();
 
 // src/singletons/Controls.ts
 import { CanvasSingletonDef as CanvasSingletonDef3 } from "@woven-ecs/canvas-store";
-import { field as field23 } from "@woven-ecs/core";
+import { field as field24 } from "@woven-ecs/core";
 var ControlsSchema = {
   /** Tool activated by left mouse button */
-  leftMouseTool: field23.string().max(32).default("select"),
+  leftMouseTool: field24.string().max(32).default("select"),
   /** Tool activated by middle mouse button */
-  middleMouseTool: field23.string().max(32).default("hand"),
+  middleMouseTool: field24.string().max(32).default("hand"),
   /** Tool activated by right mouse button */
-  rightMouseTool: field23.string().max(32).default("hand"),
+  rightMouseTool: field24.string().max(32).default("hand"),
   /** Tool activated by mouse wheel */
-  wheelTool: field23.string().max(32).default("scroll"),
+  wheelTool: field24.string().max(32).default("scroll"),
   /** Tool activated by mouse wheel with modifier key held */
-  modWheelTool: field23.string().max(32).default("zoom"),
+  modWheelTool: field24.string().max(32).default("zoom"),
   /** JSON snapshot of block to place on next click (empty string = no placement active) */
-  heldSnapshot: field23.string().max(65536).default(""),
+  heldSnapshot: field24.string().max(65536).default(""),
   /** User-facing tool name for UI highlighting (may differ from leftMouseTool during draw/drag-out) */
-  activeToolName: field23.string().max(32).default("select")
+  activeToolName: field24.string().max(32).default("select")
 };
 var ControlsDef = class extends CanvasSingletonDef3 {
   constructor() {
@@ -1969,16 +2052,16 @@ var Controls = new ControlsDef();
 
 // src/singletons/Cursor.ts
 import { CanvasSingletonDef as CanvasSingletonDef4 } from "@woven-ecs/canvas-store";
-import { field as field24 } from "@woven-ecs/core";
+import { field as field25 } from "@woven-ecs/core";
 var CursorSchema = {
   /** Base cursor kind (from current tool) */
-  cursorKind: field24.string().max(64).default("select"),
+  cursorKind: field25.string().max(64).default("select"),
   /** Base cursor rotation in radians */
-  rotation: field24.float64().default(0),
+  rotation: field25.float64().default(0),
   /** Context-specific cursor kind (overrides cursorKind when set, e.g., during drag/hover) */
-  contextCursorKind: field24.string().max(64).default(""),
+  contextCursorKind: field25.string().max(64).default(""),
   /** Context cursor rotation in radians */
-  contextRotation: field24.float64().default(0)
+  contextRotation: field25.float64().default(0)
 };
 var CursorDef2 = class extends CanvasSingletonDef4 {
   constructor() {
@@ -2025,7 +2108,7 @@ var CursorDef2 = class extends CanvasSingletonDef4 {
 var Cursor = new CursorDef2();
 
 // src/singletons/FrameContainmentState.ts
-import { field as field25 } from "@woven-ecs/core";
+import { field as field26 } from "@woven-ecs/core";
 
 // src/EditorStateDef.ts
 import { CanvasSingletonDef as CanvasSingletonDef5 } from "@woven-ecs/canvas-store";
@@ -2133,27 +2216,27 @@ function defineEditorState(name, schema) {
 // src/singletons/FrameContainmentState.ts
 var FrameContainmentState = defineEditorState("frameContainmentState", {
   /** Current state machine state */
-  state: field25.string().max(16).default(FrameContainmentStateEnum.Idle),
+  state: field26.string().max(16).default(FrameContainmentStateEnum.Idle),
   /** EntityId of the frame currently highlighted as a drop target, or null */
-  highlightedFrame: field25.ref()
+  highlightedFrame: field26.ref()
 });
 
 // src/singletons/Grid.ts
 import { CanvasSingletonDef as CanvasSingletonDef6 } from "@woven-ecs/canvas-store";
-import { field as field26 } from "@woven-ecs/core";
+import { field as field27 } from "@woven-ecs/core";
 var GridSchema = {
   /** Whether grid snapping is enabled */
-  enabled: field26.boolean().default(false),
+  enabled: field27.boolean().default(false),
   /** Whether resized/rotated objects must stay aligned to the grid */
-  strict: field26.boolean().default(false),
+  strict: field27.boolean().default(false),
   /** Width of each grid column in world units */
-  colWidth: field26.float64().default(20),
+  colWidth: field27.float64().default(20),
   /** Height of each grid row in world units */
-  rowHeight: field26.float64().default(20),
+  rowHeight: field27.float64().default(20),
   /** Angular snap increment in radians when grid is enabled */
-  snapAngleRad: field26.float64().default(Math.PI / 36),
+  snapAngleRad: field27.float64().default(Math.PI / 36),
   /** Angular snap increment in radians when shift key is held */
-  shiftSnapAngleRad: field26.float64().default(Math.PI / 12)
+  shiftSnapAngleRad: field27.float64().default(Math.PI / 12)
 };
 var GridDef = class extends CanvasSingletonDef6 {
   constructor() {
@@ -2216,14 +2299,14 @@ var Grid = new GridDef();
 
 // src/singletons/Intersect.ts
 import { CanvasSingletonDef as CanvasSingletonDef7 } from "@woven-ecs/canvas-store";
-import { field as field27 } from "@woven-ecs/core";
+import { field as field28 } from "@woven-ecs/core";
 var IntersectSchema = {
   // Store up to 5 intersected entity IDs
-  entity1: field27.ref(),
-  entity2: field27.ref(),
-  entity3: field27.ref(),
-  entity4: field27.ref(),
-  entity5: field27.ref()
+  entity1: field28.ref(),
+  entity2: field28.ref(),
+  entity3: field28.ref(),
+  entity4: field28.ref(),
+  entity5: field28.ref()
 };
 var IntersectDef = class extends CanvasSingletonDef7 {
   constructor() {
@@ -2275,30 +2358,30 @@ var Intersect = new IntersectDef();
 
 // src/singletons/Keyboard.ts
 import { CanvasSingletonDef as CanvasSingletonDef8 } from "@woven-ecs/canvas-store";
-import { field as field28 } from "@woven-ecs/core";
+import { field as field29 } from "@woven-ecs/core";
 var KEY_BUFFER_SIZE = 32;
 var KeyboardSchema = {
   /**
    * Buffer where each bit represents whether a key is currently pressed.
    * Uses field.buffer for zero-allocation subarray views.
    */
-  keysDown: field28.buffer(field28.uint8()).size(KEY_BUFFER_SIZE),
+  keysDown: field29.buffer(field29.uint8()).size(KEY_BUFFER_SIZE),
   /**
    * Buffer for key-down triggers (true for exactly 1 frame when key is pressed).
    * Uses field.buffer for zero-allocation subarray views.
    */
-  keysDownTrigger: field28.buffer(field28.uint8()).size(KEY_BUFFER_SIZE),
+  keysDownTrigger: field29.buffer(field29.uint8()).size(KEY_BUFFER_SIZE),
   /**
    * Buffer for key-up triggers (true for exactly 1 frame when key is released).
    * Uses field.buffer for zero-allocation subarray views.
    */
-  keysUpTrigger: field28.buffer(field28.uint8()).size(KEY_BUFFER_SIZE),
+  keysUpTrigger: field29.buffer(field29.uint8()).size(KEY_BUFFER_SIZE),
   /** Common modifier - Shift key is down */
-  shiftDown: field28.boolean().default(false),
+  shiftDown: field29.boolean().default(false),
   /** Common modifier - Alt/Option key is down */
-  altDown: field28.boolean().default(false),
+  altDown: field29.boolean().default(false),
   /** Common modifier - Ctrl (Windows/Linux) or Cmd (Mac) is down */
-  modDown: field28.boolean().default(false)
+  modDown: field29.boolean().default(false)
 };
 function getBit(buffer, bitIndex) {
   if (bitIndex < 0 || bitIndex >= buffer.length * 8) return false;
@@ -2581,24 +2664,24 @@ var Key = {
 
 // src/singletons/Mouse.ts
 import { CanvasSingletonDef as CanvasSingletonDef9 } from "@woven-ecs/canvas-store";
-import { field as field29 } from "@woven-ecs/core";
+import { field as field30 } from "@woven-ecs/core";
 var MouseSchema = {
   /** Current mouse position relative to the editor element [x, y] */
-  position: field29.tuple(field29.float32(), 2).default([0, 0]),
+  position: field30.tuple(field30.float32(), 2).default([0, 0]),
   /** Horizontal wheel delta (positive = scroll right) */
-  wheelDeltaX: field29.float32().default(0),
+  wheelDeltaX: field30.float32().default(0),
   /** Vertical wheel delta (positive = scroll down), normalized across browsers */
-  wheelDeltaY: field29.float32().default(0),
+  wheelDeltaY: field30.float32().default(0),
   /** True for 1 frame when mouse moves */
-  moveTrigger: field29.boolean().default(false),
+  moveTrigger: field30.boolean().default(false),
   /** True for 1 frame when wheel is scrolled */
-  wheelTrigger: field29.boolean().default(false),
+  wheelTrigger: field30.boolean().default(false),
   /** True for 1 frame when mouse enters the editor element */
-  enterTrigger: field29.boolean().default(false),
+  enterTrigger: field30.boolean().default(false),
   /** True for 1 frame when mouse leaves the editor element */
-  leaveTrigger: field29.boolean().default(false),
+  leaveTrigger: field30.boolean().default(false),
   /** Whether the mouse is over a UI element (not the canvas) */
-  obscured: field29.boolean().default(false)
+  obscured: field30.boolean().default(false)
 };
 var MouseDef = class extends CanvasSingletonDef9 {
   constructor() {
@@ -2639,11 +2722,11 @@ var Mouse = new MouseDef();
 
 // src/singletons/RankBounds.ts
 import { CanvasSingletonDef as CanvasSingletonDef10 } from "@woven-ecs/canvas-store";
-import { field as field30 } from "@woven-ecs/core";
+import { field as field31 } from "@woven-ecs/core";
 import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
 var RankBoundsSchema = {
-  minRank: field30.string().max(36).default(""),
-  maxRank: field30.string().max(36).default("")
+  minRank: field31.string().max(36).default(""),
+  maxRank: field31.string().max(36).default("")
 };
 var RankBoundsDef = class extends CanvasSingletonDef10 {
   constructor() {
@@ -2702,64 +2785,64 @@ var RankBounds = new RankBoundsDef();
 
 // src/singletons/ScaleWithZoomState.ts
 import { defineCanvasSingleton } from "@woven-ecs/canvas-store";
-import { field as field31 } from "@woven-ecs/core";
+import { field as field32 } from "@woven-ecs/core";
 var ScaleWithZoomState = defineCanvasSingleton(
   { name: "scaleWithZoomState" },
   {
     /** Last processed zoom level */
-    lastZoom: field31.float64().default(1)
+    lastZoom: field32.float64().default(1)
   }
 );
 
 // src/singletons/ScrollEdgesStateSingleton.ts
-import { field as field32 } from "@woven-ecs/core";
+import { field as field33 } from "@woven-ecs/core";
 var ScrollEdgesStateSingleton = defineEditorState("scrollEdgesState", {
   /** Current state of the scroll edges state machine */
-  state: field32.enum(ScrollEdgesState).default(ScrollEdgesState.Idle),
+  state: field33.enum(ScrollEdgesState).default(ScrollEdgesState.Idle),
   /** Timestamp when pointer first entered the edge zone */
-  edgeEnterStartTime: field32.float64().default(0)
+  edgeEnterStartTime: field33.float64().default(0)
 });
 
 // src/singletons/SelectionStateSingleton.ts
-import { field as field33 } from "@woven-ecs/core";
+import { field as field34 } from "@woven-ecs/core";
 var SelectionStateSingleton = defineEditorState("selectionState", {
-  state: field33.enum(SelectionState).default(SelectionState.Idle),
-  dragStart: field33.tuple(field33.float64(), 2).default([0, 0]),
-  pointingStartClient: field33.tuple(field33.float64(), 2).default([0, 0]),
-  pointingStartWorld: field33.tuple(field33.float64(), 2).default([0, 0]),
-  draggedEntityStart: field33.tuple(field33.float64(), 2).default([0, 0]),
-  draggedEntity: field33.ref(),
-  cloneGeneratorSeed: field33.string().max(36).default(""),
-  isCloning: field33.boolean()
+  state: field34.enum(SelectionState).default(SelectionState.Idle),
+  dragStart: field34.tuple(field34.float64(), 2).default([0, 0]),
+  pointingStartClient: field34.tuple(field34.float64(), 2).default([0, 0]),
+  pointingStartWorld: field34.tuple(field34.float64(), 2).default([0, 0]),
+  draggedEntityStart: field34.tuple(field34.float64(), 2).default([0, 0]),
+  draggedEntity: field34.ref(),
+  cloneGeneratorSeed: field34.string().max(36).default(""),
+  isCloning: field34.boolean()
 });
 
 // src/singletons/Tick.ts
 import { defineCanvasSingleton as defineCanvasSingleton2 } from "@woven-ecs/canvas-store";
-import { field as field34 } from "@woven-ecs/core";
+import { field as field35 } from "@woven-ecs/core";
 var Tick = defineCanvasSingleton2(
   { name: "tick" },
   {
     /** Current tick number (increments each tick) */
-    number: field34.uint32().default(0),
+    number: field35.uint32().default(0),
     /** Time since last tick in seconds */
-    delta: field34.float64().default(0),
+    delta: field35.float64().default(0),
     /** Timestamp of current tick in milliseconds (from performance.now()) */
-    time: field34.float64().default(0),
+    time: field35.float64().default(0),
     /** Timestamp of previous tick in milliseconds (0 if first tick) */
-    lastTime: field34.float64().default(0)
+    lastTime: field35.float64().default(0)
   }
 );
 
 // src/singletons/TransformBoxStateSingleton.ts
-import { field as field35 } from "@woven-ecs/core";
+import { field as field36 } from "@woven-ecs/core";
 var TransformBoxStateSingleton = defineEditorState("transformBoxState", {
-  state: field35.string().max(32).default(TransformBoxState.None),
-  transformBoxId: field35.ref()
+  state: field36.string().max(32).default(TransformBoxState.None),
+  transformBoxId: field36.ref()
 });
 
 // src/systems/capture/captureFrameContainmentSystem.ts
-import { Synced as Synced2 } from "@woven-ecs/canvas-store";
-import { defineQuery as defineQuery7, hasComponent as hasComponent10 } from "@woven-ecs/core";
+import { Synced as Synced3 } from "@woven-ecs/canvas-store";
+import { defineQuery as defineQuery7, hasComponent as hasComponent11 } from "@woven-ecs/core";
 import { assign, setup } from "xstate";
 
 // src/EditorSystem.ts
@@ -2848,6 +2931,9 @@ function canBlockEdit(ctx, tag) {
 function canBlockInteract(ctx, tag) {
   return getBlockDef(ctx, tag).interactable;
 }
+function canBlockSnap(ctx, tag) {
+  return getBlockDef(ctx, tag).snappable;
+}
 function getBlockResizeMode(ctx, entityId) {
   const block = Block.read(ctx, entityId);
   if (block.resizeMode !== ResizeMode.Default) {
@@ -2870,6 +2956,17 @@ function computeAabb(ctx, entityId, out) {
   }
 }
 
+// src/helpers/createBlock.ts
+import { Synced } from "@woven-ecs/canvas-store";
+import { addComponent as addComponent2, createEntity as createEntity2 } from "@woven-ecs/core";
+function createBlock(ctx, block) {
+  const entityId = createEntity2(ctx);
+  addComponent2(ctx, entityId, Synced, { id: crypto.randomUUID() });
+  addComponent2(ctx, entityId, Block, { ...block, rank: block.rank ?? RankBounds.genNext(ctx) });
+  PlaceBlockEvent.spawn(ctx, { entityId });
+  return entityId;
+}
+
 // src/helpers/embed.ts
 function detectEmbedProvider(url) {
   try {
@@ -3083,6 +3180,9 @@ function compareRankChains(a, b) {
 function compareBlockOrder(getBlock, a, b) {
   const stratumDiff = STRATUM_ORDER[a.stratum] - STRATUM_ORDER[b.stratum];
   if (stratumDiff !== 0) return stratumDiff;
+  const aLayer = a.layerRank ?? "";
+  const bLayer = b.layerRank ?? "";
+  if (aLayer !== bLayer) return aLayer < bLayer ? -1 : 1;
   const chainA = getRankChain(getBlock, a);
   const chainB = getRankChain(getBlock, b);
   return compareRankChains(chainA, chainB);
@@ -3127,12 +3227,30 @@ function isHeldByRemote(ctx, entityId) {
 
 // src/helpers/intersect.ts
 import { Aabb as Aabb3 } from "@woven-canvas/math";
-import { defineQuery as defineQuery3, hasComponent as hasComponent6 } from "@woven-ecs/core";
+import { defineQuery as defineQuery3, hasComponent as hasComponent7 } from "@woven-ecs/core";
+
+// src/helpers/layerRank.ts
+import { hasComponent as hasComponent6 } from "@woven-ecs/core";
+function resolveLayerRank(ctx, entityId) {
+  if (!hasComponent6(ctx, entityId, Block)) return "";
+  const layerId = Block.read(ctx, entityId).layerId;
+  if (layerId !== null && hasComponent6(ctx, layerId, Layer)) {
+    return Layer.read(ctx, layerId).rank;
+  }
+  return "";
+}
+function isLayerInteractive(ctx, layerId) {
+  if (layerId === null || !hasComponent6(ctx, layerId, Layer)) return true;
+  const layer = Layer.read(ctx, layerId);
+  return !layer.hidden && !layer.locked;
+}
+
+// src/helpers/intersect.ts
 var blocksWithAabb = defineQuery3((q) => q.with(Block, Aabb));
 function isPointInsideAncestorFrames(ctx, entityId, point) {
   let current = Block.read(ctx, entityId).parentId;
-  while (current !== null && hasComponent6(ctx, current, Block)) {
-    if (hasComponent6(ctx, current, Frame)) {
+  while (current !== null && hasComponent7(ctx, current, Block)) {
+    if (hasComponent7(ctx, current, Frame)) {
       if (!Aabb.containsPoint(ctx, current, point)) {
         return false;
       }
@@ -3143,8 +3261,8 @@ function isPointInsideAncestorFrames(ctx, entityId, point) {
 }
 function isAabbInsideAncestorFrames(ctx, entityId, bounds) {
   let current = Block.read(ctx, entityId).parentId;
-  while (current !== null && hasComponent6(ctx, current, Block)) {
-    if (hasComponent6(ctx, current, Frame)) {
+  while (current !== null && hasComponent7(ctx, current, Block)) {
+    if (hasComponent7(ctx, current, Frame)) {
       const { value: frameAabb } = Aabb.read(ctx, current);
       if (!Aabb3.intersects(bounds, frameAabb)) {
         return false;
@@ -3160,10 +3278,11 @@ function intersectPoint(ctx, point, entityIds) {
   for (const entityId of entities) {
     const block = Block.read(ctx, entityId);
     if (!canBlockInteract(ctx, block.tag)) continue;
+    if (!isLayerInteractive(ctx, block.layerId)) continue;
     if (!Aabb.containsPoint(ctx, entityId, point)) {
       continue;
     }
-    if (hasComponent6(ctx, entityId, HitGeometry)) {
+    if (hasComponent7(ctx, entityId, HitGeometry)) {
       if (!HitGeometry.containsPointWorld(ctx, entityId, point)) {
         continue;
       }
@@ -3185,12 +3304,13 @@ function intersectAabb(ctx, bounds, entityIds) {
   for (const entityId of entities) {
     const block = Block.read(ctx, entityId);
     if (!canBlockInteract(ctx, block.tag)) continue;
+    if (!isLayerInteractive(ctx, block.layerId)) continue;
     const { value: entityAabb } = Aabb.read(ctx, entityId);
     if (!Aabb3.intersects(bounds, entityAabb)) {
       continue;
     }
     if (!Aabb3.contains(bounds, entityAabb)) {
-      if (hasComponent6(ctx, entityId, HitGeometry)) {
+      if (hasComponent7(ctx, entityId, HitGeometry)) {
         if (!HitGeometry.intersectsAabbWorld(ctx, entityId, bounds)) {
           continue;
         }
@@ -3209,12 +3329,13 @@ function intersectAabb(ctx, bounds, entityIds) {
 }
 function sortByRankDescending(ctx, entityIds) {
   const getBlock = (id) => {
-    if (!hasComponent6(ctx, id, Block)) return null;
+    if (!hasComponent7(ctx, id, Block)) return null;
     const block = Block.read(ctx, id);
     return {
       rank: block.rank,
       stratum: getBlockDef(ctx, block.tag).stratum,
-      parentId: block.parentId
+      parentId: block.parentId,
+      layerRank: resolveLayerRank(ctx, id)
     };
   };
   const entries = entityIds.map((id) => ({
@@ -3230,13 +3351,15 @@ function getTopmostBlockAtPoint(ctx, point) {
 }
 
 // src/helpers/intersectCapsule.ts
-import { Aabb as AabbNs, Arc as Arc2, Capsule as Capsule2, Mat2 as Mat22 } from "@woven-canvas/math";
-import { hasComponent as hasComponent7 } from "@woven-ecs/core";
+import { Aabb as AabbNs, Arc as Arc2, Capsule as Capsule2, Mat2 as Mat22, Polygon as Polygon2 } from "@woven-canvas/math";
+import { hasComponent as hasComponent8 } from "@woven-ecs/core";
 var _uvToWorldMatrix2 = [1, 0, 0, 1, 0, 0];
+var _worldPolygon2 = new Float32Array(MAX_HIT_POLYGON_POINTS * 2);
+var _polyPt2 = [0, 0];
 function isCapsuleInsideAncestorFrames(ctx, entityId, capsule) {
   let current = Block.read(ctx, entityId).parentId;
-  while (current !== null && hasComponent7(ctx, current, Block)) {
-    if (hasComponent7(ctx, current, Frame)) {
+  while (current !== null && hasComponent8(ctx, current, Block)) {
+    if (hasComponent8(ctx, current, Frame)) {
       const { value: frameAabb } = Aabb.read(ctx, current);
       if (!Capsule2.intersectsAabb(capsule, frameAabb)) {
         return false;
@@ -3254,7 +3377,7 @@ function intersectCapsule(ctx, capsule, entityIds) {
     if (!AabbNs.intersects(capsuleBounds, aabb.value)) {
       continue;
     }
-    if (hasComponent7(ctx, entityId, HitGeometry)) {
+    if (hasComponent8(ctx, entityId, HitGeometry)) {
       if (!intersectsCapsuleHitGeometry(ctx, entityId, capsule)) {
         continue;
       }
@@ -3301,12 +3424,25 @@ function intersectsCapsuleHitGeometry(ctx, entityId, capsule) {
       return true;
     }
   }
+  const polygonPointCount = hitGeometry.polygonPointCount;
+  if (polygonPointCount > 0) {
+    for (let i = 0; i < polygonPointCount; i++) {
+      _polyPt2[0] = hitGeometry.hitPolygon[i * 2];
+      _polyPt2[1] = hitGeometry.hitPolygon[i * 2 + 1];
+      Mat22.transformPoint(_uvToWorldMatrix2, _polyPt2);
+      _worldPolygon2[i * 2] = _polyPt2[0];
+      _worldPolygon2[i * 2 + 1] = _polyPt2[1];
+    }
+    if (Polygon2.intersectsCapsule(_worldPolygon2, polygonPointCount, capsule)) {
+      return true;
+    }
+  }
   return false;
 }
 
 // src/helpers/ref.ts
-import { Synced } from "@woven-ecs/canvas-store";
-import { hasComponent as hasComponent8 } from "@woven-ecs/core";
+import { Synced as Synced2 } from "@woven-ecs/canvas-store";
+import { hasComponent as hasComponent9 } from "@woven-ecs/core";
 function convertRefsToUuids(ctx, schema, data) {
   const result = { ...data };
   for (const [fieldName, fieldBuilder] of Object.entries(schema)) {
@@ -3319,8 +3455,8 @@ function convertRefsToUuids(ctx, schema, data) {
 }
 function getEntityUuid(ctx, entityId) {
   if (entityId == null) return null;
-  if (!hasComponent8(ctx, entityId, Synced)) return null;
-  return Synced.read(ctx, entityId).id;
+  if (!hasComponent9(ctx, entityId, Synced2)) return null;
+  return Synced2.read(ctx, entityId).id;
 }
 function getRefFieldNames(schema) {
   const refFields = [];
@@ -3345,29 +3481,29 @@ function resolveRefFields(ctx, entityId, componentDef, componentData, uuidToEnti
 
 // src/helpers/select.ts
 import {
-  addComponent as addComponent2,
+  addComponent as addComponent3,
   defineQuery as defineQuery4,
   getResources as getResources4,
-  hasComponent as hasComponent9,
+  hasComponent as hasComponent10,
   removeComponent
 } from "@woven-ecs/core";
 var selectedQuery = defineQuery4((q) => q.with(Selected));
 var blockQuery = defineQuery4((q) => q.with(Block));
 function selectBlock(ctx, entityId) {
-  if (hasComponent9(ctx, entityId, Selected)) return;
+  if (hasComponent10(ctx, entityId, Selected)) return;
   if (isHeldByRemote(ctx, entityId)) return;
-  if (hasComponent9(ctx, entityId, Block)) {
+  if (hasComponent10(ctx, entityId, Block)) {
     const block = Block.read(ctx, entityId);
     if (!canBlockInteract(ctx, block.tag)) return;
   }
   const { sessionId } = getResources4(ctx);
-  addComponent2(ctx, entityId, Selected, {});
-  if (!hasComponent9(ctx, entityId, Held)) {
-    addComponent2(ctx, entityId, Held, { sessionId });
+  addComponent3(ctx, entityId, Selected, {});
+  if (!hasComponent10(ctx, entityId, Held)) {
+    addComponent3(ctx, entityId, Held, { sessionId });
   }
 }
 function deselectBlock(ctx, entityId) {
-  if (!hasComponent9(ctx, entityId, Selected)) return;
+  if (!hasComponent10(ctx, entityId, Selected)) return;
   removeComponent(ctx, entityId, Selected);
   removeComponent(ctx, entityId, Held);
 }
@@ -3581,13 +3717,13 @@ function spawnAssignments(ctx, targetFrame) {
   const draggedEntity = getDraggedEntity(ctx);
   if (draggedEntity === null) return;
   const assignments = [];
-  if (hasComponent10(ctx, draggedEntity, TransformBox)) {
+  if (hasComponent11(ctx, draggedEntity, TransformBox)) {
     for (const blockId of selectedQuery2.current(ctx)) {
       if (targetFrame !== null && blockId === targetFrame) continue;
       if (targetFrame !== null && isAncestor(ctx, targetFrame, blockId)) continue;
       assignments.push({ entityId: blockId, frameId: targetFrame });
     }
-  } else if (hasComponent10(ctx, draggedEntity, Synced2)) {
+  } else if (hasComponent11(ctx, draggedEntity, Synced3)) {
     if (targetFrame !== null && draggedEntity === targetFrame) return;
     if (targetFrame !== null && isAncestor(ctx, targetFrame, draggedEntity)) return;
     assignments.push({ entityId: draggedEntity, frameId: targetFrame });
@@ -3712,7 +3848,7 @@ var hoverCursorSystem = defineEditorSystem({ phase: "capture" }, (ctx) => {
 });
 
 // src/systems/capture/keybindSystem.ts
-import { addComponent as addComponent3, createEntity as createEntity2, getResources as getResources6 } from "@woven-ecs/core";
+import { addComponent as addComponent4, createEntity as createEntity3, getResources as getResources6 } from "@woven-ecs/core";
 var keybindSystem = defineEditorSystem({ phase: "capture" }, (ctx) => {
   if (isReadonly(ctx)) return;
   const keyboard = Keyboard.read(ctx);
@@ -3722,8 +3858,8 @@ var keybindSystem = defineEditorSystem({ phase: "capture" }, (ctx) => {
     triggered &&= !!keybind.mod === keyboard.modDown;
     triggered &&= !!keybind.shift === keyboard.shiftDown;
     if (triggered) {
-      const eid = createEntity2(ctx);
-      addComponent3(ctx, eid, CommandMarker, { name: keybind.command });
+      const eid = createEntity3(ctx);
+      addComponent4(ctx, eid, CommandMarker, { name: keybind.command });
       break;
     }
   }
@@ -3847,7 +3983,7 @@ var scrollEdgesSystem = defineEditorSystem({ phase: "capture" }, (ctx) => {
 });
 
 // src/systems/capture/transformBoxSystem.ts
-import { createEntity as createEntity3, defineQuery as defineQuery9, hasComponent as hasComponent11, removeComponent as removeComponent2 } from "@woven-ecs/core";
+import { createEntity as createEntity4, defineQuery as defineQuery9, hasComponent as hasComponent12, removeComponent as removeComponent2 } from "@woven-ecs/core";
 import { and, assign as assign3, not as not2, raise, setup as setup3 } from "xstate";
 var selectedBlocksQuery = defineQuery9((q) => q.with(Block).tracking(Selected));
 var transformBoxMachine = setup3({
@@ -3862,12 +3998,12 @@ var transformBoxMachine = setup3({
     isOverTransformBox: ({ event }) => {
       if (!("intersects" in event)) return false;
       if (event.intersects.length === 0) return false;
-      return hasComponent11(event.ctx, event.intersects[0], TransformBox);
+      return hasComponent12(event.ctx, event.intersects[0], TransformBox);
     },
     isOverTransformHandle: ({ event }) => {
       if (!("intersects" in event)) return false;
       if (event.intersects.length === 0) return false;
-      return hasComponent11(event.ctx, event.intersects[0], TransformHandle);
+      return hasComponent12(event.ctx, event.intersects[0], TransformHandle);
     },
     selectionIsTransformable: ({ event }) => {
       if (event.type !== "selectionChanged") return false;
@@ -3879,7 +4015,7 @@ var transformBoxMachine = setup3({
     hasEditAfterPlacing: ({ event }) => {
       if (event.type !== "selectionChanged") return false;
       if (event.selectedEntityIds.length !== 1) return false;
-      return hasComponent11(event.ctx, event.selectedEntityIds[0], EditAfterPlacing);
+      return hasComponent12(event.ctx, event.selectedEntityIds[0], EditAfterPlacing);
     }
   },
   actions: {
@@ -3889,7 +4025,7 @@ var transformBoxMachine = setup3({
           transformBoxId: context.transformBoxId
         });
       }
-      const transformBoxId = createEntity3(event.ctx);
+      const transformBoxId = createEntity4(event.ctx);
       AddTransformBox.spawn(event.ctx, {
         transformBoxId,
         skipHandles: params?.skipHandles
@@ -3932,7 +4068,7 @@ var transformBoxMachine = setup3({
     removeEditAfterPlacing: ({ event }) => {
       if (event.type !== "selectionChanged") return;
       for (const entityId of event.selectedEntityIds) {
-        if (hasComponent11(event.ctx, entityId, EditAfterPlacing)) {
+        if (hasComponent12(event.ctx, entityId, EditAfterPlacing)) {
           removeComponent2(event.ctx, entityId, EditAfterPlacing);
         }
       }
@@ -4227,7 +4363,7 @@ function normalizeWheelDelta(deltaY, deltaMode) {
 }
 
 // src/systems/input/pointerSystem.ts
-import { addComponent as addComponent4, createEntity as createEntity4, getResources as getResources9, removeEntity as removeEntity3 } from "@woven-ecs/core";
+import { addComponent as addComponent5, createEntity as createEntity5, getResources as getResources9, removeEntity as removeEntity3 } from "@woven-ecs/core";
 var instanceState3 = /* @__PURE__ */ new WeakMap();
 function attachPointerListeners(domElement) {
   if (instanceState3.has(domElement)) return;
@@ -4334,8 +4470,8 @@ var pointerSystem = defineEditorSystem({ phase: "input" }, (ctx) => {
     switch (event.type) {
       case "pointerdown": {
         const position = [event.clientX - screen.left, event.clientY - screen.top];
-        const entityId = createEntity4(ctx);
-        addComponent4(ctx, entityId, Pointer, {
+        const entityId = createEntity5(ctx);
+        addComponent5(ctx, entityId, Pointer, {
           pointerId: event.pointerId,
           position,
           downPosition: position,
@@ -4497,11 +4633,11 @@ function updateUserPosition(ctx, position) {
 // src/systems/postUpdate/transformBoxSystem.ts
 import { Rect as Rect2, Vec2 as Vec23 } from "@woven-canvas/math";
 import {
-  addComponent as addComponent5,
-  createEntity as createEntity5,
+  addComponent as addComponent6,
+  createEntity as createEntity6,
   defineQuery as defineQuery12,
   getBackrefs as getBackrefs2,
-  hasComponent as hasComponent12,
+  hasComponent as hasComponent13,
   isAlive,
   removeComponent as removeComponent3,
   removeEntity as removeEntity4
@@ -4534,7 +4670,7 @@ var transformBoxSystem2 = defineEditorSystem({ phase: "update", priority: -100 }
   on(ctx, EndTransformBoxEdit, endTransformBoxEdit);
 });
 function removeTransformBox(ctx, transformBoxId) {
-  if (!hasComponent12(ctx, transformBoxId, TransformBox)) {
+  if (!hasComponent13(ctx, transformBoxId, TransformBox)) {
     endTransformBoxEdit(ctx);
     return;
   }
@@ -4546,15 +4682,15 @@ function removeTransformBox(ctx, transformBoxId) {
   endTransformBoxEdit(ctx);
 }
 function addTransformBox(ctx, transformBoxId, skipHandles) {
-  addComponent5(ctx, transformBoxId, Block, {
+  addComponent6(ctx, transformBoxId, Block, {
     tag: "transform-box",
     position: [0, 0],
     size: [0, 0],
     rotateZ: 0,
     rank: TRANSFORM_BOX_RANK
   });
-  addComponent5(ctx, transformBoxId, TransformBox, {});
-  addComponent5(ctx, transformBoxId, DragStart, {
+  addComponent6(ctx, transformBoxId, TransformBox, {});
+  addComponent6(ctx, transformBoxId, DragStart, {
     position: [0, 0],
     size: [0, 0],
     rotateZ: 0,
@@ -4591,7 +4727,7 @@ function updateTransformBox(ctx, transformBoxId) {
   const selectionState = SelectionStateSingleton.read(ctx);
   const isDragging = selectionState.state === SelectionState.Dragging;
   if (!isDragging) {
-    if (hasComponent12(ctx, transformBoxId, DragStart)) {
+    if (hasComponent13(ctx, transformBoxId, DragStart)) {
       const dragStart = DragStart.write(ctx, transformBoxId);
       dragStart.position = boxBlock.position;
       dragStart.size = boxBlock.size;
@@ -4600,9 +4736,9 @@ function updateTransformBox(ctx, transformBoxId) {
     for (const entityId of selectedBlocks) {
       const block = Block.read(ctx, entityId);
       const worldPos = Block.getWorldPosition(ctx, entityId);
-      const fontSize = hasComponent12(ctx, entityId, Text) ? Text.read(ctx, entityId).fontSizePx : 16;
-      if (!hasComponent12(ctx, entityId, DragStart)) {
-        addComponent5(ctx, entityId, DragStart, {
+      const fontSize = hasComponent13(ctx, entityId, Text) ? Text.read(ctx, entityId).fontSizePx : 16;
+      if (!hasComponent13(ctx, entityId, DragStart)) {
+        addComponent6(ctx, entityId, DragStart, {
           position: worldPos,
           size: block.size,
           rotateZ: block.rotateZ,
@@ -4784,11 +4920,11 @@ function addOrUpdateTransformHandles(ctx, transformBoxId) {
     const finalLeft = rotatedCenter[0] - def.width / 2;
     const finalTop = rotatedCenter[1] - def.height / 2;
     if (!handleId) {
-      handleId = createEntity5(ctx);
-      addComponent5(ctx, handleId, Block);
-      addComponent5(ctx, handleId, TransformHandle);
-      addComponent5(ctx, handleId, DragStart);
-      addComponent5(ctx, handleId, ScaleWithZoom);
+      handleId = createEntity6(ctx);
+      addComponent6(ctx, handleId, Block);
+      addComponent6(ctx, handleId, TransformHandle);
+      addComponent6(ctx, handleId, DragStart);
+      addComponent6(ctx, handleId, ScaleWithZoom);
     }
     const block = Block.write(ctx, handleId);
     block.tag = def.tag;
@@ -4869,11 +5005,11 @@ function addTapeHandles(ctx, transformBoxId, left, top, width, height, rotateZ,
     const finalLeft = rotatedCenter[0] - def.width / 2;
     const finalTop = rotatedCenter[1] - def.height / 2;
     if (!handleId) {
-      handleId = createEntity5(ctx);
-      addComponent5(ctx, handleId, Block);
-      addComponent5(ctx, handleId, TransformHandle);
-      addComponent5(ctx, handleId, DragStart);
-      addComponent5(ctx, handleId, ScaleWithZoom);
+      handleId = createEntity6(ctx);
+      addComponent6(ctx, handleId, Block);
+      addComponent6(ctx, handleId, TransformHandle);
+      addComponent6(ctx, handleId, DragStart);
+      addComponent6(ctx, handleId, ScaleWithZoom);
     }
     const block = Block.write(ctx, handleId);
     block.tag = def.tag;
@@ -4905,9 +5041,9 @@ function addTapeHandles(ctx, transformBoxId, left, top, width, height, rotateZ,
   }
 }
 function hideTransformBox(ctx, transformBoxId) {
-  if (!hasComponent12(ctx, transformBoxId, TransformBox)) return;
-  if (!hasComponent12(ctx, transformBoxId, Opacity)) {
-    addComponent5(ctx, transformBoxId, Opacity, { value: 0 });
+  if (!hasComponent13(ctx, transformBoxId, TransformBox)) return;
+  if (!hasComponent13(ctx, transformBoxId, Opacity)) {
+    addComponent6(ctx, transformBoxId, Opacity, { value: 0 });
   } else {
     const opacity = Opacity.write(ctx, transformBoxId);
     opacity.value = 0;
@@ -4915,8 +5051,8 @@ function hideTransformBox(ctx, transformBoxId) {
   const handles = getBackrefs2(ctx, transformBoxId, TransformHandle, "transformBox");
   for (const handleId of handles) {
     if (!isAlive(ctx, handleId)) continue;
-    if (!hasComponent12(ctx, handleId, Opacity)) {
-      addComponent5(ctx, handleId, Opacity, { value: 0 });
+    if (!hasComponent13(ctx, handleId, Opacity)) {
+      addComponent6(ctx, handleId, Opacity, { value: 0 });
     } else {
       const opacity = Opacity.write(ctx, handleId);
       opacity.value = 0;
@@ -4924,40 +5060,40 @@ function hideTransformBox(ctx, transformBoxId) {
   }
 }
 function showTransformBox(ctx, transformBoxId) {
-  if (!hasComponent12(ctx, transformBoxId, TransformBox)) return;
+  if (!hasComponent13(ctx, transformBoxId, TransformBox)) return;
   const selectedBlocks = selectedBlocksQuery2.current(ctx);
   if (selectedBlocks.length === 0) return;
   if (selectedBlocks.length === 1) {
     if (getBlockResizeMode(ctx, selectedBlocks[0]) === ResizeMode.GroupOnly) return;
   }
-  if (hasComponent12(ctx, transformBoxId, Opacity)) {
+  if (hasComponent13(ctx, transformBoxId, Opacity)) {
     removeComponent3(ctx, transformBoxId, Opacity);
   }
   const handles = getBackrefs2(ctx, transformBoxId, TransformHandle, "transformBox");
   for (const handleId of handles) {
     if (!isAlive(ctx, handleId)) continue;
-    if (hasComponent12(ctx, handleId, Opacity)) {
+    if (hasComponent13(ctx, handleId, Opacity)) {
       removeComponent3(ctx, handleId, Opacity);
     }
   }
   updateTransformBox(ctx, transformBoxId);
 }
 function startTransformBoxEdit(ctx, transformBoxId) {
-  if (hasComponent12(ctx, transformBoxId, TransformBox)) {
+  if (hasComponent13(ctx, transformBoxId, TransformBox)) {
     const handles = getBackrefs2(ctx, transformBoxId, TransformHandle, "transformBox");
     for (const handleId of handles) {
       removeEntity4(ctx, handleId);
     }
   }
   for (const blockId of selectedBlocksQuery2.current(ctx)) {
-    if (!hasComponent12(ctx, blockId, Edited)) {
-      addComponent5(ctx, blockId, Edited, {});
+    if (!hasComponent13(ctx, blockId, Edited)) {
+      addComponent6(ctx, blockId, Edited, {});
     }
   }
 }
 function endTransformBoxEdit(ctx) {
   for (const blockId of editedBlocksQuery.current(ctx)) {
-    if (hasComponent12(ctx, blockId, Edited)) {
+    if (hasComponent13(ctx, blockId, Edited)) {
       removeComponent3(ctx, blockId, Edited);
     }
   }
@@ -4965,11 +5101,11 @@ function endTransformBoxEdit(ctx) {
 
 // src/systems/preCapture/intersectSystem.ts
 import {
-  addComponent as addComponent6,
+  addComponent as addComponent7,
   defineQuery as defineQuery13,
   getBackrefs as getBackrefs3,
   getResources as getResources12,
-  hasComponent as hasComponent13,
+  hasComponent as hasComponent14,
   removeComponent as removeComponent4
 } from "@woven-ecs/core";
 var blocksChanged = defineQuery13((q) => q.tracking(Block));
@@ -4979,7 +5115,7 @@ var hoveredQuery = defineQuery13((q) => q.with(Hovered));
 var pointerQuery3 = defineQuery13((q) => q.with(Pointer));
 function clearHovered(ctx) {
   for (const entityId of hoveredQuery.current(ctx)) {
-    if (hasComponent13(ctx, entityId, Hovered)) {
+    if (hasComponent14(ctx, entityId, Hovered)) {
       removeComponent4(ctx, entityId, Hovered);
     }
   }
@@ -4987,7 +5123,7 @@ function clearHovered(ctx) {
 function findValidHoverTarget(ctx, intersected) {
   for (const entityId of intersected) {
     if (isHeldByRemote(ctx, entityId)) return void 0;
-    if (hasComponent13(ctx, entityId, Block)) {
+    if (hasComponent14(ctx, entityId, Block)) {
       const block = Block.read(ctx, entityId);
       if (!canBlockInteract(ctx, block.tag)) continue;
     }
@@ -5002,7 +5138,7 @@ function updateHovered(ctx, intersected) {
   if (!selectToolActive) return;
   const newHoveredId = findValidHoverTarget(ctx, intersected);
   if (newHoveredId !== void 0) {
-    addComponent6(ctx, newHoveredId, Hovered, {});
+    addComponent7(ctx, newHoveredId, Hovered, {});
   }
 }
 function arraysEqual(a, b) {
@@ -5041,14 +5177,14 @@ var intersectSystem = defineEditorSystem({ phase: "capture", priority: 100 }, (c
     addDescendants(ctx, entityId, changed);
   }
   for (const entityId of added) {
-    if (!hasComponent13(ctx, entityId, Aabb)) {
-      addComponent6(ctx, entityId, Aabb, { value: [0, 0, 0, 0] });
+    if (!hasComponent14(ctx, entityId, Aabb)) {
+      addComponent7(ctx, entityId, Aabb, { value: [0, 0, 0, 0] });
     }
     const aabb = Aabb.write(ctx, entityId);
     computeAabb(ctx, entityId, aabb.value);
   }
   for (const entityId of changed) {
-    if (!hasComponent13(ctx, entityId, Aabb)) continue;
+    if (!hasComponent14(ctx, entityId, Aabb)) continue;
     const aabb = Aabb.write(ctx, entityId);
     computeAabb(ctx, entityId, aabb.value);
   }
@@ -5097,12 +5233,21 @@ var intersectSystem = defineEditorSystem({ phase: "capture", priority: 100 }, (c
 
 // src/systems/preCapture/selectSystem.ts
 import { Vec2 as Vec2Ns } from "@woven-canvas/math";
-import { Synced as Synced3 } from "@woven-ecs/canvas-store";
-import { defineQuery as defineQuery14, hasComponent as hasComponent14 } from "@woven-ecs/core";
+import { Synced as Synced4 } from "@woven-ecs/canvas-store";
+import { defineQuery as defineQuery14, hasComponent as hasComponent15 } from "@woven-ecs/core";
 import { and as and2, assign as assign4, not as not3, setup as setup4 } from "xstate";
 var POINTING_THRESHOLD = 4;
-var selectedBlocksQuery3 = defineQuery14((q) => q.with(Block, Selected, Synced3));
+var selectedBlocksQuery3 = defineQuery14((q) => q.with(Block, Selected, Synced4));
 var editedBlocksQuery2 = defineQuery14((q) => q.with(Block, Edited));
+function isDragSnappable(ctx, draggedEntity) {
+  if (hasComponent15(ctx, draggedEntity, TransformBox)) {
+    for (const blockId of selectedBlocksQuery3.current(ctx)) {
+      if (canBlockSnap(ctx, Block.read(ctx, blockId).tag)) return true;
+    }
+    return false;
+  }
+  return canBlockSnap(ctx, Block.read(ctx, draggedEntity).tag);
+}
 var selectionMachine = setup4({
   types: {
     context: {},
@@ -5118,13 +5263,13 @@ var selectionMachine = setup4({
     },
     hasDraggedEntity: ({ context, event }) => {
       if (context.draggedEntity === null) return false;
-      return hasComponent14(event.ctx, context.draggedEntity, Synced3);
+      return hasComponent15(event.ctx, context.draggedEntity, Synced4);
     },
     isOverSyncedBlock: ({ event }) => {
       const ctx = event.ctx;
       for (const entityId of event.intersects) {
-        if (hasComponent14(ctx, entityId, Synced3)) {
-          if (hasComponent14(ctx, entityId, Block)) {
+        if (hasComponent15(ctx, entityId, Synced4)) {
+          if (hasComponent15(ctx, entityId, Block)) {
             const block = Block.read(ctx, entityId);
             if (!canBlockInteract(ctx, block.tag)) continue;
           }
@@ -5161,7 +5306,7 @@ var selectionMachine = setup4({
     },
     setDragCursor: ({ event, context }) => {
       if (!context.draggedEntity) return;
-      if (hasComponent14(event.ctx, context.draggedEntity, TransformHandle)) {
+      if (hasComponent15(event.ctx, context.draggedEntity, TransformHandle)) {
         const handle = TransformHandle.read(event.ctx, context.draggedEntity);
         const transformBoxBlock = handle.transformBox !== null ? Block.read(event.ctx, handle.transformBox) : void 0;
         SetCursor.spawn(event.ctx, {
@@ -5221,7 +5366,7 @@ var selectionMachine = setup4({
         if (context.draggedEntity === null) return false;
         let left = context.draggedEntityStart[0] + event.worldPosition[0] - context.dragStart[0];
         let top = context.draggedEntityStart[1] + event.worldPosition[1] - context.dragStart[1];
-        const draggingSynced = hasComponent14(ctx, context.draggedEntity, Synced3) || hasComponent14(ctx, context.draggedEntity, TransformBox);
+        const draggingSynced = hasComponent15(ctx, context.draggedEntity, Synced4) || hasComponent15(ctx, context.draggedEntity, TransformBox);
         if (event.shiftDown && draggingSynced) {
           const dx = Math.abs(event.worldPosition[0] - context.dragStart[0]);
           const dy = Math.abs(event.worldPosition[1] - context.dragStart[1]);
@@ -5231,7 +5376,7 @@ var selectionMachine = setup4({
             left = context.draggedEntityStart[0];
           }
         }
-        if (draggingSynced) {
+        if (draggingSynced && isDragSnappable(ctx, context.draggedEntity)) {
           left = Grid.snapX(ctx, left);
           top = Grid.snapY(ctx, top);
         }
@@ -5244,7 +5389,7 @@ var selectionMachine = setup4({
           const dx = context.draggedEntityStart[0] - left;
           const dy = context.draggedEntityStart[1] - top;
           isCloning = true;
-          const isTransformBox = hasComponent14(ctx, context.draggedEntity, TransformBox);
+          const isTransformBox = hasComponent15(ctx, context.draggedEntity, TransformBox);
           const entityIds = isTransformBox ? Array.from(selectedBlocksQuery3.current(ctx)) : [context.draggedEntity];
           CloneEntities.spawn(ctx, {
             entityIds,
@@ -5252,7 +5397,7 @@ var selectionMachine = setup4({
             seed: context.cloneGeneratorSeed
           });
         } else if (!event.altDown && context.isCloning) {
-          const isTransformBox = hasComponent14(ctx, context.draggedEntity, TransformBox);
+          const isTransformBox = hasComponent15(ctx, context.draggedEntity, TransformBox);
           const entityIds = isTransformBox ? Array.from(selectedBlocksQuery3.current(ctx)) : [context.draggedEntity];
           UncloneEntities.spawn(ctx, {
             entityIds,
@@ -5277,8 +5422,8 @@ var selectionMachine = setup4({
       const ctx = event.ctx;
       let intersectId;
       for (const entityId of event.intersects) {
-        if (hasComponent14(ctx, entityId, Synced3)) {
-          if (hasComponent14(ctx, entityId, Block)) {
+        if (hasComponent15(ctx, entityId, Synced4)) {
+          if (hasComponent15(ctx, entityId, Block)) {
             const block = Block.read(ctx, entityId);
             if (!canBlockInteract(ctx, block.tag)) continue;
           }
@@ -5298,7 +5443,7 @@ var selectionMachine = setup4({
     },
     selectDragged: ({ context, event }) => {
       if (context.draggedEntity === null) return;
-      if (!hasComponent14(event.ctx, context.draggedEntity, Synced3)) return;
+      if (!hasComponent15(event.ctx, context.draggedEntity, Synced4)) return;
       SelectBlock.spawn(event.ctx, {
         entityId: context.draggedEntity,
         deselectOthers: true
@@ -5310,9 +5455,9 @@ var selectionMachine = setup4({
     },
     deselectAllIfDraggedNotSelected: ({ context, event }) => {
       if (context.draggedEntity === null) return;
-      if (hasComponent14(event.ctx, context.draggedEntity, Selected)) return;
-      if (hasComponent14(event.ctx, context.draggedEntity, TransformBox)) return;
-      if (hasComponent14(event.ctx, context.draggedEntity, TransformHandle)) return;
+      if (hasComponent15(event.ctx, context.draggedEntity, Selected)) return;
+      if (hasComponent15(event.ctx, context.draggedEntity, TransformBox)) return;
+      if (hasComponent15(event.ctx, context.draggedEntity, TransformHandle)) return;
       DeselectAll.spawn(event.ctx, void 0);
     }
   }
@@ -5436,9 +5581,9 @@ var selectSystem = defineEditorSystem({ phase: "capture", priority: 100 }, (ctx)
 });
 
 // src/systems/preInput/rankBoundsSystem.ts
-import { Synced as Synced4 } from "@woven-ecs/canvas-store";
+import { Synced as Synced5 } from "@woven-ecs/canvas-store";
 import { defineQuery as defineQuery15 } from "@woven-ecs/core";
-var blocksQuery = defineQuery15((q) => q.with(Synced4, Block));
+var blocksQuery = defineQuery15((q) => q.with(Synced5, Block));
 var rankBoundsSystem = defineEditorSystem({ phase: "input", priority: 100 }, (ctx) => {
   const added2 = blocksQuery.added(ctx);
   for (const entityId of added2) {
@@ -5455,11 +5600,11 @@ var rankBoundsSystem = defineEditorSystem({ phase: "input", priority: 100 }, (ct
 
 // src/systems/preRender/canSeeBlocksSystem.ts
 import { Aabb as AabbMath2 } from "@woven-canvas/math";
-import { Synced as Synced5 } from "@woven-ecs/canvas-store";
-import { defineQuery as defineQuery16, hasComponent as hasComponent15 } from "@woven-ecs/core";
+import { Synced as Synced6 } from "@woven-ecs/canvas-store";
+import { defineQuery as defineQuery16, hasComponent as hasComponent16 } from "@woven-ecs/core";
 var camerasQuery = defineQuery16((q) => q.tracking(Camera));
-var blocksQuery2 = defineQuery16((q) => q.with(Synced5, Block, Aabb));
-var syncedBlocksQuery = defineQuery16((q) => q.with(Synced5, Block, Aabb));
+var blocksQuery2 = defineQuery16((q) => q.with(Synced6, Block, Aabb));
+var syncedBlocksQuery = defineQuery16((q) => q.with(Synced6, Block, Aabb));
 var _cameraAabb = [0, 0, 0, 0];
 var canSeeBlocksSystem = defineEditorSystem({ phase: "render", priority: 90 }, (ctx) => {
   if (camerasQuery.changed(ctx).length === 0 && syncedBlocksQuery.addedOrRemoved(ctx).length === 0) {
@@ -5468,7 +5613,7 @@ var canSeeBlocksSystem = defineEditorSystem({ phase: "render", priority: 90 }, (
   const camera = Camera.read(ctx);
   const cameraAabb = Camera.getAabb(ctx, _cameraAabb);
   if (camera.canSeeBlocks && camera.lastSeenBlock !== null) {
-    if (hasComponent15(ctx, camera.lastSeenBlock, Aabb)) {
+    if (hasComponent16(ctx, camera.lastSeenBlock, Aabb)) {
       const aabb = Aabb.read(ctx, camera.lastSeenBlock);
       if (AabbMath2.intersects(cameraAabb, aabb.value)) {
         return;
@@ -5542,23 +5687,23 @@ function scaleBlock(ctx, entityId, zoom) {
 
 // src/systems/update/blockSystem.ts
 import { Vec2 as Vec25 } from "@woven-canvas/math";
-import { Synced as Synced6 } from "@woven-ecs/canvas-store";
+import { Synced as Synced7 } from "@woven-ecs/canvas-store";
 import {
-  addComponent as addComponent7,
-  createEntity as createEntity6,
+  addComponent as addComponent8,
+  createEntity as createEntity7,
   defineQuery as defineQuery18,
   getBackrefs as getBackrefs4,
   getResources as getResources13,
-  hasComponent as hasComponent16,
+  hasComponent as hasComponent17,
   isAlive as isAlive2,
   removeComponent as removeComponent5,
   removeEntity as removeEntity5
 } from "@woven-ecs/core";
 var selectedBlocksQuery4 = defineQuery18((q) => q.with(Block, Selected));
-var syncedBlocksQuery2 = defineQuery18((q) => q.with(Block, Synced6));
+var syncedBlocksQuery2 = defineQuery18((q) => q.with(Block, Synced7));
 var blockSystem = defineEditorSystem({ phase: "update" }, (ctx) => {
   on(ctx, DragBlock, (ctx2, { entityId, position }) => {
-    if (!hasComponent16(ctx2, entityId, Block)) return;
+    if (!hasComponent17(ctx2, entityId, Block)) return;
     Block.setWorldPosition(ctx2, entityId, position);
   });
   on(ctx, SelectBlock, (ctx2, { entityId, deselectOthers }) => {
@@ -5571,7 +5716,7 @@ var blockSystem = defineEditorSystem({ phase: "update" }, (ctx) => {
     deselectBlock(ctx2, entityId);
   });
   on(ctx, ToggleSelect, (ctx2, { entityId }) => {
-    if (hasComponent16(ctx2, entityId, Selected)) {
+    if (hasComponent17(ctx2, entityId, Selected)) {
       deselectBlock(ctx2, entityId);
     } else {
       selectBlock(ctx2, entityId);
@@ -5579,14 +5724,14 @@ var blockSystem = defineEditorSystem({ phase: "update" }, (ctx) => {
   });
   on(ctx, DeselectAll, deselectAllBlocks);
   on(ctx, AddHeld, (ctx2, { entityId }) => {
-    if (!hasComponent16(ctx2, entityId, Synced6)) return;
-    if (hasComponent16(ctx2, entityId, Held)) return;
+    if (!hasComponent17(ctx2, entityId, Synced7)) return;
+    if (hasComponent17(ctx2, entityId, Held)) return;
     const { sessionId } = getResources13(ctx2);
-    addComponent7(ctx2, entityId, Held, { sessionId });
+    addComponent8(ctx2, entityId, Held, { sessionId });
   });
   on(ctx, RemoveHeld, (ctx2, { entityId }) => {
-    if (hasComponent16(ctx2, entityId, Selected)) return;
-    if (!hasComponent16(ctx2, entityId, Held)) return;
+    if (hasComponent17(ctx2, entityId, Selected)) return;
+    if (!hasComponent17(ctx2, entityId, Held)) return;
     removeComponent5(ctx2, entityId, Held);
   });
   on(ctx, SelectAll, (ctx2) => {
@@ -5676,10 +5821,10 @@ function cloneEntities(ctx, entityIds, offset, seed) {
   entityIds = [...allEntityIdsSet];
   const { componentsById } = getResources13(ctx);
   const documentComponents = new Map([...componentsById].filter(([, def]) => def.sync === "document"));
-  const syncedComponentId = Synced6._getComponentId(ctx);
+  const syncedComponentId = Synced7._getComponentId(ctx);
   const blockComponentId = Block._getComponentId(ctx);
   const entityIdSet = new Set(entityIds);
-  const sortedEntities = entityIds.filter((id) => hasComponent16(ctx, id, Block)).sort((a, b) => {
+  const sortedEntities = entityIds.filter((id) => hasComponent17(ctx, id, Block)).sort((a, b) => {
     const rankA = Block.read(ctx, a).rank;
     const rankB = Block.read(ctx, b).rank;
     return rankA < rankB ? -1 : rankA > rankB ? 1 : 0;
@@ -5703,12 +5848,12 @@ function cloneEntities(ctx, entityIds, offset, seed) {
   }
   const originalToClone = /* @__PURE__ */ new Map();
   for (const entityId of entityIds) {
-    if (!hasComponent16(ctx, entityId, Synced6)) continue;
-    const synced = Synced6.read(ctx, entityId);
+    if (!hasComponent17(ctx, entityId, Synced7)) continue;
+    const synced = Synced7.read(ctx, entityId);
     const cloneId = generateUuidBySeed(synced.id, seed);
-    const cloneEntityId = createEntity6(ctx);
+    const cloneEntityId = createEntity7(ctx);
     originalToClone.set(entityId, cloneEntityId);
-    addComponent7(ctx, cloneEntityId, Synced6, { id: cloneId });
+    addComponent8(ctx, cloneEntityId, Synced7, { id: cloneId });
     for (const componentId of ctx.entityBuffer.getComponentIds(entityId)) {
       if (componentId === syncedComponentId) continue;
       const componentDef = documentComponents.get(componentId);
@@ -5724,7 +5869,7 @@ function cloneEntities(ctx, entityIds, offset, seed) {
         }
         data.rank = cloneRankMap.get(entityId) ?? RankBounds.genBetween(prevRank, lowestOriginalRank);
       }
-      addComponent7(ctx, cloneEntityId, componentDef, data);
+      addComponent8(ctx, cloneEntityId, componentDef, data);
     }
   }
   swapConnectorRefs(ctx, originalToClone);
@@ -5740,23 +5885,23 @@ function uncloneEntities(ctx, entityIds, seed) {
   entityIds = [...allEntityIdsSet];
   const expectedCloneUuids = /* @__PURE__ */ new Set();
   for (const entityId of entityIds) {
-    if (!hasComponent16(ctx, entityId, Synced6)) continue;
-    const synced = Synced6.read(ctx, entityId);
+    if (!hasComponent17(ctx, entityId, Synced7)) continue;
+    const synced = Synced7.read(ctx, entityId);
     expectedCloneUuids.add(generateUuidBySeed(synced.id, seed));
   }
   const clonesToRemove = [];
   for (const entityId of syncedBlocksQuery2.current(ctx)) {
-    const synced = Synced6.read(ctx, entityId);
+    const synced = Synced7.read(ctx, entityId);
     if (expectedCloneUuids.has(synced.id)) {
       clonesToRemove.push(entityId);
     }
   }
   const cloneToOriginal = /* @__PURE__ */ new Map();
   for (const cloneId of clonesToRemove) {
-    const cloneUuid = Synced6.read(ctx, cloneId).id;
+    const cloneUuid = Synced7.read(ctx, cloneId).id;
     for (const originalId of entityIds) {
-      if (!hasComponent16(ctx, originalId, Synced6)) continue;
-      const originalUuid = Synced6.read(ctx, originalId).id;
+      if (!hasComponent17(ctx, originalId, Synced7)) continue;
+      const originalUuid = Synced7.read(ctx, originalId).id;
       if (generateUuidBySeed(originalUuid, seed) === cloneUuid) {
         cloneToOriginal.set(cloneId, originalId);
         break;
@@ -5783,7 +5928,7 @@ function swapConnectorRefs(ctx, fromTo) {
 function swapParentRefs(ctx, fromTo) {
   for (const [, cloneId] of fromTo) {
     if (!isAlive2(ctx, cloneId)) continue;
-    if (!hasComponent16(ctx, cloneId, Block)) continue;
+    if (!hasComponent17(ctx, cloneId, Block)) continue;
     const block = Block.read(ctx, cloneId);
     if (block.parentId !== null && fromTo.has(block.parentId)) {
       Block.write(ctx, cloneId).parentId = fromTo.get(block.parentId);
@@ -5793,20 +5938,27 @@ function swapParentRefs(ctx, fromTo) {
 
 // src/systems/update/dragHandlerSystem.ts
 import { Scalar as Scalar2, Vec2 as Vec26 } from "@woven-canvas/math";
-import { defineQuery as defineQuery19, hasComponent as hasComponent17 } from "@woven-ecs/core";
+import { defineQuery as defineQuery19, hasComponent as hasComponent18 } from "@woven-ecs/core";
 var selectedBlocksQuery5 = defineQuery19((q) => q.with(Block, Selected));
 var transformBoxQuery2 = defineQuery19((q) => q.with(Block, TransformBox, DragStart));
 function isParentSelected(ctx, blockId) {
   const block = Block.read(ctx, blockId);
-  return block.parentId !== null && hasComponent17(ctx, block.parentId, Selected);
+  return block.parentId !== null && hasComponent18(ctx, block.parentId, Selected);
+}
+function isSelectionSnappable(ctx) {
+  for (const blockId of selectedBlocksQuery5.current(ctx)) {
+    if (isParentSelected(ctx, blockId)) continue;
+    if (canBlockSnap(ctx, Block.read(ctx, blockId).tag)) return true;
+  }
+  return false;
 }
 var dragHandlerSystem = defineEditorSystem({ phase: "update" }, (ctx) => {
   on(ctx, DragBlock, (ctx2, { entityId, position }) => {
-    if (hasComponent17(ctx2, entityId, TransformBox)) {
+    if (hasComponent18(ctx2, entityId, TransformBox)) {
       onTransformBoxDrag(ctx2, entityId, position);
       return;
     }
-    if (hasComponent17(ctx2, entityId, TransformHandle)) {
+    if (hasComponent18(ctx2, entityId, TransformHandle)) {
       onTransformHandleDrag(ctx2, entityId, position);
       return;
     }
@@ -5817,11 +5969,13 @@ function onTransformBoxDrag(ctx, boxId, position) {
   const dx = position[0] - boxStart.position[0];
   const dy = position[1] - boxStart.position[1];
   for (const blockId of selectedBlocksQuery5.current(ctx)) {
-    if (!hasComponent17(ctx, blockId, DragStart)) continue;
+    if (!hasComponent18(ctx, blockId, DragStart)) continue;
     if (isParentSelected(ctx, blockId)) continue;
     const blockStart = DragStart.read(ctx, blockId);
     const worldPos = [blockStart.position[0] + dx, blockStart.position[1] + dy];
-    Grid.snapPosition(ctx, worldPos);
+    if (canBlockSnap(ctx, Block.read(ctx, blockId).tag)) {
+      Grid.snapPosition(ctx, worldPos);
+    }
     Block.setWorldPosition(ctx, blockId, worldPos);
   }
 }
@@ -5855,10 +6009,11 @@ function onRotateHandleDrag(ctx, handleId, position) {
   let delta = angleHandle - handleStartAngle;
   const grid = Grid.read(ctx);
   const keyboard = Keyboard.read(ctx);
+  const selectionSnappable = isSelectionSnappable(ctx);
   let snapAngle = 0;
   if (keyboard.shiftDown) {
     snapAngle = grid.shiftSnapAngleRad;
-  } else if (grid.enabled) {
+  } else if (grid.enabled && selectionSnappable) {
     snapAngle = grid.snapAngleRad;
   }
   if (snapAngle > 0) {
@@ -5867,7 +6022,7 @@ function onRotateHandleDrag(ctx, handleId, position) {
   }
   boxBlock.rotateZ = Scalar2.normalizeAngle(dragStart.rotateZ + delta);
   for (const blockId of selectedBlocksQuery5.current(ctx)) {
-    if (!hasComponent17(ctx, blockId, DragStart)) continue;
+    if (!hasComponent18(ctx, blockId, DragStart)) continue;
     if (isParentSelected(ctx, blockId)) continue;
     const blockStart = DragStart.read(ctx, blockId);
     const block = Block.write(ctx, blockId);
@@ -5880,7 +6035,7 @@ function onRotateHandleDrag(ctx, handleId, position) {
     const angle = Vec26.angleTo(boxCenter, startCenter) + delta;
     const newCenter = Vec26.fromPolar(r, angle, boxCenter);
     const worldPos = [newCenter[0] - block.size[0] / 2, newCenter[1] - block.size[1] / 2];
-    if (grid.strict) {
+    if (grid.strict && canBlockSnap(ctx, block.tag)) {
       Grid.snapPosition(ctx, worldPos);
     }
     Block.setWorldPosition(ctx, blockId, worldPos);
@@ -5897,7 +6052,10 @@ function onScaleHandleDrag(ctx, handleId, position, maintainAspectRatio) {
   const handle = TransformHandle.read(ctx, handleId);
   const handleBlock = Block.read(ctx, handleId);
   const handleCenter = [position[0] + handleBlock.size[0] / 2, position[1] + handleBlock.size[1] / 2];
-  Grid.snapPosition(ctx, handleCenter);
+  const selectionSnappable = isSelectionSnappable(ctx);
+  if (selectionSnappable) {
+    Grid.snapPosition(ctx, handleCenter);
+  }
   const boxRotateZ = boxStart.rotateZ;
   const boxStartCenter = [
     boxStart.position[0] + boxStart.size[0] / 2,
@@ -5948,7 +6106,7 @@ function onScaleHandleDrag(ctx, handleId, position, maintainAspectRatio) {
   Vec26.add(newBoxCenter, vec);
   const scaleFactor = [scaleX, scaleY];
   for (const blockId of selectedBlocksQuery5.current(ctx)) {
-    if (!hasComponent17(ctx, blockId, DragStart)) continue;
+    if (!hasComponent18(ctx, blockId, DragStart)) continue;
     if (isParentSelected(ctx, blockId)) continue;
     const blockStart = DragStart.read(ctx, blockId);
     const block = Block.write(ctx, blockId);
@@ -5966,7 +6124,7 @@ function onScaleHandleDrag(ctx, handleId, position, maintainAspectRatio) {
     const newBlockSize = Vec26.clone(blockStart.size);
     Vec26.multiply(newBlockSize, scaleFactor);
     const isTextResize = getBlockResizeMode(ctx, blockId) === ResizeMode.Text;
-    if (grid.strict) {
+    if (grid.strict && canBlockSnap(ctx, block.tag)) {
       if (isTextResize && maintainAspectRatio) {
         newBlockSize[1] = Math.max(grid.rowHeight, Grid.snapY(ctx, newBlockSize[1]));
         const aspectRatio = blockStart.size[0] / blockStart.size[1];
@@ -5977,7 +6135,7 @@ function onScaleHandleDrag(ctx, handleId, position, maintainAspectRatio) {
     }
     const worldPos = Vec26.clone(newBlockCenter);
     Vec26.sub(worldPos, [newBlockSize[0] / 2, newBlockSize[1] / 2]);
-    if (grid.strict) {
+    if (grid.strict && canBlockSnap(ctx, block.tag)) {
       Grid.snapPosition(ctx, worldPos);
     }
     Block.setWorldPosition(ctx, blockId, worldPos);
@@ -5988,7 +6146,7 @@ function onScaleHandleDrag(ctx, handleId, position, maintainAspectRatio) {
     } else {
       Vec26.copy(block.size, newBlockSize);
     }
-    if (hasComponent17(ctx, blockId, Text)) {
+    if (hasComponent18(ctx, blockId, Text)) {
       const didStretch = handle.kind === TransformHandleKind.Stretch;
       const text = Text.write(ctx, blockId);
       if (didStretch) {
@@ -6026,10 +6184,11 @@ function onRotateScaleHandleDrag(ctx, handleId, position) {
   }
   const grid = Grid.read(ctx);
   const keyboard = Keyboard.read(ctx);
+  const selectionSnappable = isSelectionSnappable(ctx);
   let snapAngle = 0;
   if (keyboard.shiftDown) {
     snapAngle = grid.shiftSnapAngleRad;
-  } else if (grid.enabled) {
+  } else if (grid.enabled && selectionSnappable) {
     snapAngle = grid.snapAngleRad;
   }
   if (snapAngle > 0) {
@@ -6049,13 +6208,13 @@ function onRotateScaleHandleDrag(ctx, handleId, position) {
   boxBlock.size = [finalLength, startHeight];
   boxBlock.position = [newCenter[0] - finalLength / 2, newCenter[1] - startHeight / 2];
   for (const blockId of selectedBlocksQuery5.current(ctx)) {
-    if (!hasComponent17(ctx, blockId, DragStart)) continue;
+    if (!hasComponent18(ctx, blockId, DragStart)) continue;
     if (isParentSelected(ctx, blockId)) continue;
     const block = Block.write(ctx, blockId);
     block.rotateZ = newRotateZ;
     block.size = [finalLength, startHeight];
     const blockWorldPos = [newCenter[0] - finalLength / 2, newCenter[1] - startHeight / 2];
-    if (grid.strict) {
+    if (grid.strict && canBlockSnap(ctx, block.tag)) {
       Grid.snapPosition(ctx, blockWorldPos);
     }
     Block.setWorldPosition(ctx, blockId, blockWorldPos);
@@ -6063,23 +6222,23 @@ function onRotateScaleHandleDrag(ctx, handleId, position) {
 }
 
 // src/systems/update/selectSystem.ts
-import { Synced as Synced7 } from "@woven-ecs/canvas-store";
-import { addComponent as addComponent8, createEntity as createEntity7, defineQuery as defineQuery20, removeEntity as removeEntity6 } from "@woven-ecs/core";
+import { Synced as Synced8 } from "@woven-ecs/canvas-store";
+import { addComponent as addComponent9, createEntity as createEntity8, defineQuery as defineQuery20, removeEntity as removeEntity6 } from "@woven-ecs/core";
 var selectedBlocksQuery6 = defineQuery20((q) => q.with(Block, Selected));
 var selectionBoxQuery = defineQuery20((q) => q.with(Block, SelectionBox));
-var syncedBlocksQuery3 = defineQuery20((q) => q.with(Block, Synced7, Aabb));
+var syncedBlocksQuery3 = defineQuery20((q) => q.with(Block, Synced8, Aabb));
 var SELECTION_BOX_RANK = "z";
 var selectSystem2 = defineEditorSystem({ phase: "update" }, (ctx) => {
   on(ctx, AddSelectionBox, (ctx2) => {
-    const entityId = createEntity7(ctx2);
-    addComponent8(ctx2, entityId, Block, {
+    const entityId = createEntity8(ctx2);
+    addComponent9(ctx2, entityId, Block, {
       tag: "selection-box",
       position: [0, 0],
       size: [0, 0],
       rotateZ: 0,
       rank: SELECTION_BOX_RANK
     });
-    addComponent8(ctx2, entityId, SelectionBox, {});
+    addComponent9(ctx2, entityId, SelectionBox, {});
   });
   on(ctx, UpdateSelectionBox, (ctx2, { bounds, deselectOthers }) => {
     const selectionBoxes = selectionBoxQuery.current(ctx2);
@@ -6120,21 +6279,31 @@ var selectSystem2 = defineEditorSystem({ phase: "update" }, (ctx) => {
 });
 
 // src/systems/update/updateFrameContainmentSystem.ts
-import { addComponent as addComponent9, hasComponent as hasComponent18, removeComponent as removeComponent6 } from "@woven-ecs/core";
+import { addComponent as addComponent10, hasComponent as hasComponent19, removeComponent as removeComponent6 } from "@woven-ecs/core";
 var updateFrameContainmentSystem = defineEditorSystem({ phase: "update", priority: -10 }, (ctx) => {
   on(ctx, AddFrameHighlight, (ctx2, { frameId }) => {
-    if (!hasComponent18(ctx2, frameId, FrameDropTarget)) {
-      addComponent9(ctx2, frameId, FrameDropTarget);
+    if (!hasComponent19(ctx2, frameId, FrameDropTarget)) {
+      addComponent10(ctx2, frameId, FrameDropTarget);
     }
   });
+  on(ctx, PlaceBlockEvent, (ctx2, { entityId }) => {
+    if (!hasComponent19(ctx2, entityId, Block)) return;
+    if (Block.read(ctx2, entityId).parentId !== null) return;
+    const center = Block.getCenter(ctx2, entityId);
+    const frameId = findFrameAtPoint(ctx2, center, entityId);
+    if (frameId === null) return;
+    const worldPos = Block.getWorldPosition(ctx2, entityId);
+    Block.write(ctx2, entityId).parentId = frameId;
+    Block.setWorldPosition(ctx2, entityId, worldPos);
+  });
   on(ctx, RemoveFrameHighlight, (ctx2, { frameId }) => {
-    if (hasComponent18(ctx2, frameId, FrameDropTarget)) {
+    if (hasComponent19(ctx2, frameId, FrameDropTarget)) {
       removeComponent6(ctx2, frameId, FrameDropTarget);
     }
   });
   on(ctx, AssignFrameChildren, (ctx2, { assignments }) => {
     for (const { entityId, frameId } of assignments) {
-      if (!hasComponent18(ctx2, entityId, Block)) continue;
+      if (!hasComponent19(ctx2, entityId, Block)) continue;
       const currentParentId = Block.read(ctx2, entityId).parentId;
       if (frameId !== null) {
         if (currentParentId !== frameId) {
@@ -6156,12 +6325,12 @@ var updateFrameContainmentSystem = defineEditorSystem({ phase: "update", priorit
 });
 
 // src/systems/update/updateFrameSetupSystem.ts
-import { addComponent as addComponent10, defineQuery as defineQuery21, hasComponent as hasComponent19 } from "@woven-ecs/core";
+import { addComponent as addComponent11, defineQuery as defineQuery21, hasComponent as hasComponent20 } from "@woven-ecs/core";
 var frameQuery2 = defineQuery21((q) => q.tracking(Frame));
 var updateFrameSetupSystem = defineEditorSystem({ phase: "update", priority: 100 }, (ctx) => {
   for (const entityId of frameQuery2.added(ctx)) {
-    if (hasComponent19(ctx, entityId, HitGeometry)) continue;
-    addComponent10(ctx, entityId, HitGeometry);
+    if (hasComponent20(ctx, entityId, HitGeometry)) continue;
+    addComponent11(ctx, entityId, HitGeometry);
     HitGeometry.addCapsuleUv(ctx, entityId, [0, 0], [1, 0], FRAME_EDGE_THICKNESS);
     HitGeometry.addCapsuleUv(ctx, entityId, [1, 0], [1, 1], FRAME_EDGE_THICKNESS);
     HitGeometry.addCapsuleUv(ctx, entityId, [1, 1], [0, 1], FRAME_EDGE_THICKNESS);
@@ -6339,10 +6508,10 @@ function createCorePlugin(options = {}) {
 }
 
 // src/Editor.ts
-import { Synced as Synced8 } from "@woven-ecs/canvas-store";
+import { Synced as Synced9 } from "@woven-ecs/canvas-store";
 import {
-  addComponent as addComponent11,
-  createEntity as createEntity8,
+  addComponent as addComponent12,
+  createEntity as createEntity9,
   World
 } from "@woven-ecs/core";
 
@@ -6374,21 +6543,44 @@ var FontFamily = z2.object({
 });
 var FontLoader = class {
   constructor() {
-    this.loadedFonts = /* @__PURE__ */ new Set();
-  }
-  /**
-   * Load multiple font families.
-   * Fonts that have already been loaded will be skipped.
+    // Families whose stylesheet has fully loaded (fetched, injected, and the
+    // FontFaces reported ready by the browser).
+    this.loaded = /* @__PURE__ */ new Set();
+    // In-flight loads, keyed by family name, so concurrent callers share one load
+    // and — critically — can `await` it to *completion*. A plain "already started"
+    // flag (the old behaviour) would let a second caller proceed before the font is
+    // actually ready, which breaks code that measures text right after requesting a
+    // font (the block would be sized against fallback metrics).
+    this.inFlight = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Load multiple font families. Already-loaded families are skipped; in-flight
+   * ones are shared. Resolves once all requested families are ready.
    *
    * @param families - Array of font families to load
    */
   async loadFonts(families) {
-    const unloadedFamilies = families.filter((family) => !this.loadedFonts.has(family.name));
-    if (unloadedFamilies.length === 0) {
-      return;
-    }
-    const fontPromises = unloadedFamilies.map((family) => this.loadSingleFont(family));
-    await Promise.all(fontPromises);
+    await Promise.all(families.map((family) => this.loadFont(family)));
+  }
+  /**
+   * Load a single font family, returning a promise that resolves only once the
+   * font is actually ready to render. Idempotent: an already-loaded family
+   * resolves immediately, and concurrent calls for the same family share the one
+   * in-flight load — so a caller that measures text can `await` real metrics.
+   *
+   * @param family - Font family to load
+   */
+  loadFont(family) {
+    if (this.loaded.has(family.name)) return Promise.resolve();
+    const existing = this.inFlight.get(family.name);
+    if (existing) return existing;
+    const promise = this.loadSingleFont(family).then(() => {
+      this.loaded.add(family.name);
+    }).finally(() => {
+      this.inFlight.delete(family.name);
+    });
+    this.inFlight.set(family.name, promise);
+    return promise;
   }
   /**
    * Build a Google Fonts URL with weight and italic variants.
@@ -6425,34 +6617,36 @@ var FontLoader = class {
   }
   /**
    * Load a single font family.
-   * Adds a link element to the document head and waits for the font to be ready.
+   * Fetches the stylesheet as text and injects it via an inline <style>, so
+   * the @font-face rules land in a same-origin sheet. Tools that introspect
+   * CSSOM (e.g. modern-screenshot's font embedding for /preview raster
+   * captures) can't read cross-origin sheets, which a <link> to
+   * fonts.googleapis.com would produce.
    *
    * @param family - Font family to load
    */
-  loadSingleFont(family) {
-    this.loadedFonts.add(family.name);
-    if (typeof document === "undefined") {
-      return Promise.resolve();
-    }
-    return new Promise((resolve, reject) => {
-      const link = document.createElement("link");
-      link.rel = "stylesheet";
-      link.href = this.buildGoogleFontsUrl(family);
-      link.onload = async () => {
-        try {
-          const loadPromises = this.getFontLoadPromises(family);
-          await Promise.all(loadPromises);
-          await document.fonts.ready;
-          resolve();
-        } catch (error) {
-          reject(new Error(`Failed to load font face for: ${family.name}. ${error}`));
-        }
-      };
-      link.onerror = () => {
-        reject(new Error(`Failed to load font stylesheet: ${family.name}`));
-      };
-      document.head.appendChild(link);
-    });
+  async loadSingleFont(family) {
+    if (typeof document === "undefined") return;
+    const url = this.buildGoogleFontsUrl(family);
+    let cssText;
+    try {
+      const res = await fetch(url);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      cssText = await res.text();
+    } catch (err) {
+      throw new Error(`Failed to load font stylesheet: ${family.name}. ${err}`);
+    }
+    const style = document.createElement("style");
+    style.setAttribute("data-wov-font-family", family.name);
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    try {
+      const loadPromises = this.getFontLoadPromises(family);
+      await Promise.all(loadPromises);
+      await document.fonts.ready;
+    } catch (err) {
+      throw new Error(`Failed to load font face for: ${family.name}. ${err}`);
+    }
   }
   /**
    * Get promises for loading all font variants (weights and italics).
@@ -6478,13 +6672,13 @@ var FontLoader = class {
    * @returns True if the font has been loaded
    */
   isLoaded(fontName) {
-    return this.loadedFonts.has(fontName);
+    return this.loaded.has(fontName);
   }
   /**
    * Get the set of loaded font names.
    */
   getLoadedFonts() {
-    return this.loadedFonts;
+    return this.loaded;
   }
 };
 
@@ -6565,7 +6759,7 @@ var Editor = class {
     const plugins = pluginInputs.map(parsePlugin);
     const corePlugin = createCorePlugin(options.corePlugin);
     const sortedPlugins = sortPluginsByDependencies([corePlugin, ...plugins]);
-    const allDefs = [CommandMarker, Synced8];
+    const allDefs = [CommandMarker, Synced9];
     for (const plugin of sortedPlugins) {
       if (plugin.components) {
         allDefs.push(...plugin.components);
@@ -6695,17 +6889,14 @@ var Editor = class {
    * Call this after construction to run async setup.
    */
   async initialize() {
-    if (this.fonts.length > 0) {
-      await this.fontLoader.loadFonts(this.fonts);
-    }
     Grid.copy(this.ctx, this.gridOptions);
     Controls.copy(this.ctx, this.controlsOptions);
     this.nextTick((ctx) => {
-      const userEntity = createEntity8(ctx);
-      addComponent11(ctx, userEntity, Synced8, {
+      const userEntity = createEntity9(ctx);
+      addComponent12(ctx, userEntity, Synced9, {
         id: crypto.randomUUID()
       });
-      addComponent11(ctx, userEntity, User, {
+      addComponent12(ctx, userEntity, User, {
         userId: this.userData.userId,
         sessionId: this.userData.sessionId,
         color: this.userData.color,
@@ -6719,6 +6910,29 @@ var Editor = class {
       }
     }
   }
+  /**
+   * Load a single font family's stylesheet on demand, by its `name` (the CSS
+   * font-family — the same key the picker and `Text.fontFamily` use). Looks the
+   * family up in the configured `fonts` and injects its @font-face rules into
+   * the document. Idempotent — the FontLoader dedups, so repeated calls for an
+   * already-loaded (or in-flight) family are cheap no-ops. Unknown names are
+   * ignored. This is how the editor scales to a large font library: nothing is
+   * fetched until a text block actually displays/edits in that family.
+   */
+  async loadFont(name) {
+    if (!name) return;
+    const family = this.fonts.find((f) => f.name === name);
+    if (!family) return;
+    try {
+      await this.fontLoader.loadFont(family);
+    } catch (err) {
+      console.warn(`Failed to load font: ${name}`, err);
+    }
+  }
+  /** Whether a font family's stylesheet has finished loading. */
+  isFontLoaded(name) {
+    return this.fontLoader.isLoaded(name);
+  }
   /**
    * Run one frame of the editor loop.
    *
@@ -6933,11 +7147,14 @@ export {
   Key,
   Keybind,
   Keyboard,
+  Layer,
   MAX_HIT_ARCS,
   MAX_HIT_CAPSULES,
+  MAX_HIT_POLYGON_POINTS,
   MainThreadSystem2 as MainThreadSystem,
   Mouse,
   Opacity,
+  PlaceBlockEvent,
   Pointer,
   PointerButton,
   PointerType,
@@ -6971,7 +7188,7 @@ export {
   StartTransformBoxEdit,
   Stratum,
   StrokeKind,
-  Synced9 as Synced,
+  Synced10 as Synced,
   Text,
   TextAlignment,
   Tick,
@@ -6990,16 +7207,17 @@ export {
   UserData,
   VerticalAlign,
   VerticalAlignment,
-  addComponent12 as addComponent,
+  addComponent13 as addComponent,
   canBlockEdit,
   canBlockInteract,
   cascadeDelete,
   clearPointerTrackingState,
   compareBlockOrder,
   convertRefsToUuids,
+  createBlock,
   createCorePlugin,
-  createEntity9 as createEntity,
-  defineCanvasComponent22 as defineCanvasComponent,
+  createEntity10 as createEntity,
+  defineCanvasComponent23 as defineCanvasComponent,
   defineCanvasSingleton3 as defineCanvasSingleton,
   defineCommand,
   defineEditorState,
@@ -7009,7 +7227,7 @@ export {
   deselectAll,
   deselectBlock,
   detectEmbedProvider,
-  field36 as field,
+  field37 as field,
   findFrameAtPoint,
   generateUuidBySeed,
   getBackrefs5 as getBackrefs,
@@ -7027,19 +7245,21 @@ export {
   getResources15 as getResources,
   getTopmostBlockAtPoint,
   getWorldPosition,
-  hasComponent20 as hasComponent,
+  hasComponent21 as hasComponent,
   intersectAabb,
   intersectCapsule,
   intersectPoint,
   isAlive3 as isAlive,
   isAncestor,
   isHeldByRemote,
+  isLayerInteractive,
   isReadonly,
   on,
   parsePlugin,
   removeComponent7 as removeComponent,
   removeEntity7 as removeEntity,
   resolveEmbedUrl,
+  resolveLayerRank,
   resolveRefFields,
   runMachine,
   selectAll,