@nice-code/action 0.3.2 → 0.4.0

package/build/devtools/browser/index.js

@@ -1957,7 +1957,7 @@ class ActionDevtoolsCore {
   }
 }
 // src/devtools/browser/NiceActionDevtools.tsx
-import { useEffect as useEffect4, useMemo as useMemo3, useState as useState9 } from "react";
+import { useEffect as useEffect4, useId, useMemo as useMemo3, useReducer, useState as useState10 } from "react";
 
 // src/devtools/core/devtools_colors.ts
 var DEVTOOL_COLOR_SEMANTIC_ERROR = "#FF5C5C";
@@ -3090,7 +3090,13 @@ function FullErrorContent({
 function CompactErrorContent({ value, color }) {
   if (isNiceErrorJson(value)) {
     return /* @__PURE__ */ jsxDEV5("div", {
-      style: { display: "flex", flexDirection: "column", gap: "1em" },
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "1em",
+        width: "100%",
+        minWidth: 0
+      },
       children: [
         /* @__PURE__ */ jsxDEV5("div", {
           style: {
@@ -3100,19 +3106,39 @@ function CompactErrorContent({ value, color }) {
             fontWeight: 600,
             lineHeight: "1.4",
             wordBreak: "break-word",
+            overflowWrap: "anywhere",
             textAlign: "left"
           },
           children: value.message
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV5("div", {
-          style: { display: "flex", flexWrap: "wrap", gap: "6px", alignItems: "center" },
+          style: {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "6px",
+            alignItems: "center",
+            minWidth: 0
+          },
           children: [
             value.ids.map((id) => /* @__PURE__ */ jsxDEV5("span", {
-              style: { color, fontFamily: MONO3, fontSize: "10px", opacity: 0.8 },
+              style: {
+                color,
+                fontFamily: MONO3,
+                fontSize: "10px",
+                opacity: 0.8,
+                wordBreak: "break-word",
+                overflowWrap: "anywhere"
+              },
               children: id
             }, id, false, undefined, this)),
             /* @__PURE__ */ jsxDEV5("span", {
-              style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontFamily: MONO3, fontSize: "10px" },
+              style: {
+                color: DEVTOOL_COLOR_TEXT_MUTED,
+                fontFamily: MONO3,
+                fontSize: "10px",
+                wordBreak: "break-word",
+                overflowWrap: "anywhere"
+              },
               children: value.def.domain
             }, undefined, false, undefined, this)
           ]
@@ -3129,7 +3155,8 @@ function CompactErrorContent({ value, color }) {
       fontFamily: SANS2,
       fontSize: "12px",
       lineHeight: "1.4",
-      wordBreak: "break-word"
+      wordBreak: "break-word",
+      overflowWrap: "anywhere"
     },
     children: text
   }, undefined, false, undefined, this);
@@ -3254,7 +3281,11 @@ function Tooltip({
       pointerEvents: "none",
       maxWidth: resolvedMaxWidth != null ? `${resolvedMaxWidth}px` : undefined,
       maxHeight: `${maxHeight}px`,
-      overflowY: "auto"
+      overflowY: "auto",
+      overflowX: "hidden",
+      whiteSpace: "normal",
+      wordBreak: "break-word",
+      overflowWrap: "anywhere"
     },
     children: [
       resolvedTitle != null && /* @__PURE__ */ jsxDEV6("div", {
@@ -4590,27 +4621,49 @@ function ActionEntryRow({
               /* @__PURE__ */ jsxDEV19("div", {
                 style: { flex: 1 }
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV19("span", {
+              /* @__PURE__ */ jsxDEV19("div", {
                 style: {
-                  color: DEVTOOL_COLOR_SEMANTIC_METADATA,
-                  fontSize: "10px",
-                  letterSpacing: "0.02em",
-                  fontFamily: "ui-sans-serif, system-ui, sans-serif",
-                  flexShrink: 0
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "end",
+                  gap: "0.35em",
+                  marginTop: "-0.2em",
+                  marginRight: "-0.2em"
                 },
-                children: timestamp
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV19("span", {
-                style: { color: DEVTOOL_COLOR_SEMANTIC_WARNING, fontSize: "11px", flexShrink: 0 },
-                children: /* @__PURE__ */ jsxDEV19(DurationDisplay, {
-                  entry
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this)
+                children: [
+                  /* @__PURE__ */ jsxDEV19("span", {
+                    style: {
+                      display: "flex",
+                      color: DEVTOOL_COLOR_SEMANTIC_METADATA,
+                      fontSize: "10px",
+                      lineHeight: "1em",
+                      letterSpacing: "0.02em",
+                      fontFamily: "ui-sans-serif, system-ui, sans-serif",
+                      flexShrink: 0,
+                      opacity: 0.7
+                    },
+                    children: timestamp
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("span", {
+                    style: {
+                      display: "flex",
+                      color: DEVTOOL_COLOR_SEMANTIC_WARNING,
+                      lineHeight: "1em",
+                      fontSize: "11px",
+                      opacity: 0.9,
+                      flexShrink: 0
+                    },
+                    children: /* @__PURE__ */ jsxDEV19(DurationDisplay, {
+                      entry
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      hasBottomContent && /* @__PURE__ */ jsxDEV19("div", {
+      hasBottomContent && (childEntries?.length ?? 0) > 0 && /* @__PURE__ */ jsxDEV19("div", {
         style: {
           display: "flex",
           flexWrap: "wrap",
@@ -4821,29 +4874,34 @@ function ActionList({
 }
 
 // src/devtools/browser/components/PanelChrome.tsx
+import { useState as useState9 } from "react";
 import { jsxDEV as jsxDEV21 } from "react/jsx-dev-runtime";
+var MONO_FONT = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
+var SANS_FONT = "ui-sans-serif, system-ui, sans-serif";
 var DOCKED_SIZE_MIN = 140;
 var POSITION_GRID = [
-  ["top-left", "dock-top", "top-right"],
+  [null, "dock-top", null],
   ["dock-left", null, "dock-right"],
-  ["bottom-left", "dock-bottom", "bottom-right"]
+  [null, "dock-bottom", null]
 ];
 function getDockSide(pos) {
-  if (pos === "dock-top")
-    return "top";
-  if (pos === "dock-bottom")
-    return "bottom";
-  if (pos === "dock-left")
-    return "left";
-  if (pos === "dock-right")
-    return "right";
-  return null;
+  switch (pos) {
+    case "dock-top":
+      return "top";
+    case "dock-left":
+      return "left";
+    case "dock-right":
+      return "right";
+    default:
+      return "bottom";
+  }
 }
 function PanelHeader({
   position,
   onPositionChange,
   onClose,
-  onClear
+  onClear,
+  openOthers
 }) {
   return /* @__PURE__ */ jsxDEV21("div", {
     style: {
@@ -4851,15 +4909,56 @@ function PanelHeader({
       alignItems: "center",
       justifyContent: "space-between",
       padding: "8px 12px",
+      gap: "10px",
       background: DEVTOOL_SECTION_BACKGROUND,
       borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
       flexShrink: 0
     },
     children: [
-      /* @__PURE__ */ jsxDEV21("span", {
-        style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM, fontWeight: "bold", fontSize: "11px" },
-        children: "⚡ nice-action devtools"
-      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV21("div", {
+        style: { display: "flex", alignItems: "center", gap: "8px", minWidth: 0 },
+        children: [
+          /* @__PURE__ */ jsxDEV21("span", {
+            style: {
+              color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+              fontWeight: "bold",
+              fontSize: "11px",
+              whiteSpace: "nowrap"
+            },
+            children: "⚡ action"
+          }, undefined, false, undefined, this),
+          openOthers?.map((item) => /* @__PURE__ */ jsxDEV21("button", {
+            onClick: item.onOpen,
+            title: `Open ${item.label} devtools`,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              background: DEVTOOL_LIST_BASE_BACKGROUND,
+              border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
+              borderRadius: "999px",
+              color: DEVTOOL_COLOR_TEXT_MUTED,
+              cursor: "pointer",
+              fontSize: "10px",
+              padding: "1px 7px 1px 6px",
+              fontFamily: SANS_FONT,
+              whiteSpace: "nowrap"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV21("span", {
+                children: item.icon
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV21("span", {
+                children: item.label
+              }, undefined, false, undefined, this),
+              item.badge != null && /* @__PURE__ */ jsxDEV21("span", {
+                style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
+                children: item.badge
+              }, undefined, false, undefined, this)
+            ]
+          }, item.id, true, undefined, this))
+        ]
+      }, undefined, true, undefined, this),
       /* @__PURE__ */ jsxDEV21("div", {
         style: { display: "flex", gap: "10px", alignItems: "center" },
         children: [
@@ -4969,6 +5068,195 @@ function ResizeHandle({
     }
   }, undefined, false, undefined, this);
 }
+var SPLIT_RATIO_MIN = 0.15;
+var SPLIT_RATIO_MAX = 0.85;
+function SplitHandle({
+  horizontal,
+  onRatioChange
+}) {
+  const [hovered, setHovered] = useState9(false);
+  const onMouseDown = (e) => {
+    e.preventDefault();
+    const container = e.currentTarget.parentElement;
+    if (container == null)
+      return;
+    const onMove = (me) => {
+      const rect = container.getBoundingClientRect();
+      const ratio = horizontal ? (rect.right - me.clientX) / rect.width : (rect.bottom - me.clientY) / rect.height;
+      onRatioChange(Math.max(SPLIT_RATIO_MIN, Math.min(SPLIT_RATIO_MAX, ratio)));
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+  return /* @__PURE__ */ jsxDEV21("div", {
+    onMouseDown,
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
+    style: {
+      flex: "0 0 5px",
+      alignSelf: "stretch",
+      cursor: horizontal ? "ew-resize" : "ns-resize",
+      background: hovered ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "transparent",
+      opacity: hovered ? 0.6 : 1,
+      zIndex: 5
+    }
+  }, undefined, false, undefined, this);
+}
+function DevtoolsLauncher({ items }) {
+  return /* @__PURE__ */ jsxDEV21("div", {
+    style: {
+      position: "fixed",
+      bottom: "16px",
+      right: "16px",
+      zIndex: 2147483647,
+      display: "flex",
+      fontFamily: MONO_FONT,
+      fontSize: "12px"
+    },
+    children: /* @__PURE__ */ jsxDEV21("div", {
+      style: {
+        display: "flex",
+        background: DEVTOOL_SECTION_BACKGROUND,
+        border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
+        borderRadius: "6px",
+        overflow: "hidden",
+        boxShadow: "0 8px 24px rgba(0,0,0,0.35)"
+      },
+      children: items.map((item, i) => /* @__PURE__ */ jsxDEV21("button", {
+        onClick: item.onOpen,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "5px",
+          background: "transparent",
+          color: DEVTOOL_COLOR_TEXT_SECONDARY,
+          border: "none",
+          borderLeft: i > 0 ? `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}` : "none",
+          cursor: "pointer",
+          padding: "6px 11px",
+          fontFamily: MONO_FONT,
+          fontSize: "12px",
+          lineHeight: "1.5"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV21("span", {
+            children: item.icon
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV21("span", {
+            children: item.label
+          }, undefined, false, undefined, this),
+          item.badge != null && /* @__PURE__ */ jsxDEV21("span", {
+            style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
+            children: item.badge
+          }, undefined, false, undefined, this)
+        ]
+      }, item.id, true, undefined, this))
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/devtools/browser/devtools_dock.ts
+var GLOBAL_KEY = "__NICE_DEVTOOLS_DOCK__";
+var VERSION = 2;
+function createCoordinator() {
+  const panels = new Map;
+  const listeners = new Set;
+  function toRef(panel) {
+    return {
+      id: panel.id,
+      label: panel.label,
+      icon: panel.icon,
+      badge: panel.badge,
+      onOpen: panel.onOpen
+    };
+  }
+  function applyBodyMargins() {
+    if (typeof document === "undefined")
+      return;
+    const margins = { top: 0, bottom: 0, left: 0, right: 0 };
+    for (const panel of panels.values()) {
+      if (panel.open)
+        margins[panel.side] += panel.size;
+    }
+    const sides = ["top", "bottom", "left", "right"];
+    for (const side of sides) {
+      if (margins[side] > 0) {
+        document.body.style.setProperty(`margin-${side}`, `${margins[side]}px`);
+      } else {
+        document.body.style.removeProperty(`margin-${side}`);
+      }
+    }
+  }
+  function notify() {
+    applyBodyMargins();
+    for (const listener of listeners)
+      listener();
+  }
+  return {
+    version: VERSION,
+    register(panel) {
+      panels.set(panel.id, { ...panel });
+      notify();
+      return () => {
+        panels.delete(panel.id);
+        notify();
+      };
+    },
+    update(id, next) {
+      const existing = panels.get(id);
+      if (existing == null)
+        return;
+      if (existing.side === next.side && existing.size === next.size && existing.open === next.open && existing.badge === next.badge) {
+        return;
+      }
+      panels.set(id, { ...existing, ...next });
+      notify();
+    },
+    getView(id) {
+      const list = [...panels.values()];
+      const anyOpen = list.some((p) => p.open);
+      const firstId = list.length > 0 ? list[0].id : null;
+      let dockOffset = 0;
+      const self = panels.get(id);
+      if (self != null && self.open) {
+        for (const panel of list) {
+          if (panel.id === id)
+            break;
+          if (panel.open && panel.side === self.side)
+            dockOffset += panel.size;
+        }
+      }
+      return {
+        dockOffset,
+        anyOpen,
+        isPrimary: id === firstId,
+        devtools: list.map(toRef),
+        otherClosed: list.filter((p) => !p.open && p.id !== id).map(toRef)
+      };
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+function getDevtoolsDockCoordinator() {
+  if (typeof window === "undefined")
+    return createCoordinator();
+  const host = window;
+  const existing = host[GLOBAL_KEY];
+  if (existing != null && existing.version === VERSION)
+    return existing;
+  const created = createCoordinator();
+  host[GLOBAL_KEY] = created;
+  return created;
+}
 
 // src/devtools/browser/NiceActionDevtools.tsx
 import { jsxDEV as jsxDEV22, Fragment as Fragment10 } from "react/jsx-dev-runtime";
@@ -5009,18 +5297,27 @@ if (typeof document !== "undefined" && !document.getElementById("__nice-action-d
 var PREFS_KEY = "__nice-action-devtools-prefs";
 var DOCKED_HEIGHT_DEFAULT = 320;
 var DOCKED_WIDTH_DEFAULT = 420;
+var DETAIL_RATIO_DEFAULT = 0.5;
+var DOCK_POSITIONS = ["dock-bottom", "dock-top", "dock-left", "dock-right"];
+function isDockPosition(value) {
+  return typeof value === "string" && DOCK_POSITIONS.includes(value);
+}
 function readPrefs(defaultPosition, initialOpen) {
   const fallback = {
     position: defaultPosition,
     isOpen: initialOpen,
     dockedHeight: DOCKED_HEIGHT_DEFAULT,
-    dockedWidth: DOCKED_WIDTH_DEFAULT
+    dockedWidth: DOCKED_WIDTH_DEFAULT,
+    detailRatio: DETAIL_RATIO_DEFAULT
   };
   try {
     if (typeof localStorage === "undefined")
       return fallback;
     const stored = localStorage.getItem(PREFS_KEY);
-    return stored != null ? { ...fallback, ...JSON.parse(stored) } : fallback;
+    const merged = stored != null ? { ...fallback, ...JSON.parse(stored) } : fallback;
+    if (!isDockPosition(merged.position))
+      merged.position = defaultPosition;
+    return merged;
   } catch (_e) {
     return fallback;
   }
@@ -5070,12 +5367,12 @@ function NiceActionDevtools(props) {
 }
 function NiceActionDevtools_Panel({
   core,
-  position: defaultPosition = "bottom-right",
+  position: defaultPosition = "dock-bottom",
   initialOpen = false
 }) {
-  const [prefs, setPrefsRaw] = useState9(() => readPrefs(defaultPosition, initialOpen));
-  const [entries, setEntries] = useState9([]);
-  const [selectedCuid, setSelectedCuid] = useState9(null);
+  const [prefs, setPrefsRaw] = useState10(() => readPrefs(defaultPosition, initialOpen));
+  const [entries, setEntries] = useState10([]);
+  const [selectedCuid, setSelectedCuid] = useState10(null);
   useEffect4(() => core.subscribe(setEntries), [core]);
   const groups = useMemo3(() => {
     const byCuid = new Map(entries.map((e) => [e.cuid, e]));
@@ -5112,44 +5409,37 @@ function NiceActionDevtools_Panel({
       return next;
     });
   };
-  const { position, isOpen, dockedHeight, dockedWidth } = prefs;
+  const { position, isOpen, dockedHeight, dockedWidth, detailRatio } = prefs;
   const dockSide = getDockSide(position);
   const isHorizDock = dockSide === "top" || dockSide === "bottom";
   const dockedSize = isHorizDock ? dockedHeight : dockedWidth;
   const selectedEntry = selectedCuid != null ? entries.find((e) => e.cuid === selectedCuid) : null;
   const runningCount = entries.filter((e) => e.status === "running").length;
+  const dock = useMemo3(() => getDevtoolsDockCoordinator(), []);
+  const panelId = useId();
+  const [, bumpView] = useReducer((n) => n + 1, 0);
+  const badge = runningCount > 0 ? `${runningCount}●` : undefined;
   useEffect4(() => {
-    const sides = ["top", "bottom", "left", "right"];
-    const clearAll = () => {
-      sides.forEach((s) => {
-        document.body.style.removeProperty(`margin-${s}`);
-      });
+    const unregister = dock.register({
+      id: panelId,
+      label: "actions",
+      icon: "⚡",
+      side: dockSide,
+      size: dockedSize,
+      open: isOpen,
+      badge,
+      onOpen: () => setPrefs({ isOpen: true })
+    });
+    const unsubscribe = dock.subscribe(bumpView);
+    return () => {
+      unregister();
+      unsubscribe();
     };
-    if (!isOpen || dockSide == null) {
-      clearAll();
-      return clearAll;
-    }
-    clearAll();
-    document.body.style.setProperty(`margin-${dockSide}`, `${dockedSize}px`);
-    return clearAll;
-  }, [dockSide, isOpen, dockedSize]);
-  const closedAnchor = (() => {
-    switch (position) {
-      case "dock-bottom":
-        return { bottom: "16px", right: "16px" };
-      case "dock-top":
-        return { top: "16px", right: "16px" };
-      case "dock-left":
-        return { top: "16px", left: "16px" };
-      case "dock-right":
-        return { top: "16px", right: "16px" };
-      default:
-        return {
-          ...position.includes("right") ? { right: "16px" } : { left: "16px" },
-          ...position.includes("bottom") ? { bottom: "16px" } : { top: "16px" }
-        };
-    }
-  })();
+  }, [dock, panelId]);
+  useEffect4(() => {
+    dock.update(panelId, { side: dockSide, size: dockedSize, open: isOpen, badge });
+  }, [dock, panelId, dockSide, dockedSize, isOpen, badge]);
+  const view = dock.getView(panelId);
   const baseStyle = {
     position: "fixed",
     zIndex: 2147483647,
@@ -5157,36 +5447,14 @@ function NiceActionDevtools_Panel({
     fontSize: "12px"
   };
   if (!isOpen) {
-    return /* @__PURE__ */ jsxDEV22("button", {
-      onClick: () => setPrefs({ isOpen: true }),
-      style: {
-        ...baseStyle,
-        ...closedAnchor,
-        background: DEVTOOL_SECTION_BACKGROUND,
-        color: DEVTOOL_COLOR_TEXT_SECONDARY,
-        border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
-        borderRadius: "6px",
-        padding: "5px 10px",
-        cursor: "pointer",
-        lineHeight: "1.5"
-      },
-      children: [
-        "⚡ actions",
-        runningCount > 0 && /* @__PURE__ */ jsxDEV22("span", {
-          style: {
-            marginLeft: "6px",
-            color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
-            animation: "__nice-action-pulse 1.2s ease-in-out infinite"
-          },
-          children: [
-            runningCount,
-            " running"
-          ]
-        }, undefined, true, undefined, this)
-      ]
-    }, undefined, true, undefined, this);
+    if (view.isPrimary && !view.anyOpen) {
+      return /* @__PURE__ */ jsxDEV22(DevtoolsLauncher, {
+        items: view.devtools
+      }, undefined, false, undefined, this);
+    }
+    return null;
   }
-  const panelStyle = dockSide != null ? {
+  const panelStyle = {
     ...baseStyle,
     background: DEVTOOL_LIST_BASE_BACKGROUND,
     border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
@@ -5195,44 +5463,7 @@ function NiceActionDevtools_Panel({
     flexDirection: "column",
     boxShadow: "0 -4px 24px rgba(0,0,0,0.4)",
     overflow: "hidden",
-    ...dockSide === "bottom" ? {
-      bottom: 0,
-      left: 0,
-      right: 0,
-      height: `${dockedSize}px`,
-      borderRadius: "8px 8px 0 0"
-    } : dockSide === "top" ? {
-      top: 0,
-      left: 0,
-      right: 0,
-      height: `${dockedSize}px`,
-      borderRadius: "0 0 8px 8px"
-    } : dockSide === "left" ? {
-      top: 0,
-      left: 0,
-      bottom: 0,
-      width: `${dockedSize}px`,
-      borderRadius: "0 8px 8px 0"
-    } : {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      width: `${dockedSize}px`,
-      borderRadius: "8px 0 0 8px"
-    }
-  } : {
-    ...baseStyle,
-    ...closedAnchor,
-    width: "460px",
-    maxHeight: "560px",
-    background: DEVTOOL_LIST_BASE_BACKGROUND,
-    border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
-    borderRadius: "10px",
-    color: DEVTOOL_COLOR_TEXT_SECONDARY,
-    display: "flex",
-    flexDirection: "column",
-    boxShadow: "0 25px 50px rgba(0,0,0,0.5)",
-    overflow: "hidden"
+    ...dockSide === "bottom" ? { bottom: view.dockOffset, left: 0, right: 0, height: `${dockedSize}px`, borderRadius: "8px 8px 0 0" } : dockSide === "top" ? { top: view.dockOffset, left: 0, right: 0, height: `${dockedSize}px`, borderRadius: "0 0 8px 8px" } : dockSide === "left" ? { top: 0, left: view.dockOffset, bottom: 0, width: `${dockedSize}px`, borderRadius: "0 8px 8px 0" } : { top: 0, right: view.dockOffset, bottom: 0, width: `${dockedSize}px`, borderRadius: "8px 0 0 8px" }
   };
   const selectedEntryParent = selectedEntry?.parentCuid != null ? entries.find((e) => e.cuid === selectedEntry.parentCuid) ?? null : null;
   const selectedEntryChildren = selectedEntry != null ? [...entries].filter((e) => e.parentCuid === selectedEntry.cuid).sort((a, b) => a.startTime - b.startTime) : [];
@@ -5249,7 +5480,7 @@ function NiceActionDevtools_Panel({
     id: "__nice-action-devtools-panel",
     style: panelStyle,
     children: [
-      dockSide != null && /* @__PURE__ */ jsxDEV22(ResizeHandle, {
+      /* @__PURE__ */ jsxDEV22(ResizeHandle, {
         dockSide,
         dockedSize,
         onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
@@ -5261,95 +5492,64 @@ function NiceActionDevtools_Panel({
         onClear: entries.length > 0 ? () => {
           core.clear();
           setSelectedCuid(null);
-        } : undefined
+        } : undefined,
+        openOthers: view.otherClosed
       }, undefined, false, undefined, this),
-      isHorizDock ? /* @__PURE__ */ jsxDEV22("div", {
-        style: { flex: 1, display: "flex", overflow: "hidden" },
+      /* @__PURE__ */ jsxDEV22("div", {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: isHorizDock ? "row" : "column",
+          overflow: "hidden",
+          minHeight: 0
+        },
         children: [
-          /* @__PURE__ */ jsxDEV22("div", {
-            style: { position: "relative", width: "340px", flexShrink: 0 },
-            children: [
-              /* @__PURE__ */ jsxDEV22(ActionList, {
-                ...virtualListProps,
-                style: { width: "100%", height: "100%", overflowY: "auto" }
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV22("div", {
-                style: {
-                  position: "absolute",
-                  top: 0,
-                  right: 0,
-                  bottom: 0,
-                  width: "36px",
-                  pointerEvents: "none",
-                  background: `linear-gradient(to right, transparent, ${DEVTOOL_LIST_BASE_BACKGROUND} 88%)`
-                }
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
           /* @__PURE__ */ jsxDEV22("div", {
             style: {
-              flex: 1,
-              display: "flex",
-              flexDirection: "column",
-              overflow: "hidden",
-              borderLeft: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`,
-              boxShadow: "inset 18px 0 36px -14px rgba(0,0,0,0.8)"
+              flexGrow: selectedEntry != null ? 1 - detailRatio : 1,
+              flexShrink: 1,
+              flexBasis: 0,
+              minWidth: 0,
+              minHeight: 0
             },
-            children: selectedEntry != null ? /* @__PURE__ */ jsxDEV22(ActionDetailPanel, {
-              entry: selectedEntry,
-              parent: selectedEntryParent,
-              childEntries: selectedEntryChildren,
-              onSelectEntry: (cuid) => setSelectedCuid(cuid)
-            }, selectedEntry.cuid, false, undefined, this) : /* @__PURE__ */ jsxDEV22("div", {
-              style: {
-                padding: "24px",
-                textAlign: "center",
-                color: DEVTOOL_COLOR_TEXT_MUTED,
-                fontSize: "11px"
-              },
-              children: "Select an action to inspect"
+            children: /* @__PURE__ */ jsxDEV22(ActionList, {
+              ...virtualListProps,
+              style: { width: "100%", height: "100%", overflowY: "auto" }
             }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV22(Fragment10, {
-        children: [
-          /* @__PURE__ */ jsxDEV22("div", {
-            style: { position: "relative", flex: 1, minHeight: "80px" },
+          }, undefined, false, undefined, this),
+          selectedEntry != null && /* @__PURE__ */ jsxDEV22(Fragment10, {
             children: [
-              /* @__PURE__ */ jsxDEV22(ActionList, {
-                ...virtualListProps,
-                style: { overflowY: "auto", height: "100%" }
+              /* @__PURE__ */ jsxDEV22(SplitHandle, {
+                horizontal: isHorizDock,
+                onRatioChange: (ratio) => setPrefs({ detailRatio: ratio })
               }, undefined, false, undefined, this),
-              selectedEntry != null && /* @__PURE__ */ jsxDEV22("div", {
+              /* @__PURE__ */ jsxDEV22("div", {
                 style: {
-                  position: "absolute",
-                  bottom: 0,
-                  left: 0,
-                  right: 0,
-                  height: "36px",
-                  pointerEvents: "none",
-                  background: `linear-gradient(to bottom, transparent, ${DEVTOOL_LIST_BASE_BACKGROUND} 88%)`
-                }
+                  flexGrow: detailRatio,
+                  flexShrink: 1,
+                  flexBasis: 0,
+                  minWidth: 0,
+                  minHeight: 0,
+                  display: "flex",
+                  flexDirection: "column",
+                  overflow: "hidden",
+                  ...isHorizDock ? {
+                    borderLeft: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`,
+                    boxShadow: "inset 18px 0 36px -14px rgba(0,0,0,0.8)"
+                  } : {
+                    borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`,
+                    boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
+                  }
+                },
+                children: /* @__PURE__ */ jsxDEV22(ActionDetailPanel, {
+                  entry: selectedEntry,
+                  parent: selectedEntryParent,
+                  childEntries: selectedEntryChildren,
+                  onSelectEntry: (cuid) => setSelectedCuid(cuid)
+                }, selectedEntry.cuid, false, undefined, this)
               }, undefined, false, undefined, this)
             ]
-          }, undefined, true, undefined, this),
-          selectedEntry != null && /* @__PURE__ */ jsxDEV22("div", {
-            style: {
-              flexShrink: 0,
-              maxHeight: "55%",
-              display: "flex",
-              flexDirection: "column",
-              overflow: "hidden",
-              borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`,
-              boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
-            },
-            children: /* @__PURE__ */ jsxDEV22(ActionDetailPanel, {
-              entry: selectedEntry,
-              parent: selectedEntryParent,
-              childEntries: selectedEntryChildren,
-              onSelectEntry: (cuid) => setSelectedCuid(cuid)
-            }, selectedEntry.cuid, false, undefined, this)
-          }, undefined, false, undefined, this)
+          }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this)
     ]

package/build/types/devtools/browser/components/PanelChrome.d.ts

@@ -1,14 +1,41 @@
 import type { TDevtoolsPosition } from "../../core/ActionDevtools.types";
+export interface IDevtoolsLauncherItem {
+    id: string;
+    label: string;
+    icon: string;
+    badge?: string;
+    onOpen: () => void;
+}
 export type TDockSide = "top" | "bottom" | "left" | "right";
-export declare function getDockSide(pos: TDevtoolsPosition): TDockSide | null;
-export declare function PanelHeader({ position, onPositionChange, onClose, onClear, }: {
+export declare function getDockSide(pos: TDevtoolsPosition): TDockSide;
+export declare function PanelHeader({ position, onPositionChange, onClose, onClear, openOthers, }: {
     position: TDevtoolsPosition;
     onPositionChange: (p: TDevtoolsPosition) => void;
     onClose: () => void;
     onClear?: () => void;
+    openOthers?: IDevtoolsLauncherItem[];
 }): import("react/jsx-runtime").JSX.Element;
 export declare function ResizeHandle({ dockSide, dockedSize, onChange, }: {
     dockSide: TDockSide;
     dockedSize: number;
     onChange: (size: number) => void;
 }): import("react/jsx-runtime").JSX.Element;
+/**
+ * Draggable divider between the list and the detail pane. `horizontal` refers to
+ * the split axis: a row layout (dock top/bottom) splits horizontally and drags
+ * left/right; a column layout (dock left/right) splits vertically. The reported
+ * ratio is the fraction of the container the *detail* pane should occupy.
+ */
+export declare function SplitHandle({ horizontal, onRatioChange, }: {
+    horizontal: boolean;
+    onRatioChange: (ratio: number) => void;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The combined, page-wide launcher shown while every devtool is collapsed — one
+ * grouped pill with a segment per registered devtool, so the buttons never
+ * overlap or hide behind each other. Rendered by the coordinator's "primary"
+ * devtool only.
+ */
+export declare function DevtoolsLauncher({ items }: {
+    items: IDevtoolsLauncherItem[];
+}): import("react/jsx-runtime").JSX.Element;

package/build/types/devtools/browser/devtools_dock.d.ts

@@ -0,0 +1,47 @@
+export type TDockSide = "top" | "bottom" | "left" | "right";
+/** A handle to one registered devtool, used to render launch controls. */
+export interface IDockDevtoolRef {
+    id: string;
+    label: string;
+    icon: string;
+    badge?: string;
+    onOpen: () => void;
+}
+/** The live, syncable part of a devtool's registration. */
+export interface IDockDevtoolSync {
+    side: TDockSide;
+    size: number;
+    open: boolean;
+    badge?: string;
+}
+export interface IDockDevtoolInput extends IDockDevtoolSync {
+    id: string;
+    label: string;
+    icon: string;
+    onOpen: () => void;
+}
+export interface IDockView {
+    /** Offset (px) from the docked edge — stacks open panels on the same side. */
+    dockOffset: number;
+    /** Is any devtool on the page currently open? */
+    anyOpen: boolean;
+    /** First-registered devtool — the one that renders the combined launcher. */
+    isPrimary: boolean;
+    /** Every registered devtool, for the combined launcher. */
+    devtools: IDockDevtoolRef[];
+    /** Closed devtools other than this one, for an open panel's header. */
+    otherClosed: IDockDevtoolRef[];
+}
+export interface IDevtoolsDockCoordinator {
+    version: number;
+    register(panel: IDockDevtoolInput): () => void;
+    update(id: string, next: IDockDevtoolSync): void;
+    getView(id: string): IDockView;
+    subscribe(listener: () => void): () => void;
+}
+/**
+ * Returns the page-wide dock coordinator, installing it on `window` the first
+ * time it is requested. On the server (no `window`) a throwaway instance is
+ * returned so callers can use it unconditionally.
+ */
+export declare function getDevtoolsDockCoordinator(): IDevtoolsDockCoordinator;

package/build/types/devtools/core/ActionDevtools.types.d.ts

@@ -1,7 +1,7 @@
 import type { TActionProgress } from "../../ActionDefinition/Action/Payload/ActionPayload.types";
 import type { IRuntimeCoordinate } from "../../ActionRuntime/RuntimeCoordinate";
 export type TDevtoolsActionStatus = "running" | "success" | "action-error" | "failed" | "aborted";
-export type TDevtoolsPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left" | "dock-bottom" | "dock-top" | "dock-left" | "dock-right";
+export type TDevtoolsPosition = "dock-bottom" | "dock-top" | "dock-left" | "dock-right";
 export interface IDevtoolsRouteItem {
     runtime: IRuntimeCoordinate;
     handlerType: "local" | "external";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice-code/action",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "private": false,
   "type": "module",
   "exports": {
@@ -44,9 +44,9 @@
     "build-types": "tsc --project tsconfig.build.json"
   },
   "dependencies": {
-    "@nice-code/common-errors": "0.3.2",
-    "@nice-code/error": "0.3.2",
-    "@nice-code/util": "0.3.2",
+    "@nice-code/common-errors": "0.4.0",
+    "@nice-code/error": "0.4.0",
+    "@nice-code/util": "0.4.0",
     "@standard-schema/spec": "^1.1.0",
     "@tanstack/react-virtual": "^3.13.26",
     "http-status-codes": "^2.3.0",
@@ -62,7 +62,7 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.100.3",
-    "react": ">=18",
+    "react": ">=19",
     "valibot": "^1.3.1"
   }
 }