openplanr 3.2.0 → 3.3.0

package/lib/host-packages/claude/openplanr/runtime/design/scripts/runtime/packages/artifact/templates/artifact-review-stage.js.sources/03-protocol-contracts.js

@@ -276,6 +276,7 @@
     "maxContains",
     "required",
     "properties",
+    "propertyNames",
     "additionalProperties",
     "maxProperties",
     "dependentRequired",
@@ -344,6 +345,7 @@
     maxContains: ["a non-negative integer", isCount],
     required: ["an array of unique strings", isUniqueStrings],
     properties: ["an object of schemas", isSchemaMap],
+    propertyNames: ["a schema", isSchema],
     additionalProperties: ["a schema", isSchema],
     maxProperties: ["a non-negative integer", isCount],
     dependentRequired: [
@@ -612,6 +614,8 @@
       }
       const props = schema6.properties || {};
       for (const [k, v] of Object.entries(value)) {
+        if (schema6.propertyNames !== void 0)
+          validateNode(k, schema6.propertyNames, `${path}.${k}`, errs, context);
         if (Object.hasOwn(props, k)) evaluated.add(k);
         else if (schema6.additionalProperties !== void 0) evaluated.add(k);
         if (!Object.hasOwn(props, k)) {
@@ -4768,7 +4772,7 @@
       }
     }
   });
-  var DESIGN_DOCUMENT_SCHEMA = freeze({
+  var DESIGN_DOCUMENT_V120_SCHEMA = freeze({
     ...DESIGN_DOCUMENT_V1_SCHEMA,
     $id: "https://openplanr.dev/schemas/v1.20.0/design-document.schema.json",
     "x-openplanr-contract": { id: "design-document", version: "1.20.0" },
@@ -4827,6 +4831,78 @@
       coordinate: { type: "number", minimum: -1e7, maximum: 1e7 }
     }
   });
+  var PROP_TOKEN_SCHEMA = {
+    type: "string",
+    minLength: 1,
+    maxLength: 128,
+    pattern: "^[a-z][a-z0-9-]*(?![\\s\\S])"
+  };
+  var propTokenPattern = new RegExp(PROP_TOKEN_SCHEMA.pattern, "u");
+  var currentDocument = (
+    /** @type {{ properties: Record<string, unknown>; [key: string]: unknown }} */
+    structuredClone(DESIGN_DOCUMENT_V120_SCHEMA)
+  );
+  currentDocument.$id = "https://openplanr.dev/schemas/v1.22.0/design-document.schema.json";
+  currentDocument["x-openplanr-contract"] = { id: "design-document", version: "1.22.0" };
+  currentDocument.properties.schemaVersion = { enum: ["1.0.0", "1.1.0"] };
+  var screenSchema = (
+    /** @type {{ items: { properties: Record<string, unknown> } }} */
+    currentDocument.properties.screens
+  );
+  screenSchema.items.properties.props = {
+    type: "object",
+    propertyNames: PROP_TOKEN_SCHEMA,
+    additionalProperties: {
+      oneOf: [
+        {
+          type: "object",
+          additionalProperties: false,
+          required: ["type", "options", "default"],
+          properties: {
+            type: { const: "enum" },
+            options: {
+              type: "array",
+              minItems: 1,
+              uniqueItems: true,
+              items: PROP_TOKEN_SCHEMA
+            },
+            default: PROP_TOKEN_SCHEMA
+          }
+        },
+        {
+          type: "object",
+          additionalProperties: false,
+          required: ["type", "default"],
+          properties: { type: { const: "boolean" }, default: { type: "boolean" } }
+        }
+      ]
+    }
+  };
+  var variantSchema = (
+    /** @type {{ items: { properties: Record<string, unknown> } }} */
+    currentDocument.properties.variants
+  );
+  variantSchema.items.properties.props = {
+    type: "object",
+    propertyNames: { $ref: "#/$defs/id" },
+    additionalProperties: {
+      type: "object",
+      propertyNames: PROP_TOKEN_SCHEMA,
+      additionalProperties: { anyOf: [PROP_TOKEN_SCHEMA, { type: "boolean" }] }
+    }
+  };
+  currentDocument.allOf = [
+    {
+      if: { properties: { schemaVersion: { const: "1.1.0" } }, required: ["schemaVersion"] },
+      else: {
+        properties: {
+          screens: { items: { not: { required: ["props"] } } },
+          variants: { items: { not: { required: ["props"] } } }
+        }
+      }
+    }
+  ];
+  var DESIGN_DOCUMENT_SCHEMA = freeze(currentDocument);
 
   // ../protocol/src/workspace-contracts.mjs
   var DESIGN_WORKSPACE_VERSION = "1.0.0";

package/lib/host-packages/claude/openplanr/runtime/design/scripts/runtime/packages/artifact/templates/artifact-review-stage.js.sources.json

@@ -2,8 +2,8 @@
   "kind": "openplanr-runtime-asset-sources",
   "schemaVersion": "1.0.0",
   "asset": "artifact-review-stage.js",
-  "bytes": 537191,
-  "sha256": "d9f30ef394d0fb333e6f90f62b9d736bc84972f476ec1b1ec2e394de58938e84",
+  "bytes": 539739,
+  "sha256": "42ea407da5d301f26f0c26eebcb20c404419c89fc9a455132a68eafdf099d891",
   "scopes": [
     {
       "id": "bundle",
@@ -55,8 +55,8 @@
         "packages/protocol/src/studio-presentation-contracts.mjs",
         "packages/protocol/src/workspace-contracts.mjs"
       ],
-      "bytes": 189121,
-      "sha256": "c5ecc1e13bc56b399f69808c609b21f69865ff134e50a8b4898dd8a93bd582ef"
+      "bytes": 191669,
+      "sha256": "fbf069e668fecf9519cab318f88033b106b93933ea0788f2c4c8cf8374c35e38"
     },
     {
       "path": "artifact-review-stage.js.sources/04-compression.js",

package/lib/host-packages/claude/openplanr/runtime/design/scripts/runtime/packages/design/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openplanr/design",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": true,
   "type": "module",
   "description": "Canonical OpenPlanr design helpers and design-loop engine",
@@ -46,9 +46,9 @@
     "node": ">=22.13.0"
   },
   "dependencies": {
-    "@openplanr/artifact": "0.7.0",
-    "@openplanr/canvas": "0.0.0",
-    "@openplanr/protocol": "0.14.0"
+    "@openplanr/artifact": "0.8.0",
+    "@openplanr/canvas": "0.0.1",
+    "@openplanr/protocol": "0.15.0"
   },
   "scripts": {
     "test": "node --test --test-concurrency=2 tests/*.test.mjs",

package/lib/host-packages/claude/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/02-react.js

@@ -465,7 +465,7 @@
       exports.useTransition = function() {
         return ReactSharedInternals.H.useTransition();
       };
-      exports.version = "19.3.0";
+      exports.version = "19.3.1";
     }
   });
 
@@ -636,7 +636,7 @@
       exports.useFormStatus = function() {
         return ReactSharedInternals.H.useHostTransitionStatus();
       };
-      exports.version = "19.3.0";
+      exports.version = "19.3.1";
     }
   });
 

package/lib/host-packages/claude/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/09-react-dom-client-public-roots.js

@@ -514,12 +514,12 @@
         }
       };
       var isomorphicReactPackageVersion$jscomp$inline_2043 = React36.version;
-      if (isomorphicReactPackageVersion$jscomp$inline_2043 !== "19.3.0")
+      if (isomorphicReactPackageVersion$jscomp$inline_2043 !== "19.3.1")
         throw Error(
           formatProdErrorMessage(
             527,
             isomorphicReactPackageVersion$jscomp$inline_2043,
-            "19.3.0"
+            "19.3.1"
           )
         );
       ReactDOMSharedInternals.findDOMNode = function(componentOrElement) {
@@ -530,10 +530,10 @@
       };
       var internals$jscomp$inline_2586 = {
         bundleType: 0,
-        version: "19.3.0",
+        version: "19.3.1",
         rendererPackageName: "react-dom",
         currentDispatcherRef: ReactSharedInternals,
-        reconcilerVersion: "19.3.0"
+        reconcilerVersion: "19.3.1"
       };
       if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && (hook$jscomp$inline_2587 = __REACT_DEVTOOLS_GLOBAL_HOOK__, !hook$jscomp$inline_2587.isDisabled && hook$jscomp$inline_2587.supportsFiber))
         try {
@@ -579,4 +579,4 @@
           defaultOnDefaultTransitionIndicator
         ), initialChildren.context = getContextForSubtree(null), options3 = initialChildren.current, isStrictMode = requestUpdateLane(), isStrictMode = getBumpedLaneForHydrationByLane(isStrictMode), identifierPrefix = createUpdate(isStrictMode), identifierPrefix.callback = null, enqueueUpdate(options3, identifierPrefix, isStrictMode), options3 = isStrictMode, initialChildren.current.lanes = options3, markRootUpdated$1(initialChildren, options3), ensureRootIsScheduled(initialChildren), container[internalContainerInstanceKey] = initialChildren.current, listenToAllSupportedEvents(container), new ReactDOMHydrationRoot(initialChildren);
       };
-      exports.version = "19.3.0";
+      exports.version = "19.3.1";

package/lib/host-packages/claude/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/12-protocol-contracts.js

@@ -154,7 +154,7 @@
         }
       }
     }
-  }), DESIGN_DOCUMENT_SCHEMA = freeze({
+  }), DESIGN_DOCUMENT_V120_SCHEMA = freeze({
     ...DESIGN_DOCUMENT_V1_SCHEMA,
     $id: "https://openplanr.dev/schemas/v1.20.0/design-document.schema.json",
     "x-openplanr-contract": { id: "design-document", version: "1.20.0" },
@@ -212,4 +212,74 @@
       DESIGN_DOCUMENT_V1_SCHEMA.$defs,
       coordinate: { type: "number", minimum: -1e7, maximum: 1e7 }
     }
-  });
+  }), PROP_TOKEN_SCHEMA = {
+    type: "string",
+    minLength: 1,
+    maxLength: 128,
+    pattern: "^[a-z][a-z0-9-]*(?![\\s\\S])"
+  }, propTokenPattern = new RegExp(PROP_TOKEN_SCHEMA.pattern, "u");
+  var currentDocument = (
+    /** @type {{ properties: Record<string, unknown>; [key: string]: unknown }} */
+    structuredClone(DESIGN_DOCUMENT_V120_SCHEMA)
+  );
+  currentDocument.$id = "https://openplanr.dev/schemas/v1.22.0/design-document.schema.json";
+  currentDocument["x-openplanr-contract"] = { id: "design-document", version: "1.22.0" };
+  currentDocument.properties.schemaVersion = { enum: ["1.0.0", "1.1.0"] };
+  var screenSchema = (
+    /** @type {{ items: { properties: Record<string, unknown> } }} */
+    currentDocument.properties.screens
+  );
+  screenSchema.items.properties.props = {
+    type: "object",
+    propertyNames: PROP_TOKEN_SCHEMA,
+    additionalProperties: {
+      oneOf: [
+        {
+          type: "object",
+          additionalProperties: !1,
+          required: ["type", "options", "default"],
+          properties: {
+            type: { const: "enum" },
+            options: {
+              type: "array",
+              minItems: 1,
+              uniqueItems: !0,
+              items: PROP_TOKEN_SCHEMA
+            },
+            default: PROP_TOKEN_SCHEMA
+          }
+        },
+        {
+          type: "object",
+          additionalProperties: !1,
+          required: ["type", "default"],
+          properties: { type: { const: "boolean" }, default: { type: "boolean" } }
+        }
+      ]
+    }
+  };
+  var variantSchema = (
+    /** @type {{ items: { properties: Record<string, unknown> } }} */
+    currentDocument.properties.variants
+  );
+  variantSchema.items.properties.props = {
+    type: "object",
+    propertyNames: { $ref: "#/$defs/id" },
+    additionalProperties: {
+      type: "object",
+      propertyNames: PROP_TOKEN_SCHEMA,
+      additionalProperties: { anyOf: [PROP_TOKEN_SCHEMA, { type: "boolean" }] }
+    }
+  };
+  currentDocument.allOf = [
+    {
+      if: { properties: { schemaVersion: { const: "1.1.0" } }, required: ["schemaVersion"] },
+      else: {
+        properties: {
+          screens: { items: { not: { required: ["props"] } } },
+          variants: { items: { not: { required: ["props"] } } }
+        }
+      }
+    }
+  ];
+  var DESIGN_DOCUMENT_SCHEMA = freeze(currentDocument);

package/lib/host-packages/claude/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/13-design-review-experience.js

@@ -1863,7 +1863,14 @@ ${fence}`;
         { class: "design-minimap-close", "aria-label": "Close minimap" }
       );
       map.append(svg, close), q(".planr-stage").append(map);
-      let scroll = q(".planr-stage-scroll"), geometry = null, scheduled = !1, mapBoards = /* @__PURE__ */ new Map(), viewportRect = document.createElementNS(svg.namespaceURI, "rect");
+      let scroll = q(".planr-stage-scroll"), scrollSize = null, sizeObserver = typeof ResizeObserver == "function" ? new ResizeObserver(() => {
+        scrollSize = null;
+      }) : null;
+      sizeObserver?.observe(scroll), destroyers.push(() => sizeObserver?.disconnect());
+      let stageSize = () => {
+        let size4 = scrollSize ?? { width: scroll.clientWidth, height: scroll.clientHeight };
+        return sizeObserver && (scrollSize = size4), size4;
+      }, geometry = null, scheduled = !1, mapBoards = /* @__PURE__ */ new Map(), viewportRect = document.createElementNS(svg.namespaceURI, "rect");
       viewportRect.setAttribute("class", "design-minimap-viewport"), viewportRect.setAttribute("pointer-events", "none"), svg.append(viewportRect);
       let attribute = (element, name, value) => {
         element.getAttribute(name) !== String(value) && element.setAttribute(name, String(value));
@@ -1885,11 +1892,11 @@ ${fence}`;
           };
         });
         if (!boards.length) return;
-        let viewport = {
+        let { width: stageWidth, height: stageHeight } = stageSize(), viewport = {
           x: -current.camera.x / current.zoom,
           y: -current.camera.y / current.zoom,
-          width: scroll.clientWidth / current.zoom,
-          height: scroll.clientHeight / current.zoom
+          width: stageWidth / current.zoom,
+          height: stageHeight / current.zoom
         }, minX = Math.min(...boards.map((item) => item.x)), minY = Math.min(...boards.map((item) => item.y)), width = Math.max(...boards.map((item) => item.x + item.width)) - minX, height = Math.max(...boards.map((item) => item.y + item.height)) - minY, scale = Math.min(184 / Math.max(1, width), 112 / Math.max(1, height)), offsetX = (200 - width * scale) / 2, offsetY = (128 - height * scale) / 2;
         geometry = { minX, minY, scale, viewport, offsetX, offsetY };
         let place = (element, box) => {
@@ -1929,10 +1936,10 @@ ${fence}`;
       on(root, "planr:design-render", schedule), on(root, "planr:design-camera", schedule), on(window, "resize", schedule);
       let dragging = !1, move = (event) => {
         if (!geometry) return;
-        let bounds = svg.getBoundingClientRect(), x = (event.clientX - bounds.left) * 200 / bounds.width, y = (event.clientY - bounds.top) * 128 / bounds.height, worldX = geometry.minX + (x - geometry.offsetX) / geometry.scale, worldY = geometry.minY + (y - geometry.offsetY) / geometry.scale;
+        let bounds = svg.getBoundingClientRect(), x = (event.clientX - bounds.left) * 200 / bounds.width, y = (event.clientY - bounds.top) * 128 / bounds.height, worldX = geometry.minX + (x - geometry.offsetX) / geometry.scale, worldY = geometry.minY + (y - geometry.offsetY) / geometry.scale, { width, height } = stageSize();
         studio.setCamera({
-          x: scroll.clientWidth / 2 - worldX * state().zoom,
-          y: scroll.clientHeight / 2 - worldY * state().zoom
+          x: width / 2 - worldX * state().zoom,
+          y: height / 2 - worldY * state().zoom
         });
       };
       on(svg, "pointerdown", (event) => {

package/lib/host-packages/claude/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/15-canvas-engine.js

@@ -142,7 +142,7 @@
   function createCulling(options2 = {}) {
     let marginFactor = options2.marginFactor ?? 2, chunkSize = options2.chunkSize ?? 200;
     positive("culling.marginFactor", marginFactor), marginFactor < 1 && invalid("culling.marginFactor", marginFactor), positive("culling.chunkSize", chunkSize);
-    let grid = createSpatialGrid(options2.cellSize), nodes = /* @__PURE__ */ new Map(), sources = /* @__PURE__ */ new Map(), mounted = /* @__PURE__ */ new Set(), moved = /* @__PURE__ */ new Set(), region, dirty = !0, pinsDirty = !1, desired = /* @__PURE__ */ new Set(), queue = [], frozenUntil = -1 / 0, optionalMounts = !0;
+    let grid = createSpatialGrid(options2.cellSize), nodes = /* @__PURE__ */ new Map(), sources = /* @__PURE__ */ new Map(), mounted = /* @__PURE__ */ new Set(), moved = /* @__PURE__ */ new Set(), region, dirty = !0, pinsDirty = !1, desired = /* @__PURE__ */ new Set(), queue = [], queueStale = !1, frozenUntil = -1 / 0, optionalMounts = !0;
     function getPinnedIds() {
       let pins = /* @__PURE__ */ new Set();
       for (let ids of sources.values())
@@ -167,35 +167,45 @@
       let outside = !region || viewport.x < region.x || viewport.y < region.y || viewport.x + viewport.width > region.x + region.width || viewport.y + viewport.height > region.y + region.height, reevaluate = dirty || outside || zoomChanged || optionalMounts !== admitOptional;
       optionalMounts = admitOptional;
       let pins = getPinnedIds();
-      if (reevaluate && (region = {
+      reevaluate && (region = {
         x: viewport.x - viewport.width * (marginFactor - 1) / 2,
         y: viewport.y - viewport.height * (marginFactor - 1) / 2,
         width: viewport.width * marginFactor,
         height: viewport.height * marginFactor
-      }, desired = admitOptional ? grid.query(region) : /* @__PURE__ */ new Set()), reevaluate || pinsDirty) {
-        let centerX = viewport.x + viewport.width / 2, centerY = viewport.y + viewport.height / 2, distance = (id) => {
-          let node = nodes.get(id);
-          return node ? (node.bounds.x + node.bounds.width / 2 - centerX) ** 2 + (node.bounds.y + node.bounds.height / 2 - centerY) ** 2 : 1 / 0;
-        };
-        queue = [...desired].filter((id) => !mounted.has(id) && !pins.has(id)).sort((left, right) => distance(left) - distance(right) || left.localeCompare(right));
-      }
+      }, desired = admitOptional ? grid.query(region) : /* @__PURE__ */ new Set()), (reevaluate || pinsDirty) && (queueStale = !0);
       let admitted = [], removed = [];
       for (let id of mounted)
         (!nodes.has(id) || !pins.has(id) && !desired.has(id)) && (mounted.delete(id), removed.push(id));
       for (let id of pins)
         mounted.has(id) || (mounted.add(id), admitted.push(id));
       let frozen = now < frozenUntil;
+      if (queueStale && !frozen) {
+        let centerX = viewport.x + viewport.width / 2, centerY = viewport.y + viewport.height / 2, distance = (id) => {
+          let node = nodes.get(id);
+          return node ? (node.bounds.x + node.bounds.width / 2 - centerX) ** 2 + (node.bounds.y + node.bounds.height / 2 - centerY) ** 2 : 1 / 0;
+        };
+        queue = [...desired].filter((id) => !mounted.has(id) && !pins.has(id)).sort((left, right) => distance(left) - distance(right) || left.localeCompare(right)), queueStale = !1;
+      }
       if (!frozen && (!gesture || reevaluate)) {
         let batch = queue.splice(0, chunkSize);
         for (let id of batch)
           mounted.add(id), admitted.push(id);
       }
+      let waiting = queue.length > 0;
+      if (queueStale) {
+        waiting = !1;
+        for (let id of desired)
+          if (!mounted.has(id) && !pins.has(id)) {
+            waiting = !0;
+            break;
+          }
+      }
       let geometry = [...moved];
       return moved.clear(), dirty = !1, pinsDirty = !1, {
         ...admitted.length || removed.length ? { mount: { mounted: admitted, unmounted: removed } } : {},
         geometry,
-        pending: queue.length > 0 && !gesture && !frozen,
-        ...queue.length && frozen ? { resumeAt: frozenUntil } : {}
+        pending: waiting && !gesture && !frozen,
+        ...waiting && frozen ? { resumeAt: frozenUntil } : {}
       };
     }
     return {
@@ -220,7 +230,7 @@
       },
       getRegion: () => region,
       reset() {
-        mounted.clear(), moved.clear(), region = void 0, desired.clear(), queue = [], frozenUntil = -1 / 0, dirty = !0;
+        mounted.clear(), moved.clear(), region = void 0, desired.clear(), queue = [], queueStale = !1, frozenUntil = -1 / 0, dirty = !0;
       }
     };
   }
@@ -233,7 +243,7 @@
     return { x: left, y: top, width: right - left, height: bottom - top };
   }
   function buildEdgeRoutes(nodes, edges, region, strict = !1) {
-    let byId = new Map(Array.from(nodes, (node) => [node.id, node])), grouped = /* @__PURE__ */ new Map(), diagnostics = [], drawnBounds = [], ids = /* @__PURE__ */ new Set();
+    let byId = new Map(edges.length ? Array.from(nodes, (node) => [node.id, node]) : []), grouped = /* @__PURE__ */ new Map(), diagnostics = [], drawnBounds = [], ids = /* @__PURE__ */ new Set();
     for (let edge of edges) {
       (!edge || typeof edge != "object") && invalid("edge", edge);
       for (let field of ["id", "from", "to", "style"])
@@ -653,15 +663,25 @@
     function listen(target, type, listener, options2) {
       target.addEventListener(type, listener, options2), removers.push(() => target.removeEventListener(type, listener, options2));
     }
+    let rect2 = null, lastWheel = -1 / 0;
+    function stageRect() {
+      return rect2 ??= stage.getBoundingClientRect(), rect2;
+    }
+    let invalidate = () => {
+      rect2 = null;
+    }, observer = view?.ResizeObserver ? new view.ResizeObserver(invalidate) : void 0;
+    observer?.observe(stage), removers.push(() => observer?.disconnect()), view && (listen(view, "resize", invalidate), listen(document2, "scroll", invalidate, { capture: !0, passive: !0 }));
     function local(point2) {
-      let rect2 = stage.getBoundingClientRect();
-      return { x: point2.x - rect2.left, y: point2.y - rect2.top };
+      let { left, top } = stageRect();
+      return { x: point2.x - left, y: point2.y - top };
     }
     listen(
       stage,
       "wheel",
       (raw) => {
-        let event = raw, delta = normalizeWheel(event, stage.getBoundingClientRect().height);
+        let event = raw;
+        event.timeStamp - lastWheel > 150 && invalidate(), lastWheel = event.timeStamp;
+        let delta = normalizeWheel(event, stageRect().height);
         event.preventDefault(), event.ctrlKey || event.metaKey ? controller.zoomAt(
           Math.min(
             1.25,
@@ -694,7 +714,7 @@
       let interactive = target && "closest" in target && typeof target.closest == "function" && target.closest('button, a, [role="button"]');
       if (touch && interactive && !interactive.hasAttribute("data-canvas-node-id")) return;
       let occupied = interactive || target && "closest" in target && typeof target.closest == "function" && target.closest("[data-canvas-node-id]"), pan = event.button === 1 || space || event.button === 0 && getPointerMode() === "pan" && !occupied;
-      !touch && !pan || (pointers.set(event.pointerId, { x: event.clientX, y: event.clientY, touch }), setGesture(!0), stage.setPointerCapture && stage.setPointerCapture(event.pointerId), (touch || pan) && (stage.focus({ preventScroll: !0 }), event.preventDefault()));
+      !touch && !pan || (invalidate(), pointers.set(event.pointerId, { x: event.clientX, y: event.clientY, touch }), setGesture(!0), stage.setPointerCapture && stage.setPointerCapture(event.pointerId), (touch || pan) && (stage.focus({ preventScroll: !0 }), event.preventDefault()));
     }), listen(stage, "pointermove", (raw) => {
       let event = raw, previous = pointers.get(event.pointerId);
       if (!previous) return;
@@ -724,7 +744,7 @@
       stage,
       "gesturestart",
       (event) => {
-        gestureScale = 1, setGesture(!0), event.preventDefault();
+        gestureScale = 1, invalidate(), setGesture(!0), event.preventDefault();
       },
       { passive: !1 }
     ), listen(
@@ -1044,7 +1064,7 @@
   function object(field, value) {
     (!value || typeof value != "object" || Array.isArray(value)) && invalid(field, value);
   }
-  var CAMERA_MOVE_MS = 200;
+  var CAMERA_MOVE_MS = 200, DEMOTE_DELAY_MS = 300;
   function createCanvas(options2) {
     object("options", options2), options2.culling !== void 0 && object("culling", options2.culling), options2.zoom !== void 0 && object("zoom", options2.zoom), options2.keyboard !== void 0 && object("keyboard", options2.keyboard), options2.worldBounds !== void 0 && object("worldBounds", options2.worldBounds), (typeof options2.label != "string" || !options2.label.trim()) && invalid("label", options2.label), options2.breakpoints !== void 0 && !Array.isArray(options2.breakpoints) && invalid("breakpoints", options2.breakpoints);
     let breakpoints = (options2.breakpoints ?? []).map((entry, index2) => (object(`breakpoints[${index2}]`, entry), (typeof entry.name != "string" || !entry.name.trim()) && invalid(`breakpoints[${index2}].name`, entry.name), nonnegative(`breakpoints[${index2}].minWidth`, entry.minWidth), { ...entry })).sort((a, b) => a.minWidth - b.minWidth);
@@ -1063,7 +1083,7 @@
       options2[field] !== void 0 && typeof options2[field] != "function" && invalid(field, options2[field]);
     let pointerMode = options2.pointerMode === void 0 ? "pan" : options2.pointerMode;
     validatePointerMode(pointerMode), options2.worldBounds && (rect("worldBounds.rect", options2.worldBounds.rect), nonnegative("worldBounds.padding", options2.worldBounds.padding));
-    let worldBounds = options2.worldBounds ? { rect: { ...options2.worldBounds.rect }, padding: options2.worldBounds.padding } : void 0, camera = { x: 0, y: 0, zoom: Math.max(min2, Math.min(max2, 1)) }, nodes = /* @__PURE__ */ new Map(), outline = [], roving, announcer, announceZoom = !1, overviewNodes = [], level = lod.update(camera.zoom), overviewLayer, overviewCanvas, ownsOverview = !1, writeFrame = 0, cameraWriteFrame = 0, detailDirty = !0, visibility = /* @__PURE__ */ new Map(), restoreOverview, selection = [], edges = [], diagnostics = [], breakpoint = null, focused = null, registered = /* @__PURE__ */ new Map(), inputGesture = !1, zoomChanged = !1, zooming = !1, zoomIdleTimer, edgesDirty = !0, loaderDirty = !0, lastRegion, resumeTimer, loader, edgeLayer, activeFrame = null, destroyed = !1, detaching = !1, stageSize = { width: 0, height: 0 }, chrome = /* @__PURE__ */ new Map(), safeArea = computeSafeArea(stageSize, chrome.values()), composing = !1, elements, view, frameId, idleTimer, isMoving = !1, consumedKeys = /* @__PURE__ */ new WeakSet(), dirty = !1, cameraEvent = !1, activeFrameEvent = !1, animation, input, frames, restore, listeners = {
+    let worldBounds = options2.worldBounds ? { rect: { ...options2.worldBounds.rect }, padding: options2.worldBounds.padding } : void 0, camera = { x: 0, y: 0, zoom: Math.max(min2, Math.min(max2, 1)) }, nodes = /* @__PURE__ */ new Map(), outline = [], roving, announcer, announceZoom = !1, overviewNodes = [], level = lod.update(camera.zoom), overviewLayer, overviewCanvas, ownsOverview = !1, writeFrame = 0, cameraWriteFrame = 0, detailDirty = !0, visibility = /* @__PURE__ */ new Map(), restoreOverview, selection = [], edges = [], diagnostics = [], breakpoint = null, focused = null, registered = /* @__PURE__ */ new Map(), inputGesture = !1, zoomChanged = !1, zooming = !1, zoomIdleTimer, edgesDirty = !0, loaderDirty = !0, lastRegion, resumeTimer, loader, edgeLayer, activeFrame = null, destroyed = !1, detaching = !1, stageSize = { width: 0, height: 0 }, chrome = /* @__PURE__ */ new Map(), safeArea = computeSafeArea(stageSize, chrome.values()), composing = !1, elements, view, frameId, idleTimer, demoteTimer, promotedZoom = null, rasterZoom = Number.NaN, demoteDue = !1, isMoving = !1, motionEvent = !1, consumedKeys = /* @__PURE__ */ new WeakSet(), dirty = !1, cameraEvent = !1, activeFrameEvent = !1, animation, input, frames, restore, listeners = {
       camera: /* @__PURE__ */ new Set(),
       "active-frame": /* @__PURE__ */ new Set(),
       mount: /* @__PURE__ */ new Set(),
@@ -1073,7 +1093,8 @@
       focus: /* @__PURE__ */ new Set(),
       breakpoint: /* @__PURE__ */ new Set(),
       "safe-area": /* @__PURE__ */ new Set(),
-      diagnostics: /* @__PURE__ */ new Set()
+      diagnostics: /* @__PURE__ */ new Set(),
+      motion: /* @__PURE__ */ new Set()
     }, queued = [];
     function emit(event, payload) {
       let callbacks = listeners[event];
@@ -1226,21 +1247,36 @@
     function schedule() {
       view && !detaching && frameId === void 0 && (frameId = view.requestAnimationFrame(write));
     }
-    function moving() {
+    function promote() {
       if (view) {
-        if (!isMoving) {
-          for (let layer of layers())
-            layer.style.willChange !== "transform" && (layer.style.willChange = "transform");
-          frames?.setMoving(!0), loader?.setMoving(!0);
+        if (isMoving || inputGesture) {
+          if (demoteTimer !== void 0 && view.clearTimeout(demoteTimer), demoteTimer = void 0, demoteDue = !1, promotedZoom === null) {
+            promotedZoom = rasterZoom;
+            for (let layer of layers()) layer.style.willChange = "transform";
+          }
+          return;
+        }
+        if (promotedZoom === null) {
+          rasterZoom = camera.zoom;
+          return;
+        }
+        if (promotedZoom !== camera.zoom) {
+          if (demoteDue) {
+            demoteDue = !1, promotedZoom = null, rasterZoom = camera.zoom;
+            for (let layer of layers()) layer.style.removeProperty("will-change");
+            return;
+          }
+          demoteTimer ??= view.setTimeout(() => {
+            demoteTimer = void 0, demoteDue = !0, schedule();
+          }, DEMOTE_DELAY_MS);
         }
-        isMoving = !0, idleTimer !== void 0 && view.clearTimeout(idleTimer), idleTimer = view.setTimeout(() => {
-          idleTimer = void 0;
-          for (let layer of layers())
-            layer.style.willChange && layer.style.removeProperty("will-change");
-          isMoving = !1, frames?.setMoving(inputGesture), loader?.setMoving(inputGesture), schedule();
-        }, 150);
       }
     }
+    function moving() {
+      view && (isMoving || (frames?.setMoving(!0), loader?.setMoving(!0)), isMoving = !0, idleTimer !== void 0 && view.clearTimeout(idleTimer), idleTimer = view.setTimeout(() => {
+        idleTimer = void 0, isMoving = !1, frames?.setMoving(inputGesture), loader?.setMoving(inputGesture), schedule();
+      }, 150));
+    }
     function change(value) {
       let next = clamp2(value), changed = next.x !== camera.x || next.y !== camera.y || next.zoom !== camera.zoom, changedZoom = next.zoom !== camera.zoom;
       zoomChanged ||= changedZoom, changedZoom && view && (zooming = !0, zoomIdleTimer !== void 0 && view.clearTimeout(zoomIdleTimer), zoomIdleTimer = view.setTimeout(() => {
@@ -1277,6 +1313,7 @@
         }
         wroteCamera && (cameraWriteFrame = writeFrame), activeFrame !== null && frames?.updatePosition();
       }
+      promote();
       let requestedLevel = lod.update(camera.zoom), overviewReady = requestedLevel === "overview" || level === "overview" ? drawOverview() : !1, update = culling.update(
         viewport(),
         time,
@@ -1301,7 +1338,7 @@
       let events = queued;
       queued = [];
       let notifyCamera = cameraEvent, notifyFrame = activeFrameEvent, framePayload = activeFrame, cameraPayload = { ...camera };
-      cameraEvent = !1, activeFrameEvent = !1, notifyCamera && emit("camera", cameraPayload), notifyFrame && emit("active-frame", framePayload), levelChanged && emit("level", level);
+      cameraEvent = !1, activeFrameEvent = !1, notifyCamera && emit("camera", cameraPayload), notifyFrame && emit("active-frame", framePayload), levelChanged && emit("level", level), motionEvent !== (isMoving || inputGesture) && (motionEvent = !motionEvent, emit("motion", motionEvent));
       for (let event of events) event();
       update.geometry.length && emit("geometry", new Set(update.geometry)), update.mount ? (loader?.refresh(), detailDirty = !0, emit("mount", new Set(culling.getMountedIds())), loader?.refresh()) : (update.geometry.length || loaderDirty) && loader?.refresh(), loaderDirty = !1, detailDirty && updateVisibility(levelChanged), level === "overview" && overviewLayer?.present(), announceZoom && !animation && (announceZoom = !1, announcer?.say(`Zoom ${Math.round(camera.zoom * 100)}%`)), (roving?.update(!animation) || animation || update.pending) && schedule(), resumeTimer !== void 0 && view?.clearTimeout(resumeTimer), resumeTimer = void 0, update.resumeAt !== void 0 && view && (resumeTimer = view.setTimeout(
         () => {
@@ -1323,7 +1360,7 @@
     }
     function detach() {
       if (alive(), !!elements) {
-        detaching = !0, frameId !== void 0 && view?.cancelAnimationFrame(frameId), idleTimer !== void 0 && view?.clearTimeout(idleTimer), resumeTimer !== void 0 && view?.clearTimeout(resumeTimer), zoomIdleTimer !== void 0 && view?.clearTimeout(zoomIdleTimer), zoomIdleTimer = void 0, zooming = !1, resumeTimer = void 0, frameId = void 0, idleTimer = void 0, isMoving = !1, composing = !1, animation = void 0, roving?.dispose(), roving = void 0, announcer?.dispose(), announcer = void 0, announceZoom = !1, input?.dispose(), loader?.dispose(), edgeLayer?.dispose(), overviewLayer?.dispose(), ownsOverview && overviewCanvas?.remove(), restoreOverview?.();
+        detaching = !0, frameId !== void 0 && view?.cancelAnimationFrame(frameId), idleTimer !== void 0 && view?.clearTimeout(idleTimer), demoteTimer !== void 0 && view?.clearTimeout(demoteTimer), demoteTimer = void 0, demoteDue = !1, promotedZoom = null, rasterZoom = Number.NaN, motionEvent = !1, resumeTimer !== void 0 && view?.clearTimeout(resumeTimer), zoomIdleTimer !== void 0 && view?.clearTimeout(zoomIdleTimer), zoomIdleTimer = void 0, zooming = !1, resumeTimer = void 0, frameId = void 0, idleTimer = void 0, isMoving = !1, composing = !1, animation = void 0, roving?.dispose(), roving = void 0, announcer?.dispose(), announcer = void 0, announceZoom = !1, input?.dispose(), loader?.dispose(), edgeLayer?.dispose(), overviewLayer?.dispose(), ownsOverview && overviewCanvas?.remove(), restoreOverview?.();
         for (let [element, original] of visibility) {
           let realm = elements.stage.ownerDocument.defaultView;
           realm && (element instanceof realm.HTMLElement || element instanceof realm.SVGElement) && (element.style.visibility = original);