@tutti-os/workbench-surface 0.0.26 → 0.0.27

package/dist/index.js

@@ -43,6 +43,9 @@ function createWorkbenchCommands(store) {
     applyLayoutPreset(nodeIDs, preset) {
       store.dispatch({ type: "applyLayoutPreset", nodeIDs, preset });
     },
+    applyVisibleLayoutPreset(preset) {
+      store.dispatch({ type: "applyVisibleLayoutPreset", preset });
+    },
     applyActiveSnapTarget(nodeID) {
       store.dispatch({ type: "applyActiveSnapTarget", nodeID });
     },
@@ -104,6 +107,7 @@ var defaultWorkbenchSurfaceSize = {
 // src/core/geometry.ts
 var WORKBENCH_MIN_VISIBLE_PX = 40;
 var WORKBENCH_LAYOUT_PRESET_GAP_PX = 12;
+var WORKBENCH_EDGE_SNAP_THRESHOLD_PX = 24;
 function normalizeWorkbenchLayoutConstraints(constraints = {}) {
   return {
     minWidth: constraints.minWidth ?? defaultWorkbenchLayoutConstraints.minWidth,
@@ -241,18 +245,53 @@ function getWorkbenchSnapRect(snapTarget, surfaceSize, constraints = defaultWork
     sizeConstraints
   );
   const full = getWorkbenchSafeLayoutRect(surfaceSize, normalized);
+  const halfWidth = Math.round(full.width / 2);
+  const halfHeight = Math.round(full.height / 2);
   const clampSnapRect = (rect) => clampWorkbenchRect(rect, surfaceSize, normalized);
-  if (snapTarget === "left") {
-    return clampSnapRect({ ...full, width: Math.round(full.width / 2) });
-  }
-  if (snapTarget === "right") {
-    const width = Math.round(full.width / 2);
-    return clampSnapRect({ ...full, x: full.x + full.width - width, width });
-  }
-  if (snapTarget === "top") {
-    return clampSnapRect(full);
+  switch (snapTarget) {
+    case "left":
+      return clampSnapRect({ ...full, width: halfWidth });
+    case "right":
+      return clampSnapRect({
+        ...full,
+        x: full.x + full.width - halfWidth,
+        width: halfWidth
+      });
+    case "top":
+      return clampSnapRect(full);
+    case "bottom":
+      return clampSnapRect({
+        ...full,
+        y: full.y + full.height - halfHeight,
+        height: halfHeight
+      });
+    case "top-left":
+      return clampSnapRect({ ...full, width: halfWidth, height: halfHeight });
+    case "top-right":
+      return clampSnapRect({
+        ...full,
+        x: full.x + full.width - halfWidth,
+        width: halfWidth,
+        height: halfHeight
+      });
+    case "bottom-left":
+      return clampSnapRect({
+        ...full,
+        y: full.y + full.height - halfHeight,
+        width: halfWidth,
+        height: halfHeight
+      });
+    case "bottom-right":
+      return clampSnapRect({
+        ...full,
+        x: full.x + full.width - halfWidth,
+        y: full.y + full.height - halfHeight,
+        width: halfWidth,
+        height: halfHeight
+      });
+    case null:
+      return null;
   }
-  return null;
 }
 function getWorkbenchQuickLayoutRect(target, surfaceSize, constraints = defaultWorkbenchLayoutConstraints, sizeConstraints) {
   const normalized = resolveWorkbenchRectConstraints(
@@ -260,6 +299,8 @@ function getWorkbenchQuickLayoutRect(target, surfaceSize, constraints = defaultW
     sizeConstraints
   );
   const full = getWorkbenchSafeLayoutRect(surfaceSize, normalized);
+  const halfWidth = Math.round(full.width / 2);
+  const halfHeight = Math.round(full.height / 2);
   const clampQuickLayoutRect = (rect) => clampWorkbenchRect(rect, surfaceSize, normalized);
   switch (target) {
     case "left":
@@ -281,13 +322,50 @@ function getWorkbenchQuickLayoutRect(target, surfaceSize, constraints = defaultW
         height: Math.round(full.height / 2)
       });
     case "bottom": {
-      const height = Math.round(full.height / 2);
       return clampQuickLayoutRect({
         ...full,
-        y: full.y + full.height - height,
+        y: full.y + full.height - halfHeight,
+        height: halfHeight
+      });
+    }
+    case "center": {
+      const width = Math.round(full.width * 0.72);
+      const height = Math.round(full.height * 0.72);
+      return clampQuickLayoutRect({
+        x: full.x + Math.round((full.width - width) / 2),
+        y: full.y + Math.round((full.height - height) / 2),
+        width,
         height
       });
     }
+    case "top-left":
+      return clampQuickLayoutRect({
+        ...full,
+        width: halfWidth,
+        height: halfHeight
+      });
+    case "top-right":
+      return clampQuickLayoutRect({
+        ...full,
+        x: full.x + full.width - halfWidth,
+        width: halfWidth,
+        height: halfHeight
+      });
+    case "bottom-left":
+      return clampQuickLayoutRect({
+        ...full,
+        y: full.y + full.height - halfHeight,
+        width: halfWidth,
+        height: halfHeight
+      });
+    case "bottom-right":
+      return clampQuickLayoutRect({
+        ...full,
+        x: full.x + full.width - halfWidth,
+        y: full.y + full.height - halfHeight,
+        width: halfWidth,
+        height: halfHeight
+      });
   }
 }
 function resolveWorkbenchRectConstraints(constraints = defaultWorkbenchLayoutConstraints, sizeConstraints) {
@@ -340,10 +418,34 @@ function getWorkbenchSafeLayoutRect(surfaceSize, constraints = defaultWorkbenchL
 }
 function inferWorkbenchSnapTarget(dragPoint, surfaceSize, threshold = 0, constraints = defaultWorkbenchLayoutConstraints) {
   const frame = getWorkbenchLayoutFrame(surfaceSize, constraints);
-  const topSnapBoundary = frame.y - threshold;
-  if (dragPoint.y < topSnapBoundary || topSnapBoundary === 0 && dragPoint.y <= 0) {
+  const crossesLeft = threshold > 0 ? dragPoint.x <= frame.x + threshold : dragPoint.x < frame.x || frame.x === 0 && dragPoint.x <= 0;
+  const crossesRight = threshold > 0 ? dragPoint.x >= frame.x + frame.width - threshold : dragPoint.x > frame.x + frame.width || frame.x + frame.width === surfaceSize.width && dragPoint.x >= surfaceSize.width;
+  const crossesTop = threshold > 0 ? dragPoint.y <= frame.y + threshold : dragPoint.y < frame.y || frame.y === 0 && dragPoint.y <= 0;
+  const crossesBottom = threshold > 0 ? dragPoint.y >= frame.y + frame.height - threshold : dragPoint.y > frame.y + frame.height || frame.y + frame.height === surfaceSize.height && dragPoint.y >= surfaceSize.height;
+  if (crossesTop && crossesLeft) {
+    return "top-left";
+  }
+  if (crossesTop && crossesRight) {
+    return "top-right";
+  }
+  if (crossesBottom && crossesLeft) {
+    return "bottom-left";
+  }
+  if (crossesBottom && crossesRight) {
+    return "bottom-right";
+  }
+  if (crossesTop) {
     return "top";
   }
+  if (crossesBottom) {
+    return "bottom";
+  }
+  if (crossesLeft) {
+    return "left";
+  }
+  if (crossesRight) {
+    return "right";
+  }
   return null;
 }
 function rectsEqual(left, right) {
@@ -618,49 +720,14 @@ function reduceWorkbenchState(state, action) {
           minimizedAtUnixMs: null
         };
       });
-    case "applyLayoutPreset": {
-      const nodeIDs = uniqueKnownNodeIDs(state.nodes, action.nodeIDs);
-      if (nodeIDs.length === 0) {
-        return state;
-      }
-      const frames = getWorkbenchLayoutPresetFrames(
-        nodeIDs.length,
-        action.preset,
-        state.surfaceSize,
-        state.layoutConstraints
-      );
-      if (!frames) {
-        return state;
-      }
-      const frameByNodeID = new Map(
-        nodeIDs.map((nodeID, index) => [nodeID, frames[index]])
+    case "applyLayoutPreset":
+      return applyLayoutPresetToNodes(state, action.nodeIDs, action.preset);
+    case "applyVisibleLayoutPreset":
+      return applyLayoutPresetToNodes(
+        state,
+        state.nodes.filter((node) => !node.isMinimized).map((node) => node.id),
+        action.preset
       );
-      const nodes = state.nodes.map((node) => {
-        const frame = frameByNodeID.get(node.id);
-        if (!frame) {
-          return node;
-        }
-        const nextFrame = clampWorkbenchRect(
-          frame,
-          state.surfaceSize,
-          state.layoutConstraints,
-          node.sizeConstraints
-        );
-        return {
-          ...node,
-          frame: nextFrame,
-          displayMode: "floating",
-          restoreFrame: null,
-          isMinimized: false,
-          minimizedAtUnixMs: null
-        };
-      });
-      let nodeStack = state.nodeStack;
-      for (const nodeID of nodeIDs) {
-        nodeStack = focusWorkbenchStack(nodeStack, nodeID);
-      }
-      return { ...state, nodes, nodeStack };
-    }
     case "applyActiveSnapTarget":
     case "applySnapTarget":
       return updateNode(state, action.nodeID, (node) => {
@@ -864,6 +931,49 @@ function updateNode(state, nodeID, update) {
     nodeStack: focusWorkbenchStack(state.nodeStack, nodeID)
   };
 }
+function applyLayoutPresetToNodes(state, inputNodeIDs, preset) {
+  const nodeIDs = uniqueKnownNodeIDs(state.nodes, inputNodeIDs);
+  if (nodeIDs.length === 0) {
+    return state;
+  }
+  const frames = getWorkbenchLayoutPresetFrames(
+    nodeIDs.length,
+    preset,
+    state.surfaceSize,
+    state.layoutConstraints
+  );
+  if (!frames) {
+    return state;
+  }
+  const frameByNodeID = new Map(
+    nodeIDs.map((nodeID, index) => [nodeID, frames[index]])
+  );
+  const nodes = state.nodes.map((node) => {
+    const frame = frameByNodeID.get(node.id);
+    if (!frame) {
+      return node;
+    }
+    const nextFrame = clampWorkbenchRect(
+      frame,
+      state.surfaceSize,
+      state.layoutConstraints,
+      node.sizeConstraints
+    );
+    return {
+      ...node,
+      frame: nextFrame,
+      displayMode: "floating",
+      restoreFrame: null,
+      isMinimized: false,
+      minimizedAtUnixMs: null
+    };
+  });
+  let nodeStack = state.nodeStack;
+  for (const nodeID of nodeIDs) {
+    nodeStack = focusWorkbenchStack(nodeStack, nodeID);
+  }
+  return { ...state, nodes, nodeStack };
+}
 function uniqueKnownNodeIDs(nodes, nodeIDs) {
   const knownNodeIDs = new Set(nodes.map((node) => node.id));
   const orderedNodeIDs = [];
@@ -1015,6 +1125,11 @@ function summarizeWorkbenchAction(action) {
         nodeIDs: action.nodeIDs,
         preset: action.preset
       };
+    case "applyVisibleLayoutPreset":
+      return {
+        type: action.type,
+        preset: action.preset
+      };
     case "applySnapTarget":
       return {
         type: action.type,
@@ -1629,6 +1744,16 @@ function selectFocusedWorkbenchNode(state) {
   const focusedID = state.nodeStack.at(-1);
   return state.nodes.find((node) => node.id === focusedID) ?? null;
 }
+function selectFocusedVisibleWorkbenchNode(state) {
+  const nodeByID = new Map(state.nodes.map((node) => [node.id, node]));
+  for (let index = state.nodeStack.length - 1; index >= 0; index -= 1) {
+    const node = nodeByID.get(state.nodeStack[index] ?? "");
+    if (node && !node.isMinimized) {
+      return node;
+    }
+  }
+  return state.nodes.find((node) => !node.isMinimized) ?? null;
+}
 function selectFullscreenNodeToExitBeforeDockLaunch(state, targetNodeID) {
   const nodeByID = new Map(state.nodes.map((node) => [node.id, node]));
   const isVisibleFullscreenNode = (node) => {
@@ -1854,27 +1979,46 @@ import { useCallback as useCallback4 } from "react";
 
 // src/react/hooks/useWorkbenchSnap.ts
 import { useCallback as useCallback3 } from "react";
+
+// src/react/hooks/workbenchSnapTarget.ts
+function resolveWorkbenchActiveSnapTarget(target, options = {}) {
+  if (options.edgeSnapEnabled) {
+    return target;
+  }
+  switch (target) {
+    case "top":
+    case "top-left":
+    case "top-right":
+      return "top";
+    default:
+      return null;
+  }
+}
+
+// src/react/hooks/useWorkbenchSnap.ts
 function useWorkbenchSnap() {
   const controller = useWorkbenchController();
   return useCallback3(
-    (pointerClientY) => {
+    (pointerClientPoint, options = {}) => {
       const target = inferWorkbenchSnapTarget(
-        { y: pointerClientY },
+        pointerClientPoint,
         controller.getSnapshot().surfaceSize,
-        void 0,
+        options.edgeSnapEnabled ? WORKBENCH_EDGE_SNAP_THRESHOLD_PX : 0,
         controller.getSnapshot().layoutConstraints
       );
-      controller.commands.setActiveSnapTarget(target);
-      return target;
+      const activeTarget = resolveWorkbenchActiveSnapTarget(target, options);
+      controller.commands.setActiveSnapTarget(activeTarget);
+      return activeTarget;
     },
     [controller]
   );
 }
 
 // src/react/hooks/useWorkbenchDrag.ts
-function useWorkbenchDrag(node) {
+function useWorkbenchDrag(node, options = {}) {
   const controller = useWorkbenchController();
   const updateSnap = useWorkbenchSnap();
+  const edgeSnapEnabled = options.edgeSnapEnabled === true;
   return useCallback4(
     (event) => {
       if (event.button !== 0) {
@@ -1892,7 +2036,10 @@ function useWorkbenchDrag(node) {
           x: initialFrame.x + moveEvent.clientX - origin.x,
           y: initialFrame.y + moveEvent.clientY - origin.y
         };
-        updateSnap(moveEvent.clientY);
+        updateSnap(
+          { x: moveEvent.clientX, y: moveEvent.clientY },
+          { edgeSnapEnabled }
+        );
         controller.commands.dragNode(node.id, nextFrame);
       };
       const clearListeners = () => {
@@ -1903,7 +2050,10 @@ function useWorkbenchDrag(node) {
         window.removeEventListener("pointercancel", cancelDrag);
       };
       const finishDrag = (upEvent) => {
-        if (updateSnap(upEvent.clientY) !== null) {
+        if (updateSnap(
+          { x: upEvent.clientX, y: upEvent.clientY },
+          { edgeSnapEnabled }
+        ) !== null) {
           controller.commands.applyActiveSnapTarget(node.id);
         }
         clearListeners();
@@ -1915,7 +2065,7 @@ function useWorkbenchDrag(node) {
       window.addEventListener("pointerup", finishDrag);
       window.addEventListener("pointercancel", cancelDrag);
     },
-    [controller, node.frame, node.id, updateSnap]
+    [controller, edgeSnapEnabled, node.frame, node.id, updateSnap]
   );
 }
 
@@ -2047,6 +2197,7 @@ function resolveWorkbenchNodeTypeId(data) {
 }
 function WorkbenchWindowFrame({
   children,
+  edgeSnapEnabled = false,
   fullscreenHeaderMode,
   genie,
   hiddenMounted = false,
@@ -2071,7 +2222,7 @@ function WorkbenchWindowFrame({
   const isResizing = useWorkbenchSelector(
     (state) => state.activeResizeNodeId === node.id
   );
-  const onDragStart = useWorkbenchDrag(node);
+  const onDragStart = useWorkbenchDrag(node, { edgeSnapEnabled });
   const onHeaderDoubleClick = () => {
     if (!interactive) {
       return;
@@ -2272,6 +2423,7 @@ function stringArraysEqual(left, right) {
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function WorkbenchNodeLayer({
   genie,
+  edgeSnapEnabled = false,
   interactive = true,
   presentation,
   renderNode,
@@ -2319,6 +2471,7 @@ function WorkbenchNodeLayer({
           {
             fullscreenHeaderMode: resolveFullscreenHeaderMode,
             genie,
+            edgeSnapEnabled,
             interactive,
             nodeID,
             presentation,
@@ -2337,6 +2490,7 @@ function WorkbenchNodeLayer({
 function WorkbenchNodeLayerItem({
   fullscreenHeaderMode,
   genie,
+  edgeSnapEnabled,
   interactive,
   nodeID,
   presentation,
@@ -2362,6 +2516,7 @@ function WorkbenchNodeLayerItem({
   return /* @__PURE__ */ jsx6(
     WorkbenchWindowFrame,
     {
+      edgeSnapEnabled,
       hiddenMounted: node.isMinimized,
       interactive,
       presentation,
@@ -2398,26 +2553,111 @@ var MemoizedWorkbenchNodeLayerItem = memo(
 
 // src/react/hooks/useWorkbenchShortcuts.ts
 import { useEffect as useEffect2 } from "react";
-function useWorkbenchShortcuts(enabled = true) {
+
+// src/react/hooks/workbenchShortcutIntent.ts
+function resolveWorkbenchShortcutIntent(event, options = {}) {
+  if (event.defaultPrevented || isEditableShortcutTarget(event.target ?? null)) {
+    return null;
+  }
+  if (event.key === "Escape" && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey) {
+    return { type: "exitFullscreen" };
+  }
+  if (!matchesWindowManagementShortcutPreset(
+    event,
+    options.windowManagementShortcutPreset ?? null
+  )) {
+    return null;
+  }
+  switch (event.key) {
+    case "ArrowLeft":
+      return { type: "applyFocusedSnapTarget", snapTarget: "left" };
+    case "ArrowRight":
+      return { type: "applyFocusedSnapTarget", snapTarget: "right" };
+    case "ArrowUp":
+      return { type: "applyFocusedQuickLayout", target: "top" };
+    case "ArrowDown":
+      return { type: "applyFocusedQuickLayout", target: "bottom" };
+    case "0":
+      return {
+        type: "applyVisibleLayoutPreset",
+        preset: { kind: "balanced" }
+      };
+    default:
+      return null;
+  }
+}
+function matchesWindowManagementShortcutPreset(event, preset) {
+  if (preset === null) {
+    return false;
+  }
+  if (!event.metaKey || event.ctrlKey || event.altKey) {
+    return false;
+  }
+  switch (preset) {
+    case "commandArrows":
+      return !event.shiftKey;
+    case "commandShiftArrows":
+      return event.shiftKey === true;
+  }
+}
+function isEditableShortcutTarget(target) {
+  const candidate = target;
+  const tagName = candidate?.tagName?.toUpperCase();
+  return candidate?.isContentEditable === true || tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT";
+}
+
+// src/react/hooks/useWorkbenchShortcuts.ts
+function useWorkbenchShortcuts(options = {}) {
   const controller = useWorkbenchController();
+  const enabled = options.enabled ?? true;
+  const windowManagementShortcutPreset = options.windowManagementShortcutPreset ?? null;
   useEffect2(() => {
     if (!enabled) {
       return void 0;
     }
     const onKeyDown = (event) => {
-      if (event.key !== "Escape") {
+      const intent = resolveWorkbenchShortcutIntent(event, {
+        windowManagementShortcutPreset
+      });
+      if (!intent) {
         return;
       }
-      const focusedNode = selectFocusedWorkbenchNode(controller.getSnapshot());
-      if (focusedNode?.displayMode === "fullscreen") {
-        controller.commands.exitFullscreen(focusedNode.id);
+      let handled = false;
+      const focusedNode = selectFocusedVisibleWorkbenchNode(
+        controller.getSnapshot()
+      );
+      if (intent.type === "exitFullscreen") {
+        if (focusedNode?.displayMode === "fullscreen") {
+          controller.commands.exitFullscreen(focusedNode.id);
+          handled = true;
+        }
+      } else if (intent.type === "applyFocusedSnapTarget") {
+        if (focusedNode) {
+          controller.commands.applySnapTarget(
+            focusedNode.id,
+            intent.snapTarget
+          );
+          handled = true;
+        }
+      } else if (intent.type === "applyFocusedQuickLayout") {
+        if (focusedNode) {
+          controller.commands.applyQuickLayout(focusedNode.id, intent.target);
+          handled = true;
+        }
+      } else {
+        controller.commands.applyVisibleLayoutPreset(intent.preset);
+        handled = true;
+      }
+      if (handled) {
+        event.preventDefault();
+        event.stopPropagation();
       }
     };
     window.addEventListener("keydown", onKeyDown);
     return () => {
       window.removeEventListener("keydown", onKeyDown);
     };
-  }, [controller, enabled]);
+  }, [controller, enabled, windowManagementShortcutPreset]);
 }
 
 // src/react/hooks/useWorkbenchSurfaceSize.ts
@@ -4346,6 +4586,7 @@ function WorkbenchSurface({
   shortcutsEnabled,
   shouldCaptureNodePreviewImage,
   wallpaper,
+  windowManagement,
   windowChromeMode,
   windowChromeI18n
 }) {
@@ -4378,6 +4619,7 @@ function WorkbenchSurface({
       shortcutsEnabled,
       shouldCaptureNodePreviewImage,
       wallpaper,
+      windowManagement,
       windowChromeMode,
       windowChromeI18n
     }
@@ -4410,6 +4652,7 @@ function WorkbenchSurfaceInner({
   shortcutsEnabled,
   shouldCaptureNodePreviewImage,
   wallpaper,
+  windowManagement,
   windowChromeMode,
   windowChromeI18n
 }) {
@@ -4432,7 +4675,10 @@ function WorkbenchSurfaceInner({
     resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2,
     shouldCaptureNodePreviewImage
   });
-  useWorkbenchShortcuts((shortcutsEnabled ?? true) && interactive);
+  useWorkbenchShortcuts({
+    enabled: (shortcutsEnabled ?? true) && interactive,
+    windowManagementShortcutPreset: windowManagement?.shortcutPreset ?? null
+  });
   useEffect4(() => {
     if (!layoutConstraints) {
       return;
@@ -4472,6 +4718,7 @@ function WorkbenchSurfaceInner({
             interactive,
             presentation,
             renderNode,
+            edgeSnapEnabled: windowManagement?.edgeSnapEnabled === true,
             renderWindowActions,
             renderWindowHeader,
             shouldKeepMinimizedNodeMounted,
@@ -12185,6 +12432,7 @@ function WorkbenchHost({
   snapshotRepository,
   shortcutsEnabled,
   wallpaper,
+  windowManagement,
   workspaceId
 }) {
   const hostRuntimeConfig = useMemo7(
@@ -12309,6 +12557,7 @@ function WorkbenchHost({
       shortcutsEnabled,
       shouldCaptureNodePreviewImage: surfaceRenderers.shouldCaptureNodePreviewImage,
       wallpaper,
+      windowManagement,
       windowChromeI18n,
       windowChromeMode: surfaceRenderers.windowChromeMode
     }