dishui 0.0.56 → 0.0.57

package/dist/components/pro/Flow/canvas/ViewportContainer.d.ts

@@ -18,11 +18,17 @@ export declare class ViewportManager {
     private _rightPanning;
     /** Whether the current right-button pan actually moved (used to suppress the context menu). */
     private _rightPanMoved;
+    /** True while a multi-touch gesture (pinch zoom / two-finger pan) is active.
+     * Set by FlowCanvas's native touch handlers; while set, pointer-driven
+     * interactions (marquee, node drag, tap-to-place) must be suppressed. */
+    multiTouchActive: boolean;
     constructor(world: Container, stage: Container, onChange?: ViewportChangeCallback);
     get state(): ViewportState;
     setState(s: Partial<ViewportState>): void;
     /** Start a pan from an external trigger (e.g. pan tool mode) */
     startPan(sx: number, sy: number): void;
+    /** Abort any in-progress pan (used when a multi-touch gesture takes over). */
+    cancelPan(): void;
     /** Smoothly animate to a target state */
     animateTo(target: ViewportState, duration?: number): void;
     /** Convert screen coords to world coords */

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

@@ -20,15 +20,16 @@ var d = class {
   _spaceHeld = !1;
   _rightPanning = !1;
   _rightPanMoved = !1;
-  constructor(t, s, e) {
-    this.world = t, this.stage = s, this.onChange = e, this._bindStageEvents(), this._bindKeyEvents();
+  multiTouchActive = !1;
+  constructor(t, s, i) {
+    this.world = t, this.stage = s, this.onChange = i, this._bindStageEvents(), this._bindKeyEvents();
   }
   get state() {
     return { ...this._state };
   }
   setState(t) {
-    const s = t.x !== void 0 ? t.x : this._state.x, e = t.y !== void 0 ? t.y : this._state.y, i = t.zoom !== void 0 ? Math.max(h, Math.min(4, t.zoom)) : this._state.zoom;
-    s === this._state.x && e === this._state.y && i === this._state.zoom || (this._state.x = s, this._state.y = e, this._state.zoom = i, this._applyTransform());
+    const s = t.x !== void 0 ? t.x : this._state.x, i = t.y !== void 0 ? t.y : this._state.y, e = t.zoom !== void 0 ? Math.max(h, Math.min(4, t.zoom)) : this._state.zoom;
+    s === this._state.x && i === this._state.y && e === this._state.zoom || (this._state.x = s, this._state.y = i, this._state.zoom = e, this._applyTransform());
   }
   startPan(t, s) {
     this._panning = !0, this._panStart = {
@@ -39,10 +40,13 @@ var d = class {
       y: this._state.y
     };
   }
+  cancelPan() {
+    this._panning = !1, this._rightPanning = !1;
+  }
   animateTo(t, s = 300) {
-    const e = { ...this._state }, i = performance.now(), n = () => {
-      const r = performance.now() - i, o = Math.min(1, r / s), a = o < 0.5 ? 2 * o * o : 1 - (-2 * o + 2) ** 2 / 2;
-      this._state.x = e.x + (t.x - e.x) * a, this._state.y = e.y + (t.y - e.y) * a, this._state.zoom = e.zoom + (t.zoom - e.zoom) * a, this._applyTransform(), o < 1 && requestAnimationFrame(n);
+    const i = { ...this._state }, e = performance.now(), n = () => {
+      const r = performance.now() - e, o = Math.min(1, r / s), a = o < 0.5 ? 2 * o * o : 1 - (-2 * o + 2) ** 2 / 2;
+      this._state.x = i.x + (t.x - i.x) * a, this._state.y = i.y + (t.y - i.y) * a, this._state.zoom = i.zoom + (t.zoom - i.zoom) * a, this._applyTransform(), o < 1 && requestAnimationFrame(n);
     };
     requestAnimationFrame(n);
   }
@@ -73,13 +77,14 @@ var d = class {
   _handleKeyUp(t) {
     t.code === "Space" && (this._spaceHeld = !1, this._panning = !1);
   }
-  zoomAt(t, s, e) {
-    const i = this._state.zoom, n = Math.max(h, Math.min(4, i * e));
-    n !== i && (this._state.x = t - (t - this._state.x) * (n / i), this._state.y = s - (s - this._state.y) * (n / i), this._state.zoom = n, this._applyTransform());
+  zoomAt(t, s, i) {
+    const e = this._state.zoom, n = Math.max(h, Math.min(4, e * i));
+    n !== e && (this._state.x = t - (t - this._state.x) * (n / e), this._state.y = s - (s - this._state.y) * (n / e), this._state.zoom = n, this._applyTransform());
   }
   _onPointerDown = (t) => {
-    const s = t.button === 1, e = t.button === 2;
-    (s || e || this._spaceHeld) && (this._panning = !0, this._rightPanning = e, this._rightPanMoved = !1, this._panStart = {
+    if (this.multiTouchActive) return;
+    const s = t.button === 1, i = t.button === 2;
+    (s || i || this._spaceHeld) && (this._panning = !0, this._rightPanning = i, this._rightPanMoved = !1, this._panStart = {
       x: t.global.x,
       y: t.global.y
     }, this._worldStart = {
@@ -88,9 +93,9 @@ var d = class {
     });
   };
   _onPointerMove = (t) => {
-    if (!this._panning) return;
-    const s = t.global.x - this._panStart.x, e = t.global.y - this._panStart.y;
-    this._rightPanning && (Math.abs(s) > 3 || Math.abs(e) > 3) && (this._rightPanMoved = !0), this._state.x = this._worldStart.x + s, this._state.y = this._worldStart.y + e, this._applyTransform();
+    if (!this._panning || this.multiTouchActive) return;
+    const s = t.global.x - this._panStart.x, i = t.global.y - this._panStart.y;
+    this._rightPanning && (Math.abs(s) > 3 || Math.abs(i) > 3) && (this._rightPanMoved = !0), this._state.x = this._worldStart.x + s, this._state.y = this._worldStart.y + i, this._applyTransform();
   };
   _onPointerUp = () => {
     this._panning = !1, this._rightPanning = !1;

package/dist/components/pro/Flow/canvas/ViewportContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewportContainer.js","names":[],"sources":["../../../../../src/components/pro/Flow/canvas/ViewportContainer.ts"],"sourcesContent":["import { Container, FederatedPointerEvent } from 'pixi.js';\nimport { MIN_ZOOM, MAX_ZOOM } from '../constants';\nimport type { ViewportState } from '../types';\n\nexport type ViewportChangeCallback = (state: ViewportState) => void;\n\n/**\n * Manages pan/zoom on the world container.\n * Listens for wheel (zoom) and middle-click / space+drag (pan).\n */\nexport class ViewportManager {\n  private world: Container;\n  private stage: Container;\n  private _state: ViewportState = { x: 0, y: 0, zoom: 1 };\n  private onChange?: ViewportChangeCallback;\n\n  private _panning = false;\n  private _panStart = { x: 0, y: 0 };\n  private _worldStart = { x: 0, y: 0 };\n  private _spaceHeld = false;\n  /** True while a pan was triggered by the right mouse button. */\n  private _rightPanning = false;\n  /** Whether the current right-button pan actually moved (used to suppress the context menu). */\n  private _rightPanMoved = false;\n\n  constructor(world: Container, stage: Container, onChange?: ViewportChangeCallback) {\n    this.world = world;\n    this.stage = stage;\n    this.onChange = onChange;\n    this._bindStageEvents();\n    this._bindKeyEvents();\n  }\n\n  get state(): ViewportState {\n    return { ...this._state };\n  }\n\n  setState(s: Partial<ViewportState>): void {\n    const nx = s.x !== undefined ? s.x : this._state.x;\n    const ny = s.y !== undefined ? s.y : this._state.y;\n    const nz = s.zoom !== undefined\n      ? Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, s.zoom))\n      : this._state.zoom;\n    // Skip if nothing actually changed — avoids a needless onChange emit that\n    // could feed back into React state and cause viewport jitter.\n    if (nx === this._state.x && ny === this._state.y && nz === this._state.zoom) return;\n    this._state.x = nx;\n    this._state.y = ny;\n    this._state.zoom = nz;\n    this._applyTransform();\n  }\n\n  /** Start a pan from an external trigger (e.g. pan tool mode) */\n  startPan(sx: number, sy: number): void {\n    this._panning = true;\n    this._panStart = { x: sx, y: sy };\n    this._worldStart = { x: this._state.x, y: this._state.y };\n  }\n\n  /** Smoothly animate to a target state */\n  animateTo(target: ViewportState, duration = 300): void {\n    const start = { ...this._state };\n    const startTime = performance.now();\n    const tick = () => {\n      const elapsed = performance.now() - startTime;\n      const t = Math.min(1, elapsed / duration);\n      const ease = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;\n      this._state.x = start.x + (target.x - start.x) * ease;\n      this._state.y = start.y + (target.y - start.y) * ease;\n      this._state.zoom = start.zoom + (target.zoom - start.zoom) * ease;\n      this._applyTransform();\n      if (t < 1) requestAnimationFrame(tick);\n    };\n    requestAnimationFrame(tick);\n  }\n\n  /** Convert screen coords to world coords */\n  screenToWorld(sx: number, sy: number): { x: number; y: number } {\n    return {\n      x: (sx - this._state.x) / this._state.zoom,\n      y: (sy - this._state.y) / this._state.zoom,\n    };\n  }\n\n  /** Convert world coords to screen coords */\n  worldToScreen(wx: number, wy: number): { x: number; y: number } {\n    return {\n      x: wx * this._state.zoom + this._state.x,\n      y: wy * this._state.zoom + this._state.y,\n    };\n  }\n\n  private _applyTransform(): void {\n    this.world.position.set(this._state.x, this._state.y);\n    this.world.scale.set(this._state.zoom);\n    this.onChange?.(this.state);\n  }\n\n  private _bindStageEvents(): void {\n    // NOTE: wheel/zoom is handled by a native, non-passive DOM listener in\n    // FlowCanvas (see `zoomAt`) so it can call preventDefault() and stop the\n    // browser's Ctrl/Cmd+wheel page zoom. Pixi's federated wheel event cannot\n    // reliably prevent that native gesture.\n    this.stage.on('pointerdown', this._onPointerDown, this);\n    this.stage.on('pointermove', this._onPointerMove, this);\n    this.stage.on('pointerup', this._onPointerUp, this);\n    this.stage.on('pointerupoutside', this._onPointerUp, this);\n  }\n\n  private _bindKeyEvents(): void {\n    this._handleKeyDown = this._handleKeyDown.bind(this);\n    this._handleKeyUp = this._handleKeyUp.bind(this);\n    window.addEventListener('keydown', this._handleKeyDown);\n    window.addEventListener('keyup', this._handleKeyUp);\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === 'Space') this._spaceHeld = true;\n  }\n\n  private _handleKeyUp(e: KeyboardEvent): void {\n    if (e.code === 'Space') {\n      this._spaceHeld = false;\n      this._panning = false;\n    }\n  }\n\n  /**\n   * Zoom by a multiplicative factor around a screen-space anchor point.\n   * Driven by a native wheel listener so the browser page zoom can be blocked.\n   */\n  zoomAt(sx: number, sy: number, factor: number): void {\n    const oldZoom = this._state.zoom;\n    const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, oldZoom * factor));\n    if (newZoom === oldZoom) return;\n    this._state.x = sx - (sx - this._state.x) * (newZoom / oldZoom);\n    this._state.y = sy - (sy - this._state.y) * (newZoom / oldZoom);\n    this._state.zoom = newZoom;\n    this._applyTransform();\n  }\n\n  private _onPointerDown = (e: FederatedPointerEvent): void => {\n    const isMiddle = e.button === 1;\n    const isRight = e.button === 2;\n    if (isMiddle || isRight || this._spaceHeld) {\n      this._panning = true;\n      this._rightPanning = isRight;\n      this._rightPanMoved = false;\n      this._panStart = { x: e.global.x, y: e.global.y };\n      this._worldStart = { x: this._state.x, y: this._state.y };\n    }\n  };\n\n  private _onPointerMove = (e: FederatedPointerEvent): void => {\n    if (!this._panning) return;\n    const dx = e.global.x - this._panStart.x;\n    const dy = e.global.y - this._panStart.y;\n    // Mark a right-button pan as \"moved\" once it passes a small threshold so\n    // that a plain right-click (no drag) still opens the context menu.\n    if (this._rightPanning && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {\n      this._rightPanMoved = true;\n    }\n    this._state.x = this._worldStart.x + dx;\n    this._state.y = this._worldStart.y + dy;\n    this._applyTransform();\n  };\n\n  private _onPointerUp = (): void => {\n    this._panning = false;\n    this._rightPanning = false;\n  };\n\n  get isPanning(): boolean {\n    return this._panning;\n  }\n\n  get isSpaceHeld(): boolean {\n    return this._spaceHeld;\n  }\n\n  /**\n   * Whether the most recent right-button interaction was a pan drag (moved past\n   * the threshold). Consumers use this to suppress the context menu after a\n   * right-drag pan. The flag resets on the next pointer down.\n   */\n  get didRightPan(): boolean {\n    return this._rightPanMoved;\n  }\n\n  destroy(): void {\n    window.removeEventListener('keydown', this._handleKeyDown);\n    window.removeEventListener('keyup', this._handleKeyUp);\n    this.stage.off('pointerdown', this._onPointerDown, this);\n    this.stage.off('pointermove', this._onPointerMove, this);\n    this.stage.off('pointerup', this._onPointerUp, this);\n    this.stage.off('pointerupoutside', this._onPointerUp, this);\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ViewportContainer.js","names":[],"sources":["../../../../../src/components/pro/Flow/canvas/ViewportContainer.ts"],"sourcesContent":["import { Container, FederatedPointerEvent } from 'pixi.js';\nimport { MIN_ZOOM, MAX_ZOOM } from '../constants';\nimport type { ViewportState } from '../types';\n\nexport type ViewportChangeCallback = (state: ViewportState) => void;\n\n/**\n * Manages pan/zoom on the world container.\n * Listens for wheel (zoom) and middle-click / space+drag (pan).\n */\nexport class ViewportManager {\n  private world: Container;\n  private stage: Container;\n  private _state: ViewportState = { x: 0, y: 0, zoom: 1 };\n  private onChange?: ViewportChangeCallback;\n\n  private _panning = false;\n  private _panStart = { x: 0, y: 0 };\n  private _worldStart = { x: 0, y: 0 };\n  private _spaceHeld = false;\n  /** True while a pan was triggered by the right mouse button. */\n  private _rightPanning = false;\n  /** Whether the current right-button pan actually moved (used to suppress the context menu). */\n  private _rightPanMoved = false;\n  /** True while a multi-touch gesture (pinch zoom / two-finger pan) is active.\n   * Set by FlowCanvas's native touch handlers; while set, pointer-driven\n   * interactions (marquee, node drag, tap-to-place) must be suppressed. */\n  multiTouchActive = false;\n\n  constructor(world: Container, stage: Container, onChange?: ViewportChangeCallback) {\n    this.world = world;\n    this.stage = stage;\n    this.onChange = onChange;\n    this._bindStageEvents();\n    this._bindKeyEvents();\n  }\n\n  get state(): ViewportState {\n    return { ...this._state };\n  }\n\n  setState(s: Partial<ViewportState>): void {\n    const nx = s.x !== undefined ? s.x : this._state.x;\n    const ny = s.y !== undefined ? s.y : this._state.y;\n    const nz = s.zoom !== undefined\n      ? Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, s.zoom))\n      : this._state.zoom;\n    // Skip if nothing actually changed — avoids a needless onChange emit that\n    // could feed back into React state and cause viewport jitter.\n    if (nx === this._state.x && ny === this._state.y && nz === this._state.zoom) return;\n    this._state.x = nx;\n    this._state.y = ny;\n    this._state.zoom = nz;\n    this._applyTransform();\n  }\n\n  /** Start a pan from an external trigger (e.g. pan tool mode) */\n  startPan(sx: number, sy: number): void {\n    this._panning = true;\n    this._panStart = { x: sx, y: sy };\n    this._worldStart = { x: this._state.x, y: this._state.y };\n  }\n\n  /** Abort any in-progress pan (used when a multi-touch gesture takes over). */\n  cancelPan(): void {\n    this._panning = false;\n    this._rightPanning = false;\n  }\n\n  /** Smoothly animate to a target state */\n  animateTo(target: ViewportState, duration = 300): void {\n    const start = { ...this._state };\n    const startTime = performance.now();\n    const tick = () => {\n      const elapsed = performance.now() - startTime;\n      const t = Math.min(1, elapsed / duration);\n      const ease = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;\n      this._state.x = start.x + (target.x - start.x) * ease;\n      this._state.y = start.y + (target.y - start.y) * ease;\n      this._state.zoom = start.zoom + (target.zoom - start.zoom) * ease;\n      this._applyTransform();\n      if (t < 1) requestAnimationFrame(tick);\n    };\n    requestAnimationFrame(tick);\n  }\n\n  /** Convert screen coords to world coords */\n  screenToWorld(sx: number, sy: number): { x: number; y: number } {\n    return {\n      x: (sx - this._state.x) / this._state.zoom,\n      y: (sy - this._state.y) / this._state.zoom,\n    };\n  }\n\n  /** Convert world coords to screen coords */\n  worldToScreen(wx: number, wy: number): { x: number; y: number } {\n    return {\n      x: wx * this._state.zoom + this._state.x,\n      y: wy * this._state.zoom + this._state.y,\n    };\n  }\n\n  private _applyTransform(): void {\n    this.world.position.set(this._state.x, this._state.y);\n    this.world.scale.set(this._state.zoom);\n    this.onChange?.(this.state);\n  }\n\n  private _bindStageEvents(): void {\n    // NOTE: wheel/zoom is handled by a native, non-passive DOM listener in\n    // FlowCanvas (see `zoomAt`) so it can call preventDefault() and stop the\n    // browser's Ctrl/Cmd+wheel page zoom. Pixi's federated wheel event cannot\n    // reliably prevent that native gesture.\n    this.stage.on('pointerdown', this._onPointerDown, this);\n    this.stage.on('pointermove', this._onPointerMove, this);\n    this.stage.on('pointerup', this._onPointerUp, this);\n    this.stage.on('pointerupoutside', this._onPointerUp, this);\n  }\n\n  private _bindKeyEvents(): void {\n    this._handleKeyDown = this._handleKeyDown.bind(this);\n    this._handleKeyUp = this._handleKeyUp.bind(this);\n    window.addEventListener('keydown', this._handleKeyDown);\n    window.addEventListener('keyup', this._handleKeyUp);\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === 'Space') this._spaceHeld = true;\n  }\n\n  private _handleKeyUp(e: KeyboardEvent): void {\n    if (e.code === 'Space') {\n      this._spaceHeld = false;\n      this._panning = false;\n    }\n  }\n\n  /**\n   * Zoom by a multiplicative factor around a screen-space anchor point.\n   * Driven by a native wheel listener so the browser page zoom can be blocked.\n   */\n  zoomAt(sx: number, sy: number, factor: number): void {\n    const oldZoom = this._state.zoom;\n    const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, oldZoom * factor));\n    if (newZoom === oldZoom) return;\n    this._state.x = sx - (sx - this._state.x) * (newZoom / oldZoom);\n    this._state.y = sy - (sy - this._state.y) * (newZoom / oldZoom);\n    this._state.zoom = newZoom;\n    this._applyTransform();\n  }\n\n  private _onPointerDown = (e: FederatedPointerEvent): void => {\n    if (this.multiTouchActive) return;\n    const isMiddle = e.button === 1;\n    const isRight = e.button === 2;\n    if (isMiddle || isRight || this._spaceHeld) {\n      this._panning = true;\n      this._rightPanning = isRight;\n      this._rightPanMoved = false;\n      this._panStart = { x: e.global.x, y: e.global.y };\n      this._worldStart = { x: this._state.x, y: this._state.y };\n    }\n  };\n\n  private _onPointerMove = (e: FederatedPointerEvent): void => {\n    if (!this._panning || this.multiTouchActive) return;\n    const dx = e.global.x - this._panStart.x;\n    const dy = e.global.y - this._panStart.y;\n    // Mark a right-button pan as \"moved\" once it passes a small threshold so\n    // that a plain right-click (no drag) still opens the context menu.\n    if (this._rightPanning && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {\n      this._rightPanMoved = true;\n    }\n    this._state.x = this._worldStart.x + dx;\n    this._state.y = this._worldStart.y + dy;\n    this._applyTransform();\n  };\n\n  private _onPointerUp = (): void => {\n    this._panning = false;\n    this._rightPanning = false;\n  };\n\n  get isPanning(): boolean {\n    return this._panning;\n  }\n\n  get isSpaceHeld(): boolean {\n    return this._spaceHeld;\n  }\n\n  /**\n   * Whether the most recent right-button interaction was a pan drag (moved past\n   * the threshold). Consumers use this to suppress the context menu after a\n   * right-drag pan. The flag resets on the next pointer down.\n   */\n  get didRightPan(): boolean {\n    return this._rightPanMoved;\n  }\n\n  destroy(): void {\n    window.removeEventListener('keydown', this._handleKeyDown);\n    window.removeEventListener('keyup', this._handleKeyUp);\n    this.stage.off('pointerdown', this._onPointerDown, this);\n    this.stage.off('pointermove', this._onPointerMove, this);\n    this.stage.off('pointerup', this._onPointerUp, this);\n    this.stage.off('pointerupoutside', this._onPointerUp, this);\n  }\n}\n"],"mappings":"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"}

package/dist/components/pro/Flow/context/FlowUIContext.d.ts

@@ -5,6 +5,8 @@ export interface ContextMenuState {
     y: number;
     nodeId: string | null;
 }
+/** Where an editing panel lives: left dock, right dock or a floating overlay. */
+export type FlowPanelDock = 'left' | 'right' | 'float';
 export interface FocusOnRectOptions {
     /** Screen-space padding around the focused rectangle, in pixels. */
     padding?: number;
@@ -60,8 +62,10 @@ export interface FlowUIContextValue {
     setPendingPlacement: (p: PendingPlacement | null) => void;
     contextMenu: ContextMenuState | null;
     setContextMenu: (m: ContextMenuState | null) => void;
-    detachedTabs: Set<string>;
-    toggleDetach: (tabId: string) => void;
+    /** Dock assignment per panel id. Panels not listed default to the left
+     * dock; users can move them to the right dock or let them float. */
+    panelDocks: Record<string, FlowPanelDock>;
+    setPanelDock: (tabId: string, dock: FlowPanelDock) => void;
     /** PPT-style presentation mode. When set, the overlay animates the viewport
      * between animation anchors, navigable via arrow keys. */
     presentation: PresentationState | null;

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

@@ -1,118 +1,118 @@
-import { createContext as lt, useCallback as o, useContext as gt, useMemo as ft, useRef as w, useState as t } from "react";
+import { createContext as dt, useCallback as o, useContext as ft, useMemo as gt, useRef as w, useState as t } from "react";
 import { jsx as pt } from "react/jsx-runtime";
-var b = lt(null);
-function mt() {
-  const c = gt(b);
+var T = dt(null);
+function St() {
+  const c = ft(T);
   if (!c) throw new Error("useFlowUI must be used within FlowUIProvider");
   return c;
 }
-function xt({ showMiniMap: c = !0, showGrid: V = !0, gridSize: J = 20, showAI: j = !0, readOnly: s = !1, children: k }) {
-  const [a, q] = t("select"), [d, B] = t("smoothstep"), [h, l] = t({
+function mt({ showMiniMap: c = !0, showGrid: V = !0, gridSize: b = 20, showAI: J = !0, readOnly: s = !1, children: j }) {
+  const [a, q] = t("select"), [l, B] = t("smoothstep"), [h, d] = t({
     x: 0,
     y: 0,
     zoom: 1
-  }), g = w(0), H = o((e) => {
-    g.current += 1, l(e);
+  }), f = w(0), H = o((e) => {
+    f.current += 1, d(e);
   }, []), K = o((e) => {
-    l(e);
-  }, []), [f, L] = t(!1), [p, Q] = t(null), W = o((e) => {
+    d(e);
+  }, []), [g, L] = t(!1), [p, Q] = t(null), W = o((e) => {
     s || Q(e);
-  }, [s]), r = w(0), [i, S] = t(!1), I = o(() => {
-    r.current += 1, i || S(!0);
-  }, [i]), M = o(() => {
-    r.current = Math.max(0, r.current - 1), r.current === 0 && S(!1);
-  }, []), [m, X] = t(!0), [x, Y] = t(!0), [R, Z] = t(!0), [P, _] = t(!0), [F, $] = t(j), [v, O] = t(c), [C, y] = t(V), [N, tt] = t(!0), [A, et] = t(J), [D, ot] = t(null), [T, st] = t(null), nt = o((e) => {
+  }, [s]), r = w(0), [i, I] = t(!1), M = o(() => {
+    r.current += 1, i || I(!0);
+  }, [i]), P = o(() => {
+    r.current = Math.max(0, r.current - 1), r.current === 0 && I(!1);
+  }, []), [S, X] = t(!0), [m, Y] = t(!0), [R, Z] = t(!0), [x, _] = t(!0), [F, $] = t(J), [C, O] = t(c), [D, y] = t(V), [N, tt] = t(!0), [A, et] = t(b), [v, ot] = t(null), [U, st] = t(null), nt = o((e) => {
     s || ot(e);
   }, [s]), ct = o((e) => {
     s || st(e);
-  }, [s]), [U, rt] = t(null), [z, it] = t(/* @__PURE__ */ new Set()), E = o((e) => {
-    it((u) => {
-      const n = new Set(u);
-      return n.has(e) ? n.delete(e) : n.add(e), n;
+  }, [s]), [z, rt] = t(null), [E, it] = t({}), G = o((e, u) => {
+    it((n) => n[e] === u ? n : {
+      ...n,
+      [e]: u
     });
-  }, []), G = w(() => {
-  }), ut = o((e, u, n, dt, ht) => {
-    G.current(e, u, n, dt, ht);
+  }, []), k = w(() => {
+  }), ut = o((e, u, n, lt, ht) => {
+    k.current(e, u, n, lt, ht);
   }, []), wt = o((e) => {
-    G.current = e;
-  }, []), at = ft(() => ({
+    k.current = e;
+  }, []), at = gt(() => ({
     toolMode: a,
     setToolMode: q,
-    edgeType: d,
+    edgeType: l,
     setEdgeType: B,
     viewport: h,
     setViewport: H,
     setViewportInternal: K,
-    viewportReqRef: g,
+    viewportReqRef: f,
     focusOnRect: ut,
     setFocusOnRect: wt,
-    autoFocus: f,
+    autoFocus: g,
     setAutoFocus: L,
     editingNodeId: p,
     setEditingNodeId: W,
     isNodeDragging: i,
-    beginNodeDrag: I,
-    endNodeDrag: M,
-    showPalette: m,
+    beginNodeDrag: M,
+    endNodeDrag: P,
+    showPalette: S,
     setShowPalette: X,
-    showInspector: x,
+    showInspector: m,
     setShowInspector: Y,
     showOutline: R,
     setShowOutline: Z,
-    showJson: P,
+    showJson: x,
     setShowJson: _,
     showAI: F,
     setShowAI: $,
-    showMiniMap: v,
+    showMiniMap: C,
     setShowMiniMap: O,
-    showGrid: C,
+    showGrid: D,
     setShowGrid: y,
     showAnchors: N,
     setShowAnchors: tt,
     gridSize: A,
     setGridSize: et,
-    pendingPlacement: D,
+    pendingPlacement: v,
     setPendingPlacement: nt,
-    contextMenu: T,
+    contextMenu: U,
     setContextMenu: ct,
-    presentation: U,
+    presentation: z,
     setPresentation: rt,
-    detachedTabs: z,
-    toggleDetach: E,
+    panelDocks: E,
+    setPanelDock: G,
     readOnly: s
   }), [
     a,
-    d,
+    l,
     h,
-    f,
+    g,
     p,
     i,
-    I,
     M,
+    P,
+    S,
     m,
-    x,
     R,
-    P,
+    x,
     F,
-    v,
     C,
+    D,
     N,
     A,
-    D,
-    T,
+    v,
     U,
     z,
     E,
+    G,
     s
   ]);
-  return /* @__PURE__ */ pt(b.Provider, {
+  return /* @__PURE__ */ pt(T.Provider, {
     value: at,
-    children: k
+    children: j
   });
 }
 export {
-  xt as FlowUIProvider,
-  mt as useFlowUI
+  mt as FlowUIProvider,
+  St as useFlowUI
 };
 
 //# sourceMappingURL=FlowUIContext.js.map

package/dist/components/pro/Flow/context/FlowUIContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowUIContext.js","names":[],"sources":["../../../../../src/components/pro/Flow/context/FlowUIContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo, useState, useRef, useCallback } from 'react';\nimport type { FlowToolMode, FlowEdgeTypeName, FlowShapeType, FlowNodeData, ViewportState } from '../types';\n\nexport interface ContextMenuState {\n  x: number;\n  y: number;\n  nodeId: string | null;\n}\n\nexport interface FocusOnRectOptions {\n  /** Screen-space padding around the focused rectangle, in pixels. */\n  padding?: number;\n  /** Maximum zoom allowed for this focus operation. */\n  maxZoom?: number;\n  /** Viewport transition duration in milliseconds. */\n  duration?: number;\n  /** Keep the current zoom and only animate the focused rectangle to center. */\n  preserveZoom?: boolean;\n}\n\nexport interface FlowUIContextValue {\n  toolMode: FlowToolMode;\n  setToolMode: (mode: FlowToolMode) => void;\n  edgeType: FlowEdgeTypeName;\n  setEdgeType: (type: FlowEdgeTypeName) => void;\n  viewport: ViewportState;\n  setViewport: (v: ViewportState) => void;\n  /** Internal VM→React bridge setter (does not request a VM apply). */\n  setViewportInternal: (v: ViewportState) => void;\n  /** Monotonic counter of external viewport commands. */\n  viewportReqRef: React.MutableRefObject<number>;\n  focusOnRect: (wx: number, wy: number, ww: number, wh: number, options?: FocusOnRectOptions) => void;\n  setFocusOnRect: (fn: (wx: number, wy: number, ww: number, wh: number, options?: FocusOnRectOptions) => void) => void;\n  autoFocus: boolean;\n  setAutoFocus: (v: boolean) => void;\n  editingNodeId: string | null;\n  setEditingNodeId: (id: string | null) => void;\n  /** True while any node/line is being dragged. Used to suppress interactive\n   * DOM overlays (e.g. HTML iframes) that would otherwise swallow pointerup. */\n  isNodeDragging: boolean;\n  beginNodeDrag: () => void;\n  endNodeDrag: () => void;\n  showPalette: boolean;\n  setShowPalette: (v: boolean) => void;\n  showInspector: boolean;\n  setShowInspector: (v: boolean) => void;\n  showOutline: boolean;\n  setShowOutline: (v: boolean) => void;\n  showJson: boolean;\n  setShowJson: (v: boolean) => void;\n  showAI: boolean;\n  setShowAI: (v: boolean) => void;\n  showMiniMap: boolean;\n  setShowMiniMap: (v: boolean) => void;\n  showGrid: boolean;\n  setShowGrid: (v: boolean) => void;\n  /** Global editor-only visibility for animation anchor objects. */\n  showAnchors: boolean;\n  setShowAnchors: (v: boolean) => void;\n  gridSize: number;\n  setGridSize: (s: number) => void;\n  pendingPlacement: PendingPlacement | null;\n  setPendingPlacement: (p: PendingPlacement | null) => void;\n  contextMenu: ContextMenuState | null;\n  setContextMenu: (m: ContextMenuState | null) => void;\n  detachedTabs: Set<string>;\n  toggleDetach: (tabId: string) => void;\n  /** PPT-style presentation mode. When set, the overlay animates the viewport\n   * between animation anchors, navigable via arrow keys. */\n  presentation: PresentationState | null;\n  setPresentation: (p: PresentationState | null) => void;\n  /** When true, all editing affordances are suppressed (read-only preview). */\n  readOnly: boolean;\n}\n\nexport interface PresentationState {\n  /** Index into the anchor sequence (0-based). */\n  current: number;\n  /** Whether to show the active anchor frame and sequence badge in preview. */\n  showAnchor?: boolean;\n}\n\nexport interface PendingPlacement {\n  type: FlowShapeType;\n  width: number;\n  height: number;\n  data: FlowNodeData;\n}\n\nconst FlowUIContext = createContext<FlowUIContextValue | null>(null);\n\nexport function useFlowUI(): FlowUIContextValue {\n  const ctx = useContext(FlowUIContext);\n  if (!ctx) throw new Error('useFlowUI must be used within FlowUIProvider');\n  return ctx;\n}\n\nexport interface FlowUIProviderProps {\n  showMiniMap?: boolean;\n  showGrid?: boolean;\n  gridSize?: number;\n  showAI?: boolean;\n  /** Suppresses context menu, inline text editing and palette placement.\n   * Document mutations are additionally blocked in `Flow` (single choke point). */\n  readOnly?: boolean;\n  children: React.ReactNode;\n}\n\nexport function FlowUIProvider({ showMiniMap: initMiniMap = true, showGrid: initGrid = true, gridSize: initGridSize = 20, showAI: initShowAI = true, readOnly = false, children }: FlowUIProviderProps) {\n  const [toolMode, setToolMode] = useState<FlowToolMode>('select');\n  const [edgeType, setEdgeType] = useState<FlowEdgeTypeName>('smoothstep');\n  const [viewport, setViewportState] = useState<ViewportState>({ x: 0, y: 0, zoom: 1 });\n  // Distinguishes EXTERNAL viewport commands (toolbar, minimap, outline) from\n  // internal echoes emitted by the ViewportManager. Only external commands\n  // should be pushed back into the VM; echoing VM changes causes jitter.\n  const viewportReqRef = useRef(0);\n  const setViewport = useCallback((v: ViewportState) => {\n    viewportReqRef.current += 1;\n    setViewportState(v);\n  }, []);\n  // Internal setter used by the VM→React bridge; does NOT bump the request\n  // counter, so the sync effect will not echo it back to the VM.\n  const setViewportInternal = useCallback((v: ViewportState) => {\n    setViewportState(v);\n  }, []);\n  const [autoFocus, setAutoFocus] = useState(false);\n  const [editingNodeId, setEditingNodeIdRaw] = useState<string | null>(null);\n  // In read-only mode the inline node/edge text editor must never open.\n  const setEditingNodeId = useCallback((id: string | null) => {\n    if (readOnly) return;\n    setEditingNodeIdRaw(id);\n  }, [readOnly]);\n  // Counter so concurrent drags (multi-node) don't flip the flag early.\n  const dragCountRef = useRef(0);\n  const [isNodeDragging, setIsNodeDragging] = useState(false);\n  const beginNodeDrag = useCallback(() => {\n    dragCountRef.current += 1;\n    if (!isNodeDragging) setIsNodeDragging(true);\n  }, [isNodeDragging]);\n  const endNodeDrag = useCallback(() => {\n    dragCountRef.current = Math.max(0, dragCountRef.current - 1);\n    if (dragCountRef.current === 0) setIsNodeDragging(false);\n  }, []);\n  const [showPalette, setShowPalette] = useState(true);\n  const [showInspector, setShowInspector] = useState(true);\n  const [showOutline, setShowOutline] = useState(true);\n  const [showJson, setShowJson] = useState(true);\n  const [showAI, setShowAI] = useState(initShowAI);\n  const [showMiniMap, setShowMiniMap] = useState(initMiniMap);\n  const [showGrid, setShowGrid] = useState(initGrid);\n  const [showAnchors, setShowAnchors] = useState(true);\n  const [gridSize, setGridSize] = useState(initGridSize);\n  const [pendingPlacement, setPendingPlacementRaw] = useState<PendingPlacement | null>(null);\n  const [contextMenu, setContextMenuRaw] = useState<ContextMenuState | null>(null);\n  // Read-only: palette drops and the right-click menu are editing affordances.\n  const setPendingPlacement = useCallback((p: PendingPlacement | null) => {\n    if (readOnly) return;\n    setPendingPlacementRaw(p);\n  }, [readOnly]);\n  const setContextMenu = useCallback((m: ContextMenuState | null) => {\n    if (readOnly) return;\n    setContextMenuRaw(m);\n  }, [readOnly]);\n  const [presentation, setPresentation] = useState<PresentationState | null>(null);\n  const [detachedTabs, setDetachedTabs] = useState<Set<string>>(new Set());\n  const toggleDetach = useCallback((tabId: string) => {\n    setDetachedTabs(prev => {\n      const next = new Set(prev);\n      if (next.has(tabId)) next.delete(tabId); else next.add(tabId);\n      return next;\n    });\n  }, []);\n\n  const focusOnRectRef = useRef<(wx: number, wy: number, ww: number, wh: number, options?: FocusOnRectOptions) => void>(() => {});\n  const focusOnRect = useCallback((wx: number, wy: number, ww: number, wh: number, options?: FocusOnRectOptions) => {\n    focusOnRectRef.current(wx, wy, ww, wh, options);\n  }, []);\n  const setFocusOnRect = useCallback((fn: (wx: number, wy: number, ww: number, wh: number, options?: FocusOnRectOptions) => void) => {\n    focusOnRectRef.current = fn;\n  }, []);\n\n  const value = useMemo<FlowUIContextValue>(() => ({\n    toolMode, setToolMode,\n    edgeType, setEdgeType,\n    viewport, setViewport,\n    setViewportInternal,\n    viewportReqRef,\n    focusOnRect, setFocusOnRect,\n    autoFocus, setAutoFocus,\n    editingNodeId, setEditingNodeId,\n    isNodeDragging, beginNodeDrag, endNodeDrag,\n    showPalette, setShowPalette,\n    showInspector, setShowInspector,\n    showOutline, setShowOutline,\n    showJson, setShowJson,\n    showAI, setShowAI,\n    showMiniMap, setShowMiniMap,\n    showGrid, setShowGrid,\n    showAnchors, setShowAnchors,\n    gridSize, setGridSize,\n    pendingPlacement, setPendingPlacement,\n    contextMenu, setContextMenu,\n    presentation, setPresentation,\n    detachedTabs, toggleDetach,\n    readOnly,\n  }), [toolMode, edgeType, viewport, autoFocus, editingNodeId, isNodeDragging, beginNodeDrag, endNodeDrag, showPalette, showInspector, showOutline, showJson, showAI, showMiniMap, showGrid, showAnchors, gridSize, pendingPlacement, contextMenu, presentation, detachedTabs, toggleDetach, readOnly]);\n\n  return <FlowUIContext.Provider value={value}>{children}</FlowUIContext.Provider>;\n}\n"],"mappings":"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"}
+{"version":3,"file":"FlowUIContext.js","names":[],"sources":["../../../../../src/components/pro/Flow/context/FlowUIContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo, useState, useRef, useCallback } from 'react';\nimport type { FlowToolMode, FlowEdgeTypeName, FlowShapeType, FlowNodeData, ViewportState } from '../types';\n\nexport interface ContextMenuState {\n  x: number;\n  y: number;\n  nodeId: string | null;\n}\n\n/** Where an editing panel lives: left dock, right dock or a floating overlay. */\nexport type FlowPanelDock = 'left' | 'right' | 'float';\n\nexport interface FocusOnRectOptions {\n  /** Screen-space padding around the focused rectangle, in pixels. */\n  padding?: number;\n  /** Maximum zoom allowed for this focus operation. */\n  maxZoom?: number;\n  /** Viewport transition duration in milliseconds. */\n  duration?: number;\n  /** Keep the current zoom and only animate the focused rectangle to center. */\n  preserveZoom?: boolean;\n}\n\nexport interface FlowUIContextValue {\n  toolMode: FlowToolMode;\n  setToolMode: (mode: FlowToolMode) => void;\n  edgeType: FlowEdgeTypeName;\n  setEdgeType: (type: FlowEdgeTypeName) => void;\n  viewport: ViewportState;\n  setViewport: (v: ViewportState) => void;\n  /** Internal VM→React bridge setter (does not request a VM apply). */\n  setViewportInternal: (v: ViewportState) => void;\n  /** Monotonic counter of external viewport commands. */\n  viewportReqRef: React.MutableRefObject<number>;\n  focusOnRect: (wx: number, wy: number, ww: number, wh: number, options?: FocusOnRectOptions) => void;\n  setFocusOnRect: (fn: (wx: number, wy: number, ww: number, wh: number, options?: FocusOnRectOptions) => void) => void;\n  autoFocus: boolean;\n  setAutoFocus: (v: boolean) => void;\n  editingNodeId: string | null;\n  setEditingNodeId: (id: string | null) => void;\n  /** True while any node/line is being dragged. Used to suppress interactive\n   * DOM overlays (e.g. HTML iframes) that would otherwise swallow pointerup. */\n  isNodeDragging: boolean;\n  beginNodeDrag: () => void;\n  endNodeDrag: () => void;\n  showPalette: boolean;\n  setShowPalette: (v: boolean) => void;\n  showInspector: boolean;\n  setShowInspector: (v: boolean) => void;\n  showOutline: boolean;\n  setShowOutline: (v: boolean) => void;\n  showJson: boolean;\n  setShowJson: (v: boolean) => void;\n  showAI: boolean;\n  setShowAI: (v: boolean) => void;\n  showMiniMap: boolean;\n  setShowMiniMap: (v: boolean) => void;\n  showGrid: boolean;\n  setShowGrid: (v: boolean) => void;\n  /** Global editor-only visibility for animation anchor objects. */\n  showAnchors: boolean;\n  setShowAnchors: (v: boolean) => void;\n  gridSize: number;\n  setGridSize: (s: number) => void;\n  pendingPlacement: PendingPlacement | null;\n  setPendingPlacement: (p: PendingPlacement | null) => void;\n  contextMenu: ContextMenuState | null;\n  setContextMenu: (m: ContextMenuState | null) => void;\n  /** Dock assignment per panel id. Panels not listed default to the left\n   * dock; users can move them to the right dock or let them float. */\n  panelDocks: Record<string, FlowPanelDock>;\n  setPanelDock: (tabId: string, dock: FlowPanelDock) => void;\n  /** PPT-style presentation mode. When set, the overlay animates the viewport\n   * between animation anchors, navigable via arrow keys. */\n  presentation: PresentationState | null;\n  setPresentation: (p: PresentationState | null) => void;\n  /** When true, all editing affordances are suppressed (read-only preview). */\n  readOnly: boolean;\n}\n\nexport interface PresentationState {\n  /** Index into the anchor sequence (0-based). */\n  current: number;\n  /** Whether to show the active anchor frame and sequence badge in preview. */\n  showAnchor?: boolean;\n}\n\nexport interface PendingPlacement {\n  type: FlowShapeType;\n  width: number;\n  height: number;\n  data: FlowNodeData;\n}\n\nconst FlowUIContext = createContext<FlowUIContextValue | null>(null);\n\nexport function useFlowUI(): FlowUIContextValue {\n  const ctx = useContext(FlowUIContext);\n  if (!ctx) throw new Error('useFlowUI must be used within FlowUIProvider');\n  return ctx;\n}\n\nexport interface FlowUIProviderProps {\n  showMiniMap?: boolean;\n  showGrid?: boolean;\n  gridSize?: number;\n  showAI?: boolean;\n  /** Suppresses context menu, inline text editing and palette placement.\n   * Document mutations are additionally blocked in `Flow` (single choke point). */\n  readOnly?: boolean;\n  children: React.ReactNode;\n}\n\nexport function FlowUIProvider({ showMiniMap: initMiniMap = true, showGrid: initGrid = true, gridSize: initGridSize = 20, showAI: initShowAI = true, readOnly = false, children }: FlowUIProviderProps) {\n  const [toolMode, setToolMode] = useState<FlowToolMode>('select');\n  const [edgeType, setEdgeType] = useState<FlowEdgeTypeName>('smoothstep');\n  const [viewport, setViewportState] = useState<ViewportState>({ x: 0, y: 0, zoom: 1 });\n  // Distinguishes EXTERNAL viewport commands (toolbar, minimap, outline) from\n  // internal echoes emitted by the ViewportManager. Only external commands\n  // should be pushed back into the VM; echoing VM changes causes jitter.\n  const viewportReqRef = useRef(0);\n  const setViewport = useCallback((v: ViewportState) => {\n    viewportReqRef.current += 1;\n    setViewportState(v);\n  }, []);\n  // Internal setter used by the VM→React bridge; does NOT bump the request\n  // counter, so the sync effect will not echo it back to the VM.\n  const setViewportInternal = useCallback((v: ViewportState) => {\n    setViewportState(v);\n  }, []);\n  const [autoFocus, setAutoFocus] = useState(false);\n  const [editingNodeId, setEditingNodeIdRaw] = useState<string | null>(null);\n  // In read-only mode the inline node/edge text editor must never open.\n  const setEditingNodeId = useCallback((id: string | null) => {\n    if (readOnly) return;\n    setEditingNodeIdRaw(id);\n  }, [readOnly]);\n  // Counter so concurrent drags (multi-node) don't flip the flag early.\n  const dragCountRef = useRef(0);\n  const [isNodeDragging, setIsNodeDragging] = useState(false);\n  const beginNodeDrag = useCallback(() => {\n    dragCountRef.current += 1;\n    if (!isNodeDragging) setIsNodeDragging(true);\n  }, [isNodeDragging]);\n  const endNodeDrag = useCallback(() => {\n    dragCountRef.current = Math.max(0, dragCountRef.current - 1);\n    if (dragCountRef.current === 0) setIsNodeDragging(false);\n  }, []);\n  const [showPalette, setShowPalette] = useState(true);\n  const [showInspector, setShowInspector] = useState(true);\n  const [showOutline, setShowOutline] = useState(true);\n  const [showJson, setShowJson] = useState(true);\n  const [showAI, setShowAI] = useState(initShowAI);\n  const [showMiniMap, setShowMiniMap] = useState(initMiniMap);\n  const [showGrid, setShowGrid] = useState(initGrid);\n  const [showAnchors, setShowAnchors] = useState(true);\n  const [gridSize, setGridSize] = useState(initGridSize);\n  const [pendingPlacement, setPendingPlacementRaw] = useState<PendingPlacement | null>(null);\n  const [contextMenu, setContextMenuRaw] = useState<ContextMenuState | null>(null);\n  // Read-only: palette drops and the right-click menu are editing affordances.\n  const setPendingPlacement = useCallback((p: PendingPlacement | null) => {\n    if (readOnly) return;\n    setPendingPlacementRaw(p);\n  }, [readOnly]);\n  const setContextMenu = useCallback((m: ContextMenuState | null) => {\n    if (readOnly) return;\n    setContextMenuRaw(m);\n  }, [readOnly]);\n  const [presentation, setPresentation] = useState<PresentationState | null>(null);\n  const [panelDocks, setPanelDocks] = useState<Record<string, FlowPanelDock>>({});\n  const setPanelDock = useCallback((tabId: string, dock: FlowPanelDock) => {\n    setPanelDocks(prev => (prev[tabId] === dock ? prev : { ...prev, [tabId]: dock }));\n  }, []);\n\n  const focusOnRectRef = useRef<(wx: number, wy: number, ww: number, wh: number, options?: FocusOnRectOptions) => void>(() => {});\n  const focusOnRect = useCallback((wx: number, wy: number, ww: number, wh: number, options?: FocusOnRectOptions) => {\n    focusOnRectRef.current(wx, wy, ww, wh, options);\n  }, []);\n  const setFocusOnRect = useCallback((fn: (wx: number, wy: number, ww: number, wh: number, options?: FocusOnRectOptions) => void) => {\n    focusOnRectRef.current = fn;\n  }, []);\n\n  const value = useMemo<FlowUIContextValue>(() => ({\n    toolMode, setToolMode,\n    edgeType, setEdgeType,\n    viewport, setViewport,\n    setViewportInternal,\n    viewportReqRef,\n    focusOnRect, setFocusOnRect,\n    autoFocus, setAutoFocus,\n    editingNodeId, setEditingNodeId,\n    isNodeDragging, beginNodeDrag, endNodeDrag,\n    showPalette, setShowPalette,\n    showInspector, setShowInspector,\n    showOutline, setShowOutline,\n    showJson, setShowJson,\n    showAI, setShowAI,\n    showMiniMap, setShowMiniMap,\n    showGrid, setShowGrid,\n    showAnchors, setShowAnchors,\n    gridSize, setGridSize,\n    pendingPlacement, setPendingPlacement,\n    contextMenu, setContextMenu,\n    presentation, setPresentation,\n    panelDocks, setPanelDock,\n    readOnly,\n  }), [toolMode, edgeType, viewport, autoFocus, editingNodeId, isNodeDragging, beginNodeDrag, endNodeDrag, showPalette, showInspector, showOutline, showJson, showAI, showMiniMap, showGrid, showAnchors, gridSize, pendingPlacement, contextMenu, presentation, panelDocks, setPanelDock, readOnly]);\n\n  return <FlowUIContext.Provider value={value}>{children}</FlowUIContext.Provider>;\n}\n"],"mappings":"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"}

package/dist/components/pro/Flow/hooks/useCompactMode.d.ts

@@ -0,0 +1,13 @@
+import { type RefObject } from 'react';
+/**
+ * Container-width based small-screen ("compact") detection.
+ *
+ * Uses a ResizeObserver on the Flow root element rather than
+ * `window.matchMedia`, so the mode follows the space the component actually
+ * gets: a phone (narrow container) switches to the compact layout, while the
+ * same component embedded in a narrow column on a desktop page does too.
+ *
+ * In compact mode the Flow editor hides the left/right panel docks and instead
+ * offers a single panel switcher at the top with full-screen panels.
+ */
+export declare function useCompactMode(ref: RefObject<HTMLElement | null>, breakpoint?: number): boolean;

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

@@ -0,0 +1,20 @@
+import { useEffect as i, useState as f } from "react";
+function m(t, c = 768) {
+  const [r, u] = f(!1);
+  return i(() => {
+    const e = t.current;
+    if (!e) return;
+    const o = () => {
+      const s = e.clientWidth;
+      s > 0 && u(s < c);
+    };
+    o();
+    const n = new ResizeObserver(o);
+    return n.observe(e), () => n.disconnect();
+  }, [t, c]), r;
+}
+export {
+  m as useCompactMode
+};
+
+//# sourceMappingURL=useCompactMode.js.map

package/dist/components/pro/Flow/hooks/useCompactMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCompactMode.js","names":[],"sources":["../../../../../src/components/pro/Flow/hooks/useCompactMode.ts"],"sourcesContent":["import { useEffect, useState, type RefObject } from 'react';\n\n/**\n * Container-width based small-screen (\"compact\") detection.\n *\n * Uses a ResizeObserver on the Flow root element rather than\n * `window.matchMedia`, so the mode follows the space the component actually\n * gets: a phone (narrow container) switches to the compact layout, while the\n * same component embedded in a narrow column on a desktop page does too.\n *\n * In compact mode the Flow editor hides the left/right panel docks and instead\n * offers a single panel switcher at the top with full-screen panels.\n */\nexport function useCompactMode(ref: RefObject<HTMLElement | null>, breakpoint = 768): boolean {\n  const [compact, setCompact] = useState(false);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const update = () => {\n      const w = el.clientWidth;\n      if (w > 0) setCompact(w < breakpoint);\n    };\n    update();\n    const ro = new ResizeObserver(update);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [ref, breakpoint]);\n\n  return compact;\n}\n"],"mappings":";AAaA,SAAgB,EAAe,GAAoC,IAAa,KAAc;AAC5F,QAAM,CAAC,GAAS,CAAA,IAAc,EAAS,EAAK;AAE5C,SAAA,EAAA,MAAgB;AACd,UAAM,IAAK,EAAI;AACf,QAAI,CAAC,EAAI;AACT,UAAM,IAAA,MAAe;AACnB,YAAM,IAAI,EAAG;AACb,MAAI,IAAI,KAAG,EAAW,IAAI,CAAU;AAAA,IACtC;AACA,IAAA,EAAO;AACP,UAAM,IAAK,IAAI,eAAe,CAAM;AACpC,WAAA,EAAG,QAAQ,CAAE,GACb,MAAa,EAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,GAAK,CAAU,CAAC,GAEb;AACT"}

package/dist/components/pro/Flow/hooks/useDraggablePanel.d.ts

@@ -3,12 +3,27 @@ export interface PanelPosition {
     x: number;
     y: number;
 }
+export type PanelDropSide = 'left' | 'right';
+export interface DraggablePanelOptions {
+    /** Called on pointer-up when the floating panel was dropped over a dock edge. */
+    onDropDock?: (side: PanelDropSide) => void;
+    /** Notified while dragging so the workspace can highlight the hovered dock. */
+    onDragHintChange?: (side: PanelDropSide | null) => void;
+    /** Width (px) of the drop zone along each edge of the workspace. */
+    edgeZone?: number;
+}
 /**
- * Enables free-position dragging for overlay panels.
- * Returns a position override (null = use default CSS) and
- * a set of props to spread onto the panel's drag handle element.
+ * Enables free-position dragging for overlay panels. Returns a position
+ * override (null = use default CSS) and a set of props to spread onto the
+ * panel's drag handle element.
+ *
+ * When `onDropDock` is provided, dropping the panel within `edgeZone` of the
+ * workspace's left/right edge attaches it to that dock: the hovered edge is
+ * reported via `onDragHintChange` during the drag (so the workspace can
+ * highlight a drop zone) and the position resets on drop so the panel snaps
+ * into its dock slot.
  */
-export declare function useDraggablePanel(): {
+export declare function useDraggablePanel({ onDropDock, onDragHintChange, edgeZone }?: DraggablePanelOptions): {
     panelStyle: import("react").CSSProperties | undefined;
     handleProps: {
         onPointerDown: (e: ReactPointerEvent<HTMLElement>) => void;

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

@@ -1,47 +1,54 @@
-import { useCallback as i, useRef as p, useState as g } from "react";
-function P() {
-  const [r, l] = g(null), n = p(null), c = i((t) => {
-    const e = t.currentTarget.closest("[data-flow-panel]");
-    if (!e) return;
+import { useCallback as i, useRef as h, useState as Y } from "react";
+function R({ onDropDock: p, onDragHintChange: c, edgeZone: u = 72 } = {}) {
+  const [s, a] = Y(null), n = h(null), l = h(null), d = i(() => {
+    l.current && (l.current = null, c?.(null));
+  }, [c]), g = i((t) => {
+    const r = t.currentTarget.closest("[data-flow-panel]");
+    if (!r) return;
     t.preventDefault(), t.stopPropagation(), t.target.setPointerCapture(t.pointerId);
-    const o = e.getBoundingClientRect(), s = e.offsetParent?.getBoundingClientRect() ?? {
+    const e = r.getBoundingClientRect(), o = r.offsetParent?.getBoundingClientRect() ?? {
       left: 0,
       top: 0
     };
     n.current = {
       startX: t.clientX,
       startY: t.clientY,
-      originX: o.left - s.left,
-      originY: o.top - s.top
+      originX: e.left - o.left,
+      originY: e.top - o.top,
+      width: e.width,
+      parentWidth: r.offsetParent?.clientWidth ?? e.left - o.left + e.width
     };
-  }, []), a = i((t) => {
+  }, []), X = i((t) => {
     if (!n.current) return;
-    const e = t.clientX - n.current.startX, o = t.clientY - n.current.startY;
-    l({
-      x: n.current.originX + e,
-      y: n.current.originY + o
+    const r = t.clientX - n.current.startX, e = t.clientY - n.current.startY, o = n.current.originX + r;
+    a({
+      x: o,
+      y: n.current.originY + e
     });
-  }, []), u = i(() => {
-    n.current = null;
-  }, []);
+    const P = o + n.current.width / 2, f = P < u ? "left" : P > n.current.parentWidth - u ? "right" : null;
+    f !== l.current && (l.current = f, c?.(f));
+  }, [u, c]), w = i(() => {
+    const t = l.current;
+    d(), n.current = null, t && (p?.(t), a(null));
+  }, [d, p]);
   return {
-    panelStyle: r ? {
+    panelStyle: s ? {
       position: "absolute",
-      left: r.x,
-      top: r.y,
+      left: s.x,
+      top: s.y,
       right: "auto",
       bottom: "auto"
     } : void 0,
     handleProps: {
-      onPointerDown: c,
-      onPointerMove: a,
-      onPointerUp: u
+      onPointerDown: g,
+      onPointerMove: X,
+      onPointerUp: w
     },
-    resetPosition: () => l(null)
+    resetPosition: () => a(null)
   };
 }
 export {
-  P as useDraggablePanel
+  R as useDraggablePanel
 };
 
 //# sourceMappingURL=useDraggablePanel.js.map

package/dist/components/pro/Flow/hooks/useDraggablePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggablePanel.js","names":[],"sources":["../../../../../src/components/pro/Flow/hooks/useDraggablePanel.ts"],"sourcesContent":["import { useState, useRef, useCallback, type PointerEvent as ReactPointerEvent } from 'react';\n\nexport interface PanelPosition {\n  x: number;\n  y: number;\n}\n\n/**\n * Enables free-position dragging for overlay panels.\n * Returns a position override (null = use default CSS) and\n * a set of props to spread onto the panel's drag handle element.\n */\nexport function useDraggablePanel() {\n  const [pos, setPos] = useState<PanelPosition | null>(null);\n  const dragState = useRef<{ startX: number; startY: number; originX: number; originY: number } | null>(null);\n\n  const onPointerDown = useCallback((e: ReactPointerEvent<HTMLElement>) => {\n    const el = (e.currentTarget as HTMLElement).closest('[data-flow-panel]') as HTMLElement | null;\n    if (!el) return;\n    e.preventDefault();\n    e.stopPropagation();\n    (e.target as HTMLElement).setPointerCapture(e.pointerId);\n    const rect = el.getBoundingClientRect();\n    const parentRect = el.offsetParent?.getBoundingClientRect() ?? { left: 0, top: 0 };\n    dragState.current = {\n      startX: e.clientX,\n      startY: e.clientY,\n      originX: rect.left - parentRect.left,\n      originY: rect.top - parentRect.top,\n    };\n  }, []);\n\n  const onPointerMove = useCallback((e: ReactPointerEvent<HTMLElement>) => {\n    if (!dragState.current) return;\n    const dx = e.clientX - dragState.current.startX;\n    const dy = e.clientY - dragState.current.startY;\n    setPos({\n      x: dragState.current.originX + dx,\n      y: dragState.current.originY + dy,\n    });\n  }, []);\n\n  const onPointerUp = useCallback(() => {\n    dragState.current = null;\n  }, []);\n\n  const style: React.CSSProperties | undefined = pos\n    ? { position: 'absolute', left: pos.x, top: pos.y, right: 'auto', bottom: 'auto' }\n    : undefined;\n\n  return {\n    panelStyle: style,\n    handleProps: { onPointerDown, onPointerMove, onPointerUp },\n    resetPosition: () => setPos(null),\n  };\n}\n"],"mappings":";AAYA,SAAgB,IAAoB;AAClC,QAAM,CAAC,GAAK,CAAA,IAAU,EAA+B,IAAI,GACnD,IAAY,EAAoF,IAAI,GAEpG,IAAgB,EAAA,CAAa,MAAsC;AACvE,UAAM,IAAM,EAAE,cAA8B,QAAQ,mBAAmB;AACvE,QAAI,CAAC,EAAI;AACT,IAAA,EAAE,eAAe,GACjB,EAAE,gBAAgB,GAClB,EAAG,OAAuB,kBAAkB,EAAE,SAAS;AACvD,UAAM,IAAO,EAAG,sBAAsB,GAChC,IAAa,EAAG,cAAc,sBAAsB,KAAK;AAAA,MAAE,MAAM;AAAA,MAAG,KAAK;AAAA,IAAE;AACjF,IAAA,EAAU,UAAU;AAAA,MAClB,QAAQ,EAAE;AAAA,MACV,QAAQ,EAAE;AAAA,MACV,SAAS,EAAK,OAAO,EAAW;AAAA,MAChC,SAAS,EAAK,MAAM,EAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC,GAEC,IAAgB,EAAA,CAAa,MAAsC;AACvE,QAAI,CAAC,EAAU,QAAS;AACxB,UAAM,IAAK,EAAE,UAAU,EAAU,QAAQ,QACnC,IAAK,EAAE,UAAU,EAAU,QAAQ;AACzC,IAAA,EAAO;AAAA,MACL,GAAG,EAAU,QAAQ,UAAU;AAAA,MAC/B,GAAG,EAAU,QAAQ,UAAU;AAAA,IACjC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC,GAEC,IAAc,EAAA,MAAkB;AACpC,IAAA,EAAU,UAAU;AAAA,EACtB,GAAG,CAAC,CAAC;AAML,SAAO;AAAA,IACL,YAL6C,IAC3C;AAAA,MAAE,UAAU;AAAA,MAAY,MAAM,EAAI;AAAA,MAAG,KAAK,EAAI;AAAA,MAAG,OAAO;AAAA,MAAQ,QAAQ;AAAA,IAAO,IAC/E;AAAA,IAIF,aAAa;AAAA,MAAE,eAAA;AAAA,MAAe,eAAA;AAAA,MAAe,aAAA;AAAA,IAAY;AAAA,IACzD,eAAA,MAAqB,EAAO,IAAI;AAAA,EAClC;AACF"}
+{"version":3,"file":"useDraggablePanel.js","names":[],"sources":["../../../../../src/components/pro/Flow/hooks/useDraggablePanel.ts"],"sourcesContent":["import { useState, useRef, useCallback, type PointerEvent as ReactPointerEvent } from 'react';\n\nexport interface PanelPosition {\n  x: number;\n  y: number;\n}\n\nexport type PanelDropSide = 'left' | 'right';\n\nexport interface DraggablePanelOptions {\n  /** Called on pointer-up when the floating panel was dropped over a dock edge. */\n  onDropDock?: (side: PanelDropSide) => void;\n  /** Notified while dragging so the workspace can highlight the hovered dock. */\n  onDragHintChange?: (side: PanelDropSide | null) => void;\n  /** Width (px) of the drop zone along each edge of the workspace. */\n  edgeZone?: number;\n}\n\ninterface DragState {\n  startX: number;\n  startY: number;\n  originX: number;\n  originY: number;\n  width: number;\n  parentWidth: number;\n}\n\n/**\n * Enables free-position dragging for overlay panels. Returns a position\n * override (null = use default CSS) and a set of props to spread onto the\n * panel's drag handle element.\n *\n * When `onDropDock` is provided, dropping the panel within `edgeZone` of the\n * workspace's left/right edge attaches it to that dock: the hovered edge is\n * reported via `onDragHintChange` during the drag (so the workspace can\n * highlight a drop zone) and the position resets on drop so the panel snaps\n * into its dock slot.\n */\nexport function useDraggablePanel({ onDropDock, onDragHintChange, edgeZone = 72 }: DraggablePanelOptions = {}) {\n  const [pos, setPos] = useState<PanelPosition | null>(null);\n  const dragState = useRef<DragState | null>(null);\n  const hintRef = useRef<PanelDropSide | null>(null);\n\n  const clearHint = useCallback(() => {\n    if (hintRef.current) {\n      hintRef.current = null;\n      onDragHintChange?.(null);\n    }\n  }, [onDragHintChange]);\n\n  const onPointerDown = useCallback((e: ReactPointerEvent<HTMLElement>) => {\n    const el = (e.currentTarget as HTMLElement).closest('[data-flow-panel]') as HTMLElement | null;\n    if (!el) return;\n    e.preventDefault();\n    e.stopPropagation();\n    (e.target as HTMLElement).setPointerCapture(e.pointerId);\n    const rect = el.getBoundingClientRect();\n    const parentRect = el.offsetParent?.getBoundingClientRect() ?? { left: 0, top: 0 };\n    dragState.current = {\n      startX: e.clientX,\n      startY: e.clientY,\n      originX: rect.left - parentRect.left,\n      originY: rect.top - parentRect.top,\n      width: rect.width,\n      parentWidth: el.offsetParent?.clientWidth ?? rect.left - parentRect.left + rect.width,\n    };\n  }, []);\n\n  const onPointerMove = useCallback((e: ReactPointerEvent<HTMLElement>) => {\n    if (!dragState.current) return;\n    const dx = e.clientX - dragState.current.startX;\n    const dy = e.clientY - dragState.current.startY;\n    const x = dragState.current.originX + dx;\n    setPos({ x, y: dragState.current.originY + dy });\n    // Dock affinity: the panel's center hovering a workspace edge highlights\n    // that dock as the drop target.\n    const centerX = x + dragState.current.width / 2;\n    const next: PanelDropSide | null =\n      centerX < edgeZone ? 'left'\n      : centerX > dragState.current.parentWidth - edgeZone ? 'right'\n      : null;\n    if (next !== hintRef.current) {\n      hintRef.current = next;\n      onDragHintChange?.(next);\n    }\n  }, [edgeZone, onDragHintChange]);\n\n  const onPointerUp = useCallback(() => {\n    const hint = hintRef.current;\n    clearHint();\n    dragState.current = null;\n    if (hint) {\n      onDropDock?.(hint);\n      setPos(null); // snap back into the dock slot\n    }\n  }, [clearHint, onDropDock]);\n\n  const style: React.CSSProperties | undefined = pos\n    ? { position: 'absolute', left: pos.x, top: pos.y, right: 'auto', bottom: 'auto' }\n    : undefined;\n\n  return {\n    panelStyle: style,\n    handleProps: { onPointerDown, onPointerMove, onPointerUp },\n    resetPosition: () => setPos(null),\n  };\n}\n"],"mappings":";AAsCA,SAAgB,EAAkB,EAAE,YAAA,GAAY,kBAAA,GAAkB,UAAA,IAAW,GAAA,IAA8B,CAAC,GAAG;AAC7G,QAAM,CAAC,GAAK,CAAA,IAAU,EAA+B,IAAI,GACnD,IAAY,EAAyB,IAAI,GACzC,IAAU,EAA6B,IAAI,GAE3C,IAAY,EAAA,MAAkB;AAClC,IAAI,EAAQ,YACV,EAAQ,UAAU,MAClB,IAAmB,IAAI;AAAA,EAE3B,GAAG,CAAC,CAAgB,CAAC,GAEf,IAAgB,EAAA,CAAa,MAAsC;AACvE,UAAM,IAAM,EAAE,cAA8B,QAAQ,mBAAmB;AACvE,QAAI,CAAC,EAAI;AACT,IAAA,EAAE,eAAe,GACjB,EAAE,gBAAgB,GAClB,EAAG,OAAuB,kBAAkB,EAAE,SAAS;AACvD,UAAM,IAAO,EAAG,sBAAsB,GAChC,IAAa,EAAG,cAAc,sBAAsB,KAAK;AAAA,MAAE,MAAM;AAAA,MAAG,KAAK;AAAA,IAAE;AACjF,IAAA,EAAU,UAAU;AAAA,MAClB,QAAQ,EAAE;AAAA,MACV,QAAQ,EAAE;AAAA,MACV,SAAS,EAAK,OAAO,EAAW;AAAA,MAChC,SAAS,EAAK,MAAM,EAAW;AAAA,MAC/B,OAAO,EAAK;AAAA,MACZ,aAAa,EAAG,cAAc,eAAe,EAAK,OAAO,EAAW,OAAO,EAAK;AAAA,IAClF;AAAA,EACF,GAAG,CAAC,CAAC,GAEC,IAAgB,EAAA,CAAa,MAAsC;AACvE,QAAI,CAAC,EAAU,QAAS;AACxB,UAAM,IAAK,EAAE,UAAU,EAAU,QAAQ,QACnC,IAAK,EAAE,UAAU,EAAU,QAAQ,QACnC,IAAI,EAAU,QAAQ,UAAU;AACtC,IAAA,EAAO;AAAA,MAAE,GAAA;AAAA,MAAG,GAAG,EAAU,QAAQ,UAAU;AAAA,IAAG,CAAC;AAG/C,UAAM,IAAU,IAAI,EAAU,QAAQ,QAAQ,GACxC,IACJ,IAAU,IAAW,SACnB,IAAU,EAAU,QAAQ,cAAc,IAAW,UACrD;AACJ,IAAI,MAAS,EAAQ,YACnB,EAAQ,UAAU,GAClB,IAAmB,CAAI;AAAA,EAE3B,GAAG,CAAC,GAAU,CAAgB,CAAC,GAEzB,IAAc,EAAA,MAAkB;AACpC,UAAM,IAAO,EAAQ;AACrB,IAAA,EAAU,GACV,EAAU,UAAU,MAChB,MACF,IAAa,CAAI,GACjB,EAAO,IAAI;AAAA,EAEf,GAAG,CAAC,GAAW,CAAU,CAAC;AAM1B,SAAO;AAAA,IACL,YAL6C,IAC3C;AAAA,MAAE,UAAU;AAAA,MAAY,MAAM,EAAI;AAAA,MAAG,KAAK,EAAI;AAAA,MAAG,OAAO;AAAA,MAAQ,QAAQ;AAAA,IAAO,IAC/E;AAAA,IAIF,aAAa;AAAA,MAAE,eAAA;AAAA,MAAe,eAAA;AAAA,MAAe,aAAA;AAAA,IAAY;AAAA,IACzD,eAAA,MAAqB,EAAO,IAAI;AAAA,EAClC;AACF"}