@flowgram.ai/panel-manager-plugin 0.1.0-alpha.21 → 0.1.0-alpha.22

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[32mESM\u001b[39m \u001b[1mdist/esm/index.js     \u001b[22m\u001b[32m11.54 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js.map \u001b[22m\u001b[32m21.81 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mESM\u001b[39m ⚡️ Build success in 82ms\n"}
-{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js     \u001b[22m\u001b[32m13.82 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js.map \u001b[22m\u001b[32m22.26 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mCJS\u001b[39m ⚡️ Build success in 86ms\n"}
+{"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js     \u001b[22m\u001b[32m13.07 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js.map \u001b[22m\u001b[32m24.15 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mESM\u001b[39m ⚡️ Build success in 91ms\n"}
+{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js     \u001b[22m\u001b[32m15.42 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js.map \u001b[22m\u001b[32m24.71 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mCJS\u001b[39m ⚡️ Build success in 107ms\n"}
 {"kind":"O","text":"\u001b[34mDTS\u001b[39m Build start\n"}
-{"kind":"O","text":"\u001b[32mDTS\u001b[39m ⚡️ Build success in 3368ms\n"}
-{"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.ts  \u001b[22m\u001b[32m2.78 KB\u001b[39m\n"}
-{"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.mts \u001b[22m\u001b[32m2.78 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mDTS\u001b[39m ⚡️ Build success in 3627ms\n"}
+{"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.ts  \u001b[22m\u001b[32m3.49 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.mts \u001b[22m\u001b[32m3.49 KB\u001b[39m\n"}

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

@@ -3,21 +3,22 @@
     "packages/plugins/panel-manager-plugin/.eslintrc.cjs": "6b30cfc55136d429873e780785bf8d775edaaa74",
     "packages/plugins/panel-manager-plugin/.rush/temp/shrinkwrap-deps.json": "31768a71cb9a14b49720a461fe04680fabc8c1b4",
     "packages/plugins/panel-manager-plugin/package.json": "b578806137a3da06d5e4a79c98329da16ba385b0",
-    "packages/plugins/panel-manager-plugin/src/components/panel-layer/css.ts": "1956faac7baf1c7689b74fedacd40d16d7e59166",
-    "packages/plugins/panel-manager-plugin/src/components/panel-layer/float-panel.tsx": "73f08b4045d8b64b0a298ba8a0b45f6cb6c55756",
-    "packages/plugins/panel-manager-plugin/src/components/panel-layer/index.ts": "12fc8325355e02f272ad03ae7481f4b0a1d686df",
-    "packages/plugins/panel-manager-plugin/src/components/panel-layer/panel-layer.tsx": "acd6cd2e6cba1c60dbafec58ee09fe6a1060dd2d",
-    "packages/plugins/panel-manager-plugin/src/components/resize-bar/index.tsx": "a8eacd8ac80b61fa6930dc4ca31afa519caa2fb7",
+    "packages/plugins/panel-manager-plugin/src/components/panel-layer/css.ts": "50466641de472439cf80c60160512d35846f72d5",
+    "packages/plugins/panel-manager-plugin/src/components/panel-layer/docked-panel-layer.tsx": "232cd8edbac3a8d8b17b2a5a07c463e57ee8f5c8",
+    "packages/plugins/panel-manager-plugin/src/components/panel-layer/float-panel.tsx": "2a1b7bf6dbbe5864d852e92bd57b49be191d88ca",
+    "packages/plugins/panel-manager-plugin/src/components/panel-layer/index.ts": "4c78ec72d6acde8f2192ac956436a870cccc583f",
+    "packages/plugins/panel-manager-plugin/src/components/panel-layer/panel-layer.tsx": "62f84e44b6ac000524bb8f4d5ebcf03b07fda831",
+    "packages/plugins/panel-manager-plugin/src/components/resize-bar/index.tsx": "7712eb70c08b0826ac8940be64582287d279d564",
     "packages/plugins/panel-manager-plugin/src/create-panel-manager-plugin.ts": "a1872d870751a839ec2353eda3e02e6711dba779",
     "packages/plugins/panel-manager-plugin/src/hooks/use-global-css.ts": "be94fd4759d691bdcc5eb8a03f90995956ce4bf0",
     "packages/plugins/panel-manager-plugin/src/hooks/use-panel-manager.ts": "0e0073c6ad9a1552a9896085b011b79dbfe6309d",
-    "packages/plugins/panel-manager-plugin/src/index.ts": "a7652838f2ac7287efda8a5dcc25ddd53c48a88e",
+    "packages/plugins/panel-manager-plugin/src/index.ts": "dc7ce8533d3205790491ded0c96d83bba159a24b",
     "packages/plugins/panel-manager-plugin/src/services/float-panel.ts": "579889c8dd30051a92c722856be1229960b57d16",
     "packages/plugins/panel-manager-plugin/src/services/index.ts": "bb44c19958ea0a21d5669480edaac6fd9b493f2b",
-    "packages/plugins/panel-manager-plugin/src/services/panel-config.ts": "1874bbacad42eb92f9f284e277f1025c99799ee2",
+    "packages/plugins/panel-manager-plugin/src/services/panel-config.ts": "6fd1a71698eb71b8180a6d0e06f9ee872bfc774f",
     "packages/plugins/panel-manager-plugin/src/services/panel-layer.ts": "e456afb5e28d3c93846521fa29ed352aca282bec",
-    "packages/plugins/panel-manager-plugin/src/services/panel-manager.ts": "74ae11f2e1b7f074ca80129a3239069417f523fa",
-    "packages/plugins/panel-manager-plugin/src/types.ts": "eda980407d8eb830108b30f60bae42bfb20e9985",
+    "packages/plugins/panel-manager-plugin/src/services/panel-manager.ts": "ba1d87dca960c9a12b3f1dbc5cb03094c3122cbc",
+    "packages/plugins/panel-manager-plugin/src/types.ts": "55fb77e160b875cedb8545f258a5dbd1a57fe29b",
     "packages/plugins/panel-manager-plugin/tsconfig.json": "4b7a4f197dc4f9c62c2938fb3b77780944ad7675"
   },
   "arguments": "npm run build:fast -- --dts-resolve "

package/dist/esm/index.js

@@ -12,6 +12,77 @@ var __decorateClass = (decorators, target, key, kind) => {
 // src/create-panel-manager-plugin.ts
 import { definePluginCreator } from "@flowgram.ai/core";
 
+// src/components/resize-bar/index.tsx
+import { useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+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(
+    "div",
+    {
+      onMouseDown: (e) => {
+        currentPoint.current = isVertical ? e.clientX : e.clientY;
+        e.stopPropagation();
+        e.preventDefault();
+        setIsDragging(true);
+        const mouseUp = () => {
+          currentPoint.current = null;
+          document.body.removeEventListener("mouseup", mouseUp);
+          document.body.removeEventListener("mousemove", mouseMove);
+          setIsDragging(false);
+        };
+        const mouseMove = (e2) => {
+          const delta = currentPoint.current - (isVertical ? e2.clientX : e2.clientY);
+          onResize(size + delta);
+        };
+        document.body.addEventListener("mouseup", mouseUp);
+        document.body.addEventListener("mousemove", mouseMove);
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        zIndex: 999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "auto",
+        ...isVertical ? {
+          cursor: "ew-resize",
+          height: "100%",
+          marginLeft: -5,
+          width: 10
+        } : {
+          cursor: "ns-resize",
+          width: "100%",
+          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"
+          }
+        }
+      )
+    }
+  );
+};
+
 // src/services/panel-config.ts
 var PanelManagerConfig = Symbol("PanelManagerConfig");
 var defineConfig = (config) => {
@@ -22,9 +93,16 @@ var defineConfig = (config) => {
     bottom: {
       max: 1
     },
+    dockedRight: {
+      max: 1
+    },
+    dockedBottom: {
+      max: 1
+    },
     factories: [],
     autoResize: true,
     layerProps: {},
+    resizeBarRender: ResizeBar,
     getPopupContainer: (ctx) => ctx.playground.node.parentNode
   };
   return {
@@ -35,6 +113,7 @@ var defineConfig = (config) => {
 
 // src/services/panel-manager.ts
 import { injectable, inject } from "inversify";
+import { Playground } from "@flowgram.ai/core";
 
 // src/services/float-panel.ts
 import { Emitter } from "@flowgram.ai/utils";
@@ -98,6 +177,8 @@ var PanelManager = class {
     this.config.factories.forEach((factory) => this.register(factory));
     this.right = new FloatPanel(this.config.right);
     this.bottom = new FloatPanel(this.config.bottom);
+    this.dockedRight = new FloatPanel(this.config.dockedRight);
+    this.dockedBottom = new FloatPanel(this.config.dockedBottom);
   }
   register(factory) {
     this.panelRegistry.set(factory.key, factory);
@@ -113,15 +194,32 @@ var PanelManager = class {
   close(key) {
     this.right.close(key);
     this.bottom.close(key);
+    this.dockedRight.close(key);
+    this.dockedBottom.close(key);
   }
   getPanel(area) {
-    return area === "right" ? this.right : this.bottom;
+    switch (area) {
+      case "docked-bottom":
+        return this.dockedBottom;
+      case "docked-right":
+        return this.dockedRight;
+      case "bottom":
+        return this.bottom;
+      case "right":
+      default:
+        return this.right;
+    }
   }
   dispose() {
     this.right.dispose();
     this.bottom.dispose();
+    this.dockedBottom.dispose();
+    this.dockedRight.dispose();
   }
 };
+__decorateClass([
+  inject(Playground)
+], PanelManager.prototype, "playground", 2);
 __decorateClass([
   inject(PanelManagerConfig)
 ], PanelManager.prototype, "config", 2);
@@ -165,53 +263,62 @@ var usePanelManager = () => useService(PanelManager);
 
 // src/components/panel-layer/css.ts
 var globalCSS = `
-  .gedit-flow-panel-layer * {
+  .gedit-flow-panel-layer-wrap * {
     box-sizing: border-box;
   }
   .gedit-flow-panel-layer-wrap {
-    pointer-events: none;
     position: absolute;
     top: 0;
     left: 0;
     display: flex;
-    column-gap: 4px;
     width: 100%;
     height: 100%;
+    overflow: hidden;
+  }
+  .gedit-flow-panel-layer-wrap-docked {
+
+  }
+  .gedit-flow-panel-layer-wrap-floating {
+    column-gap: 4px;
     padding: 4px;
+    pointer-events: none;
+  }
+
+  .gedit-flow-panel-left-area {
+    width: 100%;
+    min-width: 0;
+    flex-grow: 0;
+    flex-shrink: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .gedit-flow-panel-layer-wrap-floating .gedit-flow-panel-left-area {
+    row-gap: 4px;
+  }
+  .gedit-flow-panel-right-area {
+    height: 100%;
+    flex-grow: 1;
+    flex-shrink: 0;
+    min-width: 0;
+    display: flex;
+    column-gap: 4px;
+  }
+  
+  .gedit-flow-panel-main-area {
+    position: relative;
     overflow: hidden;
+    flex-grow: 0;
+    flex-shrink: 1;
+    width: 100%;
+    height: 100%;
+  }
+  .gedit-flow-panel-bottom-area {
+    flex-grow: 1;
+    flex-shrink: 0;
+    width: 100%;
+    min-height: 0;
   }
 `;
-var leftArea = {
-  width: "100%",
-  minWidth: 0,
-  flexGrow: 0,
-  flexShrink: 1,
-  display: "flex",
-  flexDirection: "column",
-  rowGap: "4px"
-};
-var rightArea = {
-  height: "100%",
-  flexGrow: 1,
-  flexShrink: 0,
-  minWidth: 0,
-  display: "flex",
-  columnGap: "4px"
-};
-var mainArea = {
-  position: "relative",
-  overflow: "hidden",
-  flexGrow: 0,
-  flexShrink: 1,
-  width: "100%",
-  height: "100%"
-};
-var bottomArea = {
-  flexGrow: 1,
-  flexShrink: 0,
-  width: "100%",
-  minHeight: 0
-};
 var floatPanelWrap = {
   pointerEvents: "auto",
   height: "100%",
@@ -219,82 +326,13 @@ var floatPanelWrap = {
   overflow: "auto"
 };
 
-// src/components/resize-bar/index.tsx
-import { useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-var ResizeBar = ({ onResize, size, isVertical }) => {
-  const currentPoint = useRef(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      onMouseDown: (e) => {
-        currentPoint.current = isVertical ? e.clientX : e.clientY;
-        e.stopPropagation();
-        e.preventDefault();
-        setIsDragging(true);
-        const mouseUp = () => {
-          currentPoint.current = null;
-          document.body.removeEventListener("mouseup", mouseUp);
-          document.body.removeEventListener("mousemove", mouseMove);
-          setIsDragging(false);
-        };
-        const mouseMove = (e2) => {
-          const delta = currentPoint.current - (isVertical ? e2.clientX : e2.clientY);
-          onResize(size + delta);
-        };
-        document.body.addEventListener("mouseup", mouseUp);
-        document.body.addEventListener("mousemove", mouseMove);
-      },
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      style: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        zIndex: 999,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        pointerEvents: "auto",
-        ...isVertical ? {
-          cursor: "ew-resize",
-          height: "100%",
-          marginLeft: -5,
-          width: 10
-        } : {
-          cursor: "ns-resize",
-          width: "100%",
-          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"
-          }
-        }
-      )
-    }
-  );
-};
-
 // src/components/panel-layer/float-panel.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var FloatPanel2 = ({ area }) => {
   const [, setVersion] = useState2(0);
   const panelManager = usePanelManager();
   const panel = useRef2(panelManager.getPanel(area));
+  const isHorizontal = ["right", "docked-right"].includes(area);
   const render = () => panel.current.elements.map((i) => /* @__PURE__ */ jsx2("div", { className: "float-panel-wrap", style: { ...floatPanelWrap, ...i.style }, children: i.el }, i.key));
   const node = useRef2(render());
   useEffect2(() => {
@@ -308,7 +346,7 @@ var FloatPanel2 = ({ area }) => {
   }, [panel]);
   const onResize = useCallback((newSize) => panel.current.updateSize(newSize), []);
   const size = panel.current.currentSize;
-  const sizeStyle = area === "right" ? { width: size, height: "100%" } : { height: size, width: "100%" };
+  const sizeStyle = isHorizontal ? { width: size, height: "100%" } : { height: size, width: "100%" };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -319,7 +357,11 @@ var FloatPanel2 = ({ area }) => {
         ...sizeStyle
       },
       children: [
-        panelManager.config.autoResize && panel.current.elements.length > 0 && /* @__PURE__ */ jsx2(ResizeBar, { size, isVertical: area === "right", onResize }),
+        panelManager.config.resizeBarRender({
+          size,
+          direction: isHorizontal ? "vertical" : "horizontal",
+          onResize
+        }),
         node.current
       ]
     }
@@ -328,20 +370,41 @@ var FloatPanel2 = ({ area }) => {
 
 // src/components/panel-layer/panel-layer.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var PanelLayer = ({ className, style, children }) => {
+var PanelLayer = ({
+  mode = "floating",
+  className,
+  style,
+  children
+}) => {
   useGlobalCSS({
     cssText: globalCSS,
     id: "flow-panel-layer-css"
   });
-  return /* @__PURE__ */ jsxs2("div", { className: clsx("gedit-flow-panel-layer-wrap", className), style, children: [
-    /* @__PURE__ */ jsxs2("div", { className: "gedit-flow-panel-left-area", style: leftArea, children: [
-      /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-main-area", style: mainArea, children }),
-      /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-bottom-area", style: bottomArea, children: /* @__PURE__ */ jsx3(FloatPanel2, { area: "bottom" }) })
-    ] }),
-    /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-right-area", style: rightArea, children: /* @__PURE__ */ jsx3(FloatPanel2, { area: "right" }) })
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: clsx(
+        "gedit-flow-panel-layer-wrap",
+        mode === "docked" && "gedit-flow-panel-layer-wrap-docked",
+        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(FloatPanel2, { area: mode === "docked" ? "docked-bottom" : "bottom" }) })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-right-area", children: /* @__PURE__ */ jsx3(FloatPanel2, { 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 });
+
 // src/services/panel-layer.ts
 var PanelLayer2 = class extends Layer {
   constructor() {
@@ -398,6 +461,7 @@ var createPanelManagerPlugin = definePluginCreator({
   }
 });
 export {
+  DockedPanelLayer,
   PanelManager,
   ResizeBar,
   createPanelManagerPlugin,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/create-panel-manager-plugin.ts","../../src/services/panel-config.ts","../../src/services/panel-manager.ts","../../src/services/float-panel.ts","../../src/services/panel-layer.ts","../../src/components/panel-layer/panel-layer.tsx","../../src/hooks/use-global-css.ts","../../src/components/panel-layer/float-panel.tsx","../../src/hooks/use-panel-manager.ts","../../src/components/panel-layer/css.ts","../../src/components/resize-bar/index.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 { defineConfig } from './services/panel-config';\nimport { PanelManager, PanelManagerConfig, PanelLayer } from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n  onBind: ({ bind }, opt) => {\n    bind(PanelManager).to(PanelManager).inSingletonScope();\n    bind(PanelManagerConfig).toConstantValue(defineConfig(opt));\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 { PluginContext } from '@flowgram.ai/core';\n\nimport type { PanelFactory, PanelConfig } from '../types';\nimport type { PanelLayerProps } from '../components/panel-layer';\n\nexport interface PanelManagerConfig {\n  factories: PanelFactory<any>[];\n  right: PanelConfig;\n  bottom: PanelConfig;\n  autoResize: boolean;\n  layerProps: PanelLayerProps;\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    factories: [],\n    autoResize: true,\n    layerProps: {},\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\nimport { injectable, inject } from 'inversify';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelFactory } from '../types';\nimport { FloatPanel } from './float-panel';\n\n@injectable()\nexport class PanelManager {\n  @inject(PanelManagerConfig) readonly config: PanelManagerConfig;\n\n  readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n  right: FloatPanel;\n\n  bottom: FloatPanel;\n\n  init() {\n    this.config.factories.forEach((factory) => this.register(factory));\n    this.right = new FloatPanel(this.config.right);\n    this.bottom = new FloatPanel(this.config.bottom);\n  }\n\n  register<T extends any>(factory: PanelFactory<T>) {\n    this.panelRegistry.set(factory.key, factory);\n  }\n\n  open(key: string, area: Area = 'right', options?: any) {\n    const factory = this.panelRegistry.get(key);\n    if (!factory) {\n      return;\n    }\n    const panel = this.getPanel(area);\n    panel.open(factory, options);\n  }\n\n  close(key?: string) {\n    this.right.close(key);\n    this.bottom.close(key);\n  }\n\n  getPanel(area: Area) {\n    return area === 'right' ? this.right : this.bottom;\n  }\n\n  dispose() {\n    this.right.dispose();\n    this.bottom.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelElement {\n  key: string;\n  style?: React.CSSProperties;\n  el: React.ReactNode;\n}\n\nconst PANEL_SIZE_DEFAULT = 400;\n\nexport class FloatPanel {\n  elements: PanelElement[] = [];\n\n  private onUpdateEmitter = new Emitter<void>();\n\n  sizeMap = new Map<string, number>();\n\n  onUpdate = this.onUpdateEmitter.event;\n\n  currentFactoryKey = '';\n\n  updateSize(newSize: number) {\n    this.sizeMap.set(this.currentFactoryKey, newSize);\n    this.onUpdateEmitter.fire();\n  }\n\n  get currentSize(): number {\n    return this.sizeMap.get(this.currentFactoryKey) || PANEL_SIZE_DEFAULT;\n  }\n\n  constructor(private config: PanelConfig) {}\n\n  open(factory: PanelFactory<any>, options: any) {\n    const el = factory.render(options?.props);\n    const idx = this.elements.findIndex((e) => e.key === factory.key);\n    this.currentFactoryKey = factory.key;\n    if (!this.sizeMap.has(factory.key)) {\n      this.sizeMap.set(factory.key, factory.defaultSize || PANEL_SIZE_DEFAULT);\n    }\n    if (idx >= 0) {\n      this.elements[idx] = { el, key: factory.key, style: factory.style };\n    } else {\n      this.elements.push({ el, key: factory.key, style: factory.style });\n      if (this.elements.length > this.config.max) {\n        this.elements.shift();\n      }\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  get visible() {\n    return this.elements.length > 0;\n  }\n\n  close(key?: string) {\n    if (!key) {\n      this.elements = [];\n    } else {\n      this.elements = this.elements.filter((e) => e.key !== key);\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  dispose() {\n    this.elements = [];\n    this.onUpdateEmitter.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 { FloatPanel } from './float-panel';\nimport { leftArea, rightArea, mainArea, bottomArea, globalCSS } from './css';\n\nexport type PanelLayerProps = React.PropsWithChildren<{\n  className?: string;\n  style?: React.CSSProperties;\n}>;\n\nexport const PanelLayer: React.FC<PanelLayerProps> = ({ className, style, children }) => {\n  useGlobalCSS({\n    cssText: globalCSS,\n    id: 'flow-panel-layer-css',\n  });\n\n  return (\n    <div className={clsx('gedit-flow-panel-layer-wrap', className)} style={style}>\n      <div className=\"gedit-flow-panel-left-area\" style={leftArea}>\n        <div className=\"gedit-flow-panel-main-area\" style={mainArea}>\n          {children}\n        </div>\n        <div className=\"gedit-flow-panel-bottom-area\" style={bottomArea}>\n          <FloatPanel area=\"bottom\" />\n        </div>\n      </div>\n      <div className=\"gedit-flow-panel-right-area\" style={rightArea}>\n        <FloatPanel area=\"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, useRef, startTransition, useState, useCallback } from 'react';\n\nimport { Area } from '../../types';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { floatPanelWrap } from './css';\nimport { ResizeBar } from '../resize-bar';\n\nexport const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {\n  const [, setVersion] = useState(0);\n  const panelManager = usePanelManager();\n  const panel = useRef(panelManager.getPanel(area));\n  const render = () =>\n    panel.current.elements.map((i) => (\n      <div className=\"float-panel-wrap\" key={i.key} style={{ ...floatPanelWrap, ...i.style }}>\n        {i.el}\n      </div>\n    ));\n  const node = useRef(render());\n\n  useEffect(() => {\n    const dispose = panel.current.onUpdate(() => {\n      startTransition(() => {\n        node.current = render();\n        setVersion((v) => v + 1);\n      });\n    });\n    return () => dispose.dispose();\n  }, [panel]);\n  const onResize = useCallback((newSize: number) => panel.current!.updateSize(newSize), []);\n  const size = panel.current!.currentSize;\n  const sizeStyle =\n    area === 'right' ? { width: size, height: '100%' } : { height: size, width: '100%' };\n\n  return (\n    <div\n      className=\"gedit-flow-panel\"\n      style={{\n        position: 'relative',\n        display: panel.current.visible ? 'block' : 'none',\n        ...sizeStyle,\n      }}\n    >\n      {panelManager.config.autoResize && panel.current.elements.length > 0 && (\n        <ResizeBar size={size} isVertical={area === 'right'} onResize={onResize} />\n      )}\n      {node.current}\n    </div>\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\nexport const globalCSS = `\n  .gedit-flow-panel-layer * {\n    box-sizing: border-box;\n  }\n  .gedit-flow-panel-layer-wrap {\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    column-gap: 4px;\n    width: 100%;\n    height: 100%;\n    padding: 4px;\n    overflow: hidden;\n  }\n`;\n\nexport const leftArea: React.CSSProperties = {\n  width: '100%',\n  minWidth: 0,\n  flexGrow: 0,\n  flexShrink: 1,\n\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: '4px',\n};\n\nexport const rightArea: React.CSSProperties = {\n  height: '100%',\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n\n  display: 'flex',\n  columnGap: '4px',\n};\n\nexport const mainArea: React.CSSProperties = {\n  position: 'relative',\n  overflow: 'hidden',\n  flexGrow: 0,\n  flexShrink: 1,\n  width: '100%',\n  height: '100%',\n};\n\nexport const bottomArea: React.CSSProperties = {\n  flexGrow: 1,\n  flexShrink: 0,\n  width: '100%',\n  minHeight: 0,\n};\n\nexport const floatPanelWrap: React.CSSProperties = {\n  pointerEvents: 'auto',\n  height: '100%',\n  width: '100%',\n  overflow: 'auto',\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  onResize: (w: number) => void;\n  size: number;\n  isVertical?: boolean;\n}\n\nexport const ResizeBar: React.FC<Props> = ({ onResize, size, isVertical }) => {\n  const currentPoint = useRef<null | number>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\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"],"mappings":"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","names":["injectable","inject","useEffect","useRef","useState","e","jsx","FloatPanel","useState","useRef","useEffect","jsx","jsxs","FloatPanel","PanelLayer","inject","injectable","PanelLayer"]}
+{"version":3,"sources":["../../src/create-panel-manager-plugin.ts","../../src/components/resize-bar/index.tsx","../../src/services/panel-config.ts","../../src/services/panel-manager.ts","../../src/services/float-panel.ts","../../src/services/panel-layer.ts","../../src/components/panel-layer/panel-layer.tsx","../../src/hooks/use-global-css.ts","../../src/components/panel-layer/float-panel.tsx","../../src/hooks/use-panel-manager.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 { defineConfig } from './services/panel-config';\nimport { PanelManager, PanelManagerConfig, PanelLayer } from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n  onBind: ({ bind }, opt) => {\n    bind(PanelManager).to(PanelManager).inSingletonScope();\n    bind(PanelManagerConfig).toConstantValue(defineConfig(opt));\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 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  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\nimport { injectable, inject } from 'inversify';\nimport { Playground } from '@flowgram.ai/core';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelFactory } from '../types';\nimport { FloatPanel } from './float-panel';\n\n@injectable()\nexport class PanelManager {\n  @inject(Playground) readonly playground: Playground;\n\n  @inject(PanelManagerConfig) readonly config: PanelManagerConfig;\n\n  readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n  right: FloatPanel;\n\n  bottom: FloatPanel;\n\n  dockedRight: FloatPanel;\n\n  dockedBottom: FloatPanel;\n\n  init() {\n    this.config.factories.forEach((factory) => this.register(factory));\n    this.right = new FloatPanel(this.config.right);\n    this.bottom = new FloatPanel(this.config.bottom);\n    this.dockedRight = new FloatPanel(this.config.dockedRight);\n    this.dockedBottom = new FloatPanel(this.config.dockedBottom);\n  }\n\n  register<T extends any>(factory: PanelFactory<T>) {\n    this.panelRegistry.set(factory.key, factory);\n  }\n\n  open(key: string, area: Area = 'right', options?: any) {\n    const factory = this.panelRegistry.get(key);\n    if (!factory) {\n      return;\n    }\n    const panel = this.getPanel(area);\n    panel.open(factory, options);\n  }\n\n  close(key?: string) {\n    this.right.close(key);\n    this.bottom.close(key);\n    this.dockedRight.close(key);\n    this.dockedBottom.close(key);\n  }\n\n  getPanel(area: Area) {\n    switch (area) {\n      case 'docked-bottom':\n        return this.dockedBottom;\n      case 'docked-right':\n        return this.dockedRight;\n      case 'bottom':\n        return this.bottom;\n      case 'right':\n      default:\n        return this.right;\n    }\n  }\n\n  dispose() {\n    this.right.dispose();\n    this.bottom.dispose();\n    this.dockedBottom.dispose();\n    this.dockedRight.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelElement {\n  key: string;\n  style?: React.CSSProperties;\n  el: React.ReactNode;\n}\n\nconst PANEL_SIZE_DEFAULT = 400;\n\nexport class FloatPanel {\n  elements: PanelElement[] = [];\n\n  private onUpdateEmitter = new Emitter<void>();\n\n  sizeMap = new Map<string, number>();\n\n  onUpdate = this.onUpdateEmitter.event;\n\n  currentFactoryKey = '';\n\n  updateSize(newSize: number) {\n    this.sizeMap.set(this.currentFactoryKey, newSize);\n    this.onUpdateEmitter.fire();\n  }\n\n  get currentSize(): number {\n    return this.sizeMap.get(this.currentFactoryKey) || PANEL_SIZE_DEFAULT;\n  }\n\n  constructor(private config: PanelConfig) {}\n\n  open(factory: PanelFactory<any>, options: any) {\n    const el = factory.render(options?.props);\n    const idx = this.elements.findIndex((e) => e.key === factory.key);\n    this.currentFactoryKey = factory.key;\n    if (!this.sizeMap.has(factory.key)) {\n      this.sizeMap.set(factory.key, factory.defaultSize || PANEL_SIZE_DEFAULT);\n    }\n    if (idx >= 0) {\n      this.elements[idx] = { el, key: factory.key, style: factory.style };\n    } else {\n      this.elements.push({ el, key: factory.key, style: factory.style });\n      if (this.elements.length > this.config.max) {\n        this.elements.shift();\n      }\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  get visible() {\n    return this.elements.length > 0;\n  }\n\n  close(key?: string) {\n    if (!key) {\n      this.elements = [];\n    } else {\n      this.elements = this.elements.filter((e) => e.key !== key);\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  dispose() {\n    this.elements = [];\n    this.onUpdateEmitter.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 { FloatPanel } from './float-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          <FloatPanel area={mode === 'docked' ? 'docked-bottom' : 'bottom'} />\n        </div>\n      </div>\n      <div className=\"gedit-flow-panel-right-area\">\n        <FloatPanel 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, useRef, startTransition, useState, useCallback } from 'react';\n\nimport { Area } from '../../types';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { floatPanelWrap } from './css';\n\nexport const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {\n  const [, setVersion] = useState(0);\n  const panelManager = usePanelManager();\n  const panel = useRef(panelManager.getPanel(area));\n\n  const isHorizontal = ['right', 'docked-right'].includes(area);\n\n  const render = () =>\n    panel.current.elements.map((i) => (\n      <div className=\"float-panel-wrap\" key={i.key} style={{ ...floatPanelWrap, ...i.style }}>\n        {i.el}\n      </div>\n    ));\n  const node = useRef(render());\n\n  useEffect(() => {\n    const dispose = panel.current.onUpdate(() => {\n      startTransition(() => {\n        node.current = render();\n        setVersion((v) => v + 1);\n      });\n    });\n    return () => dispose.dispose();\n  }, [panel]);\n  const onResize = useCallback((newSize: number) => panel.current!.updateSize(newSize), []);\n  const size = panel.current!.currentSize;\n  const sizeStyle = isHorizontal\n    ? { width: size, height: '100%' }\n    : { height: size, width: '100%' };\n\n  return (\n    <div\n      className=\"gedit-flow-panel\"\n      style={{\n        position: 'relative',\n        display: panel.current.visible ? 'block' : 'none',\n        ...sizeStyle,\n      }}\n    >\n      {panelManager.config.resizeBarRender({\n        size,\n        direction: isHorizontal ? 'vertical' : 'horizontal',\n        onResize,\n      })}\n      {node.current}\n    </div>\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\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    column-gap: 4px;\n    padding: 4px;\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-layer-wrap-floating .gedit-flow-panel-left-area {\n    row-gap: 4px;\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    column-gap: 4px;\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`;\n\nexport const floatPanelWrap: React.CSSProperties = {\n  pointerEvents: 'auto',\n  height: '100%',\n  width: '100%',\n  overflow: 'auto',\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":";;;;;;;;;;;;AAKA,SAAS,2BAA2B;;;ACApC,SAAgB,QAAQ,gBAAgB;AA6DlC;AArDC,IAAM,YAA6B,CAAC,EAAE,UAAU,MAAM,UAAU,MAAM;AAC3E,QAAM,eAAe,OAAsB,IAAI;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,aAAa,cAAc;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,CAAC,MAAM;AAClB,qBAAa,UAAU,aAAa,EAAE,UAAU,EAAE;AAClD,UAAE,gBAAgB;AAClB,UAAE,eAAe;AACjB,sBAAc,IAAI;AAClB,cAAM,UAAU,MAAM;AACpB,uBAAa,UAAU;AACvB,mBAAS,KAAK,oBAAoB,WAAW,OAAO;AACpD,mBAAS,KAAK,oBAAoB,aAAa,SAAS;AACxD,wBAAc,KAAK;AAAA,QACrB;AACA,cAAM,YAAY,CAACA,OAAkB;AACnC,gBAAM,QAAQ,aAAa,WAAY,aAAaA,GAAE,UAAUA,GAAE;AAClE,mBAAS,OAAO,KAAK;AAAA,QACvB;AACA,iBAAS,KAAK,iBAAiB,WAAW,OAAO;AACjD,iBAAS,KAAK,iBAAiB,aAAa,SAAS;AAAA,MACvD;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,GAAI,aACA;AAAA,UACE,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,OAAO;AAAA,QACT,IACA;AAAA,UACE,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,WAAW;AAAA,UACX,QAAQ;AAAA,QACV;AAAA,MACN;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,GAAI,aACA;AAAA,cACE,OAAO;AAAA,cACP,QAAQ;AAAA,YACV,IACA;AAAA,cACE,QAAQ;AAAA,cACR,OAAO;AAAA,YACT;AAAA,YACJ,iBAAiB,cAAc,YAAY,6BAA6B;AAAA,UAC1E;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;ACrDO,IAAM,qBAAqB,OAAO,oBAAoB;AAEtD,IAAM,eAAe,CAAC,WAAwC;AACnE,QAAM,gBAAoC;AAAA,IACxC,OAAO;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,MACN,KAAK;AAAA,IACP;AAAA,IACA,aAAa;AAAA,MACX,KAAK;AAAA,IACP;AAAA,IACA,cAAc;AAAA,MACZ,KAAK;AAAA,IACP;AAAA,IACA,WAAW,CAAC;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY,CAAC;AAAA,IACb,iBAAiB;AAAA,IACjB,mBAAmB,CAAC,QAAuB,IAAI,WAAW,KAAK;AAAA,EACjE;AACA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF;;;AClDA,SAAS,YAAY,cAAc;AACnC,SAAS,kBAAkB;;;ACD3B,SAAS,eAAe;AAUxB,IAAM,qBAAqB;AAEpB,IAAM,aAAN,MAAiB;AAAA,EAoBtB,YAAoB,QAAqB;AAArB;AAnBpB,oBAA2B,CAAC;AAE5B,SAAQ,kBAAkB,IAAI,QAAc;AAE5C,mBAAU,oBAAI,IAAoB;AAElC,oBAAW,KAAK,gBAAgB;AAEhC,6BAAoB;AAAA,EAWsB;AAAA,EAT1C,WAAW,SAAiB;AAC1B,SAAK,QAAQ,IAAI,KAAK,mBAAmB,OAAO;AAChD,SAAK,gBAAgB,KAAK;AAAA,EAC5B;AAAA,EAEA,IAAI,cAAsB;AACxB,WAAO,KAAK,QAAQ,IAAI,KAAK,iBAAiB,KAAK;AAAA,EACrD;AAAA,EAIA,KAAK,SAA4B,SAAc;AAC7C,UAAM,KAAK,QAAQ,OAAO,SAAS,KAAK;AACxC,UAAM,MAAM,KAAK,SAAS,UAAU,CAAC,MAAM,EAAE,QAAQ,QAAQ,GAAG;AAChE,SAAK,oBAAoB,QAAQ;AACjC,QAAI,CAAC,KAAK,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAClC,WAAK,QAAQ,IAAI,QAAQ,KAAK,QAAQ,eAAe,kBAAkB;AAAA,IACzE;AACA,QAAI,OAAO,GAAG;AACZ,WAAK,SAAS,GAAG,IAAI,EAAE,IAAI,KAAK,QAAQ,KAAK,OAAO,QAAQ,MAAM;AAAA,IACpE,OAAO;AACL,WAAK,SAAS,KAAK,EAAE,IAAI,KAAK,QAAQ,KAAK,OAAO,QAAQ,MAAM,CAAC;AACjE,UAAI,KAAK,SAAS,SAAS,KAAK,OAAO,KAAK;AAC1C,aAAK,SAAS,MAAM;AAAA,MACtB;AAAA,IACF;AACA,SAAK,gBAAgB,KAAK;AAAA,EAC5B;AAAA,EAEA,IAAI,UAAU;AACZ,WAAO,KAAK,SAAS,SAAS;AAAA,EAChC;AAAA,EAEA,MAAM,KAAc;AAClB,QAAI,CAAC,KAAK;AACR,WAAK,WAAW,CAAC;AAAA,IACnB,OAAO;AACL,WAAK,WAAW,KAAK,SAAS,OAAO,CAAC,MAAM,EAAE,QAAQ,GAAG;AAAA,IAC3D;AACA,SAAK,gBAAgB,KAAK;AAAA,EAC5B;AAAA,EAEA,UAAU;AACR,SAAK,WAAW,CAAC;AACjB,SAAK,gBAAgB,QAAQ;AAAA,EAC/B;AACF;;;AD7DO,IAAM,eAAN,MAAmB;AAAA,EAAnB;AAKL,SAAS,gBAAgB,oBAAI,IAA+B;AAAA;AAAA,EAU5D,OAAO;AACL,SAAK,OAAO,UAAU,QAAQ,CAAC,YAAY,KAAK,SAAS,OAAO,CAAC;AACjE,SAAK,QAAQ,IAAI,WAAW,KAAK,OAAO,KAAK;AAC7C,SAAK,SAAS,IAAI,WAAW,KAAK,OAAO,MAAM;AAC/C,SAAK,cAAc,IAAI,WAAW,KAAK,OAAO,WAAW;AACzD,SAAK,eAAe,IAAI,WAAW,KAAK,OAAO,YAAY;AAAA,EAC7D;AAAA,EAEA,SAAwB,SAA0B;AAChD,SAAK,cAAc,IAAI,QAAQ,KAAK,OAAO;AAAA,EAC7C;AAAA,EAEA,KAAK,KAAa,OAAa,SAAS,SAAe;AACrD,UAAM,UAAU,KAAK,cAAc,IAAI,GAAG;AAC1C,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AACA,UAAM,QAAQ,KAAK,SAAS,IAAI;AAChC,UAAM,KAAK,SAAS,OAAO;AAAA,EAC7B;AAAA,EAEA,MAAM,KAAc;AAClB,SAAK,MAAM,MAAM,GAAG;AACpB,SAAK,OAAO,MAAM,GAAG;AACrB,SAAK,YAAY,MAAM,GAAG;AAC1B,SAAK,aAAa,MAAM,GAAG;AAAA,EAC7B;AAAA,EAEA,SAAS,MAAY;AACnB,YAAQ,MAAM;AAAA,MACZ,KAAK;AACH,eAAO,KAAK;AAAA,MACd,KAAK;AACH,eAAO,KAAK;AAAA,MACd,KAAK;AACH,eAAO,KAAK;AAAA,MACd,KAAK;AAAA,MACL;AACE,eAAO,KAAK;AAAA,IAChB;AAAA,EACF;AAAA,EAEA,UAAU;AACR,SAAK,MAAM,QAAQ;AACnB,SAAK,OAAO,QAAQ;AACpB,SAAK,aAAa,QAAQ;AAC1B,SAAK,YAAY,QAAQ;AAAA,EAC3B;AACF;AA9D+B;AAAA,EAA5B,OAAO,UAAU;AAAA,GADP,aACkB;AAEQ;AAAA,EAApC,OAAO,kBAAkB;AAAA,GAHf,aAG0B;AAH1B,eAAN;AAAA,EADN,WAAW;AAAA,GACC;;;AERb,OAAO,cAAc;AACrB,SAAS,qBAAqB;AAE9B,SAAS,cAAAC,aAAY,UAAAC,eAAc;AACnC,SAAS,UAAU,kBAAkB;AACrC,SAAS,OAAO,qBAAqB;;;ACLrC,OAAO,UAAU;;;ACAjB,SAAS,iBAAiB;AAQnB,IAAM,eAAe,CAAC,EAAE,SAAS,IAAI,QAAQ,MAA2B;AAC7E,YAAU,MAAM;AAEd,QAAI,OAAO,aAAa,YAAa;AAErC,QAAI,SAAS,eAAe,EAAE,EAAG;AAEjC,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,KAAK;AACX,UAAM,cAAc;AACpB,aAAS,KAAK,YAAY,KAAK;AAE/B,WAAO,MAAM;AACX,YAAM,WAAW,SAAS,eAAe,EAAE;AAC3C,UAAI,YAAY,QAAS,UAAS,OAAO;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,EAAE,CAAC;AACT;;;ACzBA,SAAS,aAAAC,YAAW,UAAAC,SAAQ,iBAAiB,YAAAC,WAAU,mBAAmB;;;ACA1E,SAAS,kBAAkB;AAIpB,IAAM,kBAAkB,MAAM,WAAyB,YAAY;;;ACJnE,IAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0DlB,IAAM,iBAAsC;AAAA,EACjD,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AACZ;;;AFhDM,gBAAAC,MAsBF,YAtBE;AATC,IAAMC,cAAuC,CAAC,EAAE,KAAK,MAAM;AAChE,QAAM,CAAC,EAAE,UAAU,IAAIC,UAAS,CAAC;AACjC,QAAM,eAAe,gBAAgB;AACrC,QAAM,QAAQC,QAAO,aAAa,SAAS,IAAI,CAAC;AAEhD,QAAM,eAAe,CAAC,SAAS,cAAc,EAAE,SAAS,IAAI;AAE5D,QAAM,SAAS,MACb,MAAM,QAAQ,SAAS,IAAI,CAAC,MAC1B,gBAAAH,KAAC,SAAI,WAAU,oBAA+B,OAAO,EAAE,GAAG,gBAAgB,GAAG,EAAE,MAAM,GAClF,YAAE,MADkC,EAAE,GAEzC,CACD;AACH,QAAM,OAAOG,QAAO,OAAO,CAAC;AAE5B,EAAAC,WAAU,MAAM;AACd,UAAM,UAAU,MAAM,QAAQ,SAAS,MAAM;AAC3C,sBAAgB,MAAM;AACpB,aAAK,UAAU,OAAO;AACtB,mBAAW,CAAC,MAAM,IAAI,CAAC;AAAA,MACzB,CAAC;AAAA,IACH,CAAC;AACD,WAAO,MAAM,QAAQ,QAAQ;AAAA,EAC/B,GAAG,CAAC,KAAK,CAAC;AACV,QAAM,WAAW,YAAY,CAAC,YAAoB,MAAM,QAAS,WAAW,OAAO,GAAG,CAAC,CAAC;AACxF,QAAM,OAAO,MAAM,QAAS;AAC5B,QAAM,YAAY,eACd,EAAE,OAAO,MAAM,QAAQ,OAAO,IAC9B,EAAE,QAAQ,MAAM,OAAO,OAAO;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,UAAU;AAAA,QACV,SAAS,MAAM,QAAQ,UAAU,UAAU;AAAA,QAC3C,GAAG;AAAA,MACL;AAAA,MAEC;AAAA,qBAAa,OAAO,gBAAgB;AAAA,UACnC;AAAA,UACA,WAAW,eAAe,aAAa;AAAA,UACvC;AAAA,QACF,CAAC;AAAA,QACA,KAAK;AAAA;AAAA;AAAA,EACR;AAEJ;;;AFnBM,SACE,OAAAC,MADF,QAAAC,aAAA;AArBC,IAAM,aAAwC,CAAC;AAAA,EACpD,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,eAAa;AAAA,IACX,SAAS;AAAA,IACT,IAAI;AAAA,EACN,CAAC;AAED,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,YAAY;AAAA,QACrB,SAAS,cAAc;AAAA,QACvB;AAAA,MACF;AAAA,MACA;AAAA,MAEA;AAAA,wBAAAA,MAAC,SAAI,WAAU,8BACb;AAAA,0BAAAD,KAAC,SAAI,WAAU,8BAA8B,UAAS;AAAA,UACtD,gBAAAA,KAAC,SAAI,WAAU,gCACb,0BAAAA,KAACE,aAAA,EAAW,MAAM,SAAS,WAAW,kBAAkB,UAAU,GACpE;AAAA,WACF;AAAA,QACA,gBAAAF,KAAC,SAAI,WAAU,+BACb,0BAAAA,KAACE,aAAA,EAAW,MAAM,SAAS,WAAW,iBAAiB,SAAS,GAClE;AAAA;AAAA;AAAA,EACF;AAEJ;;;AKxCE,gBAAAC,YAAA;AADK,IAAM,mBAAoD,CAAC,UAChE,gBAAAA,KAAC,cAAW,MAAK,UAAU,GAAG,OAAO;;;ANMhC,IAAMC,cAAN,cAAyB,MAAM;AAAA,EAA/B;AAAA;AAKL,SAAS,YAAY,SAAS,mBAAmB,wBAAwB;AAEzE,kBAA6B;AAAA;AAAA,EAE7B,UAAgB;AACd,SAAK,YAAY,kBAAkB,KAAK,aAAa,EAAE,YAAY,KAAK,SAAS;AACjF,SAAK,UAAU;AAAA,MACb,WAAW,OAAO,MAAM;AAEtB,aAAK,UAAU,OAAO;AAAA,MACxB,CAAC;AAAA,IACH;AACA,UAAM,cAAc;AAAA,MAClB,eAAe;AAAA,MACf,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA,IACV;AACA,aAAS,SAAS,KAAK,WAAW,WAAW;AAAA,EAC/C;AAAA,EAEA,SAAsB;AACpB,QAAI,CAAC,KAAK,QAAQ;AAChB,YAAM,EAAE,UAAU,GAAG,YAAY,IAAI,KAAK,YAAY;AACtD,WAAK,SAAS,cAAc,YAAgB,aAAa,QAAQ;AAAA,IACnE;AACA,WAAO,SAAS,aAAa,KAAK,QAAQ,KAAK,SAAS;AAAA,EAC1D;AACF;AAnC+C;AAAA,EAA5CC,QAAO,kBAAkB;AAAA,GADfD,YACkC;AAEL;AAAA,EAAvCC,QAAO,aAAa;AAAA,GAHVD,YAG6B;AAH7BA,cAAN;AAAA,EADNE,YAAW;AAAA,GACCF;;;ALNN,IAAM,2BAA2B,oBAAiD;AAAA,EACvF,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ;AACzB,SAAK,YAAY,EAAE,GAAG,YAAY,EAAE,iBAAiB;AACrD,SAAK,kBAAkB,EAAE,gBAAgB,aAAa,GAAG,CAAC;AAAA,EAC5D;AAAA,EACA,OAAO,KAAK;AACV,QAAI,WAAW,cAAcG,WAAU;AACvC,UAAM,eAAe,IAAI,UAAU,IAAkB,YAAY;AACjE,iBAAa,KAAK;AAAA,EACpB;AACF,CAAC;","names":["e","injectable","inject","useEffect","useRef","useState","jsx","FloatPanel","useState","useRef","useEffect","jsx","jsxs","FloatPanel","jsx","PanelLayer","inject","injectable","PanelLayer"]}

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as _flowgram_ai_core from '@flowgram.ai/core';
-import { PluginContext } from '@flowgram.ai/core';
+import { PluginContext, Playground } from '@flowgram.ai/core';
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
 import React$1 from 'react';
 
@@ -7,7 +7,7 @@ import React$1 from 'react';
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
-type Area = 'right' | 'bottom';
+type Area = 'right' | 'bottom' | 'docked-right' | 'docked-bottom';
 interface PanelConfig {
     /** max panel */
     max: number;
@@ -24,10 +24,20 @@ interface PanelFactory<T extends any> {
  * SPDX-License-Identifier: MIT
  */
 type PanelLayerProps = React.PropsWithChildren<{
+    /** 模式：悬浮｜挤压 */
+    mode?: 'floating' | 'docked';
     className?: string;
     style?: React.CSSProperties;
 }>;
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+type DockedPanelLayerProps = Omit<PanelLayerProps, 'mode'>;
+declare const DockedPanelLayer: React.FC<DockedPanelLayerProps>;
+
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
@@ -37,8 +47,15 @@ interface PanelManagerConfig {
     factories: PanelFactory<any>[];
     right: PanelConfig;
     bottom: PanelConfig;
+    dockedRight: PanelConfig;
+    dockedBottom: PanelConfig;
     autoResize: boolean;
     layerProps: PanelLayerProps;
+    resizeBarRender: ({ size, }: {
+        size: number;
+        direction?: 'vertical' | 'horizontal';
+        onResize: (size: number) => void;
+    }) => React.ReactNode;
     getPopupContainer: (ctx: PluginContext) => HTMLElement;
 }
 declare const PanelManagerConfig: unique symbol;
@@ -70,10 +87,13 @@ declare class FloatPanel {
  */
 
 declare class PanelManager {
+    readonly playground: Playground;
     readonly config: PanelManagerConfig;
     readonly panelRegistry: Map<string, PanelFactory<any>>;
     right: FloatPanel;
     bottom: FloatPanel;
+    dockedRight: FloatPanel;
+    dockedBottom: FloatPanel;
     init(): void;
     register<T extends any>(factory: PanelFactory<T>): void;
     open(key: string, area?: Area, options?: any): void;
@@ -97,10 +117,10 @@ declare const usePanelManager: () => PanelManager;
  */
 
 interface Props {
-    onResize: (w: number) => void;
     size: number;
-    isVertical?: boolean;
+    direction?: 'vertical' | 'horizontal';
+    onResize: (w: number) => void;
 }
 declare const ResizeBar: React$1.FC<Props>;
 
-export { type Area, type PanelFactory, PanelManager, PanelManagerConfig, ResizeBar, createPanelManagerPlugin, usePanelManager };
+export { type Area, DockedPanelLayer, type DockedPanelLayerProps, type PanelFactory, PanelManager, PanelManagerConfig, ResizeBar, createPanelManagerPlugin, usePanelManager };