@tutti-os/workbench-surface 0.0.38 → 0.0.40

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { WorkbenchFrame as WorkbenchFrame$1, WorkbenchSnapshotDisplayModeV1, WorkbenchSnapshot, WorkbenchSnapshotNode } from '@tutti-os/workbench-snapshot';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
 import { I18nRuntime } from '@tutti-os/ui-i18n-runtime';
 import { c as WorkbenchWindowChromeI18nRuntime } from './workbenchHostI18n-YFXDkIA1.js';
 export { b as WorkbenchWindowChromeI18nKey, d as createWorkbenchHostI18nRuntime, e as createWorkbenchWindowChromeI18nRuntime, f as workbenchHostI18nResources, g as workbenchWindowChromeI18nNamespace, h as workbenchWindowChromeI18nResources } from './workbenchHostI18n-YFXDkIA1.js';
@@ -256,6 +256,16 @@ interface WorkbenchResolveWindowChromeModeContext<TData = unknown> {
     controller: WorkbenchController<TData>;
 }
 type WorkbenchResolveWindowChromeMode<TData = unknown> = (context: WorkbenchResolveWindowChromeModeContext<TData>) => WorkbenchWindowChromeMode;
+type WorkbenchWindowSurfaceLayer = "default" | "dialog-popover";
+interface WorkbenchResolveWindowSurfaceLayerContext<TData = unknown> {
+    node: WorkbenchNode<TData>;
+}
+type WorkbenchResolveWindowSurfaceLayer<TData = unknown> = (context: WorkbenchResolveWindowSurfaceLayerContext<TData>) => WorkbenchWindowSurfaceLayer;
+interface WorkbenchResolveWindowZIndexContext<TData = unknown> {
+    baseZIndex: number;
+    node: WorkbenchNode<TData>;
+}
+type WorkbenchResolveWindowZIndex<TData = unknown> = (context: WorkbenchResolveWindowZIndexContext<TData>) => NonNullable<CSSProperties["zIndex"]>;
 type WorkbenchResolveFullscreenHeaderMode<TData = unknown> = (context: WorkbenchResolveWindowChromeModeContext<TData>) => WorkbenchFullscreenHeaderMode | undefined;
 type WorkbenchKeepMinimizedNodeMounted<TData = unknown> = (node: WorkbenchNode<TData>) => boolean;
 interface WorkbenchWindowHeaderDragHandleProps {
@@ -324,6 +334,8 @@ interface WorkbenchSurfaceProps<TData = unknown> {
     renderWindowHeader?: WorkbenchRenderWindowHeader<TData>;
     shouldKeepMinimizedNodeMounted?: WorkbenchKeepMinimizedNodeMounted<TData>;
     resolveFullscreenHeaderMode?: WorkbenchResolveFullscreenHeaderMode<TData>;
+    resolveWindowSurfaceLayer?: WorkbenchResolveWindowSurfaceLayer<TData>;
+    resolveWindowZIndex?: WorkbenchResolveWindowZIndex<TData>;
     resolveDockAnchorKey?: (node: WorkbenchNode<TData>) => string;
     resolveDockPreviewCacheKey?: WorkbenchDockPreviewCacheKeyResolver<TData>;
     shortcutsEnabled?: boolean;
@@ -344,7 +356,7 @@ interface WorkbenchSurfaceWallpaper {
     position?: string;
     url: string;
 }
-declare function WorkbenchSurface<TData>({ captureNodePreviewImage, className, controller, debugDiagnostics, dockPreviewCache, dockPlacement, interactive, layoutConstraints, missionControlPhase, minimizeAnimation, presentation, renderBackdrop, renderBottomChrome, renderDock, renderNode, renderNodeGeniePreview, renderOverlay, renderTopChrome, renderWindowActions, renderWindowHeader, shouldKeepMinimizedNodeMounted, resolveFullscreenHeaderMode, resolveDockAnchorKey, resolveDockPreviewCacheKey, shortcutsEnabled, shouldCaptureNodePreviewImage, wallpaper, windowManagement, windowChromeMode, windowChromeI18n }: WorkbenchSurfaceProps<TData>): react_jsx_runtime.JSX.Element;
+declare function WorkbenchSurface<TData>({ captureNodePreviewImage, className, controller, debugDiagnostics, dockPreviewCache, dockPlacement, interactive, layoutConstraints, missionControlPhase, minimizeAnimation, presentation, renderBackdrop, renderBottomChrome, renderDock, renderNode, renderNodeGeniePreview, renderOverlay, renderTopChrome, renderWindowActions, renderWindowHeader, shouldKeepMinimizedNodeMounted, resolveFullscreenHeaderMode, resolveWindowSurfaceLayer, resolveWindowZIndex, resolveDockAnchorKey, resolveDockPreviewCacheKey, shortcutsEnabled, shouldCaptureNodePreviewImage, wallpaper, windowManagement, windowChromeMode, windowChromeI18n }: WorkbenchSurfaceProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface WorkbenchHostActivation<TPayload = unknown> {
     payload?: TPayload;
@@ -518,6 +530,11 @@ interface WorkbenchHostDockEntry {
     badge?: WorkbenchHostDockEntryBadge;
     capturePopupItemPreview?: WorkbenchHostNodePreviewCapture;
     clickActionId?: string;
+    /**
+     * `launch` keeps clicks on the launch request path even when matching nodes
+     * already exist.
+     */
+    clickBehavior?: "default" | "launch";
     hoverActions?: readonly WorkbenchHostDockEntryAction[];
     icon: ReactNode;
     iconSize?: "default" | "large";
@@ -554,7 +571,9 @@ interface WorkbenchHostNodeWindowCapabilities {
     minimizedDock?: WorkbenchHostNodeMinimizedDockCapability;
     persists?: boolean;
     restoreOnLoad?: boolean;
+    surfaceLayer?: WorkbenchHostNodeWindowSurfaceLayer;
 }
+type WorkbenchHostNodeWindowSurfaceLayer = Exclude<WorkbenchWindowSurfaceLayer, "default">;
 type WorkbenchHostNodeMinimizedDockCapability = {
     capturePreview?: WorkbenchHostNodePreviewCapture;
     kind: "snapshot";

package/dist/index.js

@@ -1927,7 +1927,8 @@ function mergePendingMinimizedDockNode(nodes, pendingNode) {
 }
 
 // src/react/WorkbenchNodeLayer.tsx
-import { memo, useMemo as useMemo3 } from "react";
+import { Fragment as Fragment3, memo, useMemo as useMemo3 } from "react";
+import { createPortal } from "react-dom";
 
 // src/react/WorkbenchWindowFrame.tsx
 import { createI18nRuntime } from "@tutti-os/ui-i18n-runtime";
@@ -2205,13 +2206,18 @@ function WorkbenchWindowFrame({
   presentation = null,
   renderActions,
   renderHeader,
+  resolveWindowZIndex,
   windowChromeMode = "system",
   windowChromeI18n
 }) {
   const controller = useWorkbenchController();
-  const zIndex = useWorkbenchSelector(
+  const baseZIndex = useWorkbenchSelector(
     (state) => selectWorkbenchNodeZIndex(state, node.id)
   );
+  const zIndex = resolveWindowZIndex?.({
+    baseZIndex,
+    node
+  }) ?? baseZIndex;
   const isFocused = useWorkbenchSelector(
     (state) => selectFocusedWorkbenchNode(state)?.id === node.id
   );
@@ -2429,6 +2435,8 @@ function WorkbenchNodeLayer({
   renderWindowActions,
   renderWindowHeader,
   resolveFullscreenHeaderMode,
+  resolveWindowSurfaceLayer,
+  resolveWindowZIndex,
   windowChromeMode,
   windowChromeI18n
 }) {
@@ -2439,17 +2447,100 @@ function WorkbenchNodeLayer({
   const nodeIDs = useWorkbenchSelector(
     selectRenderedNodeIDs
   );
+  const { defaultNodeIDs, dialogPopoverNodeIDs } = useWorkbenchSelector((state) => {
+    if (!resolveWindowSurfaceLayer || presentation?.mode === "mission-control") {
+      return {
+        defaultNodeIDs: nodeIDs,
+        dialogPopoverNodeIDs: []
+      };
+    }
+    const nodeByID = new Map(state.nodes.map((node) => [node.id, node]));
+    const nextDefaultNodeIDs = [];
+    const nextDialogPopoverNodeIDs = [];
+    for (const nodeID of nodeIDs) {
+      const node = nodeByID.get(nodeID);
+      if (node && resolveWindowSurfaceLayer({ node }) === "dialog-popover") {
+        nextDialogPopoverNodeIDs.push(nodeID);
+      } else {
+        nextDefaultNodeIDs.push(nodeID);
+      }
+    }
+    return {
+      defaultNodeIDs: nextDefaultNodeIDs,
+      dialogPopoverNodeIDs: nextDialogPopoverNodeIDs
+    };
+  });
   const snapPreviewRect = useWorkbenchSelector(selectWorkbenchSnapPreviewRect);
   const presentationInteraction = interactive && presentation?.mode === "mission-control" ? presentation.interaction ?? null : null;
+  const dialogPopoverLayer = dialogPopoverNodeIDs.length > 0 ? /* @__PURE__ */ jsx6(
+    WorkbenchNodeLayerGroup,
+    {
+      className: "workbench-node-layer workbench-node-layer--dialog-popover",
+      edgeSnapEnabled,
+      fullscreenHeaderMode: resolveFullscreenHeaderMode,
+      genie,
+      interactive,
+      nodeIDs: dialogPopoverNodeIDs,
+      presentation,
+      renderNode,
+      renderWindowActions,
+      renderWindowHeader,
+      resolveWindowZIndex,
+      windowChromeI18n,
+      windowChromeMode
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(
+      WorkbenchNodeLayerGroup,
+      {
+        className: "workbench-node-layer",
+        edgeSnapEnabled,
+        fullscreenHeaderMode: resolveFullscreenHeaderMode,
+        genie,
+        interactive,
+        nodeIDs: defaultNodeIDs,
+        onBackdropPress: presentationInteraction?.onBackdropPress,
+        presentation,
+        renderNode,
+        renderWindowActions,
+        renderWindowHeader,
+        resolveWindowZIndex,
+        snapPreviewRect,
+        windowChromeI18n,
+        windowChromeMode
+      }
+    ),
+    typeof document === "undefined" ? dialogPopoverLayer : dialogPopoverLayer ? createPortal(dialogPopoverLayer, document.body) : null
+  ] });
+}
+function WorkbenchNodeLayerGroup({
+  className,
+  edgeSnapEnabled,
+  fullscreenHeaderMode,
+  genie,
+  interactive,
+  nodeIDs,
+  onBackdropPress,
+  presentation,
+  renderNode,
+  renderWindowActions,
+  renderWindowHeader,
+  resolveWindowZIndex,
+  snapPreviewRect,
+  windowChromeI18n,
+  windowChromeMode
+}) {
   return /* @__PURE__ */ jsxs3(
     "div",
     {
-      className: "workbench-node-layer",
-      onClick: presentationInteraction ? (event) => {
+      className,
+      "data-workbench-interactive": interactive ? "true" : "false",
+      onClick: onBackdropPress ? (event) => {
         if (event.target !== event.currentTarget) {
           return;
         }
-        presentationInteraction.onBackdropPress();
+        onBackdropPress();
       } : void 0,
       children: [
         snapPreviewRect ? /* @__PURE__ */ jsx6(
@@ -2467,7 +2558,7 @@ function WorkbenchNodeLayer({
         nodeIDs.map((nodeID) => /* @__PURE__ */ jsx6(
           MemoizedWorkbenchNodeLayerItem,
           {
-            fullscreenHeaderMode: resolveFullscreenHeaderMode,
+            fullscreenHeaderMode,
             genie,
             edgeSnapEnabled,
             interactive,
@@ -2476,6 +2567,7 @@ function WorkbenchNodeLayer({
             renderNode,
             renderWindowActions,
             renderWindowHeader,
+            resolveWindowZIndex,
             windowChromeI18n,
             windowChromeMode
           },
@@ -2495,6 +2587,7 @@ function WorkbenchNodeLayerItem({
   renderNode,
   renderWindowActions,
   renderWindowHeader,
+  resolveWindowZIndex,
   windowChromeI18n,
   windowChromeMode
 }) {
@@ -2520,6 +2613,7 @@ function WorkbenchNodeLayerItem({
       presentation,
       node,
       genie,
+      resolveWindowZIndex,
       fullscreenHeaderMode: fullscreenHeaderMode?.({
         controller,
         node
@@ -2697,7 +2791,7 @@ import {
   useRef as useRef4,
   useState as useState4
 } from "react";
-import { createPortal, flushSync } from "react-dom";
+import { createPortal as createPortal2, flushSync } from "react-dom";
 
 // src/react/genieAnimation.ts
 var genieHorizontalRowStagger = 0.65;
@@ -3024,8 +3118,9 @@ function renderGenieScanlines(context, viewportWidth, viewportHeight, frame) {
 }
 
 // src/react/useWorkbenchGenieAnimation.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var genieDurationMs = 400;
+var previewCaptureRaceTimeoutMs = 120;
 var scaleMinimizeDurationMs = 220;
 var genieMaxDevicePixelRatio = 2;
 var genieSnapshotScale = 1;
@@ -3050,6 +3145,26 @@ function waitForNextAnimationFrame() {
     window.requestAnimationFrame(() => resolve());
   });
 }
+function racePreviewImageCapture(promise, timeoutMs) {
+  return new Promise((resolve) => {
+    let settled = false;
+    const timer = setTimeout(() => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      resolve({ previewImageUrl: null, status: "pending" });
+    }, timeoutMs);
+    promise.then((previewImageUrl) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      clearTimeout(timer);
+      resolve({ previewImageUrl, status: "resolved" });
+    });
+  });
+}
 function isFocusedWorkbenchNode(controller, nodeID) {
   return controller.getSnapshot().nodeStack.at(-1) === nodeID;
 }
@@ -4337,7 +4452,33 @@ function useWorkbenchGenieAnimation({
         const previewImageUrlPromise = shouldCapturePreview ? Promise.resolve(captureNodePreviewImage?.(target) ?? null).catch(
           () => null
         ) : Promise.resolve(null);
-        const previewImageUrl = await previewImageUrlPromise;
+        const previewCaptureOutcome = await racePreviewImageCapture(
+          previewImageUrlPromise,
+          previewCaptureRaceTimeoutMs
+        );
+        const previewImageUrl = previewCaptureOutcome.previewImageUrl;
+        if (previewCaptureOutcome.status === "pending") {
+          logWorkbenchGenieDiagnostic(
+            debugDiagnostics,
+            "workbench.genie.preview_capture.deferred",
+            {
+              ...describeGenieNode(target),
+              mode: "genie",
+              timeoutMs: previewCaptureRaceTimeoutMs
+            },
+            "debug"
+          );
+          void previewImageUrlPromise.then((latePreviewImageUrl) => {
+            if (!latePreviewImageUrl || generation !== animationGenerationRef.current) {
+              return;
+            }
+            writeCachedWorkbenchNodePreviewImage(nodeID, latePreviewImageUrl);
+            persistWorkbenchNodePreviewImage(target, latePreviewImageUrl, {
+              dockPreviewCache,
+              resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2
+            });
+          });
+        }
         const previewImageTexture = shouldCapturePreview && previewImageUrl ? await renderPreviewImageTexture({
           previewImageUrl,
           rect: windowRect
@@ -4508,8 +4649,8 @@ function useWorkbenchGenieAnimation({
     []
   );
   return {
-    genieLayer: typeof document === "undefined" ? null : createPortal(
-      /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    genieLayer: typeof document === "undefined" ? null : createPortal2(
+      /* @__PURE__ */ jsxs4(Fragment4, { children: [
         /* @__PURE__ */ jsx7(
           "canvas",
           {
@@ -4579,6 +4720,8 @@ function WorkbenchSurface({
   renderWindowHeader,
   shouldKeepMinimizedNodeMounted,
   resolveFullscreenHeaderMode,
+  resolveWindowSurfaceLayer,
+  resolveWindowZIndex,
   resolveDockAnchorKey,
   resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2,
   shortcutsEnabled,
@@ -4612,6 +4755,8 @@ function WorkbenchSurface({
       renderWindowHeader,
       shouldKeepMinimizedNodeMounted,
       resolveFullscreenHeaderMode,
+      resolveWindowSurfaceLayer,
+      resolveWindowZIndex,
       resolveDockAnchorKey,
       resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2,
       shortcutsEnabled,
@@ -4645,6 +4790,8 @@ function WorkbenchSurfaceInner({
   renderWindowHeader,
   shouldKeepMinimizedNodeMounted,
   resolveFullscreenHeaderMode,
+  resolveWindowSurfaceLayer,
+  resolveWindowZIndex,
   resolveDockAnchorKey,
   resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2,
   shortcutsEnabled,
@@ -4721,6 +4868,8 @@ function WorkbenchSurfaceInner({
             renderWindowHeader,
             shouldKeepMinimizedNodeMounted,
             resolveFullscreenHeaderMode,
+            resolveWindowSurfaceLayer,
+            resolveWindowZIndex,
             windowChromeMode,
             windowChromeI18n
           }
@@ -6910,6 +7059,9 @@ function resolveWorkbenchDockEntryClick(input) {
   if (isWorkbenchDockEntryBlocked(input.entry)) {
     return { kind: "blocked" };
   }
+  if (input.entry.clickBehavior === "launch") {
+    return { kind: "launch" };
+  }
   if (input.instanceMode === "multi" && input.matchedNodes.length > 0) {
     return { kind: "open-popup" };
   }
@@ -7531,7 +7683,7 @@ import {
   useRef as useRef7,
   useState as useState7
 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import { createPortal as createPortal3 } from "react-dom";
 import {
   Button as Button3,
   CheckIcon,
@@ -7675,7 +7827,7 @@ function resolveMinimizedStackTrackTranslateXPx(input) {
 }
 
 // src/host/WorkbenchHostDockPopup.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var dockPopupCardWidthPx = 165;
 var dockPopupGridGapPx = 8;
 var dockPopupPanelPaddingInlinePx = 12;
@@ -8228,7 +8380,7 @@ function WorkbenchHostDockPopup({
               showAllWindowsLabel,
               showOpen: showOpen === true
             }
-          ) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
+          ) : /* @__PURE__ */ jsxs6(Fragment5, { children: [
             /* @__PURE__ */ jsx9("div", { className: "mb-2.5 flex items-center justify-between", children: /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate text-sm font-semibold", children: label }) }),
             isMinimizedStack ? /* @__PURE__ */ jsx9(
               "div",
@@ -8342,7 +8494,7 @@ function WorkbenchHostDockPopup({
   if (typeof document === "undefined" || !document.body) {
     return content;
   }
-  return createPortal2(content, document.body);
+  return createPortal3(content, document.body);
 }
 function WorkbenchHostDockContextMenu({
   canCreateNew,
@@ -8377,7 +8529,7 @@ function WorkbenchHostDockContextMenu({
       "data-desktop-dock-context-menu": "true",
       role: "menu",
       children: [
-        hasOpenWindows ? /* @__PURE__ */ jsx9(Fragment4, { children: /* @__PURE__ */ jsx9("div", { className: "max-h-48 min-w-0 overflow-auto overscroll-contain", children: items.map((item) => /* @__PURE__ */ jsx9(
+        hasOpenWindows ? /* @__PURE__ */ jsx9(Fragment5, { children: /* @__PURE__ */ jsx9("div", { className: "max-h-48 min-w-0 overflow-auto overscroll-contain", children: items.map((item) => /* @__PURE__ */ jsx9(
           WorkbenchHostDockContextMenuItem,
           {
             checked: !item.isMinimized,
@@ -8421,7 +8573,7 @@ function WorkbenchHostDockContextMenu({
             onSelect: onCreateNew
           }
         ) : null,
-        hasOpenWindows ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+        hasOpenWindows ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
           hasDockActionGroup ? /* @__PURE__ */ jsx9(WorkbenchHostDockContextMenuSeparator, {}) : null,
           canShowAllWindows && onShowAllWindows ? /* @__PURE__ */ jsx9(
             WorkbenchHostDockContextMenuItem,
@@ -11856,7 +12008,7 @@ function createWorkbenchHostNodeHeaderContext({
 
 // src/host/WorkbenchHostWindowActions.tsx
 import { Button as Button5, CloseIcon as CloseIcon2, MinimizeIcon as MinimizeIcon2 } from "@tutti-os/ui-system";
-import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function WorkbenchHostWindowActions({
   context,
   host,
@@ -11869,7 +12021,7 @@ function WorkbenchHostWindowActions({
   }
   const minimizable = definition.window?.minimizable !== false;
   const closable = definition.window?.closable !== false;
-  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs8(Fragment6, { children: [
     minimizable ? /* @__PURE__ */ jsx11(
       Button5,
       {
@@ -12224,6 +12376,11 @@ function useWorkbenchHostSurfaceRenderers(input) {
     ({ node }) => input.nodeDefinitionByType.get(node.data.typeId)?.renderHeader ? "custom-header" : "system",
     [input.nodeDefinitionByType]
   );
+  const resolveWindowZIndex = useCallback11(({ baseZIndex }) => baseZIndex, []);
+  const resolveWindowSurfaceLayer = useCallback11(
+    ({ node }) => input.nodeDefinitionByType.get(node.data.typeId)?.window?.surfaceLayer ?? "default",
+    [input.nodeDefinitionByType]
+  );
   const resolveFullscreenHeaderMode = useCallback11(
     ({ node }) => input.nodeDefinitionByType.get(node.data.typeId)?.window?.fullscreenHeaderMode,
     [input.nodeDefinitionByType]
@@ -12242,6 +12399,8 @@ function useWorkbenchHostSurfaceRenderers(input) {
     resolveDockAnchorKey,
     resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2,
     resolveFullscreenHeaderMode,
+    resolveWindowSurfaceLayer,
+    resolveWindowZIndex,
     windowChromeMode
   };
 }
@@ -12553,6 +12712,8 @@ function WorkbenchHost({
       shouldKeepMinimizedNodeMounted: surfaceRenderers.shouldKeepMinimizedNodeMounted,
       resolveDockPreviewCacheKey: surfaceRenderers.resolveDockPreviewCacheKey,
       resolveFullscreenHeaderMode: surfaceRenderers.resolveFullscreenHeaderMode,
+      resolveWindowSurfaceLayer: surfaceRenderers.resolveWindowSurfaceLayer,
+      resolveWindowZIndex: surfaceRenderers.resolveWindowZIndex,
       resolveDockAnchorKey: surfaceRenderers.resolveDockAnchorKey,
       shortcutsEnabled,
       shouldCaptureNodePreviewImage: surfaceRenderers.shouldCaptureNodePreviewImage,