dishui 0.0.47 → 0.0.49

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

@@ -1,9 +1,14 @@
 import { PixiApp } from '../canvas/PixiApp';
+import { type FlowThemeColors } from '../utils/themeColor';
 /**
  * Manages PixiJS Application lifecycle: creates on mount, destroys on unmount,
  * handles container resize.
+ *
+ * The canvas backdrop follows the active DishUI theme (`--color-base-200`). We
+ * resolve the theme color from the container's inherited CSS scope at init and
+ * again whenever the ancestor `data-theme` attribute changes.
  */
-export declare function usePixiApp(containerRef: React.RefObject<HTMLDivElement | null>): {
+export declare function usePixiApp(containerRef: React.RefObject<HTMLDivElement | null>, onThemeColors?: (colors: FlowThemeColors) => void): {
     pixiRef: import("react").RefObject<PixiApp | null>;
     canvasRef: import("react").RefObject<HTMLCanvasElement | null>;
     readyRef: import("react").RefObject<boolean>;

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

@@ -1,41 +1,60 @@
-import { PixiApp as y } from "../canvas/PixiApp.js";
-import { useEffect as m, useRef as c } from "react";
-function w(o) {
-  const r = c(null), s = c(null), i = c(!1);
-  return m(() => {
-    const n = o.current;
-    if (!n) return;
-    let l = !1;
-    const e = document.createElement("canvas");
-    e.style.display = "block", e.style.width = "100%", e.style.height = "100%", n.appendChild(e), s.current = e;
-    const t = new y();
-    r.current = t;
-    const u = n.getBoundingClientRect();
-    t.init({
-      canvas: e,
-      width: u.width,
-      height: u.height
+import { PixiApp as k } from "../canvas/PixiApp.js";
+import { refreshThemePalette as y, resolveFlowThemeColors as w } from "../utils/themeColor.js";
+import { useEffect as x, useRef as o } from "react";
+function O(l, a) {
+  const s = o(null), d = o(null), c = o(!1), i = o(a);
+  return i.current = a, x(() => {
+    const e = l.current;
+    if (!e) return;
+    let h = !1;
+    const t = document.createElement("canvas");
+    t.style.display = "block", t.style.width = "100%", t.style.height = "100%", e.appendChild(t), d.current = t;
+    const r = new k();
+    s.current = r;
+    const f = e.getBoundingClientRect();
+    y(e);
+    const m = w(e);
+    r.init({
+      canvas: t,
+      width: f.width,
+      height: f.height,
+      backgroundColor: m.background
     }).then(() => {
-      l || (i.current = !0);
+      h || (c.current = !0, i.current?.(m));
     });
-    const d = new ResizeObserver((h) => {
-      if (!t.destroyed)
-        for (const p of h) {
-          const { width: f, height: a } = p.contentRect;
-          f > 0 && a > 0 && t.resize(f, a);
+    const p = new ResizeObserver((n) => {
+      if (!r.destroyed)
+        for (const R of n) {
+          const { width: v, height: g } = R.contentRect;
+          v > 0 && g > 0 && r.resize(v, g);
         }
     });
-    return d.observe(n), () => {
-      l = !0, d.disconnect(), t.destroy(), r.current = null, i.current = !1, e.parentNode && e.parentNode.removeChild(e);
+    p.observe(e);
+    const C = () => {
+      if (r.destroyed) return;
+      y(e);
+      const n = w(e);
+      r.setBackgroundColor(n.background), i.current?.(n);
+    }, u = new MutationObserver(C);
+    u.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["data-theme", "class"]
+    });
+    const b = e.closest("[data-theme]");
+    return b && u.observe(b, {
+      attributes: !0,
+      attributeFilter: ["data-theme", "class"]
+    }), () => {
+      h = !0, p.disconnect(), u.disconnect(), r.destroy(), s.current = null, c.current = !1, t.parentNode && t.parentNode.removeChild(t);
     };
-  }, [o]), {
-    pixiRef: r,
-    canvasRef: s,
-    readyRef: i
+  }, [l]), {
+    pixiRef: s,
+    canvasRef: d,
+    readyRef: c
   };
 }
 export {
-  w as usePixiApp
+  O as usePixiApp
 };
 
 //# sourceMappingURL=usePixiApp.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"usePixiApp.js","names":[],"sources":["../../../../../src/components/pro/Flow/hooks/usePixiApp.ts"],"sourcesContent":["import { useRef, useEffect, useCallback } from 'react';\nimport { PixiApp } from '../canvas/PixiApp';\n\n/**\n * Manages PixiJS Application lifecycle: creates on mount, destroys on unmount,\n * handles container resize.\n */\nexport function usePixiApp(containerRef: React.RefObject<HTMLDivElement | null>) {\n  const pixiRef = useRef<PixiApp | null>(null);\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n  const readyRef = useRef(false);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    let cancelled = false;\n\n    const canvas = document.createElement('canvas');\n    canvas.style.display = 'block';\n    canvas.style.width = '100%';\n    canvas.style.height = '100%';\n    container.appendChild(canvas);\n    canvasRef.current = canvas;\n\n    const pixi = new PixiApp();\n    pixiRef.current = pixi;\n\n    const rect = container.getBoundingClientRect();\n    pixi.init({\n      canvas,\n      width: rect.width,\n      height: rect.height,\n    }).then(() => {\n      if (!cancelled) readyRef.current = true;\n    });\n\n    const ro = new ResizeObserver((entries) => {\n      if (pixi.destroyed) return;\n      for (const entry of entries) {\n        const { width, height } = entry.contentRect;\n        if (width > 0 && height > 0) {\n          pixi.resize(width, height);\n        }\n      }\n    });\n    ro.observe(container);\n\n    return () => {\n      cancelled = true;\n      ro.disconnect();\n      pixi.destroy();\n      pixiRef.current = null;\n      readyRef.current = false;\n      if (canvas.parentNode) canvas.parentNode.removeChild(canvas);\n    };\n  }, [containerRef]);\n\n  return { pixiRef, canvasRef, readyRef };\n}\n"],"mappings":";;AAOA,SAAgB,EAAW,GAAsD;AAC/E,QAAM,IAAU,EAAuB,IAAI,GACrC,IAAY,EAAiC,IAAI,GACjD,IAAW,EAAO,EAAK;AAE7B,SAAA,EAAA,MAAgB;AACd,UAAM,IAAY,EAAa;AAC/B,QAAI,CAAC,EAAW;AAEhB,QAAI,IAAY;AAEhB,UAAM,IAAS,SAAS,cAAc,QAAQ;AAC9C,IAAA,EAAO,MAAM,UAAU,SACvB,EAAO,MAAM,QAAQ,QACrB,EAAO,MAAM,SAAS,QACtB,EAAU,YAAY,CAAM,GAC5B,EAAU,UAAU;AAEpB,UAAM,IAAO,IAAI,EAAQ;AACzB,IAAA,EAAQ,UAAU;AAElB,UAAM,IAAO,EAAU,sBAAsB;AAC7C,IAAA,EAAK,KAAK;AAAA,MACR,QAAA;AAAA,MACA,OAAO,EAAK;AAAA,MACZ,QAAQ,EAAK;AAAA,IACf,CAAC,EAAE,KAAA,MAAW;AACZ,MAAK,MAAW,EAAS,UAAU;AAAA,IACrC,CAAC;AAED,UAAM,IAAK,IAAI,eAAA,CAAgB,MAAY;AACzC,UAAI,CAAA,EAAK;AACT,mBAAW,KAAS,GAAS;AAC3B,gBAAM,EAAE,OAAA,GAAO,QAAA,EAAA,IAAW,EAAM;AAChC,UAAI,IAAQ,KAAK,IAAS,KACxB,EAAK,OAAO,GAAO,CAAM;AAAA,QAE7B;AAAA,IACF,CAAC;AACD,WAAA,EAAG,QAAQ,CAAS,GAEpB,MAAa;AACX,MAAA,IAAY,IACZ,EAAG,WAAW,GACd,EAAK,QAAQ,GACb,EAAQ,UAAU,MAClB,EAAS,UAAU,IACf,EAAO,cAAY,EAAO,WAAW,YAAY,CAAM;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,CAAY,CAAC,GAEV;AAAA,IAAE,SAAA;AAAA,IAAS,WAAA;AAAA,IAAW,UAAA;AAAA,EAAS;AACxC"}
+{"version":3,"file":"usePixiApp.js","names":[],"sources":["../../../../../src/components/pro/Flow/hooks/usePixiApp.ts"],"sourcesContent":["import { useRef, useEffect, useCallback } from 'react';\nimport { PixiApp } from '../canvas/PixiApp';\nimport { resolveFlowThemeColors, refreshThemePalette, type FlowThemeColors } from '../utils/themeColor';\n\n/**\n * Manages PixiJS Application lifecycle: creates on mount, destroys on unmount,\n * handles container resize.\n *\n * The canvas backdrop follows the active DishUI theme (`--color-base-200`). We\n * resolve the theme color from the container's inherited CSS scope at init and\n * again whenever the ancestor `data-theme` attribute changes.\n */\nexport function usePixiApp(\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  onThemeColors?: (colors: FlowThemeColors) => void,\n) {\n  const pixiRef = useRef<PixiApp | null>(null);\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n  const readyRef = useRef(false);\n  const onThemeColorsRef = useRef(onThemeColors);\n  onThemeColorsRef.current = onThemeColors;\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    let cancelled = false;\n\n    const canvas = document.createElement('canvas');\n    canvas.style.display = 'block';\n    canvas.style.width = '100%';\n    canvas.style.height = '100%';\n    container.appendChild(canvas);\n    canvasRef.current = canvas;\n\n    const pixi = new PixiApp();\n    pixiRef.current = pixi;\n\n    const rect = container.getBoundingClientRect();\n    refreshThemePalette(container);\n    const themeColors = resolveFlowThemeColors(container);\n    pixi.init({\n      canvas,\n      width: rect.width,\n      height: rect.height,\n      backgroundColor: themeColors.background,\n    }).then(() => {\n      if (!cancelled) {\n        readyRef.current = true;\n        onThemeColorsRef.current?.(themeColors);\n      }\n    });\n\n    const ro = new ResizeObserver((entries) => {\n      if (pixi.destroyed) return;\n      for (const entry of entries) {\n        const { width, height } = entry.contentRect;\n        if (width > 0 && height > 0) {\n          pixi.resize(width, height);\n        }\n      }\n    });\n    ro.observe(container);\n\n    // React to DishUI theme switches (the theme is applied via a `data-theme`\n    // attribute on an ancestor element). Re-resolve the themed colors and push\n    // them to the canvas + subscriber.\n    const applyTheme = () => {\n      if (pixi.destroyed) return;\n      refreshThemePalette(container);\n      const colors = resolveFlowThemeColors(container);\n      pixi.setBackgroundColor(colors.background);\n      onThemeColorsRef.current?.(colors);\n    };\n    const themeObserver = new MutationObserver(applyTheme);\n    themeObserver.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['data-theme', 'class'],\n    });\n    // Also watch the closest themed ancestor, if any.\n    const themedAncestor = container.closest('[data-theme]');\n    if (themedAncestor) {\n      themeObserver.observe(themedAncestor, {\n        attributes: true,\n        attributeFilter: ['data-theme', 'class'],\n      });\n    }\n\n    return () => {\n      cancelled = true;\n      ro.disconnect();\n      themeObserver.disconnect();\n      pixi.destroy();\n      pixiRef.current = null;\n      readyRef.current = false;\n      if (canvas.parentNode) canvas.parentNode.removeChild(canvas);\n    };\n  }, [containerRef]);\n\n  return { pixiRef, canvasRef, readyRef };\n}\n"],"mappings":";;;AAYA,SAAgB,EACd,GACA,GACA;AACA,QAAM,IAAU,EAAuB,IAAI,GACrC,IAAY,EAAiC,IAAI,GACjD,IAAW,EAAO,EAAK,GACvB,IAAmB,EAAO,CAAa;AAC7C,SAAA,EAAiB,UAAU,GAE3B,EAAA,MAAgB;AACd,UAAM,IAAY,EAAa;AAC/B,QAAI,CAAC,EAAW;AAEhB,QAAI,IAAY;AAEhB,UAAM,IAAS,SAAS,cAAc,QAAQ;AAC9C,IAAA,EAAO,MAAM,UAAU,SACvB,EAAO,MAAM,QAAQ,QACrB,EAAO,MAAM,SAAS,QACtB,EAAU,YAAY,CAAM,GAC5B,EAAU,UAAU;AAEpB,UAAM,IAAO,IAAI,EAAQ;AACzB,IAAA,EAAQ,UAAU;AAElB,UAAM,IAAO,EAAU,sBAAsB;AAC7C,IAAA,EAAoB,CAAS;AAC7B,UAAM,IAAc,EAAuB,CAAS;AACpD,IAAA,EAAK,KAAK;AAAA,MACR,QAAA;AAAA,MACA,OAAO,EAAK;AAAA,MACZ,QAAQ,EAAK;AAAA,MACb,iBAAiB,EAAY;AAAA,IAC/B,CAAC,EAAE,KAAA,MAAW;AACZ,MAAK,MACH,EAAS,UAAU,IACnB,EAAiB,UAAU,CAAW;AAAA,IAE1C,CAAC;AAED,UAAM,IAAK,IAAI,eAAA,CAAgB,MAAY;AACzC,UAAI,CAAA,EAAK;AACT,mBAAW,KAAS,GAAS;AAC3B,gBAAM,EAAE,OAAA,GAAO,QAAA,EAAA,IAAW,EAAM;AAChC,UAAI,IAAQ,KAAK,IAAS,KACxB,EAAK,OAAO,GAAO,CAAM;AAAA,QAE7B;AAAA,IACF,CAAC;AACD,IAAA,EAAG,QAAQ,CAAS;AAKpB,UAAM,IAAA,MAAmB;AACvB,UAAI,EAAK,UAAW;AACpB,MAAA,EAAoB,CAAS;AAC7B,YAAM,IAAS,EAAuB,CAAS;AAC/C,MAAA,EAAK,mBAAmB,EAAO,UAAU,GACzC,EAAiB,UAAU,CAAM;AAAA,IACnC,GACM,IAAgB,IAAI,iBAAiB,CAAU;AACrD,IAAA,EAAc,QAAQ,SAAS,iBAAiB;AAAA,MAC9C,YAAY;AAAA,MACZ,iBAAiB,CAAC,cAAc,OAAO;AAAA,IACzC,CAAC;AAED,UAAM,IAAiB,EAAU,QAAQ,cAAc;AACvD,WAAI,KACF,EAAc,QAAQ,GAAgB;AAAA,MACpC,YAAY;AAAA,MACZ,iBAAiB,CAAC,cAAc,OAAO;AAAA,IACzC,CAAC,GAGH,MAAa;AACX,MAAA,IAAY,IACZ,EAAG,WAAW,GACd,EAAc,WAAW,GACzB,EAAK,QAAQ,GACb,EAAQ,UAAU,MAClB,EAAS,UAAU,IACf,EAAO,cAAY,EAAO,WAAW,YAAY,CAAM;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,CAAY,CAAC,GAEV;AAAA,IAAE,SAAA;AAAA,IAAS,WAAA;AAAA,IAAW,UAAA;AAAA,EAAS;AACxC"}

package/dist/components/pro/Flow/index.d.ts

@@ -13,6 +13,8 @@ export { default as FlowToolbar, FlowZoomControls } from './panels/FlowToolbar';
 export { default as ShapePalette } from './panels/ShapePalette';
 export { default as InspectorPanel } from './panels/InspectorPanel';
 export { default as OutlinePanel } from './panels/OutlinePanel';
+export { AIPanelContent } from './panels/AIPanel';
+export { useFlowAI, FlowAIProvider } from './context/FlowAIContext';
 export { default as ContextMenu } from './panels/ContextMenu';
 export { default as Breadcrumb } from './panels/Breadcrumb';
 export { default as ProjectTitle } from './panels/ProjectTitle';

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

@@ -1,15 +1,16 @@
-import { generateId as s } from "../nodes/nodeUtils.js";
-import { simplifyPath as o, smoothCatmullRom as r } from "./lineSmoothing.js";
-import { Graphics as h } from "pixi.js";
-var w = class {
+import { resolveThemeColor as s } from "../utils/themeColor.js";
+import { generateId as o } from "../nodes/nodeUtils.js";
+import { simplifyPath as r, smoothCatmullRom as h } from "./lineSmoothing.js";
+import { Graphics as a } from "pixi.js";
+var v = class {
   stage;
   preview;
   callbacks;
   rawPoints = [];
   drawing = !1;
   _active = !1;
-  constructor(i, t, e) {
-    this.stage = i, this.callbacks = e, this.preview = new h(), this.preview.label = "freehand-preview", this.preview.visible = !1, t.addChild(this.preview);
+  constructor(t, i, e) {
+    this.stage = t, this.callbacks = e, this.preview = new a(), this.preview.label = "freehand-preview", this.preview.visible = !1, i.addChild(this.preview);
   }
   get active() {
     return this._active;
@@ -20,19 +21,19 @@ var w = class {
   deactivate() {
     this._active = !1, this.drawing = !1, this.rawPoints = [], this.preview.destroyed || (this.preview.clear(), this.preview.visible = !1), this.stage.off("pointerdown", this._onDown, this), this.stage.off("globalpointermove", this._onMove, this), this.stage.off("pointerup", this._onUp, this), this.stage.off("pointerupoutside", this._onUp, this);
   }
-  _onDown = (i) => {
-    if (i.button !== 0) return;
-    const t = this.callbacks.screenToWorld(i.global.x, i.global.y);
-    this.drawing = !0, this.rawPoints = [t], this.preview.visible = !0, this.preview.clear();
+  _onDown = (t) => {
+    if (t.button !== 0) return;
+    const i = this.callbacks.screenToWorld(t.global.x, t.global.y);
+    this.drawing = !0, this.rawPoints = [i], this.preview.visible = !0, this.preview.clear();
   };
-  _onMove = (i) => {
+  _onMove = (t) => {
     if (!this.drawing) return;
-    const t = this.callbacks.screenToWorld(i.global.x, i.global.y);
-    if (this.rawPoints.push(t), this.preview.clear(), !(this.rawPoints.length < 2)) {
+    const i = this.callbacks.screenToWorld(t.global.x, t.global.y);
+    if (this.rawPoints.push(i), this.preview.clear(), !(this.rawPoints.length < 2)) {
       this.preview.moveTo(this.rawPoints[0].x, this.rawPoints[0].y);
       for (let e = 1; e < this.rawPoints.length; e++) this.preview.lineTo(this.rawPoints[e].x, this.rawPoints[e].y);
       this.preview.stroke({
-        color: 3621201,
+        color: s("theme:base-content", "#374151"),
         width: 2,
         alpha: 0.6
       });
@@ -44,22 +45,22 @@ var w = class {
       this.rawPoints = [];
       return;
     }
-    const i = r(o(this.rawPoints, 2), 4), t = {
-      id: s("line"),
+    const t = h(r(this.rawPoints, 2), 4), i = {
+      id: o("line"),
       type: "freehand",
-      points: i,
-      strokeColor: "#374151",
+      points: t,
+      strokeColor: "theme:base-content",
       strokeWidth: 2,
       lineStyle: "solid"
     };
-    this.callbacks.onLineComplete(t), this.rawPoints = [];
+    this.callbacks.onLineComplete(i), this.rawPoints = [];
   };
   destroy() {
     this.deactivate(), this.preview.destroyed || this.preview.destroy();
   }
 };
 export {
-  w as FreehandTool
+  v as FreehandTool
 };
 
 //# sourceMappingURL=FreehandTool.js.map

package/dist/components/pro/Flow/lines/FreehandTool.js.map

@@ -1 +1 @@
-{"version":3,"file":"FreehandTool.js","names":[],"sources":["../../../../../src/components/pro/Flow/lines/FreehandTool.ts"],"sourcesContent":["import { Graphics, Container, FederatedPointerEvent } from 'pixi.js';\nimport { simplifyPath, smoothCatmullRom, type Point } from './lineSmoothing';\nimport type { FlowLine } from '../types';\nimport { generateId } from '../nodes/nodeUtils';\n\nexport interface FreehandToolCallbacks {\n  /** Called when a freehand line is finished */\n  onLineComplete: (line: FlowLine) => void;\n  /** Convert screen coords to world coords */\n  screenToWorld: (sx: number, sy: number) => { x: number; y: number };\n}\n\n/**\n * Captures pointer trail for freehand drawing, smooths and stores as FlowLine.\n */\nexport class FreehandTool {\n  private stage: Container;\n  private preview: Graphics;\n  private callbacks: FreehandToolCallbacks;\n  private rawPoints: Point[] = [];\n  private drawing = false;\n  private _active = false;\n\n  constructor(stage: Container, world: Container, callbacks: FreehandToolCallbacks) {\n    this.stage = stage;\n    this.callbacks = callbacks;\n    this.preview = new Graphics();\n    this.preview.label = 'freehand-preview';\n    this.preview.visible = false;\n    world.addChild(this.preview);\n  }\n\n  get active(): boolean { return this._active; }\n\n  activate(): void {\n    this._active = true;\n    this.stage.on('pointerdown', this._onDown, this);\n    this.stage.on('globalpointermove', this._onMove, this);\n    this.stage.on('pointerup', this._onUp, this);\n    this.stage.on('pointerupoutside', this._onUp, this);\n  }\n\n  deactivate(): void {\n    this._active = false;\n    this.drawing = false;\n    this.rawPoints = [];\n    if (!this.preview.destroyed) {\n      this.preview.clear();\n      this.preview.visible = false;\n    }\n    this.stage.off('pointerdown', this._onDown, this);\n    this.stage.off('globalpointermove', this._onMove, this);\n    this.stage.off('pointerup', this._onUp, this);\n    this.stage.off('pointerupoutside', this._onUp, this);\n  }\n\n  private _onDown = (e: FederatedPointerEvent): void => {\n    if (e.button !== 0) return;\n    const world = this.callbacks.screenToWorld(e.global.x, e.global.y);\n    this.drawing = true;\n    this.rawPoints = [world];\n    this.preview.visible = true;\n    this.preview.clear();\n  };\n\n  private _onMove = (e: FederatedPointerEvent): void => {\n    if (!this.drawing) return;\n    const world = this.callbacks.screenToWorld(e.global.x, e.global.y);\n    this.rawPoints.push(world);\n\n    // Draw preview\n    this.preview.clear();\n    if (this.rawPoints.length < 2) return;\n    this.preview.moveTo(this.rawPoints[0].x, this.rawPoints[0].y);\n    for (let i = 1; i < this.rawPoints.length; i++) {\n      this.preview.lineTo(this.rawPoints[i].x, this.rawPoints[i].y);\n    }\n    this.preview.stroke({ color: 0x374151, width: 2, alpha: 0.6 });\n  };\n\n  private _onUp = (): void => {\n    if (!this.drawing) return;\n    this.drawing = false;\n    this.preview.clear();\n    this.preview.visible = false;\n\n    if (this.rawPoints.length < 3) {\n      this.rawPoints = [];\n      return;\n    }\n\n    const simplified = simplifyPath(this.rawPoints, 2);\n    const smoothed = smoothCatmullRom(simplified, 4);\n\n    const line: FlowLine = {\n      id: generateId('line'),\n      type: 'freehand',\n      points: smoothed,\n      strokeColor: '#374151',\n      strokeWidth: 2,\n      lineStyle: 'solid',\n    };\n\n    this.callbacks.onLineComplete(line);\n    this.rawPoints = [];\n  };\n\n  destroy(): void {\n    this.deactivate();\n    if (!this.preview.destroyed) this.preview.destroy();\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"FreehandTool.js","names":[],"sources":["../../../../../src/components/pro/Flow/lines/FreehandTool.ts"],"sourcesContent":["import { Graphics, Container, FederatedPointerEvent } from 'pixi.js';\nimport { simplifyPath, smoothCatmullRom, type Point } from './lineSmoothing';\nimport type { FlowLine } from '../types';\nimport { generateId } from '../nodes/nodeUtils';\nimport { resolveThemeColor } from '../utils/themeColor';\n\nexport interface FreehandToolCallbacks {\n  /** Called when a freehand line is finished */\n  onLineComplete: (line: FlowLine) => void;\n  /** Convert screen coords to world coords */\n  screenToWorld: (sx: number, sy: number) => { x: number; y: number };\n}\n\n/**\n * Captures pointer trail for freehand drawing, smooths and stores as FlowLine.\n */\nexport class FreehandTool {\n  private stage: Container;\n  private preview: Graphics;\n  private callbacks: FreehandToolCallbacks;\n  private rawPoints: Point[] = [];\n  private drawing = false;\n  private _active = false;\n\n  constructor(stage: Container, world: Container, callbacks: FreehandToolCallbacks) {\n    this.stage = stage;\n    this.callbacks = callbacks;\n    this.preview = new Graphics();\n    this.preview.label = 'freehand-preview';\n    this.preview.visible = false;\n    world.addChild(this.preview);\n  }\n\n  get active(): boolean { return this._active; }\n\n  activate(): void {\n    this._active = true;\n    this.stage.on('pointerdown', this._onDown, this);\n    this.stage.on('globalpointermove', this._onMove, this);\n    this.stage.on('pointerup', this._onUp, this);\n    this.stage.on('pointerupoutside', this._onUp, this);\n  }\n\n  deactivate(): void {\n    this._active = false;\n    this.drawing = false;\n    this.rawPoints = [];\n    if (!this.preview.destroyed) {\n      this.preview.clear();\n      this.preview.visible = false;\n    }\n    this.stage.off('pointerdown', this._onDown, this);\n    this.stage.off('globalpointermove', this._onMove, this);\n    this.stage.off('pointerup', this._onUp, this);\n    this.stage.off('pointerupoutside', this._onUp, this);\n  }\n\n  private _onDown = (e: FederatedPointerEvent): void => {\n    if (e.button !== 0) return;\n    const world = this.callbacks.screenToWorld(e.global.x, e.global.y);\n    this.drawing = true;\n    this.rawPoints = [world];\n    this.preview.visible = true;\n    this.preview.clear();\n  };\n\n  private _onMove = (e: FederatedPointerEvent): void => {\n    if (!this.drawing) return;\n    const world = this.callbacks.screenToWorld(e.global.x, e.global.y);\n    this.rawPoints.push(world);\n\n    // Draw preview\n    this.preview.clear();\n    if (this.rawPoints.length < 2) return;\n    this.preview.moveTo(this.rawPoints[0].x, this.rawPoints[0].y);\n    for (let i = 1; i < this.rawPoints.length; i++) {\n      this.preview.lineTo(this.rawPoints[i].x, this.rawPoints[i].y);\n    }\n    this.preview.stroke({ color: resolveThemeColor('theme:base-content', '#374151'), width: 2, alpha: 0.6 });\n  };\n\n  private _onUp = (): void => {\n    if (!this.drawing) return;\n    this.drawing = false;\n    this.preview.clear();\n    this.preview.visible = false;\n\n    if (this.rawPoints.length < 3) {\n      this.rawPoints = [];\n      return;\n    }\n\n    const simplified = simplifyPath(this.rawPoints, 2);\n    const smoothed = smoothCatmullRom(simplified, 4);\n\n    const line: FlowLine = {\n      id: generateId('line'),\n      type: 'freehand',\n      points: smoothed,\n      strokeColor: 'theme:base-content',\n      strokeWidth: 2,\n      lineStyle: 'solid',\n    };\n\n    this.callbacks.onLineComplete(line);\n    this.rawPoints = [];\n  };\n\n  destroy(): void {\n    this.deactivate();\n    if (!this.preview.destroyed) this.preview.destroy();\n  }\n}\n"],"mappings":"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"}

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

@@ -1,6 +1,10 @@
-import { generateId as o } from "../nodes/nodeUtils.js";
+import { resolveThemeColor as o } from "../utils/themeColor.js";
+import { generateId as n } from "../nodes/nodeUtils.js";
 import { Graphics as h } from "pixi.js";
-var r = class {
+function r() {
+  return o("theme:base-content", "#374151");
+}
+var p = class {
   stage;
   preview;
   callbacks;
@@ -16,8 +20,8 @@ var r = class {
     x: 0,
     y: 0
   };
-  constructor(i, t, e) {
-    this.stage = i, this.callbacks = e, this.preview = new h(), this.preview.label = "geo-line-preview", this.preview.visible = !1, t.addChild(this.preview), this._handleKeyDown = this._handleKeyDown.bind(this);
+  constructor(i, e, t) {
+    this.stage = i, this.callbacks = t, this.preview = new h(), this.preview.label = "geo-line-preview", this.preview.visible = !1, e.addChild(this.preview), this._handleKeyDown = this._handleKeyDown.bind(this);
   }
   get active() {
     return this._active;
@@ -39,43 +43,43 @@ var r = class {
   }
   _onClick = (i) => {
     if (i.button !== 0) return;
-    const t = this.callbacks.screenToWorld(i.global.x, i.global.y), e = Date.now(), s = e - this._lastClickTime < 350 && Math.hypot(t.x - this._lastClickPos.x, t.y - this._lastClickPos.y) < 10;
-    if (this._lastClickTime = e, this._lastClickPos = t, s && this._mode === "polyline" && this.points.length >= 2) {
+    const e = this.callbacks.screenToWorld(i.global.x, i.global.y), t = Date.now(), s = t - this._lastClickTime < 350 && Math.hypot(e.x - this._lastClickPos.x, e.y - this._lastClickPos.y) < 10;
+    if (this._lastClickTime = t, this._lastClickPos = e, s && this._mode === "polyline" && this.points.length >= 2) {
       this._finishLine();
       return;
     }
-    this.points.push(t), (this._mode === "straight" || this._mode === "arrow") && this.points.length >= 2 && this._finishLine();
+    this.points.push(e), (this._mode === "straight" || this._mode === "arrow") && this.points.length >= 2 && this._finishLine();
   };
   _onMove = (i) => {
-    const t = this.callbacks.screenToWorld(i.global.x, i.global.y);
-    if (this._currentPos = t, this.points.length !== 0) {
+    const e = this.callbacks.screenToWorld(i.global.x, i.global.y);
+    if (this._currentPos = e, this.points.length !== 0) {
       this.preview.visible = !0, this.preview.clear(), this.preview.moveTo(this.points[0].x, this.points[0].y);
-      for (let e = 1; e < this.points.length; e++) this.preview.lineTo(this.points[e].x, this.points[e].y);
-      this.preview.lineTo(t.x, t.y), this.preview.stroke({
-        color: 3621201,
+      for (let t = 1; t < this.points.length; t++) this.preview.lineTo(this.points[t].x, this.points[t].y);
+      this.preview.lineTo(e.x, e.y), this.preview.stroke({
+        color: r(),
         width: 2,
         alpha: 0.5
       });
     }
   };
   _finishLine() {
-    const i = this._mode === "arrow" ? "arrowclosed" : "none", t = this._mode === "arrow" ? "arrow" : this._mode, e = {
-      id: o("line"),
-      type: t,
+    const i = this._mode === "arrow" ? "arrowclosed" : "none", e = this._mode === "arrow" ? "arrow" : this._mode, t = {
+      id: n("line"),
+      type: e,
       points: [...this.points],
-      strokeColor: "#374151",
+      strokeColor: "theme:base-content",
       strokeWidth: 2,
       lineStyle: "solid",
       markerEnd: i
     };
-    this.callbacks.onLineComplete(e), this.points = [], this.preview.clear(), this.preview.visible = !1;
+    this.callbacks.onLineComplete(t), this.points = [], this.preview.clear(), this.preview.visible = !1;
   }
   destroy() {
     this.deactivate(), this.preview.destroyed || this.preview.destroy();
   }
 };
 export {
-  r as GeometricLineTool
+  p as GeometricLineTool
 };
 
 //# sourceMappingURL=GeometricLineTool.js.map

package/dist/components/pro/Flow/lines/GeometricLineTool.js.map

@@ -1 +1 @@
-{"version":3,"file":"GeometricLineTool.js","names":[],"sources":["../../../../../src/components/pro/Flow/lines/GeometricLineTool.ts"],"sourcesContent":["import { Graphics, Container, FederatedPointerEvent } from 'pixi.js';\nimport type { FlowLine, FlowLineType, FlowEdgeMarkerKind } from '../types';\nimport { generateId } from '../nodes/nodeUtils';\n\nexport interface GeometricLineToolCallbacks {\n  onLineComplete: (line: FlowLine) => void;\n  screenToWorld: (sx: number, sy: number) => { x: number; y: number };\n}\n\ntype GeoMode = 'straight' | 'polyline' | 'arrow';\n\n/**\n * Click-to-place geometric lines: straight, polyline, and arrow.\n * - straight/arrow: click start, click end\n * - polyline: click each point, double-click to finish\n */\nexport class GeometricLineTool {\n  private stage: Container;\n  private preview: Graphics;\n  private callbacks: GeometricLineToolCallbacks;\n  private points: Array<{ x: number; y: number }> = [];\n  private _active = false;\n  private _mode: GeoMode = 'straight';\n  private _currentPos = { x: 0, y: 0 };\n  private _lastClickTime = 0;\n  private _lastClickPos = { x: 0, y: 0 };\n\n  constructor(stage: Container, world: Container, callbacks: GeometricLineToolCallbacks) {\n    this.stage = stage;\n    this.callbacks = callbacks;\n    this.preview = new Graphics();\n    this.preview.label = 'geo-line-preview';\n    this.preview.visible = false;\n    world.addChild(this.preview);\n    this._handleKeyDown = this._handleKeyDown.bind(this);\n  }\n\n  get active(): boolean { return this._active; }\n  get mode(): GeoMode { return this._mode; }\n  set mode(m: GeoMode) { this._mode = m; }\n\n  activate(mode: GeoMode = 'straight'): void {\n    this._active = true;\n    this._mode = mode;\n    this.points = [];\n    this._lastClickTime = 0;\n    this.stage.on('pointerdown', this._onClick, this);\n    this.stage.on('globalpointermove', this._onMove, this);\n    window.addEventListener('keydown', this._handleKeyDown);\n  }\n\n  deactivate(): void {\n    this._active = false;\n    this.points = [];\n    if (!this.preview.destroyed) {\n      this.preview.clear();\n      this.preview.visible = false;\n    }\n    this.stage.off('pointerdown', this._onClick, this);\n    this.stage.off('globalpointermove', this._onMove, this);\n    window.removeEventListener('keydown', this._handleKeyDown);\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === 'Return') {\n      if (this._mode === 'polyline' && this.points.length >= 2) {\n        this._finishLine();\n      }\n    }\n  }\n\n  private _onClick = (e: FederatedPointerEvent): void => {\n    if (e.button !== 0) return;\n    const world = this.callbacks.screenToWorld(e.global.x, e.global.y);\n\n    const now = Date.now();\n    const isDbl = now - this._lastClickTime < 350\n      && Math.hypot(world.x - this._lastClickPos.x, world.y - this._lastClickPos.y) < 10;\n    this._lastClickTime = now;\n    this._lastClickPos = world;\n\n    if (isDbl && this._mode === 'polyline' && this.points.length >= 2) {\n      this._finishLine();\n      return;\n    }\n\n    this.points.push(world);\n    if ((this._mode === 'straight' || this._mode === 'arrow') && this.points.length >= 2) {\n      this._finishLine();\n    }\n  };\n\n  private _onMove = (e: FederatedPointerEvent): void => {\n    const world = this.callbacks.screenToWorld(e.global.x, e.global.y);\n    this._currentPos = world;\n\n    if (this.points.length === 0) return;\n    this.preview.visible = true;\n    this.preview.clear();\n\n    this.preview.moveTo(this.points[0].x, this.points[0].y);\n    for (let i = 1; i < this.points.length; i++) {\n      this.preview.lineTo(this.points[i].x, this.points[i].y);\n    }\n    this.preview.lineTo(world.x, world.y);\n    this.preview.stroke({ color: 0x374151, width: 2, alpha: 0.5 });\n  };\n\n  private _finishLine(): void {\n    const markerEnd: FlowEdgeMarkerKind = this._mode === 'arrow' ? 'arrowclosed' : 'none';\n    const lineType: FlowLineType = this._mode === 'arrow' ? 'arrow' : this._mode;\n\n    const line: FlowLine = {\n      id: generateId('line'),\n      type: lineType,\n      points: [...this.points],\n      strokeColor: '#374151',\n      strokeWidth: 2,\n      lineStyle: 'solid',\n      markerEnd,\n    };\n\n    this.callbacks.onLineComplete(line);\n    this.points = [];\n    this.preview.clear();\n    this.preview.visible = false;\n  }\n\n  destroy(): void {\n    this.deactivate();\n    if (!this.preview.destroyed) this.preview.destroy();\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"GeometricLineTool.js","names":[],"sources":["../../../../../src/components/pro/Flow/lines/GeometricLineTool.ts"],"sourcesContent":["import { Graphics, Container, FederatedPointerEvent } from 'pixi.js';\nimport type { FlowLine, FlowLineType, FlowEdgeMarkerKind } from '../types';\nimport { generateId } from '../nodes/nodeUtils';\nimport { resolveThemeColor } from '../utils/themeColor';\n\nfunction previewStrokeColor(): string {\n  return resolveThemeColor('theme:base-content', '#374151');\n}\n\nexport interface GeometricLineToolCallbacks {\n  onLineComplete: (line: FlowLine) => void;\n  screenToWorld: (sx: number, sy: number) => { x: number; y: number };\n}\n\ntype GeoMode = 'straight' | 'polyline' | 'arrow';\n\n/**\n * Click-to-place geometric lines: straight, polyline, and arrow.\n * - straight/arrow: click start, click end\n * - polyline: click each point, double-click to finish\n */\nexport class GeometricLineTool {\n  private stage: Container;\n  private preview: Graphics;\n  private callbacks: GeometricLineToolCallbacks;\n  private points: Array<{ x: number; y: number }> = [];\n  private _active = false;\n  private _mode: GeoMode = 'straight';\n  private _currentPos = { x: 0, y: 0 };\n  private _lastClickTime = 0;\n  private _lastClickPos = { x: 0, y: 0 };\n\n  constructor(stage: Container, world: Container, callbacks: GeometricLineToolCallbacks) {\n    this.stage = stage;\n    this.callbacks = callbacks;\n    this.preview = new Graphics();\n    this.preview.label = 'geo-line-preview';\n    this.preview.visible = false;\n    world.addChild(this.preview);\n    this._handleKeyDown = this._handleKeyDown.bind(this);\n  }\n\n  get active(): boolean { return this._active; }\n  get mode(): GeoMode { return this._mode; }\n  set mode(m: GeoMode) { this._mode = m; }\n\n  activate(mode: GeoMode = 'straight'): void {\n    this._active = true;\n    this._mode = mode;\n    this.points = [];\n    this._lastClickTime = 0;\n    this.stage.on('pointerdown', this._onClick, this);\n    this.stage.on('globalpointermove', this._onMove, this);\n    window.addEventListener('keydown', this._handleKeyDown);\n  }\n\n  deactivate(): void {\n    this._active = false;\n    this.points = [];\n    if (!this.preview.destroyed) {\n      this.preview.clear();\n      this.preview.visible = false;\n    }\n    this.stage.off('pointerdown', this._onClick, this);\n    this.stage.off('globalpointermove', this._onMove, this);\n    window.removeEventListener('keydown', this._handleKeyDown);\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === 'Return') {\n      if (this._mode === 'polyline' && this.points.length >= 2) {\n        this._finishLine();\n      }\n    }\n  }\n\n  private _onClick = (e: FederatedPointerEvent): void => {\n    if (e.button !== 0) return;\n    const world = this.callbacks.screenToWorld(e.global.x, e.global.y);\n\n    const now = Date.now();\n    const isDbl = now - this._lastClickTime < 350\n      && Math.hypot(world.x - this._lastClickPos.x, world.y - this._lastClickPos.y) < 10;\n    this._lastClickTime = now;\n    this._lastClickPos = world;\n\n    if (isDbl && this._mode === 'polyline' && this.points.length >= 2) {\n      this._finishLine();\n      return;\n    }\n\n    this.points.push(world);\n    if ((this._mode === 'straight' || this._mode === 'arrow') && this.points.length >= 2) {\n      this._finishLine();\n    }\n  };\n\n  private _onMove = (e: FederatedPointerEvent): void => {\n    const world = this.callbacks.screenToWorld(e.global.x, e.global.y);\n    this._currentPos = world;\n\n    if (this.points.length === 0) return;\n    this.preview.visible = true;\n    this.preview.clear();\n\n    this.preview.moveTo(this.points[0].x, this.points[0].y);\n    for (let i = 1; i < this.points.length; i++) {\n      this.preview.lineTo(this.points[i].x, this.points[i].y);\n    }\n    this.preview.lineTo(world.x, world.y);\n    this.preview.stroke({ color: previewStrokeColor(), width: 2, alpha: 0.5 });\n  };\n\n  private _finishLine(): void {\n    const markerEnd: FlowEdgeMarkerKind = this._mode === 'arrow' ? 'arrowclosed' : 'none';\n    const lineType: FlowLineType = this._mode === 'arrow' ? 'arrow' : this._mode;\n\n    const line: FlowLine = {\n      id: generateId('line'),\n      type: lineType,\n      points: [...this.points],\n      strokeColor: 'theme:base-content',\n      strokeWidth: 2,\n      lineStyle: 'solid',\n      markerEnd,\n    };\n\n    this.callbacks.onLineComplete(line);\n    this.points = [];\n    this.preview.clear();\n    this.preview.visible = false;\n  }\n\n  destroy(): void {\n    this.deactivate();\n    if (!this.preview.destroyed) this.preview.destroy();\n  }\n}\n"],"mappings":"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"}

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

@@ -1,14 +1,15 @@
+import { resolveThemeColor as x } from "../utils/themeColor.js";
 import { angleBetween as h, drawMarker as f } from "../edges/edgeMarkers.js";
-import { drawDashedPolyline as x } from "../utils/dashedLine.js";
+import { drawDashedPolyline as g } from "../utils/dashedLine.js";
 import { Container as y, Graphics as m } from "pixi.js";
-function g(n, e = 2) {
+function u(n, e = 2) {
   if (!(!n || n === "solid")) {
     if (n === "dynamic") return [e * 4, e * 3];
     if (n === "dotted") return [e, e * 2];
     if (n === "dashed") return [e * 3, e * 2];
   }
 }
-var v = class {
+var L = class {
   world;
   lineLayer;
   lines = /* @__PURE__ */ new Map();
@@ -23,36 +24,36 @@ var v = class {
     }), this.world.addChildAt(this.lineLayer, Math.min(1, this.world.children.length));
   }
   sync(n, e) {
-    const a = /* @__PURE__ */ new Set();
+    const s = /* @__PURE__ */ new Set();
     for (const r of n) {
-      a.add(r.id);
+      s.add(r.id);
       let o = this.lines.get(r.id);
       o || (o = this._create(r), this.lines.set(r.id, o)), this._update(o, r, e.has(r.id));
     }
-    for (const [r, o] of this.lines) a.has(r) || (this.lineLayer.removeChild(o.container), o.container.destroy({ children: !0 }), this.lines.delete(r));
+    for (const [r, o] of this.lines) s.has(r) || (this.lineLayer.removeChild(o.container), o.container.destroy({ children: !0 }), this.lines.delete(r));
   }
   _create(n) {
-    const e = new y({ label: `line-${n.id}` }), a = new m();
-    a.label = "line-hitarea", a.eventMode = "static", a.cursor = "pointer", a.alpha = 1e-3, e.addChild(a);
+    const e = new y({ label: `line-${n.id}` }), s = new m();
+    s.label = "line-hitarea", s.eventMode = "static", s.cursor = "pointer", s.alpha = 1e-3, e.addChild(s);
     const r = new m();
     return r.label = "line-gfx", e.addChild(r), this.lineLayer.addChild(e), {
       container: e,
       gfx: r,
-      hitArea: a,
+      hitArea: s,
       lineId: n.id
     };
   }
-  _update(n, e, a) {
+  _update(n, e, s) {
     n.container.zIndex = e.zIndex ?? 0;
     const { gfx: r, hitArea: o } = n, t = e.points;
     if (t.length < 2) return;
-    const s = a ? "#3b82f6" : e.strokeColor, d = e.strokeWidth;
+    const a = s ? "#3b82f6" : x(e.strokeColor, "#374151"), d = e.strokeWidth;
     r.clear();
-    const l = g(e.lineStyle, d);
+    const l = u(e.lineStyle, d);
     if (l) {
       const i = e.lineStyle === "dynamic" ? this._dynamicOffset : 0;
-      x(r, e.closed ? [...t, t[0]] : t, l, i), r.stroke({
-        color: s,
+      g(r, e.closed ? [...t, t[0]] : t, l, i), r.stroke({
+        color: a,
         width: d,
         cap: "round"
       });
@@ -60,17 +61,17 @@ var v = class {
       r.moveTo(t[0].x, t[0].y);
       for (let i = 1; i < t.length; i++) r.lineTo(t[i].x, t[i].y);
       e.closed && r.closePath(), r.stroke({
-        color: s,
+        color: a,
         width: d
       });
     }
     if (e.markerStart && e.markerStart !== "none" && t.length >= 2) {
       const i = h(t[1].x, t[1].y, t[0].x, t[0].y);
-      f(r, e.markerStart, t[0].x, t[0].y, i, s);
+      f(r, e.markerStart, t[0].x, t[0].y, i, a);
     }
     if (e.markerEnd && e.markerEnd !== "none" && t.length >= 2) {
       const i = t[t.length - 1], c = t[t.length - 2], p = h(c.x, c.y, i.x, i.y);
-      f(r, e.markerEnd, i.x, i.y, p, s);
+      f(r, e.markerEnd, i.x, i.y, p, a);
     }
     o.clear(), o.moveTo(t[0].x, t[0].y);
     for (let i = 1; i < t.length; i++) o.lineTo(t[i].x, t[i].y);
@@ -85,7 +86,7 @@ var v = class {
   }
 };
 export {
-  v as LineRenderer
+  L as LineRenderer
 };
 
 //# sourceMappingURL=LineRenderer.js.map

package/dist/components/pro/Flow/lines/LineRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineRenderer.js","names":[],"sources":["../../../../../src/components/pro/Flow/lines/LineRenderer.ts"],"sourcesContent":["import { Container, Graphics } from 'pixi.js';\nimport type { FlowLine } from '../types';\nimport { drawMarker, angleBetween } from '../edges/edgeMarkers';\nimport { drawDashedPolyline } from '../utils/dashedLine';\n\nfunction getLineDash(style?: string, width = 2): number[] | undefined {\n  if (!style || style === 'solid') return undefined;\n  if (style === 'dynamic') return [width * 4, width * 3];\n  if (style === 'dotted') return [width, width * 2];\n  if (style === 'dashed') return [width * 3, width * 2];\n  return undefined;\n}\n\ninterface LineDisplay {\n  container: Container;\n  gfx: Graphics;\n  hitArea: Graphics;\n  lineId: string;\n}\n\n/**\n * Renders independent FlowLine[] objects on the canvas.\n */\nexport class LineRenderer {\n  private world: Container;\n  private lineLayer: Container;\n  private lines = new Map<string, LineDisplay>();\n  private _dynamicOffset = 0;\n\n  /** Call once per frame to advance the dynamic dash animation. */\n  advanceAnimation(deltaMs: number): void {\n    this._dynamicOffset = (this._dynamicOffset + deltaMs * 0.06) % 1000;\n  }\n\n  constructor(world: Container) {\n    this.world = world;\n    this.lineLayer = new Container({ label: 'lines', sortableChildren: true });\n    // Lines on top of edges but below nodes\n    this.world.addChildAt(this.lineLayer, Math.min(1, this.world.children.length));\n  }\n\n  sync(flowLines: FlowLine[], selectedIds: Set<string>): void {\n    const seen = new Set<string>();\n\n    for (const line of flowLines) {\n      seen.add(line.id);\n      let display = this.lines.get(line.id);\n      if (!display) {\n        display = this._create(line);\n        this.lines.set(line.id, display);\n      }\n      this._update(display, line, selectedIds.has(line.id));\n    }\n\n    for (const [id, display] of this.lines) {\n      if (!seen.has(id)) {\n        this.lineLayer.removeChild(display.container);\n        display.container.destroy({ children: true });\n        this.lines.delete(id);\n      }\n    }\n  }\n\n  private _create(line: FlowLine): LineDisplay {\n    const container = new Container({ label: `line-${line.id}` });\n\n    const hitArea = new Graphics();\n    hitArea.label = 'line-hitarea';\n    hitArea.eventMode = 'static';\n    hitArea.cursor = 'pointer';\n    hitArea.alpha = 0.001;\n    container.addChild(hitArea);\n\n    const gfx = new Graphics();\n    gfx.label = 'line-gfx';\n    container.addChild(gfx);\n\n    this.lineLayer.addChild(container);\n    return { container, gfx, hitArea, lineId: line.id };\n  }\n\n  private _update(display: LineDisplay, line: FlowLine, selected: boolean): void {\n    display.container.zIndex = line.zIndex ?? 0;\n    const { gfx, hitArea } = display;\n    const pts = line.points;\n    if (pts.length < 2) return;\n\n    const color = selected ? '#3b82f6' : line.strokeColor;\n    const width = line.strokeWidth;\n\n    gfx.clear();\n    const dash = getLineDash(line.lineStyle, width);\n    if (dash) {\n      const offset = line.lineStyle === 'dynamic' ? this._dynamicOffset : 0;\n      const drawPts = line.closed ? [...pts, pts[0]] : pts;\n      drawDashedPolyline(gfx, drawPts, dash, offset);\n      gfx.stroke({ color, width, cap: 'round' as const });\n    } else {\n      gfx.moveTo(pts[0].x, pts[0].y);\n      for (let i = 1; i < pts.length; i++) {\n        gfx.lineTo(pts[i].x, pts[i].y);\n      }\n      if (line.closed) gfx.closePath();\n      gfx.stroke({ color, width });\n    }\n\n    // Markers\n    if (line.markerStart && line.markerStart !== 'none' && pts.length >= 2) {\n      const angle = angleBetween(pts[1].x, pts[1].y, pts[0].x, pts[0].y);\n      drawMarker(gfx, line.markerStart, pts[0].x, pts[0].y, angle, color);\n    }\n    if (line.markerEnd && line.markerEnd !== 'none' && pts.length >= 2) {\n      const last = pts[pts.length - 1];\n      const prev = pts[pts.length - 2];\n      const angle = angleBetween(prev.x, prev.y, last.x, last.y);\n      drawMarker(gfx, line.markerEnd, last.x, last.y, angle, color);\n    }\n\n    // Hit area\n    hitArea.clear();\n    hitArea.moveTo(pts[0].x, pts[0].y);\n    for (let i = 1; i < pts.length; i++) {\n      hitArea.lineTo(pts[i].x, pts[i].y);\n    }\n    hitArea.stroke({ color: '#000000', width: Math.max(width + 10, 14) });\n    hitArea.alpha = 0.001;\n  }\n\n  destroy(): void {\n    for (const [, display] of this.lines) {\n      display.container.destroy({ children: true });\n    }\n    this.lines.clear();\n    this.lineLayer.destroy({ children: true });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"LineRenderer.js","names":[],"sources":["../../../../../src/components/pro/Flow/lines/LineRenderer.ts"],"sourcesContent":["import { Container, Graphics } from 'pixi.js';\nimport type { FlowLine } from '../types';\nimport { drawMarker, angleBetween } from '../edges/edgeMarkers';\nimport { drawDashedPolyline } from '../utils/dashedLine';\nimport { resolveThemeColor } from '../utils/themeColor';\n\nfunction getLineDash(style?: string, width = 2): number[] | undefined {\n  if (!style || style === 'solid') return undefined;\n  if (style === 'dynamic') return [width * 4, width * 3];\n  if (style === 'dotted') return [width, width * 2];\n  if (style === 'dashed') return [width * 3, width * 2];\n  return undefined;\n}\n\ninterface LineDisplay {\n  container: Container;\n  gfx: Graphics;\n  hitArea: Graphics;\n  lineId: string;\n}\n\n/**\n * Renders independent FlowLine[] objects on the canvas.\n */\nexport class LineRenderer {\n  private world: Container;\n  private lineLayer: Container;\n  private lines = new Map<string, LineDisplay>();\n  private _dynamicOffset = 0;\n\n  /** Call once per frame to advance the dynamic dash animation. */\n  advanceAnimation(deltaMs: number): void {\n    this._dynamicOffset = (this._dynamicOffset + deltaMs * 0.06) % 1000;\n  }\n\n  constructor(world: Container) {\n    this.world = world;\n    this.lineLayer = new Container({ label: 'lines', sortableChildren: true });\n    // Lines on top of edges but below nodes\n    this.world.addChildAt(this.lineLayer, Math.min(1, this.world.children.length));\n  }\n\n  sync(flowLines: FlowLine[], selectedIds: Set<string>): void {\n    const seen = new Set<string>();\n\n    for (const line of flowLines) {\n      seen.add(line.id);\n      let display = this.lines.get(line.id);\n      if (!display) {\n        display = this._create(line);\n        this.lines.set(line.id, display);\n      }\n      this._update(display, line, selectedIds.has(line.id));\n    }\n\n    for (const [id, display] of this.lines) {\n      if (!seen.has(id)) {\n        this.lineLayer.removeChild(display.container);\n        display.container.destroy({ children: true });\n        this.lines.delete(id);\n      }\n    }\n  }\n\n  private _create(line: FlowLine): LineDisplay {\n    const container = new Container({ label: `line-${line.id}` });\n\n    const hitArea = new Graphics();\n    hitArea.label = 'line-hitarea';\n    hitArea.eventMode = 'static';\n    hitArea.cursor = 'pointer';\n    hitArea.alpha = 0.001;\n    container.addChild(hitArea);\n\n    const gfx = new Graphics();\n    gfx.label = 'line-gfx';\n    container.addChild(gfx);\n\n    this.lineLayer.addChild(container);\n    return { container, gfx, hitArea, lineId: line.id };\n  }\n\n  private _update(display: LineDisplay, line: FlowLine, selected: boolean): void {\n    display.container.zIndex = line.zIndex ?? 0;\n    const { gfx, hitArea } = display;\n    const pts = line.points;\n    if (pts.length < 2) return;\n\n    const color = selected ? '#3b82f6' : resolveThemeColor(line.strokeColor, '#374151');\n    const width = line.strokeWidth;\n\n    gfx.clear();\n    const dash = getLineDash(line.lineStyle, width);\n    if (dash) {\n      const offset = line.lineStyle === 'dynamic' ? this._dynamicOffset : 0;\n      const drawPts = line.closed ? [...pts, pts[0]] : pts;\n      drawDashedPolyline(gfx, drawPts, dash, offset);\n      gfx.stroke({ color, width, cap: 'round' as const });\n    } else {\n      gfx.moveTo(pts[0].x, pts[0].y);\n      for (let i = 1; i < pts.length; i++) {\n        gfx.lineTo(pts[i].x, pts[i].y);\n      }\n      if (line.closed) gfx.closePath();\n      gfx.stroke({ color, width });\n    }\n\n    // Markers\n    if (line.markerStart && line.markerStart !== 'none' && pts.length >= 2) {\n      const angle = angleBetween(pts[1].x, pts[1].y, pts[0].x, pts[0].y);\n      drawMarker(gfx, line.markerStart, pts[0].x, pts[0].y, angle, color);\n    }\n    if (line.markerEnd && line.markerEnd !== 'none' && pts.length >= 2) {\n      const last = pts[pts.length - 1];\n      const prev = pts[pts.length - 2];\n      const angle = angleBetween(prev.x, prev.y, last.x, last.y);\n      drawMarker(gfx, line.markerEnd, last.x, last.y, angle, color);\n    }\n\n    // Hit area\n    hitArea.clear();\n    hitArea.moveTo(pts[0].x, pts[0].y);\n    for (let i = 1; i < pts.length; i++) {\n      hitArea.lineTo(pts[i].x, pts[i].y);\n    }\n    hitArea.stroke({ color: '#000000', width: Math.max(width + 10, 14) });\n    hitArea.alpha = 0.001;\n  }\n\n  destroy(): void {\n    for (const [, display] of this.lines) {\n      display.container.destroy({ children: true });\n    }\n    this.lines.clear();\n    this.lineLayer.destroy({ children: true });\n  }\n}\n"],"mappings":"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"}