symbiote-ui 0.3.0-alpha.4

package/canvas/html-in-canvas.js

@@ -0,0 +1,202 @@
+export const HTML_IN_CANVAS_RENDERER_NAME = 'html-in-canvas';
+
+export const HTML_IN_CANVAS_APIS = Object.freeze({
+  layoutSubtreeAttribute: 'layoutsubtree',
+  paintEvent: 'paint',
+  canvas2dDraw: 'drawElementImage',
+  elementCapture: 'captureElementImage',
+  webglTextureUpload: 'texElementImage2D',
+  webgpuTextureCopy: 'copyElementImageToTexture',
+  elementTransform: 'getElementTransform',
+  requestPaint: 'requestPaint',
+});
+
+export const HTML_IN_CANVAS_RENDERER = Object.freeze({
+  name: HTML_IN_CANVAS_RENDERER_NAME,
+  status: 'experimental',
+  specifier: 'symbiote-ui/ui',
+  description: 'Experimental DOM-to-canvas renderer adapter for packaged Chromium hosts and origin-trial browsers.',
+  modes: ['canvas2d', 'offscreen2d', 'webgl', 'webgpu'],
+  fallback: 'dom-overlay',
+  requiredCanvasAttribute: HTML_IN_CANVAS_APIS.layoutSubtreeAttribute,
+  capabilities: [
+    'dom-content-in-canvas',
+    'interactive-canvas-ui',
+    'accessible-canvas-ui',
+    'text-selection',
+    'native-form-controls',
+    'offscreen-worker-snapshots',
+    'canvas-texture-upload',
+    'feature-detected-fallback',
+  ],
+  apis: HTML_IN_CANVAS_APIS,
+});
+
+function hasFn(source, name) {
+  return typeof source?.[name] === 'function';
+}
+
+function getPrototype(target, name) {
+  return target?.[name]?.prototype || null;
+}
+
+function supportsLayoutSubtree(target) {
+  let canvasProto = getPrototype(target, 'HTMLCanvasElement');
+  if (canvasProto && 'layoutSubtree' in canvasProto) return true;
+  let canvas = target?.document?.createElement?.('canvas');
+  return Boolean(canvas && 'layoutSubtree' in canvas);
+}
+
+export function getHtmlInCanvasSupport(target = globalThis) {
+  let canvas2dProto = getPrototype(target, 'CanvasRenderingContext2D');
+  let offscreen2dProto = getPrototype(target, 'OffscreenCanvasRenderingContext2D');
+  let webglProto = getPrototype(target, 'WebGLRenderingContext');
+  let webgl2Proto = getPrototype(target, 'WebGL2RenderingContext');
+  let gpuQueueProto = getPrototype(target, 'GPUQueue');
+  let canvasProto = getPrototype(target, 'HTMLCanvasElement');
+  let offscreenCanvasProto = getPrototype(target, 'OffscreenCanvas');
+
+  let canvas2d = hasFn(canvas2dProto, HTML_IN_CANVAS_APIS.canvas2dDraw);
+  let offscreen2d = hasFn(offscreen2dProto, HTML_IN_CANVAS_APIS.canvas2dDraw);
+  let webgl = hasFn(webglProto, HTML_IN_CANVAS_APIS.webglTextureUpload) ||
+    hasFn(webgl2Proto, HTML_IN_CANVAS_APIS.webglTextureUpload);
+  let webgpu = hasFn(gpuQueueProto, HTML_IN_CANVAS_APIS.webgpuTextureCopy);
+  let elementCapture = hasFn(canvasProto, HTML_IN_CANVAS_APIS.elementCapture);
+  let elementTransform = hasFn(canvasProto, HTML_IN_CANVAS_APIS.elementTransform) ||
+    hasFn(offscreenCanvasProto, HTML_IN_CANVAS_APIS.elementTransform);
+  let requestPaint = hasFn(canvasProto, HTML_IN_CANVAS_APIS.requestPaint);
+
+  return {
+    name: HTML_IN_CANVAS_RENDERER_NAME,
+    status: 'experimental',
+    supported: canvas2d || offscreen2d || webgl || webgpu,
+    fallback: HTML_IN_CANVAS_RENDERER.fallback,
+    modes: {
+      canvas2d,
+      offscreen2d,
+      webgl,
+      webgpu,
+    },
+    apis: {
+      ...HTML_IN_CANVAS_APIS,
+      canvas2dDrawAvailable: canvas2d,
+      offscreen2dDrawAvailable: offscreen2d,
+      webglTextureUploadAvailable: webgl,
+      webgpuTextureCopyAvailable: webgpu,
+      elementCaptureAvailable: elementCapture,
+      elementTransformAvailable: elementTransform,
+      requestPaintAvailable: requestPaint,
+      layoutSubtreeAvailable: supportsLayoutSubtree(target),
+    },
+  };
+}
+
+export function setupHtmlInCanvas(canvas) {
+  if (!canvas || typeof canvas.setAttribute !== 'function') return false;
+  canvas.setAttribute(HTML_IN_CANVAS_APIS.layoutSubtreeAttribute, '');
+  return true;
+}
+
+export function requestHtmlInCanvasPaint(canvas) {
+  if (hasFn(canvas, HTML_IN_CANVAS_APIS.requestPaint)) {
+    canvas.requestPaint();
+    return true;
+  }
+  return false;
+}
+
+export function getHtmlInCanvasChangedElements(event) {
+  if (!event || !Array.isArray(event.changedElements)) return [];
+  return event.changedElements;
+}
+
+export function captureHtmlElementImage(canvas, element) {
+  if (!hasFn(canvas, HTML_IN_CANVAS_APIS.elementCapture)) {
+    return { captured: false, reason: 'unsupported' };
+  }
+  return {
+    captured: true,
+    elementImage: canvas[HTML_IN_CANVAS_APIS.elementCapture](element),
+  };
+}
+
+export function closeHtmlElementImage(elementImage) {
+  if (!hasFn(elementImage, 'close')) return false;
+  elementImage.close();
+  return true;
+}
+
+export function drawHtmlElement2d(ctx, element, options = {}) {
+  if (!hasFn(ctx, HTML_IN_CANVAS_APIS.canvas2dDraw)) {
+    return { rendered: false, mode: 'canvas2d', reason: 'unsupported' };
+  }
+
+  let args = Array.isArray(options.rect)
+    ? [element, ...options.rect.map((value) => Number(value))]
+    : [element, Number(options.x ?? 0), Number(options.y ?? 0)];
+  if (options.width != null && options.height != null) {
+    args.push(Number(options.width), Number(options.height));
+  }
+
+  let transform = ctx[HTML_IN_CANVAS_APIS.canvas2dDraw](...args);
+  if (options.syncTransform !== false && transform && element?.style) {
+    element.style.transform = transform.toString();
+  }
+
+  return { rendered: true, mode: 'canvas2d', transform };
+}
+
+export function uploadHtmlElementToWebGLTexture(gl, element, options = {}) {
+  if (!hasFn(gl, HTML_IN_CANVAS_APIS.webglTextureUpload)) {
+    return { rendered: false, mode: 'webgl', reason: 'unsupported' };
+  }
+
+  let target = options.target ?? gl.TEXTURE_2D;
+  let level = options.level ?? 0;
+  let internalFormat = options.internalFormat ?? gl.RGBA;
+  let format = options.format ?? gl.RGBA;
+  let type = options.type ?? gl.UNSIGNED_BYTE;
+  gl[HTML_IN_CANVAS_APIS.webglTextureUpload](target, level, internalFormat, format, type, element);
+  return { rendered: true, mode: 'webgl' };
+}
+
+export function copyHtmlElementToWebGPUTexture(queue, element, options = {}) {
+  if (!hasFn(queue, HTML_IN_CANVAS_APIS.webgpuTextureCopy)) {
+    return { rendered: false, mode: 'webgpu', reason: 'unsupported' };
+  }
+  if (!options.destination) {
+    return { rendered: false, mode: 'webgpu', reason: 'missing-destination' };
+  }
+
+  let args = [element, options.destination];
+  if (options.copySize) args.push(options.copySize);
+  queue[HTML_IN_CANVAS_APIS.webgpuTextureCopy](...args);
+  return { rendered: true, mode: 'webgpu' };
+}
+
+export function getHtmlElementCanvasTransform(canvas, element, matrix) {
+  if (!hasFn(canvas, HTML_IN_CANVAS_APIS.elementTransform)) return null;
+  return canvas[HTML_IN_CANVAS_APIS.elementTransform](element, matrix) || null;
+}
+
+export function createHtmlInCanvasAdapter(options = {}) {
+  let target = options.globalThis || globalThis;
+  let support = getHtmlInCanvasSupport(target);
+
+  return {
+    ...HTML_IN_CANVAS_RENDERER,
+    support,
+    canRender(mode = 'canvas2d') {
+      return Boolean(support.modes[mode]);
+    },
+    setupCanvas: setupHtmlInCanvas,
+    requestPaint: requestHtmlInCanvasPaint,
+    getChangedElements: getHtmlInCanvasChangedElements,
+    captureElementImage: captureHtmlElementImage,
+    closeElementImage: closeHtmlElementImage,
+    draw2d: drawHtmlElement2d,
+    uploadWebGLTexture: uploadHtmlElementToWebGLTexture,
+    copyWebGPUTexture: copyHtmlElementToWebGPUTexture,
+    getElementTransform: getHtmlElementCanvasTransform,
+  };
+}

package/canvas/project-graph-builder.js

@@ -0,0 +1,440 @@
+import { NodeEditor } from '../core/Editor.js'
+import { Node } from '../core/Node.js'
+import { SubgraphNode } from '../core/SubgraphNode.js'
+import { Connection } from '../core/Connection.js'
+import { Socket, Input, Output } from '../core/Socket.js'
+import { computeAutoLayout } from './AutoLayout.js'
+import { baseName, collectSkeletonFiles, dirOf, resolveImport } from '../graph/skeleton-utils.js'
+
+// ── Socket types (for wire coloring) ──
+const S_IMPORT = new Socket('import')
+S_IMPORT.color = 'var(--sn-dot-input)'
+const S_EXPORT = new Socket('export')
+S_EXPORT.color = 'var(--sn-dot-output)'
+
+/**
+ * Build a file-level graph from skeleton data.
+ * Each file becomes a Node, each import relationship becomes a Connection.
+ *
+ * @param {object} skeleton - skeleton from get_skeleton
+ * @returns {{ editor: NodeEditor, fileMap: Map<string, string> }}
+ */
+function buildFileGraph(skeleton) {
+  const editor = new NodeEditor()
+  const fileMap = new Map() // filePath → nodeId
+  const dirMap = new Map() // dirPath → nodeId (hub nodes)
+
+  const { files, assetFiles } = collectSkeletonFiles(skeleton)
+
+  if (files.size === 0) return { editor, fileMap }
+
+  // Group files by directory
+  const dirFiles = new Map()
+  for (const file of files) {
+    const dir = dirOf(file)
+    if (!dirFiles.has(dir)) dirFiles.set(dir, [])
+    dirFiles.get(dir).push(file)
+  }
+
+  // Phase 2 candidate: create directory hub nodes when LOD zoom expansion is ready.
+  // Hub nodes without connections create disconnected groups — skip for now
+
+  // Create file nodes (standard HTML nodes with icons)
+  for (const file of files) {
+    const dir = dirOf(file)
+    const label = baseName(file)
+    const isAsset = assetFiles.has(file)
+    const node = new Node(label, {
+      type: isAsset ? 'asset' : 'file',
+      category: isAsset ? 'asset' : 'file',
+    })
+    node.params = { path: file, dir }
+
+    // Every file has one output (exports) and one input (imports)
+    node.addOutput('out', new Output(S_EXPORT, ''))
+    node.addInput('in', new Input(S_IMPORT, ''))
+
+    editor.addNode(node)
+    fileMap.set(file, node.id)
+  }
+
+  // Build import edges from skeleton.I (file-level import map)
+  // skeleton.I[file] = [source1, source2, ...]
+  const edgesAdded = new Set()
+  for (const [srcFile, sources] of Object.entries(skeleton.I || {})) {
+    const srcId = fileMap.get(srcFile)
+    if (!srcId) continue
+
+    for (const impPath of sources) {
+      // Skip node builtins and external packages
+      if (impPath.startsWith('node:') || (!impPath.startsWith('.') && !impPath.startsWith('/'))) continue
+
+      const targetFile = resolveImport(impPath, srcFile, files)
+      if (!targetFile) continue
+
+      const tgtId = fileMap.get(targetFile)
+      if (!tgtId || tgtId === srcId) continue
+
+      const edgeKey = `${srcId}->${tgtId}`
+      if (edgesAdded.has(edgeKey)) continue
+      edgesAdded.add(edgeKey)
+
+      const srcNode = editor.getNode(srcId)
+      const tgtNode = editor.getNode(tgtId)
+      try {
+        const conn = new Connection(srcNode, 'out', tgtNode, 'in')
+        // Phase 3: tag cross-directory connections as "via"
+        const srcDir = dirOf(srcFile)
+        const tgtDir = dirOf(targetFile)
+        if (srcDir !== tgtDir) {
+          conn._via = true
+          conn._srcDir = srcDir
+          conn._tgtDir = tgtDir
+        }
+        editor.addConnection(conn)
+      } catch {
+        // Skip invalid connections
+      }
+    }
+  }
+
+  // Hub node: find node with highest connectivity → module category
+  const connCounts = new Map()
+  for (const conn of editor.getConnections()) {
+    connCounts.set(conn.from, (connCounts.get(conn.from) || 0) + 1)
+    connCounts.set(conn.to, (connCounts.get(conn.to) || 0) + 1)
+  }
+  let maxConns = 0
+  let hubId = null
+  for (const [nodeId, count] of connCounts) {
+    if (count > maxConns) {
+      maxConns = count
+      hubId = nodeId
+    }
+  }
+  if (hubId) {
+    const hubNode = editor.getNode(hubId)
+    if (hubNode && hubNode.options) {
+      hubNode.options.category = 'module'
+    }
+  }
+
+  // ── Build Reverse ID Lookup ──
+  const idToPath = new Map()
+  for (const [path, id] of fileMap.entries()) idToPath.set(id, path)
+
+  return { editor, fileMap, dirMap, dirFiles, idToPath }
+}
+
+/**
+ * Build a hierarchical SubgraphNode graph:
+ *   Level 0: directories (SubgraphNode)
+ *   Level 1: files inside directories (SubgraphNode or Node)
+ *   Level 2: functions/exports inside files (Node)
+ *
+ * @param {object} skeleton
+ * @returns {{ editor: NodeEditor, fileMap: Map<string, string> }}
+ */
+function buildStructuredGraph(skeleton) {
+  const editor = new NodeEditor()
+  const fileMap = new Map()
+  const symbolMap = new Map()
+  const L = skeleton.L || {} // legend: abbreviation → full name
+  const N = skeleton.n || {} // classes: className → { f, m, ... }
+
+  // Build class-name set for classification
+  const classNames = new Set(Object.keys(N))
+  // Map file → set of class names defined in it
+  const fileClasses = new Map()
+  for (const [className, data] of Object.entries(N)) {
+    if (data.f) {
+      if (!fileClasses.has(data.f)) fileClasses.set(data.f, new Set())
+      fileClasses.get(data.f).add(className)
+    }
+  }
+
+  const { files, assetFiles } = collectSkeletonFiles(skeleton)
+
+  if (files.size === 0) return { editor, fileMap }
+
+  // Group files by directory
+  const dirFiles = new Map()
+  for (const file of files) {
+    const dir = dirOf(file)
+    if (!dirFiles.has(dir)) dirFiles.set(dir, [])
+    dirFiles.get(dir).push(file)
+  }
+
+  /**
+   * Classify a file based on its content and name
+   * @param {string} file
+   * @returns {string} category
+   */
+  function classifyFile(file) {
+    if (assetFiles.has(file)) return 'asset'
+    const name = baseName(file).toLowerCase()
+    const classes = fileClasses.get(file)
+    if (classes && classes.size > 0) return 'class'
+    if (name === 'index.js' || name === 'index.mjs') return 'module'
+    if (name.includes('test') || name.includes('spec')) return 'control'
+    if (name.includes('config') || name.includes('.json')) return 'data'
+    return 'file'
+  }
+
+  /**
+   * Resolve export abbreviation to full name
+   * @param {string} abbr
+   * @returns {string}
+   */
+  function resolveName(abbr) {
+    return L[abbr] || abbr
+  }
+
+  // ── Phase 1: Create all Directory SubgraphNodes (without nesting yet) ──
+  const dirNodeMap = new Map()    // dirPath → nodeId
+  const dirSubgraphs = new Map()  // dirPath → SubgraphNode instance
+
+  // Sort directories by depth (shortest first) so parents are created before children
+  const sortedDirs = [...dirFiles.keys()].sort((a, b) => {
+    const dA = a.split('/').filter(Boolean).length
+    const dB = b.split('/').filter(Boolean).length
+    return dA - dB || a.localeCompare(b)
+  })
+
+  for (const dir of sortedDirs) {
+    const dirFileList = dirFiles.get(dir)
+
+    // Root directory './' is NOT a node — its contents go directly into the root editor
+    const isRoot = (dir === './')
+    const targetEditor = isRoot ? editor : null
+
+    let dirSubgraph = null
+    let innerEditor
+
+    if (isRoot) {
+      innerEditor = editor
+    } else {
+      const dirLabel = dir.replace(/\/$/, '').split('/').pop() || 'root'
+      dirSubgraph = new SubgraphNode(dirLabel, {
+        category: 'directory',
+      })
+      dirSubgraph.params = { path: dir, isDirectory: true }
+      dirSubgraph.addOutput('out', new Output(S_EXPORT, ''))
+      dirSubgraph.addInput('in', new Input(S_IMPORT, ''))
+      innerEditor = dirSubgraph.getInnerEditor()
+    }
+
+    // ── File nodes inside this directory ──
+    for (const file of dirFileList) {
+      const fileLabel = baseName(file)
+      const exports = skeleton.X?.[file] || []
+      const fileCategory = classifyFile(file)
+      const classes = fileClasses.get(file)
+
+      let fileNode
+      if (exports.length > 0) {
+        fileNode = new SubgraphNode(fileLabel, {
+          category: fileCategory,
+        })
+        fileNode.params = { path: file, dir, calculatedHeight: 60 + exports.length * 50 }
+
+        const fileInnerEditor = fileNode.getInnerEditor()
+        for (const abbr of exports) {
+          const abbrId = typeof abbr === 'object' ? abbr.id : abbr
+          const fullName = resolveName(abbrId)
+          const isClass = classes && classes.has(fullName)
+          const fnNode = new Node(fullName, {
+            type: isClass ? 'class' : 'function',
+            category: isClass ? 'class' : 'function',
+          })
+          fnNode.params = { name: fullName, file }
+          symbolMap.set(fnNode.id, fnNode.params)
+          fileInnerEditor.addNode(fnNode)
+        }
+      } else {
+        fileNode = new Node(fileLabel, {
+          type: 'file',
+          category: fileCategory,
+        })
+        fileNode.params = { path: file, dir }
+      }
+
+      fileNode.addOutput('out', new Output(S_EXPORT, ''))
+      fileNode.addInput('in', new Input(S_IMPORT, ''))
+
+      innerEditor.addNode(fileNode)
+      fileMap.set(file, fileNode.id)
+    }
+
+    // ── File-level import edges within this directory ──
+    const edgesAdded = new Set()
+    for (const [srcFile, sources] of Object.entries(skeleton.I || {})) {
+      const srcId = fileMap.get(srcFile)
+      if (!srcId) continue
+      const srcDir = dirOf(srcFile)
+      if (srcDir !== dir) continue
+
+      for (const impPath of sources) {
+        if (impPath.startsWith('node:') || (!impPath.startsWith('.') && !impPath.startsWith('/'))) continue
+        const targetFile = resolveImport(impPath, srcFile, files)
+        if (!targetFile) continue
+
+        const tgtId = fileMap.get(targetFile)
+        if (!tgtId || tgtId === srcId) continue
+        if (dirOf(targetFile) !== dir) continue
+
+        const edgeKey = `${srcId}->${tgtId}`
+        if (edgesAdded.has(edgeKey)) continue
+        edgesAdded.add(edgeKey)
+
+        const srcNode = innerEditor.getNode(srcId)
+        const tgtNode = innerEditor.getNode(tgtId)
+        if (srcNode && tgtNode) {
+          try {
+            innerEditor.addConnection(new Connection(srcNode, 'out', tgtNode, 'in'))
+          } catch { /* skip */ }
+        }
+      }
+    }
+
+    if (dirSubgraph) {
+      dirSubgraphs.set(dir, dirSubgraph)
+      dirNodeMap.set(dir, dirSubgraph.id)
+    }
+  }
+
+  // ── Phase 2: Nest child directories inside parent directories ──
+  // Root './' is not a node, so its children go directly into root editor.
+  for (const dir of sortedDirs) {
+    if (dir === './') continue // root dir contents already in root editor
+    const dirSubgraph = dirSubgraphs.get(dir)
+    if (!dirSubgraph) continue
+    
+    // Find parent directory
+    const segments = dir.replace(/\/$/, '').split('/')
+    segments.pop()
+    
+    let parentDir = null
+    while (segments.length > 0) {
+      const candidate = segments.join('/') + '/'
+      if (dirSubgraphs.has(candidate)) {
+        parentDir = candidate
+        break
+      }
+      segments.pop()
+    }
+    
+    if (parentDir) {
+      // Nest inside parent's inner editor
+      const parentSubgraph = dirSubgraphs.get(parentDir)
+      parentSubgraph.getInnerEditor().addNode(dirSubgraph)
+    } else {
+      // No parent (or parent is './') → add to root editor
+      editor.addNode(dirSubgraph)
+    }
+  }
+
+  // ── Cross-directory edges ──
+  // Edges between directories that share the same parent go into that parent's inner editor.
+  // Edges between top-level directories go into the root editor.
+  const crossEdges = new Set()
+  for (const [srcFile, sources] of Object.entries(skeleton.I || {})) {
+    const srcDir = dirOf(srcFile)
+    const srcDirId = dirNodeMap.get(srcDir)
+    if (!srcDirId) continue
+
+    for (const impPath of sources) {
+      if (impPath.startsWith('node:') || (!impPath.startsWith('.') && !impPath.startsWith('/'))) continue
+      const targetFile = resolveImport(impPath, srcFile, files)
+      if (!targetFile) continue
+
+      const tgtDir = dirOf(targetFile)
+      if (tgtDir === srcDir) continue
+
+      const tgtDirId = dirNodeMap.get(tgtDir)
+      if (!tgtDirId || tgtDirId === srcDirId) continue
+
+      const edgeKey = `${srcDirId}->${tgtDirId}`
+      if (crossEdges.has(edgeKey)) continue
+      crossEdges.add(edgeKey)
+
+      // Find the common parent editor that contains BOTH directory nodes
+      // Walk up both paths to find shared ancestor
+      const srcSegments = srcDir.replace(/\/$/, '').split('/')
+      const tgtSegments = tgtDir.replace(/\/$/, '').split('/')
+      
+      // Find common prefix 
+      let commonLen = 0
+      while (commonLen < srcSegments.length && commonLen < tgtSegments.length &&
+             srcSegments[commonLen] === tgtSegments[commonLen]) {
+        commonLen++
+      }
+      const commonPath = commonLen > 0 ? srcSegments.slice(0, commonLen).join('/') + '/' : null
+      
+      // The editor that holds both nodes is the common parent's inner editor,
+      // or the root editor if they share no parent.
+      let targetEditor = editor // default: root editor
+      if (commonPath && dirSubgraphs.has(commonPath)) {
+        targetEditor = dirSubgraphs.get(commonPath).getInnerEditor()
+      }
+
+      const srcNode = targetEditor.getNode(srcDirId)
+      const tgtNode = targetEditor.getNode(tgtDirId)
+      if (srcNode && tgtNode) {
+        try {
+          targetEditor.addConnection(new Connection(srcNode, 'out', tgtNode, 'in'))
+        } catch { /* skip */ }
+      }
+    }
+  }
+
+  // ── Pre-compute inner positions for drill-down (recursive) ──
+  const symbolNodes = [] // Track internal symbol nodes for idToPath linking
+
+  function computeInnerPositions(subgraph) {
+    if (!subgraph._isSubgraph) return
+    const inner = subgraph.getInnerEditor()
+    const innerPos = computeAutoLayout(inner, { nodeHeight: 80, gapY: 100 })
+    subgraph.setInnerPositions(innerPos)
+
+    let minX = 0, maxX = 260
+    let minY = 0, maxY = 60
+    
+    for (const pos of Object.values(innerPos)) {
+      if (pos.x < minX) minX = pos.x
+      if (pos.x + 260 > maxX) maxX = pos.x + 260
+      if (pos.y < minY) minY = pos.y
+      if (pos.y + 60 > maxY) maxY = pos.y + 60
+    }
+
+    subgraph.params = subgraph.params || {}
+    subgraph.params.calculatedWidth = maxX - minX + 60
+    subgraph.params.calculatedHeight = maxY - minY + 100
+
+    for (const childNode of inner.getNodes()) {
+      if (childNode._isSubgraph) {
+        computeInnerPositions(childNode)
+        // If it's a file node (has params.path and no isDirectory), collect symbols
+        if (childNode.params?.path && !childNode.params?.isDirectory) {
+          const fileInner = childNode.getInnerEditor()
+          for (const fnNode of fileInner.getNodes()) {
+            symbolNodes.push({ id: fnNode.id, file: childNode.params.path })
+          }
+        }
+      }
+    }
+  }
+
+  for (const rootNode of editor.getNodes()) {
+    computeInnerPositions(rootNode)
+  }
+
+  // ── Build Reverse ID Lookup ──
+  const idToPath = new Map()
+  for (const [path, id] of fileMap.entries()) idToPath.set(id, path)
+  for (const [path, id] of dirNodeMap.entries()) idToPath.set(id, path)
+  for (const node of symbolNodes) idToPath.set(node.id, node.file)
+
+  return { editor, fileMap, dirFiles, dirNodeMap, idToPath, symbolMap }
+}
+export { buildFileGraph, buildStructuredGraph }