@jamesyong42/infinite-canvas 1.3.0 → 1.6.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_hooks = require("./hooks-CtP02JNt.cjs");
-const require_ecs = require("./ecs-B4QrqfvQ.cjs");
+const require_hooks = require("./hooks-B-UPFgGj.cjs");
+const require_ecs = require("./ecs-BtX_rCS3.cjs");
 let _jamesyong42_reactive_ecs = require("@jamesyong42/reactive-ecs");
 let react = require("react");
 react = require_hooks.__toESM(react, 1);
@@ -281,6 +281,7 @@ function clamp(value, min, max) {
 */
 const breakpointSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 	name: "breakpoint",
+	phase: "derive",
 	after: "cull",
 	execute: (world) => {
 		const camera = world.getResource(require_ecs.CameraResource);
@@ -325,6 +326,7 @@ const breakpointSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 */
 const cardSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 	name: "card",
+	phase: "derive",
 	execute: (world) => {
 		const resource = world.getResource(require_ecs.CardPresetsResource);
 		if (!resource) return;
@@ -343,6 +345,94 @@ const cardSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 	}
 });
 //#endregion
+//#region src/ecs/systems/cleanup.ts
+/**
+* `cleanup`-phase systems that close out a tick. They run in this order
+* (enforced via within-phase `after:` constraints):
+*
+*   clearDirty → incrementTick → emitFrame → tweenKeepalive
+*
+* 1. `clearDirty`     — clear the World's per-frame `queryChanged` /
+*                       `queryAdded` buffers AND reset the engine-level
+*                       `EngineDirtyResource.dirty` flag.
+* 2. `incrementTick`  — bump `world.currentTick`. Must come after
+*                       `clearDirty` so subscribers triggered by
+*                       `emitFrame` see the new tick number.
+* 3. `emitFrame`      — notify `onFrame` subscribers (`EngineInvalidator`,
+*                       widget state machine, React hooks).
+* 4. `tweenKeepalive` — RFC-004 § Phase 2/4. If any `TransformTween` is
+*                       still alive, re-set `EngineDirtyResource.dirty`
+*                       so the next rAF wakes the engine and the
+*                       animation keeps running. Must run *after*
+*                       `clearDirty`'s reset; otherwise its write would
+*                       be clobbered.
+*
+* RFC-010 Phase 4 — replaces lines 887–903 of the inline tail of
+* `engine.tick()`.
+*/
+const clearDirtySystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "clearDirty",
+	phase: "cleanup",
+	execute: (world) => {
+		world.clearDirty();
+		world.setResource(require_ecs.EngineDirtyResource, { dirty: false });
+	}
+});
+const incrementTickSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "incrementTick",
+	phase: "cleanup",
+	after: "clearDirty",
+	execute: (world) => {
+		world.incrementTick();
+	}
+});
+const emitFrameSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "emitFrame",
+	phase: "cleanup",
+	after: "incrementTick",
+	execute: (world) => {
+		world.emitFrame();
+	}
+});
+const tweenKeepaliveSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "tweenKeepalive",
+	phase: "cleanup",
+	after: "emitFrame",
+	execute: (world) => {
+		for (const _ of world.query(require_ecs.TransformTween)) {
+			world.setResource(require_ecs.EngineDirtyResource, { dirty: true });
+			return;
+		}
+	}
+});
+//#endregion
+//#region src/ecs/systems/container-camera.ts
+/**
+* Auto-attach a default `ContainerCamera` on every entity that just received
+* `Container`, so each container has a usable per-frame camera from birth.
+* Serialization round-trips cleanly; `enterContainer` can read without
+* falling back.
+*
+* Diff signal: `world.queryAdded(Container)` — only entities that received
+* the component *this tick*, matching the original observer's
+* `prev === undefined` guard. Mutating an existing `Container.enterable`
+* does not re-stamp a fresh camera.
+*
+* RFC-010 Phase 3 — migrates the `Container` add observer at
+* `LayoutEngine.ts:147–155` into a `react`-phase system.
+*/
+const containerCameraSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "containerCamera",
+	phase: "react",
+	execute: (world) => {
+		for (const entity of world.queryAdded(require_ecs.Container)) if (!world.hasComponent(entity, require_ecs.ContainerCamera)) world.addComponent(entity, require_ecs.ContainerCamera, {
+			x: 0,
+			y: 0,
+			zoom: 1
+		});
+	}
+});
+//#endregion
 //#region src/ecs/systems/cull.ts
 /**
 * Viewport culling — for every `Active` entity, sets exactly one of `Visible`
@@ -355,7 +445,7 @@ const cardSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 */
 const cullSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 	name: "cull",
-	after: "navigationFilter",
+	phase: "derive",
 	execute: (world) => {
 		const camera = world.getResource(require_ecs.CameraResource);
 		const viewport = world.getResource(require_ecs.ViewportResource);
@@ -400,14 +490,13 @@ const cullSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 *   Dragging present, no PreDragLayer  → promote (stash old layer, set overlay)
 *   PreDragLayer present, no Dragging  → restore (write back stashed layer)
 *
-* RFC-010 Phase 1 — migrates the two `onTagAdded(Dragging)` /
-* `onTagRemoved(Dragging)` observers out of `LayoutEngine.ts` into a
-* `SystemScheduler` system. The `before: 'cull'` constraint is conservative
-* and becomes implicit once RFC-010 Phase 2 stamps `phase: 'react'`.
+* RFC-010 — runs in the `react` phase so the promote/restore is settled
+* before `derive`-phase systems (`cull`, `breakpoint`, `sort`) and the
+* `present`-phase visibility / frame-changes assembly run.
 */
 const dragPromoteSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 	name: "dragPromote",
-	before: "cull",
+	phase: "react",
 	execute: (world) => {
 		for (const entity of world.queryTagged(require_ecs.Dragging)) {
 			if (world.hasComponent(entity, require_ecs.PreDragLayer)) continue;
@@ -428,6 +517,89 @@ const dragPromoteSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 	}
 });
 //#endregion
+//#region src/ecs/systems/frame-changes.ts
+/**
+* Assemble the `FrameChanges` snapshot consumed by `<InfiniteCanvas>`'s
+* rAF tail (DOM transform writes, R3F invalidate, layer re-bucket, event
+* callbacks). Runs in `present` after `visibility` so the prev/current
+* sets are populated.
+*
+* Inputs:
+*   - `world.queryChanged(Transform2D | WidgetBreakpoint | ZIndex | Layer)`
+*     — entityId arrays for each tracked component change.
+*   - `VisibleEntitiesResource.{current, prev}` — set diffing for entered
+*     and exited.
+*   - `TickFlagsResource` — camera / selection / navigation flags set out
+*     of band by engine APIs and `navStackCaptureSystem`.
+*
+* Side effects:
+*   - Writes `FrameChangesResource.changes`.
+*   - Resets `TickFlagsResource.cameraChanged` and `selectionChanged` to
+*     `false` (the flags are per-tick; consuming them clears them so the
+*     next tick starts fresh). `navigationChangedSnapshot` is overwritten
+*     by `navStackCaptureSystem` next tick — no need to reset here.
+*
+* RFC-010 Phase 4 — replaces lines 859–883 of the inline tail of
+* `engine.tick()`.
+*/
+const frameChangesSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "frameChanges",
+	phase: "present",
+	after: "visibility",
+	execute: (world) => {
+		const visible = world.getResource(require_ecs.VisibleEntitiesResource);
+		const flags = world.getResource(require_ecs.TickFlagsResource);
+		const newSet = /* @__PURE__ */ new Set();
+		for (const v of visible.current) newSet.add(v.entityId);
+		const entered = [];
+		const exited = [];
+		for (const id of newSet) if (!visible.prev.has(id)) entered.push(id);
+		for (const id of visible.prev) if (!newSet.has(id)) exited.push(id);
+		world.setResource(require_ecs.FrameChangesResource, { changes: {
+			positionsChanged: world.queryChanged(require_ecs.Transform2D),
+			breakpointsChanged: world.queryChanged(require_ecs.WidgetBreakpoint),
+			zIndicesChanged: world.queryChanged(require_ecs.ZIndex),
+			entered,
+			exited,
+			cameraChanged: flags.cameraChanged,
+			navigationChanged: flags.navigationChangedSnapshot,
+			selectionChanged: flags.selectionChanged,
+			layersChanged: world.queryChanged(require_ecs.Layer).length > 0
+		} });
+		world.setResource(require_ecs.TickFlagsResource, {
+			cameraChanged: false,
+			selectionChanged: false
+		});
+	}
+});
+//#endregion
+//#region src/ecs/systems/nav-stack-capture.ts
+/**
+* Snapshot `NavigationStackResource.changed` into
+* `TickFlagsResource.navigationChangedSnapshot` BEFORE
+* `navigationFilterSystem` (`control` phase) resets the flag mid-tick.
+*
+* RFC-004 § Phase 0c invariant — `navigationFilter` mutates
+* `navStack.changed = false` as its reset signal; reading the flag after
+* `control` would always see false and this-tick navigation pushes/pops
+* would silently miss their `FrameChanges.navigationChanged` notification.
+*
+* Lives in `input` (the earliest phase) so the snapshot is taken before
+* any other engine system runs. `frameChangesSystem` (`present` phase)
+* later reads the snapshot when assembling `FrameChanges`.
+*
+* RFC-010 Phase 4 — replaces the inline pre-`scheduler.execute` capture
+* at lines 815–816 of the previous `engine.tick()` body.
+*/
+const navStackCaptureSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "navStackCapture",
+	phase: "input",
+	execute: (world) => {
+		const navStack = world.getResource(require_ecs.NavigationStackResource);
+		world.setResource(require_ecs.TickFlagsResource, { navigationChangedSnapshot: navStack?.changed ?? false });
+	}
+});
+//#endregion
 //#region src/ecs/systems/navigation-filter.ts
 /**
 * Reconcile `Active` for a single entity against the given nav frame.
@@ -455,6 +627,7 @@ function reconcileEntityActive(world, entity) {
 */
 const navigationFilterSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 	name: "navigationFilter",
+	phase: "control",
 	execute: (world) => {
 		const navStack = world.getResource(require_ecs.NavigationStackResource);
 		const stackChanged = navStack.changed;
@@ -473,12 +646,101 @@ const navigationFilterSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 	}
 });
 //#endregion
+//#region src/ecs/systems/parent-frame-active.ts
+/**
+* Keep `Active` in sync with mid-session `ParentFrame` mutations (RFC-004
+* § Phase 5). Covers the consume path (a child gets `ParentFrame` and
+* should leave the current frame) and re-parenting (the id changes).
+* Without this, a consumed card would retain `Active` at root until the
+* next nav-stack change and would render on top of its own container.
+*
+* Diff signal: `world.queryChanged(ParentFrame)` — entities whose
+* `ParentFrame` was added or set this tick (same set the previous
+* `onComponentChanged` observer fired for).
+*
+* **Limitation: `ParentFrame` removal is not handled here.** Neither
+* `reactive-ecs`'s `onComponentChanged` observer (the previous
+* implementation) nor `queryChanged` emits on `removeComponent`, so the
+* "undo (ParentFrame removed, child returns to root)" case described in
+* the original RFC-004 § Phase 5 comment was never actually covered by
+* this code path. It is recovered by `navigationFilterSystem`'s full
+* refilter on the next `navStack.changed` event. If an `Active` invariant
+* needs to be live across removes, either add `world.queryRemoved` to
+* reactive-ecs or push `navStack.changed = true` from the remover.
+*
+* RFC-010 Phase 3 — migrates the `ParentFrame` observer at
+* `LayoutEngine.ts:165–170` into a `react`-phase system.
+*/
+const parentFrameActiveSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "parentFrameActive",
+	phase: "react",
+	execute: (world) => {
+		for (const entity of world.queryChanged(require_ecs.ParentFrame)) reconcileEntityActive(world, entity);
+	}
+});
+//#endregion
+//#region src/ecs/systems/role-refresh.ts
+/**
+* Reconcile `InteractionRole` and `CursorHint` for a single entity against
+* its current `Draggable` / `Selectable` tag state. Bails if the entity has
+* a custom role (rotate, connect, etc.) — only the default drag/select/
+* canvas roles are auto-managed.
+*/
+function refreshInteractionRole(world, entity) {
+	const current = world.getComponent(entity, require_ecs.InteractionRole);
+	if (current && current.role.type !== "drag" && current.role.type !== "select" && current.role.type !== "canvas") return;
+	const hasDraggable = world.hasTag(entity, require_ecs.Draggable);
+	const hasSelectable = world.hasTag(entity, require_ecs.Selectable);
+	const desiredRole = hasDraggable ? { type: "drag" } : hasSelectable ? { type: "select" } : null;
+	if (desiredRole === null) {
+		if (current) world.removeComponent(entity, require_ecs.InteractionRole);
+		if (world.hasComponent(entity, require_ecs.CursorHint)) world.removeComponent(entity, require_ecs.CursorHint);
+		return;
+	}
+	if (!current) world.addComponent(entity, require_ecs.InteractionRole, {
+		layer: 5,
+		role: desiredRole
+	});
+	else if (current.role.type !== desiredRole.type) world.setComponent(entity, require_ecs.InteractionRole, { role: desiredRole });
+	if (desiredRole.type === "drag" && !world.hasComponent(entity, require_ecs.CursorHint)) world.addComponent(entity, require_ecs.CursorHint, {
+		hover: "grab",
+		active: "grabbing"
+	});
+}
+/**
+* Auto-attach `InteractionRole` and `CursorHint` based on `Draggable` /
+* `Selectable` tag presence. Entities with an explicit non-drag/non-select
+* role (rotate/connect/etc.) are left alone.
+*
+* Diff signal: `reactive-ecs` has no `queryAddedTag` / `queryRemovedTag`
+* primitive, so this system recomputes idempotently each tick over the
+* union {Draggable ∪ Selectable ∪ InteractionRole}. The refresh helper
+* skips entities whose role is already correct, so steady-state writes are
+* zero.
+*
+* RFC-010 Phase 3 — migrates the four tag observers at
+* `LayoutEngine.ts:175–213` (Draggable/Selectable add/remove) into a
+* `react`-phase system.
+*/
+const roleRefreshSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "roleRefresh",
+	phase: "react",
+	execute: (world) => {
+		const candidates = /* @__PURE__ */ new Set();
+		for (const e of world.queryTagged(require_ecs.Draggable)) candidates.add(e);
+		for (const e of world.queryTagged(require_ecs.Selectable)) candidates.add(e);
+		for (const e of world.query(require_ecs.InteractionRole)) candidates.add(e);
+		for (const entity of candidates) refreshInteractionRole(world, entity);
+	}
+});
+//#endregion
 //#region src/ecs/systems/sort.ts
 /**
 * Sort visible entities by z-index (handled in engine.tick()).
 */
 const sortSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 	name: "sort",
+	phase: "derive",
 	after: "breakpoint",
 	execute: (_world) => {}
 });
@@ -516,6 +778,7 @@ function applyEasing(p, easing) {
 */
 const transformTweenSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 	name: "transformTween",
+	phase: "simulate",
 	execute: (world) => {
 		const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
 		for (const entity of world.query(require_ecs.TransformTween)) {
@@ -544,6 +807,60 @@ const transformTweenSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
 	}
 });
 //#endregion
+//#region src/ecs/systems/visibility.ts
+/**
+* Build the per-frame visible-entity list consumed by `InfiniteCanvas`.
+*
+* Iterates `query(Widget, Visible)` (the latter tag is set by `cullSystem`
+* in the same `derive` phase that ran earlier this tick), pulls render-
+* relevant fields off `Transform2D` / `WidgetBreakpoint` / `ZIndex`, sorts
+* by `zIndex`, and writes the resulting array into `VisibleEntitiesResource.
+* current`. The previous tick's entityId set is also preserved on
+* `.prev` so `frameChangesSystem` can compute entered/exited.
+*
+* RFC-010 Phase 4 — replaces lines 830–857 of the inline tail of
+* `engine.tick()`. Profiler instrumentation flows automatically through
+* `SystemProfiler.beginSystem('visibility')`; the previously-dedicated
+* `Profiler.beginVisibility / endVisibility` calls are dropped (the
+* exported `visibilityMs` stat field becomes vestigial — `systemAvg.
+* visibility` carries the same signal).
+*/
+const visibilitySystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+	name: "visibility",
+	phase: "present",
+	execute: (world) => {
+		const newVisible = [];
+		const newVisibleSet = /* @__PURE__ */ new Set();
+		for (const entity of world.query(require_ecs.Widget, require_ecs.Visible)) {
+			const t = world.getComponent(entity, require_ecs.Transform2D);
+			const widget = world.getComponent(entity, require_ecs.Widget);
+			const bp = world.getComponent(entity, require_ecs.WidgetBreakpoint);
+			const zIdx = world.getComponent(entity, require_ecs.ZIndex);
+			if (!t || !widget) continue;
+			newVisibleSet.add(entity);
+			newVisible.push({
+				entityId: entity,
+				x: t.x,
+				y: t.y,
+				width: t.width,
+				height: t.height,
+				breakpoint: bp?.current ?? "normal",
+				zIndex: zIdx?.value ?? 0,
+				surface: widget.surface,
+				widgetType: widget.type
+			});
+		}
+		newVisible.sort((a, b) => a.zIndex - b.zIndex);
+		const previous = world.getResource(require_ecs.VisibleEntitiesResource);
+		const prev = /* @__PURE__ */ new Set();
+		for (const v of previous.current) prev.add(v.entityId);
+		world.setResource(require_ecs.VisibleEntitiesResource, {
+			current: newVisible,
+			prev
+		});
+	}
+});
+//#endregion
 //#region src/ecs/engine/interaction.ts
 /**
 * Hit-zone size for resize hotspots (full width, screen px). Deliberately
@@ -913,6 +1230,17 @@ function createInteractionRuntime(ctx) {
 		}
 		world.setResource(require_ecs.CursorResource, { cursor });
 	}
+	const flyBackSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+		name: "flyBack",
+		phase: "simulate",
+		after: "transformTween",
+		execute: () => runFlyBackSystem()
+	});
+	const cursorSystem = (0, _jamesyong42_reactive_ecs.defineSystem)({
+		name: "cursor",
+		phase: "present",
+		execute: () => runCursorSystem()
+	});
 	/**
 	* Transition to `dragging` mode. Snapshots ZIndex + Transform2D for every
 	* `Selected` entity, elevates them to `maxZ + 1`, tags `Dragging`, opens a
@@ -1440,8 +1768,8 @@ function createInteractionRuntime(ctx) {
 		handlePointerMove,
 		handlePointerUp,
 		handlePointerCancel,
-		runCursorSystem,
-		runFlyBackSystem,
+		flyBackSystem,
+		cursorSystem,
 		selectEntity,
 		clearSelection,
 		getHoveredEntity: () => hoveredEntity,
@@ -1483,6 +1811,35 @@ function createInteractionRuntime(ctx) {
 	};
 }
 //#endregion
+//#region src/ecs/engine/phases.ts
+/**
+* Pipeline phases for the infinite-canvas `LayoutEngine`.
+*
+* `reactive-ecs` ships zero phase vocabulary — phase names and order are the
+* consumer's responsibility. These names are infinite-canvas's choice; a UI
+* tool, a game engine, and an agent simulator would each pick differently.
+*
+* Phase intent:
+* - `input`     — drain external intent (gestures, raw flag captures) into the world
+* - `react`     — maintain invariants in response to mutations from prior writes
+* - `control`   — state machines, intent resolution, navigation
+* - `simulate`  — time-driven mutations (tweens, animation)
+* - `derive`    — compute frame-local derived state (visibility, sort, layout)
+* - `present`   — build outputs for renderers (frame-changes, visible lists)
+* - `cleanup`   — end-of-frame bookkeeping (clearDirty, incrementTick, emitFrame)
+*
+* See RFC-010 for the full architectural rationale.
+*/
+const ENGINE_PHASES = [
+	"input",
+	"react",
+	"control",
+	"simulate",
+	"derive",
+	"present",
+	"cleanup"
+];
+//#endregion
 //#region src/ecs/engine/widget-binding.ts
 function createWidgetRegistry(defs = []) {
 	const map = /* @__PURE__ */ new Map();
@@ -1506,8 +1863,31 @@ function createWidgetRegistry(defs = []) {
 * This is the main entry point for the infinite canvas library.
 */
 function createLayoutEngine(config) {
-	const world = (0, _jamesyong42_reactive_ecs.createWorld)();
-	const scheduler = new _jamesyong42_reactive_ecs.SystemScheduler();
+	const rawWorld = (0, _jamesyong42_reactive_ecs.createWorld)();
+	const DIRTYING_METHODS = new Set([
+		"createEntity",
+		"destroyEntity",
+		"addComponent",
+		"removeComponent",
+		"setComponent",
+		"addTag",
+		"removeTag"
+	]);
+	const world = new Proxy(rawWorld, { get(target, prop, receiver) {
+		if (typeof prop === "string" && DIRTYING_METHODS.has(prop)) {
+			const fn = Reflect.get(target, prop, target);
+			return (...args) => {
+				const result = fn.apply(target, args);
+				rawWorld.setResource(require_ecs.EngineDirtyResource, { dirty: true });
+				return result;
+			};
+		}
+		return Reflect.get(target, prop, receiver);
+	} });
+	const scheduler = new _jamesyong42_reactive_ecs.PhasedScheduler({
+		phases: ENGINE_PHASES,
+		defaultPhase: "derive"
+	});
 	const spatialIndex = new require_hooks.SpatialIndex();
 	const profiler = new require_hooks.Profiler();
 	scheduler.profiler = profiler;
@@ -1530,13 +1910,23 @@ function createLayoutEngine(config) {
 	let snapEnabled = config?.snap?.enabled ?? true;
 	let snapThreshold = config?.snap?.threshold ?? 5;
 	let snapGuidesVisible = config?.snap?.guidesVisible ?? true;
-	scheduler.register(cardSystem);
-	scheduler.register(transformTweenSystem);
+	scheduler.register(navStackCaptureSystem);
+	scheduler.register(dragPromoteSystem);
+	scheduler.register(containerCameraSystem);
+	scheduler.register(parentFrameActiveSystem);
+	scheduler.register(roleRefreshSystem);
 	scheduler.register(navigationFilterSystem);
+	scheduler.register(transformTweenSystem);
+	scheduler.register(cardSystem);
 	scheduler.register(cullSystem);
 	scheduler.register(breakpointSystem);
 	scheduler.register(sortSystem);
-	scheduler.register(dragPromoteSystem);
+	scheduler.register(visibilitySystem);
+	scheduler.register(frameChangesSystem);
+	scheduler.register(clearDirtySystem);
+	scheduler.register(incrementTickSystem);
+	scheduler.register(emitFrameSystem);
+	scheduler.register(tweenKeepaliveSystem);
 	const unsubscribers = [];
 	unsubscribers.push(world.onComponentChanged(require_ecs.Transform2D, (entityId, _prev, t) => {
 		if (t) spatialIndex.upsert(entityId, rectToAABB(t));
@@ -1544,65 +1934,14 @@ function createLayoutEngine(config) {
 	unsubscribers.push(world.onEntityDestroyed((entity) => {
 		spatialIndex.remove(entity);
 	}));
-	unsubscribers.push(world.onComponentChanged(require_ecs.Container, (entityId, prev, next) => {
-		if (prev === void 0 && next !== void 0) {
-			if (!world.hasComponent(entityId, require_ecs.ContainerCamera)) world.addComponent(entityId, require_ecs.ContainerCamera, {
-				x: 0,
-				y: 0,
-				zoom: 1
-			});
-		}
-	}));
-	unsubscribers.push(world.onComponentChanged(require_ecs.ParentFrame, (entityId) => {
-		reconcileEntityActive(world, entityId);
-		markDirtyInternal();
-	}));
-	function refreshInteractionRole(entity) {
-		const current = world.getComponent(entity, require_ecs.InteractionRole);
-		if (current && current.role.type !== "drag" && current.role.type !== "select" && current.role.type !== "canvas") return;
-		const hasDraggable = world.hasTag(entity, require_ecs.Draggable);
-		const hasSelectable = world.hasTag(entity, require_ecs.Selectable);
-		const desiredRole = hasDraggable ? { type: "drag" } : hasSelectable ? { type: "select" } : null;
-		if (desiredRole === null) {
-			if (current) world.removeComponent(entity, require_ecs.InteractionRole);
-			if (world.hasComponent(entity, require_ecs.CursorHint)) world.removeComponent(entity, require_ecs.CursorHint);
-			return;
-		}
-		if (!current) world.addComponent(entity, require_ecs.InteractionRole, {
-			layer: 5,
-			role: desiredRole
-		});
-		else if (current.role.type !== desiredRole.type) world.setComponent(entity, require_ecs.InteractionRole, { role: desiredRole });
-		if (desiredRole.type === "drag" && !world.hasComponent(entity, require_ecs.CursorHint)) world.addComponent(entity, require_ecs.CursorHint, {
-			hover: "grab",
-			active: "grabbing"
-		});
-	}
-	unsubscribers.push(world.onTagAdded(require_ecs.Draggable, refreshInteractionRole));
-	unsubscribers.push(world.onTagRemoved(require_ecs.Draggable, refreshInteractionRole));
-	unsubscribers.push(world.onTagAdded(require_ecs.Selectable, refreshInteractionRole));
-	unsubscribers.push(world.onTagRemoved(require_ecs.Selectable, refreshInteractionRole));
 	if (config?.widgets) for (const w of config.widgets) widgetRegistry.register(w);
 	if (config?.archetypes) for (const a of config.archetypes) archetypeRegistry.register(a);
 	world.setResource(require_ecs.NavigationStackResource, { changed: true });
-	let dirty = false;
-	let cameraChangedThisTick = false;
-	let selectionChangedThisTick = false;
-	let prevVisible = /* @__PURE__ */ new Set();
-	let currentVisible = [];
-	let frameChanges = {
-		positionsChanged: [],
-		breakpointsChanged: [],
-		zIndicesChanged: [],
-		entered: [],
-		exited: [],
-		cameraChanged: false,
-		navigationChanged: false,
-		selectionChanged: false,
-		layersChanged: false
-	};
 	function markDirtyInternal() {
-		dirty = true;
+		world.setResource(require_ecs.EngineDirtyResource, { dirty: true });
+	}
+	function markCameraChanged() {
+		world.setResource(require_ecs.TickFlagsResource, { cameraChanged: true });
 	}
 	const interaction = createInteractionRuntime({
 		world,
@@ -1610,12 +1949,14 @@ function createLayoutEngine(config) {
 		commandBuffer,
 		markDirty: markDirtyInternal,
 		notifySelectionChanged: () => {
-			selectionChangedThisTick = true;
+			world.setResource(require_ecs.TickFlagsResource, { selectionChanged: true });
 		},
 		getSnapEnabled: () => snapEnabled,
 		getSnapThreshold: () => snapThreshold,
 		getWidgetInteraction: (type) => widgetRegistry.get(type)?.interaction
 	});
+	scheduler.register(interaction.flyBackSystem);
+	scheduler.register(interaction.cursorSystem);
 	const engine = {
 		world,
 		createEntity(inits) {
@@ -1625,7 +1966,6 @@ function createLayoutEngine(config) {
 				if (type.__kind === "tag") world.addTag(entity, type);
 				else world.addComponent(entity, type, init[1] ?? {});
 			}
-			markDirtyInternal();
 			return entity;
 		},
 		spawn(id, opts = {}) {
@@ -1741,14 +2081,12 @@ function createLayoutEngine(config) {
 		destroyEntity(id) {
 			spatialIndex.remove(id);
 			world.destroyEntity(id);
-			markDirtyInternal();
 		},
 		get(entity, type) {
 			return world.getComponent(entity, type);
 		},
 		set(entity, type, data) {
 			world.setComponent(entity, type, data);
-			markDirtyInternal();
 		},
 		has(entity, type) {
 			if (type.__kind === "tag") return world.hasTag(entity, type);
@@ -1756,19 +2094,15 @@ function createLayoutEngine(config) {
 		},
 		addComponent(entity, type, data) {
 			world.addComponent(entity, type, data ?? type.defaults);
-			markDirtyInternal();
 		},
 		removeComponent(entity, type) {
 			world.removeComponent(entity, type);
-			markDirtyInternal();
 		},
 		addTag(entity, type) {
 			world.addTag(entity, type);
-			markDirtyInternal();
 		},
 		removeTag(entity, type) {
 			world.removeTag(entity, type);
-			markDirtyInternal();
 		},
 		getSchemaFor(entity) {
 			const w = world.getComponent(entity, require_ecs.Widget);
@@ -1788,7 +2122,7 @@ function createLayoutEngine(config) {
 			const camera = world.getResource(require_ecs.CameraResource);
 			camera.x -= dx / camera.zoom;
 			camera.y -= dy / camera.zoom;
-			cameraChangedThisTick = true;
+			markCameraChanged();
 			markDirtyInternal();
 		},
 		panTo(worldX, worldY) {
@@ -1796,7 +2130,7 @@ function createLayoutEngine(config) {
 			const viewport = world.getResource(require_ecs.ViewportResource);
 			camera.x = worldX - viewport.width / (2 * camera.zoom);
 			camera.y = worldY - viewport.height / (2 * camera.zoom);
-			cameraChangedThisTick = true;
+			markCameraChanged();
 			markDirtyInternal();
 		},
 		zoomAtPoint(screenX, screenY, delta) {
@@ -1807,7 +2141,7 @@ function createLayoutEngine(config) {
 			camera.zoom = newZoom;
 			camera.x = worldBefore.x - screenX / newZoom;
 			camera.y = worldBefore.y - screenY / newZoom;
-			cameraChangedThisTick = true;
+			markCameraChanged();
 			markDirtyInternal();
 		},
 		zoomTo(zoom) {
@@ -1819,7 +2153,7 @@ function createLayoutEngine(config) {
 			camera.zoom = clamp(zoom, zoomConfig.min, zoomConfig.max);
 			camera.x = centerWorldX - viewport.width / (2 * camera.zoom);
 			camera.y = centerWorldY - viewport.height / (2 * camera.zoom);
-			cameraChangedThisTick = true;
+			markCameraChanged();
 			markDirtyInternal();
 		},
 		/**
@@ -1833,7 +2167,7 @@ function createLayoutEngine(config) {
 			const camera = world.getResource(require_ecs.CameraResource);
 			if (camera.gesturing === active) return;
 			camera.gesturing = active;
-			cameraChangedThisTick = true;
+			markCameraChanged();
 			markDirtyInternal();
 		},
 		zoomToFit(entityIds, padding = 50) {
@@ -1862,7 +2196,7 @@ function createLayoutEngine(config) {
 			camera.zoom = zoom;
 			camera.x = minX - padding - (viewport.width / zoom - contentWidth) / 2;
 			camera.y = minY - padding - (viewport.height / zoom - contentHeight) / 2;
-			cameraChangedThisTick = true;
+			markCameraChanged();
 			markDirtyInternal();
 		},
 		setViewport(width, height, dpr) {
@@ -1884,14 +2218,10 @@ function createLayoutEngine(config) {
 			commandBuffer.endGroup();
 		},
 		undo() {
-			const did = commandBuffer.undo(world);
-			if (did) markDirtyInternal();
-			return did;
+			return commandBuffer.undo(world);
 		},
 		redo() {
-			const did = commandBuffer.redo(world);
-			if (did) markDirtyInternal();
-			return did;
+			return commandBuffer.redo(world);
 		},
 		canUndo() {
 			return commandBuffer.canUndo();
@@ -2024,7 +2354,7 @@ function createLayoutEngine(config) {
 			camera.y = incoming.y;
 			camera.zoom = incoming.zoom;
 			interaction.clearSelection();
-			cameraChangedThisTick = true;
+			markCameraChanged();
 			markDirtyInternal();
 		},
 		exitContainer() {
@@ -2049,7 +2379,7 @@ function createLayoutEngine(config) {
 			camera.y = incoming.y;
 			camera.zoom = incoming.zoom;
 			interaction.clearSelection();
-			cameraChangedThisTick = true;
+			markCameraChanged();
 			markDirtyInternal();
 		},
 		getActiveContainer() {
@@ -2059,79 +2389,25 @@ function createLayoutEngine(config) {
 		getNavigationDepth() {
 			return world.getResource(require_ecs.NavigationStackResource).frames.length - 1;
 		},
-		markDirty() {
+		invalidatePresent() {
 			markDirtyInternal();
 		},
 		profiler,
 		tick() {
 			profiler.beginFrame(world.currentTick);
-			const navigationChangedThisTick = world.getResource(require_ecs.NavigationStackResource)?.changed ?? false;
 			scheduler.execute(world);
-			interaction.runFlyBackSystem();
-			interaction.runCursorSystem();
-			profiler.beginVisibility();
-			const newVisible = [];
-			const newVisibleSet = /* @__PURE__ */ new Set();
-			for (const entity of world.query(require_ecs.Widget, require_ecs.Visible)) {
-				const t = world.getComponent(entity, require_ecs.Transform2D);
-				const widget = world.getComponent(entity, require_ecs.Widget);
-				const bp = world.getComponent(entity, require_ecs.WidgetBreakpoint);
-				const zIdx = world.getComponent(entity, require_ecs.ZIndex);
-				if (!t || !widget) continue;
-				newVisibleSet.add(entity);
-				newVisible.push({
-					entityId: entity,
-					x: t.x,
-					y: t.y,
-					width: t.width,
-					height: t.height,
-					breakpoint: bp?.current ?? "normal",
-					zIndex: zIdx?.value ?? 0,
-					surface: widget.surface,
-					widgetType: widget.type
-				});
-			}
-			newVisible.sort((a, b) => a.zIndex - b.zIndex);
-			profiler.endVisibility();
-			const entered = [];
-			const exited = [];
-			for (const entity of newVisibleSet) if (!prevVisible.has(entity)) entered.push(entity);
-			for (const entity of prevVisible) if (!newVisibleSet.has(entity)) exited.push(entity);
-			frameChanges = {
-				positionsChanged: world.queryChanged(require_ecs.Transform2D),
-				breakpointsChanged: world.queryChanged(require_ecs.WidgetBreakpoint),
-				zIndicesChanged: world.queryChanged(require_ecs.ZIndex),
-				entered,
-				exited,
-				cameraChanged: cameraChangedThisTick,
-				navigationChanged: navigationChangedThisTick,
-				selectionChanged: selectionChangedThisTick,
-				layersChanged: world.queryChanged(require_ecs.Layer).length > 0
-			};
-			currentVisible = newVisible;
-			prevVisible = newVisibleSet;
-			cameraChangedThisTick = false;
-			selectionChangedThisTick = false;
-			profiler.endFrame(world.entityCount, newVisible.length);
-			world.clearDirty();
-			world.incrementTick();
-			world.emitFrame();
-			dirty = false;
-			for (const _ of world.query(require_ecs.TransformTween)) {
-				dirty = true;
-				break;
-			}
+			profiler.endFrame(world.entityCount, world.getResource(require_ecs.VisibleEntitiesResource).current.length);
 		},
 		flushIfDirty() {
-			if (!dirty) return false;
+			if (!world.getResource(require_ecs.EngineDirtyResource).dirty) return false;
 			engine.tick();
 			return true;
 		},
 		getVisibleEntities() {
-			return currentVisible;
+			return world.getResource(require_ecs.VisibleEntitiesResource).current;
 		},
 		getFrameChanges() {
-			return frameChanges;
+			return world.getResource(require_ecs.FrameChangesResource).changes;
 		},
 		getSpatialIndex() {
 			return spatialIndex;
@@ -3529,26 +3805,11 @@ const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine
 		snapGuidesRef.current = snapGuides;
 	}, [snapGuides]);
 	(0, react.useImperativeHandle)(ref, () => ({
-		panTo: (x, y) => {
-			engine.panTo(x, y);
-			engine.markDirty();
-		},
-		zoomTo: (zoom) => {
-			engine.zoomTo(zoom);
-			engine.markDirty();
-		},
-		zoomToFit: (padding) => {
-			engine.zoomToFit(void 0, padding);
-			engine.markDirty();
-		},
-		undo: () => {
-			engine.undo();
-			engine.markDirty();
-		},
-		redo: () => {
-			engine.redo();
-			engine.markDirty();
-		},
+		panTo: (x, y) => engine.panTo(x, y),
+		zoomTo: (zoom) => engine.zoomTo(zoom),
+		zoomToFit: (padding) => engine.zoomToFit(void 0, padding),
+		undo: () => engine.undo(),
+		redo: () => engine.redo(),
 		getEngine: () => engine
 	}), [engine]);
 	const webglCanvasRef = (0, react.useRef)(null);
@@ -3610,7 +3871,7 @@ const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine
 		}
 		if (selection) manager.setSelectionConfig(selection);
 		if (snapGuides) manager.setSnapGuideConfig(snapGuides);
-		engine.markDirty();
+		engine.invalidatePresent();
 	}, [
 		engine,
 		grid,
@@ -3622,7 +3883,7 @@ const InfiniteCanvas = react.default.forwardRef(function InfiniteCanvas({ engine
 		const container = containerRef.current;
 		if (container) applyOverlapGlowVars(container, merged);
 		applyOverlapGlowShaderUniforms(merged);
-		engine.markDirty();
+		engine.invalidatePresent();
 	}, [engine, overlapGlow]);
 	const r3fEventManagerRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {