dishui 0.0.61 → 0.0.62

package/dist/components/pro/Flow/Flow.js

@@ -8,7 +8,7 @@ import { generateId as Q } from "./nodes/nodeUtils.js";
 import { normalizeEdgeHandles as xe } from "./edges/edgePaths.js";
 import { useDeleteSelection as Se } from "./hooks/useDeleteSelection.js";
 import Ce from "./FlowCanvas.js";
-import { downloadDataURL as Me, safeFileBaseName as Pe } from "./hooks/useFlowImportExport.js";
+import { downloadDataURL as Pe, safeFileBaseName as Me } from "./hooks/useFlowImportExport.js";
 import Ne, { FlowZoomControls as ke } from "./panels/FlowToolbar.js";
 import { MediaStampContent as De, ShapePaletteContent as Ee, SvgStampContent as Ae } from "./panels/ShapePalette.js";
 import { InspectorPanelContent as ze } from "./panels/InspectorPanel.js";
@@ -27,43 +27,43 @@ import { usePdfExport as Ze } from "./hooks/usePdfExport.js";
 import { useKeyboardShortcuts as Je } from "./hooks/useKeyboardShortcuts.js";
 import { useMindMap as Oe } from "./hooks/useMindMap.js";
 /* empty css       */
-import { forwardRef as _e, useCallback as D, useEffect as X, useImperativeHandle as $e, useMemo as le, useRef as R, useState as j } from "react";
+import { forwardRef as _e, useCallback as E, useEffect as X, useImperativeHandle as $e, useMemo as le, useRef as F, useState as j } from "react";
 import { jsx as r, jsxs as _ } from "react/jsx-runtime";
 import { EditorView as Be } from "@codemirror/view";
 function Ve(o) {
   let p = !1;
   const a = { ...o.canvases };
-  for (const [w, u] of Object.entries(a)) {
+  for (const [v, u] of Object.entries(a)) {
     const s = u.nodes.map((e) => {
       if (e.type !== "shapeSvg") return e;
-      const h = e.data.labelPlacement, c = h === "above" ? "top" : h === "center" ? "middle" : h === "below" ? "bottom" : e.data.labelPlacement;
-      return c === e.data.labelPlacement ? e : (p = !0, {
+      const I = e.data.labelPlacement, m = I === "above" ? "top" : I === "center" ? "middle" : I === "below" ? "bottom" : e.data.labelPlacement;
+      return m === e.data.labelPlacement ? e : (p = !0, {
         ...e,
         data: {
           ...e.data,
-          labelPlacement: c
+          labelPlacement: m
         }
       });
     });
     let l = !1;
     const n = s.map((e) => {
       if (!e.data.isMindMapNode) return e;
-      const h = e.data.fill === "#ffffff" || e.data.fill === "#eef2ff" ? "theme:base-100" : e.data.fill, c = e.data.stroke === "#6366f1" ? "theme:base-content" : e.data.stroke === "#4f46e5" ? "theme:primary" : e.data.stroke;
-      return h === e.data.fill && c === e.data.stroke ? e : (l = !0, {
+      const I = e.data.fill === "#ffffff" || e.data.fill === "#eef2ff" ? "theme:base-100" : e.data.fill, m = e.data.stroke === "#6366f1" ? "theme:base-content" : e.data.stroke === "#4f46e5" ? "theme:primary" : e.data.stroke;
+      return I === e.data.fill && m === e.data.stroke ? e : (l = !0, {
         ...e,
         data: {
           ...e.data,
-          fill: h,
-          stroke: c
+          fill: I,
+          stroke: m
         }
       });
-    }), y = /* @__PURE__ */ new Map();
-    for (const e of n) y.set(e.id, e);
-    let d = !1;
-    const I = xe(u.edges, y).map((e) => {
+    }), b = /* @__PURE__ */ new Map();
+    for (const e of n) b.set(e.id, e);
+    let c = !1;
+    const y = xe(u.edges, b).map((e) => {
       if (e.data.strokeColor !== "#94a3b8") return e;
-      const h = y.get(e.source), c = y.get(e.target);
-      return !h?.data.isMindMapNode || !c?.data.isMindMapNode ? e : (d = !0, {
+      const I = b.get(e.source), m = b.get(e.target);
+      return !I?.data.isMindMapNode || !m?.data.isMindMapNode ? e : (c = !0, {
         ...e,
         data: {
           ...e.data,
@@ -71,10 +71,10 @@ function Ve(o) {
         }
       });
     });
-    (l || d) && (p = !0), (n !== s || I !== u.edges) && (a[w] = {
+    (l || c) && (p = !0), (n !== s || y !== u.edges) && (a[v] = {
       ...u,
       nodes: n,
-      edges: I
+      edges: y
     });
   }
   return p ? {
@@ -87,171 +87,171 @@ var je = {
   edgeIds: /* @__PURE__ */ new Set(),
   lineIds: /* @__PURE__ */ new Set()
 };
-function Xe({ onUndo: o, onRedo: p, groupRef: a, geoGroupRef: w, ungroupRef: u }) {
-  const { selection: s, setSelection: l, currentCanvas: n, setDoc: y, currentCanvasId: d } = ee(), { viewport: I } = Y(), { copy: e, cut: h, paste: c, duplicate: v } = ae(), b = Se(), g = D(() => {
+function Xe({ onUndo: o, onRedo: p, groupRef: a, geoGroupRef: v, ungroupRef: u }) {
+  const { selection: s, setSelection: l, currentCanvas: n, setDoc: b, currentCanvasId: c } = ee(), { viewport: y } = Y(), { copy: e, cut: I, paste: m, duplicate: h } = ae(), x = Se(), g = E(() => {
     l({
       nodeIds: new Set(n.nodes.map((f) => f.id)),
       edgeIds: new Set(n.edges.map((f) => f.id)),
       lineIds: new Set(n.lines.map((f) => f.id))
     });
-  }, [n, l]), S = D((f) => {
-    const m = s.nodeIds, N = s.lineIds;
-    if (m.size + N.size < 2) return;
-    const E = n.nodes.filter((P) => m.has(P.id)), t = n.lines.filter((P) => N.has(P.id)), i = 20;
-    let x = 1 / 0, W = 1 / 0, T = -1 / 0, H = -1 / 0;
-    for (const P of E)
-      x = Math.min(x, P.position.x), W = Math.min(W, P.position.y), T = Math.max(T, P.position.x + P.width), H = Math.max(H, P.position.y + P.height);
-    for (const P of t) for (const k of P.points)
-      x = Math.min(x, k.x), W = Math.min(W, k.y), T = Math.max(T, k.x), H = Math.max(H, k.y);
-    const U = f === "geometryGroup", Z = Q("group"), M = {
-      id: Z,
+  }, [n, l]), S = E((f) => {
+    const w = s.nodeIds, N = s.lineIds;
+    if (w.size + N.size < 2) return;
+    const k = n.nodes.filter((M) => w.has(M.id)), d = n.lines.filter((M) => N.has(M.id)), t = 20;
+    let i = 1 / 0, R = 1 / 0, L = -1 / 0, W = -1 / 0;
+    for (const M of k)
+      i = Math.min(i, M.position.x), R = Math.min(R, M.position.y), L = Math.max(L, M.position.x + M.width), W = Math.max(W, M.position.y + M.height);
+    for (const M of d) for (const D of M.points)
+      i = Math.min(i, D.x), R = Math.min(R, D.y), L = Math.max(L, D.x), W = Math.max(W, D.y);
+    const H = f === "geometryGroup", U = Q("group"), P = {
+      id: U,
       type: f,
       position: {
-        x: x - i,
-        y: W - i
+        x: i - t,
+        y: R - t
       },
-      width: T - x + i * 2,
-      height: H - W + i * 2,
+      width: L - i + t * 2,
+      height: W - R + t * 2,
       data: {
         ...se,
-        label: U ? "Geo Group" : "Group",
-        fill: U ? "#fefce8" : "#f0f9ff",
+        label: H ? "Geo Group" : "Group",
+        fill: H ? "#fefce8" : "#f0f9ff",
         stroke: "#9ca3af",
         strokeWidth: 1.5,
-        borderStyle: U ? "dashed" : "dotted",
+        borderStyle: H ? "dashed" : "dotted",
         isGroup: !0
       }
     };
-    y((P) => {
-      const k = P.canvases[d];
-      return k ? {
-        ...P,
+    b((M) => {
+      const D = M.canvases[c];
+      return D ? {
+        ...M,
         canvases: {
-          ...P.canvases,
-          [d]: {
-            ...k,
-            nodes: U ? [M, ...k.nodes] : [M, ...k.nodes.map((O) => m.has(O.id) ? {
+          ...M.canvases,
+          [c]: {
+            ...D,
+            nodes: H ? [P, ...D.nodes] : [P, ...D.nodes.map((O) => w.has(O.id) ? {
               ...O,
-              parentId: Z
+              parentId: U
             } : O)],
-            lines: U ? k.lines : k.lines.map((O) => N.has(O.id) ? {
+            lines: H ? D.lines : D.lines.map((O) => N.has(O.id) ? {
               ...O,
-              parentId: Z
+              parentId: U
             } : O)
           }
         }
-      } : P;
+      } : M;
     }), l({
-      nodeIds: /* @__PURE__ */ new Set([Z]),
+      nodeIds: /* @__PURE__ */ new Set([U]),
       edgeIds: /* @__PURE__ */ new Set(),
       lineIds: /* @__PURE__ */ new Set()
     });
   }, [
     s,
     n,
-    y,
-    d,
+    b,
+    c,
     l
-  ]), G = D(() => S("flowGroup"), [S]), L = D(() => S("geometryGroup"), [S]), K = D(() => {
+  ]), K = E(() => S("flowGroup"), [S]), z = E(() => S("geometryGroup"), [S]), J = E(() => {
     const f = s.nodeIds;
     if (f.size === 0) return;
-    const m = /* @__PURE__ */ new Set(), N = /* @__PURE__ */ new Set(), E = /* @__PURE__ */ new Set();
-    for (const t of n.nodes) f.has(t.id) && (t.type === "flowGroup" || t.type === "geometryGroup" || t.data.isGroup) && m.add(t.id);
-    if (m.size !== 0) {
-      for (const t of n.nodes) t.parentId && m.has(t.parentId) && N.add(t.id);
-      for (const t of n.lines) t.parentId && m.has(t.parentId) && E.add(t.id);
-      y((t) => {
-        const i = t.canvases[d];
-        return i ? {
-          ...t,
+    const w = /* @__PURE__ */ new Set(), N = /* @__PURE__ */ new Set(), k = /* @__PURE__ */ new Set();
+    for (const d of n.nodes) f.has(d.id) && (d.type === "flowGroup" || d.type === "geometryGroup" || d.data.isGroup) && w.add(d.id);
+    if (w.size !== 0) {
+      for (const d of n.nodes) d.parentId && w.has(d.parentId) && N.add(d.id);
+      for (const d of n.lines) d.parentId && w.has(d.parentId) && k.add(d.id);
+      b((d) => {
+        const t = d.canvases[c];
+        return t ? {
+          ...d,
           canvases: {
-            ...t.canvases,
-            [d]: {
-              ...i,
-              nodes: i.nodes.filter((x) => !m.has(x.id)).map((x) => N.has(x.id) ? {
-                ...x,
+            ...d.canvases,
+            [c]: {
+              ...t,
+              nodes: t.nodes.filter((i) => !w.has(i.id)).map((i) => N.has(i.id) ? {
+                ...i,
                 parentId: void 0
-              } : x),
-              lines: i.lines.map((x) => E.has(x.id) ? {
-                ...x,
+              } : i),
+              lines: t.lines.map((i) => k.has(i.id) ? {
+                ...i,
                 parentId: void 0
-              } : x)
+              } : i)
             }
           }
-        } : t;
+        } : d;
       }), l({
         nodeIds: N,
         edgeIds: /* @__PURE__ */ new Set(),
-        lineIds: E
+        lineIds: k
       });
     }
   }, [
     s,
     n,
-    y,
-    d,
+    b,
+    c,
     l
   ]);
-  a.current = G, w.current = L, u.current = K;
-  const C = D((f) => {
-    const m = s.nodeIds, N = s.lineIds;
-    m.size === 0 && N.size === 0 || y((E) => {
-      const t = E.canvases[d];
-      if (!t) return E;
-      const i = t.nodes.map((M) => M.zIndex ?? 0), x = i.length > 0 ? Math.max(...i) : 0, W = i.length > 0 ? Math.min(...i) : 0, T = t.lines.map((M) => M.zIndex ?? 0), H = T.length > 0 ? Math.max(...T) : 0, U = T.length > 0 ? Math.min(...T) : 0, Z = (M, P, k) => f === "front" ? P + 1 : f === "back" ? k - 1 : f === "up" ? M + 1 : M - 1;
+  a.current = K, v.current = z, u.current = J;
+  const C = E((f) => {
+    const w = s.nodeIds, N = s.lineIds;
+    w.size === 0 && N.size === 0 || b((k) => {
+      const d = k.canvases[c];
+      if (!d) return k;
+      const t = d.nodes.map((P) => P.zIndex ?? 0), i = t.length > 0 ? Math.max(...t) : 0, R = t.length > 0 ? Math.min(...t) : 0, L = d.lines.map((P) => P.zIndex ?? 0), W = L.length > 0 ? Math.max(...L) : 0, H = L.length > 0 ? Math.min(...L) : 0, U = (P, M, D) => f === "front" ? M + 1 : f === "back" ? D - 1 : f === "up" ? P + 1 : P - 1;
       return {
-        ...E,
+        ...k,
         canvases: {
-          ...E.canvases,
-          [d]: {
-            ...t,
-            nodes: t.nodes.map((M) => m.has(M.id) ? {
-              ...M,
-              zIndex: Z(M.zIndex ?? 0, x, W)
-            } : M),
-            lines: t.lines.map((M) => N.has(M.id) ? {
-              ...M,
-              zIndex: Z(M.zIndex ?? 0, H, U)
-            } : M)
+          ...k.canvases,
+          [c]: {
+            ...d,
+            nodes: d.nodes.map((P) => w.has(P.id) ? {
+              ...P,
+              zIndex: U(P.zIndex ?? 0, i, R)
+            } : P),
+            lines: d.lines.map((P) => N.has(P.id) ? {
+              ...P,
+              zIndex: U(P.zIndex ?? 0, W, H)
+            } : P)
           }
         }
       };
     });
   }, [
     s,
-    y,
-    d
+    b,
+    c
   ]);
   return X(() => {
-    const f = (m) => {
-      const N = m.target;
+    const f = (w) => {
+      const N = w.target;
       if (N?.tagName === "INPUT" || N?.tagName === "TEXTAREA" || N?.isContentEditable) return;
-      const E = Array.from(m.clipboardData?.items ?? []).find((x) => x.type.startsWith("image/"));
-      if (!E) {
-        m.preventDefault(), c();
+      const k = Array.from(w.clipboardData?.items ?? []).find((i) => i.type.startsWith("image/"));
+      if (!k) {
+        w.preventDefault(), m();
         return;
       }
-      const t = E.getAsFile();
-      if (!t) return;
-      m.preventDefault();
-      const i = new FileReader();
-      i.onload = () => {
-        if (typeof i.result != "string") return;
-        const x = s.nodeIds.size === 1 ? n.nodes.find((A) => s.nodeIds.has(A.id) && A.type === "mediaNode" && A.data.mediaKind === "image") : void 0;
-        if (x) {
-          y((A) => {
-            const $ = A.canvases[d];
+      const d = k.getAsFile();
+      if (!d) return;
+      w.preventDefault();
+      const t = new FileReader();
+      t.onload = () => {
+        if (typeof t.result != "string") return;
+        const i = s.nodeIds.size === 1 ? n.nodes.find((A) => s.nodeIds.has(A.id) && A.type === "mediaNode" && A.data.mediaKind === "image") : void 0;
+        if (i) {
+          b((A) => {
+            const $ = A.canvases[c];
             return $ ? {
               ...A,
               canvases: {
                 ...A.canvases,
-                [d]: {
+                [c]: {
                   ...$,
-                  nodes: $.nodes.map((V) => V.id === x.id ? {
+                  nodes: $.nodes.map((V) => V.id === i.id ? {
                     ...V,
                     data: {
                       ...V.data,
-                      mediaContent: i.result
+                      mediaContent: t.result
                     }
                   } : V)
                 }
@@ -260,19 +260,19 @@ function Xe({ onUndo: o, onRedo: p, groupRef: a, geoGroupRef: w, ungroupRef: u }
           });
           return;
         }
-        const W = Q("node"), T = 320, H = 220, U = window.innerWidth, Z = window.innerHeight, M = (U / 2 - I.x) / I.zoom, P = (Z / 2 - I.y) / I.zoom, k = Math.max(0, ...n.nodes.map((A) => A.zIndex ?? 0)), O = {
-          id: W,
+        const R = Q("node"), L = 320, W = 220, H = window.innerWidth, U = window.innerHeight, P = (H / 2 - y.x) / y.zoom, M = (U / 2 - y.y) / y.zoom, D = Math.max(0, ...n.nodes.map((A) => A.zIndex ?? 0)), O = {
+          id: R,
           type: "mediaNode",
           position: {
-            x: M - T / 2,
-            y: P - H / 2
+            x: P - L / 2,
+            y: M - W / 2
           },
-          width: T,
-          height: H,
-          zIndex: k + 1,
+          width: L,
+          height: W,
+          zIndex: D + 1,
           data: {
             ...se,
-            label: t.name || "Image",
+            label: d.name || "Image",
             fill: "theme:base-100",
             stroke: "theme:base-content",
             strokeWidth: 1.5,
@@ -280,49 +280,49 @@ function Xe({ onUndo: o, onRedo: p, groupRef: a, geoGroupRef: w, ungroupRef: u }
             fontSize: 13,
             borderStyle: "solid",
             mediaKind: "image",
-            mediaContent: i.result
+            mediaContent: t.result
           }
         };
-        y((A) => {
-          const $ = A.canvases[d];
+        b((A) => {
+          const $ = A.canvases[c];
           return $ ? {
             ...A,
             canvases: {
               ...A.canvases,
-              [d]: {
+              [c]: {
                 ...$,
                 nodes: [...$.nodes, O]
               }
             }
           } : A;
         }), l({
-          nodeIds: /* @__PURE__ */ new Set([W]),
+          nodeIds: /* @__PURE__ */ new Set([R]),
           edgeIds: /* @__PURE__ */ new Set(),
           lineIds: /* @__PURE__ */ new Set()
         });
-      }, i.readAsDataURL(t);
+      }, t.readAsDataURL(d);
     };
     return window.addEventListener("paste", f), () => window.removeEventListener("paste", f);
   }, [
     n,
-    d,
     c,
+    m,
     s,
-    y,
+    b,
     l,
-    I
+    y
   ]), Je(le(() => ({
     undo: o,
     redo: p,
     copy: e,
-    cut: h,
-    paste: c,
-    duplicate: v,
-    deleteSelected: b,
+    cut: I,
+    paste: m,
+    duplicate: h,
+    deleteSelected: x,
     selectAll: g,
-    group: G,
-    geoGroup: L,
-    ungroup: K,
+    group: K,
+    geoGroup: z,
+    ungroup: J,
     bringToFront: () => C("front"),
     bringForward: () => C("up"),
     sendBackward: () => C("down"),
@@ -331,130 +331,130 @@ function Xe({ onUndo: o, onRedo: p, groupRef: a, geoGroupRef: w, ungroupRef: u }
     o,
     p,
     e,
+    I,
+    m,
     h,
-    c,
-    v,
-    b,
+    x,
     g,
-    G,
-    L,
     K,
+    z,
+    J,
     C
   ])), Oe(), null;
 }
 function Ye({ pixiRef: o, exportPdfRef: p }) {
   return p.current = Ze(o), null;
 }
-var Ht = _e(function({ initialDocument: p, onChange: a, width: w, height: u, readOnly: s = !1, onBack: l, onExportPNG: n, onPublish: y, showMiniMap: d = !0, showGrid: I = !0, gridSize: e = 20, className: h, showAI: c = !0, showAIConfig: v = !0, aiConfig: b }, g) {
-  const [S, G] = j(() => Ve(p ?? Ie())), [L, K] = j(je), C = R(null), f = R(null), m = R(null), N = R(null), E = Ue(N), { wrappedSetDoc: t, undo: i, redo: x, canUndo: W, canRedo: T } = He(S, G), H = R(null), U = R(null), Z = R(null), M = R(null), P = R(a);
-  P.current = a;
-  const k = R(S);
-  k.current = S, $e(g, () => ({
-    exportPNG: async (F) => {
-      const z = C.current;
-      return !z || z.destroyed ? null : z.exportPNG(F);
+var Ht = _e(function({ initialDocument: p, onChange: a, width: v, height: u, readOnly: s = !1, onBack: l, onExportPNG: n, onPublish: b, showMiniMap: c = !0, showGrid: y = !0, gridSize: e = 20, className: I, showAI: m = !0, showAIConfig: h = !0, aiConfig: x }, g) {
+  const [S, K] = j(() => Ve(p ?? Ie())), [z, J] = j(je), C = F(null), f = F(null), w = F(null), N = F(null), k = Ue(N), { wrappedSetDoc: d, undo: t, redo: i, canUndo: R, canRedo: L } = He(S, K), W = F(null), H = F(null), U = F(null), P = F(null), M = F(a);
+  M.current = a;
+  const D = F(S);
+  D.current = S, $e(g, () => ({
+    exportPNG: async (G) => {
+      const T = C.current;
+      return !T || T.destroyed ? null : T.exportPNG(G);
     },
-    getDocument: () => k.current
+    getDocument: () => D.current
   }), []);
-  const O = D((F) => {
-    t((z) => {
-      const B = typeof F == "function" ? F(z) : F;
-      return s ? B.canvases === z.canvases && B.title === z.title ? B : z : (queueMicrotask(() => P.current?.(B)), B);
+  const O = E((G) => {
+    d((T) => {
+      const B = typeof G == "function" ? G(T) : G;
+      return s ? B.canvases === T.canvases && B.title === T.title ? B : T : (queueMicrotask(() => M.current?.(B)), B);
     });
-  }, [t, s]), A = D(() => {
+  }, [d, s]), A = E(() => {
+    s || t();
+  }, [s, t]), $ = E(() => {
     s || i();
-  }, [s, i]), $ = D(() => {
-    s || x();
-  }, [s, x]), V = D((F) => {
-    C.current = F, f.current && !m.current && (m.current = new We(f.current));
-  }, []), de = D(async () => {
+  }, [s, i]), V = E((G) => {
+    C.current = G, f.current && !w.current && (w.current = new We(f.current));
+  }, []), de = E(async () => {
     if (n) return void n();
-    const F = C.current;
-    if (!F || F.destroyed) return;
-    const z = await F.exportPNG(16777215);
-    z && Me(z, `${Pe(k.current.title)}.png`);
-  }, [n]), ue = D(async () => {
-    await M.current?.();
+    const G = C.current;
+    if (!G || G.destroyed) return;
+    const T = await G.exportPNG(16777215);
+    T && Pe(T, `${Me(D.current.title)}.png`);
+  }, [n]), ue = E(async () => {
+    await P.current?.();
   }, []);
   X(() => {
-    let F = !1, z = null;
+    let G = !1, T = null;
     const B = () => {
-      const J = C.current, ne = m.current;
-      if (!J || J.destroyed || !ne) return;
+      const Z = C.current, ne = w.current;
+      if (!Z || Z.destroyed || !ne) return;
       const pe = {
-        x: J.world.position.x,
-        y: J.world.position.y,
-        zoom: J.world.scale.x
+        x: Z.world.position.x,
+        y: Z.world.position.y,
+        zoom: Z.world.scale.x
       }, me = S.stack[S.stack.length - 1] ?? "root", oe = S.canvases[me];
-      oe && ne.update(oe.nodes, pe, J.app.screen.width, J.app.screen.height);
+      oe && ne.update(oe.nodes, pe, Z.app.screen.width, Z.app.screen.height);
     }, te = () => {
-      if (F) return;
-      const J = C.current;
-      J && !J.destroyed && m.current ? (J.app.ticker.add(B), z = J) : requestAnimationFrame(te);
+      if (G) return;
+      const Z = C.current;
+      Z && !Z.destroyed && w.current ? (Z.app.ticker.add(B), T = Z) : requestAnimationFrame(te);
     };
     return te(), () => {
-      F = !0, z && !z.destroyed && z.app.ticker.remove(B);
+      G = !0, T && !T.destroyed && T.app.ticker.remove(B);
     };
   }, [S]);
   const fe = {
-    width: w ?? "100%",
+    width: v ?? "100%",
     height: u ?? "100%"
   };
   return /* @__PURE__ */ r("div", {
     ref: N,
-    className: `flow-container ${h ?? ""}`,
+    className: `flow-container ${I ?? ""}`,
     style: fe,
     children: /* @__PURE__ */ r(ve, {
       doc: S,
       setDoc: O,
-      selection: L,
-      setSelection: K,
+      selection: z,
+      setSelection: J,
       children: /* @__PURE__ */ r(ye, {
-        showMiniMap: d,
-        showGrid: I,
+        showMiniMap: c,
+        showGrid: y,
         gridSize: e,
-        showAI: c,
+        showAI: m,
         readOnly: s,
         children: /* @__PURE__ */ _(be, {
-          initialConfig: b,
-          showAIConfig: v,
+          initialConfig: x,
+          showAIConfig: h,
           children: [
             /* @__PURE__ */ r(Xe, {
               onUndo: A,
               onRedo: $,
-              groupRef: H,
-              geoGroupRef: U,
-              ungroupRef: Z
+              groupRef: W,
+              geoGroupRef: H,
+              ungroupRef: U
             }),
             /* @__PURE__ */ r(Ye, {
               pixiRef: C,
-              exportPdfRef: M
+              exportPdfRef: P
             }),
             /* @__PURE__ */ _(tt, {
-              compact: E,
+              compact: k,
               toolbar: s ? null : /* @__PURE__ */ r(Ne, {
-                compact: E,
+                compact: k,
                 onBack: l,
                 onUndo: A,
                 onRedo: $,
-                canUndo: W,
-                canRedo: T,
-                onGroup: () => H.current?.(),
-                onGeoGroup: () => U.current?.(),
-                onUngroup: () => Z.current?.(),
+                canUndo: R,
+                canRedo: L,
+                onGroup: () => W.current?.(),
+                onGeoGroup: () => H.current?.(),
+                onUngroup: () => U.current?.(),
                 onExportPNG: de,
                 onExportPDF: ue,
-                onPublish: y
+                onPublish: b
               }),
               children: [
                 /* @__PURE__ */ r(Ce, { onPixiReady: V }),
                 /* @__PURE__ */ r(Fe, {}),
                 /* @__PURE__ */ _(qe, { children: [!s && /* @__PURE__ */ r(ke, {}), /* @__PURE__ */ r(Ge, {})] }),
-                !s && /* @__PURE__ */ r(it, {}),
+                !s && /* @__PURE__ */ r(rt, {}),
                 /* @__PURE__ */ r(nt, {
                   canvasRef: f,
                   pixiRef: C,
-                  miniMapRef: m
+                  miniMapRef: w
                 }),
                 /* @__PURE__ */ r(Le, {})
               ]
@@ -517,7 +517,7 @@ var Qe = [
     showKey: "showAI"
   }
 ];
-function re(o) {
+function ie(o) {
   switch (o) {
     case "shapes":
       return /* @__PURE__ */ r(Ee, {});
@@ -530,7 +530,7 @@ function re(o) {
     case "outline":
       return /* @__PURE__ */ r(Te, {});
     case "json":
-      return /* @__PURE__ */ r(rt, {});
+      return /* @__PURE__ */ r(it, {});
     case "ai":
       return /* @__PURE__ */ r(Re, {});
     default:
@@ -543,49 +543,51 @@ var et = /* @__PURE__ */ new Set([
   "media"
 ]);
 function tt({ children: o, toolbar: p, compact: a }) {
-  const w = Y(), { panelDocks: u, setPanelDock: s, presentation: l, readOnly: n } = w, { setShowPalette: y, setShowInspector: d, setShowOutline: I, setShowJson: e, setShowAI: h } = w, c = n ? [] : Qe.filter((t) => !t.showKey || w[t.showKey]), v = (t) => ({
+  const v = Y(), { panelDocks: u, setPanelDock: s, presentation: l, readOnly: n, setPendingPlacement: b } = v, { setShowPalette: c, setShowInspector: y, setShowOutline: e, setShowJson: I, setShowAI: m } = v, h = n ? [] : Qe.filter((t) => !t.showKey || v[t.showKey]), x = (t) => ({
     id: t.id,
     label: t.label,
     icon: t.icon,
-    content: re(t.id)
-  }), [b, g] = j(null), S = R(null);
+    content: ie(t.id)
+  }), [g, S] = j(null), K = F(null);
   X(() => {
     if (!a) {
-      S.current = null;
+      K.current = null;
       return;
     }
-    const t = w.pendingPlacement, i = t ? `${t.type}:${t.data?.svgId ?? ""}:${t.data?.mediaKind ?? ""}` : null, x = S.current;
-    S.current = i, i && i !== x && b && et.has(b) && g(null);
+    const t = v.pendingPlacement, i = t ? `${t.type}:${t.data?.svgId ?? ""}:${t.data?.mediaKind ?? ""}` : null, R = K.current;
+    K.current = i, i && i !== R && g && et.has(g) && S(null);
   }, [
-    w.pendingPlacement,
+    v.pendingPlacement,
     a,
-    b
+    g
   ]);
-  const [G, L] = j(null), K = D((t, i) => s(t, i), [s]), C = D((t) => {
-    t === "inspector" ? d(!1) : t === "outline" ? I(!1) : t === "json" ? e(!1) : t === "ai" ? h(!1) : y(!1);
+  const [z, J] = j(null), C = E((t, i) => s(t, i), [s]), f = E((t) => {
+    t === "inspector" ? y(!1) : t === "outline" ? e(!1) : t === "json" ? I(!1) : t === "ai" ? m(!1) : c(!1);
   }, [
-    d,
-    I,
+    y,
     e,
-    h,
-    y
+    I,
+    m,
+    c
   ]);
   if (a && !l) {
-    const t = c.find((i) => i.id === b) ?? null;
+    const t = h.find((i) => i.id === g) ?? null;
     return /* @__PURE__ */ _("div", {
       className: "flow-workspace",
       children: [
         p,
-        c.length > 0 && /* @__PURE__ */ r("div", {
+        h.length > 0 && /* @__PURE__ */ r("div", {
           className: "flow-mobile-panel-bar",
           children: /* @__PURE__ */ r(he, {
             placeholder: "选择面板…",
-            options: c.map((i) => ({
+            options: h.map((i) => ({
               value: i.id,
               label: i.label
             })),
-            value: b ?? void 0,
-            onChange: (i) => g(String(i))
+            value: g ?? void 0,
+            onChange: (i) => {
+              b(null), S(String(i));
+            }
           })
         }),
         /* @__PURE__ */ _("div", {
@@ -607,48 +609,48 @@ function tt({ children: o, toolbar: p, compact: a }) {
                 type: "button",
                 className: "flow-mobile-panel-close",
                 "aria-label": "关闭面板",
-                onClick: () => g(null),
+                onClick: () => S(null),
                 children: "✕"
               })]
             }), /* @__PURE__ */ r("div", {
               className: "flow-mobile-panel-body",
-              children: re(t.id)
+              children: ie(t.id)
             })]
           })]
         })
       ]
     });
   }
-  const f = (t) => u[t] ?? "left", m = c.filter((t) => f(t.id) === "left").map(v), N = c.filter((t) => f(t.id) === "right").map(v), E = c.filter((t) => f(t.id) === "float");
+  const w = (t) => u[t] ?? "left", N = h.filter((t) => w(t.id) === "left").map(x), k = h.filter((t) => w(t.id) === "right").map(x), d = h.filter((t) => w(t.id) === "float");
   return /* @__PURE__ */ _("div", {
     className: "flow-workspace",
     children: [!l && p, /* @__PURE__ */ _("div", {
       className: "flow-workspace-main",
       children: [
-        !l && m.length > 0 && /* @__PURE__ */ r(q, {
-          tabs: m,
-          defaultTab: m[0]?.id,
+        !l && N.length > 0 && /* @__PURE__ */ r(q, {
+          tabs: N,
+          defaultTab: N[0]?.id,
           resizeEdge: "right",
           defaultWidth: 220,
           dock: "left",
-          onDock: K,
-          onClose: C
+          onDock: C,
+          onClose: f
         }),
         /* @__PURE__ */ r("div", {
           className: "flow-stage",
           children: o
         }),
-        !l && N.length > 0 && /* @__PURE__ */ r(q, {
-          tabs: N,
-          defaultTab: N[0]?.id,
+        !l && k.length > 0 && /* @__PURE__ */ r(q, {
+          tabs: k,
+          defaultTab: k[0]?.id,
           resizeEdge: "left",
           defaultWidth: 220,
           dock: "right",
-          onDock: K,
-          onClose: C
+          onDock: C,
+          onClose: f
         }),
-        !l && E.map((t, i) => /* @__PURE__ */ r(q, {
-          tabs: [v(t)],
+        !l && d.map((t, i) => /* @__PURE__ */ r(q, {
+          tabs: [x(t)],
           resizeEdge: "right",
           defaultWidth: 220,
           dock: "float",
@@ -656,29 +658,29 @@ function tt({ children: o, toolbar: p, compact: a }) {
             top: 48 + i * 40,
             left: 24 + i * 30
           },
-          onDock: K,
-          onClose: C,
-          onDragHintChange: L
+          onDock: C,
+          onClose: f,
+          onDragHintChange: J
         }, t.id)),
-        !l && G && /* @__PURE__ */ r("div", {
-          className: `flow-dock-dropzone flow-dock-dropzone--${G}`,
-          children: /* @__PURE__ */ r("span", { children: G === "left" ? "⇤ 停靠左侧" : "停靠右侧 ⇥" })
+        !l && z && /* @__PURE__ */ r("div", {
+          className: `flow-dock-dropzone flow-dock-dropzone--${z}`,
+          children: /* @__PURE__ */ r("span", { children: z === "left" ? "⇤ 停靠左侧" : "停靠右侧 ⇥" })
         })
       ]
     })]
   });
 }
 function nt({ canvasRef: o, pixiRef: p, miniMapRef: a }) {
-  const { showMiniMap: w, setViewport: u, presentation: s } = Y(), l = R(!1), n = D((e, h) => {
-    const c = o.current, v = p.current, b = a.current;
-    if (!c || !v || v.destroyed || !b) return;
-    const g = c.getBoundingClientRect();
+  const { showMiniMap: v, setViewport: u, presentation: s } = Y(), l = F(!1), n = E((e, I) => {
+    const m = o.current, h = p.current, x = a.current;
+    if (!m || !h || h.destroyed || !x) return;
+    const g = m.getBoundingClientRect();
     if (g.width === 0 || g.height === 0) return;
-    const { width: S, height: G } = b.size, L = (e - g.left) / g.width * S, K = (h - g.top) / g.height * G, C = b.minimapToWorld(L, K);
+    const { width: S, height: K } = x.size, z = (e - g.left) / g.width * S, J = (I - g.top) / g.height * K, C = x.minimapToWorld(z, J);
     if (!C) return;
-    const f = v.world.scale.x || 1, m = v.app.screen.width, N = v.app.screen.height;
+    const f = h.world.scale.x || 1, w = h.app.screen.width, N = h.app.screen.height;
     u({
-      x: m / 2 - C.x * f,
+      x: w / 2 - C.x * f,
       y: N / 2 - C.y * f,
       zoom: f
     });
@@ -687,11 +689,11 @@ function nt({ canvasRef: o, pixiRef: p, miniMapRef: a }) {
     p,
     a,
     u
-  ]), y = D((e) => {
+  ]), b = E((e) => {
     e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), l.current = !0, n(e.clientX, e.clientY);
-  }, [n]), d = D((e) => {
+  }, [n]), c = E((e) => {
     l.current && n(e.clientX, e.clientY);
-  }, [n]), I = D((e) => {
+  }, [n]), y = E((e) => {
     l.current = !1;
     try {
       e.currentTarget.releasePointerCapture(e.pointerId);
@@ -701,12 +703,12 @@ function nt({ canvasRef: o, pixiRef: p, miniMapRef: a }) {
   return /* @__PURE__ */ r("div", {
     className: "flow-minimap",
     style: {
-      display: w && !s ? void 0 : "none",
+      display: v && !s ? void 0 : "none",
       cursor: "pointer"
     },
-    onPointerDown: y,
-    onPointerMove: d,
-    onPointerUp: I,
+    onPointerDown: b,
+    onPointerMove: c,
+    onPointerUp: y,
     title: "点击或拖动以移动画布",
     children: /* @__PURE__ */ r("canvas", {
       ref: o,
@@ -721,10 +723,10 @@ function nt({ canvasRef: o, pixiRef: p, miniMapRef: a }) {
   });
 }
 function ot(o, p) {
-  const a = `"id": "${p}"`, w = o.indexOf(a);
-  if (w === -1) return null;
+  const a = `"id": "${p}"`, v = o.indexOf(a);
+  if (v === -1) return null;
   let u = 0, s = -1;
-  for (let n = w; n >= 0; n--)
+  for (let n = v; n >= 0; n--)
     if (o[n] === "}" && u++, o[n] === "{") {
       if (u === 0) {
         s = n;
@@ -747,69 +749,69 @@ function ot(o, p) {
 `).length
   };
 }
-function ie(o) {
+function re(o) {
   o.querySelectorAll(".cm-line.flow-json-hl").forEach((p) => p.classList.remove("flow-json-hl"));
 }
 function st(o, p, a) {
-  const w = o.getView();
-  if (w)
+  const v = o.getView();
+  if (v)
     for (let u = p; u <= a; u++) try {
-      const s = w.state.doc.line(u), l = w.domAtPos(s.from), n = l.node instanceof HTMLElement ? l.node.closest(".cm-line") : l.node.parentElement?.closest(".cm-line");
+      const s = v.state.doc.line(u), l = v.domAtPos(s.from), n = l.node instanceof HTMLElement ? l.node.closest(".cm-line") : l.node.parentElement?.closest(".cm-line");
       n && n.classList.add("flow-json-hl");
     } catch {
     }
 }
-function rt() {
-  const { setDoc: o, currentCanvasId: p, selection: a, currentCanvas: w } = ee(), [u, s] = j(""), [l, n] = j(null), y = R(!1), d = R(null), I = R(null), e = le(() => a.nodeIds.size + a.edgeIds.size + a.lineIds.size !== 1 ? null : a.nodeIds.size === 1 ? [...a.nodeIds][0] : a.edgeIds.size === 1 ? [...a.edgeIds][0] : a.lineIds.size === 1 ? [...a.lineIds][0] : null, [a]);
+function it() {
+  const { setDoc: o, currentCanvasId: p, selection: a, currentCanvas: v } = ee(), [u, s] = j(""), [l, n] = j(null), b = F(!1), c = F(null), y = F(null), e = le(() => a.nodeIds.size + a.edgeIds.size + a.lineIds.size !== 1 ? null : a.nodeIds.size === 1 ? [...a.nodeIds][0] : a.edgeIds.size === 1 ? [...a.edgeIds][0] : a.lineIds.size === 1 ? [...a.lineIds][0] : null, [a]);
   X(() => {
-    if (y.current) {
-      y.current = !1;
+    if (b.current) {
+      b.current = !1;
       return;
     }
-    s(JSON.stringify(w, null, 2)), n(null);
-  }, [w]), X(() => {
-    const v = I.current;
-    if (v && ie(v), !e) return;
-    const b = setTimeout(() => {
+    s(JSON.stringify(v, null, 2)), n(null);
+  }, [v]), X(() => {
+    const h = y.current;
+    if (h && re(h), !e) return;
+    const x = setTimeout(() => {
       const g = ot(u, e);
-      if (!g || !I.current) return;
-      const S = d.current?.getView();
+      if (!g || !y.current) return;
+      const S = c.current?.getView();
       if (!S) return;
-      const G = I.current, L = S.scrollDOM;
-      L.style.scrollBehavior = "smooth";
-      const K = S.state.doc.line(g.startLine);
-      S.dispatch({ effects: Be.scrollIntoView(K.from, {
+      const K = y.current, z = S.scrollDOM;
+      z.style.scrollBehavior = "smooth";
+      const J = S.state.doc.line(g.startLine);
+      S.dispatch({ effects: Be.scrollIntoView(J.from, {
         y: "start",
         yMargin: 0
       }) });
       const C = () => {
-        L.style.scrollBehavior = "", ie(G), st(d.current, g.startLine, g.endLine);
+        z.style.scrollBehavior = "", re(K), st(c.current, g.startLine, g.endLine);
       };
       let f;
-      const m = () => {
+      const w = () => {
         clearTimeout(f), f = setTimeout(C, 100);
       };
-      L.addEventListener("scroll", m), f = setTimeout(() => {
-        L.removeEventListener("scroll", m), C();
+      z.addEventListener("scroll", w), f = setTimeout(() => {
+        z.removeEventListener("scroll", w), C();
       }, 800);
     }, 120);
-    return () => clearTimeout(b);
+    return () => clearTimeout(x);
   }, [e, u]);
-  const h = D((v) => {
-    s(v);
+  const I = E((h) => {
+    s(h);
     try {
-      const b = JSON.parse(v);
-      b && Array.isArray(b.nodes) && Array.isArray(b.edges) && Array.isArray(b.lines) ? (n(null), y.current = !0, o((g) => ({
+      const x = JSON.parse(h);
+      x && Array.isArray(x.nodes) && Array.isArray(x.edges) && Array.isArray(x.lines) ? (n(null), b.current = !0, o((g) => ({
         ...g,
         canvases: {
           ...g.canvases,
-          [p]: b
+          [p]: x
         }
       }))) : n("JSON must have nodes, edges, lines arrays");
-    } catch (b) {
-      n(b.message?.slice(0, 60) ?? "Invalid JSON");
+    } catch (x) {
+      n(x.message?.slice(0, 60) ?? "Invalid JSON");
     }
-  }, [o, p]), c = e ? a.nodeIds.has(e) ? "Node" : a.edgeIds.has(e) ? "Edge" : "Line" : null;
+  }, [o, p]), m = e ? a.nodeIds.has(e) ? "Node" : a.edgeIds.has(e) ? "Edge" : "Line" : null;
   return /* @__PURE__ */ _("div", {
     style: {
       display: "flex",
@@ -822,7 +824,7 @@ function rt() {
         className: "flow-json-header",
         children: /* @__PURE__ */ r("span", {
           className: "flow-json-scope",
-          children: c ? `${c}: ${e.slice(0, 8)}` : "Canvas"
+          children: m ? `${m}: ${e.slice(0, 8)}` : "Canvas"
         })
       }),
       l && /* @__PURE__ */ r("div", {
@@ -835,15 +837,15 @@ function rt() {
         children: l
       }),
       /* @__PURE__ */ r("div", {
-        ref: I,
+        ref: y,
         style: {
           flex: 1,
           minHeight: 0
         },
         children: /* @__PURE__ */ r(ge, {
-          ref: d,
+          ref: c,
           value: u,
-          onChange: h,
+          onChange: I,
           language: "json",
           lineNumbers: !1,
           height: "100%",
@@ -853,51 +855,51 @@ function rt() {
     ]
   });
 }
-function it() {
-  const { contextMenu: o, setContextMenu: p } = Y(), { doc: a, setDoc: w, currentCanvasId: u, pushCanvas: s, setSelection: l } = ee(), { duplicate: n } = ae();
+function rt() {
+  const { contextMenu: o, setContextMenu: p } = Y(), { doc: a, setDoc: v, currentCanvasId: u, pushCanvas: s, setSelection: l } = ee(), { duplicate: n } = ae();
   if (!o) return null;
-  const y = a.canvases[u];
-  if (!y)
+  const b = a.canvases[u];
+  if (!b)
     return p(null), null;
-  const d = o.nodeId ? y.nodes.find((e) => e.id === o.nodeId) : null, I = [];
-  return d && (I.push({
+  const c = o.nodeId ? b.nodes.find((e) => e.id === o.nodeId) : null, y = [];
+  return c && (y.push({
     label: "Duplicate",
     icon: "⧉",
     action: () => {
-      n(24, 24, { nodeIds: /* @__PURE__ */ new Set([d.id]) });
+      n(24, 24, { nodeIds: /* @__PURE__ */ new Set([c.id]) });
     }
-  }), I.push({
+  }), y.push({
     label: "---",
     action: () => {
     }
-  }), d.data.childCanvasId ? (I.push({
+  }), c.data.childCanvasId ? (y.push({
     label: "Enter Sub-canvas",
     icon: "↓",
     action: () => {
-      s(d.data.childCanvasId), l({
+      s(c.data.childCanvasId), l({
         nodeIds: /* @__PURE__ */ new Set(),
         edgeIds: /* @__PURE__ */ new Set(),
         lineIds: /* @__PURE__ */ new Set()
       });
     }
-  }), I.push({
+  }), y.push({
     label: "---",
     action: () => {
     }
-  }), I.push({
+  }), y.push({
     label: "Delete Sub-canvas",
     icon: "🗑",
     danger: !0,
     action: () => {
-      const e = d.data.childCanvasId;
-      w((h) => {
-        const c = { ...h.canvases };
-        ce(c, e);
-        const v = c[u];
-        if (!v) return h;
-        c[u] = {
-          ...v,
-          nodes: v.nodes.map((g) => g.id === d.id ? {
+      const e = c.data.childCanvasId;
+      v((I) => {
+        const m = { ...I.canvases };
+        ce(m, e);
+        const h = m[u];
+        if (!h) return I;
+        m[u] = {
+          ...h,
+          nodes: h.nodes.map((g) => g.id === c.id ? {
             ...g,
             data: {
               ...g.data,
@@ -905,34 +907,34 @@ function it() {
             }
           } : g)
         };
-        const b = h.stack.filter((g) => c[g]);
-        return b.length === 0 && b.push(we), {
-          ...h,
-          canvases: c,
-          stack: b
+        const x = I.stack.filter((g) => m[g]);
+        return x.length === 0 && x.push(we), {
+          ...I,
+          canvases: m,
+          stack: x
         };
       });
     }
-  })) : I.push({
+  })) : y.push({
     label: "Create Sub-canvas",
     icon: "⊞",
     action: () => {
       const e = Q("canvas");
-      w((h) => {
-        const c = h.canvases[u];
-        return c ? {
-          ...h,
+      v((I) => {
+        const m = I.canvases[u];
+        return m ? {
+          ...I,
           canvases: {
-            ...h.canvases,
+            ...I.canvases,
             [u]: {
-              ...c,
-              nodes: c.nodes.map((v) => v.id === d.id ? {
-                ...v,
+              ...m,
+              nodes: m.nodes.map((h) => h.id === c.id ? {
+                ...h,
                 data: {
-                  ...v.data,
+                  ...h.data,
                   childCanvasId: e
                 }
-              } : v)
+              } : h)
             },
             [e]: {
               nodes: [],
@@ -940,20 +942,20 @@ function it() {
               lines: []
             }
           }
-        } : h;
+        } : I;
       }), s(e);
     }
-  })), I.length === 0 ? null : /* @__PURE__ */ r(Ke, {
+  })), y.length === 0 ? null : /* @__PURE__ */ r(Ke, {
     x: o.x,
     y: o.y,
-    items: I,
+    items: y,
     onClose: () => p(null)
   });
 }
 function ce(o, p) {
   const a = o[p];
   if (a) {
-    for (const w of a.nodes) w.data.childCanvasId && ce(o, w.data.childCanvasId);
+    for (const v of a.nodes) v.data.childCanvasId && ce(o, v.data.childCanvasId);
     delete o[p];
   }
 }