@tutti-os/workbench-surface 0.0.12 → 0.0.14

package/dist/index.js

@@ -5356,7 +5356,7 @@ function useWorkbenchHostRuntime({
   snapshotRepository,
   workspaceId
 }) {
-  const [, bumpExternalStateRevision] = useState5(0);
+  const [externalStateRevision, bumpExternalStateRevision] = useState5(0);
   const [, bumpHydrationRevision] = useState5(0);
   const hostSession = useMemo4(() => {
     logWorkbenchHostDebug("create-session", debugDiagnostics, {
@@ -5460,6 +5460,7 @@ function useWorkbenchHostRuntime({
   }, [externalStateSource, workspaceId]);
   return {
     chromeContext,
+    externalStateRevision,
     hostI18n,
     isHydrating,
     hostSession,
@@ -7305,6 +7306,7 @@ function WorkbenchHostDock({
   );
   const pendingDockStateRefreshRef = useRef8(false);
   const slotRefs = useRef8(/* @__PURE__ */ new Map());
+  const wallpaperToneElementRefs = useRef8(/* @__PURE__ */ new Map());
   const dockSlotRefCallbacksRef = useRef8(
     /* @__PURE__ */ new Map()
   );
@@ -7485,6 +7487,15 @@ function WorkbenchHostDock({
     dockItems,
     (nodeId) => context.genie.shouldAnimateMinimizedDockEnter(nodeId)
   );
+  const presentDockItemKeys = useMemo5(
+    () => presentDockItems.map((item) => item.key).join("\n"),
+    [presentDockItems]
+  );
+  const wallpaperTones = useDockWallpaperTones({
+    dockItemsRef,
+    elementRefs: wallpaperToneElementRefs,
+    itemKeys: presentDockItemKeys
+  });
   const dockWidth = useMemo5(
     () => resolveWorkbenchHostDockItemsWidth(dockItems),
     [dockItems]
@@ -7514,6 +7525,16 @@ function WorkbenchHostDock({
   registerDockAnchorRef.current = (anchorKey, element) => {
     context.genie.registerDockAnchor(anchorKey, element);
   };
+  const registerWallpaperToneElement = useCallback10(
+    (key) => (element) => {
+      if (element) {
+        wallpaperToneElementRefs.current.set(key, element);
+        return;
+      }
+      wallpaperToneElementRefs.current.delete(key);
+    },
+    []
+  );
   const setDockHoverPanelOpen = useCallback10((open) => {
     if (open) {
       dockMeasureRef.current?.setAttribute(
@@ -7971,8 +7992,10 @@ function WorkbenchHostDock({
     const callback = (element) => {
       if (element) {
         slotRefs.current.set(anchorKey, element);
+        wallpaperToneElementRefs.current.set(anchorKey, element);
       } else {
         slotRefs.current.delete(anchorKey);
+        wallpaperToneElementRefs.current.delete(anchorKey);
         if (!dockMeasureRef.current?.hasAttribute("data-dock-pointer-active")) {
           clearSlotMagnificationRef.current(anchorKey);
         }
@@ -8052,9 +8075,11 @@ function WorkbenchHostDock({
                       return /* @__PURE__ */ jsx10(
                         "span",
                         {
+                          ref: registerWallpaperToneElement(dockItem.key),
                           className: "desktop-dock__separator",
                           "aria-hidden": "true",
-                          "data-presence": dockItem.presence
+                          "data-presence": dockItem.presence,
+                          "data-wallpaper-tone": wallpaperTones.get(dockItem.key)
                         },
                         dockItem.key
                       );
@@ -8211,6 +8236,7 @@ function WorkbenchHostDock({
                           "data-popup-active": currentPopup ? "true" : void 0,
                           "data-presence": dockItem.presence,
                           "data-section-id": entry.sectionId,
+                          "data-wallpaper-tone": wallpaperTones.get(anchorKey),
                           onBlur: (event) => {
                             if (hasHoverPanel && !event.currentTarget.contains(event.relatedTarget)) {
                               closeHoverPanelImmediate(entry.id);
@@ -9130,6 +9156,257 @@ function useDockPresenceItems(items, shouldAnimateMinimizedDockEnter) {
     return latestItem ? { ...presentItem, item: latestItem } : presentItem;
   });
 }
+function useDockWallpaperTones({
+  dockItemsRef,
+  elementRefs,
+  itemKeys
+}) {
+  const [tones, setTones] = useState8(
+    () => /* @__PURE__ */ new Map()
+  );
+  useLayoutEffect5(() => {
+    if (typeof window === "undefined") {
+      return void 0;
+    }
+    let canceled = false;
+    let frameId = null;
+    const updateTones = () => {
+      frameId = null;
+      void resolveDockWallpaperTones({
+        dockItemsElement: dockItemsRef.current,
+        elements: elementRefs.current
+      }).then((nextTones) => {
+        if (canceled) {
+          return;
+        }
+        setTones(
+          (current) => dockWallpaperToneMapsEqual(current, nextTones) ? current : nextTones
+        );
+      });
+    };
+    const scheduleUpdate = () => {
+      if (frameId !== null) {
+        return;
+      }
+      frameId = window.requestAnimationFrame(updateTones);
+    };
+    scheduleUpdate();
+    window.addEventListener("resize", scheduleUpdate);
+    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(scheduleUpdate);
+    if (dockItemsRef.current) {
+      resizeObserver?.observe(dockItemsRef.current);
+    }
+    const wallpaperElement = dockItemsRef.current?.closest(".workbench-surface")?.querySelector(".workbench-surface__wallpaper");
+    if (wallpaperElement instanceof HTMLElement) {
+      resizeObserver?.observe(wallpaperElement);
+    }
+    return () => {
+      canceled = true;
+      if (frameId !== null) {
+        window.cancelAnimationFrame(frameId);
+      }
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", scheduleUpdate);
+    };
+  }, [dockItemsRef, elementRefs, itemKeys]);
+  return tones;
+}
+async function resolveDockWallpaperTones({
+  dockItemsElement,
+  elements
+}) {
+  const wallpaperElement = dockItemsElement?.closest(".workbench-surface")?.querySelector(".workbench-surface__wallpaper");
+  if (!(wallpaperElement instanceof HTMLElement)) {
+    return /* @__PURE__ */ new Map();
+  }
+  const wallpaperStyle = window.getComputedStyle(wallpaperElement);
+  const wallpaperUrl = parseDockWallpaperCssUrl(wallpaperStyle.backgroundImage);
+  if (!wallpaperUrl) {
+    return /* @__PURE__ */ new Map();
+  }
+  const wallpaperImage = await loadDockWallpaperImage(wallpaperUrl);
+  if (!wallpaperImage) {
+    return /* @__PURE__ */ new Map();
+  }
+  const sampleCanvas = createDockWallpaperSampleCanvas(wallpaperImage);
+  if (!sampleCanvas) {
+    return /* @__PURE__ */ new Map();
+  }
+  const wallpaperRect = wallpaperElement.getBoundingClientRect();
+  const renderedImageRect = resolveDockWallpaperRenderedImageRect({
+    containerHeight: wallpaperRect.height,
+    containerWidth: wallpaperRect.width,
+    imageHeight: wallpaperImage.naturalHeight,
+    imageWidth: wallpaperImage.naturalWidth,
+    positionX: wallpaperStyle.backgroundPositionX,
+    positionY: wallpaperStyle.backgroundPositionY,
+    size: wallpaperStyle.backgroundSize
+  });
+  const nextTones = /* @__PURE__ */ new Map();
+  for (const [key, element] of elements) {
+    const luminance = sampleDockWallpaperLuminanceAtElement({
+      elementRect: element.getBoundingClientRect(),
+      renderedImageRect,
+      sampleCanvas,
+      wallpaperRect
+    });
+    if (luminance === null) {
+      continue;
+    }
+    nextTones.set(
+      key,
+      luminance < dockWallpaperDarkLuminanceThreshold ? "dark" : "light"
+    );
+  }
+  return nextTones;
+}
+function parseDockWallpaperCssUrl(backgroundImage) {
+  const match = /^url\((['"]?)(.*)\1\)$/u.exec(backgroundImage.trim());
+  return match?.[2] ? match[2] : null;
+}
+var dockWallpaperImageCache = /* @__PURE__ */ new Map();
+function loadDockWallpaperImage(url) {
+  const cached = dockWallpaperImageCache.get(url);
+  if (cached) {
+    return cached;
+  }
+  const promise = new Promise((resolve) => {
+    const image = new Image();
+    image.decoding = "async";
+    image.onload = () => resolve(image);
+    image.onerror = () => resolve(null);
+    image.src = 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,
+  imageHeight,
+  imageWidth,
+  positionX,
+  positionY,
+  size
+}) {
+  const imageAspect = imageWidth / imageHeight;
+  const containerAspect = containerWidth / containerHeight;
+  let width = containerWidth;
+  let height = containerHeight;
+  if (size === "cover") {
+    if (containerAspect > imageAspect) {
+      height = containerWidth / imageAspect;
+    } else {
+      width = containerHeight * imageAspect;
+    }
+  } else if (size === "contain") {
+    if (containerAspect > imageAspect) {
+      width = containerHeight * imageAspect;
+    } else {
+      height = containerWidth / imageAspect;
+    }
+  } else if (size !== "100% 100%") {
+    width = imageWidth;
+    height = imageHeight;
+  }
+  return {
+    height,
+    left: resolveDockWallpaperPositionOffset(positionX, containerWidth - width),
+    top: resolveDockWallpaperPositionOffset(
+      positionY,
+      containerHeight - height
+    ),
+    width
+  };
+}
+function resolveDockWallpaperPositionOffset(value, availableSpace) {
+  const trimmed = value.trim();
+  if (trimmed.endsWith("%")) {
+    const percentage = Number.parseFloat(trimmed);
+    return Number.isFinite(percentage) ? availableSpace * percentage / 100 : availableSpace / 2;
+  }
+  if (trimmed.endsWith("px")) {
+    const px = Number.parseFloat(trimmed);
+    return Number.isFinite(px) ? px : availableSpace / 2;
+  }
+  if (trimmed === "left" || trimmed === "top") {
+    return 0;
+  }
+  if (trimmed === "right" || trimmed === "bottom") {
+    return 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;
+  }
+  for (const [key, value] of left) {
+    if (right.get(key) !== value) {
+      return false;
+    }
+  }
+  return true;
+}
 var DOCK_BOUNCE_MS = 600;
 function useDockBounce(slotRefs) {
   const timeoutsRef = useRef8(/* @__PURE__ */ new Map());
@@ -9195,6 +9472,9 @@ var dockHoverPanelHitSlopPx = 12;
 var dockHoverPanelBridgeSlopPx = 6;
 var dockHoverPanelPointerRestTolerancePx = 4;
 var DOCK_MAGNIFIED_TOOLTIP_SIDE_OFFSET = 40;
+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;
 }
@@ -9370,7 +9650,7 @@ function WorkbenchHostWindowActions({
 }
 
 // src/host/useWorkbenchHostSurfaceRenderers.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function useWorkbenchHostSurfaceRenderers(input) {
   const renderBottomChrome = useMemo6(() => {
     const renderChrome = input.renderBottomChrome;
@@ -9530,7 +9810,7 @@ function useWorkbenchHostSurfaceRenderers(input) {
         {
           debugDiagnostics: input.debugDiagnostics,
           node: context.node,
-          resetKey: `${context.node.id}:${context.node.data.typeId}`,
+          resetKey: `${context.node.id}:${context.node.data.typeId}:${input.externalStateRevision}`,
           workspaceId: input.workspaceId,
           children: /* @__PURE__ */ jsx12(
             WorkbenchHostNodeBodyRenderer,
@@ -9545,6 +9825,7 @@ function useWorkbenchHostSurfaceRenderers(input) {
     [
       input.debugDiagnostics,
       input.externalStateSource,
+      input.externalStateRevision,
       input.hostSession,
       input.nodeDefinitionByType,
       input.workspaceId
@@ -9582,6 +9863,7 @@ function useWorkbenchHostSurfaceRenderers(input) {
     },
     [
       input.externalStateSource,
+      input.externalStateRevision,
       input.hostSession,
       input.nodeDefinitionByType,
       input.workspaceId
@@ -9739,11 +10021,57 @@ var WorkbenchHostNodeRenderErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsxs8(
         "div",
         {
           "data-workbench-node-render-error": "true",
-          style: { height: "100%", width: "100%" }
+          style: {
+            alignItems: "center",
+            boxSizing: "border-box",
+            color: "var(--text-secondary, #6b7280)",
+            display: "flex",
+            flexDirection: "column",
+            gap: 8,
+            height: "100%",
+            justifyContent: "center",
+            padding: 24,
+            textAlign: "center",
+            width: "100%"
+          },
+          children: [
+            /* @__PURE__ */ jsx12(
+              "div",
+              {
+                "data-workbench-node-render-error-message": "true",
+                style: {
+                  color: "var(--text-primary, #111827)",
+                  fontSize: 14,
+                  fontWeight: 600
+                },
+                children: "This workspace view failed to render."
+              }
+            ),
+            /* @__PURE__ */ jsx12("div", { style: { fontSize: 12 }, children: "Try selecting another conversation or reopen the window." }),
+            /* @__PURE__ */ jsx12(
+              "button",
+              {
+                type: "button",
+                onClick: () => this.setState({ hasError: false }),
+                style: {
+                  border: "1px solid var(--line-2, #d1d5db)",
+                  borderRadius: 6,
+                  background: "var(--background-fronted, #ffffff)",
+                  color: "var(--text-primary, #111827)",
+                  cursor: "pointer",
+                  fontSize: 12,
+                  fontWeight: 600,
+                  marginTop: 4,
+                  padding: "6px 10px"
+                },
+                children: "Try again"
+              }
+            )
+          ]
         }
       );
     }
@@ -9823,6 +10151,7 @@ function WorkbenchHost({
   const missionControlEnabled = missionControlMode !== null || onMissionControlAdapterReady !== void 0;
   const {
     chromeContext,
+    externalStateRevision,
     hostI18n,
     hostSession,
     isHydrating,
@@ -9853,6 +10182,7 @@ function WorkbenchHost({
     dockStateSource,
     dockEntries: hostDockEntries,
     externalStateSource: hostRuntimeConfig.externalStateSource,
+    externalStateRevision,
     hostI18n,
     hostSession,
     nodeDefinitionByType,