dishui 0.0.46 → 0.0.48

package/dist/components/pro/Flow/panels/OutlinePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"OutlinePanel.js","names":[],"sources":["../../../../../src/components/pro/Flow/panels/OutlinePanel.tsx"],"sourcesContent":["import React, { useMemo, useCallback, useRef, useEffect } from 'react';\nimport { Tree, type TreeNode } from '../../../Tree';\nimport { useFlowUI } from '../context/FlowUIContext';\nimport { useFlowContext } from '../context/FlowContext';\nimport { useDraggablePanel } from '../hooks/useDraggablePanel';\nimport { useResizablePanel } from '../hooks/useResizablePanel';\nimport { PaletteThumbnail } from './ShapePalette';\nimport { buildSvgMarkup } from '../nodes/svgIcons';\nimport type { FlowNode, FlowLine, FlowDocument, FlowCanvasData } from '../types';\n\nconst SUB_CANVAS_ICON = '⧉';\n\nfunction OutlineNodeIcon({ node }: { node: FlowNode }) {\n  if (node.data.childCanvasId) return <span style={{ fontSize: 15 }}>{SUB_CANVAS_ICON}</span>;\n  if (node.type === 'shapeSvg' && node.data.svgId) {\n    const markup = buildSvgMarkup(node.data.svgId, node.data.color || '#475569');\n    return markup ? (\n      <img\n        src={`data:image/svg+xml;utf8,${encodeURIComponent(markup)}`}\n        width={24}\n        height={20}\n        alt=\"\"\n        style={{ display: 'block', objectFit: 'contain' }}\n      />\n    ) : null;\n  }\n  if (node.type === 'mediaNode') {\n    const text = node.data.mediaKind === 'markdown' ? 'M↓'\n      : node.data.mediaKind === 'html' ? '</>'\n        : node.data.mediaKind === 'mermaid' ? '⎇'\n          : node.data.mediaKind === 'math' ? '√x'\n            : node.data.mediaKind === 'image' ? 'IMG'\n              : node.data.mediaKind === 'model3d' ? '3D'\n                : 'AI';\n    return <span style={{ width: 24, textAlign: 'center', fontSize: 10, fontWeight: 700 }}>{text}</span>;\n  }\n  return <PaletteThumbnail type={node.type} />;\n}\n\nfunction buildNodeTree(nodes: FlowNode[], lines: FlowLine[], doc: FlowDocument): { nodeTree: TreeNode[]; assignedLineIds: Set<string> } {\n  const childNodesOf = new Map<string, FlowNode[]>();\n  const childLinesOf = new Map<string, FlowLine[]>();\n  const assignedNodes = new Set<string>();\n  const assignedLineIds = new Set<string>();\n\n  for (const n of nodes) {\n    if (n.parentId) {\n      const list = childNodesOf.get(n.parentId) ?? [];\n      list.push(n);\n      childNodesOf.set(n.parentId, list);\n      assignedNodes.add(n.id);\n    }\n  }\n  for (const l of lines) {\n    if (l.parentId) {\n      const list = childLinesOf.get(l.parentId) ?? [];\n      list.push(l);\n      childLinesOf.set(l.parentId, list);\n      assignedLineIds.add(l.id);\n    }\n  }\n\n  // Spatial containment only for geometryGroup\n  const geoGroups = nodes.filter(n => n.type === 'geometryGroup');\n  for (const g of geoGroups) {\n    const gx = g.position.x, gy = g.position.y;\n    const gw = g.width, gh = g.height;\n    for (const n of nodes) {\n      if (n.id === g.id || assignedNodes.has(n.id)) continue;\n      if (n.position.x >= gx && n.position.y >= gy\n        && n.position.x + n.width <= gx + gw\n        && n.position.y + n.height <= gy + gh) {\n        const list = childNodesOf.get(g.id) ?? [];\n        list.push(n);\n        childNodesOf.set(g.id, list);\n        assignedNodes.add(n.id);\n      }\n    }\n    for (const l of lines) {\n      if (assignedLineIds.has(l.id)) continue;\n      if (l.points.length > 0 && l.points.every(p =>\n        p.x >= gx && p.x <= gx + gw && p.y >= gy && p.y <= gy + gh\n      )) {\n        const list = childLinesOf.get(g.id) ?? [];\n        list.push(l);\n        childLinesOf.set(g.id, list);\n        assignedLineIds.add(l.id);\n      }\n    }\n  }\n\n  const roots = nodes.filter(n => !assignedNodes.has(n.id));\n\n  const lineToTree = (l: FlowLine): TreeNode => ({\n    id: l.id,\n    label: `${l.type} line`,\n    icon: '〰',\n  });\n\n  const toTreeNode = (n: FlowNode): TreeNode => {\n    const hasSubCanvas = !!n.data.childCanvasId;\n    const icon = <OutlineNodeIcon node={n} />;\n    const kidNodes = childNodesOf.get(n.id);\n    const kidLines = childLinesOf.get(n.id);\n    const item: TreeNode = {\n      id: n.id,\n      label: n.data.label || n.type,\n      icon,\n      meta: hasSubCanvas ? { childCanvasId: n.data.childCanvasId } : undefined,\n    };\n\n    const children: TreeNode[] = [];\n    if (kidNodes && kidNodes.length > 0) {\n      children.push(...kidNodes.map(toTreeNode));\n    }\n    if (kidLines && kidLines.length > 0) {\n      children.push(...kidLines.map(lineToTree));\n    }\n    if (hasSubCanvas) {\n      const subCanvas = doc.canvases[n.data.childCanvasId!];\n      if (subCanvas) {\n        const subTree = buildCanvasSubtree(subCanvas, doc, n.data.childCanvasId!);\n        if (subTree.length > 0) {\n          children.push(...subTree);\n        }\n      }\n    }\n    if (children.length > 0) {\n      item.children = children;\n    }\n    return item;\n  };\n\n  return { nodeTree: roots.map(toTreeNode), assignedLineIds };\n}\n\nfunction buildCanvasSubtree(canvas: FlowCanvasData, doc: FlowDocument, canvasId: string): TreeNode[] {\n  if (canvas.nodes.length === 0 && canvas.edges.length === 0 && canvas.lines.length === 0) {\n    return [{ id: `_empty_${canvasId}`, label: '(empty sub-canvas)', icon: '○' }];\n  }\n  return buildNodeTree(canvas.nodes, canvas.lines, doc).nodeTree;\n}\n\n/**\n * Standalone panel (legacy). Prefer using OutlinePanelContent inside a FlowPanelGroup.\n */\nexport default function OutlinePanel() {\n  const { showOutline } = useFlowUI();\n  const { panelStyle, handleProps } = useDraggablePanel();\n  const { panelWidth, resizeHandleProps } = useResizablePanel('left', 180);\n\n  if (!showOutline) return null;\n\n  return (\n    <div className=\"flow-palette\" data-flow-panel style={{ ...(panelStyle ?? { top: 56, left: 'auto', right: 248 + 16 }), width: panelWidth }}>\n      <div className=\"flow-panel-resize-handle flow-panel-resize-handle--left\" {...resizeHandleProps} />\n      <div\n        className=\"flow-panel-drag-handle\"\n        {...handleProps}\n        style={{ fontSize: 11, fontWeight: 600, marginBottom: 6, color: 'oklch(var(--bc) / 0.5)', textTransform: 'uppercase', letterSpacing: '0.05em', cursor: 'grab' }}\n      >\n        Outline\n      </div>\n      <div className=\"flow-palette-content\">\n        <OutlinePanelContent />\n      </div>\n    </div>\n  );\n}\n\n/** Reusable content for embedding inside FlowPanelGroup tabs. */\nexport function OutlinePanelContent() {\n  const { focusOnRect } = useFlowUI();\n  const { doc, currentCanvas, currentCanvasId, selection, setSelection, pushCanvas } = useFlowContext();\n\n  const treeData = useMemo<TreeNode[]>(() => {\n    const { nodeTree, assignedLineIds } = buildNodeTree(currentCanvas.nodes, currentCanvas.lines, doc);\n    const edgeItems: TreeNode[] = currentCanvas.edges.map(e => {\n      const sn = currentCanvas.nodes.find(n => n.id === e.source);\n      const tn = currentCanvas.nodes.find(n => n.id === e.target);\n      const srcLabel = sn?.data.label || e.source;\n      const tgtLabel = tn?.data.label || e.target;\n      return { id: e.id, label: `${srcLabel} → ${tgtLabel}`, icon: '→' };\n    });\n    const unassignedLines = currentCanvas.lines.filter(l => !assignedLineIds.has(l.id));\n    const lineItems: TreeNode[] = unassignedLines.map(l => ({\n      id: l.id,\n      label: `${l.type} line`,\n      icon: '〰',\n    }));\n\n    const tree: TreeNode[] = [];\n    if (nodeTree.length > 0) tree.push({ id: '_nodes', label: `Nodes (${currentCanvas.nodes.length})`, children: nodeTree });\n    if (edgeItems.length > 0) tree.push({ id: '_edges', label: `Edges (${edgeItems.length})`, children: edgeItems });\n    if (lineItems.length > 0) tree.push({ id: '_lines', label: `Lines (${unassignedLines.length})`, children: lineItems });\n    return tree;\n  }, [currentCanvas, doc]);\n\n  const activeId = useMemo(() => {\n    if (selection.nodeIds.size === 1) return [...selection.nodeIds][0];\n    if (selection.edgeIds.size === 1) return [...selection.edgeIds][0];\n    if (selection.lineIds.size === 1) return [...selection.lineIds][0];\n    return undefined;\n  }, [selection]);\n\n  const defaultExpanded = useMemo(() => {\n    const ids: (string | number)[] = ['_nodes', '_edges', '_lines'];\n    for (const n of currentCanvas.nodes) {\n      if (n.type === 'flowGroup' || n.type === 'geometryGroup' || n.data.isGroup) ids.push(n.id);\n      if (n.data.childCanvasId) ids.push(n.id);\n    }\n    if (activeId) {\n      const node = currentCanvas.nodes.find(n => n.id === activeId);\n      if (node?.parentId) {\n        let pid: string | undefined = node.parentId;\n        while (pid) {\n          ids.push(pid);\n          const parent = currentCanvas.nodes.find(n => n.id === pid);\n          pid = parent?.parentId;\n        }\n      }\n      const line = currentCanvas.lines.find(l => l.id === activeId);\n      if (line?.parentId) ids.push(line.parentId);\n    }\n    return ids;\n  }, [currentCanvas.nodes, currentCanvas.lines, activeId]);\n\n  const handleNodeClick = useCallback((node: TreeNode) => {\n    const id = String(node.id);\n    if (id.startsWith('_')) return;\n\n    const flowNode = currentCanvas.nodes.find(n => n.id === id);\n    const flowEdge = currentCanvas.edges.find(e => e.id === id);\n    const flowLine = currentCanvas.lines.find(l => l.id === id);\n\n    setSelection({\n      nodeIds: flowNode ? new Set([id]) : new Set(),\n      edgeIds: flowEdge ? new Set([id]) : new Set(),\n      lineIds: flowLine ? new Set([id]) : new Set(),\n    });\n\n    if (flowNode) {\n      focusOnRect(flowNode.position.x, flowNode.position.y, flowNode.width, flowNode.height);\n    } else if (flowEdge) {\n      const sn = currentCanvas.nodes.find(n => n.id === flowEdge.source);\n      const tn = currentCanvas.nodes.find(n => n.id === flowEdge.target);\n      if (sn && tn) {\n        const minX = Math.min(sn.position.x, tn.position.x);\n        const minY = Math.min(sn.position.y, tn.position.y);\n        const maxX = Math.max(sn.position.x + sn.width, tn.position.x + tn.width);\n        const maxY = Math.max(sn.position.y + sn.height, tn.position.y + tn.height);\n        focusOnRect(minX, minY, maxX - minX, maxY - minY);\n      }\n    } else if (flowLine && flowLine.points.length > 0) {\n      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;\n      for (const p of flowLine.points) {\n        minX = Math.min(minX, p.x); minY = Math.min(minY, p.y);\n        maxX = Math.max(maxX, p.x); maxY = Math.max(maxY, p.y);\n      }\n      focusOnRect(minX - 20, minY - 20, maxX - minX + 40, maxY - minY + 40);\n    }\n  }, [currentCanvas, setSelection, focusOnRect]);\n\n  const handleNodeDoubleClick = useCallback((node: TreeNode) => {\n    const id = String(node.id);\n    if (id.startsWith('_')) return;\n    const flowNode = currentCanvas.nodes.find(n => n.id === id);\n    if (flowNode?.data.childCanvasId) {\n      pushCanvas(flowNode.data.childCanvasId);\n    }\n  }, [currentCanvas.nodes, pushCanvas]);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!activeId || !containerRef.current) return;\n    const timer = setTimeout(() => {\n      const el = containerRef.current?.querySelector(`[data-node-id=\"${activeId}\"]`);\n      if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n    }, 60);\n    return () => clearTimeout(timer);\n  }, [activeId]);\n\n  return (\n    <div ref={containerRef}>\n      <Tree\n        data={treeData}\n        onNodeClick={handleNodeClick}\n        onNodeDoubleClick={handleNodeDoubleClick}\n        activeNodeId={activeId}\n        defaultExpandedIds={defaultExpanded}\n        showSearch={false}\n        showExpandAll={false}\n        showIcon\n        showLine\n        indent={16}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"OutlinePanel.js","names":[],"sources":["../../../../../src/components/pro/Flow/panels/OutlinePanel.tsx"],"sourcesContent":["import React, { useMemo, useCallback, useRef, useEffect } from 'react';\nimport { Tree, type TreeNode } from '../../../Tree';\nimport { useFlowUI } from '../context/FlowUIContext';\nimport { useFlowContext } from '../context/FlowContext';\nimport { useDraggablePanel } from '../hooks/useDraggablePanel';\nimport { useResizablePanel } from '../hooks/useResizablePanel';\nimport { PaletteThumbnail } from './ShapePalette';\nimport { buildSvgMarkup } from '../nodes/svgIcons';\nimport { resolveThemeColor } from '../utils/themeColor';\nimport type { FlowNode, FlowLine, FlowDocument, FlowCanvasData } from '../types';\n\nconst SUB_CANVAS_ICON = '⧉';\n\nfunction OutlineNodeIcon({ node }: { node: FlowNode }) {\n  if (node.data.childCanvasId) return <span style={{ fontSize: 15 }}>{SUB_CANVAS_ICON}</span>;\n  if (node.type === 'shapeSvg' && node.data.svgId) {\n    const markup = buildSvgMarkup(node.data.svgId, resolveThemeColor(node.data.color, '#475569') || '#475569');\n    return markup ? (\n      <img\n        src={`data:image/svg+xml;utf8,${encodeURIComponent(markup)}`}\n        width={24}\n        height={20}\n        alt=\"\"\n        style={{ display: 'block', objectFit: 'contain' }}\n      />\n    ) : null;\n  }\n  if (node.type === 'mediaNode') {\n    const text = node.data.mediaKind === 'markdown' ? 'M↓'\n      : node.data.mediaKind === 'html' ? '</>'\n        : node.data.mediaKind === 'mermaid' ? '⎇'\n          : node.data.mediaKind === 'math' ? '√x'\n            : node.data.mediaKind === 'image' ? 'IMG'\n              : node.data.mediaKind === 'model3d' ? '3D'\n                : node.data.mediaKind === 'data' ? '⊞'\n                  : 'AI';\n    return <span style={{ width: 24, textAlign: 'center', fontSize: 10, fontWeight: 700 }}>{text}</span>;\n  }\n  return <PaletteThumbnail type={node.type} />;\n}\n\nfunction buildNodeTree(nodes: FlowNode[], lines: FlowLine[], doc: FlowDocument): { nodeTree: TreeNode[]; assignedLineIds: Set<string> } {\n  const childNodesOf = new Map<string, FlowNode[]>();\n  const childLinesOf = new Map<string, FlowLine[]>();\n  const assignedNodes = new Set<string>();\n  const assignedLineIds = new Set<string>();\n\n  for (const n of nodes) {\n    if (n.parentId) {\n      const list = childNodesOf.get(n.parentId) ?? [];\n      list.push(n);\n      childNodesOf.set(n.parentId, list);\n      assignedNodes.add(n.id);\n    }\n  }\n  for (const l of lines) {\n    if (l.parentId) {\n      const list = childLinesOf.get(l.parentId) ?? [];\n      list.push(l);\n      childLinesOf.set(l.parentId, list);\n      assignedLineIds.add(l.id);\n    }\n  }\n\n  // Spatial containment only for geometryGroup\n  const geoGroups = nodes.filter(n => n.type === 'geometryGroup');\n  for (const g of geoGroups) {\n    const gx = g.position.x, gy = g.position.y;\n    const gw = g.width, gh = g.height;\n    for (const n of nodes) {\n      if (n.id === g.id || assignedNodes.has(n.id)) continue;\n      if (n.position.x >= gx && n.position.y >= gy\n        && n.position.x + n.width <= gx + gw\n        && n.position.y + n.height <= gy + gh) {\n        const list = childNodesOf.get(g.id) ?? [];\n        list.push(n);\n        childNodesOf.set(g.id, list);\n        assignedNodes.add(n.id);\n      }\n    }\n    for (const l of lines) {\n      if (assignedLineIds.has(l.id)) continue;\n      if (l.points.length > 0 && l.points.every(p =>\n        p.x >= gx && p.x <= gx + gw && p.y >= gy && p.y <= gy + gh\n      )) {\n        const list = childLinesOf.get(g.id) ?? [];\n        list.push(l);\n        childLinesOf.set(g.id, list);\n        assignedLineIds.add(l.id);\n      }\n    }\n  }\n\n  const roots = nodes.filter(n => !assignedNodes.has(n.id));\n\n  const lineToTree = (l: FlowLine): TreeNode => ({\n    id: l.id,\n    label: `${l.type} line`,\n    icon: '〰',\n  });\n\n  const toTreeNode = (n: FlowNode): TreeNode => {\n    const hasSubCanvas = !!n.data.childCanvasId;\n    const icon = <OutlineNodeIcon node={n} />;\n    const kidNodes = childNodesOf.get(n.id);\n    const kidLines = childLinesOf.get(n.id);\n    const item: TreeNode = {\n      id: n.id,\n      label: n.data.label || n.type,\n      icon,\n      meta: hasSubCanvas ? { childCanvasId: n.data.childCanvasId } : undefined,\n    };\n\n    const children: TreeNode[] = [];\n    if (kidNodes && kidNodes.length > 0) {\n      children.push(...kidNodes.map(toTreeNode));\n    }\n    if (kidLines && kidLines.length > 0) {\n      children.push(...kidLines.map(lineToTree));\n    }\n    if (hasSubCanvas) {\n      const subCanvas = doc.canvases[n.data.childCanvasId!];\n      if (subCanvas) {\n        const subTree = buildCanvasSubtree(subCanvas, doc, n.data.childCanvasId!);\n        if (subTree.length > 0) {\n          children.push(...subTree);\n        }\n      }\n    }\n    if (children.length > 0) {\n      item.children = children;\n    }\n    return item;\n  };\n\n  return { nodeTree: roots.map(toTreeNode), assignedLineIds };\n}\n\nfunction buildCanvasSubtree(canvas: FlowCanvasData, doc: FlowDocument, canvasId: string): TreeNode[] {\n  if (canvas.nodes.length === 0 && canvas.edges.length === 0 && canvas.lines.length === 0) {\n    return [{ id: `_empty_${canvasId}`, label: '(empty sub-canvas)', icon: '○' }];\n  }\n  return buildNodeTree(canvas.nodes, canvas.lines, doc).nodeTree;\n}\n\n/**\n * Standalone panel (legacy). Prefer using OutlinePanelContent inside a FlowPanelGroup.\n */\nexport default function OutlinePanel() {\n  const { showOutline } = useFlowUI();\n  const { panelStyle, handleProps } = useDraggablePanel();\n  const { panelWidth, resizeHandleProps } = useResizablePanel('left', 180);\n\n  if (!showOutline) return null;\n\n  return (\n    <div className=\"flow-palette\" data-flow-panel style={{ ...(panelStyle ?? { top: 56, left: 'auto', right: 248 + 16 }), width: panelWidth }}>\n      <div className=\"flow-panel-resize-handle flow-panel-resize-handle--left\" {...resizeHandleProps} />\n      <div\n        className=\"flow-panel-drag-handle\"\n        {...handleProps}\n        style={{ fontSize: 11, fontWeight: 600, marginBottom: 6, color: 'color-mix(in oklch, var(--color-base-content) 50%, transparent)', textTransform: 'uppercase', letterSpacing: '0.05em', cursor: 'grab' }}\n      >\n        Outline\n      </div>\n      <div className=\"flow-palette-content\">\n        <OutlinePanelContent />\n      </div>\n    </div>\n  );\n}\n\n/** Reusable content for embedding inside FlowPanelGroup tabs. */\nexport function OutlinePanelContent() {\n  const { focusOnRect } = useFlowUI();\n  const { doc, currentCanvas, currentCanvasId, selection, setSelection, pushCanvas } = useFlowContext();\n\n  const treeData = useMemo<TreeNode[]>(() => {\n    const { nodeTree, assignedLineIds } = buildNodeTree(currentCanvas.nodes, currentCanvas.lines, doc);\n    const edgeItems: TreeNode[] = currentCanvas.edges.map(e => {\n      const sn = currentCanvas.nodes.find(n => n.id === e.source);\n      const tn = currentCanvas.nodes.find(n => n.id === e.target);\n      const srcLabel = sn?.data.label || e.source;\n      const tgtLabel = tn?.data.label || e.target;\n      return { id: e.id, label: `${srcLabel} → ${tgtLabel}`, icon: '→' };\n    });\n    const unassignedLines = currentCanvas.lines.filter(l => !assignedLineIds.has(l.id));\n    const lineItems: TreeNode[] = unassignedLines.map(l => ({\n      id: l.id,\n      label: `${l.type} line`,\n      icon: '〰',\n    }));\n\n    const tree: TreeNode[] = [];\n    if (nodeTree.length > 0) tree.push({ id: '_nodes', label: `Nodes (${currentCanvas.nodes.length})`, children: nodeTree });\n    if (edgeItems.length > 0) tree.push({ id: '_edges', label: `Edges (${edgeItems.length})`, children: edgeItems });\n    if (lineItems.length > 0) tree.push({ id: '_lines', label: `Lines (${unassignedLines.length})`, children: lineItems });\n    return tree;\n  }, [currentCanvas, doc]);\n\n  const activeId = useMemo(() => {\n    if (selection.nodeIds.size === 1) return [...selection.nodeIds][0];\n    if (selection.edgeIds.size === 1) return [...selection.edgeIds][0];\n    if (selection.lineIds.size === 1) return [...selection.lineIds][0];\n    return undefined;\n  }, [selection]);\n\n  const defaultExpanded = useMemo(() => {\n    const ids: (string | number)[] = ['_nodes', '_edges', '_lines'];\n    for (const n of currentCanvas.nodes) {\n      if (n.type === 'flowGroup' || n.type === 'geometryGroup' || n.data.isGroup) ids.push(n.id);\n      if (n.data.childCanvasId) ids.push(n.id);\n    }\n    if (activeId) {\n      const node = currentCanvas.nodes.find(n => n.id === activeId);\n      if (node?.parentId) {\n        let pid: string | undefined = node.parentId;\n        while (pid) {\n          ids.push(pid);\n          const parent = currentCanvas.nodes.find(n => n.id === pid);\n          pid = parent?.parentId;\n        }\n      }\n      const line = currentCanvas.lines.find(l => l.id === activeId);\n      if (line?.parentId) ids.push(line.parentId);\n    }\n    return ids;\n  }, [currentCanvas.nodes, currentCanvas.lines, activeId]);\n\n  const handleNodeClick = useCallback((node: TreeNode) => {\n    const id = String(node.id);\n    if (id.startsWith('_')) return;\n\n    const flowNode = currentCanvas.nodes.find(n => n.id === id);\n    const flowEdge = currentCanvas.edges.find(e => e.id === id);\n    const flowLine = currentCanvas.lines.find(l => l.id === id);\n\n    setSelection({\n      nodeIds: flowNode ? new Set([id]) : new Set(),\n      edgeIds: flowEdge ? new Set([id]) : new Set(),\n      lineIds: flowLine ? new Set([id]) : new Set(),\n    });\n\n    if (flowNode) {\n      focusOnRect(flowNode.position.x, flowNode.position.y, flowNode.width, flowNode.height);\n    } else if (flowEdge) {\n      const sn = currentCanvas.nodes.find(n => n.id === flowEdge.source);\n      const tn = currentCanvas.nodes.find(n => n.id === flowEdge.target);\n      if (sn && tn) {\n        const minX = Math.min(sn.position.x, tn.position.x);\n        const minY = Math.min(sn.position.y, tn.position.y);\n        const maxX = Math.max(sn.position.x + sn.width, tn.position.x + tn.width);\n        const maxY = Math.max(sn.position.y + sn.height, tn.position.y + tn.height);\n        focusOnRect(minX, minY, maxX - minX, maxY - minY);\n      }\n    } else if (flowLine && flowLine.points.length > 0) {\n      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;\n      for (const p of flowLine.points) {\n        minX = Math.min(minX, p.x); minY = Math.min(minY, p.y);\n        maxX = Math.max(maxX, p.x); maxY = Math.max(maxY, p.y);\n      }\n      focusOnRect(minX - 20, minY - 20, maxX - minX + 40, maxY - minY + 40);\n    }\n  }, [currentCanvas, setSelection, focusOnRect]);\n\n  const handleNodeDoubleClick = useCallback((node: TreeNode) => {\n    const id = String(node.id);\n    if (id.startsWith('_')) return;\n    const flowNode = currentCanvas.nodes.find(n => n.id === id);\n    if (flowNode?.data.childCanvasId) {\n      pushCanvas(flowNode.data.childCanvasId);\n    }\n  }, [currentCanvas.nodes, pushCanvas]);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!activeId || !containerRef.current) return;\n    const timer = setTimeout(() => {\n      const el = containerRef.current?.querySelector(`[data-node-id=\"${activeId}\"]`);\n      if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n    }, 60);\n    return () => clearTimeout(timer);\n  }, [activeId]);\n\n  return (\n    <div ref={containerRef}>\n      <Tree\n        data={treeData}\n        onNodeClick={handleNodeClick}\n        onNodeDoubleClick={handleNodeDoubleClick}\n        activeNodeId={activeId}\n        defaultExpandedIds={defaultExpanded}\n        showSearch={false}\n        showExpandAll={false}\n        showIcon\n        showLine\n        indent={16}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAkB;AAExB,SAAS,EAAgB,EAAE,MAAA,EAAA,GAA4B;AACrD,MAAI,EAAK,KAAK,cAAe,QAAO,gBAAA,EAAC,QAAD;AAAA,IAAM,OAAO,EAAE,UAAU,GAAG;AAAA,cAAI;AAAA,EAAsB,CAAA;AAC1F,MAAI,EAAK,SAAS,cAAc,EAAK,KAAK,OAAO;AAC/C,UAAM,IAAS,EAAe,EAAK,KAAK,OAAO,EAAkB,EAAK,KAAK,OAAO,SAAS,KAAK,SAAS;AACzG,WAAO,IACL,gBAAA,EAAC,OAAD;AAAA,MACE,KAAK,2BAA2B,mBAAmB,CAAM,CAAA;AAAA,MACzD,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,KAAI;AAAA,MACJ,OAAO;AAAA,QAAE,SAAS;AAAA,QAAS,WAAW;AAAA,MAAU;AAAA,IACjD,CAAA,IACC;AAAA,EACN;AACA,SAAI,EAAK,SAAS,cAST,gBAAA,EAAC,QAAD;AAAA,IAAM,OAAO;AAAA,MAAE,OAAO;AAAA,MAAI,WAAW;AAAA,MAAU,UAAU;AAAA,MAAI,YAAY;AAAA,IAAI;AAAA,cARvE,EAAK,KAAK,cAAc,aAAa,OAC9C,EAAK,KAAK,cAAc,SAAS,QAC/B,EAAK,KAAK,cAAc,YAAY,MAClC,EAAK,KAAK,cAAc,SAAS,OAC/B,EAAK,KAAK,cAAc,UAAU,QAChC,EAAK,KAAK,cAAc,YAAY,OAClC,EAAK,KAAK,cAAc,SAAS,MAC/B;AAAA,EACmF,CAAA,IAE9F,gBAAA,EAAC,GAAD,EAAkB,MAAM,EAAK,KAAO,CAAA;AAC7C;AAEA,SAAS,EAAc,GAAmB,GAAmB,GAA2E;AACtI,QAAM,IAAe,oBAAI,IAAwB,GAC3C,IAAe,oBAAI,IAAwB,GAC3C,IAAgB,oBAAI,IAAY,GAChC,IAAkB,oBAAI,IAAY;AAExC,aAAW,KAAK,EACd,KAAI,EAAE,UAAU;AACd,UAAM,IAAO,EAAa,IAAI,EAAE,QAAQ,KAAK,CAAC;AAC9C,IAAA,EAAK,KAAK,CAAC,GACX,EAAa,IAAI,EAAE,UAAU,CAAI,GACjC,EAAc,IAAI,EAAE,EAAE;AAAA,EACxB;AAEF,aAAW,KAAK,EACd,KAAI,EAAE,UAAU;AACd,UAAM,IAAO,EAAa,IAAI,EAAE,QAAQ,KAAK,CAAC;AAC9C,IAAA,EAAK,KAAK,CAAC,GACX,EAAa,IAAI,EAAE,UAAU,CAAI,GACjC,EAAgB,IAAI,EAAE,EAAE;AAAA,EAC1B;AAIF,QAAM,IAAY,EAAM,OAAA,CAAO,MAAK,EAAE,SAAS,eAAe;AAC9D,aAAW,KAAK,GAAW;AACzB,UAAM,IAAK,EAAE,SAAS,GAAG,IAAK,EAAE,SAAS,GACnC,IAAK,EAAE,OAAO,IAAK,EAAE;AAC3B,eAAW,KAAK;AACd,UAAI,EAAA,EAAE,OAAO,EAAE,MAAM,EAAc,IAAI,EAAE,EAAE,MACvC,EAAE,SAAS,KAAK,KAAM,EAAE,SAAS,KAAK,KACrC,EAAE,SAAS,IAAI,EAAE,SAAS,IAAK,KAC/B,EAAE,SAAS,IAAI,EAAE,UAAU,IAAK,GAAI;AACvC,cAAM,IAAO,EAAa,IAAI,EAAE,EAAE,KAAK,CAAC;AACxC,QAAA,EAAK,KAAK,CAAC,GACX,EAAa,IAAI,EAAE,IAAI,CAAI,GAC3B,EAAc,IAAI,EAAE,EAAE;AAAA,MACxB;AAEF,eAAW,KAAK;AACd,UAAI,CAAA,EAAgB,IAAI,EAAE,EAAE,KACxB,EAAE,OAAO,SAAS,KAAK,EAAE,OAAO,MAAA,CAAM,MACxC,EAAE,KAAK,KAAM,EAAE,KAAK,IAAK,KAAM,EAAE,KAAK,KAAM,EAAE,KAAK,IAAK,CAC1D,GAAG;AACD,cAAM,IAAO,EAAa,IAAI,EAAE,EAAE,KAAK,CAAC;AACxC,QAAA,EAAK,KAAK,CAAC,GACX,EAAa,IAAI,EAAE,IAAI,CAAI,GAC3B,EAAgB,IAAI,EAAE,EAAE;AAAA,MAC1B;AAAA,EAEJ;AAEA,QAAM,IAAQ,EAAM,OAAA,CAAO,MAAK,CAAC,EAAc,IAAI,EAAE,EAAE,CAAC,GAElD,IAAA,CAAc,OAA2B;AAAA,IAC7C,IAAI,EAAE;AAAA,IACN,OAAO,GAAG,EAAE,IAAA;AAAA,IACZ,MAAM;AAAA,EACR,IAEM,IAAA,CAAc,MAA0B;AAC5C,UAAM,IAAe,CAAC,CAAC,EAAE,KAAK,eACxB,IAAO,gBAAA,EAAC,GAAD,EAAiB,MAAM,EAAI,CAAA,GAClC,IAAW,EAAa,IAAI,EAAE,EAAE,GAChC,IAAW,EAAa,IAAI,EAAE,EAAE,GAChC,IAAiB;AAAA,MACrB,IAAI,EAAE;AAAA,MACN,OAAO,EAAE,KAAK,SAAS,EAAE;AAAA,MACzB,MAAA;AAAA,MACA,MAAM,IAAe,EAAE,eAAe,EAAE,KAAK,cAAc,IAAI;AAAA,IACjE,GAEM,IAAuB,CAAC;AAO9B,QANI,KAAY,EAAS,SAAS,KAChC,EAAS,KAAK,GAAG,EAAS,IAAI,CAAU,CAAC,GAEvC,KAAY,EAAS,SAAS,KAChC,EAAS,KAAK,GAAG,EAAS,IAAI,CAAU,CAAC,GAEvC,GAAc;AAChB,YAAM,IAAY,EAAI,SAAS,EAAE,KAAK,aAAA;AACtC,UAAI,GAAW;AACb,cAAM,IAAU,EAAmB,GAAW,GAAK,EAAE,KAAK,aAAc;AACxE,QAAI,EAAQ,SAAS,KACnB,EAAS,KAAK,GAAG,CAAO;AAAA,MAE5B;AAAA,IACF;AACA,WAAI,EAAS,SAAS,MACpB,EAAK,WAAW,IAEX;AAAA,EACT;AAEA,SAAO;AAAA,IAAE,UAAU,EAAM,IAAI,CAAU;AAAA,IAAG,iBAAA;AAAA,EAAgB;AAC5D;AAEA,SAAS,EAAmB,GAAwB,GAAmB,GAA8B;AACnG,SAAI,EAAO,MAAM,WAAW,KAAK,EAAO,MAAM,WAAW,KAAK,EAAO,MAAM,WAAW,IAC7E,CAAC;AAAA,IAAE,IAAI,UAAU,CAAA;AAAA,IAAY,OAAO;AAAA,IAAsB,MAAM;AAAA,EAAI,CAAC,IAEvE,EAAc,EAAO,OAAO,EAAO,OAAO,CAAG,EAAE;AACxD;AAKA,SAAwB,KAAe;AACrC,QAAM,EAAE,aAAA,EAAA,IAAgB,EAAU,GAC5B,EAAE,YAAA,GAAY,aAAA,EAAA,IAAgB,EAAkB,GAChD,EAAE,YAAA,GAAY,mBAAA,EAAA,IAAsB,EAAkB,QAAQ,GAAG;AAEvE,SAAK,IAGH,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IAAe,mBAAA;AAAA,IAAgB,OAAO;AAAA,MAAE,GAAI,KAAc;AAAA,QAAE,KAAK;AAAA,QAAI,MAAM;AAAA,QAAQ,OAAO;AAAA,MAAS;AAAA,MAAI,OAAO;AAAA,IAAW;AAAA,cAAxI;AAAA,MACE,gBAAA,EAAC,OAAD;AAAA,QAAK,WAAU;AAAA,QAA0D,GAAI;AAAA,MAAoB,CAAA;AAAA,MACjG,gBAAA,EAAC,OAAD;AAAA,QACE,WAAU;AAAA,QACV,GAAI;AAAA,QACJ,OAAO;AAAA,UAAE,UAAU;AAAA,UAAI,YAAY;AAAA,UAAK,cAAc;AAAA,UAAG,OAAO;AAAA,UAAmE,eAAe;AAAA,UAAa,eAAe;AAAA,UAAU,QAAQ;AAAA,QAAO;AAAA,kBACxM;AAAA,MAEI,CAAA;AAAA,MACL,gBAAA,EAAC,OAAD;AAAA,QAAK,WAAU;AAAA,kBACb,gBAAA,EAAC,GAAD,CAAsB,CAAA;AAAA,MACnB,CAAA;AAAA,IACF;AAAA,OAfkB;AAiB3B;AAGA,SAAgB,IAAsB;AACpC,QAAM,EAAE,aAAA,EAAA,IAAgB,EAAU,GAC5B,EAAE,KAAA,GAAK,eAAA,GAAe,iBAAA,GAAiB,WAAA,GAAW,cAAA,GAAc,YAAA,EAAA,IAAe,EAAe,GAE9F,IAAW,EAAA,MAA0B;AACzC,UAAM,EAAE,UAAA,GAAU,iBAAA,EAAA,IAAoB,EAAc,EAAc,OAAO,EAAc,OAAO,CAAG,GAC3F,IAAwB,EAAc,MAAM,IAAA,CAAI,MAAK;AACzD,YAAM,IAAK,EAAc,MAAM,KAAA,CAAK,MAAK,EAAE,OAAO,EAAE,MAAM,GACpD,IAAK,EAAc,MAAM,KAAA,CAAK,MAAK,EAAE,OAAO,EAAE,MAAM,GACpD,IAAW,GAAI,KAAK,SAAS,EAAE,QAC/B,IAAW,GAAI,KAAK,SAAS,EAAE;AACrC,aAAO;AAAA,QAAE,IAAI,EAAE;AAAA,QAAI,OAAO,GAAG,CAAA,MAAc,CAAA;AAAA,QAAY,MAAM;AAAA,MAAI;AAAA,IACnE,CAAC,GACK,IAAkB,EAAc,MAAM,OAAA,CAAO,MAAK,CAAC,EAAgB,IAAI,EAAE,EAAE,CAAC,GAC5E,IAAwB,EAAgB,IAAA,CAAI,OAAM;AAAA,MACtD,IAAI,EAAE;AAAA,MACN,OAAO,GAAG,EAAE,IAAA;AAAA,MACZ,MAAM;AAAA,IACR,EAAE,GAEI,IAAmB,CAAC;AAC1B,WAAI,EAAS,SAAS,KAAG,EAAK,KAAK;AAAA,MAAE,IAAI;AAAA,MAAU,OAAO,UAAU,EAAc,MAAM,MAAA;AAAA,MAAW,UAAU;AAAA,IAAS,CAAC,GACnH,EAAU,SAAS,KAAG,EAAK,KAAK;AAAA,MAAE,IAAI;AAAA,MAAU,OAAO,UAAU,EAAU,MAAA;AAAA,MAAW,UAAU;AAAA,IAAU,CAAC,GAC3G,EAAU,SAAS,KAAG,EAAK,KAAK;AAAA,MAAE,IAAI;AAAA,MAAU,OAAO,UAAU,EAAgB,MAAA;AAAA,MAAW,UAAU;AAAA,IAAU,CAAC,GAC9G;AAAA,EACT,GAAG,CAAC,GAAe,CAAG,CAAC,GAEjB,IAAW,EAAA,MAAc;AAC7B,QAAI,EAAU,QAAQ,SAAS,EAAG,QAAO,CAAC,GAAG,EAAU,OAAO,EAAE,CAAA;AAChE,QAAI,EAAU,QAAQ,SAAS,EAAG,QAAO,CAAC,GAAG,EAAU,OAAO,EAAE,CAAA;AAChE,QAAI,EAAU,QAAQ,SAAS,EAAG,QAAO,CAAC,GAAG,EAAU,OAAO,EAAE,CAAA;AAAA,EAElE,GAAG,CAAC,CAAS,CAAC,GAER,IAAkB,EAAA,MAAc;AACpC,UAAM,IAA2B;AAAA,MAAC;AAAA,MAAU;AAAA,MAAU;AAAA,IAAQ;AAC9D,eAAW,KAAK,EAAc;AAC5B,OAAI,EAAE,SAAS,eAAe,EAAE,SAAS,mBAAmB,EAAE,KAAK,YAAS,EAAI,KAAK,EAAE,EAAE,GACrF,EAAE,KAAK,iBAAe,EAAI,KAAK,EAAE,EAAE;AAEzC,QAAI,GAAU;AACZ,YAAM,IAAO,EAAc,MAAM,KAAA,CAAK,MAAK,EAAE,OAAO,CAAQ;AAC5D,UAAI,GAAM,UAAU;AAClB,YAAI,IAA0B,EAAK;AACnC,eAAO;AACL,UAAA,EAAI,KAAK,CAAG,GAEZ,IADe,EAAc,MAAM,KAAA,CAAK,MAAK,EAAE,OAAO,CAChD,GAAQ;AAAA,MAElB;AACA,YAAM,IAAO,EAAc,MAAM,KAAA,CAAK,MAAK,EAAE,OAAO,CAAQ;AAC5D,MAAI,GAAM,YAAU,EAAI,KAAK,EAAK,QAAQ;AAAA,IAC5C;AACA,WAAO;AAAA,EACT,GAAG;AAAA,IAAC,EAAc;AAAA,IAAO,EAAc;AAAA,IAAO;AAAA,EAAQ,CAAC,GAEjD,IAAkB,EAAA,CAAa,MAAmB;AACtD,UAAM,IAAK,OAAO,EAAK,EAAE;AACzB,QAAI,EAAG,WAAW,GAAG,EAAG;AAExB,UAAM,IAAW,EAAc,MAAM,KAAA,CAAK,MAAK,EAAE,OAAO,CAAE,GACpD,IAAW,EAAc,MAAM,KAAA,CAAK,MAAK,EAAE,OAAO,CAAE,GACpD,IAAW,EAAc,MAAM,KAAA,CAAK,MAAK,EAAE,OAAO,CAAE;AAQ1D,QANA,EAAa;AAAA,MACX,SAAS,IAAW,oBAAI,IAAI,CAAC,CAAE,CAAC,IAAI,oBAAI,IAAI;AAAA,MAC5C,SAAS,IAAW,oBAAI,IAAI,CAAC,CAAE,CAAC,IAAI,oBAAI,IAAI;AAAA,MAC5C,SAAS,IAAW,oBAAI,IAAI,CAAC,CAAE,CAAC,IAAI,oBAAI,IAAI;AAAA,IAC9C,CAAC,GAEG,EACF,CAAA,EAAY,EAAS,SAAS,GAAG,EAAS,SAAS,GAAG,EAAS,OAAO,EAAS,MAAM;AAAA,aAC5E,GAAU;AACnB,YAAM,IAAK,EAAc,MAAM,KAAA,CAAK,MAAK,EAAE,OAAO,EAAS,MAAM,GAC3D,IAAK,EAAc,MAAM,KAAA,CAAK,MAAK,EAAE,OAAO,EAAS,MAAM;AACjE,UAAI,KAAM,GAAI;AACZ,cAAM,IAAO,KAAK,IAAI,EAAG,SAAS,GAAG,EAAG,SAAS,CAAC,GAC5C,IAAO,KAAK,IAAI,EAAG,SAAS,GAAG,EAAG,SAAS,CAAC,GAC5C,IAAO,KAAK,IAAI,EAAG,SAAS,IAAI,EAAG,OAAO,EAAG,SAAS,IAAI,EAAG,KAAK,GAClE,IAAO,KAAK,IAAI,EAAG,SAAS,IAAI,EAAG,QAAQ,EAAG,SAAS,IAAI,EAAG,MAAM;AAC1E,QAAA,EAAY,GAAM,GAAM,IAAO,GAAM,IAAO,CAAI;AAAA,MAClD;AAAA,IACF,WAAW,KAAY,EAAS,OAAO,SAAS,GAAG;AACjD,UAAI,IAAO,OAAU,IAAO,OAAU,IAAO,QAAW,IAAO;AAC/D,iBAAW,KAAK,EAAS;AACvB,QAAA,IAAO,KAAK,IAAI,GAAM,EAAE,CAAC,GAAG,IAAO,KAAK,IAAI,GAAM,EAAE,CAAC,GACrD,IAAO,KAAK,IAAI,GAAM,EAAE,CAAC,GAAG,IAAO,KAAK,IAAI,GAAM,EAAE,CAAC;AAEvD,MAAA,EAAY,IAAO,IAAI,IAAO,IAAI,IAAO,IAAO,IAAI,IAAO,IAAO,EAAE;AAAA,IACtE;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAe;AAAA,IAAc;AAAA,EAAW,CAAC,GAEvC,IAAwB,EAAA,CAAa,MAAmB;AAC5D,UAAM,IAAK,OAAO,EAAK,EAAE;AACzB,QAAI,EAAG,WAAW,GAAG,EAAG;AACxB,UAAM,IAAW,EAAc,MAAM,KAAA,CAAK,MAAK,EAAE,OAAO,CAAE;AAC1D,IAAI,GAAU,KAAK,iBACjB,EAAW,EAAS,KAAK,aAAa;AAAA,EAE1C,GAAG,CAAC,EAAc,OAAO,CAAU,CAAC,GAE9B,IAAe,EAAuB,IAAI;AAEhD,SAAA,EAAA,MAAgB;AACd,QAAI,CAAC,KAAY,CAAC,EAAa,QAAS;AACxC,UAAM,IAAQ,WAAA,MAAiB;AAC7B,YAAM,IAAK,EAAa,SAAS,cAAc,kBAAkB,CAAA,IAAY;AAC7E,MAAI,KAAI,EAAG,eAAe;AAAA,QAAE,OAAO;AAAA,QAAW,UAAU;AAAA,MAAS,CAAC;AAAA,IACpE,GAAG,EAAE;AACL,WAAA,MAAa,aAAa,CAAK;AAAA,EACjC,GAAG,CAAC,CAAQ,CAAC,GAGX,gBAAA,EAAC,OAAD;AAAA,IAAK,KAAK;AAAA,cACR,gBAAA,EAAC,GAAD;AAAA,MACE,MAAM;AAAA,MACN,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,cAAc;AAAA,MACd,oBAAoB;AAAA,MACpB,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,UAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAQ;AAAA,IACT,CAAA;AAAA,EACE,CAAA;AAET"}

package/dist/components/pro/Flow/panels/ProjectTitle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Editable project title shown in the top-left. Renders as plain-looking text
+ * (a borderless input) and only becomes editable on double-click, committing on
+ * blur or Enter and reverting on Escape. The title is stored on the document
+ * and used as the base filename for all exports.
+ */
+export default function ProjectTitle(): React.JSX.Element;

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

@@ -0,0 +1,49 @@
+import { useFlowContext as m } from "../context/FlowContext.js";
+import { useEffect as r, useRef as v, useState as f } from "react";
+import { jsx as a } from "react/jsx-runtime";
+var D = "未命名流程图";
+function h() {
+  const { doc: l, setDoc: u } = m(), [e, o] = f(!1), [n, i] = f(l.title ?? ""), c = v(null);
+  r(() => {
+    e || i(l.title ?? "");
+  }, [l.title, e]), r(() => {
+    if (e) {
+      const t = c.current;
+      t?.focus(), t?.select();
+    }
+  }, [e]);
+  const s = () => {
+    const t = n.trim();
+    o(!1), u((d) => ({
+      ...d,
+      title: t || void 0
+    }));
+  }, p = () => {
+    i(l.title ?? ""), o(!1);
+  };
+  return /* @__PURE__ */ a("div", {
+    className: "flow-project-title",
+    title: "双击编辑标题",
+    children: /* @__PURE__ */ a("input", {
+      ref: c,
+      className: `flow-project-title-input${e ? " flow-project-title-input--editing" : ""}`,
+      value: e ? n : l.title ?? "",
+      placeholder: D,
+      readOnly: !e,
+      onDoubleClick: () => o(!0),
+      onChange: (t) => i(t.target.value),
+      onBlur: () => {
+        e && s();
+      },
+      onKeyDown: (t) => {
+        t.key === "Enter" ? (t.preventDefault(), s()) : t.key === "Escape" && (t.preventDefault(), p());
+      },
+      spellCheck: !1
+    })
+  });
+}
+export {
+  h as default
+};
+
+//# sourceMappingURL=ProjectTitle.js.map

package/dist/components/pro/Flow/panels/ProjectTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectTitle.js","names":[],"sources":["../../../../../src/components/pro/Flow/panels/ProjectTitle.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { useFlowContext } from '../context/FlowContext';\n\nconst DEFAULT_TITLE = '未命名流程图';\n\n/**\n * Editable project title shown in the top-left. Renders as plain-looking text\n * (a borderless input) and only becomes editable on double-click, committing on\n * blur or Enter and reverting on Escape. The title is stored on the document\n * and used as the base filename for all exports.\n */\nexport default function ProjectTitle() {\n  const { doc, setDoc } = useFlowContext();\n  const [editing, setEditing] = useState(false);\n  const [draft, setDraft] = useState(doc.title ?? '');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  // Keep the draft in sync when the document title changes externally\n  // (import / undo / new document) while not actively editing.\n  useEffect(() => {\n    if (!editing) setDraft(doc.title ?? '');\n  }, [doc.title, editing]);\n\n  useEffect(() => {\n    if (editing) {\n      const el = inputRef.current;\n      el?.focus();\n      el?.select();\n    }\n  }, [editing]);\n\n  const commit = () => {\n    const next = draft.trim();\n    setEditing(false);\n    setDoc((prev) => ({ ...prev, title: next || undefined }));\n  };\n\n  const cancel = () => {\n    setDraft(doc.title ?? '');\n    setEditing(false);\n  };\n\n  return (\n    <div className=\"flow-project-title\" title=\"双击编辑标题\">\n      <input\n        ref={inputRef}\n        className={`flow-project-title-input${editing ? ' flow-project-title-input--editing' : ''}`}\n        value={editing ? draft : (doc.title ?? '')}\n        placeholder={DEFAULT_TITLE}\n        readOnly={!editing}\n        onDoubleClick={() => setEditing(true)}\n        onChange={(e) => setDraft(e.target.value)}\n        onBlur={() => { if (editing) commit(); }}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') { e.preventDefault(); commit(); }\n          else if (e.key === 'Escape') { e.preventDefault(); cancel(); }\n        }}\n        spellCheck={false}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,IAAM,IAAgB;AAQtB,SAAwB,IAAe;AACrC,QAAM,EAAE,KAAA,GAAK,QAAA,EAAA,IAAW,EAAe,GACjC,CAAC,GAAS,CAAA,IAAc,EAAS,EAAK,GACtC,CAAC,GAAO,CAAA,IAAY,EAAS,EAAI,SAAS,EAAE,GAC5C,IAAW,EAAyB,IAAI;AAI9C,EAAA,EAAA,MAAgB;AACd,IAAK,KAAS,EAAS,EAAI,SAAS,EAAE;AAAA,EACxC,GAAG,CAAC,EAAI,OAAO,CAAO,CAAC,GAEvB,EAAA,MAAgB;AACd,QAAI,GAAS;AACX,YAAM,IAAK,EAAS;AACpB,MAAA,GAAI,MAAM,GACV,GAAI,OAAO;AAAA,IACb;AAAA,EACF,GAAG,CAAC,CAAO,CAAC;AAEZ,QAAM,IAAA,MAAe;AACnB,UAAM,IAAO,EAAM,KAAK;AACxB,IAAA,EAAW,EAAK,GAChB,EAAA,CAAQ,OAAU;AAAA,MAAE,GAAG;AAAA,MAAM,OAAO,KAAQ;AAAA,IAAU,EAAE;AAAA,EAC1D,GAEM,IAAA,MAAe;AACnB,IAAA,EAAS,EAAI,SAAS,EAAE,GACxB,EAAW,EAAK;AAAA,EAClB;AAEA,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IAAqB,OAAM;AAAA,cACxC,gBAAA,EAAC,SAAD;AAAA,MACE,KAAK;AAAA,MACL,WAAW,2BAA2B,IAAU,uCAAuC,EAAA;AAAA,MACvF,OAAO,IAAU,IAAS,EAAI,SAAS;AAAA,MACvC,aAAa;AAAA,MACb,UAAU,CAAC;AAAA,MACX,eAAA,MAAqB,EAAW,EAAI;AAAA,MACpC,UAAA,CAAW,MAAM,EAAS,EAAE,OAAO,KAAK;AAAA,MACxC,QAAA,MAAc;AAAE,QAAI,KAAS,EAAO;AAAA,MAAG;AAAA,MACvC,WAAA,CAAY,MAAM;AAChB,QAAI,EAAE,QAAQ,WAAW,EAAE,eAAe,GAAG,EAAO,KAC3C,EAAE,QAAQ,aAAY,EAAE,eAAe,GAAG,EAAO;AAAA,MAC5D;AAAA,MACA,YAAY;AAAA,IACb,CAAA;AAAA,EACE,CAAA;AAET"}

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

@@ -1,11 +1,13 @@
 import { PALETTE_ITEMS as $ } from "../constants.js";
-import { useFlowUI as k } from "../context/FlowUIContext.js";
-import { SVG_ICON_CATEGORIES as x, buildSvgMarkup as b, getSvgIconsByCategory as M } from "../nodes/svgIcons.js";
-import { useDraggablePanel as v } from "../hooks/useDraggablePanel.js";
-import { useResizablePanel as S } from "../hooks/useResizablePanel.js";
-import { useCallback as u, useState as P } from "react";
-import { Fragment as g, jsx as e, jsxs as d } from "react/jsx-runtime";
-var W = [
+import { useFlowUI as y } from "../context/FlowUIContext.js";
+import { resolveThemeColor as b } from "../utils/themeColor.js";
+import { SVG_ICON_CATEGORIES as v, buildSvgMarkup as M, getSvgIcon as x, getSvgIconsByCategory as S } from "../nodes/svgIcons.js";
+import { useDraggablePanel as C } from "../hooks/useDraggablePanel.js";
+import { useResizablePanel as P } from "../hooks/useResizablePanel.js";
+import { makeStarterDataConfig as W } from "../nodes/dataUtils.js";
+import { useCallback as u, useState as I } from "react";
+import { Fragment as g, jsx as e, jsxs as c } from "react/jsx-runtime";
+var T = [
   {
     mode: "freehand",
     label: "Freehand"
@@ -23,13 +25,13 @@ var W = [
     label: "Arrow"
   }
 ];
-function F() {
-  const { showPalette: l } = k(), { panelStyle: a, handleProps: i } = v(), { panelWidth: t, resizeHandleProps: o } = S("right", 180);
-  return l ? /* @__PURE__ */ d("div", {
+function V() {
+  const { showPalette: l } = y(), { panelStyle: r, handleProps: a } = C(), { panelWidth: t, resizeHandleProps: o } = P("right", 180);
+  return l ? /* @__PURE__ */ c("div", {
     className: "flow-palette",
     "data-flow-panel": !0,
     style: {
-      ...a,
+      ...r,
       width: t
     },
     children: [
@@ -39,12 +41,12 @@ function F() {
       }),
       /* @__PURE__ */ e("div", {
         className: "flow-panel-drag-handle",
-        ...i,
+        ...a,
         style: {
           fontSize: 11,
           fontWeight: 600,
           marginBottom: 6,
-          color: "oklch(var(--bc) / 0.5)",
+          color: "color-mix(in oklch, var(--color-base-content) 50%, transparent)",
           textTransform: "uppercase",
           letterSpacing: "0.05em",
           cursor: "grab"
@@ -53,45 +55,45 @@ function F() {
       }),
       /* @__PURE__ */ e("div", {
         className: "flow-palette-content",
-        children: /* @__PURE__ */ e(I, {})
+        children: /* @__PURE__ */ e(N, {})
       })
     ]
   }) : null;
 }
-function I() {
-  const { toolMode: l, setToolMode: a, setPendingPlacement: i, pendingPlacement: t } = k(), o = u((n, h, p, r) => {
-    t?.type === n ? i(null) : (i({
+function N() {
+  const { toolMode: l, setToolMode: r, setPendingPlacement: a, pendingPlacement: t } = y(), o = u((n, s, p, h) => {
+    t?.type === n ? a(null) : (a({
       type: n,
-      width: h,
+      width: s,
       height: p,
-      data: { ...r }
-    }), a("select"));
+      data: { ...h }
+    }), r("select"));
   }, [
-    i,
     a,
+    r,
     t
   ]);
-  return /* @__PURE__ */ d(g, { children: [
+  return /* @__PURE__ */ c(g, { children: [
     /* @__PURE__ */ e("div", {
       className: "flow-palette-grid",
-      children: $.map((n) => /* @__PURE__ */ d("div", {
+      children: $.map((n) => /* @__PURE__ */ c("div", {
         className: `flow-palette-item${t?.type === n.type ? " flow-palette-item--active" : ""}`,
         onClick: () => o(n.type, n.width, n.height, n.data),
-        children: [/* @__PURE__ */ e(A, { type: n.type }), /* @__PURE__ */ e("span", {
+        children: [/* @__PURE__ */ e(D, { type: n.type }), /* @__PURE__ */ e("span", {
           className: "flow-palette-item-label",
           children: n.data.label
         })]
       }, n.type))
     }),
-    /* @__PURE__ */ e(T, { children: "Lines" }),
+    /* @__PURE__ */ e(z, { children: "Lines" }),
     /* @__PURE__ */ e("div", {
       className: "flow-palette-grid",
-      children: W.map((n) => /* @__PURE__ */ d("div", {
+      children: T.map((n) => /* @__PURE__ */ c("div", {
         className: `flow-palette-item${l === n.mode ? " flow-palette-item--active" : ""}`,
         onClick: () => {
-          i(null), a(l === n.mode ? "select" : n.mode);
+          a(null), r(l === n.mode ? "select" : n.mode);
         },
-        children: [/* @__PURE__ */ e(L, { mode: n.mode }), /* @__PURE__ */ e("span", {
+        children: [/* @__PURE__ */ e(E, { mode: n.mode }), /* @__PURE__ */ e("span", {
           className: "flow-palette-item-label",
           children: n.label
         })]
@@ -99,76 +101,78 @@ function I() {
     })
   ] });
 }
-function G() {
-  const { setPendingPlacement: l, setToolMode: a, pendingPlacement: i } = k(), [t, o] = P({ lang: !0 }), n = u((h, p) => {
-    const r = i?.data.svgId;
-    if (i?.type === "shapeSvg" && r === h) {
+function Z() {
+  const { setPendingPlacement: l, setToolMode: r, pendingPlacement: a } = y(), [t, o] = I({ lang: !0 }), n = u((s, p) => {
+    const h = a?.data.svgId;
+    if (a?.type === "shapeSvg" && h === s) {
       l(null);
       return;
     }
+    const i = {
+      label: p,
+      fill: "transparent",
+      stroke: "theme:base-content",
+      strokeWidth: 1.5,
+      color: x(s)?.brandColor ?? "theme:base-content",
+      labelColor: "theme:base-content",
+      fontSize: 12,
+      svgId: s,
+      iconBox: !1,
+      labelPlacement: "bottom",
+      borderStyle: "none"
+    };
     l({
       type: "shapeSvg",
       width: 56,
       height: 56,
-      data: {
-        label: p,
-        fill: "transparent",
-        stroke: "#64748b",
-        strokeWidth: 1.5,
-        color: "#334155",
-        fontSize: 12,
-        svgId: h,
-        iconBox: !1,
-        labelPlacement: "bottom",
-        borderStyle: "none"
-      }
-    }), a("select");
+      data: i
+    }), r("select");
   }, [
-    i,
+    a,
     l,
-    a
+    r
   ]);
-  return /* @__PURE__ */ e(g, { children: x.map((h) => {
-    const p = M(h.id), r = t[h.id];
-    return /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("button", {
+  return /* @__PURE__ */ e(g, { children: v.map((s) => {
+    const p = S(s.id), h = t[s.id];
+    return /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("button", {
       type: "button",
       className: "flow-palette-section-toggle",
-      onClick: () => o((s) => ({
-        ...s,
-        [h.id]: !s[h.id]
+      onClick: () => o((i) => ({
+        ...i,
+        [s.id]: !i[s.id]
       })),
       children: [/* @__PURE__ */ e("span", {
         style: {
-          transform: r ? "rotate(90deg)" : "none",
+          transform: h ? "rotate(90deg)" : "none",
           transition: "transform .15s"
         },
         children: "▸"
-      }), h.label]
-    }), r && /* @__PURE__ */ e("div", {
+      }), s.label]
+    }), h && /* @__PURE__ */ e("div", {
       className: "flow-palette-grid",
-      children: p.map((s) => /* @__PURE__ */ d("div", {
-        className: `flow-palette-item${i?.type === "shapeSvg" && i.data.svgId === s.id ? " flow-palette-item--active" : ""}`,
-        onClick: () => n(s.id, s.label),
-        title: s.label,
-        children: [/* @__PURE__ */ e(C, { id: s.id }), /* @__PURE__ */ e("span", {
+      children: p.map((i) => /* @__PURE__ */ c("div", {
+        className: `flow-palette-item${a?.type === "shapeSvg" && a.data.svgId === i.id ? " flow-palette-item--active" : ""}`,
+        onClick: () => n(i.id, i.label),
+        title: i.label,
+        children: [/* @__PURE__ */ e(A, { id: i.id }), /* @__PURE__ */ e("span", {
           className: "flow-palette-item-label",
-          children: s.label
+          children: i.label
         })]
-      }, s.id))
-    })] }, h.id);
+      }, i.id))
+    })] }, s.id);
   }) });
 }
-function C({ id: l }) {
-  const a = b(l, "#475569");
-  return a ? /* @__PURE__ */ e("img", {
-    src: `data:image/svg+xml;utf8,${encodeURIComponent(a)}`,
-    width: 34,
-    height: 26,
+function A({ id: l }) {
+  const r = M(l, b(x(l)?.brandColor, "") || "#475569");
+  return r ? /* @__PURE__ */ e("img", {
+    src: `data:image/svg+xml;utf8,${encodeURIComponent(r)}`,
+    width: 20,
+    height: 16,
     alt: "",
     style: { objectFit: "contain" }
   }) : null;
 }
-var N = [
+var L = [
   {
     kind: "markdown",
     label: "Markdown",
@@ -235,37 +239,46 @@ var N = [
     height: 340,
     content: "",
     icon: /* @__PURE__ */ e(m, { text: "AI" })
+  },
+  {
+    kind: "data",
+    label: "Data",
+    width: 420,
+    height: 300,
+    content: "",
+    icon: /* @__PURE__ */ e(m, { text: "⊞" })
   }
 ];
 function m({ text: l }) {
   return /* @__PURE__ */ e("div", {
     style: {
-      width: 36,
-      height: 28,
+      width: 20,
+      height: 16,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      fontSize: 13,
+      fontSize: 9,
       fontWeight: 700,
-      color: "oklch(var(--bc) / 0.6)",
-      border: "1px solid oklch(var(--bc) / 0.2)",
-      borderRadius: 4
+      color: "color-mix(in oklch, var(--color-base-content) 60%, transparent)",
+      border: "1px solid color-mix(in oklch, var(--color-base-content) 20%, transparent)",
+      borderRadius: 3,
+      flexShrink: 0
     },
     children: l
   });
 }
-function O() {
-  const { setPendingPlacement: l, setToolMode: a, pendingPlacement: i } = k(), t = u((o) => {
-    if (i?.type === "mediaNode" && i.data.mediaKind === o.kind) {
+function q() {
+  const { setPendingPlacement: l, setToolMode: r, pendingPlacement: a } = y(), t = u((o) => {
+    if (a?.type === "mediaNode" && a.data.mediaKind === o.kind) {
       l(null);
       return;
     }
     const n = {
       label: o.label,
-      fill: "#ffffff",
-      stroke: "#cbd5e1",
+      fill: "theme:base-100",
+      stroke: "theme:base-content",
       strokeWidth: 1.5,
-      color: "#1f2937",
+      color: "theme:base-content",
       fontSize: 13,
       borderStyle: "solid",
       mediaKind: o.kind,
@@ -274,23 +287,23 @@ function O() {
         gateway: "",
         protocol: "openai",
         model: ""
-      } } : o.kind === "model3d" ? { modelFormat: "stl" } : {}
+      } } : o.kind === "model3d" ? { modelFormat: "stl" } : o.kind === "data" ? { dataConfig: W() } : {}
     };
     l({
       type: "mediaNode",
       width: o.width,
       height: o.height,
       data: n
-    }), a("select");
+    }), r("select");
   }, [
-    i,
+    a,
     l,
-    a
+    r
   ]);
   return /* @__PURE__ */ e("div", {
     className: "flow-palette-grid",
-    children: N.map((o) => /* @__PURE__ */ d("div", {
-      className: `flow-palette-item${i?.type === "mediaNode" && i.data.mediaKind === o.kind ? " flow-palette-item--active" : ""}`,
+    children: L.map((o) => /* @__PURE__ */ c("div", {
+      className: `flow-palette-item${a?.type === "mediaNode" && a.data.mediaKind === o.kind ? " flow-palette-item--active" : ""}`,
       onClick: () => t(o),
       title: o.label,
       children: [o.icon, /* @__PURE__ */ e("span", {
@@ -300,20 +313,20 @@ function O() {
     }, o.kind))
   });
 }
-function T({ children: l }) {
+function z({ children: l }) {
   return /* @__PURE__ */ e("div", {
     style: {
       fontSize: 11,
       fontWeight: 600,
       margin: "10px 0 6px",
-      color: "oklch(var(--bc) / 0.5)",
+      color: "color-mix(in oklch, var(--color-base-content) 50%, transparent)",
       textTransform: "uppercase",
       letterSpacing: "0.05em"
     },
     children: l
   });
 }
-function A({ type: l }) {
+function D({ type: l }) {
   const t = "currentColor", n = {
     shapeRect: /* @__PURE__ */ e("rect", {
       x: "3",
@@ -375,11 +388,11 @@ function A({ type: l }) {
       strokeWidth: 1.5
     }),
     shapePentagon: (() => {
-      const r = Math.min(18, 14) - 4;
+      const h = Math.min(18, 14) - 4;
       return /* @__PURE__ */ e("polygon", {
-        points: Array.from({ length: 5 }, (s, y) => {
-          const c = Math.PI * 2 * y / 5 - Math.PI / 2;
-          return `${18 + r * Math.cos(c)},${14 + r * Math.sin(c)}`;
+        points: Array.from({ length: 5 }, (i, k) => {
+          const d = Math.PI * 2 * k / 5 - Math.PI / 2;
+          return `${18 + h * Math.cos(d)},${14 + h * Math.sin(d)}`;
         }).join(" "),
         fill: "none",
         stroke: t,
@@ -387,8 +400,8 @@ function A({ type: l }) {
       });
     })(),
     shapeHexagon: /* @__PURE__ */ e("polygon", {
-      points: Array.from({ length: 6 }, (y, c) => {
-        const w = Math.PI * 2 * c / 6 - Math.PI / 6;
+      points: Array.from({ length: 6 }, (k, d) => {
+        const w = Math.PI * 2 * d / 6 - Math.PI / 6;
         return `${18 + 14 * Math.cos(w)},${14 + 10 * Math.sin(w)}`;
       }).join(" "),
       fill: "none",
@@ -396,10 +409,10 @@ function A({ type: l }) {
       strokeWidth: 1.5
     }),
     shapeStar: (() => {
-      const r = Math.min(18, 14) - 3, s = r * 0.4;
+      const h = Math.min(18, 14) - 3, i = h * 0.4;
       return /* @__PURE__ */ e("polygon", {
-        points: Array.from({ length: 10 }, (y, c) => {
-          const w = Math.PI * c / 5 - Math.PI / 2, f = c % 2 === 0 ? r : s;
+        points: Array.from({ length: 10 }, (k, d) => {
+          const w = Math.PI * d / 5 - Math.PI / 2, f = d % 2 === 0 ? h : i;
           return `${18 + f * Math.cos(w)},${14 + f * Math.sin(w)}`;
         }).join(" "),
         fill: "none",
@@ -408,10 +421,10 @@ function A({ type: l }) {
       });
     })(),
     shapeHexagram: (() => {
-      const r = Math.min(18, 14) - 3, s = r * 0.55;
+      const h = Math.min(18, 14) - 3, i = h * 0.55;
       return /* @__PURE__ */ e("polygon", {
-        points: Array.from({ length: 12 }, (y, c) => {
-          const w = Math.PI * c / 6 - Math.PI / 2, f = c % 2 === 0 ? r : s;
+        points: Array.from({ length: 12 }, (k, d) => {
+          const w = Math.PI * d / 6 - Math.PI / 2, f = d % 2 === 0 ? h : i;
           return `${18 + f * Math.cos(w)},${14 + f * Math.sin(w)}`;
         }).join(" "),
         fill: "none",
@@ -440,7 +453,7 @@ function A({ type: l }) {
       fill: "currentColor",
       children: "Aa"
     }),
-    animAnchor: /* @__PURE__ */ d(g, { children: [
+    animAnchor: /* @__PURE__ */ c(g, { children: [
       /* @__PURE__ */ e("rect", {
         x: "3",
         y: "4",
@@ -486,13 +499,13 @@ function A({ type: l }) {
     width: 36,
     height: 28,
     viewBox: "0 0 36 28",
-    style: { color: "oklch(var(--bc) / 0.55)" },
+    style: { color: "color-mix(in oklch, var(--color-base-content) 55%, transparent)" },
     children: n[l] ?? n.shapeRect
   });
 }
-function L({ mode: l }) {
+function E({ mode: l }) {
   const t = "currentColor", n = {
-    connect: /* @__PURE__ */ d(g, { children: [/* @__PURE__ */ e("line", {
+    connect: /* @__PURE__ */ c(g, { children: [/* @__PURE__ */ e("line", {
       x1: "6",
       y1: 22,
       x2: 30,
@@ -525,7 +538,7 @@ function L({ mode: l }) {
       strokeWidth: 1.5,
       strokeLinejoin: "round"
     }),
-    arrow: /* @__PURE__ */ d(g, { children: [/* @__PURE__ */ e("line", {
+    arrow: /* @__PURE__ */ c(g, { children: [/* @__PURE__ */ e("line", {
       x1: "6",
       y1: 22,
       x2: 30,
@@ -541,16 +554,16 @@ function L({ mode: l }) {
     width: 36,
     height: 28,
     viewBox: "0 0 36 28",
-    style: { color: "oklch(var(--bc) / 0.55)" },
+    style: { color: "color-mix(in oklch, var(--color-base-content) 55%, transparent)" },
     children: n[l] ?? n.line
   });
 }
 export {
-  O as MediaStampContent,
-  A as PaletteThumbnail,
-  I as ShapePaletteContent,
-  G as SvgStampContent,
-  F as default
+  q as MediaStampContent,
+  D as PaletteThumbnail,
+  N as ShapePaletteContent,
+  Z as SvgStampContent,
+  V as default
 };
 
 //# sourceMappingURL=ShapePalette.js.map