@flowgram.ai/panel-manager-plugin 1.0.7 → 1.0.9

package/.rush/temp/chunked-rush-logs/panel-manager-plugin.build.chunks.jsonl

@@ -9,13 +9,13 @@
 {"kind":"O","text":"\u001b[34mCLI\u001b[39m Target: es2020\n"}
 {"kind":"O","text":"\u001b[34mCJS\u001b[39m Build start\n"}
 {"kind":"O","text":"\u001b[34mESM\u001b[39m Build start\n"}
-{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js     \u001b[22m\u001b[32m21.17 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js.map \u001b[22m\u001b[32m35.97 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mCJS\u001b[39m ⚡️ Build success in 108ms\n"}
-{"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js     \u001b[22m\u001b[32m18.44 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js.map \u001b[22m\u001b[32m35.39 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mESM\u001b[39m ⚡️ Build success in 112ms\n"}
+{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js     \u001b[22m\u001b[32m20.95 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js.map \u001b[22m\u001b[32m36.67 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mCJS\u001b[39m ⚡️ Build success in 113ms\n"}
+{"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js     \u001b[22m\u001b[32m18.67 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js.map \u001b[22m\u001b[32m36.00 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mESM\u001b[39m ⚡️ Build success in 116ms\n"}
 {"kind":"O","text":"\u001b[34mDTS\u001b[39m Build start\n"}
-{"kind":"O","text":"\u001b[32mDTS\u001b[39m ⚡️ Build success in 3610ms\n"}
-{"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.ts  \u001b[22m\u001b[32m5.10 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.mts \u001b[22m\u001b[32m5.10 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mDTS\u001b[39m ⚡️ Build success in 3915ms\n"}
+{"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.ts  \u001b[22m\u001b[32m5.07 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.mts \u001b[22m\u001b[32m5.07 KB\u001b[39m\n"}

package/.rush/temp/package-deps_build.json

@@ -1,14 +1,14 @@
 {
   "files": {
-    "packages/plugins/panel-manager-plugin/.rush/temp/shrinkwrap-deps.json": "75dbadf340a3fdaa60befb137b12769e13b91282",
+    "packages/plugins/panel-manager-plugin/.rush/temp/shrinkwrap-deps.json": "1159c94db4b09a7f05036036ab86866fcd6196bd",
     "packages/plugins/panel-manager-plugin/eslint.config.js": "fc090051ebd4baacf22d6966ed4de1f236b9a73a",
-    "packages/plugins/panel-manager-plugin/package.json": "cb0835394b1db5cfb167091ca40438cdbc571dbd",
+    "packages/plugins/panel-manager-plugin/package.json": "bf842678645faac40a291cd3e30b92786e2fee97",
     "packages/plugins/panel-manager-plugin/src/components/panel-layer/css.ts": "2cae7373567f0f293c9c802ea67515f1d9047d89",
-    "packages/plugins/panel-manager-plugin/src/components/panel-layer/docked-panel-layer.tsx": "232cd8edbac3a8d8b17b2a5a07c463e57ee8f5c8",
+    "packages/plugins/panel-manager-plugin/src/components/panel-layer/docked-panel-layer.tsx": "bf8cea4403f5eb597de6213a4db0c993b7408b77",
     "packages/plugins/panel-manager-plugin/src/components/panel-layer/index.ts": "4c78ec72d6acde8f2192ac956436a870cccc583f",
-    "packages/plugins/panel-manager-plugin/src/components/panel-layer/panel-layer.tsx": "d5a9464fa66a9819fa1b0055071990532fd819d9",
-    "packages/plugins/panel-manager-plugin/src/components/panel-layer/panel.tsx": "b3d3567c664b32ef578620e6d60a97a44ea91bdc",
-    "packages/plugins/panel-manager-plugin/src/components/resize-bar/index.tsx": "7712eb70c08b0826ac8940be64582287d279d564",
+    "packages/plugins/panel-manager-plugin/src/components/panel-layer/panel-layer.tsx": "36a22cbf570308e52c003070c88a16f503351605",
+    "packages/plugins/panel-manager-plugin/src/components/panel-layer/panel.tsx": "11c2d13d704c5532d146e84fca69b1bf7c2e113d",
+    "packages/plugins/panel-manager-plugin/src/components/resize-bar/index.tsx": "aaa6639bb92d39c12e6fce69ab8146172855c74f",
     "packages/plugins/panel-manager-plugin/src/contexts.ts": "21e828a3c16a060f92c62c52dd978224f2ab7436",
     "packages/plugins/panel-manager-plugin/src/create-panel-manager-plugin.ts": "660998495abbabc247370c3525e0009415e6f752",
     "packages/plugins/panel-manager-plugin/src/hooks/use-global-css.ts": "be94fd4759d691bdcc5eb8a03f90995956ce4bf0",
@@ -23,7 +23,7 @@
     "packages/plugins/panel-manager-plugin/src/services/panel-restore.ts": "c3151b5281cc35efb262654f8500556a23811829",
     "packages/plugins/panel-manager-plugin/src/types.ts": "938145cc6b7205d01cfb6a26c0be7da21127eaca",
     "packages/plugins/panel-manager-plugin/src/utils.ts": "4ceb7654f72dad582be35d0c48297bdc3a54b0e3",
-    "packages/plugins/panel-manager-plugin/tsconfig.json": "4b7a4f197dc4f9c62c2938fb3b77780944ad7675"
+    "packages/plugins/panel-manager-plugin/tsconfig.json": "b8da61b7f031c954356d17b82669e982f82df5c5"
   },
   "arguments": "npm run build:fast -- --dts-resolve "
 }

package/.rush/temp/shrinkwrap-deps.json

@@ -1,5 +1,5 @@
 {
-  "../../packages/plugins/panel-manager-plugin": "../../packages/plugins/panel-manager-plugin:6NvHMKeGiIW3XkE78MP0g5Cr6dz80O0NqneafG0tgHE=:",
+  "../../packages/plugins/panel-manager-plugin": "../../packages/plugins/panel-manager-plugin:YGT/P/SxRNsJXTKUnQ6DrkNHtkbUdtbq5DyzfrvJK6c=:",
   "@esbuild/aix-ppc64@0.25.9": "sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==",
   "@esbuild/android-arm64@0.25.9": "sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==",
   "@esbuild/android-arm@0.25.9": "sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==",
@@ -96,7 +96,7 @@
   "is-fullwidth-code-point@3.0.0": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
   "isexe@2.0.0": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
   "jackspeak@3.4.3": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-  "jiti@2.5.1": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
+  "jiti@2.6.1": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
   "joycon@3.1.1": "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==",
   "js-tokens@4.0.0": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
   "lilconfig@3.1.3": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
@@ -122,7 +122,7 @@
   "picomatch@4.0.3": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
   "pirates@4.0.7": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
   "pkg-types@1.3.1": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
-  "postcss-load-config@6.0.1(jiti@2.5.1)(postcss@8.5.6)(tsx@4.19.4)(yaml@2.8.1)": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+  "postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.6)(tsx@4.19.4)(yaml@2.8.1)": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
   "postcss@8.5.6": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
   "punycode@2.3.1": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
   "react-dom@18.3.1(react@18.3.1)": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
@@ -151,7 +151,7 @@
   "tr46@1.0.1": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
   "tree-kill@1.2.2": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
   "ts-interface-checker@0.1.13": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-  "tsup@8.5.0(jiti@2.5.1)(postcss@8.5.6)(tsx@4.19.4)(typescript@5.9.2)(yaml@2.8.1)": "sha512-VmBp77lWNQq6PfuMqCHD3xWl22vEoWsKajkF8t+yMBawlUS8JzEI+vOVMeuNZIuMML8qXRizFKi9oD5glKQVcQ==",
+  "tsup@8.5.0(jiti@2.6.1)(postcss@8.5.6)(tsx@4.19.4)(typescript@5.9.2)(yaml@2.8.1)": "sha512-VmBp77lWNQq6PfuMqCHD3xWl22vEoWsKajkF8t+yMBawlUS8JzEI+vOVMeuNZIuMML8qXRizFKi9oD5glKQVcQ==",
   "tsx@4.19.4": "sha512-gK5GVzDkJK1SI1zwHf32Mqxf2tSJkNx+eYcNly5+nHvWqXUJYUkWBQtKauoESz3ymezAI++ZwT855x5p5eop+Q==",
   "typescript@5.9.2": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
   "ufo@1.6.1": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
@@ -162,5 +162,5 @@
   "wrap-ansi@7.0.0": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
   "wrap-ansi@8.1.0": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
   "yaml@2.8.1": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
-  "zustand@5.0.8(@types/react@18.3.24)(immer@10.1.3)(react@18.3.1)(use-sync-external-store@1.6.0(react@18.3.1))": "sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw=="
+  "zustand@4.5.7(@types/react@18.3.24)(immer@10.1.3)(react@18.3.1)": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw=="
 }

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@flowgram.ai/panel-manager-plugin",
   "entries": [
     {
-      "version": "1.0.7",
-      "tag": "@flowgram.ai/panel-manager-plugin_v1.0.7",
-      "date": "Tue, 20 Jan 2026 02:58:00 GMT",
+      "version": "1.0.9",
+      "tag": "@flowgram.ai/panel-manager-plugin_v1.0.9",
+      "date": "Mon, 23 Mar 2026 03:39:05 GMT",
       "comments": {}
     }
   ]

package/CHANGELOG.md

@@ -1,9 +1,9 @@
 # Change Log - @flowgram.ai/panel-manager-plugin
 
-This log was last generated on Tue, 20 Jan 2026 02:58:00 GMT and should not be manually modified.
+This log was last generated on Mon, 23 Mar 2026 03:39:05 GMT and should not be manually modified.
 
-## 1.0.7
-Tue, 20 Jan 2026 02:58:00 GMT
+## 1.0.9
+Mon, 23 Mar 2026 03:39:05 GMT
 
 _Initial release_
 

package/dist/esm/index.js

@@ -36,14 +36,14 @@ PanelRestoreImpl = __decorateClass([
 ], PanelRestoreImpl);
 
 // src/components/resize-bar/index.tsx
-import { useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+var { useRef, useState } = React;
 var ResizeBar = ({ onResize, size, direction }) => {
   const currentPoint = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const isVertical = direction === "vertical";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       onMouseDown: (e) => {
@@ -86,23 +86,23 @@ var ResizeBar = ({ onResize, size, direction }) => {
           marginTop: -5,
           height: 10
         }
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            ...isVertical ? {
-              width: 3,
-              height: "100%"
-            } : {
-              height: 3,
-              width: "100%"
-            },
-            backgroundColor: isDragging || isHovered ? "var(--g-playground-line)" : "transparent"
-          }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          ...isVertical ? {
+            width: 3,
+            height: "100%"
+          } : {
+            height: 3,
+            width: "100%"
+          },
+          backgroundColor: isDragging || isHovered ? "var(--g-playground-line)" : "transparent"
         }
-      )
-    }
+      }
+    )
   );
 };
 
@@ -359,12 +359,13 @@ PanelManager = __decorateClass([
 
 // src/services/panel-layer.ts
 import ReactDOM from "react-dom";
-import { createElement } from "react";
+import { createElement as createElement5 } from "react";
 import { injectable as injectable4, inject as inject3 } from "inversify";
 import { domUtils, Disposable } from "@flowgram.ai/utils";
 import { Layer, PluginContext } from "@flowgram.ai/core";
 
 // src/components/panel-layer/panel-layer.tsx
+import * as React3 from "react";
 import clsx2 from "clsx";
 
 // src/hooks/use-global-css.ts
@@ -385,7 +386,7 @@ var useGlobalCSS = ({ cssText, id, cleanup }) => {
 };
 
 // src/components/panel-layer/panel.tsx
-import { useEffect as useEffect2, startTransition, useState as useState2, useRef as useRef2 } from "react";
+import * as React2 from "react";
 import { clsx } from "clsx";
 
 // src/hooks/use-panel-manager.ts
@@ -409,7 +410,7 @@ var usePanelStore = (selector) => {
 };
 
 // src/components/panel-layer/panel.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var { useEffect: useEffect2, useState: useState2, useRef: useRef2 } = React2;
 var PanelItem = ({ panel, hidden }) => {
   const panelManager = usePanelManager();
   const ref = useRef2(null);
@@ -452,44 +453,51 @@ var PanelItem = ({ panel, hidden }) => {
     observer.observe(layer);
     return () => observer.disconnect();
   }, [fullscreen]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ React2.createElement(
     "div",
     {
       className: clsx(
         "gedit-flow-panel-wrap",
         isHorizontal ? "panel-horizontal" : "panel-vertical"
       ),
+      key: panel.id,
       ref,
       style: {
         display: hidden ? "none" : "block",
         ...panel.factory.style,
         ...panel.config.style,
         ...sizeStyle
-      },
-      children: [
-        panel.resizable && panelManager.config.resizeBarRender({
-          size,
-          direction: isHorizontal ? "vertical" : "horizontal",
-          onResize: handleResize
-        }),
-        panel.renderer
-      ]
+      }
     },
-    panel.id
+    panel.resizable && panelManager.config.resizeBarRender({
+      size,
+      direction: isHorizontal ? "vertical" : "horizontal",
+      onResize: handleResize
+    }),
+    panel.renderer
   );
 };
 var PanelArea = ({ area }) => {
   const panelManager = usePanelManager();
   const [panels, setPanels] = useState2(panelManager.getPanels(area));
   useEffect2(() => {
+    let pending;
+    function startTransition(fn) {
+      clearTimeout(pending);
+      pending = setTimeout(fn, 0);
+    }
     const dispose = panelManager.onPanelsChange(() => {
-      startTransition(() => {
-        setPanels(panelManager.getPanels(area));
-      });
+      const r = { ...React2 };
+      const start = r["startTransition"];
+      if (typeof start === "function") {
+        start(() => setPanels(panelManager.getPanels(area)));
+      } else {
+        startTransition(() => setPanels(panelManager.getPanels(area)));
+      }
     });
     return () => dispose.dispose();
   }, []);
-  return /* @__PURE__ */ jsx2(Fragment, { children: panels.map((panel) => /* @__PURE__ */ jsx2(PanelContext.Provider, { value: panel, children: /* @__PURE__ */ jsx2(PanelItem, { panel, hidden: panel.keepDOM && !panel.visible }) }, panel.id)) });
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, panels.map((panel) => /* @__PURE__ */ React2.createElement(PanelContext.Provider, { value: panel, key: panel.id }, /* @__PURE__ */ React2.createElement(PanelItem, { panel, hidden: panel.keepDOM && !panel.visible }))));
 };
 
 // src/components/panel-layer/css.ts
@@ -558,7 +566,6 @@ var globalCSS = `
 `;
 
 // src/components/panel-layer/panel-layer.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var PanelLayer = ({
   mode = "floating",
   className,
@@ -569,7 +576,7 @@ var PanelLayer = ({
     cssText: globalCSS,
     id: "flow-panel-layer-css"
   });
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ React3.createElement(
     "div",
     {
       className: clsx2(
@@ -578,21 +585,16 @@ var PanelLayer = ({
         mode === "floating" && "gedit-flow-panel-layer-wrap-floating",
         className
       ),
-      style,
-      children: [
-        /* @__PURE__ */ jsxs2("div", { className: "gedit-flow-panel-left-area", children: [
-          /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-main-area", children }),
-          /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-bottom-area", children: /* @__PURE__ */ jsx3(PanelArea, { area: mode === "docked" ? "docked-bottom" : "bottom" }) })
-        ] }),
-        /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-right-area", children: /* @__PURE__ */ jsx3(PanelArea, { area: mode === "docked" ? "docked-right" : "right" }) })
-      ]
-    }
+      style
+    },
+    /* @__PURE__ */ React3.createElement("div", { className: "gedit-flow-panel-left-area" }, /* @__PURE__ */ React3.createElement("div", { className: "gedit-flow-panel-main-area" }, children), /* @__PURE__ */ React3.createElement("div", { className: "gedit-flow-panel-bottom-area" }, /* @__PURE__ */ React3.createElement(PanelArea, { area: mode === "docked" ? "docked-bottom" : "bottom" }))),
+    /* @__PURE__ */ React3.createElement("div", { className: "gedit-flow-panel-right-area" }, /* @__PURE__ */ React3.createElement(PanelArea, { area: mode === "docked" ? "docked-right" : "right" }))
   );
 };
 
 // src/components/panel-layer/docked-panel-layer.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var DockedPanelLayer = (props) => /* @__PURE__ */ jsx4(PanelLayer, { mode: "docked", ...props });
+import * as React4 from "react";
+var DockedPanelLayer = (props) => /* @__PURE__ */ React4.createElement(PanelLayer, { mode: "docked", ...props });
 
 // src/services/panel-layer.ts
 var PanelLayer2 = class extends Layer {
@@ -622,7 +624,7 @@ var PanelLayer2 = class extends Layer {
   render() {
     if (!this.layout) {
       const { children, ...layoutProps } = this.panelConfig.layerProps;
-      this.layout = createElement(PanelLayer, layoutProps, children);
+      this.layout = createElement5(PanelLayer, layoutProps, children);
     }
     return ReactDOM.createPortal(this.layout, this.panelRoot);
   }

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/create-panel-manager-plugin.ts","../../src/services/panel-factory.ts","../../src/services/panel-restore.ts","../../src/components/resize-bar/index.tsx","../../src/services/panel-config.ts","../../src/utils.ts","../../src/services/panel-manager.ts","../../src/services/panel-layer.ts","../../src/components/panel-layer/panel-layer.tsx","../../src/hooks/use-global-css.ts","../../src/components/panel-layer/panel.tsx","../../src/hooks/use-panel-manager.ts","../../src/hooks/use-panel.ts","../../src/contexts.ts","../../src/components/panel-layer/css.ts","../../src/components/panel-layer/docked-panel-layer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport {\n  PanelEntityFactory,\n  PanelEntity,\n  PanelEntityFactoryConstant,\n  PanelEntityConfigConstant,\n} from './services/panel-factory';\nimport { defineConfig } from './services/panel-config';\nimport {\n  PanelManager,\n  PanelManagerConfig,\n  PanelLayer,\n  PanelRestore,\n  PanelRestoreImpl,\n} from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n  onBind: ({ bind }, opt) => {\n    bind(PanelManager).to(PanelManager).inSingletonScope();\n    bind(PanelRestore).to(PanelRestoreImpl).inSingletonScope();\n    bind(PanelManagerConfig).toConstantValue(defineConfig(opt));\n    bind(PanelEntityFactory).toFactory(\n      (context) =>\n        ({\n          factory,\n          config,\n        }: {\n          factory: PanelEntityFactoryConstant;\n          config: PanelEntityConfigConstant;\n        }) => {\n          const container = context.container.createChild();\n          container.bind(PanelEntityFactoryConstant).toConstantValue(factory);\n          container.bind(PanelEntityConfigConstant).toConstantValue(config);\n          const panel = container.resolve(PanelEntity);\n          panel.init();\n          return panel;\n        }\n    );\n  },\n  onInit(ctx) {\n    ctx.playground.registerLayer(PanelLayer);\n    const panelManager = ctx.container.get<PanelManager>(PanelManager);\n    panelManager.init();\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createStore, StoreApi } from 'zustand/vanilla';\nimport { nanoid } from 'nanoid';\nimport { inject, injectable } from 'inversify';\n\nimport type { PanelFactory, PanelEntityConfig, Area } from '../types';\nimport { PanelRestore } from './panel-restore';\nimport { PanelManagerConfig } from './panel-config';\nimport { merge } from '../utils';\n\nexport const PanelEntityFactory = Symbol('PanelEntityFactory');\nexport type PanelEntityFactory = (options: {\n  factory: PanelEntityFactoryConstant;\n  config: PanelEntityConfigConstant;\n}) => PanelEntity;\n\nexport const PanelEntityFactoryConstant = Symbol('PanelEntityFactoryConstant');\nexport type PanelEntityFactoryConstant = PanelFactory<any>;\nexport const PanelEntityConfigConstant = Symbol('PanelEntityConfigConstant');\nexport type PanelEntityConfigConstant = PanelEntityConfig<any> & {\n  area: Area;\n};\n\nconst PANEL_SIZE_DEFAULT = 400;\n\nexport interface PanelEntityState {\n  size: number;\n  fullscreen: boolean;\n  visible: boolean;\n}\n\n@injectable()\nexport class PanelEntity {\n  @inject(PanelRestore) restore: PanelRestore;\n\n  /** 面板工厂 */\n  @inject(PanelEntityFactoryConstant) public factory: PanelEntityFactoryConstant;\n\n  @inject(PanelEntityConfigConstant) public config: PanelEntityConfigConstant;\n\n  @inject(PanelManagerConfig) readonly globalConfig: PanelManagerConfig;\n\n  private initialized = false;\n\n  /** 实例唯一标识 */\n  id: string = nanoid();\n\n  /** 渲染缓存 */\n  node: React.ReactNode = null;\n\n  store: StoreApi<PanelEntityState>;\n\n  get area() {\n    return this.config.area;\n  }\n\n  get mode() {\n    return this.config.area.startsWith('docked') ? 'docked' : 'floating';\n  }\n\n  get key() {\n    return this.factory.key;\n  }\n\n  get renderer() {\n    if (!this.node) {\n      this.node = this.factory.render(this.config.props);\n    }\n    return this.node;\n  }\n\n  get fullscreen() {\n    return this.store.getState().fullscreen;\n  }\n\n  set fullscreen(next: boolean) {\n    this.store.setState({ fullscreen: next });\n  }\n\n  get resizable() {\n    if (this.fullscreen) {\n      return false;\n    }\n    return this.factory.resize !== undefined ? this.factory.resize : this.globalConfig.autoResize;\n  }\n\n  get keepDOM() {\n    return this.factory.keepDOM;\n  }\n\n  get visible() {\n    return this.store.getState().visible;\n  }\n\n  set visible(next: boolean) {\n    this.store.setState({ visible: next });\n  }\n\n  get layer() {\n    return document.querySelector(\n      this.mode ? '.gedit-flow-panel-layer-wrap-docked' : '.gedit-flow-panel-layer-wrap-floating'\n    );\n  }\n\n  init() {\n    if (this.initialized) {\n      return;\n    }\n    this.initialized = true;\n    const cache = this.restore.restore<PanelEntityState>(this.key);\n\n    const initialState = merge<PanelEntityState>(\n      {\n        size: this.config.defaultSize,\n        fullscreen: this.config.fullscreen,\n      },\n      cache ? cache : {},\n      {\n        size: this.factory.defaultSize || PANEL_SIZE_DEFAULT,\n        fullscreen: this.factory.fullscreen || false,\n        ...(this.factory.keepDOM ? { visible: true } : {}),\n      }\n    );\n\n    this.store = createStore<PanelEntityState>(() => initialState);\n  }\n\n  mergeState() {}\n\n  dispose() {\n    this.restore.store(this.key, this.store.getState());\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable } from 'inversify';\n\nexport const PanelRestore = Symbol('PanelRestore');\nexport interface PanelRestore {\n  store: (k: string, v: any) => void;\n  restore: <T>(k: string) => T | undefined;\n}\n\n@injectable()\nexport class PanelRestoreImpl implements PanelRestore {\n  map = new Map<string, any>();\n\n  store(k: string, v: any) {\n    this.map.set(k, v);\n  }\n\n  restore<T>(k: string): T | undefined {\n    return this.map.get(k) as T;\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useRef, useState } from 'react';\n\ninterface Props {\n  size: number;\n  direction?: 'vertical' | 'horizontal';\n  onResize: (w: number) => void;\n}\n\nexport const ResizeBar: React.FC<Props> = ({ onResize, size, direction }) => {\n  const currentPoint = useRef<null | number>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const isVertical = direction === 'vertical';\n\n  return (\n    <div\n      onMouseDown={(e) => {\n        currentPoint.current = isVertical ? e.clientX : e.clientY;\n        e.stopPropagation();\n        e.preventDefault();\n        setIsDragging(true);\n        const mouseUp = () => {\n          currentPoint.current = null;\n          document.body.removeEventListener('mouseup', mouseUp);\n          document.body.removeEventListener('mousemove', mouseMove);\n          setIsDragging(false);\n        };\n        const mouseMove = (e: MouseEvent) => {\n          const delta = currentPoint.current! - (isVertical ? e.clientX : e.clientY);\n          onResize(size + delta);\n        };\n        document.body.addEventListener('mouseup', mouseUp);\n        document.body.addEventListener('mousemove', mouseMove);\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      style={{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        zIndex: 999,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        pointerEvents: 'auto',\n        ...(isVertical\n          ? {\n              cursor: 'ew-resize',\n              height: '100%',\n              marginLeft: -5,\n              width: 10,\n            }\n          : {\n              cursor: 'ns-resize',\n              width: '100%',\n              marginTop: -5,\n              height: 10,\n            }),\n      }}\n    >\n      <div\n        style={{\n          ...(isVertical\n            ? {\n                width: 3,\n                height: '100%',\n              }\n            : {\n                height: 3,\n                width: '100%',\n              }),\n          backgroundColor: isDragging || isHovered ? 'var(--g-playground-line)' : 'transparent',\n        }}\n      />\n    </div>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PluginContext } from '@flowgram.ai/core';\n\nimport type { PanelFactory, PanelConfig } from '../types';\nimport { ResizeBar } from '../components/resize-bar';\nimport type { PanelLayerProps } from '../components/panel-layer';\n\nexport interface PanelManagerConfig {\n  factories: PanelFactory<any>[];\n  right: PanelConfig;\n  bottom: PanelConfig;\n  dockedRight: PanelConfig;\n  dockedBottom: PanelConfig;\n  /** Resizable, and multi-panel options mutually exclusive */\n  autoResize: boolean;\n  layerProps: PanelLayerProps;\n  resizeBarRender: ({\n    size,\n  }: {\n    size: number;\n    direction?: 'vertical' | 'horizontal';\n    onResize: (size: number) => void;\n  }) => React.ReactNode;\n  getPopupContainer: (ctx: PluginContext) => HTMLElement; // default playground.node.parentElement\n}\n\nexport const PanelManagerConfig = Symbol('PanelManagerConfig');\n\nexport const defineConfig = (config: Partial<PanelManagerConfig>) => {\n  const defaultConfig: PanelManagerConfig = {\n    right: {\n      max: 1,\n    },\n    bottom: {\n      max: 1,\n    },\n    dockedRight: {\n      max: 1,\n    },\n    dockedBottom: {\n      max: 1,\n    },\n    factories: [],\n    autoResize: true,\n    layerProps: {},\n    resizeBarRender: ResizeBar,\n    getPopupContainer: (ctx: PluginContext) => ctx.playground.node.parentNode as HTMLElement,\n  };\n  return {\n    ...defaultConfig,\n    ...config,\n  };\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const merge = <T>(...objs: Partial<T>[]) => {\n  const result: any = {};\n\n  for (const obj of objs) {\n    if (!obj || typeof obj !== 'object') continue;\n\n    for (const key of Object.keys(obj)) {\n      const value = (obj as any)[key];\n\n      if (result[key] === undefined) {\n        result[key] = value;\n      }\n    }\n  }\n\n  return result as T;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelEntityConfig, PanelFactory } from '../types';\nimport { PanelEntity, PanelEntityFactory } from './panel-factory';\n\n@injectable()\nexport class PanelManager {\n  @inject(PanelManagerConfig) readonly config: PanelManagerConfig;\n\n  @inject(PanelEntityFactory) readonly createPanel: PanelEntityFactory;\n\n  readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n  private panels = new Map<string, PanelEntity>();\n\n  private onPanelsChangeEvent = new Emitter<void>();\n\n  public onPanelsChange = this.onPanelsChangeEvent.event;\n\n  init() {\n    this.config.factories.forEach((factory) => this.register(factory));\n  }\n\n  /** registry panel factory */\n  register<T extends any>(factory: PanelFactory<T>) {\n    this.panelRegistry.set(factory.key, factory);\n  }\n\n  /** open panel */\n  public open(key: string, area: Area = 'right', options?: PanelEntityConfig) {\n    const factory = this.panelRegistry.get(key);\n    if (!factory) {\n      return;\n    }\n\n    const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);\n\n    if (factory.keepDOM && sameKeyPanels.length) {\n      const [panel] = sameKeyPanels;\n      // move to last\n      this.panels.delete(panel.id);\n      this.panels.set(panel.id, panel);\n      panel.visible = true;\n    } else {\n      if (!factory.allowDuplicates && sameKeyPanels.length) {\n        sameKeyPanels.forEach((p) => this.remove(p.id));\n      }\n      const panel = this.createPanel({\n        factory,\n        config: {\n          area,\n          ...options,\n        },\n      });\n\n      this.panels.set(panel.id, panel);\n    }\n\n    this.trim(area);\n    this.onPanelsChangeEvent.fire();\n  }\n\n  /** close panel */\n  public close(key?: string) {\n    const panels = this.getPanels();\n    const closedPanels = key ? panels.filter((p) => p.key === key) : panels;\n    closedPanels.forEach((panel) => {\n      this.remove(panel.id);\n    });\n    this.onPanelsChangeEvent.fire();\n  }\n\n  private trim(area: Area) {\n    /** 1. general panel; 2. keepDOM visible panel */\n    const panels = this.getPanels(area).filter((p) => !p.keepDOM || p.visible);\n    const areaConfig = this.getAreaConfig(area);\n    while (panels.length > areaConfig.max) {\n      const removed = panels.shift();\n      if (removed) {\n        this.remove(removed.id);\n      }\n    }\n  }\n\n  private remove(id: string) {\n    const panel = this.panels.get(id);\n    if (!panel) {\n      return;\n    }\n    if (panel.keepDOM) {\n      panel.visible = false;\n    } else {\n      panel.dispose();\n      this.panels.delete(id);\n    }\n  }\n\n  getPanels(area?: Area) {\n    const panels: PanelEntity[] = [];\n    this.panels.forEach((panel) => {\n      if (!area || panel.area === area) {\n        panels.push(panel);\n      }\n    });\n    return panels;\n  }\n\n  getAreaConfig(area: Area) {\n    switch (area) {\n      case 'docked-bottom':\n        return this.config.dockedBottom;\n      case 'docked-right':\n        return this.config.dockedRight;\n      case 'bottom':\n        return this.config.bottom;\n      case 'right':\n      default:\n        return this.config.right;\n    }\n  }\n\n  dispose() {\n    this.onPanelsChangeEvent.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport ReactDOM from 'react-dom';\nimport { createElement } from 'react';\n\nimport { injectable, inject } from 'inversify';\nimport { domUtils, Disposable } from '@flowgram.ai/utils';\nimport { Layer, PluginContext } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\nimport { PanelManagerConfig } from './panel-config';\n\n@injectable()\nexport class PanelLayer extends Layer {\n  @inject(PanelManagerConfig) private readonly panelConfig: PanelManagerConfig;\n\n  @inject(PluginContext) private readonly pluginContext: PluginContext;\n\n  readonly panelRoot = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n  layout: JSX.Element | null = null;\n\n  onReady(): void {\n    this.panelConfig.getPopupContainer(this.pluginContext).appendChild(this.panelRoot);\n    this.toDispose.push(\n      Disposable.create(() => {\n        // Remove from PopupContainer\n        this.panelRoot.remove();\n      })\n    );\n    const commonStyle = {\n      pointerEvents: 'none',\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      left: 0,\n      top: 0,\n      zIndex: 100,\n    };\n    domUtils.setStyle(this.panelRoot, commonStyle);\n  }\n\n  render(): JSX.Element {\n    if (!this.layout) {\n      const { children, ...layoutProps } = this.panelConfig.layerProps;\n      this.layout = createElement(PanelLayerComp, layoutProps, children);\n    }\n    return ReactDOM.createPortal(this.layout, this.panelRoot);\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport clsx from 'clsx';\n\nimport { useGlobalCSS } from '../../hooks/use-global-css';\nimport { PanelArea } from './panel';\nimport { globalCSS } from './css';\n\nexport type PanelLayerProps = React.PropsWithChildren<{\n  /** 模式：悬浮｜挤压 */\n  mode?: 'floating' | 'docked';\n  className?: string;\n  style?: React.CSSProperties;\n}>;\n\nexport const PanelLayer: React.FC<PanelLayerProps> = ({\n  mode = 'floating',\n  className,\n  style,\n  children,\n}) => {\n  useGlobalCSS({\n    cssText: globalCSS,\n    id: 'flow-panel-layer-css',\n  });\n\n  return (\n    <div\n      className={clsx(\n        'gedit-flow-panel-layer-wrap',\n        mode === 'docked' && 'gedit-flow-panel-layer-wrap-docked',\n        mode === 'floating' && 'gedit-flow-panel-layer-wrap-floating',\n        className\n      )}\n      style={style}\n    >\n      <div className=\"gedit-flow-panel-left-area\">\n        <div className=\"gedit-flow-panel-main-area\">{children}</div>\n        <div className=\"gedit-flow-panel-bottom-area\">\n          <PanelArea area={mode === 'docked' ? 'docked-bottom' : 'bottom'} />\n        </div>\n      </div>\n      <div className=\"gedit-flow-panel-right-area\">\n        <PanelArea area={mode === 'docked' ? 'docked-right' : 'right'} />\n      </div>\n    </div>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect } from 'react';\n\ninterface UseGlobalCSSOptions {\n  cssText: string;\n  id: string;\n  cleanup?: boolean;\n}\n\nexport const useGlobalCSS = ({ cssText, id, cleanup }: UseGlobalCSSOptions) => {\n  useEffect(() => {\n    /** SSR safe */\n    if (typeof document === 'undefined') return;\n\n    if (document.getElementById(id)) return;\n\n    const style = document.createElement('style');\n    style.id = id;\n    style.textContent = cssText;\n    document.head.appendChild(style);\n\n    return () => {\n      const existing = document.getElementById(id);\n      if (existing && cleanup) existing.remove();\n    };\n  }, [id]);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect, startTransition, useState, useRef } from 'react';\n\nimport { clsx } from 'clsx';\n\nimport { Area } from '../../types';\nimport { PanelEntity } from '../../services/panel-factory';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { usePanelStore } from '../../hooks/use-panel';\nimport { PanelContext } from '../../contexts';\n\nconst PanelItem: React.FC<{ panel: PanelEntity; hidden?: boolean }> = ({ panel, hidden }) => {\n  const panelManager = usePanelManager();\n  const ref = useRef<HTMLDivElement>(null);\n\n  const isHorizontal = ['right', 'docked-right'].includes(panel.area);\n\n  const { size, fullscreen } = usePanelStore((s) => ({\n    size: s.size,\n    fullscreen: s.fullscreen,\n  }));\n\n  const [layerSize, setLayerSize] = useState(size);\n\n  const currentSize = fullscreen ? layerSize : size;\n\n  const sizeStyle = isHorizontal ? { width: currentSize } : { height: currentSize };\n  const handleResize = (next: number) => {\n    let nextSize = next;\n    if (typeof panel.factory.maxSize === 'number' && nextSize > panel.factory.maxSize) {\n      nextSize = panel.factory.maxSize;\n    } else if (typeof panel.factory.minSize === 'number' && nextSize < panel.factory.minSize) {\n      nextSize = panel.factory.minSize;\n    }\n    panel.store.setState({ size: nextSize });\n  };\n\n  useEffect(() => {\n    /** The set size may be illegal and needs to be updated according to the real element rendered for the first time. */\n    if (ref.current && !fullscreen) {\n      const { width, height } = ref.current.getBoundingClientRect();\n      const realSize = isHorizontal ? width : height;\n      panel.store.setState({ size: realSize });\n    }\n  }, [fullscreen]);\n\n  useEffect(() => {\n    if (!fullscreen) {\n      return;\n    }\n    const layer = panel.layer;\n    if (!layer) {\n      return;\n    }\n    const observer = new ResizeObserver(([entry]) => {\n      const { width, height } = entry.contentRect;\n      setLayerSize(isHorizontal ? width : height);\n    });\n    observer.observe(layer);\n    return () => observer.disconnect();\n  }, [fullscreen]);\n\n  return (\n    <div\n      className={clsx(\n        'gedit-flow-panel-wrap',\n        isHorizontal ? 'panel-horizontal' : 'panel-vertical'\n      )}\n      key={panel.id}\n      ref={ref}\n      style={{\n        display: hidden ? 'none' : 'block',\n        ...panel.factory.style,\n        ...panel.config.style,\n        ...sizeStyle,\n      }}\n    >\n      {panel.resizable &&\n        panelManager.config.resizeBarRender({\n          size,\n          direction: isHorizontal ? 'vertical' : 'horizontal',\n          onResize: handleResize,\n        })}\n      {panel.renderer}\n    </div>\n  );\n};\n\nexport const PanelArea: React.FC<{ area: Area }> = ({ area }) => {\n  const panelManager = usePanelManager();\n  const [panels, setPanels] = useState(panelManager.getPanels(area));\n\n  useEffect(() => {\n    const dispose = panelManager.onPanelsChange(() => {\n      startTransition(() => {\n        setPanels(panelManager.getPanels(area));\n      });\n    });\n    return () => dispose.dispose();\n  }, []);\n\n  return (\n    <>\n      {panels.map((panel) => (\n        <PanelContext.Provider value={panel} key={panel.id}>\n          <PanelItem panel={panel} hidden={panel.keepDOM && !panel.visible} />\n        </PanelContext.Provider>\n      ))}\n    </>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useService } from '@flowgram.ai/core';\n\nimport { PanelManager } from '../services/panel-manager';\n\nexport const usePanelManager = () => useService<PanelManager>(PanelManager);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useContext } from 'react';\n\nimport { useStoreWithEqualityFn } from 'zustand/traditional';\nimport { shallow } from 'zustand/shallow';\n\nimport { PanelEntityState } from '../services/panel-factory';\nimport { PanelContext } from '../contexts';\n\nexport const usePanel = () => useContext(PanelContext);\n\nexport const usePanelStore = <T>(selector: (s: PanelEntityState) => T) => {\n  const panel = usePanel();\n  return useStoreWithEqualityFn(panel.store, selector, shallow);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createContext } from 'react';\n\nimport type { PanelEntity } from './services/panel-factory';\n\nexport const PanelContext = createContext({} as PanelEntity);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const globalCSS = `\n  .gedit-flow-panel-layer-wrap * {\n    box-sizing: border-box;\n  }\n  .gedit-flow-panel-layer-wrap {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n  .gedit-flow-panel-layer-wrap-docked {\n\n  }\n  .gedit-flow-panel-layer-wrap-floating {\n    pointer-events: none;\n  }\n\n  .gedit-flow-panel-left-area {\n    width: 100%;\n    min-width: 0;\n    flex-grow: 0;\n    flex-shrink: 1;\n    display: flex;\n    flex-direction: column;\n  }\n  .gedit-flow-panel-right-area {\n    height: 100%;\n    flex-grow: 1;\n    flex-shrink: 0;\n    min-width: 0;\n    display: flex;\n    max-width: 100%;\n  }\n\n  .gedit-flow-panel-main-area {\n    position: relative;\n    overflow: hidden;\n    flex-grow: 0;\n    flex-shrink: 1;\n    width: 100%;\n    height: 100%;\n  }\n  .gedit-flow-panel-bottom-area {\n    flex-grow: 1;\n    flex-shrink: 0;\n    width: 100%;\n    min-height: 0;\n  }\n  .gedit-flow-panel-wrap {\n    pointer-events: auto;\n    overflow: auto;\n    position: relative;\n  }\n  .gedit-flow-panel-wrap.panel-horizontal {\n    height: 100%;\n  }\n  .gedit-flow-panel-wrap.panel-vertical {\n    width: 100%;\n  }\n`;\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PanelLayer, PanelLayerProps } from './panel-layer';\n\nexport type DockedPanelLayerProps = Omit<PanelLayerProps, 'mode'>;\n\nexport const DockedPanelLayer: React.FC<DockedPanelLayerProps> = (props) => (\n  <PanelLayer mode=\"docked\" {...props} />\n);\n"],"mappings":"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","names":["injectable","e","injectable","injectable","inject","inject","injectable","injectable","inject","clsx","useEffect","useState","useRef","jsx","useRef","useState","useEffect","jsx","jsxs","clsx","jsx","PanelLayer","inject","injectable","PanelLayer"]}
+{"version":3,"sources":["../../src/create-panel-manager-plugin.ts","../../src/services/panel-factory.ts","../../src/services/panel-restore.ts","../../src/components/resize-bar/index.tsx","../../src/services/panel-config.ts","../../src/utils.ts","../../src/services/panel-manager.ts","../../src/services/panel-layer.ts","../../src/components/panel-layer/panel-layer.tsx","../../src/hooks/use-global-css.ts","../../src/components/panel-layer/panel.tsx","../../src/hooks/use-panel-manager.ts","../../src/hooks/use-panel.ts","../../src/contexts.ts","../../src/components/panel-layer/css.ts","../../src/components/panel-layer/docked-panel-layer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport {\n  PanelEntityFactory,\n  PanelEntity,\n  PanelEntityFactoryConstant,\n  PanelEntityConfigConstant,\n} from './services/panel-factory';\nimport { defineConfig } from './services/panel-config';\nimport {\n  PanelManager,\n  PanelManagerConfig,\n  PanelLayer,\n  PanelRestore,\n  PanelRestoreImpl,\n} from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n  onBind: ({ bind }, opt) => {\n    bind(PanelManager).to(PanelManager).inSingletonScope();\n    bind(PanelRestore).to(PanelRestoreImpl).inSingletonScope();\n    bind(PanelManagerConfig).toConstantValue(defineConfig(opt));\n    bind(PanelEntityFactory).toFactory(\n      (context) =>\n        ({\n          factory,\n          config,\n        }: {\n          factory: PanelEntityFactoryConstant;\n          config: PanelEntityConfigConstant;\n        }) => {\n          const container = context.container.createChild();\n          container.bind(PanelEntityFactoryConstant).toConstantValue(factory);\n          container.bind(PanelEntityConfigConstant).toConstantValue(config);\n          const panel = container.resolve(PanelEntity);\n          panel.init();\n          return panel;\n        }\n    );\n  },\n  onInit(ctx) {\n    ctx.playground.registerLayer(PanelLayer);\n    const panelManager = ctx.container.get<PanelManager>(PanelManager);\n    panelManager.init();\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createStore, StoreApi } from 'zustand/vanilla';\nimport { nanoid } from 'nanoid';\nimport { inject, injectable } from 'inversify';\n\nimport type { PanelFactory, PanelEntityConfig, Area } from '../types';\nimport { PanelRestore } from './panel-restore';\nimport { PanelManagerConfig } from './panel-config';\nimport { merge } from '../utils';\n\nexport const PanelEntityFactory = Symbol('PanelEntityFactory');\nexport type PanelEntityFactory = (options: {\n  factory: PanelEntityFactoryConstant;\n  config: PanelEntityConfigConstant;\n}) => PanelEntity;\n\nexport const PanelEntityFactoryConstant = Symbol('PanelEntityFactoryConstant');\nexport type PanelEntityFactoryConstant = PanelFactory<any>;\nexport const PanelEntityConfigConstant = Symbol('PanelEntityConfigConstant');\nexport type PanelEntityConfigConstant = PanelEntityConfig<any> & {\n  area: Area;\n};\n\nconst PANEL_SIZE_DEFAULT = 400;\n\nexport interface PanelEntityState {\n  size: number;\n  fullscreen: boolean;\n  visible: boolean;\n}\n\n@injectable()\nexport class PanelEntity {\n  @inject(PanelRestore) restore: PanelRestore;\n\n  /** 面板工厂 */\n  @inject(PanelEntityFactoryConstant) public factory: PanelEntityFactoryConstant;\n\n  @inject(PanelEntityConfigConstant) public config: PanelEntityConfigConstant;\n\n  @inject(PanelManagerConfig) readonly globalConfig: PanelManagerConfig;\n\n  private initialized = false;\n\n  /** 实例唯一标识 */\n  id: string = nanoid();\n\n  /** 渲染缓存 */\n  node: React.ReactNode = null;\n\n  store: StoreApi<PanelEntityState>;\n\n  get area() {\n    return this.config.area;\n  }\n\n  get mode() {\n    return this.config.area.startsWith('docked') ? 'docked' : 'floating';\n  }\n\n  get key() {\n    return this.factory.key;\n  }\n\n  get renderer() {\n    if (!this.node) {\n      this.node = this.factory.render(this.config.props);\n    }\n    return this.node;\n  }\n\n  get fullscreen() {\n    return this.store.getState().fullscreen;\n  }\n\n  set fullscreen(next: boolean) {\n    this.store.setState({ fullscreen: next });\n  }\n\n  get resizable() {\n    if (this.fullscreen) {\n      return false;\n    }\n    return this.factory.resize !== undefined ? this.factory.resize : this.globalConfig.autoResize;\n  }\n\n  get keepDOM() {\n    return this.factory.keepDOM;\n  }\n\n  get visible() {\n    return this.store.getState().visible;\n  }\n\n  set visible(next: boolean) {\n    this.store.setState({ visible: next });\n  }\n\n  get layer() {\n    return document.querySelector(\n      this.mode ? '.gedit-flow-panel-layer-wrap-docked' : '.gedit-flow-panel-layer-wrap-floating'\n    );\n  }\n\n  init() {\n    if (this.initialized) {\n      return;\n    }\n    this.initialized = true;\n    const cache = this.restore.restore<PanelEntityState>(this.key);\n\n    const initialState = merge<PanelEntityState>(\n      {\n        size: this.config.defaultSize,\n        fullscreen: this.config.fullscreen,\n      },\n      cache ? cache : {},\n      {\n        size: this.factory.defaultSize || PANEL_SIZE_DEFAULT,\n        fullscreen: this.factory.fullscreen || false,\n        ...(this.factory.keepDOM ? { visible: true } : {}),\n      }\n    );\n\n    this.store = createStore<PanelEntityState>(() => initialState);\n  }\n\n  mergeState() {}\n\n  dispose() {\n    this.restore.store(this.key, this.store.getState());\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable } from 'inversify';\n\nexport const PanelRestore = Symbol('PanelRestore');\nexport interface PanelRestore {\n  store: (k: string, v: any) => void;\n  restore: <T>(k: string) => T | undefined;\n}\n\n@injectable()\nexport class PanelRestoreImpl implements PanelRestore {\n  map = new Map<string, any>();\n\n  store(k: string, v: any) {\n    this.map.set(k, v);\n  }\n\n  restore<T>(k: string): T | undefined {\n    return this.map.get(k) as T;\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport * as React from 'react';\n\nconst { useRef, useState } = React;\n\ninterface Props {\n  size: number;\n  direction?: 'vertical' | 'horizontal';\n  onResize: (w: number) => void;\n}\n\nexport const ResizeBar: React.FC<Props> = ({ onResize, size, direction }) => {\n  const currentPoint = useRef<null | number>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const isVertical = direction === 'vertical';\n\n  return (\n    <div\n      onMouseDown={(e) => {\n        currentPoint.current = isVertical ? e.clientX : e.clientY;\n        e.stopPropagation();\n        e.preventDefault();\n        setIsDragging(true);\n        const mouseUp = () => {\n          currentPoint.current = null;\n          document.body.removeEventListener('mouseup', mouseUp);\n          document.body.removeEventListener('mousemove', mouseMove);\n          setIsDragging(false);\n        };\n        const mouseMove = (e: MouseEvent) => {\n          const delta = currentPoint.current! - (isVertical ? e.clientX : e.clientY);\n          onResize(size + delta);\n        };\n        document.body.addEventListener('mouseup', mouseUp);\n        document.body.addEventListener('mousemove', mouseMove);\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      style={{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        zIndex: 999,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        pointerEvents: 'auto',\n        ...(isVertical\n          ? {\n              cursor: 'ew-resize',\n              height: '100%',\n              marginLeft: -5,\n              width: 10,\n            }\n          : {\n              cursor: 'ns-resize',\n              width: '100%',\n              marginTop: -5,\n              height: 10,\n            }),\n      }}\n    >\n      <div\n        style={{\n          ...(isVertical\n            ? {\n                width: 3,\n                height: '100%',\n              }\n            : {\n                height: 3,\n                width: '100%',\n              }),\n          backgroundColor: isDragging || isHovered ? 'var(--g-playground-line)' : 'transparent',\n        }}\n      />\n    </div>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PluginContext } from '@flowgram.ai/core';\n\nimport type { PanelFactory, PanelConfig } from '../types';\nimport { ResizeBar } from '../components/resize-bar';\nimport type { PanelLayerProps } from '../components/panel-layer';\n\nexport interface PanelManagerConfig {\n  factories: PanelFactory<any>[];\n  right: PanelConfig;\n  bottom: PanelConfig;\n  dockedRight: PanelConfig;\n  dockedBottom: PanelConfig;\n  /** Resizable, and multi-panel options mutually exclusive */\n  autoResize: boolean;\n  layerProps: PanelLayerProps;\n  resizeBarRender: ({\n    size,\n  }: {\n    size: number;\n    direction?: 'vertical' | 'horizontal';\n    onResize: (size: number) => void;\n  }) => React.ReactNode;\n  getPopupContainer: (ctx: PluginContext) => HTMLElement; // default playground.node.parentElement\n}\n\nexport const PanelManagerConfig = Symbol('PanelManagerConfig');\n\nexport const defineConfig = (config: Partial<PanelManagerConfig>) => {\n  const defaultConfig: PanelManagerConfig = {\n    right: {\n      max: 1,\n    },\n    bottom: {\n      max: 1,\n    },\n    dockedRight: {\n      max: 1,\n    },\n    dockedBottom: {\n      max: 1,\n    },\n    factories: [],\n    autoResize: true,\n    layerProps: {},\n    resizeBarRender: ResizeBar,\n    getPopupContainer: (ctx: PluginContext) => ctx.playground.node.parentNode as HTMLElement,\n  };\n  return {\n    ...defaultConfig,\n    ...config,\n  };\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const merge = <T>(...objs: Partial<T>[]) => {\n  const result: any = {};\n\n  for (const obj of objs) {\n    if (!obj || typeof obj !== 'object') continue;\n\n    for (const key of Object.keys(obj)) {\n      const value = (obj as any)[key];\n\n      if (result[key] === undefined) {\n        result[key] = value;\n      }\n    }\n  }\n\n  return result as T;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelEntityConfig, PanelFactory } from '../types';\nimport { PanelEntity, PanelEntityFactory } from './panel-factory';\n\n@injectable()\nexport class PanelManager {\n  @inject(PanelManagerConfig) readonly config: PanelManagerConfig;\n\n  @inject(PanelEntityFactory) readonly createPanel: PanelEntityFactory;\n\n  readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n  private panels = new Map<string, PanelEntity>();\n\n  private onPanelsChangeEvent = new Emitter<void>();\n\n  public onPanelsChange = this.onPanelsChangeEvent.event;\n\n  init() {\n    this.config.factories.forEach((factory) => this.register(factory));\n  }\n\n  /** registry panel factory */\n  register<T extends any>(factory: PanelFactory<T>) {\n    this.panelRegistry.set(factory.key, factory);\n  }\n\n  /** open panel */\n  public open(key: string, area: Area = 'right', options?: PanelEntityConfig) {\n    const factory = this.panelRegistry.get(key);\n    if (!factory) {\n      return;\n    }\n\n    const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);\n\n    if (factory.keepDOM && sameKeyPanels.length) {\n      const [panel] = sameKeyPanels;\n      // move to last\n      this.panels.delete(panel.id);\n      this.panels.set(panel.id, panel);\n      panel.visible = true;\n    } else {\n      if (!factory.allowDuplicates && sameKeyPanels.length) {\n        sameKeyPanels.forEach((p) => this.remove(p.id));\n      }\n      const panel = this.createPanel({\n        factory,\n        config: {\n          area,\n          ...options,\n        },\n      });\n\n      this.panels.set(panel.id, panel);\n    }\n\n    this.trim(area);\n    this.onPanelsChangeEvent.fire();\n  }\n\n  /** close panel */\n  public close(key?: string) {\n    const panels = this.getPanels();\n    const closedPanels = key ? panels.filter((p) => p.key === key) : panels;\n    closedPanels.forEach((panel) => {\n      this.remove(panel.id);\n    });\n    this.onPanelsChangeEvent.fire();\n  }\n\n  private trim(area: Area) {\n    /** 1. general panel; 2. keepDOM visible panel */\n    const panels = this.getPanels(area).filter((p) => !p.keepDOM || p.visible);\n    const areaConfig = this.getAreaConfig(area);\n    while (panels.length > areaConfig.max) {\n      const removed = panels.shift();\n      if (removed) {\n        this.remove(removed.id);\n      }\n    }\n  }\n\n  private remove(id: string) {\n    const panel = this.panels.get(id);\n    if (!panel) {\n      return;\n    }\n    if (panel.keepDOM) {\n      panel.visible = false;\n    } else {\n      panel.dispose();\n      this.panels.delete(id);\n    }\n  }\n\n  getPanels(area?: Area) {\n    const panels: PanelEntity[] = [];\n    this.panels.forEach((panel) => {\n      if (!area || panel.area === area) {\n        panels.push(panel);\n      }\n    });\n    return panels;\n  }\n\n  getAreaConfig(area: Area) {\n    switch (area) {\n      case 'docked-bottom':\n        return this.config.dockedBottom;\n      case 'docked-right':\n        return this.config.dockedRight;\n      case 'bottom':\n        return this.config.bottom;\n      case 'right':\n      default:\n        return this.config.right;\n    }\n  }\n\n  dispose() {\n    this.onPanelsChangeEvent.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport ReactDOM from 'react-dom';\nimport { createElement } from 'react';\n\nimport { injectable, inject } from 'inversify';\nimport { domUtils, Disposable } from '@flowgram.ai/utils';\nimport { Layer, PluginContext } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\nimport { PanelManagerConfig } from './panel-config';\n\n@injectable()\nexport class PanelLayer extends Layer {\n  @inject(PanelManagerConfig) private readonly panelConfig: PanelManagerConfig;\n\n  @inject(PluginContext) private readonly pluginContext: PluginContext;\n\n  readonly panelRoot = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n  layout: JSX.Element | null = null;\n\n  onReady(): void {\n    this.panelConfig.getPopupContainer(this.pluginContext).appendChild(this.panelRoot);\n    this.toDispose.push(\n      Disposable.create(() => {\n        // Remove from PopupContainer\n        this.panelRoot.remove();\n      })\n    );\n    const commonStyle = {\n      pointerEvents: 'none',\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      left: 0,\n      top: 0,\n      zIndex: 100,\n    };\n    domUtils.setStyle(this.panelRoot, commonStyle);\n  }\n\n  render(): JSX.Element {\n    if (!this.layout) {\n      const { children, ...layoutProps } = this.panelConfig.layerProps;\n      this.layout = createElement(PanelLayerComp, layoutProps, children);\n    }\n    return ReactDOM.createPortal(this.layout, this.panelRoot);\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport * as React from 'react';\n\nimport clsx from 'clsx';\n\nimport { useGlobalCSS } from '../../hooks/use-global-css';\nimport { PanelArea } from './panel';\nimport { globalCSS } from './css';\n\nexport type PanelLayerProps = React.PropsWithChildren<{\n  /** 模式：悬浮｜挤压 */\n  mode?: 'floating' | 'docked';\n  className?: string;\n  style?: React.CSSProperties;\n}>;\n\nexport const PanelLayer: React.FC<PanelLayerProps> = ({\n  mode = 'floating',\n  className,\n  style,\n  children,\n}) => {\n  useGlobalCSS({\n    cssText: globalCSS,\n    id: 'flow-panel-layer-css',\n  });\n\n  return (\n    <div\n      className={clsx(\n        'gedit-flow-panel-layer-wrap',\n        mode === 'docked' && 'gedit-flow-panel-layer-wrap-docked',\n        mode === 'floating' && 'gedit-flow-panel-layer-wrap-floating',\n        className\n      )}\n      style={style}\n    >\n      <div className=\"gedit-flow-panel-left-area\">\n        <div className=\"gedit-flow-panel-main-area\">{children}</div>\n        <div className=\"gedit-flow-panel-bottom-area\">\n          <PanelArea area={mode === 'docked' ? 'docked-bottom' : 'bottom'} />\n        </div>\n      </div>\n      <div className=\"gedit-flow-panel-right-area\">\n        <PanelArea area={mode === 'docked' ? 'docked-right' : 'right'} />\n      </div>\n    </div>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect } from 'react';\n\ninterface UseGlobalCSSOptions {\n  cssText: string;\n  id: string;\n  cleanup?: boolean;\n}\n\nexport const useGlobalCSS = ({ cssText, id, cleanup }: UseGlobalCSSOptions) => {\n  useEffect(() => {\n    /** SSR safe */\n    if (typeof document === 'undefined') return;\n\n    if (document.getElementById(id)) return;\n\n    const style = document.createElement('style');\n    style.id = id;\n    style.textContent = cssText;\n    document.head.appendChild(style);\n\n    return () => {\n      const existing = document.getElementById(id);\n      if (existing && cleanup) existing.remove();\n    };\n  }, [id]);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport * as React from 'react';\n\nconst { useEffect, useState, useRef } = React;\n\nimport { clsx } from 'clsx';\n\nimport { Area } from '../../types';\nimport { PanelEntity } from '../../services/panel-factory';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { usePanelStore } from '../../hooks/use-panel';\nimport { PanelContext } from '../../contexts';\n\nconst PanelItem: React.FC<{ panel: PanelEntity; hidden?: boolean }> = ({ panel, hidden }) => {\n  const panelManager = usePanelManager();\n  const ref = useRef<HTMLDivElement>(null);\n\n  const isHorizontal = ['right', 'docked-right'].includes(panel.area);\n\n  const { size, fullscreen } = usePanelStore((s) => ({\n    size: s.size,\n    fullscreen: s.fullscreen,\n  }));\n\n  const [layerSize, setLayerSize] = useState(size);\n\n  const currentSize = fullscreen ? layerSize : size;\n\n  const sizeStyle = isHorizontal ? { width: currentSize } : { height: currentSize };\n  const handleResize = (next: number) => {\n    let nextSize = next;\n    if (typeof panel.factory.maxSize === 'number' && nextSize > panel.factory.maxSize) {\n      nextSize = panel.factory.maxSize;\n    } else if (typeof panel.factory.minSize === 'number' && nextSize < panel.factory.minSize) {\n      nextSize = panel.factory.minSize;\n    }\n    panel.store.setState({ size: nextSize });\n  };\n\n  useEffect(() => {\n    /** The set size may be illegal and needs to be updated according to the real element rendered for the first time. */\n    if (ref.current && !fullscreen) {\n      const { width, height } = ref.current.getBoundingClientRect();\n      const realSize = isHorizontal ? width : height;\n      panel.store.setState({ size: realSize });\n    }\n  }, [fullscreen]);\n\n  useEffect(() => {\n    if (!fullscreen) {\n      return;\n    }\n    const layer = panel.layer;\n    if (!layer) {\n      return;\n    }\n    const observer = new ResizeObserver(([entry]) => {\n      const { width, height } = entry.contentRect;\n      setLayerSize(isHorizontal ? width : height);\n    });\n    observer.observe(layer);\n    return () => observer.disconnect();\n  }, [fullscreen]);\n\n  return (\n    <div\n      className={clsx(\n        'gedit-flow-panel-wrap',\n        isHorizontal ? 'panel-horizontal' : 'panel-vertical'\n      )}\n      key={panel.id}\n      ref={ref}\n      style={{\n        display: hidden ? 'none' : 'block',\n        ...panel.factory.style,\n        ...panel.config.style,\n        ...sizeStyle,\n      }}\n    >\n      {panel.resizable &&\n        panelManager.config.resizeBarRender({\n          size,\n          direction: isHorizontal ? 'vertical' : 'horizontal',\n          onResize: handleResize,\n        })}\n      {panel.renderer}\n    </div>\n  );\n};\n\nexport const PanelArea: React.FC<{ area: Area }> = ({ area }) => {\n  const panelManager = usePanelManager();\n  const [panels, setPanels] = useState(panelManager.getPanels(area));\n\n  useEffect(() => {\n    let pending: number;\n\n    function startTransition(fn: () => void) {\n      clearTimeout(pending);\n      pending = setTimeout(fn, 0);\n    }\n    const dispose = panelManager.onPanelsChange(() => {\n      const r: any = { ...React };\n\n      const start = r['startTransition'] as undefined | ((cb: () => void) => void);\n      if (typeof start === 'function') {\n        start(() => setPanels(panelManager.getPanels(area)));\n      } else {\n        startTransition(() => setPanels(panelManager.getPanels(area)));\n      }\n    });\n    return () => dispose.dispose();\n  }, []);\n\n  return (\n    <>\n      {panels.map((panel) => (\n        <PanelContext.Provider value={panel} key={panel.id}>\n          <PanelItem panel={panel} hidden={panel.keepDOM && !panel.visible} />\n        </PanelContext.Provider>\n      ))}\n    </>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useService } from '@flowgram.ai/core';\n\nimport { PanelManager } from '../services/panel-manager';\n\nexport const usePanelManager = () => useService<PanelManager>(PanelManager);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useContext } from 'react';\n\nimport { useStoreWithEqualityFn } from 'zustand/traditional';\nimport { shallow } from 'zustand/shallow';\n\nimport { PanelEntityState } from '../services/panel-factory';\nimport { PanelContext } from '../contexts';\n\nexport const usePanel = () => useContext(PanelContext);\n\nexport const usePanelStore = <T>(selector: (s: PanelEntityState) => T) => {\n  const panel = usePanel();\n  return useStoreWithEqualityFn(panel.store, selector, shallow);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createContext } from 'react';\n\nimport type { PanelEntity } from './services/panel-factory';\n\nexport const PanelContext = createContext({} as PanelEntity);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const globalCSS = `\n  .gedit-flow-panel-layer-wrap * {\n    box-sizing: border-box;\n  }\n  .gedit-flow-panel-layer-wrap {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n  .gedit-flow-panel-layer-wrap-docked {\n\n  }\n  .gedit-flow-panel-layer-wrap-floating {\n    pointer-events: none;\n  }\n\n  .gedit-flow-panel-left-area {\n    width: 100%;\n    min-width: 0;\n    flex-grow: 0;\n    flex-shrink: 1;\n    display: flex;\n    flex-direction: column;\n  }\n  .gedit-flow-panel-right-area {\n    height: 100%;\n    flex-grow: 1;\n    flex-shrink: 0;\n    min-width: 0;\n    display: flex;\n    max-width: 100%;\n  }\n\n  .gedit-flow-panel-main-area {\n    position: relative;\n    overflow: hidden;\n    flex-grow: 0;\n    flex-shrink: 1;\n    width: 100%;\n    height: 100%;\n  }\n  .gedit-flow-panel-bottom-area {\n    flex-grow: 1;\n    flex-shrink: 0;\n    width: 100%;\n    min-height: 0;\n  }\n  .gedit-flow-panel-wrap {\n    pointer-events: auto;\n    overflow: auto;\n    position: relative;\n  }\n  .gedit-flow-panel-wrap.panel-horizontal {\n    height: 100%;\n  }\n  .gedit-flow-panel-wrap.panel-vertical {\n    width: 100%;\n  }\n`;\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport * as React from 'react';\n\nimport { PanelLayer, PanelLayerProps } from './panel-layer';\n\nexport type DockedPanelLayerProps = Omit<PanelLayerProps, 'mode'>;\n\nexport const DockedPanelLayer: React.FC<DockedPanelLayerProps> = (props) => (\n  <PanelLayer mode=\"docked\" {...props} />\n);\n"],"mappings":"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","names":["injectable","e","injectable","injectable","inject","inject","injectable","createElement","injectable","inject","React","clsx","React","useEffect","useState","useRef","React","clsx","React","PanelLayer","createElement","inject","injectable","PanelLayer"]}

package/dist/index.d.mts

@@ -1,8 +1,7 @@
 import * as _flowgram_ai_core from '@flowgram.ai/core';
 import { PluginContext } from '@flowgram.ai/core';
+import * as React$1 from 'react';
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
-import * as react from 'react';
-import react__default from 'react';
 import { StoreApi } from 'zustand/vanilla';
 
 /**
@@ -38,11 +37,12 @@ interface PanelEntityConfig<T extends any = any> {
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
-type PanelLayerProps = React.PropsWithChildren<{
+
+type PanelLayerProps = React$1.PropsWithChildren<{
     /** 模式：悬浮｜挤压 */
     mode?: 'floating' | 'docked';
     className?: string;
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 }>;
 
 /**
@@ -51,7 +51,7 @@ type PanelLayerProps = React.PropsWithChildren<{
  */
 
 type DockedPanelLayerProps = Omit<PanelLayerProps, 'mode'>;
-declare const DockedPanelLayer: React.FC<DockedPanelLayerProps>;
+declare const DockedPanelLayer: React$1.FC<DockedPanelLayerProps>;
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
@@ -117,7 +117,7 @@ declare class PanelEntity {
     get area(): Area;
     get mode(): "docked" | "floating";
     get key(): string;
-    get renderer(): react.ReactNode;
+    get renderer(): React$1.ReactNode;
     get fullscreen(): boolean;
     set fullscreen(next: boolean);
     get resizable(): boolean;
@@ -172,6 +172,6 @@ interface Props {
     direction?: 'vertical' | 'horizontal';
     onResize: (w: number) => void;
 }
-declare const ResizeBar: react__default.FC<Props>;
+declare const ResizeBar: React$1.FC<Props>;
 
 export { type Area, DockedPanelLayer, type DockedPanelLayerProps, type PanelFactory, PanelManager, PanelManagerConfig, PanelRestore, ResizeBar, createPanelManagerPlugin, usePanel, usePanelManager };

package/dist/index.d.ts

@@ -1,8 +1,7 @@
 import * as _flowgram_ai_core from '@flowgram.ai/core';
 import { PluginContext } from '@flowgram.ai/core';
+import * as React$1 from 'react';
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
-import * as react from 'react';
-import react__default from 'react';
 import { StoreApi } from 'zustand/vanilla';
 
 /**
@@ -38,11 +37,12 @@ interface PanelEntityConfig<T extends any = any> {
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
-type PanelLayerProps = React.PropsWithChildren<{
+
+type PanelLayerProps = React$1.PropsWithChildren<{
     /** 模式：悬浮｜挤压 */
     mode?: 'floating' | 'docked';
     className?: string;
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 }>;
 
 /**
@@ -51,7 +51,7 @@ type PanelLayerProps = React.PropsWithChildren<{
  */
 
 type DockedPanelLayerProps = Omit<PanelLayerProps, 'mode'>;
-declare const DockedPanelLayer: React.FC<DockedPanelLayerProps>;
+declare const DockedPanelLayer: React$1.FC<DockedPanelLayerProps>;
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
@@ -117,7 +117,7 @@ declare class PanelEntity {
     get area(): Area;
     get mode(): "docked" | "floating";
     get key(): string;
-    get renderer(): react.ReactNode;
+    get renderer(): React$1.ReactNode;
     get fullscreen(): boolean;
     set fullscreen(next: boolean);
     get resizable(): boolean;
@@ -172,6 +172,6 @@ interface Props {
     direction?: 'vertical' | 'horizontal';
     onResize: (w: number) => void;
 }
-declare const ResizeBar: react__default.FC<Props>;
+declare const ResizeBar: React$1.FC<Props>;
 
 export { type Area, DockedPanelLayer, type DockedPanelLayerProps, type PanelFactory, PanelManager, PanelManagerConfig, PanelRestore, ResizeBar, createPanelManagerPlugin, usePanel, usePanelManager };

package/dist/index.js

@@ -75,14 +75,14 @@ PanelRestoreImpl = __decorateClass([
 ], PanelRestoreImpl);
 
 // src/components/resize-bar/index.tsx
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"));
+var { useRef, useState } = React;
 var ResizeBar = ({ onResize, size, direction }) => {
-  const currentPoint = (0, import_react.useRef)(null);
-  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
-  const [isHovered, setIsHovered] = (0, import_react.useState)(false);
+  const currentPoint = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
   const isVertical = direction === "vertical";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       onMouseDown: (e) => {
@@ -125,23 +125,23 @@ var ResizeBar = ({ onResize, size, direction }) => {
           marginTop: -5,
           height: 10
         }
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          style: {
-            ...isVertical ? {
-              width: 3,
-              height: "100%"
-            } : {
-              height: 3,
-              width: "100%"
-            },
-            backgroundColor: isDragging || isHovered ? "var(--g-playground-line)" : "transparent"
-          }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          ...isVertical ? {
+            width: 3,
+            height: "100%"
+          } : {
+            height: 3,
+            width: "100%"
+          },
+          backgroundColor: isDragging || isHovered ? "var(--g-playground-line)" : "transparent"
         }
-      )
-    }
+      }
+    )
   );
 };
 
@@ -398,18 +398,19 @@ PanelManager = __decorateClass([
 
 // src/services/panel-layer.ts
 var import_react_dom = __toESM(require("react-dom"));
-var import_react6 = require("react");
+var import_react4 = require("react");
 var import_inversify4 = require("inversify");
 var import_utils3 = require("@flowgram.ai/utils");
 var import_core2 = require("@flowgram.ai/core");
 
 // src/components/panel-layer/panel-layer.tsx
+var React3 = __toESM(require("react"));
 var import_clsx2 = __toESM(require("clsx"));
 
 // src/hooks/use-global-css.ts
-var import_react2 = require("react");
+var import_react = require("react");
 var useGlobalCSS = ({ cssText, id, cleanup }) => {
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (typeof document === "undefined") return;
     if (document.getElementById(id)) return;
     const style = document.createElement("style");
@@ -424,7 +425,7 @@ var useGlobalCSS = ({ cssText, id, cleanup }) => {
 };
 
 // src/components/panel-layer/panel.tsx
-var import_react5 = require("react");
+var React2 = __toESM(require("react"));
 var import_clsx = require("clsx");
 
 // src/hooks/use-panel-manager.ts
@@ -432,32 +433,32 @@ var import_core = require("@flowgram.ai/core");
 var usePanelManager = () => (0, import_core.useService)(PanelManager);
 
 // src/hooks/use-panel.ts
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_traditional = require("zustand/traditional");
 var import_shallow = require("zustand/shallow");
 
 // src/contexts.ts
-var import_react3 = require("react");
-var PanelContext = (0, import_react3.createContext)({});
+var import_react2 = require("react");
+var PanelContext = (0, import_react2.createContext)({});
 
 // src/hooks/use-panel.ts
-var usePanel = () => (0, import_react4.useContext)(PanelContext);
+var usePanel = () => (0, import_react3.useContext)(PanelContext);
 var usePanelStore = (selector) => {
   const panel = usePanel();
   return (0, import_traditional.useStoreWithEqualityFn)(panel.store, selector, import_shallow.shallow);
 };
 
 // src/components/panel-layer/panel.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var { useEffect: useEffect2, useState: useState2, useRef: useRef2 } = React2;
 var PanelItem = ({ panel, hidden }) => {
   const panelManager = usePanelManager();
-  const ref = (0, import_react5.useRef)(null);
+  const ref = useRef2(null);
   const isHorizontal = ["right", "docked-right"].includes(panel.area);
   const { size, fullscreen } = usePanelStore((s) => ({
     size: s.size,
     fullscreen: s.fullscreen
   }));
-  const [layerSize, setLayerSize] = (0, import_react5.useState)(size);
+  const [layerSize, setLayerSize] = useState2(size);
   const currentSize = fullscreen ? layerSize : size;
   const sizeStyle = isHorizontal ? { width: currentSize } : { height: currentSize };
   const handleResize = (next) => {
@@ -469,14 +470,14 @@ var PanelItem = ({ panel, hidden }) => {
     }
     panel.store.setState({ size: nextSize });
   };
-  (0, import_react5.useEffect)(() => {
+  useEffect2(() => {
     if (ref.current && !fullscreen) {
       const { width, height } = ref.current.getBoundingClientRect();
       const realSize = isHorizontal ? width : height;
       panel.store.setState({ size: realSize });
     }
   }, [fullscreen]);
-  (0, import_react5.useEffect)(() => {
+  useEffect2(() => {
     if (!fullscreen) {
       return;
     }
@@ -491,44 +492,51 @@ var PanelItem = ({ panel, hidden }) => {
     observer.observe(layer);
     return () => observer.disconnect();
   }, [fullscreen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ React2.createElement(
     "div",
     {
       className: (0, import_clsx.clsx)(
         "gedit-flow-panel-wrap",
         isHorizontal ? "panel-horizontal" : "panel-vertical"
       ),
+      key: panel.id,
       ref,
       style: {
         display: hidden ? "none" : "block",
         ...panel.factory.style,
         ...panel.config.style,
         ...sizeStyle
-      },
-      children: [
-        panel.resizable && panelManager.config.resizeBarRender({
-          size,
-          direction: isHorizontal ? "vertical" : "horizontal",
-          onResize: handleResize
-        }),
-        panel.renderer
-      ]
+      }
     },
-    panel.id
+    panel.resizable && panelManager.config.resizeBarRender({
+      size,
+      direction: isHorizontal ? "vertical" : "horizontal",
+      onResize: handleResize
+    }),
+    panel.renderer
   );
 };
 var PanelArea = ({ area }) => {
   const panelManager = usePanelManager();
-  const [panels, setPanels] = (0, import_react5.useState)(panelManager.getPanels(area));
-  (0, import_react5.useEffect)(() => {
+  const [panels, setPanels] = useState2(panelManager.getPanels(area));
+  useEffect2(() => {
+    let pending;
+    function startTransition(fn) {
+      clearTimeout(pending);
+      pending = setTimeout(fn, 0);
+    }
     const dispose = panelManager.onPanelsChange(() => {
-      (0, import_react5.startTransition)(() => {
-        setPanels(panelManager.getPanels(area));
-      });
+      const r = { ...React2 };
+      const start = r["startTransition"];
+      if (typeof start === "function") {
+        start(() => setPanels(panelManager.getPanels(area)));
+      } else {
+        startTransition(() => setPanels(panelManager.getPanels(area)));
+      }
     });
     return () => dispose.dispose();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelContext.Provider, { value: panel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelItem, { panel, hidden: panel.keepDOM && !panel.visible }) }, panel.id)) });
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, panels.map((panel) => /* @__PURE__ */ React2.createElement(PanelContext.Provider, { value: panel, key: panel.id }, /* @__PURE__ */ React2.createElement(PanelItem, { panel, hidden: panel.keepDOM && !panel.visible }))));
 };
 
 // src/components/panel-layer/css.ts
@@ -597,7 +605,6 @@ var globalCSS = `
 `;
 
 // src/components/panel-layer/panel-layer.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
 var PanelLayer = ({
   mode = "floating",
   className,
@@ -608,7 +615,7 @@ var PanelLayer = ({
     cssText: globalCSS,
     id: "flow-panel-layer-css"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ React3.createElement(
     "div",
     {
       className: (0, import_clsx2.default)(
@@ -617,21 +624,16 @@ var PanelLayer = ({
         mode === "floating" && "gedit-flow-panel-layer-wrap-floating",
         className
       ),
-      style,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "gedit-flow-panel-left-area", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gedit-flow-panel-main-area", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gedit-flow-panel-bottom-area", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PanelArea, { area: mode === "docked" ? "docked-bottom" : "bottom" }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gedit-flow-panel-right-area", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PanelArea, { area: mode === "docked" ? "docked-right" : "right" }) })
-      ]
-    }
+      style
+    },
+    /* @__PURE__ */ React3.createElement("div", { className: "gedit-flow-panel-left-area" }, /* @__PURE__ */ React3.createElement("div", { className: "gedit-flow-panel-main-area" }, children), /* @__PURE__ */ React3.createElement("div", { className: "gedit-flow-panel-bottom-area" }, /* @__PURE__ */ React3.createElement(PanelArea, { area: mode === "docked" ? "docked-bottom" : "bottom" }))),
+    /* @__PURE__ */ React3.createElement("div", { className: "gedit-flow-panel-right-area" }, /* @__PURE__ */ React3.createElement(PanelArea, { area: mode === "docked" ? "docked-right" : "right" }))
   );
 };
 
 // src/components/panel-layer/docked-panel-layer.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var DockedPanelLayer = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelLayer, { mode: "docked", ...props });
+var React4 = __toESM(require("react"));
+var DockedPanelLayer = (props) => /* @__PURE__ */ React4.createElement(PanelLayer, { mode: "docked", ...props });
 
 // src/services/panel-layer.ts
 var PanelLayer2 = class extends import_core2.Layer {
@@ -661,7 +663,7 @@ var PanelLayer2 = class extends import_core2.Layer {
   render() {
     if (!this.layout) {
       const { children, ...layoutProps } = this.panelConfig.layerProps;
-      this.layout = (0, import_react6.createElement)(PanelLayer, layoutProps, children);
+      this.layout = (0, import_react4.createElement)(PanelLayer, layoutProps, children);
     }
     return import_react_dom.default.createPortal(this.layout, this.panelRoot);
   }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/create-panel-manager-plugin.ts","../src/services/panel-factory.ts","../src/services/panel-restore.ts","../src/components/resize-bar/index.tsx","../src/services/panel-config.ts","../src/utils.ts","../src/services/panel-manager.ts","../src/services/panel-layer.ts","../src/components/panel-layer/panel-layer.tsx","../src/hooks/use-global-css.ts","../src/components/panel-layer/panel.tsx","../src/hooks/use-panel-manager.ts","../src/hooks/use-panel.ts","../src/contexts.ts","../src/components/panel-layer/css.ts","../src/components/panel-layer/docked-panel-layer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\n/** create plugin function */\nexport { createPanelManagerPlugin } from './create-panel-manager-plugin';\n\n/** services */\nexport { PanelManager, PanelRestore, type PanelManagerConfig } from './services';\n\n/** react hooks */\nexport { usePanelManager } from './hooks/use-panel-manager';\nexport { usePanel } from './hooks/use-panel';\n\nexport { DockedPanelLayer, type DockedPanelLayerProps } from './components/panel-layer';\nexport { ResizeBar } from './components/resize-bar';\n\n/** types */\nexport type { Area, PanelFactory } from './types';\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport {\n  PanelEntityFactory,\n  PanelEntity,\n  PanelEntityFactoryConstant,\n  PanelEntityConfigConstant,\n} from './services/panel-factory';\nimport { defineConfig } from './services/panel-config';\nimport {\n  PanelManager,\n  PanelManagerConfig,\n  PanelLayer,\n  PanelRestore,\n  PanelRestoreImpl,\n} from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n  onBind: ({ bind }, opt) => {\n    bind(PanelManager).to(PanelManager).inSingletonScope();\n    bind(PanelRestore).to(PanelRestoreImpl).inSingletonScope();\n    bind(PanelManagerConfig).toConstantValue(defineConfig(opt));\n    bind(PanelEntityFactory).toFactory(\n      (context) =>\n        ({\n          factory,\n          config,\n        }: {\n          factory: PanelEntityFactoryConstant;\n          config: PanelEntityConfigConstant;\n        }) => {\n          const container = context.container.createChild();\n          container.bind(PanelEntityFactoryConstant).toConstantValue(factory);\n          container.bind(PanelEntityConfigConstant).toConstantValue(config);\n          const panel = container.resolve(PanelEntity);\n          panel.init();\n          return panel;\n        }\n    );\n  },\n  onInit(ctx) {\n    ctx.playground.registerLayer(PanelLayer);\n    const panelManager = ctx.container.get<PanelManager>(PanelManager);\n    panelManager.init();\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createStore, StoreApi } from 'zustand/vanilla';\nimport { nanoid } from 'nanoid';\nimport { inject, injectable } from 'inversify';\n\nimport type { PanelFactory, PanelEntityConfig, Area } from '../types';\nimport { PanelRestore } from './panel-restore';\nimport { PanelManagerConfig } from './panel-config';\nimport { merge } from '../utils';\n\nexport const PanelEntityFactory = Symbol('PanelEntityFactory');\nexport type PanelEntityFactory = (options: {\n  factory: PanelEntityFactoryConstant;\n  config: PanelEntityConfigConstant;\n}) => PanelEntity;\n\nexport const PanelEntityFactoryConstant = Symbol('PanelEntityFactoryConstant');\nexport type PanelEntityFactoryConstant = PanelFactory<any>;\nexport const PanelEntityConfigConstant = Symbol('PanelEntityConfigConstant');\nexport type PanelEntityConfigConstant = PanelEntityConfig<any> & {\n  area: Area;\n};\n\nconst PANEL_SIZE_DEFAULT = 400;\n\nexport interface PanelEntityState {\n  size: number;\n  fullscreen: boolean;\n  visible: boolean;\n}\n\n@injectable()\nexport class PanelEntity {\n  @inject(PanelRestore) restore: PanelRestore;\n\n  /** 面板工厂 */\n  @inject(PanelEntityFactoryConstant) public factory: PanelEntityFactoryConstant;\n\n  @inject(PanelEntityConfigConstant) public config: PanelEntityConfigConstant;\n\n  @inject(PanelManagerConfig) readonly globalConfig: PanelManagerConfig;\n\n  private initialized = false;\n\n  /** 实例唯一标识 */\n  id: string = nanoid();\n\n  /** 渲染缓存 */\n  node: React.ReactNode = null;\n\n  store: StoreApi<PanelEntityState>;\n\n  get area() {\n    return this.config.area;\n  }\n\n  get mode() {\n    return this.config.area.startsWith('docked') ? 'docked' : 'floating';\n  }\n\n  get key() {\n    return this.factory.key;\n  }\n\n  get renderer() {\n    if (!this.node) {\n      this.node = this.factory.render(this.config.props);\n    }\n    return this.node;\n  }\n\n  get fullscreen() {\n    return this.store.getState().fullscreen;\n  }\n\n  set fullscreen(next: boolean) {\n    this.store.setState({ fullscreen: next });\n  }\n\n  get resizable() {\n    if (this.fullscreen) {\n      return false;\n    }\n    return this.factory.resize !== undefined ? this.factory.resize : this.globalConfig.autoResize;\n  }\n\n  get keepDOM() {\n    return this.factory.keepDOM;\n  }\n\n  get visible() {\n    return this.store.getState().visible;\n  }\n\n  set visible(next: boolean) {\n    this.store.setState({ visible: next });\n  }\n\n  get layer() {\n    return document.querySelector(\n      this.mode ? '.gedit-flow-panel-layer-wrap-docked' : '.gedit-flow-panel-layer-wrap-floating'\n    );\n  }\n\n  init() {\n    if (this.initialized) {\n      return;\n    }\n    this.initialized = true;\n    const cache = this.restore.restore<PanelEntityState>(this.key);\n\n    const initialState = merge<PanelEntityState>(\n      {\n        size: this.config.defaultSize,\n        fullscreen: this.config.fullscreen,\n      },\n      cache ? cache : {},\n      {\n        size: this.factory.defaultSize || PANEL_SIZE_DEFAULT,\n        fullscreen: this.factory.fullscreen || false,\n        ...(this.factory.keepDOM ? { visible: true } : {}),\n      }\n    );\n\n    this.store = createStore<PanelEntityState>(() => initialState);\n  }\n\n  mergeState() {}\n\n  dispose() {\n    this.restore.store(this.key, this.store.getState());\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable } from 'inversify';\n\nexport const PanelRestore = Symbol('PanelRestore');\nexport interface PanelRestore {\n  store: (k: string, v: any) => void;\n  restore: <T>(k: string) => T | undefined;\n}\n\n@injectable()\nexport class PanelRestoreImpl implements PanelRestore {\n  map = new Map<string, any>();\n\n  store(k: string, v: any) {\n    this.map.set(k, v);\n  }\n\n  restore<T>(k: string): T | undefined {\n    return this.map.get(k) as T;\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useRef, useState } from 'react';\n\ninterface Props {\n  size: number;\n  direction?: 'vertical' | 'horizontal';\n  onResize: (w: number) => void;\n}\n\nexport const ResizeBar: React.FC<Props> = ({ onResize, size, direction }) => {\n  const currentPoint = useRef<null | number>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const isVertical = direction === 'vertical';\n\n  return (\n    <div\n      onMouseDown={(e) => {\n        currentPoint.current = isVertical ? e.clientX : e.clientY;\n        e.stopPropagation();\n        e.preventDefault();\n        setIsDragging(true);\n        const mouseUp = () => {\n          currentPoint.current = null;\n          document.body.removeEventListener('mouseup', mouseUp);\n          document.body.removeEventListener('mousemove', mouseMove);\n          setIsDragging(false);\n        };\n        const mouseMove = (e: MouseEvent) => {\n          const delta = currentPoint.current! - (isVertical ? e.clientX : e.clientY);\n          onResize(size + delta);\n        };\n        document.body.addEventListener('mouseup', mouseUp);\n        document.body.addEventListener('mousemove', mouseMove);\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      style={{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        zIndex: 999,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        pointerEvents: 'auto',\n        ...(isVertical\n          ? {\n              cursor: 'ew-resize',\n              height: '100%',\n              marginLeft: -5,\n              width: 10,\n            }\n          : {\n              cursor: 'ns-resize',\n              width: '100%',\n              marginTop: -5,\n              height: 10,\n            }),\n      }}\n    >\n      <div\n        style={{\n          ...(isVertical\n            ? {\n                width: 3,\n                height: '100%',\n              }\n            : {\n                height: 3,\n                width: '100%',\n              }),\n          backgroundColor: isDragging || isHovered ? 'var(--g-playground-line)' : 'transparent',\n        }}\n      />\n    </div>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PluginContext } from '@flowgram.ai/core';\n\nimport type { PanelFactory, PanelConfig } from '../types';\nimport { ResizeBar } from '../components/resize-bar';\nimport type { PanelLayerProps } from '../components/panel-layer';\n\nexport interface PanelManagerConfig {\n  factories: PanelFactory<any>[];\n  right: PanelConfig;\n  bottom: PanelConfig;\n  dockedRight: PanelConfig;\n  dockedBottom: PanelConfig;\n  /** Resizable, and multi-panel options mutually exclusive */\n  autoResize: boolean;\n  layerProps: PanelLayerProps;\n  resizeBarRender: ({\n    size,\n  }: {\n    size: number;\n    direction?: 'vertical' | 'horizontal';\n    onResize: (size: number) => void;\n  }) => React.ReactNode;\n  getPopupContainer: (ctx: PluginContext) => HTMLElement; // default playground.node.parentElement\n}\n\nexport const PanelManagerConfig = Symbol('PanelManagerConfig');\n\nexport const defineConfig = (config: Partial<PanelManagerConfig>) => {\n  const defaultConfig: PanelManagerConfig = {\n    right: {\n      max: 1,\n    },\n    bottom: {\n      max: 1,\n    },\n    dockedRight: {\n      max: 1,\n    },\n    dockedBottom: {\n      max: 1,\n    },\n    factories: [],\n    autoResize: true,\n    layerProps: {},\n    resizeBarRender: ResizeBar,\n    getPopupContainer: (ctx: PluginContext) => ctx.playground.node.parentNode as HTMLElement,\n  };\n  return {\n    ...defaultConfig,\n    ...config,\n  };\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const merge = <T>(...objs: Partial<T>[]) => {\n  const result: any = {};\n\n  for (const obj of objs) {\n    if (!obj || typeof obj !== 'object') continue;\n\n    for (const key of Object.keys(obj)) {\n      const value = (obj as any)[key];\n\n      if (result[key] === undefined) {\n        result[key] = value;\n      }\n    }\n  }\n\n  return result as T;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelEntityConfig, PanelFactory } from '../types';\nimport { PanelEntity, PanelEntityFactory } from './panel-factory';\n\n@injectable()\nexport class PanelManager {\n  @inject(PanelManagerConfig) readonly config: PanelManagerConfig;\n\n  @inject(PanelEntityFactory) readonly createPanel: PanelEntityFactory;\n\n  readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n  private panels = new Map<string, PanelEntity>();\n\n  private onPanelsChangeEvent = new Emitter<void>();\n\n  public onPanelsChange = this.onPanelsChangeEvent.event;\n\n  init() {\n    this.config.factories.forEach((factory) => this.register(factory));\n  }\n\n  /** registry panel factory */\n  register<T extends any>(factory: PanelFactory<T>) {\n    this.panelRegistry.set(factory.key, factory);\n  }\n\n  /** open panel */\n  public open(key: string, area: Area = 'right', options?: PanelEntityConfig) {\n    const factory = this.panelRegistry.get(key);\n    if (!factory) {\n      return;\n    }\n\n    const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);\n\n    if (factory.keepDOM && sameKeyPanels.length) {\n      const [panel] = sameKeyPanels;\n      // move to last\n      this.panels.delete(panel.id);\n      this.panels.set(panel.id, panel);\n      panel.visible = true;\n    } else {\n      if (!factory.allowDuplicates && sameKeyPanels.length) {\n        sameKeyPanels.forEach((p) => this.remove(p.id));\n      }\n      const panel = this.createPanel({\n        factory,\n        config: {\n          area,\n          ...options,\n        },\n      });\n\n      this.panels.set(panel.id, panel);\n    }\n\n    this.trim(area);\n    this.onPanelsChangeEvent.fire();\n  }\n\n  /** close panel */\n  public close(key?: string) {\n    const panels = this.getPanels();\n    const closedPanels = key ? panels.filter((p) => p.key === key) : panels;\n    closedPanels.forEach((panel) => {\n      this.remove(panel.id);\n    });\n    this.onPanelsChangeEvent.fire();\n  }\n\n  private trim(area: Area) {\n    /** 1. general panel; 2. keepDOM visible panel */\n    const panels = this.getPanels(area).filter((p) => !p.keepDOM || p.visible);\n    const areaConfig = this.getAreaConfig(area);\n    while (panels.length > areaConfig.max) {\n      const removed = panels.shift();\n      if (removed) {\n        this.remove(removed.id);\n      }\n    }\n  }\n\n  private remove(id: string) {\n    const panel = this.panels.get(id);\n    if (!panel) {\n      return;\n    }\n    if (panel.keepDOM) {\n      panel.visible = false;\n    } else {\n      panel.dispose();\n      this.panels.delete(id);\n    }\n  }\n\n  getPanels(area?: Area) {\n    const panels: PanelEntity[] = [];\n    this.panels.forEach((panel) => {\n      if (!area || panel.area === area) {\n        panels.push(panel);\n      }\n    });\n    return panels;\n  }\n\n  getAreaConfig(area: Area) {\n    switch (area) {\n      case 'docked-bottom':\n        return this.config.dockedBottom;\n      case 'docked-right':\n        return this.config.dockedRight;\n      case 'bottom':\n        return this.config.bottom;\n      case 'right':\n      default:\n        return this.config.right;\n    }\n  }\n\n  dispose() {\n    this.onPanelsChangeEvent.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport ReactDOM from 'react-dom';\nimport { createElement } from 'react';\n\nimport { injectable, inject } from 'inversify';\nimport { domUtils, Disposable } from '@flowgram.ai/utils';\nimport { Layer, PluginContext } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\nimport { PanelManagerConfig } from './panel-config';\n\n@injectable()\nexport class PanelLayer extends Layer {\n  @inject(PanelManagerConfig) private readonly panelConfig: PanelManagerConfig;\n\n  @inject(PluginContext) private readonly pluginContext: PluginContext;\n\n  readonly panelRoot = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n  layout: JSX.Element | null = null;\n\n  onReady(): void {\n    this.panelConfig.getPopupContainer(this.pluginContext).appendChild(this.panelRoot);\n    this.toDispose.push(\n      Disposable.create(() => {\n        // Remove from PopupContainer\n        this.panelRoot.remove();\n      })\n    );\n    const commonStyle = {\n      pointerEvents: 'none',\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      left: 0,\n      top: 0,\n      zIndex: 100,\n    };\n    domUtils.setStyle(this.panelRoot, commonStyle);\n  }\n\n  render(): JSX.Element {\n    if (!this.layout) {\n      const { children, ...layoutProps } = this.panelConfig.layerProps;\n      this.layout = createElement(PanelLayerComp, layoutProps, children);\n    }\n    return ReactDOM.createPortal(this.layout, this.panelRoot);\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport clsx from 'clsx';\n\nimport { useGlobalCSS } from '../../hooks/use-global-css';\nimport { PanelArea } from './panel';\nimport { globalCSS } from './css';\n\nexport type PanelLayerProps = React.PropsWithChildren<{\n  /** 模式：悬浮｜挤压 */\n  mode?: 'floating' | 'docked';\n  className?: string;\n  style?: React.CSSProperties;\n}>;\n\nexport const PanelLayer: React.FC<PanelLayerProps> = ({\n  mode = 'floating',\n  className,\n  style,\n  children,\n}) => {\n  useGlobalCSS({\n    cssText: globalCSS,\n    id: 'flow-panel-layer-css',\n  });\n\n  return (\n    <div\n      className={clsx(\n        'gedit-flow-panel-layer-wrap',\n        mode === 'docked' && 'gedit-flow-panel-layer-wrap-docked',\n        mode === 'floating' && 'gedit-flow-panel-layer-wrap-floating',\n        className\n      )}\n      style={style}\n    >\n      <div className=\"gedit-flow-panel-left-area\">\n        <div className=\"gedit-flow-panel-main-area\">{children}</div>\n        <div className=\"gedit-flow-panel-bottom-area\">\n          <PanelArea area={mode === 'docked' ? 'docked-bottom' : 'bottom'} />\n        </div>\n      </div>\n      <div className=\"gedit-flow-panel-right-area\">\n        <PanelArea area={mode === 'docked' ? 'docked-right' : 'right'} />\n      </div>\n    </div>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect } from 'react';\n\ninterface UseGlobalCSSOptions {\n  cssText: string;\n  id: string;\n  cleanup?: boolean;\n}\n\nexport const useGlobalCSS = ({ cssText, id, cleanup }: UseGlobalCSSOptions) => {\n  useEffect(() => {\n    /** SSR safe */\n    if (typeof document === 'undefined') return;\n\n    if (document.getElementById(id)) return;\n\n    const style = document.createElement('style');\n    style.id = id;\n    style.textContent = cssText;\n    document.head.appendChild(style);\n\n    return () => {\n      const existing = document.getElementById(id);\n      if (existing && cleanup) existing.remove();\n    };\n  }, [id]);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect, startTransition, useState, useRef } from 'react';\n\nimport { clsx } from 'clsx';\n\nimport { Area } from '../../types';\nimport { PanelEntity } from '../../services/panel-factory';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { usePanelStore } from '../../hooks/use-panel';\nimport { PanelContext } from '../../contexts';\n\nconst PanelItem: React.FC<{ panel: PanelEntity; hidden?: boolean }> = ({ panel, hidden }) => {\n  const panelManager = usePanelManager();\n  const ref = useRef<HTMLDivElement>(null);\n\n  const isHorizontal = ['right', 'docked-right'].includes(panel.area);\n\n  const { size, fullscreen } = usePanelStore((s) => ({\n    size: s.size,\n    fullscreen: s.fullscreen,\n  }));\n\n  const [layerSize, setLayerSize] = useState(size);\n\n  const currentSize = fullscreen ? layerSize : size;\n\n  const sizeStyle = isHorizontal ? { width: currentSize } : { height: currentSize };\n  const handleResize = (next: number) => {\n    let nextSize = next;\n    if (typeof panel.factory.maxSize === 'number' && nextSize > panel.factory.maxSize) {\n      nextSize = panel.factory.maxSize;\n    } else if (typeof panel.factory.minSize === 'number' && nextSize < panel.factory.minSize) {\n      nextSize = panel.factory.minSize;\n    }\n    panel.store.setState({ size: nextSize });\n  };\n\n  useEffect(() => {\n    /** The set size may be illegal and needs to be updated according to the real element rendered for the first time. */\n    if (ref.current && !fullscreen) {\n      const { width, height } = ref.current.getBoundingClientRect();\n      const realSize = isHorizontal ? width : height;\n      panel.store.setState({ size: realSize });\n    }\n  }, [fullscreen]);\n\n  useEffect(() => {\n    if (!fullscreen) {\n      return;\n    }\n    const layer = panel.layer;\n    if (!layer) {\n      return;\n    }\n    const observer = new ResizeObserver(([entry]) => {\n      const { width, height } = entry.contentRect;\n      setLayerSize(isHorizontal ? width : height);\n    });\n    observer.observe(layer);\n    return () => observer.disconnect();\n  }, [fullscreen]);\n\n  return (\n    <div\n      className={clsx(\n        'gedit-flow-panel-wrap',\n        isHorizontal ? 'panel-horizontal' : 'panel-vertical'\n      )}\n      key={panel.id}\n      ref={ref}\n      style={{\n        display: hidden ? 'none' : 'block',\n        ...panel.factory.style,\n        ...panel.config.style,\n        ...sizeStyle,\n      }}\n    >\n      {panel.resizable &&\n        panelManager.config.resizeBarRender({\n          size,\n          direction: isHorizontal ? 'vertical' : 'horizontal',\n          onResize: handleResize,\n        })}\n      {panel.renderer}\n    </div>\n  );\n};\n\nexport const PanelArea: React.FC<{ area: Area }> = ({ area }) => {\n  const panelManager = usePanelManager();\n  const [panels, setPanels] = useState(panelManager.getPanels(area));\n\n  useEffect(() => {\n    const dispose = panelManager.onPanelsChange(() => {\n      startTransition(() => {\n        setPanels(panelManager.getPanels(area));\n      });\n    });\n    return () => dispose.dispose();\n  }, []);\n\n  return (\n    <>\n      {panels.map((panel) => (\n        <PanelContext.Provider value={panel} key={panel.id}>\n          <PanelItem panel={panel} hidden={panel.keepDOM && !panel.visible} />\n        </PanelContext.Provider>\n      ))}\n    </>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useService } from '@flowgram.ai/core';\n\nimport { PanelManager } from '../services/panel-manager';\n\nexport const usePanelManager = () => useService<PanelManager>(PanelManager);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useContext } from 'react';\n\nimport { useStoreWithEqualityFn } from 'zustand/traditional';\nimport { shallow } from 'zustand/shallow';\n\nimport { PanelEntityState } from '../services/panel-factory';\nimport { PanelContext } from '../contexts';\n\nexport const usePanel = () => useContext(PanelContext);\n\nexport const usePanelStore = <T>(selector: (s: PanelEntityState) => T) => {\n  const panel = usePanel();\n  return useStoreWithEqualityFn(panel.store, selector, shallow);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createContext } from 'react';\n\nimport type { PanelEntity } from './services/panel-factory';\n\nexport const PanelContext = createContext({} as PanelEntity);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const globalCSS = `\n  .gedit-flow-panel-layer-wrap * {\n    box-sizing: border-box;\n  }\n  .gedit-flow-panel-layer-wrap {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n  .gedit-flow-panel-layer-wrap-docked {\n\n  }\n  .gedit-flow-panel-layer-wrap-floating {\n    pointer-events: none;\n  }\n\n  .gedit-flow-panel-left-area {\n    width: 100%;\n    min-width: 0;\n    flex-grow: 0;\n    flex-shrink: 1;\n    display: flex;\n    flex-direction: column;\n  }\n  .gedit-flow-panel-right-area {\n    height: 100%;\n    flex-grow: 1;\n    flex-shrink: 0;\n    min-width: 0;\n    display: flex;\n    max-width: 100%;\n  }\n\n  .gedit-flow-panel-main-area {\n    position: relative;\n    overflow: hidden;\n    flex-grow: 0;\n    flex-shrink: 1;\n    width: 100%;\n    height: 100%;\n  }\n  .gedit-flow-panel-bottom-area {\n    flex-grow: 1;\n    flex-shrink: 0;\n    width: 100%;\n    min-height: 0;\n  }\n  .gedit-flow-panel-wrap {\n    pointer-events: auto;\n    overflow: auto;\n    position: relative;\n  }\n  .gedit-flow-panel-wrap.panel-horizontal {\n    height: 100%;\n  }\n  .gedit-flow-panel-wrap.panel-vertical {\n    width: 100%;\n  }\n`;\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PanelLayer, PanelLayerProps } from './panel-layer';\n\nexport type DockedPanelLayerProps = Omit<PanelLayerProps, 'mode'>;\n\nexport const DockedPanelLayer: React.FC<DockedPanelLayerProps> = (props) => (\n  <PanelLayer mode=\"docked\" {...props} />\n);\n"],"mappings":"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","names":["import_core","import_inversify","e","import_inversify","import_utils","import_react","import_inversify","import_utils","import_core","import_clsx","import_react","import_react","import_react","import_react","import_jsx_runtime","import_jsx_runtime","clsx","import_jsx_runtime","PanelLayer","ReactDOM","PanelLayer"]}
+{"version":3,"sources":["../src/index.ts","../src/create-panel-manager-plugin.ts","../src/services/panel-factory.ts","../src/services/panel-restore.ts","../src/components/resize-bar/index.tsx","../src/services/panel-config.ts","../src/utils.ts","../src/services/panel-manager.ts","../src/services/panel-layer.ts","../src/components/panel-layer/panel-layer.tsx","../src/hooks/use-global-css.ts","../src/components/panel-layer/panel.tsx","../src/hooks/use-panel-manager.ts","../src/hooks/use-panel.ts","../src/contexts.ts","../src/components/panel-layer/css.ts","../src/components/panel-layer/docked-panel-layer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\n/** create plugin function */\nexport { createPanelManagerPlugin } from './create-panel-manager-plugin';\n\n/** services */\nexport { PanelManager, PanelRestore, type PanelManagerConfig } from './services';\n\n/** react hooks */\nexport { usePanelManager } from './hooks/use-panel-manager';\nexport { usePanel } from './hooks/use-panel';\n\nexport { DockedPanelLayer, type DockedPanelLayerProps } from './components/panel-layer';\nexport { ResizeBar } from './components/resize-bar';\n\n/** types */\nexport type { Area, PanelFactory } from './types';\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport {\n  PanelEntityFactory,\n  PanelEntity,\n  PanelEntityFactoryConstant,\n  PanelEntityConfigConstant,\n} from './services/panel-factory';\nimport { defineConfig } from './services/panel-config';\nimport {\n  PanelManager,\n  PanelManagerConfig,\n  PanelLayer,\n  PanelRestore,\n  PanelRestoreImpl,\n} from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n  onBind: ({ bind }, opt) => {\n    bind(PanelManager).to(PanelManager).inSingletonScope();\n    bind(PanelRestore).to(PanelRestoreImpl).inSingletonScope();\n    bind(PanelManagerConfig).toConstantValue(defineConfig(opt));\n    bind(PanelEntityFactory).toFactory(\n      (context) =>\n        ({\n          factory,\n          config,\n        }: {\n          factory: PanelEntityFactoryConstant;\n          config: PanelEntityConfigConstant;\n        }) => {\n          const container = context.container.createChild();\n          container.bind(PanelEntityFactoryConstant).toConstantValue(factory);\n          container.bind(PanelEntityConfigConstant).toConstantValue(config);\n          const panel = container.resolve(PanelEntity);\n          panel.init();\n          return panel;\n        }\n    );\n  },\n  onInit(ctx) {\n    ctx.playground.registerLayer(PanelLayer);\n    const panelManager = ctx.container.get<PanelManager>(PanelManager);\n    panelManager.init();\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createStore, StoreApi } from 'zustand/vanilla';\nimport { nanoid } from 'nanoid';\nimport { inject, injectable } from 'inversify';\n\nimport type { PanelFactory, PanelEntityConfig, Area } from '../types';\nimport { PanelRestore } from './panel-restore';\nimport { PanelManagerConfig } from './panel-config';\nimport { merge } from '../utils';\n\nexport const PanelEntityFactory = Symbol('PanelEntityFactory');\nexport type PanelEntityFactory = (options: {\n  factory: PanelEntityFactoryConstant;\n  config: PanelEntityConfigConstant;\n}) => PanelEntity;\n\nexport const PanelEntityFactoryConstant = Symbol('PanelEntityFactoryConstant');\nexport type PanelEntityFactoryConstant = PanelFactory<any>;\nexport const PanelEntityConfigConstant = Symbol('PanelEntityConfigConstant');\nexport type PanelEntityConfigConstant = PanelEntityConfig<any> & {\n  area: Area;\n};\n\nconst PANEL_SIZE_DEFAULT = 400;\n\nexport interface PanelEntityState {\n  size: number;\n  fullscreen: boolean;\n  visible: boolean;\n}\n\n@injectable()\nexport class PanelEntity {\n  @inject(PanelRestore) restore: PanelRestore;\n\n  /** 面板工厂 */\n  @inject(PanelEntityFactoryConstant) public factory: PanelEntityFactoryConstant;\n\n  @inject(PanelEntityConfigConstant) public config: PanelEntityConfigConstant;\n\n  @inject(PanelManagerConfig) readonly globalConfig: PanelManagerConfig;\n\n  private initialized = false;\n\n  /** 实例唯一标识 */\n  id: string = nanoid();\n\n  /** 渲染缓存 */\n  node: React.ReactNode = null;\n\n  store: StoreApi<PanelEntityState>;\n\n  get area() {\n    return this.config.area;\n  }\n\n  get mode() {\n    return this.config.area.startsWith('docked') ? 'docked' : 'floating';\n  }\n\n  get key() {\n    return this.factory.key;\n  }\n\n  get renderer() {\n    if (!this.node) {\n      this.node = this.factory.render(this.config.props);\n    }\n    return this.node;\n  }\n\n  get fullscreen() {\n    return this.store.getState().fullscreen;\n  }\n\n  set fullscreen(next: boolean) {\n    this.store.setState({ fullscreen: next });\n  }\n\n  get resizable() {\n    if (this.fullscreen) {\n      return false;\n    }\n    return this.factory.resize !== undefined ? this.factory.resize : this.globalConfig.autoResize;\n  }\n\n  get keepDOM() {\n    return this.factory.keepDOM;\n  }\n\n  get visible() {\n    return this.store.getState().visible;\n  }\n\n  set visible(next: boolean) {\n    this.store.setState({ visible: next });\n  }\n\n  get layer() {\n    return document.querySelector(\n      this.mode ? '.gedit-flow-panel-layer-wrap-docked' : '.gedit-flow-panel-layer-wrap-floating'\n    );\n  }\n\n  init() {\n    if (this.initialized) {\n      return;\n    }\n    this.initialized = true;\n    const cache = this.restore.restore<PanelEntityState>(this.key);\n\n    const initialState = merge<PanelEntityState>(\n      {\n        size: this.config.defaultSize,\n        fullscreen: this.config.fullscreen,\n      },\n      cache ? cache : {},\n      {\n        size: this.factory.defaultSize || PANEL_SIZE_DEFAULT,\n        fullscreen: this.factory.fullscreen || false,\n        ...(this.factory.keepDOM ? { visible: true } : {}),\n      }\n    );\n\n    this.store = createStore<PanelEntityState>(() => initialState);\n  }\n\n  mergeState() {}\n\n  dispose() {\n    this.restore.store(this.key, this.store.getState());\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable } from 'inversify';\n\nexport const PanelRestore = Symbol('PanelRestore');\nexport interface PanelRestore {\n  store: (k: string, v: any) => void;\n  restore: <T>(k: string) => T | undefined;\n}\n\n@injectable()\nexport class PanelRestoreImpl implements PanelRestore {\n  map = new Map<string, any>();\n\n  store(k: string, v: any) {\n    this.map.set(k, v);\n  }\n\n  restore<T>(k: string): T | undefined {\n    return this.map.get(k) as T;\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport * as React from 'react';\n\nconst { useRef, useState } = React;\n\ninterface Props {\n  size: number;\n  direction?: 'vertical' | 'horizontal';\n  onResize: (w: number) => void;\n}\n\nexport const ResizeBar: React.FC<Props> = ({ onResize, size, direction }) => {\n  const currentPoint = useRef<null | number>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const isVertical = direction === 'vertical';\n\n  return (\n    <div\n      onMouseDown={(e) => {\n        currentPoint.current = isVertical ? e.clientX : e.clientY;\n        e.stopPropagation();\n        e.preventDefault();\n        setIsDragging(true);\n        const mouseUp = () => {\n          currentPoint.current = null;\n          document.body.removeEventListener('mouseup', mouseUp);\n          document.body.removeEventListener('mousemove', mouseMove);\n          setIsDragging(false);\n        };\n        const mouseMove = (e: MouseEvent) => {\n          const delta = currentPoint.current! - (isVertical ? e.clientX : e.clientY);\n          onResize(size + delta);\n        };\n        document.body.addEventListener('mouseup', mouseUp);\n        document.body.addEventListener('mousemove', mouseMove);\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      style={{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        zIndex: 999,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        pointerEvents: 'auto',\n        ...(isVertical\n          ? {\n              cursor: 'ew-resize',\n              height: '100%',\n              marginLeft: -5,\n              width: 10,\n            }\n          : {\n              cursor: 'ns-resize',\n              width: '100%',\n              marginTop: -5,\n              height: 10,\n            }),\n      }}\n    >\n      <div\n        style={{\n          ...(isVertical\n            ? {\n                width: 3,\n                height: '100%',\n              }\n            : {\n                height: 3,\n                width: '100%',\n              }),\n          backgroundColor: isDragging || isHovered ? 'var(--g-playground-line)' : 'transparent',\n        }}\n      />\n    </div>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PluginContext } from '@flowgram.ai/core';\n\nimport type { PanelFactory, PanelConfig } from '../types';\nimport { ResizeBar } from '../components/resize-bar';\nimport type { PanelLayerProps } from '../components/panel-layer';\n\nexport interface PanelManagerConfig {\n  factories: PanelFactory<any>[];\n  right: PanelConfig;\n  bottom: PanelConfig;\n  dockedRight: PanelConfig;\n  dockedBottom: PanelConfig;\n  /** Resizable, and multi-panel options mutually exclusive */\n  autoResize: boolean;\n  layerProps: PanelLayerProps;\n  resizeBarRender: ({\n    size,\n  }: {\n    size: number;\n    direction?: 'vertical' | 'horizontal';\n    onResize: (size: number) => void;\n  }) => React.ReactNode;\n  getPopupContainer: (ctx: PluginContext) => HTMLElement; // default playground.node.parentElement\n}\n\nexport const PanelManagerConfig = Symbol('PanelManagerConfig');\n\nexport const defineConfig = (config: Partial<PanelManagerConfig>) => {\n  const defaultConfig: PanelManagerConfig = {\n    right: {\n      max: 1,\n    },\n    bottom: {\n      max: 1,\n    },\n    dockedRight: {\n      max: 1,\n    },\n    dockedBottom: {\n      max: 1,\n    },\n    factories: [],\n    autoResize: true,\n    layerProps: {},\n    resizeBarRender: ResizeBar,\n    getPopupContainer: (ctx: PluginContext) => ctx.playground.node.parentNode as HTMLElement,\n  };\n  return {\n    ...defaultConfig,\n    ...config,\n  };\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const merge = <T>(...objs: Partial<T>[]) => {\n  const result: any = {};\n\n  for (const obj of objs) {\n    if (!obj || typeof obj !== 'object') continue;\n\n    for (const key of Object.keys(obj)) {\n      const value = (obj as any)[key];\n\n      if (result[key] === undefined) {\n        result[key] = value;\n      }\n    }\n  }\n\n  return result as T;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelEntityConfig, PanelFactory } from '../types';\nimport { PanelEntity, PanelEntityFactory } from './panel-factory';\n\n@injectable()\nexport class PanelManager {\n  @inject(PanelManagerConfig) readonly config: PanelManagerConfig;\n\n  @inject(PanelEntityFactory) readonly createPanel: PanelEntityFactory;\n\n  readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n  private panels = new Map<string, PanelEntity>();\n\n  private onPanelsChangeEvent = new Emitter<void>();\n\n  public onPanelsChange = this.onPanelsChangeEvent.event;\n\n  init() {\n    this.config.factories.forEach((factory) => this.register(factory));\n  }\n\n  /** registry panel factory */\n  register<T extends any>(factory: PanelFactory<T>) {\n    this.panelRegistry.set(factory.key, factory);\n  }\n\n  /** open panel */\n  public open(key: string, area: Area = 'right', options?: PanelEntityConfig) {\n    const factory = this.panelRegistry.get(key);\n    if (!factory) {\n      return;\n    }\n\n    const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);\n\n    if (factory.keepDOM && sameKeyPanels.length) {\n      const [panel] = sameKeyPanels;\n      // move to last\n      this.panels.delete(panel.id);\n      this.panels.set(panel.id, panel);\n      panel.visible = true;\n    } else {\n      if (!factory.allowDuplicates && sameKeyPanels.length) {\n        sameKeyPanels.forEach((p) => this.remove(p.id));\n      }\n      const panel = this.createPanel({\n        factory,\n        config: {\n          area,\n          ...options,\n        },\n      });\n\n      this.panels.set(panel.id, panel);\n    }\n\n    this.trim(area);\n    this.onPanelsChangeEvent.fire();\n  }\n\n  /** close panel */\n  public close(key?: string) {\n    const panels = this.getPanels();\n    const closedPanels = key ? panels.filter((p) => p.key === key) : panels;\n    closedPanels.forEach((panel) => {\n      this.remove(panel.id);\n    });\n    this.onPanelsChangeEvent.fire();\n  }\n\n  private trim(area: Area) {\n    /** 1. general panel; 2. keepDOM visible panel */\n    const panels = this.getPanels(area).filter((p) => !p.keepDOM || p.visible);\n    const areaConfig = this.getAreaConfig(area);\n    while (panels.length > areaConfig.max) {\n      const removed = panels.shift();\n      if (removed) {\n        this.remove(removed.id);\n      }\n    }\n  }\n\n  private remove(id: string) {\n    const panel = this.panels.get(id);\n    if (!panel) {\n      return;\n    }\n    if (panel.keepDOM) {\n      panel.visible = false;\n    } else {\n      panel.dispose();\n      this.panels.delete(id);\n    }\n  }\n\n  getPanels(area?: Area) {\n    const panels: PanelEntity[] = [];\n    this.panels.forEach((panel) => {\n      if (!area || panel.area === area) {\n        panels.push(panel);\n      }\n    });\n    return panels;\n  }\n\n  getAreaConfig(area: Area) {\n    switch (area) {\n      case 'docked-bottom':\n        return this.config.dockedBottom;\n      case 'docked-right':\n        return this.config.dockedRight;\n      case 'bottom':\n        return this.config.bottom;\n      case 'right':\n      default:\n        return this.config.right;\n    }\n  }\n\n  dispose() {\n    this.onPanelsChangeEvent.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport ReactDOM from 'react-dom';\nimport { createElement } from 'react';\n\nimport { injectable, inject } from 'inversify';\nimport { domUtils, Disposable } from '@flowgram.ai/utils';\nimport { Layer, PluginContext } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\nimport { PanelManagerConfig } from './panel-config';\n\n@injectable()\nexport class PanelLayer extends Layer {\n  @inject(PanelManagerConfig) private readonly panelConfig: PanelManagerConfig;\n\n  @inject(PluginContext) private readonly pluginContext: PluginContext;\n\n  readonly panelRoot = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n  layout: JSX.Element | null = null;\n\n  onReady(): void {\n    this.panelConfig.getPopupContainer(this.pluginContext).appendChild(this.panelRoot);\n    this.toDispose.push(\n      Disposable.create(() => {\n        // Remove from PopupContainer\n        this.panelRoot.remove();\n      })\n    );\n    const commonStyle = {\n      pointerEvents: 'none',\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      left: 0,\n      top: 0,\n      zIndex: 100,\n    };\n    domUtils.setStyle(this.panelRoot, commonStyle);\n  }\n\n  render(): JSX.Element {\n    if (!this.layout) {\n      const { children, ...layoutProps } = this.panelConfig.layerProps;\n      this.layout = createElement(PanelLayerComp, layoutProps, children);\n    }\n    return ReactDOM.createPortal(this.layout, this.panelRoot);\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport * as React from 'react';\n\nimport clsx from 'clsx';\n\nimport { useGlobalCSS } from '../../hooks/use-global-css';\nimport { PanelArea } from './panel';\nimport { globalCSS } from './css';\n\nexport type PanelLayerProps = React.PropsWithChildren<{\n  /** 模式：悬浮｜挤压 */\n  mode?: 'floating' | 'docked';\n  className?: string;\n  style?: React.CSSProperties;\n}>;\n\nexport const PanelLayer: React.FC<PanelLayerProps> = ({\n  mode = 'floating',\n  className,\n  style,\n  children,\n}) => {\n  useGlobalCSS({\n    cssText: globalCSS,\n    id: 'flow-panel-layer-css',\n  });\n\n  return (\n    <div\n      className={clsx(\n        'gedit-flow-panel-layer-wrap',\n        mode === 'docked' && 'gedit-flow-panel-layer-wrap-docked',\n        mode === 'floating' && 'gedit-flow-panel-layer-wrap-floating',\n        className\n      )}\n      style={style}\n    >\n      <div className=\"gedit-flow-panel-left-area\">\n        <div className=\"gedit-flow-panel-main-area\">{children}</div>\n        <div className=\"gedit-flow-panel-bottom-area\">\n          <PanelArea area={mode === 'docked' ? 'docked-bottom' : 'bottom'} />\n        </div>\n      </div>\n      <div className=\"gedit-flow-panel-right-area\">\n        <PanelArea area={mode === 'docked' ? 'docked-right' : 'right'} />\n      </div>\n    </div>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect } from 'react';\n\ninterface UseGlobalCSSOptions {\n  cssText: string;\n  id: string;\n  cleanup?: boolean;\n}\n\nexport const useGlobalCSS = ({ cssText, id, cleanup }: UseGlobalCSSOptions) => {\n  useEffect(() => {\n    /** SSR safe */\n    if (typeof document === 'undefined') return;\n\n    if (document.getElementById(id)) return;\n\n    const style = document.createElement('style');\n    style.id = id;\n    style.textContent = cssText;\n    document.head.appendChild(style);\n\n    return () => {\n      const existing = document.getElementById(id);\n      if (existing && cleanup) existing.remove();\n    };\n  }, [id]);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport * as React from 'react';\n\nconst { useEffect, useState, useRef } = React;\n\nimport { clsx } from 'clsx';\n\nimport { Area } from '../../types';\nimport { PanelEntity } from '../../services/panel-factory';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { usePanelStore } from '../../hooks/use-panel';\nimport { PanelContext } from '../../contexts';\n\nconst PanelItem: React.FC<{ panel: PanelEntity; hidden?: boolean }> = ({ panel, hidden }) => {\n  const panelManager = usePanelManager();\n  const ref = useRef<HTMLDivElement>(null);\n\n  const isHorizontal = ['right', 'docked-right'].includes(panel.area);\n\n  const { size, fullscreen } = usePanelStore((s) => ({\n    size: s.size,\n    fullscreen: s.fullscreen,\n  }));\n\n  const [layerSize, setLayerSize] = useState(size);\n\n  const currentSize = fullscreen ? layerSize : size;\n\n  const sizeStyle = isHorizontal ? { width: currentSize } : { height: currentSize };\n  const handleResize = (next: number) => {\n    let nextSize = next;\n    if (typeof panel.factory.maxSize === 'number' && nextSize > panel.factory.maxSize) {\n      nextSize = panel.factory.maxSize;\n    } else if (typeof panel.factory.minSize === 'number' && nextSize < panel.factory.minSize) {\n      nextSize = panel.factory.minSize;\n    }\n    panel.store.setState({ size: nextSize });\n  };\n\n  useEffect(() => {\n    /** The set size may be illegal and needs to be updated according to the real element rendered for the first time. */\n    if (ref.current && !fullscreen) {\n      const { width, height } = ref.current.getBoundingClientRect();\n      const realSize = isHorizontal ? width : height;\n      panel.store.setState({ size: realSize });\n    }\n  }, [fullscreen]);\n\n  useEffect(() => {\n    if (!fullscreen) {\n      return;\n    }\n    const layer = panel.layer;\n    if (!layer) {\n      return;\n    }\n    const observer = new ResizeObserver(([entry]) => {\n      const { width, height } = entry.contentRect;\n      setLayerSize(isHorizontal ? width : height);\n    });\n    observer.observe(layer);\n    return () => observer.disconnect();\n  }, [fullscreen]);\n\n  return (\n    <div\n      className={clsx(\n        'gedit-flow-panel-wrap',\n        isHorizontal ? 'panel-horizontal' : 'panel-vertical'\n      )}\n      key={panel.id}\n      ref={ref}\n      style={{\n        display: hidden ? 'none' : 'block',\n        ...panel.factory.style,\n        ...panel.config.style,\n        ...sizeStyle,\n      }}\n    >\n      {panel.resizable &&\n        panelManager.config.resizeBarRender({\n          size,\n          direction: isHorizontal ? 'vertical' : 'horizontal',\n          onResize: handleResize,\n        })}\n      {panel.renderer}\n    </div>\n  );\n};\n\nexport const PanelArea: React.FC<{ area: Area }> = ({ area }) => {\n  const panelManager = usePanelManager();\n  const [panels, setPanels] = useState(panelManager.getPanels(area));\n\n  useEffect(() => {\n    let pending: number;\n\n    function startTransition(fn: () => void) {\n      clearTimeout(pending);\n      pending = setTimeout(fn, 0);\n    }\n    const dispose = panelManager.onPanelsChange(() => {\n      const r: any = { ...React };\n\n      const start = r['startTransition'] as undefined | ((cb: () => void) => void);\n      if (typeof start === 'function') {\n        start(() => setPanels(panelManager.getPanels(area)));\n      } else {\n        startTransition(() => setPanels(panelManager.getPanels(area)));\n      }\n    });\n    return () => dispose.dispose();\n  }, []);\n\n  return (\n    <>\n      {panels.map((panel) => (\n        <PanelContext.Provider value={panel} key={panel.id}>\n          <PanelItem panel={panel} hidden={panel.keepDOM && !panel.visible} />\n        </PanelContext.Provider>\n      ))}\n    </>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useService } from '@flowgram.ai/core';\n\nimport { PanelManager } from '../services/panel-manager';\n\nexport const usePanelManager = () => useService<PanelManager>(PanelManager);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useContext } from 'react';\n\nimport { useStoreWithEqualityFn } from 'zustand/traditional';\nimport { shallow } from 'zustand/shallow';\n\nimport { PanelEntityState } from '../services/panel-factory';\nimport { PanelContext } from '../contexts';\n\nexport const usePanel = () => useContext(PanelContext);\n\nexport const usePanelStore = <T>(selector: (s: PanelEntityState) => T) => {\n  const panel = usePanel();\n  return useStoreWithEqualityFn(panel.store, selector, shallow);\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createContext } from 'react';\n\nimport type { PanelEntity } from './services/panel-factory';\n\nexport const PanelContext = createContext({} as PanelEntity);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const globalCSS = `\n  .gedit-flow-panel-layer-wrap * {\n    box-sizing: border-box;\n  }\n  .gedit-flow-panel-layer-wrap {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n  .gedit-flow-panel-layer-wrap-docked {\n\n  }\n  .gedit-flow-panel-layer-wrap-floating {\n    pointer-events: none;\n  }\n\n  .gedit-flow-panel-left-area {\n    width: 100%;\n    min-width: 0;\n    flex-grow: 0;\n    flex-shrink: 1;\n    display: flex;\n    flex-direction: column;\n  }\n  .gedit-flow-panel-right-area {\n    height: 100%;\n    flex-grow: 1;\n    flex-shrink: 0;\n    min-width: 0;\n    display: flex;\n    max-width: 100%;\n  }\n\n  .gedit-flow-panel-main-area {\n    position: relative;\n    overflow: hidden;\n    flex-grow: 0;\n    flex-shrink: 1;\n    width: 100%;\n    height: 100%;\n  }\n  .gedit-flow-panel-bottom-area {\n    flex-grow: 1;\n    flex-shrink: 0;\n    width: 100%;\n    min-height: 0;\n  }\n  .gedit-flow-panel-wrap {\n    pointer-events: auto;\n    overflow: auto;\n    position: relative;\n  }\n  .gedit-flow-panel-wrap.panel-horizontal {\n    height: 100%;\n  }\n  .gedit-flow-panel-wrap.panel-vertical {\n    width: 100%;\n  }\n`;\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport * as React from 'react';\n\nimport { PanelLayer, PanelLayerProps } from './panel-layer';\n\nexport type DockedPanelLayerProps = Omit<PanelLayerProps, 'mode'>;\n\nexport const DockedPanelLayer: React.FC<DockedPanelLayerProps> = (props) => (\n  <PanelLayer mode=\"docked\" {...props} />\n);\n"],"mappings":"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","names":["import_core","import_inversify","e","import_inversify","import_utils","import_react","import_inversify","import_utils","import_core","React","import_clsx","React","import_react","import_react","useEffect","useState","useRef","React","clsx","React","PanelLayer","ReactDOM","PanelLayer"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/panel-manager-plugin",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -16,10 +16,10 @@
     "inversify": "^6.0.1",
     "clsx": "^1.1.1",
     "nanoid": "^5.0.9",
-    "zustand": "^5.0.8",
+    "zustand": "^4.5.5",
     "use-sync-external-store": "^1.6.0",
-    "@flowgram.ai/core": "1.0.7",
-    "@flowgram.ai/utils": "1.0.7"
+    "@flowgram.ai/core": "1.0.9",
+    "@flowgram.ai/utils": "1.0.9"
   },
   "devDependencies": {
     "react": "^18",
@@ -28,8 +28,8 @@
     "@types/react-dom": "^18",
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
-    "@flowgram.ai/eslint-config": "1.0.7",
-    "@flowgram.ai/ts-config": "1.0.7"
+    "@flowgram.ai/ts-config": "1.0.9",
+    "@flowgram.ai/eslint-config": "1.0.9"
   },
   "peerDependencies": {
     "react": ">=16.8",

package/rush-logs/panel-manager-plugin.build.log

@@ -9,13 +9,13 @@ CLI tsup v8.5.0
 CLI Target: es2020
 CJS Build start
 ESM Build start
-CJS dist/index.js     21.17 KB
-CJS dist/index.js.map 35.97 KB
-CJS ⚡️ Build success in 108ms
-ESM dist/esm/index.js     18.44 KB
-ESM dist/esm/index.js.map 35.39 KB
-ESM ⚡️ Build success in 112ms
+CJS dist/index.js     20.95 KB
+CJS dist/index.js.map 36.67 KB
+CJS ⚡️ Build success in 113ms
+ESM dist/esm/index.js     18.67 KB
+ESM dist/esm/index.js.map 36.00 KB
+ESM ⚡️ Build success in 116ms
 DTS Build start
-DTS ⚡️ Build success in 3610ms
-DTS dist/index.d.ts  5.10 KB
-DTS dist/index.d.mts 5.10 KB
+DTS ⚡️ Build success in 3915ms
+DTS dist/index.d.ts  5.07 KB
+DTS dist/index.d.mts 5.07 KB

package/src/components/panel-layer/docked-panel-layer.tsx

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: MIT
  */
 
+import * as React from 'react';
+
 import { PanelLayer, PanelLayerProps } from './panel-layer';
 
 export type DockedPanelLayerProps = Omit<PanelLayerProps, 'mode'>;

package/src/components/panel-layer/panel-layer.tsx

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: MIT
  */
 
+import * as React from 'react';
+
 import clsx from 'clsx';
 
 import { useGlobalCSS } from '../../hooks/use-global-css';

package/src/components/panel-layer/panel.tsx

@@ -3,7 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useEffect, startTransition, useState, useRef } from 'react';
+import * as React from 'react';
+
+const { useEffect, useState, useRef } = React;
 
 import { clsx } from 'clsx';
 
@@ -95,10 +97,21 @@ export const PanelArea: React.FC<{ area: Area }> = ({ area }) => {
   const [panels, setPanels] = useState(panelManager.getPanels(area));
 
   useEffect(() => {
+    let pending: number;
+
+    function startTransition(fn: () => void) {
+      clearTimeout(pending);
+      pending = setTimeout(fn, 0);
+    }
     const dispose = panelManager.onPanelsChange(() => {
-      startTransition(() => {
-        setPanels(panelManager.getPanels(area));
-      });
+      const r: any = { ...React };
+
+      const start = r['startTransition'] as undefined | ((cb: () => void) => void);
+      if (typeof start === 'function') {
+        start(() => setPanels(panelManager.getPanels(area)));
+      } else {
+        startTransition(() => setPanels(panelManager.getPanels(area)));
+      }
     });
     return () => dispose.dispose();
   }, []);

package/src/components/resize-bar/index.tsx

@@ -3,7 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useRef, useState } from 'react';
+import * as React from 'react';
+
+const { useRef, useState } = React;
 
 interface Props {
   size: number;

package/tsconfig.json

@@ -1,12 +1,8 @@
 {
   "extends": "@flowgram.ai/ts-config/tsconfig.flow.base.json",
   "compilerOptions": {
-    "jsx": "react-jsx"
+    "jsx": "react"
   },
-  "include": [
-    "./src"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["./src"],
+  "exclude": ["node_modules"]
 }