@floegence/redevplugin-ui 3.0.20 → 3.0.22

package/dist/plugin.d.ts

@@ -2,5 +2,5 @@ export { PluginBridgeClient } from "./surface.js";
 export { PluginBridgeError } from "./errors.js";
 export { pluginAPIMajor } from "./contracts.gen.js";
 export { callCapabilityOperation, callCapabilityStream, callCapabilitySync, isCapabilityBusinessError, } from "./capability-client.js";
-export type { BridgeLifecycleEvent, MessagePortLike, PluginBridgeClientOptions, PluginBridgeRequestOptions, PluginCanvasAccessibilityState, PluginCanvasInputEvent, PluginCanvasKeyEvent, PluginCanvasPointerEvent, PluginCanvasResizeEvent, PluginCanvasSurface, PluginJSONObject, PluginJSONValue, PluginMethodResult, PluginExecutionFailureCode, PluginExecutionSnapshot, PluginExecutionProgress, PluginExecutionEvent, PluginExecutionEventList, PluginSurfaceContext, PluginUIActionEvent, PluginUIAttributeValue, PluginUIElementVNode, PluginUIPatchOperation, PluginUIVNode, } from "./surface.js";
+export type { BridgeLifecycleEvent, MessagePortLike, PluginBridgeClientOptions, PluginBridgeRequestOptions, PluginCanvasAccessibilityState, PluginCanvasInputEvent, PluginCanvasKeyEvent, PluginCanvasPointerEvent, PluginCanvasWheelEvent, PluginCanvasResizeEvent, PluginCanvasSurface, PluginJSONObject, PluginJSONValue, PluginMethodResult, PluginExecutionFailureCode, PluginExecutionSnapshot, PluginExecutionProgress, PluginExecutionEvent, PluginExecutionEventList, PluginSurfaceContext, PluginUIActionEvent, PluginUIAttributeValue, PluginUIElementVNode, PluginUIPatchOperation, PluginUIVNode, } from "./surface.js";
 export type { PluginCapabilitySchema, PluginCapabilityEffect, PluginCapabilityOperationContract, PluginCapabilityStreamContract, PluginCapabilitySyncContract, PluginCapabilityStreamEvent, PluginCapabilityStreamReadResult, PluginExecution, PluginExecutionTerminalStatus, PluginExecutionWaitOptions, PluginStream, } from "./capability-client.js";

package/dist/surface.d.ts

@@ -136,7 +136,19 @@ export type PluginCanvasPointerEvent = {
     y: number;
     pressure: number;
 };
-export type PluginCanvasInputEvent = PluginCanvasFocusEvent | PluginCanvasResizeEvent | PluginCanvasKeyEvent | PluginCanvasPointerEvent;
+export type PluginCanvasWheelEvent = {
+    type: "wheel";
+    x: number;
+    y: number;
+    deltaX: number;
+    deltaY: number;
+    deltaMode: 0 | 1 | 2;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+};
+export type PluginCanvasInputEvent = PluginCanvasFocusEvent | PluginCanvasResizeEvent | PluginCanvasKeyEvent | PluginCanvasPointerEvent | PluginCanvasWheelEvent;
 export type PluginMethodResult<T = unknown> = {
     data: T;
     execution_id?: string;

package/dist/surface.js

@@ -751,6 +751,7 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
   const maxImageTotalPixels = ${opaqueSurfaceRenderLimits.max_image_total_pixels};
   const workerHeartbeatIntervalMs = ${opaqueSurfaceRenderLimits.worker_heartbeat_interval_ms};
   const workerHeartbeatTimeoutMs = ${opaqueSurfaceRenderLimits.worker_heartbeat_timeout_ms};
+  const rendererCommitFallbackMs = 100;
   const maxCriticalDocumentBytes = ${8 * 1024 * 1024};
   const maxPrivateAssetBase64Length = ${Math.ceil((32 * 1024 * 1024) / 3) * 4};
   const maxLazyAssetCount = ${maxOpaqueSurfaceLazyAssets};
@@ -863,7 +864,9 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
   let workerHeartbeatTimer;
   let workerHeartbeatTimeout;
   let pendingQuiesceID;
+  let runtimeDisposed = false;
   const pendingWorkerRequests = new Set();
+  const pendingRendererCommits = new Set();
   const requestSequence = { rpc: 0, execution: 0, render: 0, canvas: 0, asset: 0 };
   let executionQuerySurfaceTokens = 8;
   let executionQuerySurfaceRefillAt = performance.now();
@@ -934,7 +937,12 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
   };
   document.addEventListener("pointerdown", (event) => sendInteraction("activation", event.target), true);
   document.addEventListener("focusin", (event) => sendInteraction("focus", event.target), true);
-  document.addEventListener("wheel", (event) => sendInteraction("wheel", event.target, { localScroll: ownsLocalScroll(event) }), { capture: true, passive: true });
+  const ownsCanvasWheel = (target) => {
+    const element = target instanceof Element ? target.closest("canvas[data-redevplugin-canvas]") : null;
+    const canvasID = element?.getAttribute("data-redevplugin-canvas");
+    return validResourceIdentifier(canvasID) && canvasRuntimes.has(canvasID);
+  };
+  document.addEventListener("wheel", (event) => sendInteraction("wheel", event.target, { localScroll: ownsCanvasWheel(event.target) || ownsLocalScroll(event) }), { capture: true, passive: true });
   document.addEventListener("selectionchange", () => {
     const selection = document.getSelection();
     const target = selection?.anchorNode instanceof Element ? selection.anchorNode : selection?.anchorNode?.parentElement;
@@ -956,7 +964,13 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
     sendParent({ type: "redevplugin.surface.error", error: String(message).slice(0, 512) });
     disposeRuntime();
   };
+  const cancelPendingRendererCommits = () => {
+    for (const cancel of [...pendingRendererCommits]) cancel();
+  };
   const disposeRuntime = () => {
+    if (runtimeDisposed) return;
+    runtimeDisposed = true;
+    cancelPendingRendererCommits();
     if (workerHeartbeatTimer) clearTimeout(workerHeartbeatTimer);
     if (workerHeartbeatTimeout) clearTimeout(workerHeartbeatTimeout);
     workerHeartbeatTimer = undefined;
@@ -997,6 +1011,7 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
     assetByLogicalID.clear();
   };
   const terminateQuiescedWorker = () => {
+    cancelPendingRendererCommits();
     if (workerHeartbeatTimer) clearTimeout(workerHeartbeatTimer);
     if (workerHeartbeatTimeout) clearTimeout(workerHeartbeatTimeout);
     workerHeartbeatTimer = undefined;
@@ -1486,9 +1501,25 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
       parent.insertBefore(target, before || null);
     }
   };
-  const onAnimationFrame = (commit) => new Promise((resolve, reject) => requestAnimationFrame(() => {
-    try { commit(); resolve(); } catch (error) { reject(error); }
-  }));
+  const commitOnRenderOpportunity = (commit) => new Promise((resolve, reject) => {
+    if (runtimeDisposed) return resolve(false);
+    let settled = false;
+    let frameID;
+    let fallbackTimer;
+    const finish = (shouldCommit) => {
+      if (settled) return;
+      settled = true;
+      if (frameID !== undefined) cancelAnimationFrame(frameID);
+      if (fallbackTimer !== undefined) clearTimeout(fallbackTimer);
+      pendingRendererCommits.delete(cancel);
+      if (!shouldCommit || runtimeDisposed) return resolve(false);
+      try { commit(); resolve(true); } catch (error) { reject(error); }
+    };
+    const cancel = () => finish(false);
+    pendingRendererCommits.add(cancel);
+    frameID = requestAnimationFrame(() => finish(true));
+    fallbackTimer = setTimeout(() => finish(true), rendererCommitFallbackMs);
+  });
   const mountWorkerTree = async (tree) => {
     if (uiRevision !== 0) throw new Error("plugin UI mount may only occur once");
     const built = buildWorkerSubtree(tree, { nodes: 0 }, 1, undefined);
@@ -1496,25 +1527,29 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
     if (!(root instanceof Element)) throw new Error("plugin UI root must be an element");
     validateCanvasIdentifiers(root);
     const renderState = captureRenderState();
-    await onAnimationFrame(() => {
+    const committed = await commitOnRenderOpportunity(() => {
       document.body.replaceChildren(root);
       restoreRenderState(renderState);
     });
+    if (!committed) return false;
     uiGraph = built.graph;
     uiNodes = built.nodes;
     uiRevision = 1;
     sendParent({ type: "redevplugin.surface.first_commit" });
+    return true;
   };
   const patchWorkerTree = async (baseRevision, revision, operations) => {
     if (uiRevision < 1 || baseRevision !== uiRevision || revision !== baseRevision + 1) throw new Error("plugin UI patch revision is invalid");
     const validated = validatePatch(operations);
     const renderState = captureRenderState();
-    await onAnimationFrame(() => {
+    const committed = await commitOnRenderOpportunity(() => {
       for (const operation of validated.plan) applyPatchOperation(operation);
       validated.graph.commit();
       restoreRenderState(renderState);
     });
+    if (!committed) return false;
     uiRevision = revision;
+    return true;
   };
   const actionPayload = (event, element, eventType = event.type) => {
     const target = event.target instanceof Element ? event.target.closest("[data-redevplugin-key]") : element;
@@ -2129,8 +2164,25 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
         shift_key: Boolean(event.shiftKey),
       });
     };
+    const handleWheel = (event) => {
+      event.preventDefault();
+      const rect = canvas.getBoundingClientRect();
+      sendInput({
+        type: "wheel",
+        x: Math.min(32768, Math.max(-16384, event.clientX - rect.left)),
+        y: Math.min(32768, Math.max(-16384, event.clientY - rect.top)),
+        delta_x: Math.min(32768, Math.max(-32768, Number.isFinite(event.deltaX) ? event.deltaX : 0)),
+        delta_y: Math.min(32768, Math.max(-32768, Number.isFinite(event.deltaY) ? event.deltaY : 0)),
+        delta_mode: [0, 1, 2].includes(event.deltaMode) ? event.deltaMode : 0,
+        alt_key: Boolean(event.altKey),
+        ctrl_key: Boolean(event.ctrlKey),
+        meta_key: Boolean(event.metaKey),
+        shift_key: Boolean(event.shiftKey),
+      });
+    };
     for (const type of ["pointerdown", "pointermove", "pointerup", "pointercancel"]) listen(type, handlePointer);
     for (const type of ["keydown", "keyup"]) listen(type, handleKey);
+    listen("wheel", handleWheel);
     listen("focus", () => sendInput({ type: "focus" }));
     listen("blur", () => sendInput({ type: "blur" }));
     const observer = new ResizeObserver(() => {
@@ -2272,9 +2324,9 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
         completeWorkerRequest(message.id);
         return rejectWorkerRequest(message.id, "plugin render rate limit exceeded");
       }
-      void mountWorkerTree(message.tree).then(() => {
+      void mountWorkerTree(message.tree).then((committed) => {
         completeWorkerRequest(message.id);
-        sendWorker({ type: "redevplugin.bridge.response", id: message.id, ok: true });
+        if (committed) sendWorker({ type: "redevplugin.bridge.response", id: message.id, ok: true });
       }, (error) => fail(error && error.message || "plugin UI mount violated the protocol"));
       return;
     }
@@ -2285,9 +2337,9 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
         completeWorkerRequest(message.id);
         return rejectWorkerRequest(message.id, "plugin render rate limit exceeded");
       }
-      void patchWorkerTree(message.base_revision, message.revision, message.operations).then(() => {
+      void patchWorkerTree(message.base_revision, message.revision, message.operations).then((committed) => {
         completeWorkerRequest(message.id);
-        sendWorker({ type: "redevplugin.bridge.response", id: message.id, ok: true });
+        if (committed) sendWorker({ type: "redevplugin.bridge.response", id: message.id, ok: true });
       }, (error) => fail(error && error.message || "plugin UI patch violated the protocol"));
       return;
     }
@@ -4268,6 +4320,28 @@ function publicCanvasInputMessage(value) {
             },
         };
     }
+    if (hasExactKeys(event, ["type", "x", "y", "delta_x", "delta_y", "delta_mode", "alt_key", "ctrl_key", "meta_key", "shift_key"]) &&
+        event.type === "wheel" && validCanvasCoordinate(event.x) && validCanvasCoordinate(event.y) &&
+        validCanvasWheelDelta(event.delta_x) && validCanvasWheelDelta(event.delta_y) &&
+        (event.delta_mode === 0 || event.delta_mode === 1 || event.delta_mode === 2) &&
+        typeof event.alt_key === "boolean" && typeof event.ctrl_key === "boolean" &&
+        typeof event.meta_key === "boolean" && typeof event.shift_key === "boolean") {
+        return {
+            canvasId: value.canvas_id,
+            event: {
+                type: "wheel",
+                x: event.x,
+                y: event.y,
+                deltaX: event.delta_x,
+                deltaY: event.delta_y,
+                deltaMode: event.delta_mode,
+                altKey: event.alt_key,
+                ctrlKey: event.ctrl_key,
+                metaKey: event.meta_key,
+                shiftKey: event.shift_key,
+            },
+        };
+    }
     return undefined;
 }
 function isOffscreenCanvasLike(value) {
@@ -4287,6 +4361,9 @@ function validDevicePixelRatio(value) {
 function validCanvasCoordinate(value) {
     return typeof value === "number" && Number.isFinite(value) && value >= -16384 && value <= 32768;
 }
+function validCanvasWheelDelta(value) {
+    return typeof value === "number" && Number.isFinite(value) && value >= -32768 && value <= 32768;
+}
 function isMessagePortLike(value) {
     return isRecord(value) &&
         typeof value.postMessage === "function" &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/redevplugin-ui",
-  "version": "3.0.20",
+  "version": "3.0.22",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -40,7 +40,7 @@
     "dist"
   ],
   "dependencies": {
-    "@floegence/redevplugin-contracts": "3.0.20"
+    "@floegence/redevplugin-contracts": "3.0.22"
   },
   "publishConfig": {
     "access": "public"