@flowgram.ai/panel-manager-plugin 0.1.0-alpha.23 → 0.1.0-alpha.24

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[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 82ms\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 85ms\n"}
+{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js     \u001b[22m\u001b[32m18.85 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mCJS\u001b[39m \u001b[1mdist/index.js.map \u001b[22m\u001b[32m31.19 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mCJS\u001b[39m ⚡️ Build success in 110ms\n"}
+{"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js     \u001b[22m\u001b[32m16.16 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mESM\u001b[39m \u001b[1mdist/esm/index.js.map \u001b[22m\u001b[32m30.61 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mESM\u001b[39m ⚡️ Build success in 111ms\n"}
 {"kind":"O","text":"\u001b[34mDTS\u001b[39m Build start\n"}
-{"kind":"O","text":"\u001b[32mDTS\u001b[39m ⚡️ Build success in 3191ms\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"}
+{"kind":"O","text":"\u001b[32mDTS\u001b[39m ⚡️ Build success in 3544ms\n"}
+{"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.ts  \u001b[22m\u001b[32m4.74 KB\u001b[39m\n"}
+{"kind":"O","text":"\u001b[32mDTS\u001b[39m \u001b[1mdist/index.d.mts \u001b[22m\u001b[32m4.74 KB\u001b[39m\n"}

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

@@ -1,24 +1,27 @@
 {
   "files": {
     "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": "50466641de472439cf80c60160512d35846f72d5",
+    "packages/plugins/panel-manager-plugin/.rush/temp/shrinkwrap-deps.json": "75dbadf340a3fdaa60befb137b12769e13b91282",
+    "packages/plugins/panel-manager-plugin/package.json": "cb0835394b1db5cfb167091ca40438cdbc571dbd",
+    "packages/plugins/panel-manager-plugin/src/components/panel-layer/css.ts": "b697da100336b58dddff4dfc1c5754eba7a87533",
     "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/panel-layer/panel-layer.tsx": "d5a9464fa66a9819fa1b0055071990532fd819d9",
+    "packages/plugins/panel-manager-plugin/src/components/panel-layer/panel.tsx": "0e708acecffeb5f3a8924e15a5db37e86e050bca",
     "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/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",
     "packages/plugins/panel-manager-plugin/src/hooks/use-panel-manager.ts": "0e0073c6ad9a1552a9896085b011b79dbfe6309d",
-    "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": "6fd1a71698eb71b8180a6d0e06f9ee872bfc774f",
+    "packages/plugins/panel-manager-plugin/src/hooks/use-panel.ts": "869332ced78092cad212cdac4777c66b3f1c215e",
+    "packages/plugins/panel-manager-plugin/src/index.ts": "990c6bff8e5f16e876a903a8e52fe764f30b3a88",
+    "packages/plugins/panel-manager-plugin/src/services/index.ts": "9cb6cc67c05c10f00bd7b5fffdf44c3fcd0a4c28",
+    "packages/plugins/panel-manager-plugin/src/services/panel-config.ts": "b5b96aa95acf3dd188894a739d534e599a1cd755",
+    "packages/plugins/panel-manager-plugin/src/services/panel-factory.ts": "ca57e3899b0d923227b7a50ebe0b62dc45d25715",
     "packages/plugins/panel-manager-plugin/src/services/panel-layer.ts": "e456afb5e28d3c93846521fa29ed352aca282bec",
-    "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/src/services/panel-manager.ts": "084133a6439823c83b2b9a25cce1310456a8a88a",
+    "packages/plugins/panel-manager-plugin/src/services/panel-restore.ts": "c3151b5281cc35efb262654f8500556a23811829",
+    "packages/plugins/panel-manager-plugin/src/types.ts": "3de81af3e3d6235f83fbfcbb16039e77a18eb492",
     "packages/plugins/panel-manager-plugin/tsconfig.json": "4b7a4f197dc4f9c62c2938fb3b77780944ad7675"
   },
   "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:yX1mXvP2pUoHg+kWBxzailD0ct7xEMiUBGKeTuOw+zI=:",
+  "../../packages/plugins/panel-manager-plugin": "../../packages/plugins/panel-manager-plugin:6NvHMKeGiIW3XkE78MP0g5Cr6dz80O0NqneafG0tgHE=:",
   "@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==",
@@ -91,6 +91,7 @@
   "get-tsconfig@4.10.1": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
   "glob@10.4.5": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
   "has-flag@3.0.0": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+  "immer@10.1.3": "sha512-tmjF/k8QDKydUlm3mZU+tjM6zeq9/fFpPqH9SzWmBnVVKsPBg/V66qsMwb3/Bo90cgUN+ghdVBess+hPsxUyRw==",
   "inversify@6.2.2(reflect-metadata@0.2.2)": "sha512-KB836KHbZ9WrUnB8ax5MtadOwnqQYa+ZJO3KWbPFgcr4RIEnHM621VaqFZzOZd9+U7ln6upt9n0wJei7x2BNqw==",
   "is-fullwidth-code-point@3.0.0": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
   "isexe@2.0.0": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
@@ -111,6 +112,7 @@
   "ms@2.1.3": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
   "mz@2.7.0": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
   "nanoid@3.3.11": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+  "nanoid@5.1.5": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
   "object-assign@4.1.1": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
   "package-json-from-dist@1.0.1": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
   "path-key@3.1.1": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
@@ -153,10 +155,12 @@
   "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==",
+  "use-sync-external-store@1.6.0(react@18.3.1)": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
   "webidl-conversions@4.0.2": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
   "whatwg-url@7.1.0": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
   "which@2.0.2": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
   "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=="
+  "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=="
 }

package/dist/esm/index.js

@@ -12,6 +12,82 @@ var __decorateClass = (decorators, target, key, kind) => {
 // src/create-panel-manager-plugin.ts
 import { definePluginCreator } from "@flowgram.ai/core";
 
+// src/services/panel-factory.ts
+import { createStore } from "zustand/vanilla";
+import { nanoid } from "nanoid";
+import { inject, injectable as injectable2 } from "inversify";
+
+// src/services/panel-restore.ts
+import { injectable } from "inversify";
+var PanelRestore = Symbol("PanelRestore");
+var PanelRestoreImpl = class {
+  constructor() {
+    this.map = /* @__PURE__ */ new Map();
+  }
+  store(k, v) {
+    this.map.set(k, v);
+  }
+  restore(k) {
+    return this.map.get(k);
+  }
+};
+PanelRestoreImpl = __decorateClass([
+  injectable()
+], PanelRestoreImpl);
+
+// src/services/panel-factory.ts
+var PanelEntityFactory = Symbol("PanelEntityFactory");
+var PanelEntityFactoryConstant = Symbol("PanelEntityFactoryConstant");
+var PanelEntityConfigConstant = Symbol("PanelEntityConfigConstant");
+var PANEL_SIZE_DEFAULT = 400;
+var PanelEntity = class {
+  constructor() {
+    this.initialized = false;
+    /** 实例唯一标识 */
+    this.id = nanoid();
+    /** 渲染缓存 */
+    this.node = null;
+  }
+  get area() {
+    return this.config.area;
+  }
+  get key() {
+    return this.factory.key;
+  }
+  get renderer() {
+    if (!this.node) {
+      this.node = this.factory.render(this.config.props);
+    }
+    return this.node;
+  }
+  init() {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
+    const cache = this.restore.restore(this.key);
+    this.store = createStore(() => ({
+      size: this.config.defaultSize || this.factory.defaultSize || PANEL_SIZE_DEFAULT,
+      ...cache ?? {}
+    }));
+  }
+  dispose() {
+    this.restore.store(this.key, this.store.getState());
+  }
+};
+__decorateClass([
+  inject(PanelRestore)
+], PanelEntity.prototype, "restore", 2);
+__decorateClass([
+  inject(PanelEntityFactoryConstant)
+], PanelEntity.prototype, "factory", 2);
+__decorateClass([
+  inject(PanelEntityConfigConstant)
+], PanelEntity.prototype, "config", 2);
+PanelEntity = __decorateClass([
+  injectable2()
+], PanelEntity);
+
 // src/components/resize-bar/index.tsx
 import { useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -112,130 +188,114 @@ 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 { injectable as injectable3, inject as inject2 } from "inversify";
 import { Emitter } from "@flowgram.ai/utils";
-var PANEL_SIZE_DEFAULT = 400;
-var FloatPanel = class {
-  constructor(config) {
-    this.config = config;
-    this.elements = [];
-    this.onUpdateEmitter = new Emitter();
-    this.sizeMap = /* @__PURE__ */ new Map();
-    this.onUpdate = this.onUpdateEmitter.event;
-    this.currentFactoryKey = "";
-  }
-  updateSize(newSize) {
-    this.sizeMap.set(this.currentFactoryKey, newSize);
-    this.onUpdateEmitter.fire();
-  }
-  get currentSize() {
-    return this.sizeMap.get(this.currentFactoryKey) || PANEL_SIZE_DEFAULT;
-  }
-  open(factory, options) {
-    const el = factory.render(options?.props);
-    const idx = this.elements.findIndex((e) => e.key === factory.key);
-    this.currentFactoryKey = factory.key;
-    if (!this.sizeMap.has(factory.key)) {
-      this.sizeMap.set(factory.key, factory.defaultSize || PANEL_SIZE_DEFAULT);
-    }
-    if (idx >= 0) {
-      this.elements[idx] = { el, key: factory.key, style: factory.style };
-    } else {
-      this.elements.push({ el, key: factory.key, style: factory.style });
-      if (this.elements.length > this.config.max) {
-        this.elements.shift();
-      }
-    }
-    this.onUpdateEmitter.fire();
-  }
-  get visible() {
-    return this.elements.length > 0;
-  }
-  close(key) {
-    if (!key) {
-      this.elements = [];
-    } else {
-      this.elements = this.elements.filter((e) => e.key !== key);
-    }
-    this.onUpdateEmitter.fire();
-  }
-  dispose() {
-    this.elements = [];
-    this.onUpdateEmitter.dispose();
-  }
-};
-
-// src/services/panel-manager.ts
 var PanelManager = class {
   constructor() {
     this.panelRegistry = /* @__PURE__ */ new Map();
+    this.panels = /* @__PURE__ */ new Map();
+    this.onPanelsChangeEvent = new Emitter();
+    this.onPanelsChange = this.onPanelsChangeEvent.event;
   }
   init() {
     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);
   }
+  /** registry panel factory */
   register(factory) {
     this.panelRegistry.set(factory.key, factory);
   }
+  /** open panel */
   open(key, area = "right", options) {
     const factory = this.panelRegistry.get(key);
     if (!factory) {
       return;
     }
-    const panel = this.getPanel(area);
-    panel.open(factory, options);
+    const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);
+    if (!factory.allowDuplicates && sameKeyPanels.length) {
+      sameKeyPanels.forEach((p) => this.remove(p.id));
+    }
+    const panel = this.createPanel({
+      factory,
+      config: {
+        area,
+        ...options
+      }
+    });
+    this.panels.set(panel.id, panel);
+    this.trim(area);
+    this.onPanelsChangeEvent.fire();
+    console.log("jxj", this.panels);
   }
+  /** close panel */
   close(key) {
-    this.right.close(key);
-    this.bottom.close(key);
-    this.dockedRight.close(key);
-    this.dockedBottom.close(key);
+    const panels = this.getPanels();
+    const closedPanels = key ? panels.filter((p) => p.key === key) : panels;
+    closedPanels.forEach((p) => this.remove(p.id));
+    this.onPanelsChangeEvent.fire();
   }
-  getPanel(area) {
+  trim(area) {
+    const panels = this.getPanels(area);
+    const areaConfig = this.getAreaConfig(area);
+    console.log("jxj", areaConfig.max, panels.length);
+    while (panels.length > areaConfig.max) {
+      const removed = panels.shift();
+      if (removed) {
+        this.remove(removed.id);
+      }
+    }
+  }
+  remove(id) {
+    const panel = this.panels.get(id);
+    if (panel) {
+      panel.dispose();
+      this.panels.delete(id);
+    }
+  }
+  getPanels(area) {
+    const panels = [];
+    this.panels.forEach((panel) => {
+      if (!area || panel.area === area) {
+        panels.push(panel);
+      }
+    });
+    return panels;
+  }
+  getAreaConfig(area) {
     switch (area) {
       case "docked-bottom":
-        return this.dockedBottom;
+        return this.config.dockedBottom;
       case "docked-right":
-        return this.dockedRight;
+        return this.config.dockedRight;
       case "bottom":
-        return this.bottom;
+        return this.config.bottom;
       case "right":
       default:
-        return this.right;
+        return this.config.right;
     }
   }
   dispose() {
-    this.right.dispose();
-    this.bottom.dispose();
-    this.dockedBottom.dispose();
-    this.dockedRight.dispose();
+    this.onPanelsChangeEvent.dispose();
   }
 };
 __decorateClass([
-  inject(Playground)
-], PanelManager.prototype, "playground", 2);
-__decorateClass([
-  inject(PanelManagerConfig)
+  inject2(PanelManagerConfig)
 ], PanelManager.prototype, "config", 2);
+__decorateClass([
+  inject2(PanelEntityFactory)
+], PanelManager.prototype, "createPanel", 2);
 PanelManager = __decorateClass([
-  injectable()
+  injectable3()
 ], PanelManager);
 
 // src/services/panel-layer.ts
 import ReactDOM from "react-dom";
 import { createElement } from "react";
-import { injectable as injectable2, inject as inject2 } from "inversify";
+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 clsx from "clsx";
+import clsx2 from "clsx";
 
 // src/hooks/use-global-css.ts
 import { useEffect } from "react";
@@ -254,13 +314,80 @@ var useGlobalCSS = ({ cssText, id, cleanup }) => {
   }, [id]);
 };
 
-// src/components/panel-layer/float-panel.tsx
-import { useEffect as useEffect2, useRef as useRef2, startTransition, useState as useState2, useCallback } from "react";
+// src/components/panel-layer/panel.tsx
+import { useEffect as useEffect2, startTransition, useState as useState2, useRef as useRef2 } from "react";
+import { useStoreWithEqualityFn } from "zustand/traditional";
+import { shallow } from "zustand/shallow";
+import clsx from "clsx";
 
 // src/hooks/use-panel-manager.ts
 import { useService } from "@flowgram.ai/core";
 var usePanelManager = () => useService(PanelManager);
 
+// src/contexts.ts
+import { createContext } from "react";
+var PanelContext = createContext({});
+
+// src/components/panel-layer/panel.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var PanelItem = ({ panel }) => {
+  const panelManager = usePanelManager();
+  const ref = useRef2(null);
+  const resize = panel.factory.resize !== void 0 ? panel.factory.resize : panelManager.config.autoResize;
+  const isHorizontal = ["right", "docked-right"].includes(panel.area);
+  const size = useStoreWithEqualityFn(panel.store, (s) => s.size, shallow);
+  const sizeStyle = isHorizontal ? { width: size } : { height: size };
+  const handleResize = (next) => {
+    let nextSize = next;
+    if (typeof panel.factory.maxSize === "number" && nextSize > panel.factory.maxSize) {
+      nextSize = panel.factory.maxSize;
+    } else if (typeof panel.factory.minSize === "number" && nextSize < panel.factory.minSize) {
+      nextSize = panel.factory.minSize;
+    }
+    panel.store.setState({ size: nextSize });
+  };
+  useEffect2(() => {
+    if (ref.current) {
+      const { width, height } = ref.current.getBoundingClientRect();
+      const realSize = isHorizontal ? width : height;
+      panel.store.setState({ size: realSize });
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "gedit-flow-panel-wrap",
+        isHorizontal ? "panel-horizontal" : "panel-vertical"
+      ),
+      ref,
+      style: { ...panel.factory.style, ...panel.config.style, ...sizeStyle },
+      children: [
+        resize && panelManager.config.resizeBarRender({
+          size,
+          direction: isHorizontal ? "vertical" : "horizontal",
+          onResize: handleResize
+        }),
+        panel.renderer
+      ]
+    },
+    panel.id
+  );
+};
+var PanelArea = ({ area }) => {
+  const panelManager = usePanelManager();
+  const [panels, setPanels] = useState2(panelManager.getPanels(area));
+  useEffect2(() => {
+    const dispose = panelManager.onPanelsChange(() => {
+      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 }) }, panel.id)) });
+};
+
 // src/components/panel-layer/css.ts
 var globalCSS = `
   .gedit-flow-panel-layer-wrap * {
@@ -302,8 +429,9 @@ var globalCSS = `
     min-width: 0;
     display: flex;
     column-gap: 4px;
+    max-width: 100%;
   }
-  
+
   .gedit-flow-panel-main-area {
     position: relative;
     overflow: hidden;
@@ -318,55 +446,18 @@ var globalCSS = `
     width: 100%;
     min-height: 0;
   }
+  .gedit-flow-panel-wrap {
+    pointer-events: auto;
+    overflow: auto;
+    position: relative;
+  }
+  .gedit-flow-panel-wrap.panel-horizontal {
+    height: 100%;
+  }
+  .gedit-flow-panel-wrap.panel-vertical {
+    width: 100%;
+  }
 `;
-var floatPanelWrap = {
-  pointerEvents: "auto",
-  height: "100%",
-  width: "100%",
-  overflow: "auto"
-};
-
-// 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(() => {
-    const dispose = panel.current.onUpdate(() => {
-      startTransition(() => {
-        node.current = render();
-        setVersion((v) => v + 1);
-      });
-    });
-    return () => dispose.dispose();
-  }, [panel]);
-  const onResize = useCallback((newSize) => panel.current.updateSize(newSize), []);
-  const size = panel.current.currentSize;
-  const sizeStyle = isHorizontal ? { width: size, height: "100%" } : { height: size, width: "100%" };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "gedit-flow-panel",
-      style: {
-        position: "relative",
-        display: panel.current.visible ? "block" : "none",
-        ...sizeStyle
-      },
-      children: [
-        panelManager.config.resizeBarRender({
-          size,
-          direction: isHorizontal ? "vertical" : "horizontal",
-          onResize
-        }),
-        node.current
-      ]
-    }
-  );
-};
 
 // src/components/panel-layer/panel-layer.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -383,7 +474,7 @@ var PanelLayer = ({
   return /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: clsx(
+      className: clsx2(
         "gedit-flow-panel-layer-wrap",
         mode === "docked" && "gedit-flow-panel-layer-wrap-docked",
         mode === "floating" && "gedit-flow-panel-layer-wrap-floating",
@@ -393,9 +484,9 @@ var PanelLayer = ({
       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-bottom-area", children: /* @__PURE__ */ jsx3(PanelArea, { 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" }) })
+        /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-right-area", children: /* @__PURE__ */ jsx3(PanelArea, { area: mode === "docked" ? "docked-right" : "right" }) })
       ]
     }
   );
@@ -439,20 +530,34 @@ var PanelLayer2 = class extends Layer {
   }
 };
 __decorateClass([
-  inject2(PanelManagerConfig)
+  inject3(PanelManagerConfig)
 ], PanelLayer2.prototype, "panelConfig", 2);
 __decorateClass([
-  inject2(PluginContext)
+  inject3(PluginContext)
 ], PanelLayer2.prototype, "pluginContext", 2);
 PanelLayer2 = __decorateClass([
-  injectable2()
+  injectable4()
 ], PanelLayer2);
 
 // src/create-panel-manager-plugin.ts
 var createPanelManagerPlugin = definePluginCreator({
   onBind: ({ bind }, opt) => {
     bind(PanelManager).to(PanelManager).inSingletonScope();
+    bind(PanelRestore).to(PanelRestoreImpl).inSingletonScope();
     bind(PanelManagerConfig).toConstantValue(defineConfig(opt));
+    bind(PanelEntityFactory).toFactory(
+      (context) => ({
+        factory,
+        config
+      }) => {
+        const container = context.container.createChild();
+        container.bind(PanelEntityFactoryConstant).toConstantValue(factory);
+        container.bind(PanelEntityConfigConstant).toConstantValue(config);
+        const panel = container.resolve(PanelEntity);
+        panel.init();
+        return panel;
+      }
+    );
   },
   onInit(ctx) {
     ctx.playground.registerLayer(PanelLayer2);
@@ -460,11 +565,17 @@ var createPanelManagerPlugin = definePluginCreator({
     panelManager.init();
   }
 });
+
+// src/hooks/use-panel.ts
+import { useContext } from "react";
+var usePanel = () => useContext(PanelContext);
 export {
   DockedPanelLayer,
   PanelManager,
+  PanelRestore,
   ResizeBar,
   createPanelManagerPlugin,
+  usePanel,
   usePanelManager
 };
 //# sourceMappingURL=index.js.map