@tutti-os/workbench-surface 0.0.109 → 0.0.111

package/README.md

@@ -43,6 +43,12 @@ When a node body or header needs host-owned business state, pass an
 `externalNodeState` and `externalWorkspaceState`. If the source exposes
 `subscribe(...)`, the host re-renders when that subscription notifies.
 
+Node body context also exposes `isDragging` and `isResizing`. The Workbench
+shell continues applying live frame geometry during direct manipulation, while
+an expensive body adapter may use these flags to suppress frame-only renders
+until the interaction settles. The adapter must still observe both interaction
+transitions so the final committed frame reaches responsive body layout.
+
 Host-owned business instances are represented with `projectedNodes`. A
 projected node tells the workbench that a shell should currently exist for a
 host-owned instance; the workbench reconciles that presence with snapshot

package/dist/index.d.ts

@@ -274,6 +274,8 @@ interface WorkbenchRenderNodeContext<TData = unknown> {
     node: WorkbenchNode<TData>;
     layout: WorkbenchNodeRenderFrame;
     controller: WorkbenchController<TData>;
+    isDragging: boolean;
+    isResizing: boolean;
 }
 interface WorkbenchDockContext<TData = unknown> {
     focusedNodeId: string | null;
@@ -661,7 +663,11 @@ interface WorkbenchHostNodeBodyContext<TExternalNodeState = unknown, TExternalWo
     host: WorkbenchHostHandle;
     instanceId: string;
     instanceKey?: string | null;
+    /** True while the host is interactively moving this node. */
+    isDragging: boolean;
     isFocused: boolean;
+    /** True while the host is interactively resizing this node. */
+    isResizing: boolean;
     /** Current host presentation mode; null for the normal window layout. */
     presentationMode?: WorkbenchSurfacePresentation["mode"] | null;
     node: WorkbenchNode<WorkbenchHostNodeData>;

package/dist/index.js

@@ -3267,6 +3267,12 @@ function WorkbenchNodeLayerItem({
   const isFocused = useWorkbenchSelector(
     (state) => selectFocusedWorkbenchNode(state)?.id === nodeID
   );
+  const isDragging = useWorkbenchSelector(
+    (state) => state.activeDragNodeId === nodeID
+  );
+  const isResizing = useWorkbenchSelector(
+    (state) => state.activeResizeNodeId === nodeID
+  );
   const zIndex = useWorkbenchSelector(
     (state) => selectWorkbenchNodeZIndex(state, nodeID)
   );
@@ -3297,6 +3303,8 @@ function WorkbenchNodeLayerItem({
       }),
       children: renderNode({
         node,
+        isDragging,
+        isResizing,
         layout: {
           frame: node.frame,
           presentation,
@@ -8659,6 +8667,77 @@ function resolveDockLabelTooltipAnchorRect(slotElement) {
   };
 }
 
+// src/host/dockWallpaperSampling.ts
+var dockWallpaperSampleMaxSizePx = 192;
+var dockWallpaperToneSampleCount = 7;
+var sampleByImage = /* @__PURE__ */ new WeakMap();
+function getDockWallpaperImageSample(image) {
+  if (sampleByImage.has(image)) {
+    return sampleByImage.get(image) ?? null;
+  }
+  const sample = createDockWallpaperImageSample(image);
+  sampleByImage.set(image, sample);
+  return sample;
+}
+function createDockWallpaperImageSample(image) {
+  if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
+    return null;
+  }
+  const canvas = document.createElement("canvas");
+  const scale = dockWallpaperSampleMaxSizePx / Math.max(image.naturalWidth, image.naturalHeight);
+  canvas.width = Math.max(1, Math.round(image.naturalWidth * scale));
+  canvas.height = Math.max(1, Math.round(image.naturalHeight * scale));
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) {
+    return null;
+  }
+  try {
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    return {
+      data: context.getImageData(0, 0, canvas.width, canvas.height).data,
+      height: canvas.height,
+      width: canvas.width
+    };
+  } catch {
+    return null;
+  }
+}
+function sampleDockWallpaperLuminanceAtElement({
+  elementRect,
+  renderedImageRect,
+  sample,
+  wallpaperRect
+}) {
+  const isVerticalElement = elementRect.height >= elementRect.width;
+  let luminanceSum = 0;
+  let samples = 0;
+  for (let index = 0; index < dockWallpaperToneSampleCount; index += 1) {
+    const ratio = index / (dockWallpaperToneSampleCount - 1);
+    const clientX = isVerticalElement ? elementRect.left + elementRect.width / 2 : elementRect.left + elementRect.width * ratio;
+    const clientY = isVerticalElement ? elementRect.top + elementRect.height * ratio : elementRect.top + elementRect.height / 2;
+    const imageX = (clientX - wallpaperRect.left - renderedImageRect.left) / renderedImageRect.width;
+    const imageY = (clientY - wallpaperRect.top - renderedImageRect.top) / renderedImageRect.height;
+    if (imageX < 0 || imageX > 1 || imageY < 0 || imageY > 1) {
+      continue;
+    }
+    const sampleX = Math.min(
+      sample.width - 1,
+      Math.max(0, Math.round(imageX * (sample.width - 1)))
+    );
+    const sampleY = Math.min(
+      sample.height - 1,
+      Math.max(0, Math.round(imageY * (sample.height - 1)))
+    );
+    const pixelOffset = (sampleY * sample.width + sampleX) * 4;
+    const red = sample.data[pixelOffset] ?? 0;
+    const green = sample.data[pixelOffset + 1] ?? 0;
+    const blue = sample.data[pixelOffset + 2] ?? 0;
+    luminanceSum += 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+    samples += 1;
+  }
+  return samples > 0 ? luminanceSum / samples : null;
+}
+
 // src/host/dockScrollState.ts
 var dockScrollOverflowEpsilonPx = 1;
 function resolveWorkbenchHostDockScrollState({
@@ -12858,8 +12937,8 @@ async function resolveDockWallpaperTones({
   if (!wallpaperImage) {
     return /* @__PURE__ */ new Map();
   }
-  const sampleCanvas = createDockWallpaperSampleCanvas(wallpaperImage);
-  if (!sampleCanvas) {
+  const wallpaperSample = getDockWallpaperImageSample(wallpaperImage);
+  if (!wallpaperSample) {
     return /* @__PURE__ */ new Map();
   }
   const wallpaperRect = wallpaperElement.getBoundingClientRect();
@@ -12877,7 +12956,7 @@ async function resolveDockWallpaperTones({
     const luminance = sampleDockWallpaperLuminanceAtElement({
       elementRect: element.getBoundingClientRect(),
       renderedImageRect,
-      sampleCanvas,
+      sample: wallpaperSample,
       wallpaperRect
     });
     if (luminance === null) {
@@ -12910,26 +12989,6 @@ function loadDockWallpaperImage(url) {
   dockWallpaperImageCache.set(url, promise);
   return promise;
 }
-function createDockWallpaperSampleCanvas(image) {
-  if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
-    return null;
-  }
-  const canvas = document.createElement("canvas");
-  const scale = dockWallpaperSampleCanvasMaxSizePx / Math.max(image.naturalWidth, image.naturalHeight);
-  canvas.width = Math.max(1, Math.round(image.naturalWidth * scale));
-  canvas.height = Math.max(1, Math.round(image.naturalHeight * scale));
-  const context = canvas.getContext("2d", { willReadFrequently: true });
-  if (!context) {
-    return null;
-  }
-  try {
-    context.drawImage(image, 0, 0, canvas.width, canvas.height);
-    context.getImageData(0, 0, 1, 1);
-  } catch {
-    return null;
-  }
-  return canvas;
-}
 function resolveDockWallpaperRenderedImageRect({
   containerHeight,
   containerWidth,
@@ -12987,45 +13046,6 @@ function resolveDockWallpaperPositionOffset(value, availableSpace) {
   }
   return availableSpace / 2;
 }
-function sampleDockWallpaperLuminanceAtElement({
-  elementRect,
-  renderedImageRect,
-  sampleCanvas,
-  wallpaperRect
-}) {
-  const context = sampleCanvas.getContext("2d", { willReadFrequently: true });
-  if (!context) {
-    return null;
-  }
-  const isVerticalElement = elementRect.height >= elementRect.width;
-  let luminanceSum = 0;
-  let samples = 0;
-  for (let index = 0; index < dockWallpaperToneSampleCount; index += 1) {
-    const ratio = index / (dockWallpaperToneSampleCount - 1);
-    const clientX = isVerticalElement ? elementRect.left + elementRect.width / 2 : elementRect.left + elementRect.width * ratio;
-    const clientY = isVerticalElement ? elementRect.top + elementRect.height * ratio : elementRect.top + elementRect.height / 2;
-    const imageX = (clientX - wallpaperRect.left - renderedImageRect.left) / renderedImageRect.width;
-    const imageY = (clientY - wallpaperRect.top - renderedImageRect.top) / renderedImageRect.height;
-    if (imageX < 0 || imageX > 1 || imageY < 0 || imageY > 1) {
-      continue;
-    }
-    const canvasX = Math.min(
-      sampleCanvas.width - 1,
-      Math.max(0, Math.round(imageX * (sampleCanvas.width - 1)))
-    );
-    const canvasY = Math.min(
-      sampleCanvas.height - 1,
-      Math.max(0, Math.round(imageY * (sampleCanvas.height - 1)))
-    );
-    const pixel = context.getImageData(canvasX, canvasY, 1, 1).data;
-    const red = pixel[0] ?? 0;
-    const green = pixel[1] ?? 0;
-    const blue = pixel[2] ?? 0;
-    luminanceSum += 0.2126 * red + 0.7152 * green + 0.0722 * blue;
-    samples += 1;
-  }
-  return samples > 0 ? luminanceSum / samples : null;
-}
 function dockWallpaperToneMapsEqual(left, right) {
   if (left.size !== right.size) {
     return false;
@@ -13102,8 +13122,6 @@ var dockHoverPanelCloseDelayMs = 160;
 var dockHoverPanelHitSlopPx = 12;
 var dockHoverPanelBridgeSlopPx = 6;
 var dockHoverPanelPointerRestTolerancePx = 4;
-var dockWallpaperSampleCanvasMaxSizePx = 192;
-var dockWallpaperToneSampleCount = 7;
 var dockWallpaperDarkLuminanceThreshold = 132;
 function rectContainsPoint(rect, clientX, clientY, slopPx = 0) {
   return clientX >= rect.left - slopPx && clientX <= rect.right + slopPx && clientY >= rect.top - slopPx && clientY <= rect.bottom + slopPx;
@@ -13188,7 +13206,9 @@ function createWorkbenchHostNodeBodyContext({
     host,
     instanceId: context.node.data.instanceId,
     instanceKey: context.node.data.instanceKey ?? null,
+    isDragging: context.isDragging,
     isFocused: selectFocusedWorkbenchNode(host.getSnapshot())?.id === context.node.id,
+    isResizing: context.isResizing,
     presentationMode: context.layout.presentation?.mode ?? null,
     node: context.node,
     setNodeRuntimeState(state) {