@wire-dsl/engine 0.0.3 → 0.1.0

package/dist/index.cjs

@@ -23,11 +23,17 @@ __export(index_exports, {
   IRGenerator: () => IRGenerator,
   LayoutEngine: () => LayoutEngine,
   SVGRenderer: () => SVGRenderer,
+  SourceMapBuilder: () => SourceMapBuilder,
+  SourceMapResolver: () => SourceMapResolver,
   buildSVG: () => buildSVG,
   calculateLayout: () => calculateLayout,
   createSVGElement: () => createSVGElement,
   generateIR: () => generateIR,
+  generateStableNodeId: () => generateStableNodeId,
+  getTypeFromNodeId: () => getTypeFromNodeId,
+  isValidNodeId: () => isValidNodeId,
   parseWireDSL: () => parseWireDSL,
+  parseWireDSLWithSourceMap: () => parseWireDSLWithSourceMap,
   renderToSVG: () => renderToSVG,
   resolveGridPosition: () => resolveGridPosition,
   version: () => version
@@ -36,6 +42,418 @@ module.exports = __toCommonJS(index_exports);
 
 // src/parser/index.ts
 var import_chevrotain = require("chevrotain");
+
+// src/sourcemap/builder.ts
+var SourceMapBuilder = class {
+  // Counter per type-subtype
+  constructor(filePath = "<input>", sourceCode = "") {
+    this.entries = [];
+    this.parentStack = [];
+    // Stack of parent nodeIds for hierarchy tracking
+    this.counters = /* @__PURE__ */ new Map();
+    this.filePath = filePath;
+    this.sourceCode = sourceCode;
+  }
+  /**
+   * Add a node to the SourceMap
+   * Generates semantic IDs like: project, screen-0, component-button-1, layout-stack-0
+   * 
+   * @param type - Type of AST node
+   * @param tokens - Captured tokens from parser
+   * @param metadata - Optional metadata (name, layoutType, componentType)
+   * @returns Generated nodeId
+   */
+  addNode(type, tokens, metadata) {
+    const range = this.calculateRange(tokens);
+    const nodeId = this.generateNodeId(type, metadata);
+    const parentId = this.parentStack.length > 0 ? this.parentStack[this.parentStack.length - 1] : null;
+    const keywordRange = tokens.keyword ? this.tokenToRange(tokens.keyword) : void 0;
+    const nameRange = tokens.name ? this.tokenToRange(tokens.name) : void 0;
+    const bodyRange = tokens.body ? this.calculateBodyRange(tokens.body) : void 0;
+    const entry = {
+      nodeId,
+      type,
+      range,
+      filePath: this.filePath,
+      parentId,
+      keywordRange,
+      nameRange,
+      bodyRange,
+      ...metadata
+      // Spread name, layoutType, componentType, isUserDefined if provided
+    };
+    this.entries.push(entry);
+    return nodeId;
+  }
+  /**
+   * Generate semantic node ID based on type and subtype
+   * Format: {type}-{subtype}-{counter} or {type}-{counter}
+   * 
+   * Examples:
+   * - project → "project"
+   * - theme → "theme"
+   * - mocks → "mocks"
+   * - colors → "colors"
+   * - screen → "screen-0", "screen-1"
+   * - component Button → "component-button-0", "component-button-1"
+   * - layout stack → "layout-stack-0", "layout-stack-1"
+   * - cell → "cell-0", "cell-1"
+   * - component-definition → "define-MyButton"
+   */
+  generateNodeId(type, metadata) {
+    switch (type) {
+      case "project":
+        return "project";
+      case "theme":
+        return "theme";
+      case "mocks":
+        return "mocks";
+      case "colors":
+        return "colors";
+      case "screen":
+        const screenIdx = this.counters.get("screen") || 0;
+        this.counters.set("screen", screenIdx + 1);
+        return `screen-${screenIdx}`;
+      case "component": {
+        const componentType = metadata?.componentType || "unknown";
+        const key = `component-${componentType.toLowerCase()}`;
+        const idx = this.counters.get(key) || 0;
+        this.counters.set(key, idx + 1);
+        return `${key}-${idx}`;
+      }
+      case "layout": {
+        const layoutType = metadata?.layoutType || "unknown";
+        const key = `layout-${layoutType.toLowerCase()}`;
+        const idx = this.counters.get(key) || 0;
+        this.counters.set(key, idx + 1);
+        return `${key}-${idx}`;
+      }
+      case "cell": {
+        const idx = this.counters.get("cell") || 0;
+        this.counters.set("cell", idx + 1);
+        return `cell-${idx}`;
+      }
+      case "component-definition":
+        return `define-${metadata?.name || "unknown"}`;
+      default:
+        return `${type}-0`;
+    }
+  }
+  /**
+   * Add a property to an existing node in the SourceMap
+   * Captures precise ranges for property name and value for surgical editing
+   * 
+   * @param nodeId - ID of the node that owns this property
+   * @param propertyName - Name of the property (e.g., "text", "direction")
+   * @param propertyValue - Parsed value of the property
+   * @param tokens - Captured tokens for the property
+   * @returns The PropertySourceMap entry created
+   */
+  addProperty(nodeId, propertyName, propertyValue, tokens) {
+    const entry = this.entries.find((e) => e.nodeId === nodeId);
+    if (!entry) {
+      throw new Error(`Cannot add property to non-existent node: ${nodeId}`);
+    }
+    if (!entry.properties) {
+      entry.properties = {};
+    }
+    let nameRange;
+    let valueRange;
+    let fullRange;
+    if (tokens.name && tokens.value) {
+      nameRange = {
+        start: this.getTokenStart(tokens.name),
+        end: this.getTokenEnd(tokens.name)
+      };
+      valueRange = {
+        start: this.getTokenStart(tokens.value),
+        end: this.getTokenEnd(tokens.value)
+      };
+      fullRange = {
+        start: nameRange.start,
+        end: valueRange.end
+      };
+    } else if (tokens.full) {
+      fullRange = {
+        start: this.getTokenStart(tokens.full),
+        end: this.getTokenEnd(tokens.full)
+      };
+      nameRange = fullRange;
+      valueRange = fullRange;
+    } else {
+      throw new Error(`Invalid tokens for property ${propertyName}: need either name+value or full`);
+    }
+    const propertySourceMap = {
+      name: propertyName,
+      value: propertyValue,
+      range: fullRange,
+      nameRange,
+      valueRange
+    };
+    entry.properties[propertyName] = propertySourceMap;
+    return propertySourceMap;
+  }
+  /**
+   * Push a parent onto the stack (when entering a container node)
+   */
+  pushParent(nodeId) {
+    this.parentStack.push(nodeId);
+  }
+  /**
+   * Pop a parent from the stack (when exiting a container node)
+   */
+  popParent() {
+    this.parentStack.pop();
+  }
+  /**
+   * Get the current parent nodeId (or null if at root)
+   */
+  getCurrentParent() {
+    return this.parentStack.length > 0 ? this.parentStack[this.parentStack.length - 1] : null;
+  }
+  /**
+   * Build and return the final SourceMap
+   */
+  build() {
+    this.calculateAllInsertionPoints();
+    return this.entries;
+  }
+  /**
+   * Calculate insertionPoints for all container nodes
+   * Container nodes: project, screen, layout, cell, component-definition
+   */
+  calculateAllInsertionPoints() {
+    const containerTypes = [
+      "project",
+      "screen",
+      "layout",
+      "cell",
+      "component-definition"
+    ];
+    for (const entry of this.entries) {
+      if (containerTypes.includes(entry.type)) {
+        entry.insertionPoint = this.calculateInsertionPoint(entry.nodeId);
+      }
+    }
+  }
+  /**
+   * Calculate CodeRange from captured tokens
+   * Finds the earliest start and latest end among all tokens
+   */
+  calculateRange(tokens) {
+    const positions = [];
+    if (tokens.keyword) {
+      positions.push(this.getTokenStart(tokens.keyword));
+      positions.push(this.getTokenEnd(tokens.keyword));
+    }
+    if (tokens.name) {
+      positions.push(this.getTokenStart(tokens.name));
+      positions.push(this.getTokenEnd(tokens.name));
+    }
+    if (tokens.paramList) {
+      positions.push(this.getTokenStart(tokens.paramList));
+      positions.push(this.getTokenEnd(tokens.paramList));
+    }
+    if (tokens.body) {
+      positions.push(this.getTokenStart(tokens.body));
+      positions.push(this.getTokenEnd(tokens.body));
+    }
+    if (tokens.properties && tokens.properties.length > 0) {
+      tokens.properties.forEach((prop) => {
+        positions.push(this.getTokenStart(prop));
+        positions.push(this.getTokenEnd(prop));
+      });
+    }
+    if (positions.length === 0) {
+      const fallbackToken = tokens.keyword || tokens.name;
+      return {
+        start: this.getTokenStart(fallbackToken),
+        end: this.getTokenEnd(fallbackToken)
+      };
+    }
+    positions.sort((a, b) => {
+      if (a.line !== b.line) return a.line - b.line;
+      return a.column - b.column;
+    });
+    const start = positions[0];
+    const end = positions[positions.length - 1];
+    return { start, end };
+  }
+  /**
+   * Convert a single token to CodeRange
+   */
+  tokenToRange(token) {
+    return {
+      start: this.getTokenStart(token),
+      end: this.getTokenEnd(token)
+    };
+  }
+  /**
+   * Calculate body range from closing brace token
+   * Body range typically spans from opening brace to closing brace
+   */
+  calculateBodyRange(closingBrace) {
+    return this.tokenToRange(closingBrace);
+  }
+  /**
+   * Extract the first real token from a CST node (earliest by offset)
+   * Recursively searches through children to find the token with smallest offset
+   */
+  getFirstToken(cstNode) {
+    if (!cstNode?.children) {
+      return cstNode;
+    }
+    let earliestToken = null;
+    let earliestOffset = Infinity;
+    for (const childArray of Object.values(cstNode.children)) {
+      if (Array.isArray(childArray)) {
+        for (const child of childArray) {
+          if (!child) continue;
+          let token;
+          if (child.children) {
+            token = this.getFirstToken(child);
+          } else {
+            token = child;
+          }
+          if (token?.startOffset !== void 0 && token.startOffset < earliestOffset) {
+            earliestToken = token;
+            earliestOffset = token.startOffset;
+          }
+        }
+      }
+    }
+    return earliestToken;
+  }
+  /**
+   * Extract the last real token from a CST node (latest by offset)
+   * Recursively searches through children to find the token with largest offset
+   */
+  getLastToken(cstNode) {
+    if (!cstNode?.children) {
+      return cstNode;
+    }
+    let latestToken = null;
+    let latestOffset = -1;
+    for (const childArray of Object.values(cstNode.children)) {
+      if (Array.isArray(childArray)) {
+        for (const child of childArray) {
+          if (!child) continue;
+          let token;
+          if (child.children) {
+            token = this.getLastToken(child);
+          } else {
+            token = child;
+          }
+          const tokenOffset = token?.endOffset ?? token?.startOffset;
+          if (tokenOffset !== void 0 && tokenOffset > latestOffset) {
+            latestToken = token;
+            latestOffset = tokenOffset;
+          }
+        }
+      }
+    }
+    return latestToken;
+  }
+  /**
+   * Extract start position from a Chevrotain token or CST node
+   */
+  getTokenStart(token) {
+    if (token?.children) {
+      const firstToken = this.getFirstToken(token);
+      if (firstToken) {
+        return this.getTokenStart(firstToken);
+      }
+    }
+    return {
+      line: token.startLine || 1,
+      column: token.startColumn !== void 0 ? token.startColumn - 1 : 0,
+      // Chevrotain is 1-based, we want 0-based
+      offset: token.startOffset
+    };
+  }
+  /**
+   * Extract end position from a Chevrotain token or CST node
+   */
+  getTokenEnd(token) {
+    if (token?.children) {
+      const lastToken = this.getLastToken(token);
+      if (lastToken) {
+        return this.getTokenEnd(lastToken);
+      }
+    }
+    return {
+      line: token.endLine || token.startLine || 1,
+      column: token.endColumn !== void 0 ? token.endColumn : token.startColumn || 0,
+      // Chevrotain columns are 1-based
+      offset: token.endOffset
+    };
+  }
+  /**
+   * Reset the builder (for reuse)
+   */
+  reset(filePath = "<input>", sourceCode = "") {
+    this.entries = [];
+    this.filePath = filePath;
+    this.sourceCode = sourceCode;
+    this.parentStack = [];
+    this.counters.clear();
+  }
+  /**
+   * Calculate insertion point for adding new children to a container node
+   * 
+   * Strategy:
+   * - If node has children: insert after last child, preserve indentation
+   * - If node is empty: insert inside body, use parent indentation + 2 spaces
+   * 
+   * @param nodeId - ID of the container node
+   * @returns InsertionPoint with line, column, indentation, and optional after
+   */
+  calculateInsertionPoint(nodeId) {
+    const node = this.entries.find((e) => e.nodeId === nodeId);
+    if (!node) {
+      return void 0;
+    }
+    const children = this.entries.filter((e) => e.parentId === nodeId);
+    if (children.length > 0) {
+      const lastChild = children[children.length - 1];
+      const insertLine = lastChild.range.end.line;
+      const indentation2 = this.extractIndentation(lastChild.range.start.line);
+      return {
+        line: insertLine,
+        column: 0,
+        // Start of next line
+        indentation: indentation2,
+        after: lastChild.nodeId
+      };
+    }
+    const bodyEndLine = node.range.end.line;
+    const parentIndentation = this.extractIndentation(node.range.start.line);
+    const indentation = parentIndentation + "  ";
+    return {
+      line: bodyEndLine,
+      // Insert right before closing brace
+      column: 0,
+      indentation
+    };
+  }
+  /**
+   * Extract indentation (leading whitespace) from a line
+   */
+  extractIndentation(lineNumber) {
+    if (!this.sourceCode) {
+      return "";
+    }
+    const lines = this.sourceCode.split("\n");
+    if (lineNumber < 1 || lineNumber > lines.length) {
+      return "";
+    }
+    const line = lines[lineNumber - 1];
+    const match = line.match(/^(\s*)/);
+    return match ? match[1] : "";
+  }
+};
+
+// src/parser/index.ts
 var Project = (0, import_chevrotain.createToken)({ name: "Project", pattern: /project/ });
 var Screen = (0, import_chevrotain.createToken)({ name: "Screen", pattern: /screen/ });
 var Layout = (0, import_chevrotain.createToken)({ name: "Layout", pattern: /layout/ });
@@ -503,6 +921,420 @@ var WireDSLVisitor = class extends BaseCstVisitor {
     return params;
   }
 };
+var WireDSLVisitorWithSourceMap = class extends WireDSLVisitor {
+  constructor(sourceMapBuilder) {
+    super();
+    this.definedComponentNames = /* @__PURE__ */ new Set();
+    this.sourceMapBuilder = sourceMapBuilder;
+  }
+  project(ctx) {
+    const projectName = ctx.projectName[0].image.slice(1, -1);
+    const theme = {};
+    const mocks = {};
+    const colors = {};
+    const definedComponents = [];
+    const screens = [];
+    const tokens = {
+      keyword: ctx.Project[0],
+      name: ctx.projectName[0],
+      body: ctx.RCurly[0]
+    };
+    const ast = {
+      type: "project",
+      name: projectName,
+      theme: {},
+      mocks: {},
+      colors: {},
+      definedComponents: [],
+      // Will be filled after push
+      screens: []
+      // Will be filled after push
+    };
+    if (this.sourceMapBuilder) {
+      const nodeId = this.sourceMapBuilder.addNode(
+        "project",
+        tokens,
+        { name: projectName }
+      );
+      ast._meta = { nodeId };
+      this.sourceMapBuilder.pushParent(nodeId);
+    }
+    if (ctx.themeDecl && ctx.themeDecl.length > 0) {
+      const themeBlock = this.visit(ctx.themeDecl[0]);
+      Object.assign(ast.theme, themeBlock);
+    }
+    if (ctx.mocksDecl && ctx.mocksDecl.length > 0) {
+      const mocksBlock = this.visit(ctx.mocksDecl[0]);
+      Object.assign(ast.mocks, mocksBlock);
+    }
+    if (ctx.colorsDecl && ctx.colorsDecl.length > 0) {
+      const colorsBlock = this.visit(ctx.colorsDecl[0]);
+      Object.assign(ast.colors, colorsBlock);
+    }
+    if (ctx.definedComponent) {
+      ctx.definedComponent.forEach((comp) => {
+        ast.definedComponents.push(this.visit(comp));
+      });
+    }
+    if (ctx.screen) {
+      ctx.screen.forEach((screen) => {
+        ast.screens.push(this.visit(screen));
+      });
+    }
+    return ast;
+  }
+  screen(ctx) {
+    const params = ctx.paramList ? this.visit(ctx.paramList[0]) : {};
+    const screenName = ctx.screenName[0].image;
+    const tokens = {
+      keyword: ctx.Screen[0],
+      name: ctx.screenName[0],
+      paramList: ctx.paramList?.[0],
+      body: ctx.RCurly[0]
+    };
+    const ast = {
+      type: "screen",
+      name: screenName,
+      params,
+      layout: {}
+      // Will be filled after push
+    };
+    if (this.sourceMapBuilder) {
+      const nodeId = this.sourceMapBuilder.addNode(
+        "screen",
+        tokens,
+        { name: screenName }
+      );
+      ast._meta = { nodeId };
+      this.sourceMapBuilder.pushParent(nodeId);
+    }
+    ast.layout = this.visit(ctx.layout[0]);
+    if (this.sourceMapBuilder) {
+      this.sourceMapBuilder.popParent();
+    }
+    return ast;
+  }
+  layout(ctx) {
+    const layoutType = ctx.layoutType[0].image;
+    const params = {};
+    if (ctx.paramList) {
+      const paramResult = this.visit(ctx.paramList);
+      Object.assign(params, paramResult);
+    }
+    const tokens = {
+      keyword: ctx.Layout[0],
+      name: ctx.layoutType[0],
+      paramList: ctx.paramList?.[0],
+      body: ctx.RCurly[0]
+    };
+    const ast = {
+      type: "layout",
+      layoutType,
+      params,
+      children: []
+      // Will be filled after push
+    };
+    if (this.sourceMapBuilder) {
+      const nodeId = this.sourceMapBuilder.addNode(
+        "layout",
+        tokens,
+        { layoutType }
+      );
+      ast._meta = { nodeId };
+      if (ctx.paramList && ctx.paramList[0]?.children?.property) {
+        ctx.paramList[0].children.property.forEach((propCtx) => {
+          const propResult = this.visit(propCtx);
+          this.sourceMapBuilder.addProperty(
+            nodeId,
+            propResult.key,
+            propResult.value,
+            {
+              name: propCtx.children.propKey[0],
+              value: propCtx.children.propValue[0]
+            }
+          );
+        });
+      }
+      this.sourceMapBuilder.pushParent(nodeId);
+    }
+    const childNodes = [];
+    if (ctx.component) {
+      ctx.component.forEach((comp) => {
+        const startToken = comp.children?.Component?.[0] || comp.children?.componentType?.[0];
+        childNodes.push({ type: "component", node: comp, index: startToken.startOffset });
+      });
+    }
+    if (ctx.layout) {
+      ctx.layout.forEach((layout) => {
+        const startToken = layout.children?.Layout?.[0] || layout.children?.layoutType?.[0];
+        childNodes.push({ type: "layout", node: layout, index: startToken.startOffset });
+      });
+    }
+    if (ctx.cell) {
+      ctx.cell.forEach((cell) => {
+        const startToken = cell.children?.Cell?.[0];
+        childNodes.push({ type: "cell", node: cell, index: startToken.startOffset });
+      });
+    }
+    childNodes.sort((a, b) => a.index - b.index);
+    childNodes.forEach((item) => {
+      ast.children.push(this.visit(item.node));
+    });
+    if (this.sourceMapBuilder) {
+      this.sourceMapBuilder.popParent();
+    }
+    return ast;
+  }
+  cell(ctx) {
+    const props = {};
+    if (ctx.property) {
+      ctx.property.forEach((prop) => {
+        const result = this.visit(prop);
+        props[result.key] = result.value;
+      });
+    }
+    const tokens = {
+      keyword: ctx.Cell[0],
+      properties: ctx.property || [],
+      body: ctx.RCurly[0]
+    };
+    const ast = {
+      type: "cell",
+      props,
+      children: []
+      // Will be filled after push
+    };
+    if (this.sourceMapBuilder) {
+      const nodeId = this.sourceMapBuilder.addNode(
+        "cell",
+        tokens
+      );
+      ast._meta = { nodeId };
+      if (ctx.property) {
+        ctx.property.forEach((propCtx) => {
+          const propResult = this.visit(propCtx);
+          this.sourceMapBuilder.addProperty(
+            nodeId,
+            propResult.key,
+            propResult.value,
+            {
+              name: propCtx.children.propKey[0],
+              value: propCtx.children.propValue[0]
+            }
+          );
+        });
+      }
+      this.sourceMapBuilder.pushParent(nodeId);
+    }
+    const childNodes = [];
+    if (ctx.component) {
+      ctx.component.forEach((comp) => {
+        const startToken = comp.children?.Component?.[0] || comp.children?.componentType?.[0];
+        childNodes.push({ type: "component", node: comp, index: startToken.startOffset });
+      });
+    }
+    if (ctx.layout) {
+      ctx.layout.forEach((layout) => {
+        const startToken = layout.children?.Layout?.[0] || layout.children?.layoutType?.[0];
+        childNodes.push({ type: "layout", node: layout, index: startToken.startOffset });
+      });
+    }
+    childNodes.sort((a, b) => a.index - b.index);
+    childNodes.forEach((item) => {
+      ast.children.push(this.visit(item.node));
+    });
+    if (this.sourceMapBuilder) {
+      this.sourceMapBuilder.popParent();
+    }
+    return ast;
+  }
+  component(ctx) {
+    const tokens = {
+      keyword: ctx.Component[0],
+      name: ctx.componentType[0],
+      properties: ctx.property || []
+    };
+    const ast = super.component(ctx);
+    if (this.sourceMapBuilder) {
+      const isUserDefined = this.definedComponentNames.has(ast.componentType);
+      const nodeId = this.sourceMapBuilder.addNode(
+        "component",
+        tokens,
+        {
+          componentType: ast.componentType,
+          isUserDefined
+        }
+      );
+      ast._meta = { nodeId };
+      if (ctx.property) {
+        ctx.property.forEach((propCtx) => {
+          const propResult = this.visit(propCtx);
+          this.sourceMapBuilder.addProperty(
+            nodeId,
+            propResult.key,
+            propResult.value,
+            {
+              name: propCtx.children.propKey[0],
+              value: propCtx.children.propValue[0]
+            }
+          );
+        });
+      }
+    }
+    return ast;
+  }
+  definedComponent(ctx) {
+    const name = ctx.componentName[0].image.slice(1, -1);
+    this.definedComponentNames.add(name);
+    const tokens = {
+      keyword: ctx.Define[0],
+      name: ctx.componentName[0],
+      body: ctx.RCurly[0]
+    };
+    let body;
+    const ast = {
+      type: "definedComponent",
+      name,
+      body: {}
+      // Will be filled after push
+    };
+    if (this.sourceMapBuilder) {
+      const nodeId = this.sourceMapBuilder.addNode(
+        "component-definition",
+        tokens,
+        { name }
+      );
+      ast._meta = { nodeId };
+      this.sourceMapBuilder.pushParent(nodeId);
+    }
+    if (ctx.layout && ctx.layout.length > 0) {
+      body = this.visit(ctx.layout[0]);
+    } else if (ctx.component && ctx.component.length > 0) {
+      body = this.visit(ctx.component[0]);
+    } else {
+      throw new Error(`Defined component "${name}" must contain either a layout or component`);
+    }
+    ast.body = body;
+    if (this.sourceMapBuilder) {
+      this.sourceMapBuilder.popParent();
+    }
+    return ast;
+  }
+  // Override themeDecl to capture theme block in SourceMap
+  themeDecl(ctx) {
+    const theme = {};
+    const tokens = {
+      keyword: ctx.Theme[0],
+      body: ctx.RCurly[0]
+    };
+    if (this.sourceMapBuilder) {
+      const nodeId = this.sourceMapBuilder.addNode(
+        "theme",
+        tokens,
+        { name: "theme" }
+      );
+      if (ctx.themeProperty) {
+        ctx.themeProperty.forEach((propCtx) => {
+          const { key, value } = this.visit(propCtx);
+          theme[key] = value;
+          this.sourceMapBuilder.addProperty(
+            nodeId,
+            key,
+            value,
+            {
+              name: propCtx.children.themeKey[0],
+              value: propCtx.children.themeValue[0]
+            }
+          );
+        });
+      }
+    } else {
+      if (ctx.themeProperty) {
+        ctx.themeProperty.forEach((prop) => {
+          const { key, value } = this.visit(prop);
+          theme[key] = value;
+        });
+      }
+    }
+    return theme;
+  }
+  // Override mocksDecl to capture mocks block in SourceMap
+  mocksDecl(ctx) {
+    const mocks = {};
+    const tokens = {
+      keyword: ctx.Mocks[0],
+      body: ctx.RCurly[0]
+    };
+    if (this.sourceMapBuilder) {
+      const nodeId = this.sourceMapBuilder.addNode(
+        "mocks",
+        tokens,
+        { name: "mocks" }
+      );
+      if (ctx.mockEntry) {
+        ctx.mockEntry.forEach((entryCtx) => {
+          const { key, value } = this.visit(entryCtx);
+          mocks[key] = value;
+          this.sourceMapBuilder.addProperty(
+            nodeId,
+            key,
+            value,
+            {
+              name: entryCtx.children.mockKey[0],
+              value: entryCtx.children.mockValue[0]
+            }
+          );
+        });
+      }
+    } else {
+      if (ctx.mockEntry) {
+        ctx.mockEntry.forEach((entry) => {
+          const { key, value } = this.visit(entry);
+          mocks[key] = value;
+        });
+      }
+    }
+    return mocks;
+  }
+  // Override colorsDecl to capture colors block in SourceMap
+  colorsDecl(ctx) {
+    const colors = {};
+    const tokens = {
+      keyword: ctx.Colors[0],
+      body: ctx.RCurly[0]
+    };
+    if (this.sourceMapBuilder) {
+      const nodeId = this.sourceMapBuilder.addNode(
+        "colors",
+        tokens,
+        { name: "colors" }
+      );
+      if (ctx.colorEntry) {
+        ctx.colorEntry.forEach((entryCtx) => {
+          const { key, value } = this.visit(entryCtx);
+          colors[key] = value;
+          this.sourceMapBuilder.addProperty(
+            nodeId,
+            key,
+            value,
+            {
+              name: entryCtx.children.colorKey[0],
+              value: entryCtx.children.colorValue[0]
+            }
+          );
+        });
+      }
+    } else {
+      if (ctx.colorEntry) {
+        ctx.colorEntry.forEach((entry) => {
+          const { key, value } = this.visit(entry);
+          colors[key] = value;
+        });
+      }
+    }
+    return colors;
+  }
+};
 var visitor = new WireDSLVisitor();
 function parseWireDSL(input) {
   const lexResult = WireDSLLexer.tokenize(input);
@@ -520,6 +1352,30 @@ ${parserInstance.errors.map((e) => e.message).join("\n")}`);
   validateComponentDefinitionCycles(ast);
   return ast;
 }
+function parseWireDSLWithSourceMap(input, filePath = "<input>") {
+  const lexResult = WireDSLLexer.tokenize(input);
+  if (lexResult.errors.length > 0) {
+    throw new Error(`Lexer errors:
+${lexResult.errors.map((e) => e.message).join("\n")}`);
+  }
+  parserInstance.input = lexResult.tokens;
+  const cst = parserInstance.project();
+  if (parserInstance.errors.length > 0) {
+    throw new Error(`Parser errors:
+${parserInstance.errors.map((e) => e.message).join("\n")}`);
+  }
+  const sourceMapBuilder = new SourceMapBuilder(filePath, input);
+  const visitorWithSourceMap = new WireDSLVisitorWithSourceMap(sourceMapBuilder);
+  const ast = visitorWithSourceMap.visit(cst);
+  validateComponentDefinitionCycles(ast);
+  const sourceMap = sourceMapBuilder.build();
+  return {
+    ast,
+    sourceMap,
+    errors: []
+    // No errors if we got here (errors throw exceptions)
+  };
+}
 function validateComponentDefinitionCycles(ast) {
   if (!ast.definedComponents || ast.definedComponents.length === 0) {
     return;
@@ -620,7 +1476,8 @@ var IRStyleSchema = import_zod.z.object({
   background: import_zod.z.string().optional()
 });
 var IRMetaSchema = import_zod.z.object({
-  source: import_zod.z.string().optional()
+  source: import_zod.z.string().optional(),
+  nodeId: import_zod.z.string().optional()
 });
 var IRContainerNodeSchema = import_zod.z.object({
   id: import_zod.z.string(),
@@ -866,7 +1723,10 @@ Define these components with: define Component "Name" { ... }`
       params: this.cleanParams(layout.params),
       children: childRefs,
       style,
-      meta: {}
+      meta: {
+        nodeId: layout._meta?.nodeId
+        // Pass SourceMap nodeId from AST
+      }
     };
     this.nodes[nodeId] = containerNode;
     return nodeId;
@@ -892,7 +1752,11 @@ Define these components with: define Component "Name" { ... }`
       children: childRefs,
       style: { padding: "none" },
       // Cells have no padding by default - grid gap handles spacing
-      meta: { source: "cell" }
+      meta: {
+        source: "cell",
+        nodeId: cell._meta?.nodeId
+        // Pass SourceMap nodeId from AST
+      }
     };
     this.nodes[nodeId] = containerNode;
     return nodeId;
@@ -944,7 +1808,10 @@ Define these components with: define Component "Name" { ... }`
       componentType: component.componentType,
       props: component.props,
       style: {},
-      meta: {}
+      meta: {
+        nodeId: component._meta?.nodeId
+        // Pass SourceMap nodeId from AST
+      }
     };
     this.nodes[nodeId] = componentNode;
     return nodeId;
@@ -1897,15 +2764,30 @@ var SVGRenderer = class {
     if (!node || !pos) return;
     this.renderedNodeIds.add(nodeId);
     if (node.kind === "container") {
+      const containerGroup = [];
+      const hasNodeId = node.meta?.nodeId;
+      if (hasNodeId) {
+        containerGroup.push(`<g${this.getDataNodeId(node)}>`);
+      }
+      const needsClickableArea = hasNodeId && node.containerType !== "panel" && node.containerType !== "card";
+      if (needsClickableArea) {
+        containerGroup.push(
+          `<rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="transparent" stroke="none" pointer-events="all"/>`
+        );
+      }
       if (node.containerType === "panel") {
-        this.renderPanelBorder(node, pos, output);
+        this.renderPanelBorder(node, pos, containerGroup);
       }
       if (node.containerType === "card") {
-        this.renderCardBorder(node, pos, output);
+        this.renderCardBorder(node, pos, containerGroup);
       }
       node.children.forEach((childRef) => {
-        this.renderNode(childRef.ref, output);
+        this.renderNode(childRef.ref, containerGroup);
       });
+      if (hasNodeId) {
+        containerGroup.push("</g>");
+      }
+      output.push(...containerGroup);
     } else if (node.kind === "component") {
       const componentSvg = this.renderComponent(node, pos);
       if (componentSvg) {
@@ -1982,7 +2864,7 @@ var SVGRenderer = class {
   renderHeading(node, pos) {
     const text = String(node.props.text || "Heading");
     const fontSize = 20;
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <text x="${pos.x}" y="${pos.y + pos.height / 2 + 6}" 
           font-family="system-ui, -apple-system, sans-serif" 
           font-size="${fontSize}" 
@@ -2000,7 +2882,7 @@ var SVGRenderer = class {
     const fontSizeMap = { "sm": 12, "md": 14, "lg": 16 };
     const fontSize = fontSizeMap[size] || 14;
     const buttonWidth = Math.max(pos.width, 60);
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${pos.y}" 
           width="${buttonWidth}" height="${pos.height}" 
           rx="6" 
@@ -2018,7 +2900,7 @@ var SVGRenderer = class {
   renderInput(node, pos) {
     const label = String(node.props.label || "");
     const placeholder = String(node.props.placeholder || "");
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     ${label ? `<text x="${pos.x + 8}" y="${pos.y - 6}" 
           font-family="system-ui, -apple-system, sans-serif" 
           font-size="12" 
@@ -2050,7 +2932,7 @@ var SVGRenderer = class {
     } else {
       titleY = pos.y + pos.height / 2 + titleLineHeight / 2 - 4;
     }
-    let svg = `<g>
+    let svg = `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           fill="${this.renderTheme.cardBg}" 
@@ -2183,7 +3065,7 @@ var SVGRenderer = class {
       });
       mockRows.push(row);
     }
-    let svg = `<g>
+    let svg = `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           rx="8" 
@@ -2287,7 +3169,7 @@ var SVGRenderer = class {
   }
   renderChartPlaceholder(node, pos) {
     const type = String(node.props.type || "bar");
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           rx="8" 
@@ -2307,7 +3189,7 @@ var SVGRenderer = class {
   renderText(node, pos) {
     const text = String(node.props.content || "Text content");
     const fontSize = 14;
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <text x="${pos.x}" y="${pos.y + 16}" 
           font-family="system-ui, -apple-system, sans-serif" 
           font-size="${fontSize}" 
@@ -2316,7 +3198,7 @@ var SVGRenderer = class {
   }
   renderLabel(node, pos) {
     const text = String(node.props.text || "Label");
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <text x="${pos.x}" y="${pos.y + 12}" 
           font-family="system-ui, -apple-system, sans-serif" 
           font-size="12" 
@@ -2325,7 +3207,7 @@ var SVGRenderer = class {
   }
   renderCode(node, pos) {
     const code = String(node.props.code || "const x = 42;");
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           rx="4" 
@@ -2344,7 +3226,7 @@ var SVGRenderer = class {
   renderTextarea(node, pos) {
     const label = String(node.props.label || "");
     const placeholder = String(node.props.placeholder || "Enter text...");
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     ${label ? `<text x="${pos.x}" y="${pos.y - 6}" 
           font-family="system-ui, -apple-system, sans-serif" 
           font-size="12" 
@@ -2364,7 +3246,7 @@ var SVGRenderer = class {
   renderSelect(node, pos) {
     const label = String(node.props.label || "");
     const placeholder = String(node.props.placeholder || "Select...");
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     ${label ? `<text x="${pos.x}" y="${pos.y - 6}" 
           font-family="system-ui, -apple-system, sans-serif" 
           font-size="12" 
@@ -2390,7 +3272,7 @@ var SVGRenderer = class {
     const checked = String(node.props.checked || "false").toLowerCase() === "true";
     const checkboxSize = 18;
     const checkboxY = pos.y + pos.height / 2 - checkboxSize / 2;
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${checkboxY}" 
           width="${checkboxSize}" height="${checkboxSize}" 
           rx="4" 
@@ -2413,7 +3295,7 @@ var SVGRenderer = class {
     const checked = String(node.props.checked || "false").toLowerCase() === "true";
     const radioSize = 16;
     const radioY = pos.y + pos.height / 2 - radioSize / 2;
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <circle cx="${pos.x + radioSize / 2}" cy="${radioY + radioSize / 2}" 
             r="${radioSize / 2}" 
             fill="${this.renderTheme.cardBg}" 
@@ -2434,7 +3316,7 @@ var SVGRenderer = class {
     const toggleWidth = 40;
     const toggleHeight = 20;
     const toggleY = pos.y + pos.height / 2 - toggleHeight / 2;
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${toggleY}" 
           width="${toggleWidth}" height="${toggleHeight}" 
           rx="10" 
@@ -2466,7 +3348,7 @@ var SVGRenderer = class {
     const itemHeight = 40;
     const padding = 16;
     const titleHeight = 40;
-    let svg = `<g>
+    let svg = `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           fill="${this.renderTheme.cardBg}" 
@@ -2501,7 +3383,7 @@ var SVGRenderer = class {
     const itemsStr = String(node.props.items || "");
     const tabs = itemsStr ? itemsStr.split(",").map((t) => t.trim()) : ["Tab 1", "Tab 2", "Tab 3"];
     const tabWidth = pos.width / tabs.length;
-    let svg = `<g>
+    let svg = `<g${this.getDataNodeId(node)}>
     <!-- Tab headers -->`;
     tabs.forEach((tab, i) => {
       const tabX = pos.x + i * tabWidth;
@@ -2530,7 +3412,7 @@ var SVGRenderer = class {
     return svg;
   }
   renderDivider(node, pos) {
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <line x1="${pos.x}" y1="${pos.y + pos.height / 2}" 
           x2="${pos.x + pos.width}" y2="${pos.y + pos.height / 2}" 
           stroke="${this.renderTheme.border}" 
@@ -2550,7 +3432,7 @@ var SVGRenderer = class {
       success: "#10B981"
     };
     const bgColor = typeColors[type] || typeColors.info;
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           rx="6" 
@@ -2572,7 +3454,7 @@ var SVGRenderer = class {
     const variant = String(node.props.variant || "default");
     const bgColor = variant === "primary" ? this.renderTheme.primary : this.renderTheme.border;
     const textColor = variant === "primary" ? "white" : this.renderTheme.text;
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           rx="${pos.height / 2}" 
@@ -2593,7 +3475,7 @@ var SVGRenderer = class {
     const overlayHeight = Math.max(this.options.height, this.calculateContentHeight());
     const modalX = (this.options.width - pos.width) / 2;
     const modalY = Math.max(40, (overlayHeight - pos.height) / 2);
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <!-- Modal backdrop -->
       <rect x="0" y="0" 
         width="${this.options.width}" height="${overlayHeight}" 
@@ -2646,7 +3528,7 @@ var SVGRenderer = class {
     const padding = 12;
     const itemHeight = 36;
     const titleHeight = title ? 40 : 0;
-    let svg = `<g>
+    let svg = `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           rx="8" 
@@ -2681,7 +3563,7 @@ var SVGRenderer = class {
     return svg;
   }
   renderGenericComponent(node, pos) {
-    return `<g>
+    return `<g${this.getDataNodeId(node)}>
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
           rx="4" 
@@ -2715,7 +3597,7 @@ var SVGRenderer = class {
     const titleY = innerY + topGap + titleSize;
     const valueY = titleY + valueGap + valueSize;
     const captionY = valueY + captionGap + captionSize;
-    let svg = `<g>
+    let svg = `<g${this.getDataNodeId(node)}>
     <!-- StatCard Background -->
     <rect x="${pos.x}" y="${pos.y}" 
           width="${pos.width}" height="${pos.height}" 
@@ -2769,7 +3651,7 @@ var SVGRenderer = class {
     const offsetX = pos.x + (pos.width - iconWidth) / 2;
     const offsetY = pos.y + (pos.height - iconHeight) / 2;
     let svgContent = "";
-    let svg = `<g>
+    let svg = `<g${this.getDataNodeId(node)}>
     <!-- Image Background -->
     <rect x="${pos.x}" y="${pos.y}" width="${pos.width}" height="${pos.height}" fill="#E8E8E8"/>`;
     if (["landscape", "portrait", "square"].includes(placeholder)) {
@@ -2842,7 +3724,7 @@ var SVGRenderer = class {
     const separatorWidth = 20;
     const itemSpacing = 8;
     let currentX = pos.x;
-    let svg = "<g>";
+    let svg = `<g${this.getDataNodeId(node)}>`;
     items.forEach((item, index) => {
       const isLast = index === items.length - 1;
       const textColor = isLast ? this.renderTheme.text : this.renderTheme.textMuted;
@@ -2875,7 +3757,7 @@ var SVGRenderer = class {
     const itemHeight = 40;
     const fontSize = 14;
     const activeIndex = Number(node.props.active || 0);
-    let svg = "<g>";
+    let svg = `<g${this.getDataNodeId(node)}>`;
     items.forEach((item, index) => {
       const itemY = pos.y + index * itemHeight;
       const isActive = index === activeIndex;
@@ -2919,7 +3801,7 @@ var SVGRenderer = class {
     const size = String(node.props.size || "md");
     const iconSvg = getIcon(iconType);
     if (!iconSvg) {
-      return `<g>
+      return `<g${this.getDataNodeId(node)}>
     <!-- Icon not found: ${iconType} -->
     <circle cx="${pos.x + pos.width / 2}" cy="${pos.y + pos.height / 2}" r="${Math.min(pos.width, pos.height) / 2 - 2}" fill="none" stroke="rgba(100, 116, 139, 0.4)" stroke-width="1"/>
     <text x="${pos.x + pos.width / 2}" y="${pos.y + pos.height / 2 + 4}" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="rgba(100, 116, 139, 0.6)" text-anchor="middle">?</text>
@@ -2930,7 +3812,7 @@ var SVGRenderer = class {
     const iconColor = "rgba(30, 41, 59, 0.75)";
     const offsetX = pos.x + (pos.width - iconSize) / 2;
     const offsetY = pos.y + (pos.height - iconSize) / 2;
-    const wrappedSvg = `<g transform="translate(${offsetX}, ${offsetY})">
+    const wrappedSvg = `<g${this.getDataNodeId(node)} transform="translate(${offsetX}, ${offsetY})">
     <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       ${this.extractSvgContent(iconSvg)}
     </svg>
@@ -2965,7 +3847,7 @@ var SVGRenderer = class {
     const sizeMap = { "sm": 28, "md": 32, "lg": 40 };
     const buttonSize = sizeMap[size] || 32;
     const radius = 6;
-    let svg = `<g opacity="${opacity}">
+    let svg = `<g${this.getDataNodeId(node)} opacity="${opacity}">
     <!-- IconButton background -->
     <rect x="${pos.x}" y="${pos.y}" width="${buttonSize}" height="${buttonSize}" rx="${radius}" fill="${bgColor}" stroke="${borderColor}" stroke-width="1"/>`;
     if (iconSvg) {
@@ -3007,6 +3889,13 @@ var SVGRenderer = class {
   escapeXml(text) {
     return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
   }
+  /**
+   * Get data-node-id attribute string for SVG elements
+   * Enables bidirectional selection between code and canvas
+   */
+  getDataNodeId(node) {
+    return node.meta.nodeId ? ` data-node-id="${node.meta.nodeId}"` : "";
+  }
 };
 function renderToSVG(ir, layout, options) {
   const renderer = new SVGRenderer(ir, layout, options);
@@ -3024,6 +3913,213 @@ function buildSVG(component) {
   return createSVGElement(component.tag, component.attrs, children);
 }
 
+// src/sourcemap/hash.ts
+function simpleHash(str) {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) + hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash);
+}
+function generateStableNodeId(type, filePath, line, column, indexInParent, name) {
+  const content = [
+    filePath,
+    `${line}:${column}`,
+    type,
+    `idx:${indexInParent}`,
+    name || ""
+  ].join("|");
+  const hashNum = simpleHash(content);
+  const hashStr = hashNum.toString(36);
+  return `node-${hashStr}-${type}`;
+}
+function isValidNodeId(id) {
+  return /^node-[a-z0-9]+-[a-z-]+$/.test(id);
+}
+function getTypeFromNodeId(nodeId) {
+  const match = nodeId.match(/^node-[a-z0-9]+-(.+)$/);
+  if (!match) return null;
+  return match[1];
+}
+
+// src/sourcemap/resolver.ts
+var SourceMapResolver = class {
+  constructor(sourceMap) {
+    this.nodeMap = /* @__PURE__ */ new Map();
+    this.childrenMap = /* @__PURE__ */ new Map();
+    this.positionIndex = sourceMap;
+    for (const entry of sourceMap) {
+      this.nodeMap.set(entry.nodeId, entry);
+    }
+    for (const entry of sourceMap) {
+      if (entry.parentId) {
+        const siblings = this.childrenMap.get(entry.parentId) || [];
+        siblings.push(entry);
+        this.childrenMap.set(entry.parentId, siblings);
+      }
+    }
+  }
+  /**
+   * Find node by ID (Canvas → Code)
+   * 
+   * @example
+   * // User clicks SVG element with data-node-id="component-button-0"
+   * const node = resolver.getNodeById("component-button-0");
+   * editor.revealRange(node.range); // Jump to code
+   */
+  getNodeById(nodeId) {
+    return this.nodeMap.get(nodeId) || null;
+  }
+  /**
+   * Find node at position (Code → Canvas)
+   * Returns the most specific (deepest) node containing the position
+   * 
+   * @example
+   * // User clicks code at line 5, column 10
+   * const node = resolver.getNodeByPosition(5, 10);
+   * canvas.highlightElement(node.nodeId); // Highlight in canvas
+   */
+  getNodeByPosition(line, column) {
+    const candidates = [];
+    for (const entry of this.positionIndex) {
+      if (this.containsPosition(entry, line, column)) {
+        const depth = this.calculateDepth(entry);
+        candidates.push({ ...entry, depth });
+      }
+    }
+    if (candidates.length === 0) {
+      return null;
+    }
+    candidates.sort((a, b) => b.depth - a.depth);
+    return candidates[0];
+  }
+  /**
+   * Get all child nodes of a parent
+   * 
+   * @example
+   * const children = resolver.getChildren("layout-stack-0");
+   * // Returns: [component-button-0, component-input-0, ...]
+   */
+  getChildren(nodeId) {
+    return this.childrenMap.get(nodeId) || [];
+  }
+  /**
+   * Get parent node
+   * 
+   * @example
+   * const parent = resolver.getParent("component-button-0");
+   * // Returns: layout-stack-0
+   */
+  getParent(nodeId) {
+    const node = this.nodeMap.get(nodeId);
+    if (!node || !node.parentId) {
+      return null;
+    }
+    return this.nodeMap.get(node.parentId) || null;
+  }
+  /**
+   * Get all nodes in the SourceMap
+   */
+  getAllNodes() {
+    return this.positionIndex;
+  }
+  /**
+   * Get all nodes of a specific type
+   * 
+   * @example
+   * const buttons = resolver.getNodesByType("component", "Button");
+   */
+  getNodesByType(type, subtype) {
+    return this.positionIndex.filter((entry) => {
+      if (entry.type !== type) return false;
+      if (subtype) {
+        if (type === "component" && entry.componentType !== subtype) return false;
+        if (type === "layout" && entry.layoutType !== subtype) return false;
+      }
+      return true;
+    });
+  }
+  /**
+   * Get siblings of a node (nodes with same parent)
+   */
+  getSiblings(nodeId) {
+    const node = this.nodeMap.get(nodeId);
+    if (!node || !node.parentId) {
+      return [];
+    }
+    const siblings = this.getChildren(node.parentId);
+    return siblings.filter((s) => s.nodeId !== nodeId);
+  }
+  /**
+   * Get path from root to node (breadcrumb)
+   * 
+   * @example
+   * const path = resolver.getPath("component-button-0");
+   * // Returns: [project, screen-0, layout-stack-0, component-button-0]
+   */
+  getPath(nodeId) {
+    const path = [];
+    let current = this.nodeMap.get(nodeId);
+    while (current) {
+      path.unshift(current);
+      current = current.parentId ? this.nodeMap.get(current.parentId) : void 0;
+    }
+    return path;
+  }
+  /**
+   * Check if a position is within a node's range
+   */
+  containsPosition(entry, line, column) {
+    const { range } = entry;
+    if (line < range.start.line || line > range.end.line) {
+      return false;
+    }
+    if (range.start.line === range.end.line) {
+      return column >= range.start.column && column <= range.end.column;
+    }
+    if (line === range.start.line) {
+      return column >= range.start.column;
+    }
+    if (line === range.end.line) {
+      return column <= range.end.column;
+    }
+    return true;
+  }
+  /**
+   * Calculate depth of a node in the tree (0 = root)
+   */
+  calculateDepth(entry) {
+    let depth = 0;
+    let current = entry;
+    while (current.parentId) {
+      depth++;
+      const parent = this.nodeMap.get(current.parentId);
+      if (!parent) break;
+      current = parent;
+    }
+    return depth;
+  }
+  /**
+   * Get statistics about the SourceMap
+   */
+  getStats() {
+    const byType = {};
+    let maxDepth = 0;
+    for (const entry of this.positionIndex) {
+      byType[entry.type] = (byType[entry.type] || 0) + 1;
+      const depth = this.calculateDepth(entry);
+      maxDepth = Math.max(maxDepth, depth);
+    }
+    return {
+      totalNodes: this.positionIndex.length,
+      byType,
+      maxDepth
+    };
+  }
+};
+
 // src/index.ts
 var version = "0.0.1";
 // Annotate the CommonJS export names for ESM import in node:
@@ -3031,11 +4127,17 @@ var version = "0.0.1";
   IRGenerator,
   LayoutEngine,
   SVGRenderer,
+  SourceMapBuilder,
+  SourceMapResolver,
   buildSVG,
   calculateLayout,
   createSVGElement,
   generateIR,
+  generateStableNodeId,
+  getTypeFromNodeId,
+  isValidNodeId,
   parseWireDSL,
+  parseWireDSLWithSourceMap,
   renderToSVG,
   resolveGridPosition,
   version