dishui 0.0.46 → 0.0.48

package/dist/components/pro/Flow/nodes/MediaContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaContent.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport katex from 'katex';\nimport mermaid from 'mermaid';\nimport Markdown from '../../../Markdown';\nimport type { FlowNode, FlowAIConfig } from '../types';\nimport { streamAIChat, type AIChatMessage } from './aiClient';\nimport 'katex/dist/katex.min.css';\nimport { Model3DView } from './Model3DView';\n\nlet mermaidReady = false;\nfunction ensureMermaid() {\n  if (mermaidReady) return;\n  mermaid.initialize({ startOnLoad: false, theme: 'default', securityLevel: 'loose', fontFamily: 'inherit' });\n  mermaidReady = true;\n}\n\n/** Renders a Mermaid diagram from source into an inline SVG. */\nfunction MermaidView({ content, color }: { content: string; color?: string }) {\n  const [svg, setSvg] = useState('');\n  const [error, setError] = useState<string | null>(null);\n  const idRef = useRef(`flow-mermaid-${Math.random().toString(36).slice(2)}`);\n\n  useEffect(() => {\n    let cancelled = false;\n    ensureMermaid();\n    const src = content.trim();\n    if (!src) { setSvg(''); setError(null); return; }\n    mermaid\n      .render(idRef.current, src)\n      .then(({ svg }) => { if (!cancelled) { setSvg(svg); setError(null); } })\n      .catch((e) => { if (!cancelled) setError(e?.message ?? 'Mermaid error'); });\n    return () => { cancelled = true; };\n  }, [content]);\n\n  if (error) return <div className=\"flow-media-error\">{error}</div>;\n  return <div className=\"flow-media-mermaid\" style={{ color }} dangerouslySetInnerHTML={{ __html: svg }} />;\n}\n\n/** Renders a LaTeX formula (display mode) via KaTeX. */\nfunction MathView({ content, color, fontSize }: { content: string; color?: string; fontSize?: number }) {\n  const html = useMemo(() => {\n    try {\n      return katex.renderToString(content.trim() || '\\\\;', { displayMode: true, throwOnError: false });\n    } catch (e: any) {\n      return `<span class=\"flow-media-error\">${e?.message ?? 'KaTeX error'}</span>`;\n    }\n  }, [content]);\n  return <div className=\"flow-media-math\" style={{ color, fontSize }} dangerouslySetInnerHTML={{ __html: html }} />;\n}\n\n/** Renders raw HTML in a sandboxed iframe (isolated from the host document). */\nfunction HtmlView({ content, interactive }: { content: string; interactive: boolean }) {\n  return (\n    <iframe\n      title=\"html-media\"\n      className=\"flow-media-iframe\"\n      style={{ pointerEvents: interactive ? 'auto' : 'none' }}\n      sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms\"\n      srcDoc={content}\n    />\n  );\n}\n\nfunction ImageView({ content }: { content: string }) {\n  const src = content.trim();\n  if (!src) {\n    return <div className=\"flow-media-image-empty\">输入图片链接，或直接粘贴图片</div>;\n  }\n  return (\n    <img\n      className=\"flow-media-image\"\n      src={src}\n      alt=\"\"\n      draggable={false}\n      referrerPolicy=\"no-referrer\"\n    />\n  );\n}\n\n/** Interactive AI chat backed by an OpenAI/Anthropic-compatible endpoint. */\nfunction AIView({ node, config, interactive, color }: { node: FlowNode; config?: FlowAIConfig; interactive: boolean; color?: string }) {\n  const [messages, setMessages] = useState<AIChatMessage[]>([]);\n  const [input, setInput] = useState('');\n  const [streaming, setStreaming] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const abortRef = useRef<AbortController | null>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });\n  }, [messages, streaming]);\n\n  useEffect(() => () => abortRef.current?.abort(), []);\n\n  const canSend = !!config?.gateway && !!config?.model && !streaming;\n\n  const send = async () => {\n    const text = input.trim();\n    if (!text || !config?.gateway) return;\n    setError(null);\n    // Only keep non-empty assistant messages in history; an aborted/errored\n    // request can leave an empty assistant placeholder behind, which the API\n    // then rejects (\"assistant message must not be empty\").\n    const history = messages.filter(\n      (m) => !(m.role === 'assistant' && m.content.trim() === ''),\n    );\n    const next: AIChatMessage[] = [...history, { role: 'user', content: text }];\n    setMessages(next);\n    setInput('');\n    setStreaming(true);\n    const ac = new AbortController();\n    abortRef.current = ac;\n    let acc = '';\n    setMessages((m) => [...m, { role: 'assistant', content: '' }]);\n    try {\n      for await (const delta of streamAIChat(config, next, ac.signal)) {\n        acc += delta;\n        setMessages((m) => {\n          const copy = m.slice();\n          copy[copy.length - 1] = { role: 'assistant', content: acc };\n          return copy;\n        });\n      }\n    } catch (e: any) {\n      if (e?.name !== 'AbortError') setError(e?.message ?? 'Request failed');\n    } finally {\n      // Drop the trailing assistant placeholder if nothing streamed in.\n      setMessages((m) => {\n        const last = m[m.length - 1];\n        if (last && last.role === 'assistant' && last.content.trim() === '') {\n          return m.slice(0, -1);\n        }\n        return m;\n      });\n      setStreaming(false);\n      abortRef.current = null;\n    }\n  };\n\n  return (\n    <div className=\"flow-media-ai\" style={{ color }}>\n      <div className=\"flow-media-ai-header\">\n        {config?.model ? `AI · ${config.model}` : (node.data.label || 'AI')}\n      </div>\n      <div className=\"flow-media-ai-log\" ref={scrollRef}>\n        {messages.length === 0 && (\n          <div className=\"flow-media-ai-empty\">\n            {config?.gateway ? '开始对话…' : '请在属性面板配置 AI 接口'}\n          </div>\n        )}\n        {messages.map((m, i) => (\n          <div key={i} className={`flow-media-ai-msg flow-media-ai-msg--${m.role}`}>\n            {m.role === 'assistant'\n              ? <Markdown content={m.content || '…'} enableMermaid={false} enableMarkmap={false} />\n              : <span>{m.content}</span>}\n          </div>\n        ))}\n        {error && <div className=\"flow-media-error\">{error}</div>}\n      </div>\n      <div className=\"flow-media-ai-input\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n        <textarea\n          value={input}\n          placeholder=\"输入消息，Enter 发送\"\n          onChange={(e) => setInput(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (canSend) send(); }\n          }}\n          onPointerDown={(e) => e.stopPropagation()}\n        />\n        {streaming ? (\n          <button type=\"button\" onClick={() => abortRef.current?.abort()}>停止</button>\n        ) : (\n          <button type=\"button\" disabled={!canSend || !input.trim()} onClick={send}>发送</button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/** Dispatches to the correct renderer for the node's media kind. */\nexport function MediaContent({ node, interactive }: { node: FlowNode; interactive: boolean }) {\n  const kind = node.data.mediaKind ?? 'markdown';\n  const content = node.data.mediaContent ?? '';\n  const textColor = node.data.labelColor ?? node.data.color;\n\n  switch (kind) {\n    case 'markdown':\n      return (\n        <div className=\"flow-media-markdown\" style={{ color: textColor, fontSize: node.data.fontSize }}>\n          <Markdown content={content} />\n        </div>\n      );\n    case 'html':\n      return <HtmlView content={content} interactive={interactive} />;\n    case 'mermaid':\n      return <MermaidView content={content} color={textColor} />;\n    case 'math':\n      return <MathView content={content} color={textColor} fontSize={node.data.fontSize} />;\n    case 'image':\n      return <ImageView content={content} />;\n    case 'model3d':\n      return (\n        <Model3DView\n          content={content}\n          format={node.data.modelFormat ?? 'stl'}\n          interactive={interactive}\n        />\n      );\n    case 'ai':\n      return <AIView node={node} config={node.data.aiConfig} interactive={interactive} color={textColor} />;\n    default:\n      return null;\n  }\n}\n"],"mappings":";;;;;;;;AASA,IAAI,IAAe;AACnB,SAAS,IAAgB;AACvB,EAAI,MACJ,EAAQ,WAAW;AAAA,IAAE,aAAa;AAAA,IAAO,OAAO;AAAA,IAAW,eAAe;AAAA,IAAS,YAAY;AAAA,EAAU,CAAC,GAC1G,IAAe;AACjB;AAGA,SAAS,EAAY,EAAE,SAAA,GAAS,OAAA,EAAA,GAA8C;AAC5E,QAAM,CAAC,GAAK,CAAA,IAAU,EAAS,EAAE,GAC3B,CAAC,GAAO,CAAA,IAAY,EAAwB,IAAI,GAChD,IAAQ,EAAO,gBAAgB,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,CAAC,CAAA,EAAG;AAc1E,SAZA,EAAA,MAAgB;AACd,QAAI,IAAY;AAChB,IAAA,EAAc;AACd,UAAM,IAAM,EAAQ,KAAK;AACzB,QAAI,CAAC,GAAK;AAAE,MAAA,EAAO,EAAE,GAAG,EAAS,IAAI;AAAG;AAAA,IAAQ;AAChD,WAAA,EACG,OAAO,EAAM,SAAS,CAAG,EACzB,KAAA,CAAM,EAAE,KAAA,EAAA,MAAU;AAAE,MAAK,MAAa,EAAO,CAAG,GAAG,EAAS,IAAI;AAAA,IAAK,CAAC,EACtE,MAAA,CAAO,MAAM;AAAE,MAAK,KAAW,EAAS,GAAG,WAAW,eAAe;AAAA,IAAG,CAAC,GAC5E,MAAa;AAAE,MAAA,IAAY;AAAA,IAAM;AAAA,EACnC,GAAG,CAAC,CAAO,CAAC,GAER,IAAc,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,cAAoB;AAAA,EAAW,CAAA,IACzD,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IAAqB,OAAO,EAAE,OAAA,EAAM;AAAA,IAAG,yBAAyB,EAAE,QAAQ,EAAI;AAAA,EAAI,CAAA;AAC1G;AAGA,SAAS,EAAS,EAAE,SAAA,GAAS,OAAA,GAAO,UAAA,EAAA,GAAoE;AACtG,QAAM,IAAO,EAAA,MAAc;AACzB,QAAI;AACF,aAAO,EAAM,eAAe,EAAQ,KAAK,KAAK,OAAO;AAAA,QAAE,aAAa;AAAA,QAAM,cAAc;AAAA,MAAM,CAAC;AAAA,IACjG,SAAS,GAAQ;AACf,aAAO,kCAAkC,GAAG,WAAW,aAAA;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,CAAO,CAAC;AACZ,SAAO,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IAAkB,OAAO;AAAA,MAAE,OAAA;AAAA,MAAO,UAAA;AAAA,IAAS;AAAA,IAAG,yBAAyB,EAAE,QAAQ,EAAK;AAAA,EAAI,CAAA;AAClH;AAGA,SAAS,EAAS,EAAE,SAAA,GAAS,aAAA,EAAA,GAA0D;AACrF,SACE,gBAAA,EAAC,UAAD;AAAA,IACE,OAAM;AAAA,IACN,WAAU;AAAA,IACV,OAAO,EAAE,eAAe,IAAc,SAAS,OAAO;AAAA,IACtD,SAAQ;AAAA,IACR,QAAQ;AAAA,EACT,CAAA;AAEL;AAEA,SAAS,EAAU,EAAE,SAAA,EAAA,GAAgC;AACnD,QAAM,IAAM,EAAQ,KAAK;AACzB,SAAK,IAIH,gBAAA,EAAC,OAAD;AAAA,IACE,WAAU;AAAA,IACL,KAAA;AAAA,IACL,KAAI;AAAA,IACJ,WAAW;AAAA,IACX,gBAAe;AAAA,EAChB,CAAA,IATM,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,cAAyB;AAAA,EAAmB,CAAA;AAWtE;AAGA,SAAS,EAAO,EAAE,MAAA,GAAM,QAAA,GAAQ,aAAA,GAAa,OAAA,EAAA,GAA0F;AACrI,QAAM,CAAC,GAAU,CAAA,IAAe,EAA0B,CAAC,CAAC,GACtD,CAAC,GAAO,CAAA,IAAY,EAAS,EAAE,GAC/B,CAAC,GAAW,CAAA,IAAgB,EAAS,EAAK,GAC1C,CAAC,GAAO,CAAA,IAAY,EAAwB,IAAI,GAChD,IAAW,EAA+B,IAAI,GAC9C,IAAY,EAAuB,IAAI;AAE7C,EAAA,EAAA,MAAgB;AACd,IAAA,EAAU,SAAS,SAAS,EAAE,KAAK,EAAU,QAAQ,aAAa,CAAC;AAAA,EACrE,GAAG,CAAC,GAAU,CAAS,CAAC,GAExB,EAAA,MAAA,MAAsB,EAAS,SAAS,MAAM,GAAG,CAAC,CAAC;AAEnD,QAAM,IAAU,CAAC,CAAC,GAAQ,WAAW,CAAC,CAAC,GAAQ,SAAS,CAAC,GAEnD,IAAO,YAAY;AACvB,UAAM,IAAO,EAAM,KAAK;AACxB,QAAI,CAAC,KAAQ,CAAC,GAAQ,QAAS;AAC/B,IAAA,EAAS,IAAI;AAOb,UAAM,IAAwB,CAAC,GAHf,EAAS,OAAA,CACtB,MAAM,EAAE,EAAE,SAAS,eAAe,EAAE,QAAQ,KAAK,MAAM,GAExB,GAAS;AAAA,MAAE,MAAM;AAAA,MAAQ,SAAS;AAAA,IAAK,CAAC;AAC1E,IAAA,EAAY,CAAI,GAChB,EAAS,EAAE,GACX,EAAa,EAAI;AACjB,UAAM,IAAK,IAAI,gBAAgB;AAC/B,IAAA,EAAS,UAAU;AACnB,QAAI,IAAM;AACV,IAAA,EAAA,CAAa,MAAM,CAAC,GAAG,GAAG;AAAA,MAAE,MAAM;AAAA,MAAa,SAAS;AAAA,IAAG,CAAC,CAAC;AAC7D,QAAI;AACF,uBAAiB,KAAS,EAAa,GAAQ,GAAM,EAAG,MAAM;AAC5D,QAAA,KAAO,GACP,EAAA,CAAa,MAAM;AACjB,gBAAM,IAAO,EAAE,MAAM;AACrB,iBAAA,EAAK,EAAK,SAAS,CAAA,IAAK;AAAA,YAAE,MAAM;AAAA,YAAa,SAAS;AAAA,UAAI,GACnD;AAAA,QACT,CAAC;AAAA,IAEL,SAAS,GAAQ;AACf,MAAI,GAAG,SAAS,gBAAc,EAAS,GAAG,WAAW,gBAAgB;AAAA,IACvE,UAAA;AAEE,MAAA,EAAA,CAAa,MAAM;AACjB,cAAM,IAAO,EAAE,EAAE,SAAS,CAAA;AAC1B,eAAI,KAAQ,EAAK,SAAS,eAAe,EAAK,QAAQ,KAAK,MAAM,KACxD,EAAE,MAAM,GAAG,EAAE,IAEf;AAAA,MACT,CAAC,GACD,EAAa,EAAK,GAClB,EAAS,UAAU;AAAA,IACrB;AAAA,EACF;AAEA,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IAAgB,OAAO,EAAE,OAAA,EAAM;AAAA,cAA9C;AAAA,MACE,gBAAA,EAAC,OAAD;AAAA,QAAK,WAAU;AAAA,kBACZ,GAAQ,QAAQ,QAAQ,EAAO,KAAA,KAAW,EAAK,KAAK,SAAS;AAAA,MAC3D,CAAA;AAAA,MACL,gBAAA,EAAC,OAAD;AAAA,QAAK,WAAU;AAAA,QAAoB,KAAK;AAAA,kBAAxC;AAAA,UACG,EAAS,WAAW,KACnB,gBAAA,EAAC,OAAD;AAAA,YAAK,WAAU;AAAA,sBACZ,GAAQ,UAAU,UAAU;AAAA,UAC1B,CAAA;AAAA,UAEN,EAAS,IAAA,CAAK,GAAG,MAChB,gBAAA,EAAC,OAAD;AAAA,YAAa,WAAW,wCAAwC,EAAE,IAAA;AAAA,sBAC/D,EAAE,SAAS,cACR,gBAAA,EAAC,GAAD;AAAA,cAAU,SAAS,EAAE,WAAW;AAAA,cAAK,eAAe;AAAA,cAAO,eAAe;AAAA,YAAQ,CAAA,IAClF,gBAAA,EAAC,QAAD,EAAA,UAAO,EAAE,QAAc,CAAA;AAAA,UACxB,GAJK,CAIL,CACN;AAAA,UACA,KAAS,gBAAA,EAAC,OAAD;AAAA,YAAK,WAAU;AAAA,sBAAoB;AAAA,UAAW,CAAA;AAAA,QACrD;AAAA;MACL,gBAAA,EAAC,OAAD;AAAA,QAAK,WAAU;AAAA,QAAsB,OAAO,EAAE,eAAe,IAAc,SAAS,OAAO;AAAA,kBAA3F,CACE,gBAAA,EAAC,YAAD;AAAA,UACE,OAAO;AAAA,UACP,aAAY;AAAA,UACZ,UAAA,CAAW,MAAM,EAAS,EAAE,OAAO,KAAK;AAAA,UACxC,WAAA,CAAY,MAAM;AAChB,YAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,aAAY,EAAE,eAAe,GAAO,KAAS,EAAK;AAAA,UAChF;AAAA,UACA,eAAA,CAAgB,MAAM,EAAE,gBAAgB;AAAA,QACzC,CAAA,GACA,IACC,gBAAA,EAAC,UAAD;AAAA,UAAQ,MAAK;AAAA,UAAS,SAAA,MAAe,EAAS,SAAS,MAAM;AAAA,oBAAG;AAAA,QAAU,CAAA,IAE1E,gBAAA,EAAC,UAAD;AAAA,UAAQ,MAAK;AAAA,UAAS,UAAU,CAAC,KAAW,CAAC,EAAM,KAAK;AAAA,UAAG,SAAS;AAAA,oBAAM;AAAA,QAAU,CAAA,CAEnF;AAAA;IACF;AAAA;AAET;AAGA,SAAgB,EAAa,EAAE,MAAA,GAAM,aAAA,EAAA,GAAyD;AAC5F,QAAM,IAAO,EAAK,KAAK,aAAa,YAC9B,IAAU,EAAK,KAAK,gBAAgB,IACpC,IAAY,EAAK,KAAK,cAAc,EAAK,KAAK;AAEpD,UAAQ,GAAR;AAAA,IACE,KAAK;AACH,aACE,gBAAA,EAAC,OAAD;AAAA,QAAK,WAAU;AAAA,QAAsB,OAAO;AAAA,UAAE,OAAO;AAAA,UAAW,UAAU,EAAK,KAAK;AAAA,QAAS;AAAA,kBAC3F,gBAAA,EAAC,GAAD,EAAmB,SAAA,EAAU,CAAA;AAAA,MAC1B,CAAA;AAAA,IAET,KAAK;AACH,aAAO,gBAAA,EAAC,GAAD;AAAA,QAAmB,SAAA;AAAA,QAAsB,aAAA;AAAA,MAAc,CAAA;AAAA,IAChE,KAAK;AACH,aAAO,gBAAA,EAAC,GAAD;AAAA,QAAsB,SAAA;AAAA,QAAS,OAAO;AAAA,MAAY,CAAA;AAAA,IAC3D,KAAK;AACH,aAAO,gBAAA,EAAC,GAAD;AAAA,QAAmB,SAAA;AAAA,QAAS,OAAO;AAAA,QAAW,UAAU,EAAK,KAAK;AAAA,MAAW,CAAA;AAAA,IACtF,KAAK;AACH,aAAO,gBAAA,EAAC,GAAD,EAAoB,SAAA,EAAU,CAAA;AAAA,IACvC,KAAK;AACH,aACE,gBAAA,EAAC,GAAD;AAAA,QACW,SAAA;AAAA,QACT,QAAQ,EAAK,KAAK,eAAe;AAAA,QACpB,aAAA;AAAA,MACd,CAAA;AAAA,IAEL,KAAK;AACH,aAAO,gBAAA,EAAC,GAAD;AAAA,QAAc,MAAA;AAAA,QAAM,QAAQ,EAAK,KAAK;AAAA,QAAuB,aAAA;AAAA,QAAa,OAAO;AAAA,MAAY,CAAA;AAAA,IACtG;AACE,aAAO;AAAA,EACX;AACF"}
+{"version":3,"file":"MediaContent.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaContent.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport katex from 'katex';\nimport mermaid from 'mermaid';\nimport Markdown from '../../../Markdown';\nimport type { FlowNode, FlowAIConfig } from '../types';\nimport { streamAIChat, type AIChatMessage } from './aiClient';\nimport { resolveThemeColorCss, resolveThemeColor } from '../utils/themeColor';\nimport 'katex/dist/katex.min.css';\nimport { Model3DView } from './Model3DView';\n\n// Data-node view pulls in DataTable + Chart; lazy-load so it only enters the\n// bundle when a data node actually renders.\nconst DataNodeView = React.lazy(() =>\n  import('./DataNodeView').then((m) => ({ default: m.DataNodeView })),\n);\n\nlet mermaidReady = false;\nfunction ensureMermaid() {\n  if (mermaidReady) return;\n  mermaid.initialize({ startOnLoad: false, theme: 'default', securityLevel: 'loose', fontFamily: 'inherit' });\n  mermaidReady = true;\n}\n\n/** Renders a Mermaid diagram from source into an inline SVG. */\nfunction MermaidView({ content, color }: { content: string; color?: string }) {\n  const [svg, setSvg] = useState('');\n  const [error, setError] = useState<string | null>(null);\n  const idRef = useRef(`flow-mermaid-${Math.random().toString(36).slice(2)}`);\n\n  useEffect(() => {\n    let cancelled = false;\n    ensureMermaid();\n    const src = content.trim();\n    if (!src) { setSvg(''); setError(null); return; }\n    mermaid\n      .render(idRef.current, src)\n      .then(({ svg }) => { if (!cancelled) { setSvg(svg); setError(null); } })\n      .catch((e) => { if (!cancelled) setError(e?.message ?? 'Mermaid error'); });\n    return () => { cancelled = true; };\n  }, [content]);\n\n  if (error) return <div className=\"flow-media-error\">{error}</div>;\n  return <div className=\"flow-media-mermaid\" style={{ color }} dangerouslySetInnerHTML={{ __html: svg }} />;\n}\n\n/** Renders a LaTeX formula (display mode) via KaTeX. */\nfunction MathView({ content, color, fontSize }: { content: string; color?: string; fontSize?: number }) {\n  const html = useMemo(() => {\n    try {\n      return katex.renderToString(content.trim() || '\\\\;', { displayMode: true, throwOnError: false });\n    } catch (e: any) {\n      return `<span class=\"flow-media-error\">${e?.message ?? 'KaTeX error'}</span>`;\n    }\n  }, [content]);\n  return <div className=\"flow-media-math\" style={{ color, fontSize }} dangerouslySetInnerHTML={{ __html: html }} />;\n}\n\n/** Renders raw HTML in a sandboxed iframe (isolated from the host document).\n *  A base stylesheet is injected so the fragment inherits the node's themed\n *  text color / font size and a transparent background, keeping it readable on\n *  any theme without the author having to set colors. */\nfunction HtmlView({ content, interactive, color, fontSize }: { content: string; interactive: boolean; color?: string; fontSize?: number }) {\n  const srcDoc = useMemo(() => {\n    const base = `<!doctype html><html><head><meta charset=\"utf-8\"><style>\n      :root { color-scheme: light dark; }\n      html, body { margin: 0; background: transparent; }\n      body {\n        color: ${color ?? '#111827'};\n        font-size: ${fontSize ?? 13}px;\n        font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n        line-height: 1.5;\n        padding: 0;\n      }\n      a { color: inherit; }\n    </style></head><body>${content}</body></html>`;\n    return base;\n  }, [content, color, fontSize]);\n  return (\n    <iframe\n      title=\"html-media\"\n      className=\"flow-media-iframe\"\n      style={{ pointerEvents: interactive ? 'auto' : 'none' }}\n      sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms\"\n      srcDoc={srcDoc}\n    />\n  );\n}\n\nfunction ImageView({ content }: { content: string }) {\n  const src = content.trim();\n  if (!src) {\n    return <div className=\"flow-media-image-empty\">输入图片链接，或直接粘贴图片</div>;\n  }\n  return (\n    <img\n      className=\"flow-media-image\"\n      src={src}\n      alt=\"\"\n      draggable={false}\n      referrerPolicy=\"no-referrer\"\n    />\n  );\n}\n\n/** Interactive AI chat backed by an OpenAI/Anthropic-compatible endpoint. */\nfunction AIView({ node, config, interactive, color }: { node: FlowNode; config?: FlowAIConfig; interactive: boolean; color?: string }) {\n  const [messages, setMessages] = useState<AIChatMessage[]>([]);\n  const [input, setInput] = useState('');\n  const [streaming, setStreaming] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const abortRef = useRef<AbortController | null>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });\n  }, [messages, streaming]);\n\n  useEffect(() => () => abortRef.current?.abort(), []);\n\n  const canSend = !!config?.gateway && !!config?.model && !streaming;\n\n  const send = async () => {\n    const text = input.trim();\n    if (!text || !config?.gateway) return;\n    setError(null);\n    // Only keep non-empty assistant messages in history; an aborted/errored\n    // request can leave an empty assistant placeholder behind, which the API\n    // then rejects (\"assistant message must not be empty\").\n    const history = messages.filter(\n      (m) => !(m.role === 'assistant' && m.content.trim() === ''),\n    );\n    const next: AIChatMessage[] = [...history, { role: 'user', content: text }];\n    setMessages(next);\n    setInput('');\n    setStreaming(true);\n    const ac = new AbortController();\n    abortRef.current = ac;\n    let acc = '';\n    setMessages((m) => [...m, { role: 'assistant', content: '' }]);\n    try {\n      for await (const delta of streamAIChat(config, next, ac.signal)) {\n        acc += delta;\n        setMessages((m) => {\n          const copy = m.slice();\n          copy[copy.length - 1] = { role: 'assistant', content: acc };\n          return copy;\n        });\n      }\n    } catch (e: any) {\n      if (e?.name !== 'AbortError') setError(e?.message ?? 'Request failed');\n    } finally {\n      // Drop the trailing assistant placeholder if nothing streamed in.\n      setMessages((m) => {\n        const last = m[m.length - 1];\n        if (last && last.role === 'assistant' && last.content.trim() === '') {\n          return m.slice(0, -1);\n        }\n        return m;\n      });\n      setStreaming(false);\n      abortRef.current = null;\n    }\n  };\n\n  return (\n    <div className=\"flow-media-ai\" style={{ color }}>\n      <div className=\"flow-media-ai-header\">\n        {config?.model ? `AI · ${config.model}` : (node.data.label || 'AI')}\n      </div>\n      <div className=\"flow-media-ai-log\" ref={scrollRef}>\n        {messages.length === 0 && (\n          <div className=\"flow-media-ai-empty\">\n            {config?.gateway ? '开始对话…' : '请在属性面板配置 AI 接口'}\n          </div>\n        )}\n        {messages.map((m, i) => (\n          <div key={i} className={`flow-media-ai-msg flow-media-ai-msg--${m.role}`}>\n            {m.role === 'assistant'\n              ? <Markdown content={m.content || '…'} enableMermaid={false} enableMarkmap={false} />\n              : <span>{m.content}</span>}\n          </div>\n        ))}\n        {error && <div className=\"flow-media-error\">{error}</div>}\n      </div>\n      <div className=\"flow-media-ai-input\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n        <textarea\n          value={input}\n          placeholder=\"输入消息，Enter 发送\"\n          onChange={(e) => setInput(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (canSend) send(); }\n          }}\n          onPointerDown={(e) => e.stopPropagation()}\n        />\n        {streaming ? (\n          <button type=\"button\" onClick={() => abortRef.current?.abort()}>停止</button>\n        ) : (\n          <button type=\"button\" disabled={!canSend || !input.trim()} onClick={send}>发送</button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/** Dispatches to the correct renderer for the node's media kind. */\nexport function MediaContent({ node, interactive }: { node: FlowNode; interactive: boolean }) {\n  const kind = node.data.mediaKind ?? 'markdown';\n  const content = node.data.mediaContent ?? '';\n  const textColor = resolveThemeColorCss(node.data.labelColor ?? node.data.color, '#111827');\n\n  switch (kind) {\n    case 'markdown':\n      return (\n        <div className=\"flow-media-markdown\" style={{ color: textColor, fontSize: node.data.fontSize }}>\n          <Markdown content={content} />\n        </div>\n      );\n    case 'html':\n      // The iframe is an isolated document with no access to the parent's CSS\n      // variables, so pass a concrete resolved color instead of a var().\n      return (\n        <HtmlView\n          content={content}\n          interactive={interactive}\n          color={resolveThemeColor(node.data.labelColor ?? node.data.color, '#111827')}\n          fontSize={node.data.fontSize}\n        />\n      );\n    case 'mermaid':\n      return <MermaidView content={content} color={textColor} />;\n    case 'math':\n      return <MathView content={content} color={textColor} fontSize={node.data.fontSize} />;\n    case 'image':\n      return <ImageView content={content} />;\n    case 'model3d':\n      return (\n        <Model3DView\n          content={content}\n          format={node.data.modelFormat ?? 'stl'}\n          interactive={interactive}\n        />\n      );\n    case 'ai':\n      return <AIView node={node} config={node.data.aiConfig} interactive={interactive} color={textColor} />;\n    case 'data':\n      return (\n        <div className=\"flow-media-data\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n          <DataNodeView config={node.data.dataConfig ?? { columns: [], rows: [], view: 'table' }} />\n        </div>\n      );\n    default:\n      return null;\n  }\n}\n"],"mappings":"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"}

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

@@ -1,8 +1,9 @@
-import { useFlowContext as u } from "../context/FlowContext.js";
-import { useFlowUI as v } from "../context/FlowUIContext.js";
-import s, { Suspense as g, useMemo as w } from "react";
+import { useFlowContext as w } from "../context/FlowContext.js";
+import { useFlowUI as y } from "../context/FlowUIContext.js";
+import { resolveThemeColorCss as s } from "../utils/themeColor.js";
+import i, { Suspense as C, useMemo as x } from "react";
 import { jsx as r } from "react/jsx-runtime";
-var y = s.lazy(() => import("./MediaContent.js").then((t) => ({ default: t.MediaContent }))), N = class extends s.Component {
+var N = i.lazy(() => import("./MediaContent.js").then((t) => ({ default: t.MediaContent }))), M = class extends i.Component {
   constructor(t) {
     super(t), this.state = { error: null };
   }
@@ -16,21 +17,21 @@ var y = s.lazy(() => import("./MediaContent.js").then((t) => ({ default: t.Media
     }) : this.props.children;
   }
 };
-function F() {
-  const { currentCanvas: t, selection: a } = u(), { viewport: n, isNodeDragging: l } = v(), i = w(() => t.nodes.filter((e) => e.type === "mediaNode"), [t.nodes]);
-  if (i.length === 0) return null;
-  const { x: d, y: c, zoom: o } = n;
+function D() {
+  const { currentCanvas: t, selection: n } = w(), { viewport: l, isNodeDragging: d } = y(), a = x(() => t.nodes.filter((e) => e.type === "mediaNode"), [t.nodes]);
+  if (a.length === 0) return null;
+  const { x: c, y: m, zoom: o } = l;
   return /* @__PURE__ */ r("div", {
     className: "flow-media-layer",
-    children: i.map((e) => {
-      const m = e.position.x * o + d, h = e.position.y * o + c, p = a.nodeIds.has(e.id) && !l;
+    children: a.map((e) => {
+      const p = e.position.x * o + c, f = e.position.y * o + m, h = n.nodeIds.has(e.id) && !d, u = e.data.fill === "transparent" ? "transparent" : s(e.data.fill, "transparent"), v = s(e.data.labelColor ?? e.data.color, "#111827");
       return /* @__PURE__ */ r("div", {
         className: "flow-media-node",
         "data-media-node": e.id,
         style: {
           position: "absolute",
-          left: m,
-          top: h,
+          left: p,
+          top: f,
           width: e.width,
           height: e.height,
           transform: `scale(${o})`,
@@ -39,15 +40,19 @@ function F() {
         },
         children: /* @__PURE__ */ r("div", {
           className: "flow-media-surface",
-          onWheel: (f) => f.stopPropagation(),
-          children: /* @__PURE__ */ r(g, {
+          onWheel: (g) => g.stopPropagation(),
+          style: {
+            background: u,
+            color: v
+          },
+          children: /* @__PURE__ */ r(C, {
             fallback: /* @__PURE__ */ r("div", {
               className: "flow-media-loading",
               children: "…"
             }),
-            children: /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(y, {
+            children: /* @__PURE__ */ r(M, { children: /* @__PURE__ */ r(N, {
               node: e,
-              interactive: p
+              interactive: h
             }) })
           })
         })
@@ -56,7 +61,7 @@ function F() {
   });
 }
 export {
-  F as MediaOverlay
+  D as MediaOverlay
 };
 
 //# sourceMappingURL=MediaOverlay.js.map

package/dist/components/pro/Flow/nodes/MediaOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaOverlay.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaOverlay.tsx"],"sourcesContent":["import React, { useMemo, Suspense } from 'react';\nimport { useFlowContext } from '../context/FlowContext';\nimport { useFlowUI } from '../context/FlowUIContext';\n\n// Lazy-load the media renderers so the heavy optional deps they pull in\n// (react-markdown, mermaid, katex, markmap, …) are only fetched when a media\n// node actually needs to render. This keeps the base `dishui/flow` bundle\n// lightweight and avoids loading that stack for diagrams without media nodes.\nconst MediaContent = React.lazy(() =>\n  import('./MediaContent').then((m) => ({ default: m.MediaContent })),\n);\n\n/** Isolates media render/load failures so one bad node never blanks the editor. */\nclass MediaErrorBoundary extends React.Component<\n  { children: React.ReactNode },\n  { error: Error | null }\n> {\n  constructor(props: { children: React.ReactNode }) {\n    super(props);\n    this.state = { error: null };\n  }\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n  render() {\n    if (this.state.error) {\n      return <div className=\"flow-media-error\">{this.state.error.message}</div>;\n    }\n    return this.props.children;\n  }\n}\n\n/**\n * DOM overlay for media nodes. PixiJS draws the frame; this layer renders the\n * live content (markdown/html/mermaid/math/AI) on top, synced to the viewport\n * so it pans and zooms with the canvas.\n *\n * Event model: a media surface is `pointer-events: none` by default so the\n * canvas underneath can be clicked to select/drag the node's frame. The\n * surface only becomes interactive while its node is selected (so AI chat can\n * be typed into, HTML can be scrolled). This also stops an always-interactive\n * iframe/AI box from swallowing pointer gestures and leaving the drag stuck.\n */\nexport function MediaOverlay() {\n  const { currentCanvas, selection } = useFlowContext();\n  const { viewport, isNodeDragging } = useFlowUI();\n\n  const mediaNodes = useMemo(\n    () => currentCanvas.nodes.filter((n) => n.type === 'mediaNode'),\n    [currentCanvas.nodes],\n  );\n\n  if (mediaNodes.length === 0) return null;\n\n  const { x: vx, y: vy, zoom } = viewport;\n\n  return (\n    <div className=\"flow-media-layer\">\n      {mediaNodes.map((node) => {\n        // World → screen (CSS px, matching ViewportManager.worldToScreen).\n        const left = node.position.x * zoom + vx;\n        const top = node.position.y * zoom + vy;\n        // Interactive only while selected, so the canvas stays draggable.\n        // Suppress entirely during a drag: an interactive iframe would swallow\n        // the pointer and the canvas would never receive pointerup (stuck drag).\n        const interactive = selection.nodeIds.has(node.id) && !isNodeDragging;\n        return (\n          <div\n            key={node.id}\n            className=\"flow-media-node\"\n            data-media-node={node.id}\n            style={{\n              position: 'absolute',\n              left,\n              top,\n              width: node.width,\n              height: node.height,\n              // Scale the fixed-size content box to match zoom without\n              // reflowing text on every zoom step.\n              transform: `scale(${zoom})`,\n              transformOrigin: 'top left',\n              // Below the frame's selection outline but above the canvas.\n              pointerEvents: 'none',\n            }}\n          >\n            <div\n              className=\"flow-media-surface\"\n              onWheel={(e) => e.stopPropagation()}\n            >\n              <Suspense fallback={<div className=\"flow-media-loading\">…</div>}>\n                <MediaErrorBoundary>\n                  <MediaContent node={node} interactive={interactive} />\n                </MediaErrorBoundary>\n              </Suspense>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAQA,IAAM,IAAe,EAAM,KAAA,MACzB,OAAO,mBAAA,EAAkB,KAAA,CAAM,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CACpE,GAGM,IAAN,cAAiC,EAAM,UAGrC;AAAA,EACA,YAAY,GAAsC;AAChD,UAAM,CAAK,GACX,KAAK,QAAQ,EAAE,OAAO,KAAK;AAAA,EAC7B;AAAA,EACA,OAAO,yBAAyB,GAAc;AAC5C,WAAO,EAAE,OAAA,EAAM;AAAA,EACjB;AAAA,EACA,SAAS;AACP,WAAI,KAAK,MAAM,QACN,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,gBAAoB,KAAK,MAAM,MAAM;AAAA,IAAa,CAAA,IAEnE,KAAK,MAAM;AAAA,EACpB;AACF;AAaA,SAAgB,IAAe;AAC7B,QAAM,EAAE,eAAA,GAAe,WAAA,EAAA,IAAc,EAAe,GAC9C,EAAE,UAAA,GAAU,gBAAA,EAAA,IAAmB,EAAU,GAEzC,IAAa,EAAA,MACX,EAAc,MAAM,OAAA,CAAQ,MAAM,EAAE,SAAS,WAAW,GAC9D,CAAC,EAAc,KAAK,CACtB;AAEA,MAAI,EAAW,WAAW,EAAG,QAAO;AAEpC,QAAM,EAAE,GAAG,GAAI,GAAG,GAAI,MAAA,EAAA,IAAS;AAE/B,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,cACZ,EAAW,IAAA,CAAK,MAAS;AAExB,YAAM,IAAO,EAAK,SAAS,IAAI,IAAO,GAChC,IAAM,EAAK,SAAS,IAAI,IAAO,GAI/B,IAAc,EAAU,QAAQ,IAAI,EAAK,EAAE,KAAK,CAAC;AACvD,aACE,gBAAA,EAAC,OAAD;AAAA,QAEE,WAAU;AAAA,QACV,mBAAiB,EAAK;AAAA,QACtB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,MAAA;AAAA,UACA,KAAA;AAAA,UACA,OAAO,EAAK;AAAA,UACZ,QAAQ,EAAK;AAAA,UAGb,WAAW,SAAS,CAAA;AAAA,UACpB,iBAAiB;AAAA,UAEjB,eAAe;AAAA,QACjB;AAAA,kBAEA,gBAAA,EAAC,OAAD;AAAA,UACE,WAAU;AAAA,UACV,SAAA,CAAU,MAAM,EAAE,gBAAgB;AAAA,oBAElC,gBAAA,EAAC,GAAD;AAAA,YAAU,UAAU,gBAAA,EAAC,OAAD;AAAA,cAAK,WAAU;AAAA,wBAAqB;AAAA,YAAM,CAAA;AAAA,sBAC5D,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,cAAoB,MAAA;AAAA,cAAmB,aAAA;AAAA,YAAc,CAAA,EACnC,CAAA;AAAA,UACZ,CAAA;AAAA,QACP,CAAA;AAAA,MACF,GA3BE,EAAK,EA2BP;AAAA,IAET,CAAC;AAAA,EACE,CAAA;AAET"}
+{"version":3,"file":"MediaOverlay.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaOverlay.tsx"],"sourcesContent":["import React, { useMemo, Suspense } from 'react';\nimport { useFlowContext } from '../context/FlowContext';\nimport { useFlowUI } from '../context/FlowUIContext';\nimport { resolveThemeColorCss } from '../utils/themeColor';\n\n// Lazy-load the media renderers so the heavy optional deps they pull in\n// (react-markdown, mermaid, katex, markmap, …) are only fetched when a media\n// node actually needs to render. This keeps the base `dishui/flow` bundle\n// lightweight and avoids loading that stack for diagrams without media nodes.\nconst MediaContent = React.lazy(() =>\n  import('./MediaContent').then((m) => ({ default: m.MediaContent })),\n);\n\n/** Isolates media render/load failures so one bad node never blanks the editor. */\nclass MediaErrorBoundary extends React.Component<\n  { children: React.ReactNode },\n  { error: Error | null }\n> {\n  constructor(props: { children: React.ReactNode }) {\n    super(props);\n    this.state = { error: null };\n  }\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n  render() {\n    if (this.state.error) {\n      return <div className=\"flow-media-error\">{this.state.error.message}</div>;\n    }\n    return this.props.children;\n  }\n}\n\n/**\n * DOM overlay for media nodes. PixiJS draws the frame; this layer renders the\n * live content (markdown/html/mermaid/math/AI) on top, synced to the viewport\n * so it pans and zooms with the canvas.\n *\n * Event model: a media surface is `pointer-events: none` by default so the\n * canvas underneath can be clicked to select/drag the node's frame. The\n * surface only becomes interactive while its node is selected (so AI chat can\n * be typed into, HTML can be scrolled). This also stops an always-interactive\n * iframe/AI box from swallowing pointer gestures and leaving the drag stuck.\n */\nexport function MediaOverlay() {\n  const { currentCanvas, selection } = useFlowContext();\n  const { viewport, isNodeDragging } = useFlowUI();\n\n  const mediaNodes = useMemo(\n    () => currentCanvas.nodes.filter((n) => n.type === 'mediaNode'),\n    [currentCanvas.nodes],\n  );\n\n  if (mediaNodes.length === 0) return null;\n\n  const { x: vx, y: vy, zoom } = viewport;\n\n  return (\n    <div className=\"flow-media-layer\">\n      {mediaNodes.map((node) => {\n        // World → screen (CSS px, matching ViewportManager.worldToScreen).\n        const left = node.position.x * zoom + vx;\n        const top = node.position.y * zoom + vy;\n        // Interactive only while selected, so the canvas stays draggable.\n        // Suppress entirely during a drag: an interactive iframe would swallow\n        // the pointer and the canvas would never receive pointerup (stuck drag).\n        const interactive = selection.nodeIds.has(node.id) && !isNodeDragging;\n        // Drive the overlay's background / text from the node's own color data.\n        // Theme tokens (`theme:*`) resolve to CSS variables so the media content\n        // follows theme switches natively; literal colors are used as-is. This\n        // keeps html / ai / data (which render opaque content) in sync with the\n        // fill/color chosen in the inspector, matching the PixiJS frame drawn\n        // underneath. The border is owned by the Pixi frame (also what PNG/PDF\n        // export captures), so we don't redraw it here.\n        const fillCss = node.data.fill === 'transparent'\n          ? 'transparent'\n          : resolveThemeColorCss(node.data.fill, 'transparent');\n        const textColor = resolveThemeColorCss(node.data.labelColor ?? node.data.color, '#111827');\n        return (\n          <div\n            key={node.id}\n            className=\"flow-media-node\"\n            data-media-node={node.id}\n            style={{\n              position: 'absolute',\n              left,\n              top,\n              width: node.width,\n              height: node.height,\n              // Scale the fixed-size content box to match zoom without\n              // reflowing text on every zoom step.\n              transform: `scale(${zoom})`,\n              transformOrigin: 'top left',\n              // Below the frame's selection outline but above the canvas.\n              pointerEvents: 'none',\n            }}\n          >\n            <div\n              className=\"flow-media-surface\"\n              onWheel={(e) => e.stopPropagation()}\n              style={{\n                background: fillCss,\n                color: textColor,\n              }}\n            >\n              <Suspense fallback={<div className=\"flow-media-loading\">…</div>}>\n                <MediaErrorBoundary>\n                  <MediaContent node={node} interactive={interactive} />\n                </MediaErrorBoundary>\n              </Suspense>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AASA,IAAM,IAAe,EAAM,KAAA,MACzB,OAAO,mBAAA,EAAkB,KAAA,CAAM,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CACpE,GAGM,IAAN,cAAiC,EAAM,UAGrC;AAAA,EACA,YAAY,GAAsC;AAChD,UAAM,CAAK,GACX,KAAK,QAAQ,EAAE,OAAO,KAAK;AAAA,EAC7B;AAAA,EACA,OAAO,yBAAyB,GAAc;AAC5C,WAAO,EAAE,OAAA,EAAM;AAAA,EACjB;AAAA,EACA,SAAS;AACP,WAAI,KAAK,MAAM,QACN,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,gBAAoB,KAAK,MAAM,MAAM;AAAA,IAAa,CAAA,IAEnE,KAAK,MAAM;AAAA,EACpB;AACF;AAaA,SAAgB,IAAe;AAC7B,QAAM,EAAE,eAAA,GAAe,WAAA,EAAA,IAAc,EAAe,GAC9C,EAAE,UAAA,GAAU,gBAAA,EAAA,IAAmB,EAAU,GAEzC,IAAa,EAAA,MACX,EAAc,MAAM,OAAA,CAAQ,MAAM,EAAE,SAAS,WAAW,GAC9D,CAAC,EAAc,KAAK,CACtB;AAEA,MAAI,EAAW,WAAW,EAAG,QAAO;AAEpC,QAAM,EAAE,GAAG,GAAI,GAAG,GAAI,MAAA,EAAA,IAAS;AAE/B,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,cACZ,EAAW,IAAA,CAAK,MAAS;AAExB,YAAM,IAAO,EAAK,SAAS,IAAI,IAAO,GAChC,IAAM,EAAK,SAAS,IAAI,IAAO,GAI/B,IAAc,EAAU,QAAQ,IAAI,EAAK,EAAE,KAAK,CAAC,GAQjD,IAAU,EAAK,KAAK,SAAS,gBAC/B,gBACA,EAAqB,EAAK,KAAK,MAAM,aAAa,GAChD,IAAY,EAAqB,EAAK,KAAK,cAAc,EAAK,KAAK,OAAO,SAAS;AACzF,aACE,gBAAA,EAAC,OAAD;AAAA,QAEE,WAAU;AAAA,QACV,mBAAiB,EAAK;AAAA,QACtB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,MAAA;AAAA,UACA,KAAA;AAAA,UACA,OAAO,EAAK;AAAA,UACZ,QAAQ,EAAK;AAAA,UAGb,WAAW,SAAS,CAAA;AAAA,UACpB,iBAAiB;AAAA,UAEjB,eAAe;AAAA,QACjB;AAAA,kBAEA,gBAAA,EAAC,OAAD;AAAA,UACE,WAAU;AAAA,UACV,SAAA,CAAU,MAAM,EAAE,gBAAgB;AAAA,UAClC,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,OAAO;AAAA,UACT;AAAA,oBAEA,gBAAA,EAAC,GAAD;AAAA,YAAU,UAAU,gBAAA,EAAC,OAAD;AAAA,cAAK,WAAU;AAAA,wBAAqB;AAAA,YAAM,CAAA;AAAA,sBAC5D,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,cAAoB,MAAA;AAAA,cAAmB,aAAA;AAAA,YAAc,CAAA,EACnC,CAAA;AAAA,UACZ,CAAA;AAAA,QACP,CAAA;AAAA,MACF,GA/BE,EAAK,EA+BP;AAAA,IAET,CAAC;AAAA,EACE,CAAA;AAET"}

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

@@ -1,10 +1,11 @@
-import { drawRoundRectBorder as M, shapeDrawers as k } from "./shapes.js";
-import { createNodeText as O, formatIconLabel as T, normalizeIconLabelPlacement as I, updateNodeText as N } from "./NodeText.js";
-import { createHandleGraphics as A, getHandlePositions as R, updateHandleGraphics as L } from "./NodeHandles.js";
-import { getFlipScale as z, getRotationRad as H } from "./nodeUtils.js";
-import { getIconTexture as B, subscribeIconTextureReady as G } from "./svgIconTexture.js";
-import { Container as _, Graphics as W, Sprite as P, Text as D } from "pixi.js";
-var j = class {
+import { resolveThemeColor as m } from "../utils/themeColor.js";
+import { drawRoundRectBorder as T, shapeDrawers as S } from "./shapes.js";
+import { createNodeText as I, formatIconLabel as N, normalizeIconLabelPlacement as A, updateNodeText as L } from "./NodeText.js";
+import { createHandleGraphics as z, getHandlePositions as W, updateHandleGraphics as H } from "./NodeHandles.js";
+import { getFlipScale as B, getRotationRad as G } from "./nodeUtils.js";
+import { getIconTexture as P, subscribeIconTextureReady as D } from "./svgIconTexture.js";
+import { Container as R, Graphics as M, Sprite as F, Text as V } from "pixi.js";
+var K = class {
   world;
   nodeLayer;
   nodes = /* @__PURE__ */ new Map();
@@ -14,25 +15,25 @@ var j = class {
     this._dynamicOffset = (this._dynamicOffset + s * 0.06) % 1e3;
   }
   constructor(s) {
-    this.world = s, this.nodeLayer = new _({
+    this.world = s, this.nodeLayer = new R({
       label: "nodes",
       sortableChildren: !0
-    }), this.world.addChild(this.nodeLayer), this._unsubscribeTextureReady = G(() => this._resync?.());
+    }), this.world.addChild(this.nodeLayer), this._unsubscribeTextureReady = D(() => this._resync?.());
   }
   _resync = null;
-  sync(s, t, l, f, d) {
+  sync(s, t, l, c, d) {
     const r = /* @__PURE__ */ new Set();
-    this._resync = () => this.sync(s, t, l, f, d);
-    const e = f ?? (() => {
-      const i = s.filter((h) => h.type === "animAnchor").sort((h, o) => (h.data.animIndex ?? 0) - (o.data.animIndex ?? 0)), a = /* @__PURE__ */ new Map();
-      return i.forEach((h, o) => a.set(h.id, o + 1)), a;
+    this._resync = () => this.sync(s, t, l, c, d);
+    const i = c ?? (() => {
+      const e = s.filter((h) => h.type === "animAnchor").sort((h, o) => (h.data.animIndex ?? 0) - (o.data.animIndex ?? 0)), a = /* @__PURE__ */ new Map();
+      return e.forEach((h, o) => a.set(h.id, o + 1)), a;
     })();
-    for (const i of s) {
-      r.add(i.id);
-      let a = this.nodes.get(i.id);
-      a || (a = this._createNode(i), this.nodes.set(i.id, a)), this._updateNode(a, i, t.has(i.id), l === i.id, e.get(i.id), d);
+    for (const e of s) {
+      r.add(e.id);
+      let a = this.nodes.get(e.id);
+      a || (a = this._createNode(e), this.nodes.set(e.id, a)), this._updateNode(a, e, t.has(e.id), l === e.id, i.get(e.id), d);
     }
-    for (const [i, a] of this.nodes) r.has(i) || (this.nodeLayer.removeChild(a.container), a.container.destroy({ children: !0 }), this.nodes.delete(i));
+    for (const [e, a] of this.nodes) r.has(e) || (this.nodeLayer.removeChild(a.container), a.container.destroy({ children: !0 }), this.nodes.delete(e));
   }
   getNodeContainer(s) {
     return this.nodes.get(s);
@@ -41,25 +42,25 @@ var j = class {
     return [...this.nodes.values()];
   }
   _createNode(s) {
-    const t = new _({ label: `node-${s.id}` });
+    const t = new R({ label: `node-${s.id}` });
     t.eventMode = "static", t.cursor = "pointer";
-    const l = new _({ label: "svg-transform" });
+    const l = new R({ label: "svg-transform" });
     t.addChild(l);
-    const f = new W();
-    f.label = "sub-canvas-glow", t.addChild(f);
-    const d = new W();
+    const c = new M();
+    c.label = "sub-canvas-glow", t.addChild(c);
+    const d = new M();
     d.label = "shape", t.addChild(d);
-    const r = new P();
+    const r = new F();
     r.label = "svg-icon", r.anchor.set(0.5, 0.5), r.visible = !1, t.addChild(r);
-    const e = O({
+    const i = I({
       label: s.data.label,
-      color: s.data.labelColor ?? s.data.color,
+      color: m(s.data.labelColor ?? s.data.color, "#111827"),
       fontSize: s.data.fontSize,
       width: s.width,
       height: s.height
     });
-    t.addChild(e);
-    const i = R(s.width, s.height), a = A(t, i, !1), h = new D({
+    t.addChild(i);
+    const e = W(s.width, s.height), a = z(t, e, !1), h = new V({
       text: "",
       style: {
         fontFamily: "system-ui, sans-serif",
@@ -73,105 +74,105 @@ var j = class {
       shape: d,
       svgTransform: l,
       icon: r,
-      text: e,
+      text: i,
       animBadge: h,
       handles: a,
-      handleDefs: i,
+      handleDefs: e,
       nodeId: s.id,
-      subCanvasGlow: f
+      subCanvasGlow: c
     };
   }
-  _updateNode(s, t, l, f, d, r) {
-    const { container: e, svgTransform: i, shape: a, icon: h, text: o, animBadge: b, handles: g, subCanvasGlow: y } = s, w = t.type === "shapeSvg", u = H(t.data), m = z(t.data);
-    e.zIndex = t.zIndex ?? 0, w ? (a.parent !== i && i.addChild(a), h.parent !== i && i.addChild(h), g.parent !== i && i.addChild(g), e.position.set(t.position.x, t.position.y), e.rotation = 0, e.scale.set(1, 1), e.pivot.set(0, 0), i.position.set(t.width / 2, t.height / 2), i.pivot.set(t.width / 2, t.height / 2), i.rotation = u, i.scale.set(m.sx, m.sy)) : (a.parent !== e && e.addChildAt(a, Math.min(2, e.children.length)), h.parent !== e && e.addChild(h), g.parent !== e && e.addChild(g), i.rotation = 0, i.scale.set(1, 1), e.position.set(t.position.x, t.position.y), e.rotation = u, e.scale.set(m.sx, m.sy), u !== 0 || m.sx < 0 || m.sy < 0 ? (e.pivot.set(t.width / 2, t.height / 2), e.position.set(t.position.x + t.width / 2, t.position.y + t.height / 2)) : e.pivot.set(0, 0));
-    const S = t.type === "mediaNode", x = t.type === "animAnchor";
+  _updateNode(s, t, l, c, d, r) {
+    const { container: i, svgTransform: e, shape: a, icon: h, text: o, animBadge: b, handles: g, subCanvasGlow: y } = s, w = t.type === "shapeSvg", x = G(t.data), u = B(t.data);
+    i.zIndex = t.zIndex ?? 0, w ? (a.parent !== e && e.addChild(a), h.parent !== e && e.addChild(h), g.parent !== e && e.addChild(g), i.position.set(t.position.x, t.position.y), i.rotation = 0, i.scale.set(1, 1), i.pivot.set(0, 0), e.position.set(t.width / 2, t.height / 2), e.pivot.set(t.width / 2, t.height / 2), e.rotation = x, e.scale.set(u.sx, u.sy)) : (a.parent !== i && i.addChildAt(a, Math.min(2, i.children.length)), h.parent !== i && i.addChild(h), g.parent !== i && i.addChild(g), e.rotation = 0, e.scale.set(1, 1), i.position.set(t.position.x, t.position.y), i.rotation = x, i.scale.set(u.sx, u.sy), x !== 0 || u.sx < 0 || u.sy < 0 ? (i.pivot.set(t.width / 2, t.height / 2), i.position.set(t.position.x + t.width / 2, t.position.y + t.height / 2)) : i.pivot.set(0, 0));
+    const _ = t.type === "mediaNode", v = t.type === "animAnchor";
     if (a.clear(), a.alpha = 1, w) this._updateSvgNode(s, t, l);
-    else if (S) {
+    else if (_) {
       h.visible = !1;
-      const c = t.data.fill && t.data.fill !== "transparent" ? t.data.fill : "#ffffff", n = t.data.borderStyle === "none", p = l ? "#3b82f6" : t.data.stroke, C = l ? Math.max(t.data.strokeWidth, 2) : t.data.strokeWidth;
-      k.shapeRoundRect(a, {
+      const f = t.data.fill && t.data.fill !== "transparent" ? m(t.data.fill, "#ffffff") : "#ffffff", n = t.data.borderStyle === "none", p = l ? "#3b82f6" : m(t.data.stroke, "#374151"), k = l ? Math.max(t.data.strokeWidth, 2) : t.data.strokeWidth;
+      S.shapeRoundRect(a, {
         width: t.width,
         height: t.height,
-        fill: c,
+        fill: f,
         stroke: p,
-        strokeWidth: C,
+        strokeWidth: k,
         borderStyle: l && n ? "solid" : t.data.borderStyle,
         dashOffset: this._dynamicOffset
       });
-    } else if (x) {
+    } else if (v) {
       h.visible = !1;
-      const c = "#8b5cf6", n = r?.presentation ?? !1, p = n ? (r?.presentationAnchorVisible ?? !1) && r?.presentationAnchorId === t.id : r?.showAnchors ?? !0;
-      p && (a.alpha = n ? 0.48 : 0.9, k.shapeRoundRect(a, {
+      const f = "#8b5cf6", n = r?.presentation ?? !1, p = n ? (r?.presentationAnchorVisible ?? !1) && r?.presentationAnchorId === t.id : r?.showAnchors ?? !0;
+      p && (a.alpha = n ? 0.48 : 0.9, S.shapeRoundRect(a, {
         width: t.width,
         height: t.height,
         fill: "transparent",
-        stroke: l && !n ? "#3b82f6" : c,
+        stroke: l && !n ? "#3b82f6" : f,
         strokeWidth: l && !n ? 2.5 : 1.5,
         borderStyle: "dashed"
-      }), a.circle(0, 0, n ? 11 : 13).fill({ color: l && !n ? "#3b82f6" : c })), b.text = String(d ?? ""), b.alpha = n ? 0.7 : 1, b.visible = p, b.position.set(0, 0);
+      }), a.circle(0, 0, n ? 11 : 13).fill({ color: l && !n ? "#3b82f6" : f })), b.text = String(d ?? ""), b.alpha = n ? 0.7 : 1, b.visible = p, b.position.set(0, 0);
     } else {
       h.visible = !1;
-      const c = k[t.type] ?? k.shapeRect, n = t.data.borderStyle === "none";
-      c(a, {
+      const f = S[t.type] ?? S.shapeRect, n = t.data.borderStyle === "none";
+      f(a, {
         width: t.width,
         height: t.height,
-        fill: t.data.fill,
-        stroke: l ? "#3b82f6" : t.data.stroke,
+        fill: m(t.data.fill, "#ffffff"),
+        stroke: l ? "#3b82f6" : m(t.data.stroke, "#374151"),
         strokeWidth: l ? Math.max(t.data.strokeWidth, 2) : t.data.strokeWidth,
         borderStyle: l && n ? "solid" : t.data.borderStyle,
         dashOffset: this._dynamicOffset
       });
     }
-    if (x || (b.visible = !1), y.clear(), t.data.childCanvasId) {
-      const n = t.width + 8, p = t.height + 8, C = 0.5 + 0.3 * Math.sin(this._dynamicOffset * 8e-3);
+    if (v || (b.visible = !1), y.clear(), t.data.childCanvasId) {
+      const n = t.width + 8, p = t.height + 8, k = 0.5 + 0.3 * Math.sin(this._dynamicOffset * 8e-3);
       y.roundRect(-4, -4, n, p, 6), y.stroke({
         color: 9133302,
         width: 2.5,
-        alpha: C
+        alpha: k
       }), y.roundRect(-6, -6, n + 4, p + 4, 8), y.stroke({
         color: 9133302,
         width: 1,
-        alpha: C * 0.4
+        alpha: k * 0.4
       });
     }
-    const v = I(t.data.labelPlacement);
-    if (N(o, {
-      label: S || x ? "" : w ? T(t.data.label, v) : t.data.label,
-      color: t.data.labelColor ?? t.data.color,
+    const C = A(t.data.labelPlacement), O = t.data.labelColor ?? (w ? "theme:base-content" : t.data.color);
+    if (L(o, {
+      label: _ || v ? "" : w ? N(t.data.label, C) : t.data.label,
+      color: m(O, "#111827"),
       fontSize: t.data.fontSize,
       width: t.width,
       height: t.height
-    }), o.visible = !S && !x, t.type === "shapeCorner") {
-      const c = Math.min(t.width, t.height) * 0.4;
-      o.position.set((c + t.width) / 2, (c + t.height) / 2);
+    }), o.visible = !_ && !v, t.type === "shapeCorner") {
+      const f = Math.min(t.width, t.height) * 0.4;
+      o.position.set((f + t.width) / 2, (f + t.height) / 2);
     } else if (w) {
       const n = o.width / 2, p = o.height / 2;
-      v === "top" ? o.position.set(t.width / 2, -4 - p) : v === "bottom" ? o.position.set(t.width / 2, t.height + 4 + p) : v === "left" ? o.position.set(-4 - n, t.height / 2) : v === "right" ? o.position.set(t.width + 4 + n, t.height / 2) : o.position.set(t.width / 2, t.height / 2), o.position.x += t.data.labelOffsetX ?? 0, o.position.y += t.data.labelOffsetY ?? 0;
+      C === "top" ? o.position.set(t.width / 2, -4 - p) : C === "bottom" ? o.position.set(t.width / 2, t.height + 4 + p) : C === "left" ? o.position.set(-4 - n, t.height / 2) : C === "right" ? o.position.set(t.width + 4 + n, t.height / 2) : o.position.set(t.width / 2, t.height / 2), o.position.x += t.data.labelOffsetX ?? 0, o.position.y += t.data.labelOffsetY ?? 0;
     }
-    if (w ? (o.rotation = 0, o.scale.set(1, 1)) : (o.rotation = -u, o.scale.set(m.sx, m.sy)), g.visible = (f || l) && !(x && r?.presentation), g.visible) {
-      const c = R(t.width, t.height);
-      s.handleDefs = c, L(g, c);
+    if (w ? (o.rotation = 0, o.scale.set(1, 1)) : (o.rotation = -x, o.scale.set(u.sx, u.sy)), g.visible = (c || l) && !(v && r?.presentation), g.visible) {
+      const f = W(t.width, t.height);
+      s.handleDefs = f, H(g, f);
     }
   }
   _updateSvgNode(s, t, l) {
-    const { shape: f, icon: d } = s, { width: r, height: e, data: i } = t, a = i.iconBox ?? !1, h = i.borderStyle ?? (a ? "solid" : "none"), o = h === "none", b = Math.min(8, r * 0.12, e * 0.12);
-    i.fill && i.fill !== "transparent" && (a || !o) && f.roundRect(0, 0, r, e, b).fill({ color: i.fill }), !o && i.stroke && i.stroke !== "transparent" && i.strokeWidth > 0 && M(f, {
+    const { shape: c, icon: d } = s, { width: r, height: i, data: e } = t, a = e.iconBox ?? !1, h = e.borderStyle ?? (a ? "solid" : "none"), o = h === "none", b = Math.min(8, r * 0.12, i * 0.12);
+    e.fill && e.fill !== "transparent" && (a || !o) && c.roundRect(0, 0, r, i, b).fill({ color: m(e.fill, "#ffffff") }), !o && e.stroke && e.stroke !== "transparent" && e.strokeWidth > 0 && T(c, {
       width: r,
-      height: e,
+      height: i,
       fill: "transparent",
-      stroke: i.stroke,
-      strokeWidth: i.strokeWidth,
+      stroke: m(e.stroke, "#374151"),
+      strokeWidth: e.strokeWidth,
       borderStyle: h,
       dashOffset: this._dynamicOffset
-    }, b), l && f.roundRect(0, 0, r, e, b).stroke({
+    }, b), l && c.roundRect(0, 0, r, i, b).stroke({
       color: "#3b82f6",
-      width: Math.max(i.strokeWidth, 2)
+      width: Math.max(e.strokeWidth, 2)
     });
-    const g = i.color || "#334155", y = B(i.svgId ?? "", g);
+    const g = m(e.color, "#334155") || "#334155", y = P(e.svgId ?? "", g);
     if (y) {
       d.texture = y, d.visible = !0;
-      const w = a ? Math.min(r, e) * 0.18 : 2, u = Math.max(4, Math.min(r, e) - w * 2);
-      d.width = u, d.height = u, d.position.set(r / 2, e / 2);
+      const w = a ? Math.min(r, i) * 0.18 : 2, x = Math.max(4, Math.min(r, i) - w * 2);
+      d.width = x, d.height = x, d.position.set(r / 2, i / 2);
     } else d.visible = !1;
   }
   destroy() {
@@ -181,7 +182,7 @@ var j = class {
   }
 };
 export {
-  j as NodeRenderer
+  K as NodeRenderer
 };
 
 //# sourceMappingURL=NodeRenderer.js.map

package/dist/components/pro/Flow/nodes/NodeRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeRenderer.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/NodeRenderer.ts"],"sourcesContent":["import { Container, Graphics, Text, Sprite } from 'pixi.js';\nimport type { FlowNode } from '../types';\nimport { drawRoundRectBorder, shapeDrawers, type ShapeDrawOptions } from './shapes';\nimport { createNodeText, formatIconLabel, normalizeIconLabelPlacement, updateNodeText } from './NodeText';\nimport { getHandlePositions, createHandleGraphics, updateHandleGraphics, type HandleDef } from './NodeHandles';\nimport { getRotationRad, getFlipScale } from './nodeUtils';\nimport { getIconTexture, subscribeIconTextureReady } from './svgIconTexture';\n\nexport interface NodeContainer {\n  container: Container;\n  shape: Graphics;\n  /** Rotated/flipped visual content for SVG icon stamps. */\n  svgTransform: Container;\n  icon: Sprite;\n  text: Text;\n  /** Sequence badge shown on `animAnchor` nodes. */\n  animBadge: Text;\n  handles: Graphics;\n  handleDefs: HandleDef[];\n  nodeId: string;\n  subCanvasGlow: Graphics;\n}\n\n/**\n * Manages PixiJS display objects for all nodes on the current canvas.\n * Syncs from FlowNode[] data → PixiJS scene graph.\n */\nexport class NodeRenderer {\n  private world: Container;\n  private nodeLayer: Container;\n  private nodes = new Map<string, NodeContainer>();\n  private _dynamicOffset = 0;\n  private _unsubscribeTextureReady: () => void;\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.nodeLayer = new Container({ label: 'nodes', sortableChildren: true });\n    this.world.addChild(this.nodeLayer);\n    this._unsubscribeTextureReady = subscribeIconTextureReady(() => this._resync?.());\n  }\n\n  private _resync: (() => void) | null = null;\n\n  /**\n   * Reconcile PixiJS containers with the current node data.\n   * Creates new containers, updates existing, removes stale.\n   */\n  sync(\n    flowNodes: FlowNode[],\n    selectedIds: Set<string>,\n    hoveredId: string | null,\n    animSeqMap?: Map<string, number>,\n    options?: {\n      showAnchors?: boolean;\n      presentation?: boolean;\n      presentationAnchorId?: string;\n      presentationAnchorVisible?: boolean;\n    },\n  ): void {\n    const seen = new Set<string>();\n    this._resync = () => this.sync(flowNodes, selectedIds, hoveredId, animSeqMap, options);\n\n    // Animation-anchor display sequence (1-based). When a global map is\n    // provided (document-wide, shared across sub-canvases) it is used directly;\n    // otherwise derive a per-canvas order from stable creation index.\n    const seqOf = animSeqMap ?? (() => {\n      const anchors = flowNodes\n        .filter((n) => n.type === 'animAnchor')\n        .sort((a, b) => (a.data.animIndex ?? 0) - (b.data.animIndex ?? 0));\n      const m = new Map<string, number>();\n      anchors.forEach((n, i) => m.set(n.id, i + 1));\n      return m;\n    })();\n\n    for (const node of flowNodes) {\n      seen.add(node.id);\n      let nc = this.nodes.get(node.id);\n      if (!nc) {\n        nc = this._createNode(node);\n        this.nodes.set(node.id, nc);\n      }\n      this._updateNode(\n        nc,\n        node,\n        selectedIds.has(node.id),\n        hoveredId === node.id,\n        seqOf.get(node.id),\n        options,\n      );\n    }\n\n    // Remove nodes no longer in data\n    for (const [id, nc] of this.nodes) {\n      if (!seen.has(id)) {\n        this.nodeLayer.removeChild(nc.container);\n        nc.container.destroy({ children: true });\n        this.nodes.delete(id);\n      }\n    }\n  }\n\n  getNodeContainer(id: string): NodeContainer | undefined {\n    return this.nodes.get(id);\n  }\n\n  getAllNodeContainers(): NodeContainer[] {\n    return [...this.nodes.values()];\n  }\n\n  private _createNode(node: FlowNode): NodeContainer {\n    const container = new Container({ label: `node-${node.id}` });\n    container.eventMode = 'static';\n    container.cursor = 'pointer';\n\n    const svgTransform = new Container({ label: 'svg-transform' });\n    container.addChild(svgTransform);\n\n    const subCanvasGlow = new Graphics();\n    subCanvasGlow.label = 'sub-canvas-glow';\n    container.addChild(subCanvasGlow);\n\n    const shape = new Graphics();\n    shape.label = 'shape';\n    container.addChild(shape);\n\n    const icon = new Sprite();\n    icon.label = 'svg-icon';\n    icon.anchor.set(0.5, 0.5);\n    icon.visible = false;\n    container.addChild(icon);\n\n    const text = createNodeText({\n      label: node.data.label,\n      color: node.data.labelColor ?? node.data.color,\n      fontSize: node.data.fontSize,\n      width: node.width,\n      height: node.height,\n    });\n    container.addChild(text);\n\n    const handleDefs = getHandlePositions(node.width, node.height);\n    const handles = createHandleGraphics(container, handleDefs, false);\n\n    // Sequence badge for animation anchors (top-left corner).\n    const animBadge = new Text({\n      text: '',\n      style: { fontFamily: 'system-ui, sans-serif', fontSize: 13, fill: '#ffffff', fontWeight: '700' },\n    });\n    animBadge.label = 'anim-badge';\n    animBadge.anchor.set(0.5, 0.5);\n    animBadge.visible = false;\n    container.addChild(animBadge);\n\n    this.nodeLayer.addChild(container);\n\n    return { container, shape, svgTransform, icon, text, animBadge, handles, handleDefs, nodeId: node.id, subCanvasGlow };\n  }\n\n  private _updateNode(\n    nc: NodeContainer,\n    node: FlowNode,\n    selected: boolean,\n    hovered: boolean,\n    animSeq?: number,\n    options?: {\n      showAnchors?: boolean;\n      presentation?: boolean;\n      presentationAnchorId?: string;\n      presentationAnchorVisible?: boolean;\n    },\n  ): void {\n    const { container, svgTransform, shape, icon, text, animBadge, handles, subCanvasGlow } = nc;\n\n    const isSvg = node.type === 'shapeSvg';\n    const rad = getRotationRad(node.data);\n    const flip = getFlipScale(node.data);\n\n    container.zIndex = node.zIndex ?? 0;\n    if (isSvg) {\n      // Keep the label in the untransformed root. Only the icon box, icon and\n      // connection handles rotate/flip around the node center.\n      if (shape.parent !== svgTransform) svgTransform.addChild(shape);\n      if (icon.parent !== svgTransform) svgTransform.addChild(icon);\n      if (handles.parent !== svgTransform) svgTransform.addChild(handles);\n      container.position.set(node.position.x, node.position.y);\n      container.rotation = 0;\n      container.scale.set(1, 1);\n      container.pivot.set(0, 0);\n      svgTransform.position.set(node.width / 2, node.height / 2);\n      svgTransform.pivot.set(node.width / 2, node.height / 2);\n      svgTransform.rotation = rad;\n      svgTransform.scale.set(flip.sx, flip.sy);\n    } else {\n      if (shape.parent !== container) container.addChildAt(shape, Math.min(2, container.children.length));\n      if (icon.parent !== container) container.addChild(icon);\n      if (handles.parent !== container) container.addChild(handles);\n      svgTransform.rotation = 0;\n      svgTransform.scale.set(1, 1);\n      container.position.set(node.position.x, node.position.y);\n      container.rotation = rad;\n      container.scale.set(flip.sx, flip.sy);\n      if (rad !== 0 || flip.sx < 0 || flip.sy < 0) {\n        container.pivot.set(node.width / 2, node.height / 2);\n        container.position.set(node.position.x + node.width / 2, node.position.y + node.height / 2);\n      } else {\n        container.pivot.set(0, 0);\n      }\n    }\n\n    const isMedia = node.type === 'mediaNode';\n    const isAnchor = node.type === 'animAnchor';\n\n    // Redraw shape\n    shape.clear();\n    shape.alpha = 1;\n    if (isSvg) {\n      this._updateSvgNode(nc, node, selected);\n    } else if (isMedia) {\n      // Media nodes render their content in a synced DOM overlay; PixiJS only\n      // draws the frame (background + border) beneath the overlay.\n      icon.visible = false;\n      const r = 6;\n      const fill = node.data.fill && node.data.fill !== 'transparent' ? node.data.fill : '#ffffff';\n      const borderHidden = node.data.borderStyle === 'none';\n      const strokeColor = selected ? '#3b82f6' : node.data.stroke;\n      const strokeW = selected ? Math.max(node.data.strokeWidth, 2) : node.data.strokeWidth;\n      shapeDrawers.shapeRoundRect(shape, {\n        width: node.width,\n        height: node.height,\n        fill,\n        stroke: strokeColor,\n        strokeWidth: strokeW,\n        borderStyle: selected && borderHidden ? 'solid' : node.data.borderStyle,\n        dashOffset: this._dynamicOffset,\n      });\n    } else if (isAnchor) {\n      // Animation anchors are globally visible/hidden in editing mode. During\n      // presentation the current frame remains as a subtle dashed overlay.\n      icon.visible = false;\n      const accent = '#8b5cf6';\n      const presentation = options?.presentation ?? false;\n      const anchorVisible = presentation\n        ? (options?.presentationAnchorVisible ?? false) && options?.presentationAnchorId === node.id\n        : (options?.showAnchors ?? true);\n      if (anchorVisible) {\n        shape.alpha = presentation ? 0.48 : 0.9;\n        shapeDrawers.shapeRoundRect(shape, {\n          width: node.width,\n          height: node.height,\n          fill: 'transparent',\n          stroke: selected && !presentation ? '#3b82f6' : accent,\n          strokeWidth: selected && !presentation ? 2.5 : 1.5,\n          borderStyle: 'dashed',\n        });\n        shape.circle(0, 0, presentation ? 11 : 13).fill({\n          color: selected && !presentation ? '#3b82f6' : accent,\n        });\n      }\n      animBadge.text = String(animSeq ?? '');\n      animBadge.alpha = presentation ? 0.7 : 1;\n      animBadge.visible = anchorVisible;\n      animBadge.position.set(0, 0);\n    } else {\n      icon.visible = false;\n      const drawFn = shapeDrawers[node.type] ?? shapeDrawers.shapeRect;\n      const borderHidden = node.data.borderStyle === 'none';\n      const opts: ShapeDrawOptions = {\n        width: node.width,\n        height: node.height,\n        fill: node.data.fill,\n        stroke: selected ? '#3b82f6' : node.data.stroke,\n        strokeWidth: selected ? Math.max(node.data.strokeWidth, 2) : node.data.strokeWidth,\n        borderStyle: (selected && borderHidden) ? 'solid' : node.data.borderStyle,\n        dashOffset: this._dynamicOffset,\n      };\n      drawFn(shape, opts);\n    }\n    if (!isAnchor) animBadge.visible = false;\n\n    // Sub-canvas glow indicator\n    subCanvasGlow.clear();\n    if (node.data.childCanvasId) {\n      const pad = 4;\n      const w = node.width + pad * 2;\n      const h = node.height + pad * 2;\n      const pulse = 0.5 + 0.3 * Math.sin(this._dynamicOffset * 0.008);\n      subCanvasGlow.roundRect(-pad, -pad, w, h, 6);\n      subCanvasGlow.stroke({ color: 0x8b5cf6, width: 2.5, alpha: pulse });\n      subCanvasGlow.roundRect(-pad - 2, -pad - 2, w + 4, h + 4, 8);\n      subCanvasGlow.stroke({ color: 0x8b5cf6, width: 1, alpha: pulse * 0.4 });\n    }\n\n    // Text: counter-rotate and counter-flip so it stays upright\n    const iconLabelPlacement = normalizeIconLabelPlacement(node.data.labelPlacement);\n    updateNodeText(text, {\n      label: isMedia || isAnchor\n        ? ''\n        : isSvg\n          ? formatIconLabel(node.data.label, iconLabelPlacement)\n          : node.data.label,\n      color: node.data.labelColor ?? node.data.color,\n      fontSize: node.data.fontSize,\n      width: node.width,\n      height: node.height,\n    });\n    text.visible = !isMedia && !isAnchor;\n\n    if (node.type === 'shapeCorner') {\n      const half = Math.min(node.width, node.height) * 0.4;\n      text.position.set((half + node.width) / 2, (half + node.height) / 2);\n    } else if (isSvg) {\n      const gap = 4;\n      const halfTextWidth = text.width / 2;\n      const halfTextHeight = text.height / 2;\n      if (iconLabelPlacement === 'top') {\n        text.position.set(node.width / 2, -gap - halfTextHeight);\n      } else if (iconLabelPlacement === 'bottom') {\n        text.position.set(node.width / 2, node.height + gap + halfTextHeight);\n      } else if (iconLabelPlacement === 'left') {\n        text.position.set(-gap - halfTextWidth, node.height / 2);\n      } else if (iconLabelPlacement === 'right') {\n        text.position.set(node.width + gap + halfTextWidth, node.height / 2);\n      } else {\n        text.position.set(node.width / 2, node.height / 2);\n      }\n      text.position.x += node.data.labelOffsetX ?? 0;\n      text.position.y += node.data.labelOffsetY ?? 0;\n    }\n\n    if (isSvg) {\n      text.rotation = 0;\n      text.scale.set(1, 1);\n    } else {\n      text.rotation = -rad;\n      text.scale.set(flip.sx, flip.sy);\n    }\n\n    // Handles visibility\n    handles.visible = (hovered || selected) && !(isAnchor && options?.presentation);\n    if (handles.visible) {\n      const defs = getHandlePositions(node.width, node.height);\n      nc.handleDefs = defs;\n      updateHandleGraphics(handles, defs);\n    }\n  }\n\n  /**\n   * Draw an SVG-stamp node: optional bordered box + centered icon sprite.\n   * The icon texture is rasterized lazily; a redraw is requested when ready.\n   */\n  private _updateSvgNode(nc: NodeContainer, node: FlowNode, selected: boolean): void {\n    const { shape, icon } = nc;\n    const { width, height, data } = node;\n\n    // Render the configured icon box independently from the solid selection\n    // outline. Otherwise selecting an icon makes dotted/dashed borders appear\n    // solid and hides whether the chosen border style is actually applied.\n    const showBox = data.iconBox ?? false;\n    const borderStyle = data.borderStyle ?? (showBox ? 'solid' : 'none');\n    const borderHidden = borderStyle === 'none';\n    const r = Math.min(8, width * 0.12, height * 0.12);\n    if (data.fill && data.fill !== 'transparent' && (showBox || !borderHidden)) {\n      shape.roundRect(0, 0, width, height, r).fill({ color: data.fill });\n    }\n    if (!borderHidden && data.stroke && data.stroke !== 'transparent' && data.strokeWidth > 0) {\n      drawRoundRectBorder(shape, {\n        width,\n        height,\n        fill: 'transparent',\n        stroke: data.stroke,\n        strokeWidth: data.strokeWidth,\n        borderStyle,\n        dashOffset: this._dynamicOffset,\n      }, r);\n    }\n    if (selected) {\n      shape.roundRect(0, 0, width, height, r).stroke({\n        color: '#3b82f6',\n        width: Math.max(data.strokeWidth, 2),\n      });\n    }\n\n    // Icon sprite: fit within the box with padding, centered. The texture is\n    // rasterized lazily; because the ticker re-runs sync every frame, it will\n    // be picked up automatically once cached.\n    const iconColor = data.color || '#334155';\n    const tex = getIconTexture(data.svgId ?? '', iconColor);\n    if (tex) {\n      icon.texture = tex;\n      icon.visible = true;\n      const pad = showBox ? Math.min(width, height) * 0.18 : 2;\n      const box = Math.max(4, Math.min(width, height) - pad * 2);\n      icon.width = box;\n      icon.height = box;\n      icon.position.set(width / 2, height / 2);\n    } else {\n      icon.visible = false;\n    }\n  }\n\n  destroy(): void {\n    this._unsubscribeTextureReady();\n    this._resync = null;\n    for (const [, nc] of this.nodes) {\n      nc.container.destroy({ children: true });\n    }\n    this.nodes.clear();\n    this.nodeLayer.destroy({ children: true });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"NodeRenderer.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/NodeRenderer.ts"],"sourcesContent":["import { Container, Graphics, Text, Sprite } from 'pixi.js';\nimport type { FlowNode } from '../types';\nimport { drawRoundRectBorder, shapeDrawers, type ShapeDrawOptions } from './shapes';\nimport { createNodeText, formatIconLabel, normalizeIconLabelPlacement, updateNodeText } from './NodeText';\nimport { getHandlePositions, createHandleGraphics, updateHandleGraphics, type HandleDef } from './NodeHandles';\nimport { getRotationRad, getFlipScale } from './nodeUtils';\nimport { getIconTexture, subscribeIconTextureReady } from './svgIconTexture';\nimport { resolveThemeColor } from '../utils/themeColor';\n\nexport interface NodeContainer {\n  container: Container;\n  shape: Graphics;\n  /** Rotated/flipped visual content for SVG icon stamps. */\n  svgTransform: Container;\n  icon: Sprite;\n  text: Text;\n  /** Sequence badge shown on `animAnchor` nodes. */\n  animBadge: Text;\n  handles: Graphics;\n  handleDefs: HandleDef[];\n  nodeId: string;\n  subCanvasGlow: Graphics;\n}\n\n/**\n * Manages PixiJS display objects for all nodes on the current canvas.\n * Syncs from FlowNode[] data → PixiJS scene graph.\n */\nexport class NodeRenderer {\n  private world: Container;\n  private nodeLayer: Container;\n  private nodes = new Map<string, NodeContainer>();\n  private _dynamicOffset = 0;\n  private _unsubscribeTextureReady: () => void;\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.nodeLayer = new Container({ label: 'nodes', sortableChildren: true });\n    this.world.addChild(this.nodeLayer);\n    this._unsubscribeTextureReady = subscribeIconTextureReady(() => this._resync?.());\n  }\n\n  private _resync: (() => void) | null = null;\n\n  /**\n   * Reconcile PixiJS containers with the current node data.\n   * Creates new containers, updates existing, removes stale.\n   */\n  sync(\n    flowNodes: FlowNode[],\n    selectedIds: Set<string>,\n    hoveredId: string | null,\n    animSeqMap?: Map<string, number>,\n    options?: {\n      showAnchors?: boolean;\n      presentation?: boolean;\n      presentationAnchorId?: string;\n      presentationAnchorVisible?: boolean;\n    },\n  ): void {\n    const seen = new Set<string>();\n    this._resync = () => this.sync(flowNodes, selectedIds, hoveredId, animSeqMap, options);\n\n    // Animation-anchor display sequence (1-based). When a global map is\n    // provided (document-wide, shared across sub-canvases) it is used directly;\n    // otherwise derive a per-canvas order from stable creation index.\n    const seqOf = animSeqMap ?? (() => {\n      const anchors = flowNodes\n        .filter((n) => n.type === 'animAnchor')\n        .sort((a, b) => (a.data.animIndex ?? 0) - (b.data.animIndex ?? 0));\n      const m = new Map<string, number>();\n      anchors.forEach((n, i) => m.set(n.id, i + 1));\n      return m;\n    })();\n\n    for (const node of flowNodes) {\n      seen.add(node.id);\n      let nc = this.nodes.get(node.id);\n      if (!nc) {\n        nc = this._createNode(node);\n        this.nodes.set(node.id, nc);\n      }\n      this._updateNode(\n        nc,\n        node,\n        selectedIds.has(node.id),\n        hoveredId === node.id,\n        seqOf.get(node.id),\n        options,\n      );\n    }\n\n    // Remove nodes no longer in data\n    for (const [id, nc] of this.nodes) {\n      if (!seen.has(id)) {\n        this.nodeLayer.removeChild(nc.container);\n        nc.container.destroy({ children: true });\n        this.nodes.delete(id);\n      }\n    }\n  }\n\n  getNodeContainer(id: string): NodeContainer | undefined {\n    return this.nodes.get(id);\n  }\n\n  getAllNodeContainers(): NodeContainer[] {\n    return [...this.nodes.values()];\n  }\n\n  private _createNode(node: FlowNode): NodeContainer {\n    const container = new Container({ label: `node-${node.id}` });\n    container.eventMode = 'static';\n    container.cursor = 'pointer';\n\n    const svgTransform = new Container({ label: 'svg-transform' });\n    container.addChild(svgTransform);\n\n    const subCanvasGlow = new Graphics();\n    subCanvasGlow.label = 'sub-canvas-glow';\n    container.addChild(subCanvasGlow);\n\n    const shape = new Graphics();\n    shape.label = 'shape';\n    container.addChild(shape);\n\n    const icon = new Sprite();\n    icon.label = 'svg-icon';\n    icon.anchor.set(0.5, 0.5);\n    icon.visible = false;\n    container.addChild(icon);\n\n    const text = createNodeText({\n      label: node.data.label,\n      color: resolveThemeColor(node.data.labelColor ?? node.data.color, '#111827'),\n      fontSize: node.data.fontSize,\n      width: node.width,\n      height: node.height,\n    });\n    container.addChild(text);\n\n    const handleDefs = getHandlePositions(node.width, node.height);\n    const handles = createHandleGraphics(container, handleDefs, false);\n\n    // Sequence badge for animation anchors (top-left corner).\n    const animBadge = new Text({\n      text: '',\n      style: { fontFamily: 'system-ui, sans-serif', fontSize: 13, fill: '#ffffff', fontWeight: '700' },\n    });\n    animBadge.label = 'anim-badge';\n    animBadge.anchor.set(0.5, 0.5);\n    animBadge.visible = false;\n    container.addChild(animBadge);\n\n    this.nodeLayer.addChild(container);\n\n    return { container, shape, svgTransform, icon, text, animBadge, handles, handleDefs, nodeId: node.id, subCanvasGlow };\n  }\n\n  private _updateNode(\n    nc: NodeContainer,\n    node: FlowNode,\n    selected: boolean,\n    hovered: boolean,\n    animSeq?: number,\n    options?: {\n      showAnchors?: boolean;\n      presentation?: boolean;\n      presentationAnchorId?: string;\n      presentationAnchorVisible?: boolean;\n    },\n  ): void {\n    const { container, svgTransform, shape, icon, text, animBadge, handles, subCanvasGlow } = nc;\n\n    const isSvg = node.type === 'shapeSvg';\n    const rad = getRotationRad(node.data);\n    const flip = getFlipScale(node.data);\n\n    container.zIndex = node.zIndex ?? 0;\n    if (isSvg) {\n      // Keep the label in the untransformed root. Only the icon box, icon and\n      // connection handles rotate/flip around the node center.\n      if (shape.parent !== svgTransform) svgTransform.addChild(shape);\n      if (icon.parent !== svgTransform) svgTransform.addChild(icon);\n      if (handles.parent !== svgTransform) svgTransform.addChild(handles);\n      container.position.set(node.position.x, node.position.y);\n      container.rotation = 0;\n      container.scale.set(1, 1);\n      container.pivot.set(0, 0);\n      svgTransform.position.set(node.width / 2, node.height / 2);\n      svgTransform.pivot.set(node.width / 2, node.height / 2);\n      svgTransform.rotation = rad;\n      svgTransform.scale.set(flip.sx, flip.sy);\n    } else {\n      if (shape.parent !== container) container.addChildAt(shape, Math.min(2, container.children.length));\n      if (icon.parent !== container) container.addChild(icon);\n      if (handles.parent !== container) container.addChild(handles);\n      svgTransform.rotation = 0;\n      svgTransform.scale.set(1, 1);\n      container.position.set(node.position.x, node.position.y);\n      container.rotation = rad;\n      container.scale.set(flip.sx, flip.sy);\n      if (rad !== 0 || flip.sx < 0 || flip.sy < 0) {\n        container.pivot.set(node.width / 2, node.height / 2);\n        container.position.set(node.position.x + node.width / 2, node.position.y + node.height / 2);\n      } else {\n        container.pivot.set(0, 0);\n      }\n    }\n\n    const isMedia = node.type === 'mediaNode';\n    const isAnchor = node.type === 'animAnchor';\n\n    // Redraw shape\n    shape.clear();\n    shape.alpha = 1;\n    if (isSvg) {\n      this._updateSvgNode(nc, node, selected);\n    } else if (isMedia) {\n      // Media nodes render their content in a synced DOM overlay; PixiJS only\n      // draws the frame (background + border) beneath the overlay.\n      icon.visible = false;\n      const r = 6;\n      const fill = node.data.fill && node.data.fill !== 'transparent' ? resolveThemeColor(node.data.fill, '#ffffff') : '#ffffff';\n      const borderHidden = node.data.borderStyle === 'none';\n      const strokeColor = selected ? '#3b82f6' : resolveThemeColor(node.data.stroke, '#374151');\n      const strokeW = selected ? Math.max(node.data.strokeWidth, 2) : node.data.strokeWidth;\n      shapeDrawers.shapeRoundRect(shape, {\n        width: node.width,\n        height: node.height,\n        fill,\n        stroke: strokeColor,\n        strokeWidth: strokeW,\n        borderStyle: selected && borderHidden ? 'solid' : node.data.borderStyle,\n        dashOffset: this._dynamicOffset,\n      });\n    } else if (isAnchor) {\n      // Animation anchors are globally visible/hidden in editing mode. During\n      // presentation the current frame remains as a subtle dashed overlay.\n      icon.visible = false;\n      const accent = '#8b5cf6';\n      const presentation = options?.presentation ?? false;\n      const anchorVisible = presentation\n        ? (options?.presentationAnchorVisible ?? false) && options?.presentationAnchorId === node.id\n        : (options?.showAnchors ?? true);\n      if (anchorVisible) {\n        shape.alpha = presentation ? 0.48 : 0.9;\n        shapeDrawers.shapeRoundRect(shape, {\n          width: node.width,\n          height: node.height,\n          fill: 'transparent',\n          stroke: selected && !presentation ? '#3b82f6' : accent,\n          strokeWidth: selected && !presentation ? 2.5 : 1.5,\n          borderStyle: 'dashed',\n        });\n        shape.circle(0, 0, presentation ? 11 : 13).fill({\n          color: selected && !presentation ? '#3b82f6' : accent,\n        });\n      }\n      animBadge.text = String(animSeq ?? '');\n      animBadge.alpha = presentation ? 0.7 : 1;\n      animBadge.visible = anchorVisible;\n      animBadge.position.set(0, 0);\n    } else {\n      icon.visible = false;\n      const drawFn = shapeDrawers[node.type] ?? shapeDrawers.shapeRect;\n      const borderHidden = node.data.borderStyle === 'none';\n      const opts: ShapeDrawOptions = {\n        width: node.width,\n        height: node.height,\n        fill: resolveThemeColor(node.data.fill, '#ffffff'),\n        stroke: selected ? '#3b82f6' : resolveThemeColor(node.data.stroke, '#374151'),\n        strokeWidth: selected ? Math.max(node.data.strokeWidth, 2) : node.data.strokeWidth,\n        borderStyle: (selected && borderHidden) ? 'solid' : node.data.borderStyle,\n        dashOffset: this._dynamicOffset,\n      };\n      drawFn(shape, opts);\n    }\n    if (!isAnchor) animBadge.visible = false;\n\n    // Sub-canvas glow indicator\n    subCanvasGlow.clear();\n    if (node.data.childCanvasId) {\n      const pad = 4;\n      const w = node.width + pad * 2;\n      const h = node.height + pad * 2;\n      const pulse = 0.5 + 0.3 * Math.sin(this._dynamicOffset * 0.008);\n      subCanvasGlow.roundRect(-pad, -pad, w, h, 6);\n      subCanvasGlow.stroke({ color: 0x8b5cf6, width: 2.5, alpha: pulse });\n      subCanvasGlow.roundRect(-pad - 2, -pad - 2, w + 4, h + 4, 8);\n      subCanvasGlow.stroke({ color: 0x8b5cf6, width: 1, alpha: pulse * 0.4 });\n    }\n\n    // Text: counter-rotate and counter-flip so it stays upright\n    const iconLabelPlacement = normalizeIconLabelPlacement(node.data.labelPlacement);\n    // SVG-icon labels default to the theme font color (so they read on any\n    // theme) even when the icon body uses a brand color; other node types fall\n    // back to the node's own text color.\n    const labelColor = node.data.labelColor\n      ?? (isSvg ? 'theme:base-content' : node.data.color);\n    updateNodeText(text, {\n      label: isMedia || isAnchor\n        ? ''\n        : isSvg\n          ? formatIconLabel(node.data.label, iconLabelPlacement)\n          : node.data.label,\n      color: resolveThemeColor(labelColor, '#111827'),\n      fontSize: node.data.fontSize,\n      width: node.width,\n      height: node.height,\n    });\n    text.visible = !isMedia && !isAnchor;\n\n    if (node.type === 'shapeCorner') {\n      const half = Math.min(node.width, node.height) * 0.4;\n      text.position.set((half + node.width) / 2, (half + node.height) / 2);\n    } else if (isSvg) {\n      const gap = 4;\n      const halfTextWidth = text.width / 2;\n      const halfTextHeight = text.height / 2;\n      if (iconLabelPlacement === 'top') {\n        text.position.set(node.width / 2, -gap - halfTextHeight);\n      } else if (iconLabelPlacement === 'bottom') {\n        text.position.set(node.width / 2, node.height + gap + halfTextHeight);\n      } else if (iconLabelPlacement === 'left') {\n        text.position.set(-gap - halfTextWidth, node.height / 2);\n      } else if (iconLabelPlacement === 'right') {\n        text.position.set(node.width + gap + halfTextWidth, node.height / 2);\n      } else {\n        text.position.set(node.width / 2, node.height / 2);\n      }\n      text.position.x += node.data.labelOffsetX ?? 0;\n      text.position.y += node.data.labelOffsetY ?? 0;\n    }\n\n    if (isSvg) {\n      text.rotation = 0;\n      text.scale.set(1, 1);\n    } else {\n      text.rotation = -rad;\n      text.scale.set(flip.sx, flip.sy);\n    }\n\n    // Handles visibility\n    handles.visible = (hovered || selected) && !(isAnchor && options?.presentation);\n    if (handles.visible) {\n      const defs = getHandlePositions(node.width, node.height);\n      nc.handleDefs = defs;\n      updateHandleGraphics(handles, defs);\n    }\n  }\n\n  /**\n   * Draw an SVG-stamp node: optional bordered box + centered icon sprite.\n   * The icon texture is rasterized lazily; a redraw is requested when ready.\n   */\n  private _updateSvgNode(nc: NodeContainer, node: FlowNode, selected: boolean): void {\n    const { shape, icon } = nc;\n    const { width, height, data } = node;\n\n    // Render the configured icon box independently from the solid selection\n    // outline. Otherwise selecting an icon makes dotted/dashed borders appear\n    // solid and hides whether the chosen border style is actually applied.\n    const showBox = data.iconBox ?? false;\n    const borderStyle = data.borderStyle ?? (showBox ? 'solid' : 'none');\n    const borderHidden = borderStyle === 'none';\n    const r = Math.min(8, width * 0.12, height * 0.12);\n    if (data.fill && data.fill !== 'transparent' && (showBox || !borderHidden)) {\n      shape.roundRect(0, 0, width, height, r).fill({ color: resolveThemeColor(data.fill, '#ffffff') });\n    }\n    if (!borderHidden && data.stroke && data.stroke !== 'transparent' && data.strokeWidth > 0) {\n      drawRoundRectBorder(shape, {\n        width,\n        height,\n        fill: 'transparent',\n        stroke: resolveThemeColor(data.stroke, '#374151'),\n        strokeWidth: data.strokeWidth,\n        borderStyle,\n        dashOffset: this._dynamicOffset,\n      }, r);\n    }\n    if (selected) {\n      shape.roundRect(0, 0, width, height, r).stroke({\n        color: '#3b82f6',\n        width: Math.max(data.strokeWidth, 2),\n      });\n    }\n\n    // Icon sprite: fit within the box with padding, centered. The texture is\n    // rasterized lazily; because the ticker re-runs sync every frame, it will\n    // be picked up automatically once cached.\n    const iconColor = resolveThemeColor(data.color, '#334155') || '#334155';\n    const tex = getIconTexture(data.svgId ?? '', iconColor);\n    if (tex) {\n      icon.texture = tex;\n      icon.visible = true;\n      const pad = showBox ? Math.min(width, height) * 0.18 : 2;\n      const box = Math.max(4, Math.min(width, height) - pad * 2);\n      icon.width = box;\n      icon.height = box;\n      icon.position.set(width / 2, height / 2);\n    } else {\n      icon.visible = false;\n    }\n  }\n\n  destroy(): void {\n    this._unsubscribeTextureReady();\n    this._resync = null;\n    for (const [, nc] of this.nodes) {\n      nc.container.destroy({ children: true });\n    }\n    this.nodes.clear();\n    this.nodeLayer.destroy({ children: true });\n  }\n}\n"],"mappings":"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"}

package/dist/components/pro/Flow/nodes/aiClient.d.ts

@@ -12,3 +12,25 @@ export interface AIChatMessage {
     content: string;
 }
 export declare function streamAIChat(config: FlowAIConfig, messages: AIChatMessage[], signal: AbortSignal): AsyncIterable<string>;
+/**
+ * Non-streaming completion used by the AI flow generator. Accepts an optional
+ * image (data URL) for "reconstruct this diagram" requests. Returns the full
+ * assistant text.
+ */
+export declare function completeAIChat(config: FlowAIConfig, userText: string, options?: {
+    imageDataUrl?: string;
+    systemPrompt?: string;
+    signal?: AbortSignal;
+}): Promise<string>;
+/**
+ * Streaming variant of `completeAIChat`: same multimodal request shape
+ * (optional image + system prompt override), but the reply is consumed as SSE
+ * deltas. `onDelta` fires with the accumulated text after every chunk so
+ * callers can render the response live. Returns the full assistant text.
+ */
+export declare function completeAIChatStream(config: FlowAIConfig, userText: string, options?: {
+    imageDataUrl?: string;
+    systemPrompt?: string;
+    signal?: AbortSignal;
+    onDelta?: (accumulated: string) => void;
+}): Promise<string>;