@woven-canvas/core 1.0.5 → 1.0.9

package/build/index.cjs

@@ -32,12 +32,12 @@ __export(index_exports, {
   BringForwardSelected: () => BringForwardSelected,
   CURSORS: () => CURSORS,
   Camera: () => Camera,
-  CanvasComponentDef: () => import_canvas_store48.CanvasComponentDef,
-  CanvasSingletonDef: () => import_canvas_store48.CanvasSingletonDef,
+  CanvasComponentDef: () => import_canvas_store50.CanvasComponentDef,
+  CanvasSingletonDef: () => import_canvas_store50.CanvasSingletonDef,
   CloneEntities: () => CloneEntities,
   Color: () => Color,
   CommandMarker: () => CommandMarker,
-  ComponentDef: () => import_core71.ComponentDef,
+  ComponentDef: () => import_core74.ComponentDef,
   Connector: () => Connector,
   Controls: () => Controls,
   ControlsOptions: () => ControlsOptions,
@@ -57,7 +57,7 @@ __export(index_exports, {
   Embed: () => Embed,
   EmbedProvider: () => EmbedProvider,
   EndTransformBoxEdit: () => EndTransformBoxEdit,
-  EventType: () => import_core71.EventType,
+  EventType: () => import_core74.EventType,
   FontFamily: () => FontFamily,
   FontLoader: () => FontLoader,
   Frame: () => Frame,
@@ -75,11 +75,14 @@ __export(index_exports, {
   Key: () => Key,
   Keybind: () => Keybind,
   Keyboard: () => Keyboard,
+  Layer: () => Layer,
   MAX_HIT_ARCS: () => MAX_HIT_ARCS,
   MAX_HIT_CAPSULES: () => MAX_HIT_CAPSULES,
-  MainThreadSystem: () => import_core71.MainThreadSystem,
+  MAX_HIT_POLYGON_POINTS: () => MAX_HIT_POLYGON_POINTS,
+  MainThreadSystem: () => import_core74.MainThreadSystem,
   Mouse: () => Mouse,
   Opacity: () => Opacity,
+  PlaceBlockEvent: () => PlaceBlockEvent,
   Pointer: () => Pointer,
   PointerButton: () => PointerButton,
   PointerType: () => PointerType,
@@ -93,7 +96,7 @@ __export(index_exports, {
   RemoveTransformBox: () => RemoveTransformBox,
   ResetKeyboard: () => ResetKeyboard,
   ResizeMode: () => ResizeMode,
-  SINGLETON_ENTITY_ID: () => import_core71.SINGLETON_ENTITY_ID,
+  SINGLETON_ENTITY_ID: () => import_core74.SINGLETON_ENTITY_ID,
   STRATUM_ORDER: () => STRATUM_ORDER,
   ScaleWithZoom: () => ScaleWithZoom,
   ScaleWithZoomState: () => ScaleWithZoomState,
@@ -113,7 +116,7 @@ __export(index_exports, {
   StartTransformBoxEdit: () => StartTransformBoxEdit,
   Stratum: () => Stratum,
   StrokeKind: () => StrokeKind,
-  Synced: () => import_canvas_store48.Synced,
+  Synced: () => import_canvas_store50.Synced,
   Text: () => Text,
   TextAlignment: () => TextAlignment,
   Tick: () => Tick,
@@ -132,29 +135,30 @@ __export(index_exports, {
   UserData: () => UserData,
   VerticalAlign: () => VerticalAlign,
   VerticalAlignment: () => VerticalAlignment,
-  addComponent: () => import_core71.addComponent,
+  addComponent: () => import_core74.addComponent,
   canBlockEdit: () => canBlockEdit,
   canBlockInteract: () => canBlockInteract,
   cascadeDelete: () => cascadeDelete,
   clearPointerTrackingState: () => clearPointerTrackingState,
   compareBlockOrder: () => compareBlockOrder,
   convertRefsToUuids: () => convertRefsToUuids,
+  createBlock: () => createBlock,
   createCorePlugin: () => createCorePlugin,
-  createEntity: () => import_core71.createEntity,
-  defineCanvasComponent: () => import_canvas_store48.defineCanvasComponent,
-  defineCanvasSingleton: () => import_canvas_store48.defineCanvasSingleton,
+  createEntity: () => import_core74.createEntity,
+  defineCanvasComponent: () => import_canvas_store50.defineCanvasComponent,
+  defineCanvasSingleton: () => import_canvas_store50.defineCanvasSingleton,
   defineCommand: () => defineCommand,
   defineEditorState: () => defineEditorState,
   defineEditorSystem: () => defineEditorSystem,
-  defineQuery: () => import_core71.defineQuery,
-  defineSystem: () => import_core71.defineSystem,
+  defineQuery: () => import_core74.defineQuery,
+  defineSystem: () => import_core74.defineSystem,
   deselectAll: () => deselectAll,
   deselectBlock: () => deselectBlock,
   detectEmbedProvider: () => detectEmbedProvider,
-  field: () => import_core71.field,
+  field: () => import_core74.field,
   findFrameAtPoint: () => findFrameAtPoint,
   generateUuidBySeed: () => generateUuidBySeed,
-  getBackrefs: () => import_core71.getBackrefs,
+  getBackrefs: () => import_core74.getBackrefs,
   getBlockDef: () => getBlockDef,
   getBlockResizeMode: () => getBlockResizeMode,
   getChildren: () => getChildren,
@@ -166,21 +170,24 @@ __export(index_exports, {
   getPluginResources: () => getPluginResources,
   getPointerInput: () => getPointerInput,
   getRefFieldNames: () => getRefFieldNames,
-  getResources: () => import_core71.getResources,
+  getResources: () => import_core74.getResources,
   getTopmostBlockAtPoint: () => getTopmostBlockAtPoint,
   getWorldPosition: () => getWorldPosition,
-  hasComponent: () => import_core71.hasComponent,
+  hasComponent: () => import_core74.hasComponent,
   intersectAabb: () => intersectAabb,
   intersectCapsule: () => intersectCapsule,
   intersectPoint: () => intersectPoint,
-  isAlive: () => import_core71.isAlive,
+  isAlive: () => import_core74.isAlive,
   isAncestor: () => isAncestor,
   isHeldByRemote: () => isHeldByRemote,
+  isLayerInteractive: () => isLayerInteractive,
+  isReadonly: () => isReadonly,
   on: () => on,
   parsePlugin: () => parsePlugin,
-  removeComponent: () => import_core71.removeComponent,
-  removeEntity: () => import_core71.removeEntity,
+  removeComponent: () => import_core74.removeComponent,
+  removeEntity: () => import_core74.removeEntity,
   resolveEmbedUrl: () => resolveEmbedUrl,
+  resolveLayerRank: () => resolveLayerRank,
   resolveRefFields: () => resolveRefFields,
   runMachine: () => runMachine,
   selectAll: () => selectAll,
@@ -189,12 +196,12 @@ __export(index_exports, {
   worldToLocal: () => worldToLocal
 });
 module.exports = __toCommonJS(index_exports);
-var import_canvas_store48 = require("@woven-ecs/canvas-store");
-var import_core71 = require("@woven-ecs/core");
+var import_canvas_store50 = require("@woven-ecs/canvas-store");
+var import_core74 = require("@woven-ecs/core");
 
 // src/CorePlugin.ts
-var import_canvas_store46 = require("@woven-ecs/canvas-store");
-var import_core69 = require("@woven-ecs/core");
+var import_canvas_store48 = require("@woven-ecs/canvas-store");
+var import_core72 = require("@woven-ecs/core");
 
 // src/command.ts
 var import_core = require("@woven-ecs/core");
@@ -273,6 +280,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");
@@ -314,8 +322,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,
@@ -382,6 +392,9 @@ function getPluginResources(ctx, pluginName) {
   const resources = ctx.resources;
   return resources.pluginResources[pluginName];
 }
+function isReadonly(ctx) {
+  return ctx.resources.readonly;
+}
 var GridOptions = import_zod.z.object({
   /**
    * Whether grid snapping is enabled.
@@ -543,7 +556,16 @@ var EditorOptionsSchema = import_zod.z.object({
    * }
    * ```
    */
-  controls: import_zod.z.custom().optional()
+  controls: import_zod.z.custom().optional(),
+  /**
+   * When true, user-initiated mutations are blocked — input systems skip
+   * their bodies and `editor.command()` is a no-op. Adapter-originated
+   * mutations (websocket, persistence) still apply, so remote edits remain
+   * visible. Useful for viewer-mode share links.
+   *
+   * @default false
+   */
+  readonly: import_zod.z.boolean().default(false)
 });
 var Keybind = import_zod.z.object({
   /** The command to execute when this keybind is triggered */
@@ -611,7 +633,9 @@ var BlockDef = import_zod.z.object({
   resizeMode: import_zod.z.enum([ResizeMode.Scale, ResizeMode.Text, ResizeMode.Free, ResizeMode.GroupOnly]).default(ResizeMode.Scale),
   canRotate: import_zod.z.boolean().default(true),
   canScale: import_zod.z.boolean().default(true),
+  snappable: import_zod.z.boolean().default(true),
   interactable: import_zod.z.boolean().default(true),
+  excludeFromRankBounds: import_zod.z.boolean().default(false),
   connectors: BlockDefConnectors.default(BlockDefConnectors.parse({}))
 });
 var SelectionState = {
@@ -677,7 +701,10 @@ var BlockSchema = {
   /** How the block can be resized */
   resizeMode: import_core2.field.enum(ResizeMode).default(ResizeMode.Default),
   /** Parent block ID — position is relative to parent if set */
-  parentId: import_core2.field.ref()
+  parentId: import_core2.field.ref(),
+  /** Layer membership — carried by every block directly (a frame and its
+   *  children each get their own `layerId`; no inheritance). Null = unlayered. */
+  layerId: import_core2.field.ref()
 };
 var _worldPos = [0, 0];
 var BlockDef2 = class extends import_canvas_store.CanvasComponentDef {
@@ -1170,15 +1197,21 @@ var import_math3 = require("@woven-canvas/math");
 var import_canvas_store13 = require("@woven-ecs/canvas-store");
 var import_core11 = require("@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: import_core11.field.buffer(import_core11.field.float32()).size(MAX_HIT_CAPSULES * FLOATS_PER_CAPSULE),
   capsuleCount: import_core11.field.uint16().default(0),
   hitArcs: import_core11.field.buffer(import_core11.field.float32()).size(MAX_HIT_ARCS * FLOATS_PER_ARC),
-  arcCount: import_core11.field.uint16().default(0)
+  arcCount: import_core11.field.uint16().default(0),
+  hitPolygon: import_core11.field.buffer(import_core11.field.float32()).size(MAX_HIT_POLYGON_POINTS * FLOATS_PER_POLYGON_POINT),
+  polygonPointCount: import_core11.field.uint16().default(0)
 };
 var HitGeometryDef = class extends import_canvas_store13.CanvasComponentDef {
   constructor() {
@@ -1289,8 +1322,27 @@ var HitGeometryDef = class extends import_canvas_store13.CanvasComponentDef {
         return true;
       }
     }
+    const polygonPointCount = this.fillWorldPolygon(hitGeometry.hitPolygon, hitGeometry.polygonPointCount);
+    if (polygonPointCount > 0 && import_math3.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];
+      import_math3.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.
@@ -1330,6 +1382,10 @@ var HitGeometryDef = class extends import_canvas_store13.CanvasComponentDef {
         return true;
       }
     }
+    const polygonPointCount = this.fillWorldPolygon(hitGeometry.hitPolygon, hitGeometry.polygonPointCount);
+    if (polygonPointCount > 0 && import_math3.Polygon.intersectsAabb(_worldPolygon, polygonPointCount, aabb)) {
+      return true;
+    }
     return false;
   }
   /**
@@ -1367,6 +1423,11 @@ var HitGeometryDef = class extends import_canvas_store13.CanvasComponentDef {
       const worldArc = import_math3.Arc.create(worldA[0], worldA[1], worldB[0], worldB[1], worldC[0], worldC[1], thickness);
       pts.push(...import_math3.Arc.getExtrema(worldArc));
     }
+    for (let i = 0; i < hitGeometry.polygonPointCount; i++) {
+      const world = [hitGeometry.hitPolygon[i * 2], hitGeometry.hitPolygon[i * 2 + 1]];
+      import_math3.Mat2.transformPoint(_uvToWorldMatrix, world);
+      pts.push(world);
+    }
     return pts;
   }
   // ============================================
@@ -1469,6 +1530,27 @@ var HitGeometryDef = class extends import_canvas_store13.CanvasComponentDef {
     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.
    *
@@ -1479,6 +1561,7 @@ var HitGeometryDef = class extends import_canvas_store13.CanvasComponentDef {
     const hitGeometry = this.write(ctx, entityId);
     hitGeometry.capsuleCount = 0;
     hitGeometry.arcCount = 0;
+    hitGeometry.polygonPointCount = 0;
   }
 };
 var HitGeometry = new HitGeometryDef();
@@ -1502,19 +1585,39 @@ var Image = (0, import_canvas_store15.defineCanvasComponent)(
   }
 );
 
-// src/components/Opacity.ts
+// src/components/Layer.ts
 var import_canvas_store16 = require("@woven-ecs/canvas-store");
 var import_core13 = require("@woven-ecs/core");
-var Opacity = (0, import_canvas_store16.defineCanvasComponent)(
-  { name: "opacity" },
+var Layer = (0, import_canvas_store16.defineCanvasComponent)(
+  { name: "layer", sync: "document" },
   {
-    value: import_core13.field.uint8().default(255)
+    /** Parent frame/page entity this layer belongs to — back-reference. Layers
+     *  exist only for sorting; they have no geometry of their own. */
+    parentId: import_core13.field.ref(),
+    /** Z-order rank among the page's layers (LexoRank string). Higher sorts in front. */
+    rank: import_core13.field.string().max(36).default(""),
+    /** Display name shown in the layers panel. */
+    label: import_core13.field.string().max(128).default("Layer"),
+    /** When true, blocks in this layer are not selectable (skipped by hit-testing). */
+    locked: import_core13.field.boolean().default(false),
+    /** When true, the layer is not rendered and is skipped by hit-testing. */
+    hidden: import_core13.field.boolean().default(false)
   }
 );
 
-// src/components/Pointer.ts
+// src/components/Opacity.ts
 var import_canvas_store17 = require("@woven-ecs/canvas-store");
 var import_core14 = require("@woven-ecs/core");
+var Opacity = (0, import_canvas_store17.defineCanvasComponent)(
+  { name: "opacity" },
+  {
+    value: import_core14.field.uint8().default(255)
+  }
+);
+
+// src/components/Pointer.ts
+var import_canvas_store18 = require("@woven-ecs/canvas-store");
+var import_core15 = require("@woven-ecs/core");
 var PointerButton = {
   None: "none",
   Left: "left",
@@ -1531,32 +1634,32 @@ var PointerType = {
 var SAMPLE_COUNT = 6;
 var PointerSchema = {
   /** Unique pointer ID (from PointerEvent.pointerId) */
-  pointerId: import_core14.field.uint16().default(0),
+  pointerId: import_core15.field.uint16().default(0),
   /** Current position relative to the editor element [x, y] */
-  position: import_core14.field.tuple(import_core14.field.float32(), 2).default([0, 0]),
+  position: import_core15.field.tuple(import_core15.field.float32(), 2).default([0, 0]),
   /** Position where the pointer went down [x, y] */
-  downPosition: import_core14.field.tuple(import_core14.field.float32(), 2).default([0, 0]),
+  downPosition: import_core15.field.tuple(import_core15.field.float32(), 2).default([0, 0]),
   /** Frame number when the pointer went down (for click detection) */
-  downFrame: import_core14.field.uint32().default(0),
+  downFrame: import_core15.field.uint32().default(0),
   /** Which button is pressed */
-  button: import_core14.field.enum(PointerButton).default(PointerButton.None),
+  button: import_core15.field.enum(PointerButton).default(PointerButton.None),
   /** Type of pointer device */
-  pointerType: import_core14.field.enum(PointerType).default(PointerType.Mouse),
+  pointerType: import_core15.field.enum(PointerType).default(PointerType.Mouse),
   /** Pressure from 0 to 1 (for pen/touch) */
-  pressure: import_core14.field.float32().default(0),
+  pressure: import_core15.field.float32().default(0),
   /** Whether the pointer event target was not the editor element */
-  obscured: import_core14.field.boolean().default(false),
+  obscured: import_core15.field.boolean().default(false),
   // Velocity tracking (ring buffer for position samples)
   /** Ring buffer of previous positions [x0, y0, x1, y1, ...] @internal */
-  _prevPositions: import_core14.field.array(import_core14.field.float32(), SAMPLE_COUNT * 2),
+  _prevPositions: import_core15.field.array(import_core15.field.float32(), SAMPLE_COUNT * 2),
   /** Ring buffer of timestamps for each position sample @internal */
-  _prevTimes: import_core14.field.array(import_core14.field.float32(), SAMPLE_COUNT),
+  _prevTimes: import_core15.field.array(import_core15.field.float32(), SAMPLE_COUNT),
   /** Total number of samples added (used for ring buffer indexing) @internal */
-  _sampleCount: import_core14.field.int32().default(0),
+  _sampleCount: import_core15.field.int32().default(0),
   /** Computed velocity [vx, vy] in pixels per second @internal */
-  _velocity: import_core14.field.tuple(import_core14.field.float32(), 2).default([0, 0])
+  _velocity: import_core15.field.tuple(import_core15.field.float32(), 2).default([0, 0])
 };
-var PointerDef = class extends import_canvas_store17.CanvasComponentDef {
+var PointerDef = class extends import_canvas_store18.CanvasComponentDef {
   constructor() {
     super({ name: "pointer" }, PointerSchema);
   }
@@ -1665,96 +1768,96 @@ function addPointerSample(pointer, position, time) {
 }
 
 // src/components/ScaleWithZoom.ts
-var import_canvas_store18 = require("@woven-ecs/canvas-store");
-var import_core15 = require("@woven-ecs/core");
-var ScaleWithZoom = (0, import_canvas_store18.defineCanvasComponent)(
+var import_canvas_store19 = require("@woven-ecs/canvas-store");
+var import_core16 = require("@woven-ecs/core");
+var ScaleWithZoom = (0, import_canvas_store19.defineCanvasComponent)(
   { name: "scaleWithZoom" },
   {
     /** Pivot point for scaling as [x, y] (0-1, default 0.5,0.5 = center) */
-    anchor: import_core15.field.tuple(import_core15.field.float64(), 2).default([0.5, 0.5]),
+    anchor: import_core16.field.tuple(import_core16.field.float64(), 2).default([0.5, 0.5]),
     /** Initial position as [left, top] at zoom=1 */
-    startPosition: import_core15.field.tuple(import_core15.field.float64(), 2).default([0, 0]),
+    startPosition: import_core16.field.tuple(import_core16.field.float64(), 2).default([0, 0]),
     /** Initial size as [width, height] at zoom=1 */
-    startSize: import_core15.field.tuple(import_core15.field.float64(), 2).default([0, 0]),
+    startSize: import_core16.field.tuple(import_core16.field.float64(), 2).default([0, 0]),
     /** Scale multiplier per dimension: [x, y] (0 = no zoom effect, 1 = full zoom effect, 0.5 = half effect) */
-    scaleMultiplier: import_core15.field.tuple(import_core15.field.float64(), 2).default([1, 1])
+    scaleMultiplier: import_core16.field.tuple(import_core16.field.float64(), 2).default([1, 1])
   }
 );
 
 // src/components/Selected.ts
-var import_canvas_store19 = require("@woven-ecs/canvas-store");
-var Selected = (0, import_canvas_store19.defineCanvasComponent)({ name: "selected" }, {});
+var import_canvas_store20 = require("@woven-ecs/canvas-store");
+var Selected = (0, import_canvas_store20.defineCanvasComponent)({ name: "selected" }, {});
 
 // src/components/SelectionBox.ts
-var import_canvas_store20 = require("@woven-ecs/canvas-store");
-var SelectionBox = (0, import_canvas_store20.defineCanvasComponent)({ name: "selectionBox" }, {});
+var import_canvas_store21 = require("@woven-ecs/canvas-store");
+var SelectionBox = (0, import_canvas_store21.defineCanvasComponent)({ name: "selectionBox" }, {});
 
 // src/components/Shape.ts
-var import_canvas_store21 = require("@woven-ecs/canvas-store");
-var import_core16 = require("@woven-ecs/core");
+var import_canvas_store22 = require("@woven-ecs/canvas-store");
+var import_core17 = require("@woven-ecs/core");
 var StrokeKind = {
   Solid: "solid",
   Dashed: "dashed",
   None: "none"
 };
-var Shape = (0, import_canvas_store21.defineCanvasComponent)(
+var Shape = (0, import_canvas_store22.defineCanvasComponent)(
   { name: "shape", sync: "document" },
   {
     /** The kind of shape to render (e.g. 'rectangle', 'ellipse', or custom shape key) */
-    kind: import_core16.field.string().default("rectangle"),
+    kind: import_core17.field.string().default("rectangle"),
     /** Stroke style */
-    strokeKind: import_core16.field.enum(StrokeKind).default(StrokeKind.Solid),
+    strokeKind: import_core17.field.enum(StrokeKind).default(StrokeKind.Solid),
     /** Stroke width in pixels */
-    strokeWidth: import_core16.field.uint16().default(2),
+    strokeWidth: import_core17.field.uint16().default(2),
     /** Stroke color - red component (0-255) */
-    strokeRed: import_core16.field.uint8().default(0),
+    strokeRed: import_core17.field.uint8().default(0),
     /** Stroke color - green component (0-255) */
-    strokeGreen: import_core16.field.uint8().default(0),
+    strokeGreen: import_core17.field.uint8().default(0),
     /** Stroke color - blue component (0-255) */
-    strokeBlue: import_core16.field.uint8().default(0),
+    strokeBlue: import_core17.field.uint8().default(0),
     /** Stroke color - alpha component (0-255) */
-    strokeAlpha: import_core16.field.uint8().default(255),
+    strokeAlpha: import_core17.field.uint8().default(255),
     /** Fill color - red component (0-255) */
-    fillRed: import_core16.field.uint8().default(255),
+    fillRed: import_core17.field.uint8().default(255),
     /** Fill color - green component (0-255) */
-    fillGreen: import_core16.field.uint8().default(255),
+    fillGreen: import_core17.field.uint8().default(255),
     /** Fill color - blue component (0-255) */
-    fillBlue: import_core16.field.uint8().default(255),
+    fillBlue: import_core17.field.uint8().default(255),
     /** Fill color - alpha component (0-255) */
-    fillAlpha: import_core16.field.uint8().default(0)
+    fillAlpha: import_core17.field.uint8().default(0)
   }
 );
 
 // src/components/Text.ts
-var import_canvas_store22 = require("@woven-ecs/canvas-store");
-var import_core17 = require("@woven-ecs/core");
-var Text = (0, import_canvas_store22.defineCanvasComponent)(
+var import_canvas_store23 = require("@woven-ecs/canvas-store");
+var import_core18 = require("@woven-ecs/core");
+var Text = (0, import_canvas_store23.defineCanvasComponent)(
   { name: "text", sync: "document" },
   {
     /** HTML content (supports rich text formatting) */
-    content: import_core17.field.string().max(1e4).default(""),
+    content: import_core18.field.string().max(1e4).default(""),
     /** Font size in pixels */
-    fontSizePx: import_core17.field.float64().default(24),
+    fontSizePx: import_core18.field.float64().default(24),
     /** Font family name */
-    fontFamily: import_core17.field.string().max(64).default(""),
+    fontFamily: import_core18.field.string().max(64).default(""),
     /** Line height multiplier */
-    lineHeight: import_core17.field.float64().default(1.2),
+    lineHeight: import_core18.field.float64().default(1.2),
     /** Letter spacing in em units */
-    letterSpacingEm: import_core17.field.float64().default(0),
+    letterSpacingEm: import_core18.field.float64().default(0),
     /** Whether width is constrained (text wraps) */
-    constrainWidth: import_core17.field.boolean().default(true),
+    constrainWidth: import_core18.field.boolean().default(true),
     /** Default text alignment for new paragraphs */
-    defaultAlignment: import_core17.field.enum(TextAlignment).default(TextAlignment.Left)
+    defaultAlignment: import_core18.field.enum(TextAlignment).default(TextAlignment.Left)
   }
 );
 
 // src/components/TransformBox.ts
-var import_canvas_store23 = require("@woven-ecs/canvas-store");
-var TransformBox = (0, import_canvas_store23.defineCanvasComponent)({ name: "transformBox" }, {});
+var import_canvas_store24 = require("@woven-ecs/canvas-store");
+var TransformBox = (0, import_canvas_store24.defineCanvasComponent)({ name: "transformBox" }, {});
 
 // src/components/TransformHandle.ts
-var import_canvas_store24 = require("@woven-ecs/canvas-store");
-var import_core18 = require("@woven-ecs/core");
+var import_canvas_store25 = require("@woven-ecs/canvas-store");
+var import_core19 = require("@woven-ecs/core");
 
 // src/cursors.ts
 var CursorKind = /* @__PURE__ */ ((CursorKind2) => {
@@ -1855,39 +1958,39 @@ var CURSORS = {
 };
 
 // src/components/TransformHandle.ts
-var TransformHandle = (0, import_canvas_store24.defineCanvasComponent)(
+var TransformHandle = (0, import_canvas_store25.defineCanvasComponent)(
   { name: "transformHandle" },
   {
-    kind: import_core18.field.string().max(16).default(TransformHandleKind.Scale),
-    vectorX: import_core18.field.int8().default(0),
-    vectorY: import_core18.field.int8().default(0),
-    transformBox: import_core18.field.ref(),
-    cursorKind: import_core18.field.string().max(16).default("drag" /* Drag */)
+    kind: import_core19.field.string().max(16).default(TransformHandleKind.Scale),
+    vectorX: import_core19.field.int8().default(0),
+    vectorY: import_core19.field.int8().default(0),
+    transformBox: import_core19.field.ref(),
+    cursorKind: import_core19.field.string().max(16).default("drag" /* Drag */)
   }
 );
 
 // src/components/User.ts
-var import_canvas_store25 = require("@woven-ecs/canvas-store");
-var import_core19 = require("@woven-ecs/core");
-var User = (0, import_canvas_store25.defineCanvasComponent)(
+var import_canvas_store26 = require("@woven-ecs/canvas-store");
+var import_core20 = require("@woven-ecs/core");
+var User = (0, import_canvas_store26.defineCanvasComponent)(
   { name: "user", sync: "ephemeral" },
   {
-    userId: import_core19.field.string().max(36),
-    sessionId: import_core19.field.string().max(36),
-    color: import_core19.field.string().max(7),
-    name: import_core19.field.string().max(100),
-    avatar: import_core19.field.string().max(500),
-    position: import_core19.field.tuple(import_core19.field.float32(), 2).default([0, 0])
+    userId: import_core20.field.string().max(36),
+    sessionId: import_core20.field.string().max(36),
+    color: import_core20.field.string().max(7),
+    name: import_core20.field.string().max(100),
+    avatar: import_core20.field.string().max(500),
+    position: import_core20.field.tuple(import_core20.field.float32(), 2).default([0, 0])
   }
 );
 
 // src/components/VerticalAlign.ts
-var import_canvas_store26 = require("@woven-ecs/canvas-store");
-var import_core20 = require("@woven-ecs/core");
-var VerticalAlign = (0, import_canvas_store26.defineCanvasComponent)(
+var import_canvas_store27 = require("@woven-ecs/canvas-store");
+var import_core21 = require("@woven-ecs/core");
+var VerticalAlign = (0, import_canvas_store27.defineCanvasComponent)(
   { name: "verticalAlign", sync: "document" },
   {
-    value: import_core20.field.enum(VerticalAlignment).default(VerticalAlignment.Top)
+    value: import_core21.field.enum(VerticalAlignment).default(VerticalAlignment.Top)
   }
 );
 
@@ -1925,23 +2028,23 @@ __export(singletons_exports, {
 });
 
 // src/singletons/Camera.ts
-var import_canvas_store28 = require("@woven-ecs/canvas-store");
-var import_core22 = require("@woven-ecs/core");
+var import_canvas_store29 = require("@woven-ecs/canvas-store");
+var import_core23 = require("@woven-ecs/core");
 
 // src/singletons/Screen.ts
-var import_canvas_store27 = require("@woven-ecs/canvas-store");
-var import_core21 = require("@woven-ecs/core");
+var import_canvas_store28 = require("@woven-ecs/canvas-store");
+var import_core22 = require("@woven-ecs/core");
 var ScreenSchema = {
   /** Width of the editor element in pixels */
-  width: import_core21.field.float64().default(0),
+  width: import_core22.field.float64().default(0),
   /** Height of the editor element in pixels */
-  height: import_core21.field.float64().default(0),
+  height: import_core22.field.float64().default(0),
   /** Left offset of the editor element relative to the viewport */
-  left: import_core21.field.float64().default(0),
+  left: import_core22.field.float64().default(0),
   /** Top offset of the editor element relative to the viewport */
-  top: import_core21.field.float64().default(0)
+  top: import_core22.field.float64().default(0)
 };
-var ScreenDef = class extends import_canvas_store27.CanvasSingletonDef {
+var ScreenDef = class extends import_canvas_store28.CanvasSingletonDef {
   constructor() {
     super({ name: "screen" }, ScreenSchema);
   }
@@ -1966,17 +2069,17 @@ var Screen = new ScreenDef();
 // src/singletons/Camera.ts
 var CameraSchema = {
   /** Top position of the camera in world coordinates */
-  top: import_core22.field.float64().default(0),
+  top: import_core23.field.float64().default(0),
   /** Left position of the camera in world coordinates */
-  left: import_core22.field.float64().default(0),
+  left: import_core23.field.float64().default(0),
   /** Zoom level (1 = 100%, 2 = 200%, 0.5 = 50%) */
-  zoom: import_core22.field.float64().default(1),
+  zoom: import_core23.field.float64().default(1),
   /** Whether the camera viewport intersects any blocks */
-  canSeeBlocks: import_core22.field.boolean().default(true),
+  canSeeBlocks: import_core23.field.boolean().default(true),
   /** Reference to a block that the camera can currently see (for optimization) */
-  lastSeenBlock: import_core22.field.ref()
+  lastSeenBlock: import_core23.field.ref()
 };
-var CameraDef = class extends import_canvas_store28.CanvasSingletonDef {
+var CameraDef = class extends import_canvas_store29.CanvasSingletonDef {
   constructor() {
     super({ name: "camera", sync: "local" }, CameraSchema);
   }
@@ -2049,25 +2152,25 @@ var CameraDef = class extends import_canvas_store28.CanvasSingletonDef {
 var Camera = new CameraDef();
 
 // src/singletons/Controls.ts
-var import_canvas_store29 = require("@woven-ecs/canvas-store");
-var import_core23 = require("@woven-ecs/core");
+var import_canvas_store30 = require("@woven-ecs/canvas-store");
+var import_core24 = require("@woven-ecs/core");
 var ControlsSchema = {
   /** Tool activated by left mouse button */
-  leftMouseTool: import_core23.field.string().max(32).default("select"),
+  leftMouseTool: import_core24.field.string().max(32).default("select"),
   /** Tool activated by middle mouse button */
-  middleMouseTool: import_core23.field.string().max(32).default("hand"),
+  middleMouseTool: import_core24.field.string().max(32).default("hand"),
   /** Tool activated by right mouse button */
-  rightMouseTool: import_core23.field.string().max(32).default("hand"),
+  rightMouseTool: import_core24.field.string().max(32).default("hand"),
   /** Tool activated by mouse wheel */
-  wheelTool: import_core23.field.string().max(32).default("scroll"),
+  wheelTool: import_core24.field.string().max(32).default("scroll"),
   /** Tool activated by mouse wheel with modifier key held */
-  modWheelTool: import_core23.field.string().max(32).default("zoom"),
+  modWheelTool: import_core24.field.string().max(32).default("zoom"),
   /** JSON snapshot of block to place on next click (empty string = no placement active) */
-  heldSnapshot: import_core23.field.string().max(65536).default(""),
+  heldSnapshot: import_core24.field.string().max(65536).default(""),
   /** User-facing tool name for UI highlighting (may differ from leftMouseTool during draw/drag-out) */
-  activeToolName: import_core23.field.string().max(32).default("select")
+  activeToolName: import_core24.field.string().max(32).default("select")
 };
-var ControlsDef = class extends import_canvas_store29.CanvasSingletonDef {
+var ControlsDef = class extends import_canvas_store30.CanvasSingletonDef {
   constructor() {
     super({ name: "controls" }, ControlsSchema);
   }
@@ -2106,19 +2209,19 @@ var ControlsDef = class extends import_canvas_store29.CanvasSingletonDef {
 var Controls = new ControlsDef();
 
 // src/singletons/Cursor.ts
-var import_canvas_store30 = require("@woven-ecs/canvas-store");
-var import_core24 = require("@woven-ecs/core");
+var import_canvas_store31 = require("@woven-ecs/canvas-store");
+var import_core25 = require("@woven-ecs/core");
 var CursorSchema = {
   /** Base cursor kind (from current tool) */
-  cursorKind: import_core24.field.string().max(64).default("select"),
+  cursorKind: import_core25.field.string().max(64).default("select"),
   /** Base cursor rotation in radians */
-  rotation: import_core24.field.float64().default(0),
+  rotation: import_core25.field.float64().default(0),
   /** Context-specific cursor kind (overrides cursorKind when set, e.g., during drag/hover) */
-  contextCursorKind: import_core24.field.string().max(64).default(""),
+  contextCursorKind: import_core25.field.string().max(64).default(""),
   /** Context cursor rotation in radians */
-  contextRotation: import_core24.field.float64().default(0)
+  contextRotation: import_core25.field.float64().default(0)
 };
-var CursorDef2 = class extends import_canvas_store30.CanvasSingletonDef {
+var CursorDef2 = class extends import_canvas_store31.CanvasSingletonDef {
   constructor() {
     super({ name: "cursor" }, CursorSchema);
   }
@@ -2163,10 +2266,10 @@ var CursorDef2 = class extends import_canvas_store30.CanvasSingletonDef {
 var Cursor = new CursorDef2();
 
 // src/singletons/FrameContainmentState.ts
-var import_core25 = require("@woven-ecs/core");
+var import_core26 = require("@woven-ecs/core");
 
 // src/EditorStateDef.ts
-var import_canvas_store31 = require("@woven-ecs/canvas-store");
+var import_canvas_store32 = require("@woven-ecs/canvas-store");
 
 // src/machine.ts
 var import_xstate = require("xstate");
@@ -2194,7 +2297,7 @@ function runMachine(machine, currentState, context, events) {
 }
 
 // src/EditorStateDef.ts
-var EditorStateDef = class extends import_canvas_store31.CanvasSingletonDef {
+var EditorStateDef = class extends import_canvas_store32.CanvasSingletonDef {
   constructor(name, schema) {
     super({ name, sync: "none" }, schema);
   }
@@ -2271,29 +2374,29 @@ function defineEditorState(name, schema) {
 // src/singletons/FrameContainmentState.ts
 var FrameContainmentState = defineEditorState("frameContainmentState", {
   /** Current state machine state */
-  state: import_core25.field.string().max(16).default(FrameContainmentStateEnum.Idle),
+  state: import_core26.field.string().max(16).default(FrameContainmentStateEnum.Idle),
   /** EntityId of the frame currently highlighted as a drop target, or null */
-  highlightedFrame: import_core25.field.ref()
+  highlightedFrame: import_core26.field.ref()
 });
 
 // src/singletons/Grid.ts
-var import_canvas_store32 = require("@woven-ecs/canvas-store");
-var import_core26 = require("@woven-ecs/core");
+var import_canvas_store33 = require("@woven-ecs/canvas-store");
+var import_core27 = require("@woven-ecs/core");
 var GridSchema = {
   /** Whether grid snapping is enabled */
-  enabled: import_core26.field.boolean().default(false),
+  enabled: import_core27.field.boolean().default(false),
   /** Whether resized/rotated objects must stay aligned to the grid */
-  strict: import_core26.field.boolean().default(false),
+  strict: import_core27.field.boolean().default(false),
   /** Width of each grid column in world units */
-  colWidth: import_core26.field.float64().default(20),
+  colWidth: import_core27.field.float64().default(20),
   /** Height of each grid row in world units */
-  rowHeight: import_core26.field.float64().default(20),
+  rowHeight: import_core27.field.float64().default(20),
   /** Angular snap increment in radians when grid is enabled */
-  snapAngleRad: import_core26.field.float64().default(Math.PI / 36),
+  snapAngleRad: import_core27.field.float64().default(Math.PI / 36),
   /** Angular snap increment in radians when shift key is held */
-  shiftSnapAngleRad: import_core26.field.float64().default(Math.PI / 12)
+  shiftSnapAngleRad: import_core27.field.float64().default(Math.PI / 12)
 };
-var GridDef = class extends import_canvas_store32.CanvasSingletonDef {
+var GridDef = class extends import_canvas_store33.CanvasSingletonDef {
   constructor() {
     super({ name: "grid" }, GridSchema);
   }
@@ -2353,17 +2456,17 @@ var GridDef = class extends import_canvas_store32.CanvasSingletonDef {
 var Grid = new GridDef();
 
 // src/singletons/Intersect.ts
-var import_canvas_store33 = require("@woven-ecs/canvas-store");
-var import_core27 = require("@woven-ecs/core");
+var import_canvas_store34 = require("@woven-ecs/canvas-store");
+var import_core28 = require("@woven-ecs/core");
 var IntersectSchema = {
   // Store up to 5 intersected entity IDs
-  entity1: import_core27.field.ref(),
-  entity2: import_core27.field.ref(),
-  entity3: import_core27.field.ref(),
-  entity4: import_core27.field.ref(),
-  entity5: import_core27.field.ref()
+  entity1: import_core28.field.ref(),
+  entity2: import_core28.field.ref(),
+  entity3: import_core28.field.ref(),
+  entity4: import_core28.field.ref(),
+  entity5: import_core28.field.ref()
 };
-var IntersectDef = class extends import_canvas_store33.CanvasSingletonDef {
+var IntersectDef = class extends import_canvas_store34.CanvasSingletonDef {
   constructor() {
     super({ name: "intersect" }, IntersectSchema);
   }
@@ -2412,31 +2515,31 @@ var IntersectDef = class extends import_canvas_store33.CanvasSingletonDef {
 var Intersect = new IntersectDef();
 
 // src/singletons/Keyboard.ts
-var import_canvas_store34 = require("@woven-ecs/canvas-store");
-var import_core28 = require("@woven-ecs/core");
+var import_canvas_store35 = require("@woven-ecs/canvas-store");
+var import_core29 = require("@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: import_core28.field.buffer(import_core28.field.uint8()).size(KEY_BUFFER_SIZE),
+  keysDown: import_core29.field.buffer(import_core29.field.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: import_core28.field.buffer(import_core28.field.uint8()).size(KEY_BUFFER_SIZE),
+  keysDownTrigger: import_core29.field.buffer(import_core29.field.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: import_core28.field.buffer(import_core28.field.uint8()).size(KEY_BUFFER_SIZE),
+  keysUpTrigger: import_core29.field.buffer(import_core29.field.uint8()).size(KEY_BUFFER_SIZE),
   /** Common modifier - Shift key is down */
-  shiftDown: import_core28.field.boolean().default(false),
+  shiftDown: import_core29.field.boolean().default(false),
   /** Common modifier - Alt/Option key is down */
-  altDown: import_core28.field.boolean().default(false),
+  altDown: import_core29.field.boolean().default(false),
   /** Common modifier - Ctrl (Windows/Linux) or Cmd (Mac) is down */
-  modDown: import_core28.field.boolean().default(false)
+  modDown: import_core29.field.boolean().default(false)
 };
 function getBit(buffer, bitIndex) {
   if (bitIndex < 0 || bitIndex >= buffer.length * 8) return false;
@@ -2444,7 +2547,7 @@ function getBit(buffer, bitIndex) {
   const bitOffset = bitIndex % 8;
   return (buffer[byteIndex] & 1 << bitOffset) !== 0;
 }
-var KeyboardDef = class extends import_canvas_store34.CanvasSingletonDef {
+var KeyboardDef = class extends import_canvas_store35.CanvasSingletonDef {
   constructor() {
     super({ name: "keyboard" }, KeyboardSchema);
   }
@@ -2718,27 +2821,27 @@ var Key = {
 };
 
 // src/singletons/Mouse.ts
-var import_canvas_store35 = require("@woven-ecs/canvas-store");
-var import_core29 = require("@woven-ecs/core");
+var import_canvas_store36 = require("@woven-ecs/canvas-store");
+var import_core30 = require("@woven-ecs/core");
 var MouseSchema = {
   /** Current mouse position relative to the editor element [x, y] */
-  position: import_core29.field.tuple(import_core29.field.float32(), 2).default([0, 0]),
+  position: import_core30.field.tuple(import_core30.field.float32(), 2).default([0, 0]),
   /** Horizontal wheel delta (positive = scroll right) */
-  wheelDeltaX: import_core29.field.float32().default(0),
+  wheelDeltaX: import_core30.field.float32().default(0),
   /** Vertical wheel delta (positive = scroll down), normalized across browsers */
-  wheelDeltaY: import_core29.field.float32().default(0),
+  wheelDeltaY: import_core30.field.float32().default(0),
   /** True for 1 frame when mouse moves */
-  moveTrigger: import_core29.field.boolean().default(false),
+  moveTrigger: import_core30.field.boolean().default(false),
   /** True for 1 frame when wheel is scrolled */
-  wheelTrigger: import_core29.field.boolean().default(false),
+  wheelTrigger: import_core30.field.boolean().default(false),
   /** True for 1 frame when mouse enters the editor element */
-  enterTrigger: import_core29.field.boolean().default(false),
+  enterTrigger: import_core30.field.boolean().default(false),
   /** True for 1 frame when mouse leaves the editor element */
-  leaveTrigger: import_core29.field.boolean().default(false),
+  leaveTrigger: import_core30.field.boolean().default(false),
   /** Whether the mouse is over a UI element (not the canvas) */
-  obscured: import_core29.field.boolean().default(false)
+  obscured: import_core30.field.boolean().default(false)
 };
-var MouseDef = class extends import_canvas_store35.CanvasSingletonDef {
+var MouseDef = class extends import_canvas_store36.CanvasSingletonDef {
   constructor() {
     super({ name: "mouse" }, MouseSchema);
   }
@@ -2776,14 +2879,14 @@ var MouseDef = class extends import_canvas_store35.CanvasSingletonDef {
 var Mouse = new MouseDef();
 
 // src/singletons/RankBounds.ts
-var import_canvas_store36 = require("@woven-ecs/canvas-store");
-var import_core30 = require("@woven-ecs/core");
+var import_canvas_store37 = require("@woven-ecs/canvas-store");
+var import_core31 = require("@woven-ecs/core");
 var import_fractional_indexing_jittered = require("fractional-indexing-jittered");
 var RankBoundsSchema = {
-  minRank: import_core30.field.string().max(36).default(""),
-  maxRank: import_core30.field.string().max(36).default("")
+  minRank: import_core31.field.string().max(36).default(""),
+  maxRank: import_core31.field.string().max(36).default("")
 };
-var RankBoundsDef = class extends import_canvas_store36.CanvasSingletonDef {
+var RankBoundsDef = class extends import_canvas_store37.CanvasSingletonDef {
   constructor() {
     super({ name: "rankBounds" }, RankBoundsSchema);
   }
@@ -2839,73 +2942,73 @@ var RankBoundsDef = class extends import_canvas_store36.CanvasSingletonDef {
 var RankBounds = new RankBoundsDef();
 
 // src/singletons/ScaleWithZoomState.ts
-var import_canvas_store37 = require("@woven-ecs/canvas-store");
-var import_core31 = require("@woven-ecs/core");
-var ScaleWithZoomState = (0, import_canvas_store37.defineCanvasSingleton)(
+var import_canvas_store38 = require("@woven-ecs/canvas-store");
+var import_core32 = require("@woven-ecs/core");
+var ScaleWithZoomState = (0, import_canvas_store38.defineCanvasSingleton)(
   { name: "scaleWithZoomState" },
   {
     /** Last processed zoom level */
-    lastZoom: import_core31.field.float64().default(1)
+    lastZoom: import_core32.field.float64().default(1)
   }
 );
 
 // src/singletons/ScrollEdgesStateSingleton.ts
-var import_core32 = require("@woven-ecs/core");
+var import_core33 = require("@woven-ecs/core");
 var ScrollEdgesStateSingleton = defineEditorState("scrollEdgesState", {
   /** Current state of the scroll edges state machine */
-  state: import_core32.field.enum(ScrollEdgesState).default(ScrollEdgesState.Idle),
+  state: import_core33.field.enum(ScrollEdgesState).default(ScrollEdgesState.Idle),
   /** Timestamp when pointer first entered the edge zone */
-  edgeEnterStartTime: import_core32.field.float64().default(0)
+  edgeEnterStartTime: import_core33.field.float64().default(0)
 });
 
 // src/singletons/SelectionStateSingleton.ts
-var import_core33 = require("@woven-ecs/core");
+var import_core34 = require("@woven-ecs/core");
 var SelectionStateSingleton = defineEditorState("selectionState", {
-  state: import_core33.field.enum(SelectionState).default(SelectionState.Idle),
-  dragStart: import_core33.field.tuple(import_core33.field.float64(), 2).default([0, 0]),
-  pointingStartClient: import_core33.field.tuple(import_core33.field.float64(), 2).default([0, 0]),
-  pointingStartWorld: import_core33.field.tuple(import_core33.field.float64(), 2).default([0, 0]),
-  draggedEntityStart: import_core33.field.tuple(import_core33.field.float64(), 2).default([0, 0]),
-  draggedEntity: import_core33.field.ref(),
-  cloneGeneratorSeed: import_core33.field.string().max(36).default(""),
-  isCloning: import_core33.field.boolean()
+  state: import_core34.field.enum(SelectionState).default(SelectionState.Idle),
+  dragStart: import_core34.field.tuple(import_core34.field.float64(), 2).default([0, 0]),
+  pointingStartClient: import_core34.field.tuple(import_core34.field.float64(), 2).default([0, 0]),
+  pointingStartWorld: import_core34.field.tuple(import_core34.field.float64(), 2).default([0, 0]),
+  draggedEntityStart: import_core34.field.tuple(import_core34.field.float64(), 2).default([0, 0]),
+  draggedEntity: import_core34.field.ref(),
+  cloneGeneratorSeed: import_core34.field.string().max(36).default(""),
+  isCloning: import_core34.field.boolean()
 });
 
 // src/singletons/Tick.ts
-var import_canvas_store38 = require("@woven-ecs/canvas-store");
-var import_core34 = require("@woven-ecs/core");
-var Tick = (0, import_canvas_store38.defineCanvasSingleton)(
+var import_canvas_store39 = require("@woven-ecs/canvas-store");
+var import_core35 = require("@woven-ecs/core");
+var Tick = (0, import_canvas_store39.defineCanvasSingleton)(
   { name: "tick" },
   {
     /** Current tick number (increments each tick) */
-    number: import_core34.field.uint32().default(0),
+    number: import_core35.field.uint32().default(0),
     /** Time since last tick in seconds */
-    delta: import_core34.field.float64().default(0),
+    delta: import_core35.field.float64().default(0),
     /** Timestamp of current tick in milliseconds (from performance.now()) */
-    time: import_core34.field.float64().default(0),
+    time: import_core35.field.float64().default(0),
     /** Timestamp of previous tick in milliseconds (0 if first tick) */
-    lastTime: import_core34.field.float64().default(0)
+    lastTime: import_core35.field.float64().default(0)
   }
 );
 
 // src/singletons/TransformBoxStateSingleton.ts
-var import_core35 = require("@woven-ecs/core");
+var import_core36 = require("@woven-ecs/core");
 var TransformBoxStateSingleton = defineEditorState("transformBoxState", {
-  state: import_core35.field.string().max(32).default(TransformBoxState.None),
-  transformBoxId: import_core35.field.ref()
+  state: import_core36.field.string().max(32).default(TransformBoxState.None),
+  transformBoxId: import_core36.field.ref()
 });
 
 // src/systems/capture/captureFrameContainmentSystem.ts
-var import_canvas_store40 = require("@woven-ecs/canvas-store");
-var import_core48 = require("@woven-ecs/core");
+var import_canvas_store42 = require("@woven-ecs/canvas-store");
+var import_core51 = require("@woven-ecs/core");
 var import_xstate2 = require("xstate");
 
 // src/EditorSystem.ts
-var import_core36 = require("@woven-ecs/core");
+var import_core37 = require("@woven-ecs/core");
 var DEFAULT_PRIORITY = 0;
 function defineEditorSystem(options, execute) {
   return {
-    _system: new import_core36.MainThreadSystem(execute),
+    _system: new import_core37.MainThreadSystem(execute),
     phase: options.phase,
     priority: options.priority ?? DEFAULT_PRIORITY
   };
@@ -2968,12 +3071,12 @@ function getMouseInput(ctx) {
 
 // src/events/pointerInputEvents.ts
 var import_math7 = require("@woven-canvas/math");
-var import_core47 = require("@woven-ecs/core");
+var import_core50 = require("@woven-ecs/core");
 
 // src/helpers/blockDefs.ts
-var import_core37 = require("@woven-ecs/core");
+var import_core38 = require("@woven-ecs/core");
 function getBlockDefs(ctx) {
-  const { editor } = (0, import_core37.getResources)(ctx);
+  const { editor } = (0, import_core38.getResources)(ctx);
   return editor.blockDefs;
 }
 function getBlockDef(ctx, tag) {
@@ -2986,6 +3089,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) {
@@ -2997,9 +3103,9 @@ function getBlockResizeMode(ctx, entityId) {
 
 // src/helpers/computeAabb.ts
 var import_math4 = require("@woven-canvas/math");
-var import_core38 = require("@woven-ecs/core");
+var import_core39 = require("@woven-ecs/core");
 function computeAabb(ctx, entityId, out) {
-  if ((0, import_core38.hasComponent)(ctx, entityId, HitGeometry)) {
+  if ((0, import_core39.hasComponent)(ctx, entityId, HitGeometry)) {
     const pts = HitGeometry.getExtremaWorld(ctx, entityId);
     import_math4.Aabb.setFromPoints(out, pts);
   } else {
@@ -3008,6 +3114,17 @@ function computeAabb(ctx, entityId, out) {
   }
 }
 
+// src/helpers/createBlock.ts
+var import_canvas_store40 = require("@woven-ecs/canvas-store");
+var import_core40 = require("@woven-ecs/core");
+function createBlock(ctx, block) {
+  const entityId = (0, import_core40.createEntity)(ctx);
+  (0, import_core40.addComponent)(ctx, entityId, import_canvas_store40.Synced, { id: crypto.randomUUID() });
+  (0, import_core40.addComponent)(ctx, entityId, Block, { ...block, rank: block.rank ?? RankBounds.genNext(ctx) });
+  PlaceBlockEvent.spawn(ctx, { entityId });
+  return entityId;
+}
+
 // src/helpers/embed.ts
 function detectEmbedProvider(url) {
   try {
@@ -3139,10 +3256,10 @@ function resolveEmbedUrl(url, provider) {
 }
 
 // src/helpers/findFrameAtPoint.ts
-var import_core40 = require("@woven-ecs/core");
+var import_core42 = require("@woven-ecs/core");
 
 // src/helpers/hierarchy.ts
-var import_core39 = require("@woven-ecs/core");
+var import_core41 = require("@woven-ecs/core");
 function getWorldPosition(ctx, entityId, out) {
   return Block.getWorldPosition(ctx, entityId, out);
 }
@@ -3150,7 +3267,7 @@ function worldToLocal(ctx, entityId, worldPos, out) {
   const result = out ?? [0, 0];
   const block = Block.read(ctx, entityId);
   const parentId = block.parentId;
-  if (parentId === null || !(0, import_core39.hasComponent)(ctx, parentId, Block)) {
+  if (parentId === null || !(0, import_core41.hasComponent)(ctx, parentId, Block)) {
     result[0] = worldPos[0];
     result[1] = worldPos[1];
     return result;
@@ -3163,7 +3280,7 @@ function worldToLocal(ctx, entityId, worldPos, out) {
 function isAncestor(ctx, entityId, candidateAncestor) {
   let current = entityId;
   const visited = /* @__PURE__ */ new Set();
-  while ((0, import_core39.hasComponent)(ctx, current, Block)) {
+  while ((0, import_core41.hasComponent)(ctx, current, Block)) {
     const block = Block.read(ctx, current);
     const parentId = block.parentId;
     if (parentId === null) break;
@@ -3175,11 +3292,11 @@ function isAncestor(ctx, entityId, candidateAncestor) {
   return false;
 }
 function getChildren(ctx, parentId) {
-  return [...(0, import_core39.getBackrefs)(ctx, parentId, Block, "parentId")];
+  return [...(0, import_core41.getBackrefs)(ctx, parentId, Block, "parentId")];
 }
 function getDescendants(ctx, parentId) {
   const result = [];
-  const children = (0, import_core39.getBackrefs)(ctx, parentId, Block, "parentId");
+  const children = (0, import_core41.getBackrefs)(ctx, parentId, Block, "parentId");
   for (const childId of children) {
     result.push(childId);
     result.push(...getDescendants(ctx, childId));
@@ -3187,11 +3304,11 @@ function getDescendants(ctx, parentId) {
   return result;
 }
 function cascadeDelete(ctx, entityId) {
-  const children = (0, import_core39.getBackrefs)(ctx, entityId, Block, "parentId");
+  const children = (0, import_core41.getBackrefs)(ctx, entityId, Block, "parentId");
   for (const childId of children) {
     cascadeDelete(ctx, childId);
   }
-  (0, import_core39.removeEntity)(ctx, entityId);
+  (0, import_core41.removeEntity)(ctx, entityId);
 }
 
 // src/helpers/sortBlocks.ts
@@ -3221,16 +3338,19 @@ 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);
 }
 
 // src/helpers/findFrameAtPoint.ts
-var frameQuery = (0, import_core40.defineQuery)((q) => q.with(Block, Frame));
+var frameQuery = (0, import_core42.defineQuery)((q) => q.with(Block, Frame));
 function getBlockDef2(ctx) {
   return (id) => {
-    if (!(0, import_core40.hasComponent)(ctx, id, Block)) return null;
+    if (!(0, import_core42.hasComponent)(ctx, id, Block)) return null;
     const block = Block.read(ctx, id);
     return { rank: block.rank, stratum: "content", parentId: block.parentId };
   };
@@ -3241,7 +3361,7 @@ function findFrameAtPoint(ctx, point, exclude = null) {
   const getBlock = getBlockDef2(ctx);
   for (const frameId of frameQuery.current(ctx)) {
     if (frameId === exclude) continue;
-    if ((0, import_core40.hasComponent)(ctx, frameId, Selected)) continue;
+    if ((0, import_core42.hasComponent)(ctx, frameId, Selected)) continue;
     if (!Aabb.containsPoint(ctx, frameId, point)) continue;
     if (exclude !== null && isAncestor(ctx, frameId, exclude)) continue;
     const block = Block.read(ctx, frameId);
@@ -3255,22 +3375,40 @@ function findFrameAtPoint(ctx, point, exclude = null) {
 }
 
 // src/helpers/held.ts
-var import_core41 = require("@woven-ecs/core");
+var import_core43 = require("@woven-ecs/core");
 function isHeldByRemote(ctx, entityId) {
-  if (!(0, import_core41.hasComponent)(ctx, entityId, Held)) return false;
-  const { sessionId } = (0, import_core41.getResources)(ctx);
+  if (!(0, import_core43.hasComponent)(ctx, entityId, Held)) return false;
+  const { sessionId } = (0, import_core43.getResources)(ctx);
   const held = Held.read(ctx, entityId);
   return held.sessionId !== "" && held.sessionId !== sessionId;
 }
 
 // src/helpers/intersect.ts
 var import_math5 = require("@woven-canvas/math");
-var import_core42 = require("@woven-ecs/core");
-var blocksWithAabb = (0, import_core42.defineQuery)((q) => q.with(Block, Aabb));
+var import_core45 = require("@woven-ecs/core");
+
+// src/helpers/layerRank.ts
+var import_core44 = require("@woven-ecs/core");
+function resolveLayerRank(ctx, entityId) {
+  if (!(0, import_core44.hasComponent)(ctx, entityId, Block)) return "";
+  const layerId = Block.read(ctx, entityId).layerId;
+  if (layerId !== null && (0, import_core44.hasComponent)(ctx, layerId, Layer)) {
+    return Layer.read(ctx, layerId).rank;
+  }
+  return "";
+}
+function isLayerInteractive(ctx, layerId) {
+  if (layerId === null || !(0, import_core44.hasComponent)(ctx, layerId, Layer)) return true;
+  const layer = Layer.read(ctx, layerId);
+  return !layer.hidden && !layer.locked;
+}
+
+// src/helpers/intersect.ts
+var blocksWithAabb = (0, import_core45.defineQuery)((q) => q.with(Block, Aabb));
 function isPointInsideAncestorFrames(ctx, entityId, point) {
   let current = Block.read(ctx, entityId).parentId;
-  while (current !== null && (0, import_core42.hasComponent)(ctx, current, Block)) {
-    if ((0, import_core42.hasComponent)(ctx, current, Frame)) {
+  while (current !== null && (0, import_core45.hasComponent)(ctx, current, Block)) {
+    if ((0, import_core45.hasComponent)(ctx, current, Frame)) {
       if (!Aabb.containsPoint(ctx, current, point)) {
         return false;
       }
@@ -3281,8 +3419,8 @@ function isPointInsideAncestorFrames(ctx, entityId, point) {
 }
 function isAabbInsideAncestorFrames(ctx, entityId, bounds) {
   let current = Block.read(ctx, entityId).parentId;
-  while (current !== null && (0, import_core42.hasComponent)(ctx, current, Block)) {
-    if ((0, import_core42.hasComponent)(ctx, current, Frame)) {
+  while (current !== null && (0, import_core45.hasComponent)(ctx, current, Block)) {
+    if ((0, import_core45.hasComponent)(ctx, current, Frame)) {
       const { value: frameAabb } = Aabb.read(ctx, current);
       if (!import_math5.Aabb.intersects(bounds, frameAabb)) {
         return false;
@@ -3296,10 +3434,13 @@ function intersectPoint(ctx, point, entityIds) {
   const intersects = [];
   const entities = entityIds ?? blocksWithAabb.current(ctx);
   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 ((0, import_core42.hasComponent)(ctx, entityId, HitGeometry)) {
+    if ((0, import_core45.hasComponent)(ctx, entityId, HitGeometry)) {
       if (!HitGeometry.containsPointWorld(ctx, entityId, point)) {
         continue;
       }
@@ -3319,12 +3460,15 @@ function intersectAabb(ctx, bounds, entityIds) {
   const intersecting = [];
   const entities = entityIds ?? blocksWithAabb.current(ctx);
   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 (!import_math5.Aabb.intersects(bounds, entityAabb)) {
       continue;
     }
     if (!import_math5.Aabb.contains(bounds, entityAabb)) {
-      if ((0, import_core42.hasComponent)(ctx, entityId, HitGeometry)) {
+      if ((0, import_core45.hasComponent)(ctx, entityId, HitGeometry)) {
         if (!HitGeometry.intersectsAabbWorld(ctx, entityId, bounds)) {
           continue;
         }
@@ -3343,12 +3487,13 @@ function intersectAabb(ctx, bounds, entityIds) {
 }
 function sortByRankDescending(ctx, entityIds) {
   const getBlock = (id) => {
-    if (!(0, import_core42.hasComponent)(ctx, id, Block)) return null;
+    if (!(0, import_core45.hasComponent)(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) => ({
@@ -3365,12 +3510,14 @@ function getTopmostBlockAtPoint(ctx, point) {
 
 // src/helpers/intersectCapsule.ts
 var import_math6 = require("@woven-canvas/math");
-var import_core43 = require("@woven-ecs/core");
+var import_core46 = require("@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 && (0, import_core43.hasComponent)(ctx, current, Block)) {
-    if ((0, import_core43.hasComponent)(ctx, current, Frame)) {
+  while (current !== null && (0, import_core46.hasComponent)(ctx, current, Block)) {
+    if ((0, import_core46.hasComponent)(ctx, current, Frame)) {
       const { value: frameAabb } = Aabb.read(ctx, current);
       if (!import_math6.Capsule.intersectsAabb(capsule, frameAabb)) {
         return false;
@@ -3388,7 +3535,7 @@ function intersectCapsule(ctx, capsule, entityIds) {
     if (!import_math6.Aabb.intersects(capsuleBounds, aabb.value)) {
       continue;
     }
-    if ((0, import_core43.hasComponent)(ctx, entityId, HitGeometry)) {
+    if ((0, import_core46.hasComponent)(ctx, entityId, HitGeometry)) {
       if (!intersectsCapsuleHitGeometry(ctx, entityId, capsule)) {
         continue;
       }
@@ -3435,12 +3582,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];
+      import_math6.Mat2.transformPoint(_uvToWorldMatrix2, _polyPt2);
+      _worldPolygon2[i * 2] = _polyPt2[0];
+      _worldPolygon2[i * 2 + 1] = _polyPt2[1];
+    }
+    if (import_math6.Polygon.intersectsCapsule(_worldPolygon2, polygonPointCount, capsule)) {
+      return true;
+    }
+  }
   return false;
 }
 
 // src/helpers/ref.ts
-var import_canvas_store39 = require("@woven-ecs/canvas-store");
-var import_core44 = require("@woven-ecs/core");
+var import_canvas_store41 = require("@woven-ecs/canvas-store");
+var import_core47 = require("@woven-ecs/core");
 function convertRefsToUuids(ctx, schema, data) {
   const result = { ...data };
   for (const [fieldName, fieldBuilder] of Object.entries(schema)) {
@@ -3453,8 +3613,8 @@ function convertRefsToUuids(ctx, schema, data) {
 }
 function getEntityUuid(ctx, entityId) {
   if (entityId == null) return null;
-  if (!(0, import_core44.hasComponent)(ctx, entityId, import_canvas_store39.Synced)) return null;
-  return import_canvas_store39.Synced.read(ctx, entityId).id;
+  if (!(0, import_core47.hasComponent)(ctx, entityId, import_canvas_store41.Synced)) return null;
+  return import_canvas_store41.Synced.read(ctx, entityId).id;
 }
 function getRefFieldNames(schema) {
   const refFields = [];
@@ -3478,26 +3638,26 @@ function resolveRefFields(ctx, entityId, componentDef, componentData, uuidToEnti
 }
 
 // src/helpers/select.ts
-var import_core45 = require("@woven-ecs/core");
-var selectedQuery = (0, import_core45.defineQuery)((q) => q.with(Selected));
-var blockQuery = (0, import_core45.defineQuery)((q) => q.with(Block));
+var import_core48 = require("@woven-ecs/core");
+var selectedQuery = (0, import_core48.defineQuery)((q) => q.with(Selected));
+var blockQuery = (0, import_core48.defineQuery)((q) => q.with(Block));
 function selectBlock(ctx, entityId) {
-  if ((0, import_core45.hasComponent)(ctx, entityId, Selected)) return;
+  if ((0, import_core48.hasComponent)(ctx, entityId, Selected)) return;
   if (isHeldByRemote(ctx, entityId)) return;
-  if ((0, import_core45.hasComponent)(ctx, entityId, Block)) {
+  if ((0, import_core48.hasComponent)(ctx, entityId, Block)) {
     const block = Block.read(ctx, entityId);
     if (!canBlockInteract(ctx, block.tag)) return;
   }
-  const { sessionId } = (0, import_core45.getResources)(ctx);
-  (0, import_core45.addComponent)(ctx, entityId, Selected, {});
-  if (!(0, import_core45.hasComponent)(ctx, entityId, Held)) {
-    (0, import_core45.addComponent)(ctx, entityId, Held, { sessionId });
+  const { sessionId } = (0, import_core48.getResources)(ctx);
+  (0, import_core48.addComponent)(ctx, entityId, Selected, {});
+  if (!(0, import_core48.hasComponent)(ctx, entityId, Held)) {
+    (0, import_core48.addComponent)(ctx, entityId, Held, { sessionId });
   }
 }
 function deselectBlock(ctx, entityId) {
-  if (!(0, import_core45.hasComponent)(ctx, entityId, Selected)) return;
-  (0, import_core45.removeComponent)(ctx, entityId, Selected);
-  (0, import_core45.removeComponent)(ctx, entityId, Held);
+  if (!(0, import_core48.hasComponent)(ctx, entityId, Selected)) return;
+  (0, import_core48.removeComponent)(ctx, entityId, Selected);
+  (0, import_core48.removeComponent)(ctx, entityId, Held);
 }
 function deselectAll(ctx) {
   for (const entityId of selectedQuery.current(ctx)) {
@@ -3511,10 +3671,10 @@ function selectAll(ctx) {
 }
 
 // src/helpers/user.ts
-var import_core46 = require("@woven-ecs/core");
-var userQuery = (0, import_core46.defineQuery)((q) => q.with(User));
+var import_core49 = require("@woven-ecs/core");
+var userQuery = (0, import_core49.defineQuery)((q) => q.with(User));
 function getMyUserEntityId(ctx) {
-  const mySessionId = (0, import_core46.getResources)(ctx).sessionId;
+  const mySessionId = (0, import_core49.getResources)(ctx).sessionId;
   for (const eid of userQuery.current(ctx)) {
     const user = User.read(ctx, eid);
     if (user.sessionId === mySessionId) {
@@ -3581,7 +3741,7 @@ function generateUuidBySeed(originalUuid, generatorSeed) {
 // src/events/pointerInputEvents.ts
 var DEFAULT_CLICK_MOVE_THRESHOLD = 3;
 var DEFAULT_CLICK_FRAME_THRESHOLD = 30;
-var pointerQuery = (0, import_core47.defineQuery)((q) => q.tracking(Pointer));
+var pointerQuery = (0, import_core50.defineQuery)((q) => q.tracking(Pointer));
 var trackingState = /* @__PURE__ */ new Map();
 function getTrackingState(ctx) {
   const key = ctx.readerId;
@@ -3704,18 +3864,18 @@ function clearPointerTrackingState(ctx) {
 }
 
 // src/systems/capture/captureFrameContainmentSystem.ts
-var selectedQuery2 = (0, import_core48.defineQuery)((q) => q.with(Block, Selected));
+var selectedQuery2 = (0, import_core51.defineQuery)((q) => q.with(Block, Selected));
 function spawnAssignments(ctx, targetFrame) {
   const draggedEntity = getDraggedEntity(ctx);
   if (draggedEntity === null) return;
   const assignments = [];
-  if ((0, import_core48.hasComponent)(ctx, draggedEntity, TransformBox)) {
+  if ((0, import_core51.hasComponent)(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 ((0, import_core48.hasComponent)(ctx, draggedEntity, import_canvas_store40.Synced)) {
+  } else if ((0, import_core51.hasComponent)(ctx, draggedEntity, import_canvas_store42.Synced)) {
     if (targetFrame !== null && draggedEntity === targetFrame) return;
     if (targetFrame !== null && isAncestor(ctx, targetFrame, draggedEntity)) return;
     assignments.push({ entityId: draggedEntity, frameId: targetFrame });
@@ -3814,9 +3974,9 @@ var captureFrameContainmentSystem = defineEditorSystem({ phase: "capture", prior
 });
 
 // src/systems/capture/hoverCursorSystem.ts
-var import_core49 = require("@woven-ecs/core");
-var hoveredHandleQuery = (0, import_core49.defineQuery)((q) => q.with(Hovered, TransformHandle).tracking(Hovered));
-var transformBoxQuery = (0, import_core49.defineQuery)((q) => q.with(Block, TransformBox).tracking(Block));
+var import_core52 = require("@woven-ecs/core");
+var hoveredHandleQuery = (0, import_core52.defineQuery)((q) => q.with(Hovered, TransformHandle).tracking(Hovered));
+var transformBoxQuery = (0, import_core52.defineQuery)((q) => q.with(Block, TransformBox).tracking(Block));
 var hoverCursorSystem = defineEditorSystem({ phase: "capture" }, (ctx) => {
   const addedHandles = hoveredHandleQuery.added(ctx);
   const removedHandles = hoveredHandleQuery.removed(ctx);
@@ -3840,17 +4000,18 @@ var hoverCursorSystem = defineEditorSystem({ phase: "capture" }, (ctx) => {
 });
 
 // src/systems/capture/keybindSystem.ts
-var import_core50 = require("@woven-ecs/core");
+var import_core53 = require("@woven-ecs/core");
 var keybindSystem = defineEditorSystem({ phase: "capture" }, (ctx) => {
+  if (isReadonly(ctx)) return;
   const keyboard = Keyboard.read(ctx);
-  const { editor } = (0, import_core50.getResources)(ctx);
+  const { editor } = (0, import_core53.getResources)(ctx);
   for (const keybind of editor.keybinds) {
     let triggered = Keyboard.isKeyDownTrigger(ctx, keybind.key);
     triggered &&= !!keybind.mod === keyboard.modDown;
     triggered &&= !!keybind.shift === keyboard.shiftDown;
     if (triggered) {
-      const eid = (0, import_core50.createEntity)(ctx);
-      (0, import_core50.addComponent)(ctx, eid, CommandMarker, { name: keybind.command });
+      const eid = (0, import_core53.createEntity)(ctx);
+      (0, import_core53.addComponent)(ctx, eid, CommandMarker, { name: keybind.command });
       break;
     }
   }
@@ -3974,9 +4135,9 @@ var scrollEdgesSystem = defineEditorSystem({ phase: "capture" }, (ctx) => {
 });
 
 // src/systems/capture/transformBoxSystem.ts
-var import_core51 = require("@woven-ecs/core");
+var import_core54 = require("@woven-ecs/core");
 var import_xstate4 = require("xstate");
-var selectedBlocksQuery = (0, import_core51.defineQuery)((q) => q.with(Block).tracking(Selected));
+var selectedBlocksQuery = (0, import_core54.defineQuery)((q) => q.with(Block).tracking(Selected));
 var transformBoxMachine = (0, import_xstate4.setup)({
   types: {
     context: {},
@@ -3989,12 +4150,12 @@ var transformBoxMachine = (0, import_xstate4.setup)({
     isOverTransformBox: ({ event }) => {
       if (!("intersects" in event)) return false;
       if (event.intersects.length === 0) return false;
-      return (0, import_core51.hasComponent)(event.ctx, event.intersects[0], TransformBox);
+      return (0, import_core54.hasComponent)(event.ctx, event.intersects[0], TransformBox);
     },
     isOverTransformHandle: ({ event }) => {
       if (!("intersects" in event)) return false;
       if (event.intersects.length === 0) return false;
-      return (0, import_core51.hasComponent)(event.ctx, event.intersects[0], TransformHandle);
+      return (0, import_core54.hasComponent)(event.ctx, event.intersects[0], TransformHandle);
     },
     selectionIsTransformable: ({ event }) => {
       if (event.type !== "selectionChanged") return false;
@@ -4006,7 +4167,7 @@ var transformBoxMachine = (0, import_xstate4.setup)({
     hasEditAfterPlacing: ({ event }) => {
       if (event.type !== "selectionChanged") return false;
       if (event.selectedEntityIds.length !== 1) return false;
-      return (0, import_core51.hasComponent)(event.ctx, event.selectedEntityIds[0], EditAfterPlacing);
+      return (0, import_core54.hasComponent)(event.ctx, event.selectedEntityIds[0], EditAfterPlacing);
     }
   },
   actions: {
@@ -4016,7 +4177,7 @@ var transformBoxMachine = (0, import_xstate4.setup)({
           transformBoxId: context.transformBoxId
         });
       }
-      const transformBoxId = (0, import_core51.createEntity)(event.ctx);
+      const transformBoxId = (0, import_core54.createEntity)(event.ctx);
       AddTransformBox.spawn(event.ctx, {
         transformBoxId,
         skipHandles: params?.skipHandles
@@ -4059,8 +4220,8 @@ var transformBoxMachine = (0, import_xstate4.setup)({
     removeEditAfterPlacing: ({ event }) => {
       if (event.type !== "selectionChanged") return;
       for (const entityId of event.selectedEntityIds) {
-        if ((0, import_core51.hasComponent)(event.ctx, entityId, EditAfterPlacing)) {
-          (0, import_core51.removeComponent)(event.ctx, entityId, EditAfterPlacing);
+        if ((0, import_core54.hasComponent)(event.ctx, entityId, EditAfterPlacing)) {
+          (0, import_core54.removeComponent)(event.ctx, entityId, EditAfterPlacing);
         }
       }
     }
@@ -4159,7 +4320,7 @@ var transformBoxSystem = defineEditorSystem({ phase: "capture" }, (ctx) => {
 });
 
 // src/systems/input/keyboardSystem.ts
-var import_core52 = require("@woven-ecs/core");
+var import_core55 = require("@woven-ecs/core");
 var instanceState = /* @__PURE__ */ new WeakMap();
 function attachKeyboardListeners(domElement) {
   if (instanceState.has(domElement)) return;
@@ -4195,7 +4356,7 @@ function detachKeyboardListeners(domElement) {
   instanceState.delete(domElement);
 }
 var keyboardSystem = defineEditorSystem({ phase: "input" }, (ctx) => {
-  const resources = (0, import_core52.getResources)(ctx);
+  const resources = (0, import_core55.getResources)(ctx);
   if (!resources.domElement) return;
   const state = instanceState.get(resources.domElement);
   if (!state) return;
@@ -4249,7 +4410,7 @@ function isZeroed(buffer) {
 }
 
 // src/systems/input/mouseSystem.ts
-var import_core53 = require("@woven-ecs/core");
+var import_core56 = require("@woven-ecs/core");
 var instanceState2 = /* @__PURE__ */ new WeakMap();
 function attachMouseListeners(domElement) {
   if (instanceState2.has(domElement)) return;
@@ -4297,7 +4458,7 @@ function detachMouseListeners(domElement) {
   instanceState2.delete(domElement);
 }
 var mouseSystem = defineEditorSystem({ phase: "input" }, (ctx) => {
-  const resources = (0, import_core53.getResources)(ctx);
+  const resources = (0, import_core56.getResources)(ctx);
   if (!resources.domElement) return;
   const state = instanceState2.get(resources.domElement);
   if (!state) return;
@@ -4354,7 +4515,7 @@ function normalizeWheelDelta(deltaY, deltaMode) {
 }
 
 // src/systems/input/pointerSystem.ts
-var import_core54 = require("@woven-ecs/core");
+var import_core57 = require("@woven-ecs/core");
 var instanceState3 = /* @__PURE__ */ new WeakMap();
 function attachPointerListeners(domElement) {
   if (instanceState3.has(domElement)) return;
@@ -4449,7 +4610,7 @@ function detachPointerListeners(domElement) {
   instanceState3.delete(domElement);
 }
 var pointerSystem = defineEditorSystem({ phase: "input" }, (ctx) => {
-  const resources = (0, import_core54.getResources)(ctx);
+  const resources = (0, import_core57.getResources)(ctx);
   const { domElement } = resources;
   if (!domElement) return;
   const state = instanceState3.get(domElement);
@@ -4461,8 +4622,8 @@ var pointerSystem = defineEditorSystem({ phase: "input" }, (ctx) => {
     switch (event.type) {
       case "pointerdown": {
         const position = [event.clientX - screen.left, event.clientY - screen.top];
-        const entityId = (0, import_core54.createEntity)(ctx);
-        (0, import_core54.addComponent)(ctx, entityId, Pointer, {
+        const entityId = (0, import_core57.createEntity)(ctx);
+        (0, import_core57.addComponent)(ctx, entityId, Pointer, {
           pointerId: event.pointerId,
           position,
           downPosition: position,
@@ -4494,7 +4655,7 @@ var pointerSystem = defineEditorSystem({ phase: "input" }, (ctx) => {
         const position = [event.clientX - screen.left, event.clientY - screen.top];
         const pointer = Pointer.write(ctx, entityId);
         addPointerSample(pointer, position, time);
-        (0, import_core54.removeEntity)(ctx, entityId);
+        (0, import_core57.removeEntity)(ctx, entityId);
         state.pointerEntityMap.delete(event.pointerId);
         break;
       }
@@ -4504,7 +4665,7 @@ var pointerSystem = defineEditorSystem({ phase: "input" }, (ctx) => {
 });
 
 // src/systems/input/screenSystem.ts
-var import_core55 = require("@woven-ecs/core");
+var import_core58 = require("@woven-ecs/core");
 var instanceState4 = /* @__PURE__ */ new WeakMap();
 function attachScreenObserver(domElement) {
   if (instanceState4.has(domElement)) return;
@@ -4529,7 +4690,7 @@ function detachScreenObserver(domElement) {
   instanceState4.delete(domElement);
 }
 var screenSystem = defineEditorSystem({ phase: "input" }, (ctx) => {
-  const resources = (0, import_core55.getResources)(ctx);
+  const resources = (0, import_core58.getResources)(ctx);
   const { domElement } = resources;
   if (!domElement) return;
   const state = instanceState4.get(domElement);
@@ -4564,8 +4725,8 @@ var tickSystem = defineEditorSystem({ phase: "input", priority: 100 }, (ctx) =>
 });
 
 // src/systems/postRender/cursorSystem.ts
-var import_core56 = require("@woven-ecs/core");
-var cursorQuery = (0, import_core56.defineQuery)((q) => q.tracking(Cursor));
+var import_core59 = require("@woven-ecs/core");
+var cursorQuery = (0, import_core59.defineQuery)((q) => q.tracking(Cursor));
 function getCursorSvg(cursors, kind, rotateZ) {
   const def = cursors[kind];
   if (!def) return "auto";
@@ -4584,16 +4745,17 @@ var cursorSystem = defineEditorSystem({ phase: "render", priority: -100 }, (ctx)
     document.body.style.cursor = "default";
     return;
   }
-  const { editor } = (0, import_core56.getResources)(ctx);
+  const { editor } = (0, import_core59.getResources)(ctx);
   const cursorValue = getCursorSvg(editor.cursors, cursorKind, rotation);
   document.body.style.cursor = cursorValue;
 });
 
 // src/systems/postRender/presenceSystem.ts
-var import_core57 = require("@woven-ecs/core");
-var pointerQuery2 = (0, import_core57.defineQuery)((q) => q.tracking(Pointer));
+var import_core60 = require("@woven-ecs/core");
+var pointerQuery2 = (0, import_core60.defineQuery)((q) => q.tracking(Pointer));
+var cameraChangedQuery = (0, import_core60.defineQuery)((q) => q.tracking(Camera));
 var presenceSystem = defineEditorSystem({ phase: "render", priority: -100 }, (ctx) => {
-  if (Mouse.didMove(ctx)) {
+  if (Mouse.didMove(ctx) || cameraChangedQuery.changed(ctx).length > 0) {
     const mouse = Mouse.read(ctx);
     updateUserPosition(ctx, mouse.position);
     return;
@@ -4622,9 +4784,9 @@ function updateUserPosition(ctx, position) {
 
 // src/systems/postUpdate/transformBoxSystem.ts
 var import_math8 = require("@woven-canvas/math");
-var import_core58 = require("@woven-ecs/core");
-var selectedBlocksQuery2 = (0, import_core58.defineQuery)((q) => q.with(Block, Selected));
-var editedBlocksQuery = (0, import_core58.defineQuery)((q) => q.with(Block, Edited));
+var import_core61 = require("@woven-ecs/core");
+var selectedBlocksQuery2 = (0, import_core61.defineQuery)((q) => q.with(Block, Selected));
+var editedBlocksQuery = (0, import_core61.defineQuery)((q) => q.with(Block, Edited));
 var TRANSFORM_BOX_RANK = "a";
 var TRANSFORM_HANDLE_ROTATE_RANK = "b";
 var TRANSFORM_HANDLE_EDGE_RANK = "c";
@@ -4651,27 +4813,27 @@ var transformBoxSystem2 = defineEditorSystem({ phase: "update", priority: -100 }
   on(ctx, EndTransformBoxEdit, endTransformBoxEdit);
 });
 function removeTransformBox(ctx, transformBoxId) {
-  if (!(0, import_core58.hasComponent)(ctx, transformBoxId, TransformBox)) {
+  if (!(0, import_core61.hasComponent)(ctx, transformBoxId, TransformBox)) {
     endTransformBoxEdit(ctx);
     return;
   }
-  const handles = (0, import_core58.getBackrefs)(ctx, transformBoxId, TransformHandle, "transformBox");
+  const handles = (0, import_core61.getBackrefs)(ctx, transformBoxId, TransformHandle, "transformBox");
   for (const handleId of handles) {
-    (0, import_core58.removeEntity)(ctx, handleId);
+    (0, import_core61.removeEntity)(ctx, handleId);
   }
-  (0, import_core58.removeEntity)(ctx, transformBoxId);
+  (0, import_core61.removeEntity)(ctx, transformBoxId);
   endTransformBoxEdit(ctx);
 }
 function addTransformBox(ctx, transformBoxId, skipHandles) {
-  (0, import_core58.addComponent)(ctx, transformBoxId, Block, {
+  (0, import_core61.addComponent)(ctx, transformBoxId, Block, {
     tag: "transform-box",
     position: [0, 0],
     size: [0, 0],
     rotateZ: 0,
     rank: TRANSFORM_BOX_RANK
   });
-  (0, import_core58.addComponent)(ctx, transformBoxId, TransformBox, {});
-  (0, import_core58.addComponent)(ctx, transformBoxId, DragStart, {
+  (0, import_core61.addComponent)(ctx, transformBoxId, TransformBox, {});
+  (0, import_core61.addComponent)(ctx, transformBoxId, DragStart, {
     position: [0, 0],
     size: [0, 0],
     rotateZ: 0,
@@ -4682,7 +4844,7 @@ function addTransformBox(ctx, transformBoxId, skipHandles) {
   }
 }
 function updateTransformBox(ctx, transformBoxId) {
-  if (!(0, import_core58.isAlive)(ctx, transformBoxId)) return;
+  if (!(0, import_core61.isAlive)(ctx, transformBoxId)) return;
   const selectedBlocks = selectedBlocksQuery2.current(ctx);
   if (selectedBlocks.length === 0) return;
   let rotateZ = 0;
@@ -4708,7 +4870,7 @@ function updateTransformBox(ctx, transformBoxId) {
   const selectionState = SelectionStateSingleton.read(ctx);
   const isDragging = selectionState.state === SelectionState.Dragging;
   if (!isDragging) {
-    if ((0, import_core58.hasComponent)(ctx, transformBoxId, DragStart)) {
+    if ((0, import_core61.hasComponent)(ctx, transformBoxId, DragStart)) {
       const dragStart = DragStart.write(ctx, transformBoxId);
       dragStart.position = boxBlock.position;
       dragStart.size = boxBlock.size;
@@ -4717,9 +4879,9 @@ function updateTransformBox(ctx, transformBoxId) {
     for (const entityId of selectedBlocks) {
       const block = Block.read(ctx, entityId);
       const worldPos = Block.getWorldPosition(ctx, entityId);
-      const fontSize = (0, import_core58.hasComponent)(ctx, entityId, Text) ? Text.read(ctx, entityId).fontSizePx : 16;
-      if (!(0, import_core58.hasComponent)(ctx, entityId, DragStart)) {
-        (0, import_core58.addComponent)(ctx, entityId, DragStart, {
+      const fontSize = (0, import_core61.hasComponent)(ctx, entityId, Text) ? Text.read(ctx, entityId).fontSizePx : 16;
+      if (!(0, import_core61.hasComponent)(ctx, entityId, DragStart)) {
+        (0, import_core61.addComponent)(ctx, entityId, DragStart, {
           position: worldPos,
           size: block.size,
           rotateZ: block.rotateZ,
@@ -4883,10 +5045,10 @@ function addOrUpdateTransformHandles(ctx, transformBoxId) {
       });
     }
   }
-  const existingHandles = (0, import_core58.getBackrefs)(ctx, transformBoxId, TransformHandle, "transformBox");
+  const existingHandles = (0, import_core61.getBackrefs)(ctx, transformBoxId, TransformHandle, "transformBox");
   const handleMap = /* @__PURE__ */ new Map();
   for (const handleId of existingHandles) {
-    if (!(0, import_core58.isAlive)(ctx, handleId)) continue;
+    if (!(0, import_core61.isAlive)(ctx, handleId)) continue;
     const handle = TransformHandle.read(ctx, handleId);
     const key = `${handle.kind}-${handle.vectorX}-${handle.vectorY}`;
     handleMap.set(key, handleId);
@@ -4901,11 +5063,11 @@ function addOrUpdateTransformHandles(ctx, transformBoxId) {
     const finalLeft = rotatedCenter[0] - def.width / 2;
     const finalTop = rotatedCenter[1] - def.height / 2;
     if (!handleId) {
-      handleId = (0, import_core58.createEntity)(ctx);
-      (0, import_core58.addComponent)(ctx, handleId, Block);
-      (0, import_core58.addComponent)(ctx, handleId, TransformHandle);
-      (0, import_core58.addComponent)(ctx, handleId, DragStart);
-      (0, import_core58.addComponent)(ctx, handleId, ScaleWithZoom);
+      handleId = (0, import_core61.createEntity)(ctx);
+      (0, import_core61.addComponent)(ctx, handleId, Block);
+      (0, import_core61.addComponent)(ctx, handleId, TransformHandle);
+      (0, import_core61.addComponent)(ctx, handleId, DragStart);
+      (0, import_core61.addComponent)(ctx, handleId, ScaleWithZoom);
     }
     const block = Block.write(ctx, handleId);
     block.tag = def.tag;
@@ -4932,7 +5094,7 @@ function addOrUpdateTransformHandles(ctx, transformBoxId) {
   }
   for (const handleId of existingHandles) {
     if (!usedHandleIds.has(handleId)) {
-      (0, import_core58.removeEntity)(ctx, handleId);
+      (0, import_core61.removeEntity)(ctx, handleId);
     }
   }
 }
@@ -4968,10 +5130,10 @@ function addTapeHandles(ctx, transformBoxId, left, top, width, height, rotateZ,
     scaleMultiplier: [1, 1],
     anchor: [0.5, 0.5]
   });
-  const existingHandles = (0, import_core58.getBackrefs)(ctx, transformBoxId, TransformHandle, "transformBox");
+  const existingHandles = (0, import_core61.getBackrefs)(ctx, transformBoxId, TransformHandle, "transformBox");
   const handleMap = /* @__PURE__ */ new Map();
   for (const handleId of existingHandles) {
-    if (!(0, import_core58.isAlive)(ctx, handleId)) continue;
+    if (!(0, import_core61.isAlive)(ctx, handleId)) continue;
     const handle = TransformHandle.read(ctx, handleId);
     const key = `${handle.kind}-${handle.vectorX}-${handle.vectorY}`;
     handleMap.set(key, handleId);
@@ -4986,11 +5148,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 = (0, import_core58.createEntity)(ctx);
-      (0, import_core58.addComponent)(ctx, handleId, Block);
-      (0, import_core58.addComponent)(ctx, handleId, TransformHandle);
-      (0, import_core58.addComponent)(ctx, handleId, DragStart);
-      (0, import_core58.addComponent)(ctx, handleId, ScaleWithZoom);
+      handleId = (0, import_core61.createEntity)(ctx);
+      (0, import_core61.addComponent)(ctx, handleId, Block);
+      (0, import_core61.addComponent)(ctx, handleId, TransformHandle);
+      (0, import_core61.addComponent)(ctx, handleId, DragStart);
+      (0, import_core61.addComponent)(ctx, handleId, ScaleWithZoom);
     }
     const block = Block.write(ctx, handleId);
     block.tag = def.tag;
@@ -5017,23 +5179,23 @@ function addTapeHandles(ctx, transformBoxId, left, top, width, height, rotateZ,
   }
   for (const handleId of existingHandles) {
     if (!usedHandleIds.has(handleId)) {
-      (0, import_core58.removeEntity)(ctx, handleId);
+      (0, import_core61.removeEntity)(ctx, handleId);
     }
   }
 }
 function hideTransformBox(ctx, transformBoxId) {
-  if (!(0, import_core58.hasComponent)(ctx, transformBoxId, TransformBox)) return;
-  if (!(0, import_core58.hasComponent)(ctx, transformBoxId, Opacity)) {
-    (0, import_core58.addComponent)(ctx, transformBoxId, Opacity, { value: 0 });
+  if (!(0, import_core61.hasComponent)(ctx, transformBoxId, TransformBox)) return;
+  if (!(0, import_core61.hasComponent)(ctx, transformBoxId, Opacity)) {
+    (0, import_core61.addComponent)(ctx, transformBoxId, Opacity, { value: 0 });
   } else {
     const opacity = Opacity.write(ctx, transformBoxId);
     opacity.value = 0;
   }
-  const handles = (0, import_core58.getBackrefs)(ctx, transformBoxId, TransformHandle, "transformBox");
+  const handles = (0, import_core61.getBackrefs)(ctx, transformBoxId, TransformHandle, "transformBox");
   for (const handleId of handles) {
-    if (!(0, import_core58.isAlive)(ctx, handleId)) continue;
-    if (!(0, import_core58.hasComponent)(ctx, handleId, Opacity)) {
-      (0, import_core58.addComponent)(ctx, handleId, Opacity, { value: 0 });
+    if (!(0, import_core61.isAlive)(ctx, handleId)) continue;
+    if (!(0, import_core61.hasComponent)(ctx, handleId, Opacity)) {
+      (0, import_core61.addComponent)(ctx, handleId, Opacity, { value: 0 });
     } else {
       const opacity = Opacity.write(ctx, handleId);
       opacity.value = 0;
@@ -5041,62 +5203,66 @@ function hideTransformBox(ctx, transformBoxId) {
   }
 }
 function showTransformBox(ctx, transformBoxId) {
-  if (!(0, import_core58.hasComponent)(ctx, transformBoxId, TransformBox)) return;
+  if (!(0, import_core61.hasComponent)(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 ((0, import_core58.hasComponent)(ctx, transformBoxId, Opacity)) {
-    (0, import_core58.removeComponent)(ctx, transformBoxId, Opacity);
+  if ((0, import_core61.hasComponent)(ctx, transformBoxId, Opacity)) {
+    (0, import_core61.removeComponent)(ctx, transformBoxId, Opacity);
   }
-  const handles = (0, import_core58.getBackrefs)(ctx, transformBoxId, TransformHandle, "transformBox");
+  const handles = (0, import_core61.getBackrefs)(ctx, transformBoxId, TransformHandle, "transformBox");
   for (const handleId of handles) {
-    if (!(0, import_core58.isAlive)(ctx, handleId)) continue;
-    if ((0, import_core58.hasComponent)(ctx, handleId, Opacity)) {
-      (0, import_core58.removeComponent)(ctx, handleId, Opacity);
+    if (!(0, import_core61.isAlive)(ctx, handleId)) continue;
+    if ((0, import_core61.hasComponent)(ctx, handleId, Opacity)) {
+      (0, import_core61.removeComponent)(ctx, handleId, Opacity);
     }
   }
   updateTransformBox(ctx, transformBoxId);
 }
 function startTransformBoxEdit(ctx, transformBoxId) {
-  if ((0, import_core58.hasComponent)(ctx, transformBoxId, TransformBox)) {
-    const handles = (0, import_core58.getBackrefs)(ctx, transformBoxId, TransformHandle, "transformBox");
+  if ((0, import_core61.hasComponent)(ctx, transformBoxId, TransformBox)) {
+    const handles = (0, import_core61.getBackrefs)(ctx, transformBoxId, TransformHandle, "transformBox");
     for (const handleId of handles) {
-      (0, import_core58.removeEntity)(ctx, handleId);
+      (0, import_core61.removeEntity)(ctx, handleId);
     }
   }
   for (const blockId of selectedBlocksQuery2.current(ctx)) {
-    if (!(0, import_core58.hasComponent)(ctx, blockId, Edited)) {
-      (0, import_core58.addComponent)(ctx, blockId, Edited, {});
+    if (!(0, import_core61.hasComponent)(ctx, blockId, Edited)) {
+      (0, import_core61.addComponent)(ctx, blockId, Edited, {});
     }
   }
 }
 function endTransformBoxEdit(ctx) {
   for (const blockId of editedBlocksQuery.current(ctx)) {
-    if ((0, import_core58.hasComponent)(ctx, blockId, Edited)) {
-      (0, import_core58.removeComponent)(ctx, blockId, Edited);
+    if ((0, import_core61.hasComponent)(ctx, blockId, Edited)) {
+      (0, import_core61.removeComponent)(ctx, blockId, Edited);
     }
   }
 }
 
 // src/systems/preCapture/intersectSystem.ts
-var import_core59 = require("@woven-ecs/core");
-var blocksChanged = (0, import_core59.defineQuery)((q) => q.tracking(Block));
-var hitGeometryChanged = (0, import_core59.defineQuery)((q) => q.tracking(HitGeometry));
-var heldQuery = (0, import_core59.defineQuery)((q) => q.with(Held).tracking(Held));
-var hoveredQuery = (0, import_core59.defineQuery)((q) => q.with(Hovered));
-var pointerQuery3 = (0, import_core59.defineQuery)((q) => q.with(Pointer));
+var import_core62 = require("@woven-ecs/core");
+var blocksChanged = (0, import_core62.defineQuery)((q) => q.tracking(Block));
+var hitGeometryChanged = (0, import_core62.defineQuery)((q) => q.tracking(HitGeometry));
+var heldQuery = (0, import_core62.defineQuery)((q) => q.with(Held).tracking(Held));
+var hoveredQuery = (0, import_core62.defineQuery)((q) => q.with(Hovered));
+var pointerQuery3 = (0, import_core62.defineQuery)((q) => q.with(Pointer));
 function clearHovered(ctx) {
   for (const entityId of hoveredQuery.current(ctx)) {
-    if ((0, import_core59.hasComponent)(ctx, entityId, Hovered)) {
-      (0, import_core59.removeComponent)(ctx, entityId, Hovered);
+    if ((0, import_core62.hasComponent)(ctx, entityId, Hovered)) {
+      (0, import_core62.removeComponent)(ctx, entityId, Hovered);
     }
   }
 }
 function findValidHoverTarget(ctx, intersected) {
   for (const entityId of intersected) {
     if (isHeldByRemote(ctx, entityId)) return void 0;
+    if ((0, import_core62.hasComponent)(ctx, entityId, Block)) {
+      const block = Block.read(ctx, entityId);
+      if (!canBlockInteract(ctx, block.tag)) continue;
+    }
     return entityId;
   }
   return void 0;
@@ -5108,7 +5274,7 @@ function updateHovered(ctx, intersected) {
   if (!selectToolActive) return;
   const newHoveredId = findValidHoverTarget(ctx, intersected);
   if (newHoveredId !== void 0) {
-    (0, import_core59.addComponent)(ctx, newHoveredId, Hovered, {});
+    (0, import_core62.addComponent)(ctx, newHoveredId, Hovered, {});
   }
 }
 function arraysEqual(a, b) {
@@ -5121,7 +5287,7 @@ function arraysEqual(a, b) {
 var added = /* @__PURE__ */ new Set();
 var changed = /* @__PURE__ */ new Set();
 function addDescendants(ctx, entityId, set) {
-  for (const childId of (0, import_core59.getBackrefs)(ctx, entityId, Block, "parentId")) {
+  for (const childId of (0, import_core62.getBackrefs)(ctx, entityId, Block, "parentId")) {
     if (set.has(childId)) continue;
     set.add(childId);
     addDescendants(ctx, childId, set);
@@ -5147,18 +5313,14 @@ var intersectSystem = defineEditorSystem({ phase: "capture", priority: 100 }, (c
     addDescendants(ctx, entityId, changed);
   }
   for (const entityId of added) {
-    if ((0, import_core59.hasComponent)(ctx, entityId, Block)) {
-      const block = Block.read(ctx, entityId);
-      if (!canBlockInteract(ctx, block.tag)) continue;
-    }
-    if (!(0, import_core59.hasComponent)(ctx, entityId, Aabb)) {
-      (0, import_core59.addComponent)(ctx, entityId, Aabb, { value: [0, 0, 0, 0] });
+    if (!(0, import_core62.hasComponent)(ctx, entityId, Aabb)) {
+      (0, import_core62.addComponent)(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 (!(0, import_core59.hasComponent)(ctx, entityId, Aabb)) continue;
+    if (!(0, import_core62.hasComponent)(ctx, entityId, Aabb)) continue;
     const aabb = Aabb.write(ctx, entityId);
     computeAabb(ctx, entityId, aabb.value);
   }
@@ -5177,7 +5339,7 @@ var intersectSystem = defineEditorSystem({ phase: "capture", priority: 100 }, (c
     clearHovered(ctx);
     return;
   }
-  const resources = (0, import_core59.getResources)(ctx);
+  const resources = (0, import_core62.getResources)(ctx);
   const isObscured = Mouse.isObscured(ctx);
   const wasObscured = resources.domElement ? prevObscuredByElement.get(resources.domElement) ?? false : false;
   const obscuredChanged = isObscured !== wasObscured;
@@ -5207,12 +5369,21 @@ var intersectSystem = defineEditorSystem({ phase: "capture", priority: 100 }, (c
 
 // src/systems/preCapture/selectSystem.ts
 var import_math9 = require("@woven-canvas/math");
-var import_canvas_store41 = require("@woven-ecs/canvas-store");
-var import_core60 = require("@woven-ecs/core");
+var import_canvas_store43 = require("@woven-ecs/canvas-store");
+var import_core63 = require("@woven-ecs/core");
 var import_xstate5 = require("xstate");
 var POINTING_THRESHOLD = 4;
-var selectedBlocksQuery3 = (0, import_core60.defineQuery)((q) => q.with(Block, Selected, import_canvas_store41.Synced));
-var editedBlocksQuery2 = (0, import_core60.defineQuery)((q) => q.with(Block, Edited));
+var selectedBlocksQuery3 = (0, import_core63.defineQuery)((q) => q.with(Block, Selected, import_canvas_store43.Synced));
+var editedBlocksQuery2 = (0, import_core63.defineQuery)((q) => q.with(Block, Edited));
+function isDragSnappable(ctx, draggedEntity) {
+  if ((0, import_core63.hasComponent)(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 = (0, import_xstate5.setup)({
   types: {
     context: {},
@@ -5228,13 +5399,13 @@ var selectionMachine = (0, import_xstate5.setup)({
     },
     hasDraggedEntity: ({ context, event }) => {
       if (context.draggedEntity === null) return false;
-      return (0, import_core60.hasComponent)(event.ctx, context.draggedEntity, import_canvas_store41.Synced);
+      return (0, import_core63.hasComponent)(event.ctx, context.draggedEntity, import_canvas_store43.Synced);
     },
     isOverSyncedBlock: ({ event }) => {
       const ctx = event.ctx;
       for (const entityId of event.intersects) {
-        if ((0, import_core60.hasComponent)(ctx, entityId, import_canvas_store41.Synced)) {
-          if ((0, import_core60.hasComponent)(ctx, entityId, Block)) {
+        if ((0, import_core63.hasComponent)(ctx, entityId, import_canvas_store43.Synced)) {
+          if ((0, import_core63.hasComponent)(ctx, entityId, Block)) {
             const block = Block.read(ctx, entityId);
             if (!canBlockInteract(ctx, block.tag)) continue;
           }
@@ -5271,7 +5442,7 @@ var selectionMachine = (0, import_xstate5.setup)({
     },
     setDragCursor: ({ event, context }) => {
       if (!context.draggedEntity) return;
-      if ((0, import_core60.hasComponent)(event.ctx, context.draggedEntity, TransformHandle)) {
+      if ((0, import_core63.hasComponent)(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, {
@@ -5331,7 +5502,7 @@ var selectionMachine = (0, import_xstate5.setup)({
         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 = (0, import_core60.hasComponent)(ctx, context.draggedEntity, import_canvas_store41.Synced) || (0, import_core60.hasComponent)(ctx, context.draggedEntity, TransformBox);
+        const draggingSynced = (0, import_core63.hasComponent)(ctx, context.draggedEntity, import_canvas_store43.Synced) || (0, import_core63.hasComponent)(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]);
@@ -5341,7 +5512,7 @@ var selectionMachine = (0, import_xstate5.setup)({
             left = context.draggedEntityStart[0];
           }
         }
-        if (draggingSynced) {
+        if (draggingSynced && isDragSnappable(ctx, context.draggedEntity)) {
           left = Grid.snapX(ctx, left);
           top = Grid.snapY(ctx, top);
         }
@@ -5354,7 +5525,7 @@ var selectionMachine = (0, import_xstate5.setup)({
           const dx = context.draggedEntityStart[0] - left;
           const dy = context.draggedEntityStart[1] - top;
           isCloning = true;
-          const isTransformBox = (0, import_core60.hasComponent)(ctx, context.draggedEntity, TransformBox);
+          const isTransformBox = (0, import_core63.hasComponent)(ctx, context.draggedEntity, TransformBox);
           const entityIds = isTransformBox ? Array.from(selectedBlocksQuery3.current(ctx)) : [context.draggedEntity];
           CloneEntities.spawn(ctx, {
             entityIds,
@@ -5362,7 +5533,7 @@ var selectionMachine = (0, import_xstate5.setup)({
             seed: context.cloneGeneratorSeed
           });
         } else if (!event.altDown && context.isCloning) {
-          const isTransformBox = (0, import_core60.hasComponent)(ctx, context.draggedEntity, TransformBox);
+          const isTransformBox = (0, import_core63.hasComponent)(ctx, context.draggedEntity, TransformBox);
           const entityIds = isTransformBox ? Array.from(selectedBlocksQuery3.current(ctx)) : [context.draggedEntity];
           UncloneEntities.spawn(ctx, {
             entityIds,
@@ -5387,8 +5558,8 @@ var selectionMachine = (0, import_xstate5.setup)({
       const ctx = event.ctx;
       let intersectId;
       for (const entityId of event.intersects) {
-        if ((0, import_core60.hasComponent)(ctx, entityId, import_canvas_store41.Synced)) {
-          if ((0, import_core60.hasComponent)(ctx, entityId, Block)) {
+        if ((0, import_core63.hasComponent)(ctx, entityId, import_canvas_store43.Synced)) {
+          if ((0, import_core63.hasComponent)(ctx, entityId, Block)) {
             const block = Block.read(ctx, entityId);
             if (!canBlockInteract(ctx, block.tag)) continue;
           }
@@ -5408,7 +5579,7 @@ var selectionMachine = (0, import_xstate5.setup)({
     },
     selectDragged: ({ context, event }) => {
       if (context.draggedEntity === null) return;
-      if (!(0, import_core60.hasComponent)(event.ctx, context.draggedEntity, import_canvas_store41.Synced)) return;
+      if (!(0, import_core63.hasComponent)(event.ctx, context.draggedEntity, import_canvas_store43.Synced)) return;
       SelectBlock.spawn(event.ctx, {
         entityId: context.draggedEntity,
         deselectOthers: true
@@ -5420,9 +5591,9 @@ var selectionMachine = (0, import_xstate5.setup)({
     },
     deselectAllIfDraggedNotSelected: ({ context, event }) => {
       if (context.draggedEntity === null) return;
-      if ((0, import_core60.hasComponent)(event.ctx, context.draggedEntity, Selected)) return;
-      if ((0, import_core60.hasComponent)(event.ctx, context.draggedEntity, TransformBox)) return;
-      if ((0, import_core60.hasComponent)(event.ctx, context.draggedEntity, TransformHandle)) return;
+      if ((0, import_core63.hasComponent)(event.ctx, context.draggedEntity, Selected)) return;
+      if ((0, import_core63.hasComponent)(event.ctx, context.draggedEntity, TransformBox)) return;
+      if ((0, import_core63.hasComponent)(event.ctx, context.draggedEntity, TransformHandle)) return;
       DeselectAll.spawn(event.ctx, void 0);
     }
   }
@@ -5534,6 +5705,7 @@ var selectionMachine = (0, import_xstate5.setup)({
   }
 });
 var selectSystem = defineEditorSystem({ phase: "capture", priority: 100 }, (ctx) => {
+  if (isReadonly(ctx)) return;
   let buttons = Controls.getButtons(ctx, "select");
   const state = SelectionStateSingleton.read(ctx);
   if (state.state === SelectionState.Dragging && buttons.length === 0) {
@@ -5545,13 +5717,14 @@ var selectSystem = defineEditorSystem({ phase: "capture", priority: 100 }, (ctx)
 });
 
 // src/systems/preInput/rankBoundsSystem.ts
-var import_canvas_store42 = require("@woven-ecs/canvas-store");
-var import_core61 = require("@woven-ecs/core");
-var blocksQuery = (0, import_core61.defineQuery)((q) => q.with(import_canvas_store42.Synced, Block));
+var import_canvas_store44 = require("@woven-ecs/canvas-store");
+var import_core64 = require("@woven-ecs/core");
+var blocksQuery = (0, import_core64.defineQuery)((q) => q.with(import_canvas_store44.Synced, Block));
 var rankBoundsSystem = defineEditorSystem({ phase: "input", priority: 100 }, (ctx) => {
   const added2 = blocksQuery.added(ctx);
   for (const entityId of added2) {
     const block = Block.read(ctx, entityId);
+    if (getBlockDef(ctx, block.tag).excludeFromRankBounds) continue;
     if (block.rank === "") {
       const writableBlock = Block.write(ctx, entityId);
       writableBlock.rank = RankBounds.genNext(ctx);
@@ -5563,11 +5736,11 @@ var rankBoundsSystem = defineEditorSystem({ phase: "input", priority: 100 }, (ct
 
 // src/systems/preRender/canSeeBlocksSystem.ts
 var import_math10 = require("@woven-canvas/math");
-var import_canvas_store43 = require("@woven-ecs/canvas-store");
-var import_core62 = require("@woven-ecs/core");
-var camerasQuery = (0, import_core62.defineQuery)((q) => q.tracking(Camera));
-var blocksQuery2 = (0, import_core62.defineQuery)((q) => q.with(import_canvas_store43.Synced, Block, Aabb));
-var syncedBlocksQuery = (0, import_core62.defineQuery)((q) => q.with(import_canvas_store43.Synced, Block, Aabb));
+var import_canvas_store45 = require("@woven-ecs/canvas-store");
+var import_core65 = require("@woven-ecs/core");
+var camerasQuery = (0, import_core65.defineQuery)((q) => q.tracking(Camera));
+var blocksQuery2 = (0, import_core65.defineQuery)((q) => q.with(import_canvas_store45.Synced, Block, Aabb));
+var syncedBlocksQuery = (0, import_core65.defineQuery)((q) => q.with(import_canvas_store45.Synced, 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) {
@@ -5576,7 +5749,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 ((0, import_core62.hasComponent)(ctx, camera.lastSeenBlock, Aabb)) {
+    if ((0, import_core65.hasComponent)(ctx, camera.lastSeenBlock, Aabb)) {
       const aabb = Aabb.read(ctx, camera.lastSeenBlock);
       if (import_math10.Aabb.intersects(cameraAabb, aabb.value)) {
         return;
@@ -5605,8 +5778,8 @@ var canSeeBlocksSystem = defineEditorSystem({ phase: "render", priority: 90 }, (
 
 // src/systems/preRender/scaleWithZoomSystem.ts
 var import_math11 = require("@woven-canvas/math");
-var import_core63 = require("@woven-ecs/core");
-var scaleWithZoomQuery = (0, import_core63.defineQuery)((q) => q.with(Block).tracking(ScaleWithZoom));
+var import_core66 = require("@woven-ecs/core");
+var scaleWithZoomQuery = (0, import_core66.defineQuery)((q) => q.with(Block).tracking(ScaleWithZoom));
 var _scaledSize = [0, 0];
 var _anchorOffset = [0, 0];
 var _anchorAdj = [0, 0];
@@ -5650,13 +5823,13 @@ function scaleBlock(ctx, entityId, zoom) {
 
 // src/systems/update/blockSystem.ts
 var import_math12 = require("@woven-canvas/math");
-var import_canvas_store44 = require("@woven-ecs/canvas-store");
-var import_core64 = require("@woven-ecs/core");
-var selectedBlocksQuery4 = (0, import_core64.defineQuery)((q) => q.with(Block, Selected));
-var syncedBlocksQuery2 = (0, import_core64.defineQuery)((q) => q.with(Block, import_canvas_store44.Synced));
+var import_canvas_store46 = require("@woven-ecs/canvas-store");
+var import_core67 = require("@woven-ecs/core");
+var selectedBlocksQuery4 = (0, import_core67.defineQuery)((q) => q.with(Block, Selected));
+var syncedBlocksQuery2 = (0, import_core67.defineQuery)((q) => q.with(Block, import_canvas_store46.Synced));
 var blockSystem = defineEditorSystem({ phase: "update" }, (ctx) => {
   on(ctx, DragBlock, (ctx2, { entityId, position }) => {
-    if (!(0, import_core64.hasComponent)(ctx2, entityId, Block)) return;
+    if (!(0, import_core67.hasComponent)(ctx2, entityId, Block)) return;
     Block.setWorldPosition(ctx2, entityId, position);
   });
   on(ctx, SelectBlock, (ctx2, { entityId, deselectOthers }) => {
@@ -5669,7 +5842,7 @@ var blockSystem = defineEditorSystem({ phase: "update" }, (ctx) => {
     deselectBlock(ctx2, entityId);
   });
   on(ctx, ToggleSelect, (ctx2, { entityId }) => {
-    if ((0, import_core64.hasComponent)(ctx2, entityId, Selected)) {
+    if ((0, import_core67.hasComponent)(ctx2, entityId, Selected)) {
       deselectBlock(ctx2, entityId);
     } else {
       selectBlock(ctx2, entityId);
@@ -5677,15 +5850,15 @@ var blockSystem = defineEditorSystem({ phase: "update" }, (ctx) => {
   });
   on(ctx, DeselectAll, deselectAllBlocks);
   on(ctx, AddHeld, (ctx2, { entityId }) => {
-    if (!(0, import_core64.hasComponent)(ctx2, entityId, import_canvas_store44.Synced)) return;
-    if ((0, import_core64.hasComponent)(ctx2, entityId, Held)) return;
-    const { sessionId } = (0, import_core64.getResources)(ctx2);
-    (0, import_core64.addComponent)(ctx2, entityId, Held, { sessionId });
+    if (!(0, import_core67.hasComponent)(ctx2, entityId, import_canvas_store46.Synced)) return;
+    if ((0, import_core67.hasComponent)(ctx2, entityId, Held)) return;
+    const { sessionId } = (0, import_core67.getResources)(ctx2);
+    (0, import_core67.addComponent)(ctx2, entityId, Held, { sessionId });
   });
   on(ctx, RemoveHeld, (ctx2, { entityId }) => {
-    if ((0, import_core64.hasComponent)(ctx2, entityId, Selected)) return;
-    if (!(0, import_core64.hasComponent)(ctx2, entityId, Held)) return;
-    (0, import_core64.removeComponent)(ctx2, entityId, Held);
+    if ((0, import_core67.hasComponent)(ctx2, entityId, Selected)) return;
+    if (!(0, import_core67.hasComponent)(ctx2, entityId, Held)) return;
+    (0, import_core67.removeComponent)(ctx2, entityId, Held);
   });
   on(ctx, SelectAll, (ctx2) => {
     for (const entityId of syncedBlocksQuery2.current(ctx2)) {
@@ -5697,7 +5870,7 @@ var blockSystem = defineEditorSystem({ phase: "update" }, (ctx) => {
   });
   on(ctx, RemoveSelected, (ctx2) => {
     for (const entityId of selectedBlocksQuery4.current(ctx2)) {
-      if ((0, import_core64.isAlive)(ctx2, entityId)) {
+      if ((0, import_core67.isAlive)(ctx2, entityId)) {
         cascadeDelete(ctx2, entityId);
       }
     }
@@ -5772,12 +5945,12 @@ function cloneEntities(ctx, entityIds, offset, seed) {
     }
   }
   entityIds = [...allEntityIdsSet];
-  const { componentsById } = (0, import_core64.getResources)(ctx);
+  const { componentsById } = (0, import_core67.getResources)(ctx);
   const documentComponents = new Map([...componentsById].filter(([, def]) => def.sync === "document"));
-  const syncedComponentId = import_canvas_store44.Synced._getComponentId(ctx);
+  const syncedComponentId = import_canvas_store46.Synced._getComponentId(ctx);
   const blockComponentId = Block._getComponentId(ctx);
   const entityIdSet = new Set(entityIds);
-  const sortedEntities = entityIds.filter((id) => (0, import_core64.hasComponent)(ctx, id, Block)).sort((a, b) => {
+  const sortedEntities = entityIds.filter((id) => (0, import_core67.hasComponent)(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;
@@ -5801,12 +5974,12 @@ function cloneEntities(ctx, entityIds, offset, seed) {
   }
   const originalToClone = /* @__PURE__ */ new Map();
   for (const entityId of entityIds) {
-    if (!(0, import_core64.hasComponent)(ctx, entityId, import_canvas_store44.Synced)) continue;
-    const synced = import_canvas_store44.Synced.read(ctx, entityId);
+    if (!(0, import_core67.hasComponent)(ctx, entityId, import_canvas_store46.Synced)) continue;
+    const synced = import_canvas_store46.Synced.read(ctx, entityId);
     const cloneId = generateUuidBySeed(synced.id, seed);
-    const cloneEntityId = (0, import_core64.createEntity)(ctx);
+    const cloneEntityId = (0, import_core67.createEntity)(ctx);
     originalToClone.set(entityId, cloneEntityId);
-    (0, import_core64.addComponent)(ctx, cloneEntityId, import_canvas_store44.Synced, { id: cloneId });
+    (0, import_core67.addComponent)(ctx, cloneEntityId, import_canvas_store46.Synced, { id: cloneId });
     for (const componentId of ctx.entityBuffer.getComponentIds(entityId)) {
       if (componentId === syncedComponentId) continue;
       const componentDef = documentComponents.get(componentId);
@@ -5822,7 +5995,7 @@ function cloneEntities(ctx, entityIds, offset, seed) {
         }
         data.rank = cloneRankMap.get(entityId) ?? RankBounds.genBetween(prevRank, lowestOriginalRank);
       }
-      (0, import_core64.addComponent)(ctx, cloneEntityId, componentDef, data);
+      (0, import_core67.addComponent)(ctx, cloneEntityId, componentDef, data);
     }
   }
   swapConnectorRefs(ctx, originalToClone);
@@ -5838,23 +6011,23 @@ function uncloneEntities(ctx, entityIds, seed) {
   entityIds = [...allEntityIdsSet];
   const expectedCloneUuids = /* @__PURE__ */ new Set();
   for (const entityId of entityIds) {
-    if (!(0, import_core64.hasComponent)(ctx, entityId, import_canvas_store44.Synced)) continue;
-    const synced = import_canvas_store44.Synced.read(ctx, entityId);
+    if (!(0, import_core67.hasComponent)(ctx, entityId, import_canvas_store46.Synced)) continue;
+    const synced = import_canvas_store46.Synced.read(ctx, entityId);
     expectedCloneUuids.add(generateUuidBySeed(synced.id, seed));
   }
   const clonesToRemove = [];
   for (const entityId of syncedBlocksQuery2.current(ctx)) {
-    const synced = import_canvas_store44.Synced.read(ctx, entityId);
+    const synced = import_canvas_store46.Synced.read(ctx, entityId);
     if (expectedCloneUuids.has(synced.id)) {
       clonesToRemove.push(entityId);
     }
   }
   const cloneToOriginal = /* @__PURE__ */ new Map();
   for (const cloneId of clonesToRemove) {
-    const cloneUuid = import_canvas_store44.Synced.read(ctx, cloneId).id;
+    const cloneUuid = import_canvas_store46.Synced.read(ctx, cloneId).id;
     for (const originalId of entityIds) {
-      if (!(0, import_core64.hasComponent)(ctx, originalId, import_canvas_store44.Synced)) continue;
-      const originalUuid = import_canvas_store44.Synced.read(ctx, originalId).id;
+      if (!(0, import_core67.hasComponent)(ctx, originalId, import_canvas_store46.Synced)) continue;
+      const originalUuid = import_canvas_store46.Synced.read(ctx, originalId).id;
       if (generateUuidBySeed(originalUuid, seed) === cloneUuid) {
         cloneToOriginal.set(cloneId, originalId);
         break;
@@ -5863,25 +6036,25 @@ function uncloneEntities(ctx, entityIds, seed) {
   }
   swapConnectorRefs(ctx, cloneToOriginal);
   for (const cloneId of clonesToRemove) {
-    (0, import_core64.removeEntity)(ctx, cloneId);
+    (0, import_core67.removeEntity)(ctx, cloneId);
   }
 }
 function swapConnectorRefs(ctx, fromTo) {
   for (const [fromId, toId] of fromTo) {
-    for (const connectorId of (0, import_core64.getBackrefs)(ctx, fromId, Connector, "startBlock")) {
-      if (!(0, import_core64.isAlive)(ctx, connectorId)) continue;
+    for (const connectorId of (0, import_core67.getBackrefs)(ctx, fromId, Connector, "startBlock")) {
+      if (!(0, import_core67.isAlive)(ctx, connectorId)) continue;
       Connector.write(ctx, connectorId).startBlock = toId;
     }
-    for (const connectorId of (0, import_core64.getBackrefs)(ctx, fromId, Connector, "endBlock")) {
-      if (!(0, import_core64.isAlive)(ctx, connectorId)) continue;
+    for (const connectorId of (0, import_core67.getBackrefs)(ctx, fromId, Connector, "endBlock")) {
+      if (!(0, import_core67.isAlive)(ctx, connectorId)) continue;
       Connector.write(ctx, connectorId).endBlock = toId;
     }
   }
 }
 function swapParentRefs(ctx, fromTo) {
   for (const [, cloneId] of fromTo) {
-    if (!(0, import_core64.isAlive)(ctx, cloneId)) continue;
-    if (!(0, import_core64.hasComponent)(ctx, cloneId, Block)) continue;
+    if (!(0, import_core67.isAlive)(ctx, cloneId)) continue;
+    if (!(0, import_core67.hasComponent)(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);
@@ -5891,20 +6064,27 @@ function swapParentRefs(ctx, fromTo) {
 
 // src/systems/update/dragHandlerSystem.ts
 var import_math13 = require("@woven-canvas/math");
-var import_core65 = require("@woven-ecs/core");
-var selectedBlocksQuery5 = (0, import_core65.defineQuery)((q) => q.with(Block, Selected));
-var transformBoxQuery2 = (0, import_core65.defineQuery)((q) => q.with(Block, TransformBox, DragStart));
+var import_core68 = require("@woven-ecs/core");
+var selectedBlocksQuery5 = (0, import_core68.defineQuery)((q) => q.with(Block, Selected));
+var transformBoxQuery2 = (0, import_core68.defineQuery)((q) => q.with(Block, TransformBox, DragStart));
 function isParentSelected(ctx, blockId) {
   const block = Block.read(ctx, blockId);
-  return block.parentId !== null && (0, import_core65.hasComponent)(ctx, block.parentId, Selected);
+  return block.parentId !== null && (0, import_core68.hasComponent)(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 ((0, import_core65.hasComponent)(ctx2, entityId, TransformBox)) {
+    if ((0, import_core68.hasComponent)(ctx2, entityId, TransformBox)) {
       onTransformBoxDrag(ctx2, entityId, position);
       return;
     }
-    if ((0, import_core65.hasComponent)(ctx2, entityId, TransformHandle)) {
+    if ((0, import_core68.hasComponent)(ctx2, entityId, TransformHandle)) {
       onTransformHandleDrag(ctx2, entityId, position);
       return;
     }
@@ -5915,11 +6095,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 (!(0, import_core65.hasComponent)(ctx, blockId, DragStart)) continue;
+    if (!(0, import_core68.hasComponent)(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);
   }
 }
@@ -5953,10 +6135,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) {
@@ -5965,7 +6148,7 @@ function onRotateHandleDrag(ctx, handleId, position) {
   }
   boxBlock.rotateZ = import_math13.Scalar.normalizeAngle(dragStart.rotateZ + delta);
   for (const blockId of selectedBlocksQuery5.current(ctx)) {
-    if (!(0, import_core65.hasComponent)(ctx, blockId, DragStart)) continue;
+    if (!(0, import_core68.hasComponent)(ctx, blockId, DragStart)) continue;
     if (isParentSelected(ctx, blockId)) continue;
     const blockStart = DragStart.read(ctx, blockId);
     const block = Block.write(ctx, blockId);
@@ -5978,7 +6161,7 @@ function onRotateHandleDrag(ctx, handleId, position) {
     const angle = import_math13.Vec2.angleTo(boxCenter, startCenter) + delta;
     const newCenter = import_math13.Vec2.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);
@@ -5995,7 +6178,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,
@@ -6046,7 +6232,7 @@ function onScaleHandleDrag(ctx, handleId, position, maintainAspectRatio) {
   import_math13.Vec2.add(newBoxCenter, vec);
   const scaleFactor = [scaleX, scaleY];
   for (const blockId of selectedBlocksQuery5.current(ctx)) {
-    if (!(0, import_core65.hasComponent)(ctx, blockId, DragStart)) continue;
+    if (!(0, import_core68.hasComponent)(ctx, blockId, DragStart)) continue;
     if (isParentSelected(ctx, blockId)) continue;
     const blockStart = DragStart.read(ctx, blockId);
     const block = Block.write(ctx, blockId);
@@ -6064,7 +6250,7 @@ function onScaleHandleDrag(ctx, handleId, position, maintainAspectRatio) {
     const newBlockSize = import_math13.Vec2.clone(blockStart.size);
     import_math13.Vec2.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];
@@ -6075,7 +6261,7 @@ function onScaleHandleDrag(ctx, handleId, position, maintainAspectRatio) {
     }
     const worldPos = import_math13.Vec2.clone(newBlockCenter);
     import_math13.Vec2.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);
@@ -6086,7 +6272,7 @@ function onScaleHandleDrag(ctx, handleId, position, maintainAspectRatio) {
     } else {
       import_math13.Vec2.copy(block.size, newBlockSize);
     }
-    if ((0, import_core65.hasComponent)(ctx, blockId, Text)) {
+    if ((0, import_core68.hasComponent)(ctx, blockId, Text)) {
       const didStretch = handle.kind === TransformHandleKind.Stretch;
       const text = Text.write(ctx, blockId);
       if (didStretch) {
@@ -6124,10 +6310,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) {
@@ -6147,13 +6334,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 (!(0, import_core65.hasComponent)(ctx, blockId, DragStart)) continue;
+    if (!(0, import_core68.hasComponent)(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);
@@ -6161,23 +6348,23 @@ function onRotateScaleHandleDrag(ctx, handleId, position) {
 }
 
 // src/systems/update/selectSystem.ts
-var import_canvas_store45 = require("@woven-ecs/canvas-store");
-var import_core66 = require("@woven-ecs/core");
-var selectedBlocksQuery6 = (0, import_core66.defineQuery)((q) => q.with(Block, Selected));
-var selectionBoxQuery = (0, import_core66.defineQuery)((q) => q.with(Block, SelectionBox));
-var syncedBlocksQuery3 = (0, import_core66.defineQuery)((q) => q.with(Block, import_canvas_store45.Synced, Aabb));
+var import_canvas_store47 = require("@woven-ecs/canvas-store");
+var import_core69 = require("@woven-ecs/core");
+var selectedBlocksQuery6 = (0, import_core69.defineQuery)((q) => q.with(Block, Selected));
+var selectionBoxQuery = (0, import_core69.defineQuery)((q) => q.with(Block, SelectionBox));
+var syncedBlocksQuery3 = (0, import_core69.defineQuery)((q) => q.with(Block, import_canvas_store47.Synced, Aabb));
 var SELECTION_BOX_RANK = "z";
 var selectSystem2 = defineEditorSystem({ phase: "update" }, (ctx) => {
   on(ctx, AddSelectionBox, (ctx2) => {
-    const entityId = (0, import_core66.createEntity)(ctx2);
-    (0, import_core66.addComponent)(ctx2, entityId, Block, {
+    const entityId = (0, import_core69.createEntity)(ctx2);
+    (0, import_core69.addComponent)(ctx2, entityId, Block, {
       tag: "selection-box",
       position: [0, 0],
       size: [0, 0],
       rotateZ: 0,
       rank: SELECTION_BOX_RANK
     });
-    (0, import_core66.addComponent)(ctx2, entityId, SelectionBox, {});
+    (0, import_core69.addComponent)(ctx2, entityId, SelectionBox, {});
   });
   on(ctx, UpdateSelectionBox, (ctx2, { bounds, deselectOthers }) => {
     const selectionBoxes = selectionBoxQuery.current(ctx2);
@@ -6213,26 +6400,36 @@ var selectSystem2 = defineEditorSystem({ phase: "update" }, (ctx) => {
       return;
     }
     const selectionBoxId = selectionBoxes[0];
-    (0, import_core66.removeEntity)(ctx2, selectionBoxId);
+    (0, import_core69.removeEntity)(ctx2, selectionBoxId);
   });
 });
 
 // src/systems/update/updateFrameContainmentSystem.ts
-var import_core67 = require("@woven-ecs/core");
+var import_core70 = require("@woven-ecs/core");
 var updateFrameContainmentSystem = defineEditorSystem({ phase: "update", priority: -10 }, (ctx) => {
   on(ctx, AddFrameHighlight, (ctx2, { frameId }) => {
-    if (!(0, import_core67.hasComponent)(ctx2, frameId, FrameDropTarget)) {
-      (0, import_core67.addComponent)(ctx2, frameId, FrameDropTarget);
+    if (!(0, import_core70.hasComponent)(ctx2, frameId, FrameDropTarget)) {
+      (0, import_core70.addComponent)(ctx2, frameId, FrameDropTarget);
     }
   });
+  on(ctx, PlaceBlockEvent, (ctx2, { entityId }) => {
+    if (!(0, import_core70.hasComponent)(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 ((0, import_core67.hasComponent)(ctx2, frameId, FrameDropTarget)) {
-      (0, import_core67.removeComponent)(ctx2, frameId, FrameDropTarget);
+    if ((0, import_core70.hasComponent)(ctx2, frameId, FrameDropTarget)) {
+      (0, import_core70.removeComponent)(ctx2, frameId, FrameDropTarget);
     }
   });
   on(ctx, AssignFrameChildren, (ctx2, { assignments }) => {
     for (const { entityId, frameId } of assignments) {
-      if (!(0, import_core67.hasComponent)(ctx2, entityId, Block)) continue;
+      if (!(0, import_core70.hasComponent)(ctx2, entityId, Block)) continue;
       const currentParentId = Block.read(ctx2, entityId).parentId;
       if (frameId !== null) {
         if (currentParentId !== frameId) {
@@ -6254,12 +6451,12 @@ var updateFrameContainmentSystem = defineEditorSystem({ phase: "update", priorit
 });
 
 // src/systems/update/updateFrameSetupSystem.ts
-var import_core68 = require("@woven-ecs/core");
-var frameQuery2 = (0, import_core68.defineQuery)((q) => q.tracking(Frame));
+var import_core71 = require("@woven-ecs/core");
+var frameQuery2 = (0, import_core71.defineQuery)((q) => q.tracking(Frame));
 var updateFrameSetupSystem = defineEditorSystem({ phase: "update", priority: 100 }, (ctx) => {
   for (const entityId of frameQuery2.added(ctx)) {
-    if ((0, import_core68.hasComponent)(ctx, entityId, HitGeometry)) continue;
-    (0, import_core68.addComponent)(ctx, entityId, HitGeometry);
+    if ((0, import_core71.hasComponent)(ctx, entityId, HitGeometry)) continue;
+    (0, import_core71.addComponent)(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);
@@ -6273,8 +6470,8 @@ function createCorePlugin(options = {}) {
   return {
     name: CORE_PLUGIN_NAME,
     resources: parsedOptions,
-    singletons: Object.values(singletons_exports).filter((v) => v instanceof import_canvas_store46.CanvasSingletonDef),
-    components: Object.values(components_exports).filter((v) => v instanceof import_canvas_store46.CanvasComponentDef),
+    singletons: Object.values(singletons_exports).filter((v) => v instanceof import_canvas_store48.CanvasSingletonDef),
+    components: Object.values(components_exports).filter((v) => v instanceof import_canvas_store48.CanvasComponentDef),
     blockDefs: [
       {
         tag: "sticky-note",
@@ -6418,7 +6615,7 @@ function createCorePlugin(options = {}) {
     ],
     cursors: CURSORS,
     setup(ctx) {
-      const { domElement } = (0, import_core69.getResources)(ctx);
+      const { domElement } = (0, import_core72.getResources)(ctx);
       if (!domElement) return;
       attachKeyboardListeners(domElement);
       attachMouseListeners(domElement);
@@ -6426,7 +6623,7 @@ function createCorePlugin(options = {}) {
       attachPointerListeners(domElement);
     },
     teardown(ctx) {
-      const { domElement } = (0, import_core69.getResources)(ctx);
+      const { domElement } = (0, import_core72.getResources)(ctx);
       if (!domElement) return;
       detachKeyboardListeners(domElement);
       detachMouseListeners(domElement);
@@ -6437,8 +6634,8 @@ function createCorePlugin(options = {}) {
 }
 
 // src/Editor.ts
-var import_canvas_store47 = require("@woven-ecs/canvas-store");
-var import_core70 = require("@woven-ecs/core");
+var import_canvas_store49 = require("@woven-ecs/canvas-store");
+var import_core73 = require("@woven-ecs/core");
 
 // src/FontLoader.ts
 var import_zod2 = require("zod");
@@ -6468,21 +6665,44 @@ var FontFamily = import_zod2.z.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.
@@ -6519,34 +6739,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).
@@ -6572,13 +6794,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;
   }
 };
 
@@ -6659,7 +6881,7 @@ var Editor = class {
     const plugins = pluginInputs.map(parsePlugin);
     const corePlugin = createCorePlugin(options.corePlugin);
     const sortedPlugins = sortPluginsByDependencies([corePlugin, ...plugins]);
-    const allDefs = [CommandMarker, import_canvas_store47.Synced];
+    const allDefs = [CommandMarker, import_canvas_store49.Synced];
     for (const plugin of sortedPlugins) {
       if (plugin.components) {
         allDefs.push(...plugin.components);
@@ -6732,9 +6954,10 @@ var Editor = class {
       componentsByName,
       singletonsByName,
       componentsById,
-      singletonsById
+      singletonsById,
+      readonly: options.readonly
     };
-    this.world = new import_core70.World(allDefs, {
+    this.world = new import_core73.World(allDefs, {
       maxEntities,
       resources: allResources
     });
@@ -6788,17 +7011,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 = (0, import_core70.createEntity)(ctx);
-      (0, import_core70.addComponent)(ctx, userEntity, import_canvas_store47.Synced, {
+      const userEntity = (0, import_core73.createEntity)(ctx);
+      (0, import_core73.addComponent)(ctx, userEntity, import_canvas_store49.Synced, {
         id: crypto.randomUUID()
       });
-      (0, import_core70.addComponent)(ctx, userEntity, User, {
+      (0, import_core73.addComponent)(ctx, userEntity, User, {
         userId: this.userData.userId,
         sessionId: this.userData.sessionId,
         color: this.userData.color,
@@ -6812,6 +7032,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.
    *
@@ -6877,6 +7120,10 @@ var Editor = class {
       def.spawn(ctx, payload);
     });
   }
+  /** Runtime readonly flag. Input systems and command() check this to gate mutations. */
+  get readonly() {
+    return this.ctx.resources.readonly;
+  }
   /**
    * Subscribe to query changes.
    *
@@ -7023,11 +7270,14 @@ var Editor = class {
   Key,
   Keybind,
   Keyboard,
+  Layer,
   MAX_HIT_ARCS,
   MAX_HIT_CAPSULES,
+  MAX_HIT_POLYGON_POINTS,
   MainThreadSystem,
   Mouse,
   Opacity,
+  PlaceBlockEvent,
   Pointer,
   PointerButton,
   PointerType,
@@ -7087,6 +7337,7 @@ var Editor = class {
   clearPointerTrackingState,
   compareBlockOrder,
   convertRefsToUuids,
+  createBlock,
   createCorePlugin,
   createEntity,
   defineCanvasComponent,
@@ -7124,11 +7375,14 @@ var Editor = class {
   isAlive,
   isAncestor,
   isHeldByRemote,
+  isLayerInteractive,
+  isReadonly,
   on,
   parsePlugin,
   removeComponent,
   removeEntity,
   resolveEmbedUrl,
+  resolveLayerRank,
   resolveRefFields,
   runMachine,
   selectAll,