@vertz/ui-compiler 0.2.3

package/dist/index.js

@@ -0,0 +1,3139 @@
+// src/analyzers/component-analyzer.ts
+import {
+  SyntaxKind
+} from "ts-morph";
+
+class ComponentAnalyzer {
+  analyze(sourceFile) {
+    const components = [];
+    for (const fn of sourceFile.getFunctions()) {
+      if (this._returnsJsx(fn)) {
+        components.push(this._fromFunctionDeclaration(fn));
+      }
+    }
+    for (const stmt of sourceFile.getVariableStatements()) {
+      for (const decl of stmt.getDeclarationList().getDeclarations()) {
+        const init = decl.getInitializer();
+        if (!init)
+          continue;
+        if (init.isKind(SyntaxKind.ArrowFunction) || init.isKind(SyntaxKind.FunctionExpression)) {
+          if (this._returnsJsx(init)) {
+            components.push(this._fromVariableDeclaration(decl, init));
+          }
+        }
+      }
+    }
+    return components;
+  }
+  _returnsJsx(node) {
+    if (node.isKind(SyntaxKind.ArrowFunction)) {
+      const body2 = node.getBody();
+      if (this._containsJsx(body2))
+        return true;
+    }
+    const body = node.isKind(SyntaxKind.FunctionDeclaration) || node.isKind(SyntaxKind.FunctionExpression) ? node.getBody() : node;
+    if (body && this._containsJsx(body))
+      return true;
+    if (this._containsJsx(node))
+      return true;
+    return false;
+  }
+  _containsJsx(node) {
+    if (node.isKind(SyntaxKind.JsxElement) || node.isKind(SyntaxKind.JsxSelfClosingElement) || node.isKind(SyntaxKind.JsxFragment)) {
+      return true;
+    }
+    return node.getChildren().some((c) => this._containsJsx(c));
+  }
+  _fromFunctionDeclaration(fn) {
+    const body = fn.getBody();
+    const bodyStart = body ? body.getStart() : fn.getStart();
+    const bodyEnd = body ? body.getEnd() : fn.getEnd();
+    const param = fn.getParameters()[0];
+    let propsParam = null;
+    let hasDestructuredProps = false;
+    if (param) {
+      const nameNode = param.getNameNode();
+      if (nameNode.isKind(SyntaxKind.ObjectBindingPattern)) {
+        hasDestructuredProps = true;
+        propsParam = null;
+      } else {
+        propsParam = param.getName();
+      }
+    }
+    return {
+      name: fn.getName() ?? "anonymous",
+      propsParam,
+      hasDestructuredProps,
+      bodyStart,
+      bodyEnd
+    };
+  }
+  _fromVariableDeclaration(decl, init) {
+    const name = decl.getName();
+    let propsParam = null;
+    let hasDestructuredProps = false;
+    const params = init.isKind(SyntaxKind.ArrowFunction) ? init.getParameters() : init.isKind(SyntaxKind.FunctionExpression) ? init.getParameters() : [];
+    const param = params[0];
+    if (param) {
+      const nameNode = param.getNameNode();
+      if (nameNode.isKind(SyntaxKind.ObjectBindingPattern)) {
+        hasDestructuredProps = true;
+        propsParam = null;
+      } else {
+        propsParam = param.getName();
+      }
+    }
+    let bodyNode;
+    if (init.isKind(SyntaxKind.ArrowFunction)) {
+      bodyNode = init.getBody();
+    } else if (init.isKind(SyntaxKind.FunctionExpression)) {
+      bodyNode = init.getBody() ?? init;
+    } else {
+      bodyNode = init;
+    }
+    return {
+      name,
+      propsParam,
+      hasDestructuredProps,
+      bodyStart: bodyNode.getStart(),
+      bodyEnd: bodyNode.getEnd()
+    };
+  }
+}
+// src/analyzers/css-analyzer.ts
+import { SyntaxKind as SyntaxKind2 } from "ts-morph";
+
+class CSSAnalyzer {
+  analyze(sourceFile) {
+    const results = [];
+    const callExpressions = sourceFile.getDescendantsOfKind(SyntaxKind2.CallExpression);
+    for (const call of callExpressions) {
+      const expression = call.getExpression();
+      if (expression.isKind(SyntaxKind2.Identifier) && expression.getText() === "css") {
+        const args = call.getArguments();
+        if (args.length === 0)
+          continue;
+        const firstArg = args[0];
+        const kind = this.classifyArgument(firstArg);
+        const blockNames = kind === "static" ? this.extractBlockNames(firstArg) : [];
+        const pos = sourceFile.getLineAndColumnAtPos(call.getStart());
+        results.push({
+          kind,
+          start: call.getStart(),
+          end: call.getEnd(),
+          line: pos.line,
+          column: pos.column - 1,
+          text: call.getText(),
+          blockNames
+        });
+      }
+    }
+    return results;
+  }
+  classifyArgument(node) {
+    if (!node.isKind(SyntaxKind2.ObjectLiteralExpression)) {
+      return "reactive";
+    }
+    for (const prop of node.getProperties()) {
+      if (!prop.isKind(SyntaxKind2.PropertyAssignment)) {
+        return "reactive";
+      }
+      const initializer = prop.getInitializer();
+      if (!initializer)
+        return "reactive";
+      if (!initializer.isKind(SyntaxKind2.ArrayLiteralExpression)) {
+        return "reactive";
+      }
+      for (const element of initializer.getElements()) {
+        if (element.isKind(SyntaxKind2.StringLiteral)) {
+          continue;
+        }
+        if (element.isKind(SyntaxKind2.ObjectLiteralExpression)) {
+          if (!this.isStaticNestedObject(element)) {
+            return "reactive";
+          }
+          continue;
+        }
+        return "reactive";
+      }
+    }
+    return "static";
+  }
+  isStaticNestedObject(node) {
+    if (!node.isKind(SyntaxKind2.ObjectLiteralExpression))
+      return false;
+    for (const prop of node.getProperties()) {
+      if (!prop.isKind(SyntaxKind2.PropertyAssignment))
+        return false;
+      const init = prop.getInitializer();
+      if (!init || !init.isKind(SyntaxKind2.ArrayLiteralExpression))
+        return false;
+      for (const el of init.getElements()) {
+        if (el.isKind(SyntaxKind2.StringLiteral))
+          continue;
+        if (el.isKind(SyntaxKind2.ObjectLiteralExpression)) {
+          if (this.isStaticRawDeclaration(el))
+            continue;
+          return false;
+        }
+        return false;
+      }
+    }
+    return true;
+  }
+  isStaticRawDeclaration(node) {
+    if (!node.isKind(SyntaxKind2.ObjectLiteralExpression))
+      return false;
+    const props = node.getProperties();
+    if (props.length !== 2)
+      return false;
+    let hasProperty = false;
+    let hasValue = false;
+    for (const prop of props) {
+      if (!prop.isKind(SyntaxKind2.PropertyAssignment))
+        return false;
+      const init = prop.getInitializer();
+      if (!init || !init.isKind(SyntaxKind2.StringLiteral))
+        return false;
+      const name = prop.getName();
+      if (name === "property")
+        hasProperty = true;
+      else if (name === "value")
+        hasValue = true;
+    }
+    return hasProperty && hasValue;
+  }
+  extractBlockNames(node) {
+    if (!node.isKind(SyntaxKind2.ObjectLiteralExpression))
+      return [];
+    const names = [];
+    for (const prop of node.getProperties()) {
+      if (prop.isKind(SyntaxKind2.PropertyAssignment)) {
+        const name = prop.getName();
+        names.push(name);
+      }
+    }
+    return names;
+  }
+}
+// src/analyzers/jsx-analyzer.ts
+import { SyntaxKind as SyntaxKind4 } from "ts-morph";
+
+// src/utils.ts
+import { SyntaxKind as SyntaxKind3 } from "ts-morph";
+function findBodyNode(sourceFile, component) {
+  const allBlocks = sourceFile.getDescendantsOfKind(SyntaxKind3.Block);
+  for (const block of allBlocks) {
+    if (block.getStart() === component.bodyStart && block.getEnd() === component.bodyEnd) {
+      return block;
+    }
+  }
+  return null;
+}
+
+// src/analyzers/jsx-analyzer.ts
+class JsxAnalyzer {
+  analyze(sourceFile, component, variables) {
+    const reactiveNames = new Set(variables.filter((v) => v.kind === "signal" || v.kind === "computed").map((v) => v.name));
+    const signalApiVars = new Map;
+    const plainPropVars = new Map;
+    const fieldSignalPropVars = new Map;
+    const reactiveSourceVars = new Set;
+    for (const v of variables) {
+      if (v.signalProperties && v.signalProperties.size > 0) {
+        signalApiVars.set(v.name, v.signalProperties);
+      }
+      if (v.plainProperties && v.plainProperties.size > 0) {
+        plainPropVars.set(v.name, v.plainProperties);
+      }
+      if (v.fieldSignalProperties && v.fieldSignalProperties.size > 0) {
+        fieldSignalPropVars.set(v.name, v.fieldSignalProperties);
+      }
+      if (v.isReactiveSource) {
+        reactiveSourceVars.add(v.name);
+      }
+    }
+    const bodyNode = findBodyNode(sourceFile, component);
+    if (!bodyNode)
+      return [];
+    const results = [];
+    const jsxExprs = bodyNode.getDescendantsOfKind(SyntaxKind4.JsxExpression);
+    for (const expr of jsxExprs) {
+      const identifiers = collectIdentifiers(expr);
+      const deps = identifiers.filter((id) => reactiveNames.has(id));
+      const uniqueDeps = [...new Set(deps)];
+      const hasSignalApiAccess = containsSignalApiPropertyAccess(expr, signalApiVars, plainPropVars, fieldSignalPropVars);
+      const hasReactiveSourceAccess = containsReactiveSourceAccess(expr, reactiveSourceVars);
+      results.push({
+        start: expr.getStart(),
+        end: expr.getEnd(),
+        reactive: uniqueDeps.length > 0 || hasSignalApiAccess || hasReactiveSourceAccess,
+        deps: uniqueDeps
+      });
+    }
+    return results;
+  }
+}
+function containsSignalApiPropertyAccess(node, signalApiVars, plainPropVars, fieldSignalPropVars) {
+  if (signalApiVars.size === 0 && fieldSignalPropVars.size === 0)
+    return false;
+  const propAccesses = node.getDescendantsOfKind(SyntaxKind4.PropertyAccessExpression);
+  for (const pa of propAccesses) {
+    const obj = pa.getExpression();
+    const propName = pa.getName();
+    if (obj.isKind(SyntaxKind4.Identifier)) {
+      const varName = obj.getText();
+      const signalProps = signalApiVars.get(varName);
+      if (signalProps?.has(propName)) {
+        return true;
+      }
+    }
+    if (obj.isKind(SyntaxKind4.PropertyAccessExpression)) {
+      const innerExpr = obj.asKindOrThrow(SyntaxKind4.PropertyAccessExpression);
+      const rootExpr = innerExpr.getExpression();
+      const middleProp = innerExpr.getName();
+      if (rootExpr.isKind(SyntaxKind4.Identifier)) {
+        const rootName = rootExpr.getText();
+        const fieldSignalProps = fieldSignalPropVars.get(rootName);
+        if (!fieldSignalProps)
+          continue;
+        const signalProps = signalApiVars.get(rootName);
+        const plainProps = plainPropVars.get(rootName);
+        if (signalProps?.has(middleProp) || plainProps?.has(middleProp))
+          continue;
+        if (fieldSignalProps.has(propName)) {
+          return true;
+        }
+      }
+    }
+  }
+  return false;
+}
+function containsReactiveSourceAccess(node, reactiveSourceVars) {
+  if (reactiveSourceVars.size === 0)
+    return false;
+  const propAccesses = node.getDescendantsOfKind(SyntaxKind4.PropertyAccessExpression);
+  for (const pa of propAccesses) {
+    const obj = pa.getExpression();
+    if (obj.isKind(SyntaxKind4.Identifier) && reactiveSourceVars.has(obj.getText())) {
+      return true;
+    }
+  }
+  const identifiers = node.getDescendantsOfKind(SyntaxKind4.Identifier);
+  for (const id of identifiers) {
+    if (reactiveSourceVars.has(id.getText())) {
+      return true;
+    }
+  }
+  return false;
+}
+function collectIdentifiers(node) {
+  const ids = [];
+  const walk = (n) => {
+    if (n.isKind(SyntaxKind4.Identifier)) {
+      ids.push(n.getText());
+    }
+    for (const c of n.getChildren()) {
+      walk(c);
+    }
+  };
+  walk(node);
+  return ids;
+}
+// src/analyzers/mutation-analyzer.ts
+import { SyntaxKind as SyntaxKind5 } from "ts-morph";
+var MUTATION_METHODS = new Set([
+  "push",
+  "pop",
+  "shift",
+  "unshift",
+  "splice",
+  "sort",
+  "reverse",
+  "fill",
+  "copyWithin"
+]);
+
+class MutationAnalyzer {
+  analyze(sourceFile, component, variables) {
+    const signalNames = new Set(variables.filter((v) => v.kind === "signal").map((v) => v.name));
+    const bodyNode = findBodyNode(sourceFile, component);
+    if (!bodyNode)
+      return [];
+    const mutations = [];
+    bodyNode.forEachDescendant((node) => {
+      if (node.isKind(SyntaxKind5.CallExpression)) {
+        const expr = node.getExpression();
+        if (expr.isKind(SyntaxKind5.PropertyAccessExpression)) {
+          const objName = getRootIdentifier(expr.getExpression());
+          const methodName = expr.getName();
+          if (objName && signalNames.has(objName) && MUTATION_METHODS.has(methodName)) {
+            mutations.push({
+              variableName: objName,
+              kind: "method-call",
+              start: node.getStart(),
+              end: node.getEnd()
+            });
+          }
+          const obj = expr.getExpression();
+          const method = expr.getName();
+          if (obj.isKind(SyntaxKind5.Identifier) && obj.getText() === "Object" && method === "assign") {
+            const args = node.getArguments();
+            const firstArg = args[0];
+            if (firstArg) {
+              if (firstArg.isKind(SyntaxKind5.Identifier) && signalNames.has(firstArg.getText())) {
+                mutations.push({
+                  variableName: firstArg.getText(),
+                  kind: "object-assign",
+                  start: node.getStart(),
+                  end: node.getEnd()
+                });
+              }
+            }
+          }
+        }
+      }
+      if (node.isKind(SyntaxKind5.BinaryExpression)) {
+        const left = node.getLeft();
+        const opKind = node.getOperatorToken().getKind();
+        if (opKind === SyntaxKind5.EqualsToken || opKind === SyntaxKind5.PlusEqualsToken || opKind === SyntaxKind5.MinusEqualsToken) {
+          if (left.isKind(SyntaxKind5.PropertyAccessExpression)) {
+            const rootName = getRootIdentifier(left.getExpression());
+            if (rootName && signalNames.has(rootName)) {
+              mutations.push({
+                variableName: rootName,
+                kind: "property-assignment",
+                start: node.getStart(),
+                end: node.getEnd()
+              });
+            }
+          }
+          if (left.isKind(SyntaxKind5.ElementAccessExpression)) {
+            const rootName = getRootIdentifier(left.getExpression());
+            if (rootName && signalNames.has(rootName)) {
+              mutations.push({
+                variableName: rootName,
+                kind: "index-assignment",
+                start: node.getStart(),
+                end: node.getEnd()
+              });
+            }
+          }
+        }
+      }
+      if (node.isKind(SyntaxKind5.DeleteExpression)) {
+        const expr = node.getExpression();
+        if (expr.isKind(SyntaxKind5.PropertyAccessExpression)) {
+          const rootName = getRootIdentifier(expr.getExpression());
+          if (rootName && signalNames.has(rootName)) {
+            mutations.push({
+              variableName: rootName,
+              kind: "delete",
+              start: node.getStart(),
+              end: node.getEnd()
+            });
+          }
+        }
+      }
+    });
+    return mutations;
+  }
+}
+function getRootIdentifier(node) {
+  if (node.isKind(SyntaxKind5.Identifier))
+    return node.getText();
+  if (node.isKind(SyntaxKind5.PropertyAccessExpression)) {
+    return getRootIdentifier(node.getExpression());
+  }
+  return null;
+}
+// src/analyzers/reactivity-analyzer.ts
+import { SyntaxKind as SyntaxKind6 } from "ts-morph";
+
+// src/signal-api-registry.ts
+var SIGNAL_API_REGISTRY = {
+  query: {
+    signalProperties: new Set(["data", "loading", "error", "revalidating"]),
+    plainProperties: new Set(["refetch", "revalidate", "dispose"])
+  },
+  form: {
+    signalProperties: new Set(["submitting", "dirty", "valid"]),
+    plainProperties: new Set(["action", "method", "onSubmit", "reset", "setFieldError", "submit"]),
+    fieldSignalProperties: new Set(["error", "dirty", "touched", "value"])
+  },
+  createLoader: {
+    signalProperties: new Set(["data", "loading", "error"]),
+    plainProperties: new Set(["refetch"])
+  }
+};
+var REACTIVE_SOURCE_APIS = new Set(["useContext"]);
+function isSignalApi(functionName) {
+  return functionName in SIGNAL_API_REGISTRY;
+}
+function isReactiveSourceApi(functionName) {
+  return REACTIVE_SOURCE_APIS.has(functionName);
+}
+function getSignalApiConfig(functionName) {
+  return SIGNAL_API_REGISTRY[functionName];
+}
+
+// src/analyzers/reactivity-analyzer.ts
+class ReactivityAnalyzer {
+  analyze(sourceFile, component) {
+    const bodyNode = findBodyNode(sourceFile, component);
+    if (!bodyNode)
+      return [];
+    const { signalApiAliases: importAliases, reactiveSourceAliases } = buildImportAliasMap(sourceFile);
+    const declaredNames = collectDeclaredNames(bodyNode);
+    const lets = new Map;
+    const consts = new Map;
+    const signalApiVars = new Map;
+    const reactiveSourceVars = new Set;
+    const destructuredFromMap = new Map;
+    const syntheticCounters = new Map;
+    for (const stmt of bodyNode.getChildSyntaxList()?.getChildren() ?? []) {
+      if (!stmt.isKind(SyntaxKind6.VariableStatement))
+        continue;
+      const declList = stmt.getChildrenOfKind(SyntaxKind6.VariableDeclarationList)[0];
+      if (!declList)
+        continue;
+      const declText = declList.getText();
+      const isLet = declText.startsWith("let ");
+      const isConst = declText.startsWith("const ");
+      for (const decl of declList.getDeclarations()) {
+        const nameNode = decl.getNameNode();
+        const init = decl.getInitializer();
+        if (nameNode.isKind(SyntaxKind6.ObjectBindingPattern)) {
+          let signalApiConfig;
+          let syntheticName;
+          const hasUnsupportedBindings = nameNode.getElements().some((el) => el.getInitializer() || el.getNameNode().isKind(SyntaxKind6.ObjectBindingPattern));
+          if (isConst && !hasUnsupportedBindings && init?.isKind(SyntaxKind6.CallExpression)) {
+            const callExpr = init.asKindOrThrow(SyntaxKind6.CallExpression);
+            const callName = callExpr.getExpression();
+            if (callName.isKind(SyntaxKind6.Identifier)) {
+              const fnName = callName.getText();
+              const originalName = importAliases.get(fnName);
+              if (originalName) {
+                signalApiConfig = getSignalApiConfig(originalName);
+                if (signalApiConfig) {
+                  let counter = syntheticCounters.get(originalName) ?? 0;
+                  syntheticName = `__${originalName}_${counter}`;
+                  while (declaredNames.has(syntheticName)) {
+                    counter++;
+                    syntheticName = `__${originalName}_${counter}`;
+                  }
+                  syntheticCounters.set(originalName, counter + 1);
+                  signalApiVars.set(syntheticName, signalApiConfig);
+                  consts.set(syntheticName, {
+                    start: decl.getStart(),
+                    end: decl.getEnd(),
+                    deps: []
+                  });
+                }
+              }
+            }
+          }
+          for (const element of nameNode.getElements()) {
+            const bindingName = element.getName();
+            const propName = element.getPropertyNameNode()?.getText() ?? bindingName;
+            if (signalApiConfig && syntheticName) {
+              const isSignalProp = signalApiConfig.signalProperties.has(propName);
+              const deps2 = isSignalProp ? [syntheticName] : [];
+              const entry2 = { start: decl.getStart(), end: decl.getEnd(), deps: deps2 };
+              consts.set(bindingName, entry2);
+              destructuredFromMap.set(bindingName, syntheticName);
+            } else {
+              const deps2 = init ? collectIdentifierRefs(init) : [];
+              const entry2 = { start: decl.getStart(), end: decl.getEnd(), deps: deps2 };
+              if (isLet) {
+                lets.set(bindingName, entry2);
+              } else if (isConst) {
+                consts.set(bindingName, entry2);
+              }
+            }
+          }
+          continue;
+        }
+        const name = decl.getName();
+        const deps = init ? collectIdentifierRefs(init) : [];
+        const entry = { start: decl.getStart(), end: decl.getEnd(), deps };
+        if (init?.isKind(SyntaxKind6.CallExpression)) {
+          const callExpr = init.asKindOrThrow(SyntaxKind6.CallExpression);
+          const callName = callExpr.getExpression();
+          if (callName.isKind(SyntaxKind6.Identifier)) {
+            const fnName = callName.getText();
+            const originalName = importAliases.get(fnName);
+            if (originalName) {
+              const config = getSignalApiConfig(originalName);
+              if (config) {
+                signalApiVars.set(name, config);
+              }
+            }
+            if (reactiveSourceAliases.has(fnName)) {
+              reactiveSourceVars.add(name);
+            }
+          }
+        }
+        if (isLet) {
+          lets.set(name, entry);
+        } else if (isConst) {
+          consts.set(name, entry);
+        }
+      }
+    }
+    const jsxRefs = collectJsxReferencedIdentifiers(bodyNode);
+    const jsxReachable = new Set(jsxRefs);
+    let changed = true;
+    while (changed) {
+      changed = false;
+      for (const [name, info] of consts) {
+        if (jsxReachable.has(name)) {
+          for (const dep of info.deps) {
+            if (!jsxReachable.has(dep)) {
+              jsxReachable.add(dep);
+              changed = true;
+            }
+          }
+        }
+      }
+    }
+    const signals = new Set;
+    for (const name of lets.keys()) {
+      if (jsxReachable.has(name)) {
+        signals.add(name);
+      }
+    }
+    const computeds = new Set;
+    changed = true;
+    while (changed) {
+      changed = false;
+      for (const [name, info] of consts) {
+        if (computeds.has(name))
+          continue;
+        const dependsOnReactive = info.deps.some((dep) => signals.has(dep) || computeds.has(dep) || signalApiVars.has(dep) || reactiveSourceVars.has(dep));
+        if (dependsOnReactive) {
+          computeds.add(name);
+          changed = true;
+        }
+      }
+    }
+    const results = [];
+    for (const [name, info] of lets) {
+      const varInfo = {
+        name,
+        kind: signals.has(name) ? "signal" : "static",
+        start: info.start,
+        end: info.end
+      };
+      const apiConfig = signalApiVars.get(name);
+      if (apiConfig) {
+        varInfo.signalProperties = apiConfig.signalProperties;
+        varInfo.plainProperties = apiConfig.plainProperties;
+        varInfo.fieldSignalProperties = apiConfig.fieldSignalProperties;
+      }
+      results.push(varInfo);
+    }
+    for (const [name, info] of consts) {
+      const varInfo = {
+        name,
+        kind: computeds.has(name) ? "computed" : "static",
+        start: info.start,
+        end: info.end
+      };
+      const apiConfig = signalApiVars.get(name);
+      if (apiConfig) {
+        varInfo.signalProperties = apiConfig.signalProperties;
+        varInfo.plainProperties = apiConfig.plainProperties;
+        varInfo.fieldSignalProperties = apiConfig.fieldSignalProperties;
+      }
+      if (reactiveSourceVars.has(name)) {
+        varInfo.isReactiveSource = true;
+      }
+      const syntheticSource = destructuredFromMap.get(name);
+      if (syntheticSource) {
+        varInfo.destructuredFrom = syntheticSource;
+      }
+      results.push(varInfo);
+    }
+    return results;
+  }
+}
+function collectJsxReferencedIdentifiers(bodyNode) {
+  const refs = new Set;
+  const jsxExprs = bodyNode.getDescendantsOfKind(SyntaxKind6.JsxExpression);
+  for (const expr of jsxExprs) {
+    addIdentifiers(expr, refs);
+  }
+  return refs;
+}
+function addIdentifiers(node, refs) {
+  if (node.isKind(SyntaxKind6.Identifier)) {
+    refs.add(node.getText());
+  }
+  for (const child of node.getChildren()) {
+    addIdentifiers(child, refs);
+  }
+}
+function collectIdentifierRefs(node) {
+  const refs = [];
+  const walk = (n) => {
+    if (n.isKind(SyntaxKind6.Identifier)) {
+      refs.push(n.getText());
+    }
+    for (const c of n.getChildren()) {
+      walk(c);
+    }
+  };
+  walk(node);
+  return refs;
+}
+function buildImportAliasMap(sourceFile) {
+  const signalApiAliases = new Map;
+  const reactiveSourceAliases = new Set;
+  for (const importDecl of sourceFile.getImportDeclarations()) {
+    const moduleSpecifier = importDecl.getModuleSpecifierValue();
+    if (moduleSpecifier !== "@vertz/ui")
+      continue;
+    const namedImports = importDecl.getNamedImports();
+    for (const namedImport of namedImports) {
+      const originalName = namedImport.getName();
+      const localName = namedImport.getAliasNode()?.getText() ?? originalName;
+      if (isSignalApi(originalName)) {
+        signalApiAliases.set(localName, originalName);
+      }
+      if (isReactiveSourceApi(originalName)) {
+        reactiveSourceAliases.add(localName);
+      }
+    }
+  }
+  return { signalApiAliases, reactiveSourceAliases };
+}
+function collectDeclaredNames(bodyNode) {
+  const names = new Set;
+  for (const stmt of bodyNode.getChildSyntaxList()?.getChildren() ?? []) {
+    if (!stmt.isKind(SyntaxKind6.VariableStatement))
+      continue;
+    const declList = stmt.getChildrenOfKind(SyntaxKind6.VariableDeclarationList)[0];
+    if (!declList)
+      continue;
+    for (const decl of declList.getDeclarations()) {
+      const nameNode = decl.getNameNode();
+      if (nameNode.isKind(SyntaxKind6.Identifier)) {
+        names.add(nameNode.getText());
+      }
+    }
+  }
+  return names;
+}
+// src/compiler.ts
+import MagicString from "magic-string";
+import { Project, SyntaxKind as SyntaxKind12, ts } from "ts-morph";
+
+// src/diagnostics/mutation-diagnostics.ts
+import { SyntaxKind as SyntaxKind7 } from "ts-morph";
+var MUTATION_METHODS2 = new Set([
+  "push",
+  "pop",
+  "shift",
+  "unshift",
+  "splice",
+  "sort",
+  "reverse",
+  "fill",
+  "copyWithin"
+]);
+
+class MutationDiagnostics {
+  analyze(sourceFile, component, variables) {
+    const staticConsts = new Set(variables.filter((v) => v.kind === "static").map((v) => v.name));
+    const bodyNode = findBodyNode(sourceFile, component);
+    if (!bodyNode)
+      return [];
+    const jsxRefs = collectJsxReferencedIdentifiers2(bodyNode);
+    const constsInJsx = new Set([...staticConsts].filter((name) => jsxRefs.has(name)));
+    const diagnostics = [];
+    bodyNode.forEachDescendant((node) => {
+      if (node.isKind(SyntaxKind7.CallExpression)) {
+        const expr = node.getExpression();
+        if (expr.isKind(SyntaxKind7.PropertyAccessExpression)) {
+          const objName = getRootIdentifier2(expr.getExpression());
+          const methodName = expr.getName();
+          if (objName && constsInJsx.has(objName) && MUTATION_METHODS2.has(methodName)) {
+            const pos = sourceFile.getLineAndColumnAtPos(node.getStart());
+            diagnostics.push({
+              code: "non-reactive-mutation",
+              message: `Mutation \`.${methodName}()\` on \`const ${objName}\` will not trigger UI updates. Change \`const\` to \`let\` to make it reactive.`,
+              severity: "warning",
+              line: pos.line,
+              column: pos.column - 1,
+              fix: `Change \`const ${objName}\` to \`let ${objName}\``
+            });
+          }
+        }
+      }
+      if (node.isKind(SyntaxKind7.BinaryExpression)) {
+        const left = node.getLeft();
+        const op = node.getOperatorToken();
+        if (op.isKind(SyntaxKind7.EqualsToken) && left.isKind(SyntaxKind7.PropertyAccessExpression)) {
+          const rootName = getRootIdentifier2(left.getExpression());
+          if (rootName && constsInJsx.has(rootName)) {
+            const pos = sourceFile.getLineAndColumnAtPos(node.getStart());
+            diagnostics.push({
+              code: "non-reactive-mutation",
+              message: `Property assignment on \`const ${rootName}\` will not trigger UI updates. Change \`const\` to \`let\` to make it reactive.`,
+              severity: "warning",
+              line: pos.line,
+              column: pos.column - 1,
+              fix: `Change \`const ${rootName}\` to \`let ${rootName}\``
+            });
+          }
+        }
+      }
+    });
+    return diagnostics;
+  }
+}
+function getRootIdentifier2(node) {
+  if (node.isKind(SyntaxKind7.Identifier))
+    return node.getText();
+  if (node.isKind(SyntaxKind7.PropertyAccessExpression)) {
+    return getRootIdentifier2(node.getExpression());
+  }
+  return null;
+}
+function collectJsxReferencedIdentifiers2(bodyNode) {
+  const refs = new Set;
+  const jsxExprs = bodyNode.getDescendantsOfKind(SyntaxKind7.JsxExpression);
+  for (const expr of jsxExprs) {
+    addIdentifiers2(expr, refs);
+  }
+  return refs;
+}
+function addIdentifiers2(node, refs) {
+  if (node.isKind(SyntaxKind7.Identifier))
+    refs.add(node.getText());
+  for (const child of node.getChildren()) {
+    addIdentifiers2(child, refs);
+  }
+}
+
+// src/diagnostics/props-destructuring.ts
+class PropsDestructuringDiagnostics {
+  analyze(sourceFile, components) {
+    const diagnostics = [];
+    for (const comp of components) {
+      if (comp.hasDestructuredProps) {
+        const pos = sourceFile.getLineAndColumnAtPos(comp.bodyStart);
+        diagnostics.push({
+          code: "props-destructuring",
+          message: `Component \`${comp.name}\` destructures props in the parameter list. This breaks reactivity — use \`props.x\` access instead.`,
+          severity: "warning",
+          line: pos.line,
+          column: pos.column - 1,
+          fix: `Change \`function ${comp.name}({ ... })\` to \`function ${comp.name}(props)\` and access via \`props.x\``
+        });
+      }
+    }
+    return diagnostics;
+  }
+}
+
+// src/diagnostics/ssr-safety-diagnostics.ts
+import { SyntaxKind as SyntaxKind8 } from "ts-morph";
+var BROWSER_ONLY_GLOBALS = new Set([
+  "localStorage",
+  "sessionStorage",
+  "navigator",
+  "IntersectionObserver",
+  "ResizeObserver",
+  "MutationObserver",
+  "requestAnimationFrame",
+  "cancelAnimationFrame",
+  "requestIdleCallback",
+  "cancelIdleCallback"
+]);
+var BROWSER_ONLY_DOCUMENT_PROPS = new Set([
+  "querySelector",
+  "querySelectorAll",
+  "getElementById",
+  "cookie"
+]);
+
+class SSRSafetyDiagnostics {
+  analyze(sourceFile, component) {
+    const bodyNode = findBodyNode(sourceFile, component);
+    if (!bodyNode)
+      return [];
+    const diagnostics = [];
+    bodyNode.forEachDescendant((node) => {
+      if (!node.isKind(SyntaxKind8.Identifier))
+        return;
+      const name = node.getText();
+      if (BROWSER_ONLY_GLOBALS.has(name)) {
+        if (isInNestedFunction(node, bodyNode))
+          return;
+        if (isInTypeofGuard(node))
+          return;
+        const pos = sourceFile.getLineAndColumnAtPos(node.getStart());
+        diagnostics.push({
+          code: "ssr-unsafe-api",
+          message: `\`${name}\` is a browser-only API that is not available during SSR. Move it inside \`onMount()\` or wrap in a \`typeof\` guard.`,
+          severity: "warning",
+          line: pos.line,
+          column: pos.column - 1,
+          fix: `Move the \`${name}\` usage inside \`onMount(() => { ... })\` or guard with \`typeof ${name} !== 'undefined'\`.`
+        });
+        return;
+      }
+      if (name === "document") {
+        const parent = node.getParent();
+        if (parent?.isKind(SyntaxKind8.PropertyAccessExpression) && parent.getExpression() === node) {
+          const propName = parent.getName();
+          if (BROWSER_ONLY_DOCUMENT_PROPS.has(propName)) {
+            if (isInNestedFunction(node, bodyNode))
+              return;
+            if (isInTypeofGuard(node))
+              return;
+            const pos = sourceFile.getLineAndColumnAtPos(node.getStart());
+            diagnostics.push({
+              code: "ssr-unsafe-api",
+              message: `\`document.${propName}\` is a browser-only API that is not available during SSR. Move it inside \`onMount()\` or wrap in a \`typeof\` guard.`,
+              severity: "warning",
+              line: pos.line,
+              column: pos.column - 1,
+              fix: `Move the \`document.${propName}\` usage inside \`onMount(() => { ... })\`.`
+            });
+          }
+        }
+      }
+    });
+    return diagnostics;
+  }
+}
+function isInNestedFunction(node, bodyNode) {
+  let current = node.getParent();
+  while (current && current !== bodyNode) {
+    if (current.isKind(SyntaxKind8.ArrowFunction) || current.isKind(SyntaxKind8.FunctionExpression) || current.isKind(SyntaxKind8.FunctionDeclaration) || current.isKind(SyntaxKind8.MethodDeclaration) || current.isKind(SyntaxKind8.Constructor) || current.isKind(SyntaxKind8.GetAccessor) || current.isKind(SyntaxKind8.SetAccessor)) {
+      return true;
+    }
+    current = current.getParent();
+  }
+  return false;
+}
+function isInTypeofGuard(node) {
+  const parent = node.getParent();
+  if (parent?.isKind(SyntaxKind8.TypeOfExpression))
+    return true;
+  const name = node.getText();
+  let current = node.getParent();
+  while (current) {
+    if (current.isKind(SyntaxKind8.IfStatement)) {
+      const condition = current.getExpression();
+      const thenStatement = current.getThenStatement();
+      if (conditionContainsTypeofFor(condition, name)) {
+        if (isDescendantOf(node, thenStatement))
+          return true;
+      }
+      if (conditionContainsTypeofFor(condition, "window")) {
+        if (isDescendantOf(node, thenStatement))
+          return true;
+      }
+    }
+    if (current.isKind(SyntaxKind8.ConditionalExpression)) {
+      const condition = current.getCondition();
+      if (conditionContainsTypeofFor(condition, name)) {
+        const whenTrue = current.getWhenTrue();
+        if (isDescendantOf(node, whenTrue))
+          return true;
+      }
+      if (conditionContainsTypeofFor(condition, "window")) {
+        const whenTrue = current.getWhenTrue();
+        if (isDescendantOf(node, whenTrue))
+          return true;
+      }
+    }
+    if (current.isKind(SyntaxKind8.BinaryExpression)) {
+      const op = current.getOperatorToken();
+      if (op.getKind() === SyntaxKind8.AmpersandAmpersandToken) {
+        const left = current.getLeft();
+        if (conditionContainsTypeofFor(left, name)) {
+          if (isDescendantOf(node, current.getRight()))
+            return true;
+        }
+        if (conditionContainsTypeofFor(left, "window")) {
+          if (isDescendantOf(node, current.getRight()))
+            return true;
+        }
+      }
+    }
+    current = current.getParent();
+  }
+  return false;
+}
+function conditionContainsTypeofFor(condition, name) {
+  if (condition.isKind(SyntaxKind8.TypeOfExpression)) {
+    return condition.getExpression().getText() === name;
+  }
+  for (const desc of condition.getDescendantsOfKind(SyntaxKind8.TypeOfExpression)) {
+    if (desc.getExpression().getText() === name)
+      return true;
+  }
+  return false;
+}
+function isDescendantOf(node, ancestor) {
+  let current = node.getParent();
+  while (current) {
+    if (current === ancestor)
+      return true;
+    current = current.getParent();
+  }
+  return false;
+}
+
+// src/transformers/computed-transformer.ts
+import { SyntaxKind as SyntaxKind9 } from "ts-morph";
+class ComputedTransformer {
+  transform(source, sourceFile, component, variables) {
+    const computeds = new Set(variables.filter((v) => v.kind === "computed").map((v) => v.name));
+    if (computeds.size === 0)
+      return;
+    const bodyNode = findBodyNode(sourceFile, component);
+    if (!bodyNode)
+      return;
+    const destructuredFromMap = new Map;
+    const syntheticVarInfo = new Map;
+    for (const v of variables) {
+      if (v.destructuredFrom) {
+        destructuredFromMap.set(v.name, v.destructuredFrom);
+      }
+      if (v.name.startsWith("__") && v.signalProperties) {
+        syntheticVarInfo.set(v.name, v);
+      }
+    }
+    transformComputedReads(source, bodyNode, computeds);
+    for (const stmt of bodyNode.getChildSyntaxList()?.getChildren() ?? []) {
+      if (!stmt.isKind(SyntaxKind9.VariableStatement))
+        continue;
+      const declList = stmt.getChildrenOfKind(SyntaxKind9.VariableDeclarationList)[0];
+      if (!declList)
+        continue;
+      for (const decl of declList.getDeclarations()) {
+        const nameNode = decl.getNameNode();
+        const init = decl.getInitializer();
+        if (!init)
+          continue;
+        if (nameNode.isKind(SyntaxKind9.ObjectBindingPattern)) {
+          const elements = nameNode.getElements();
+          const firstBindingName = elements[0]?.getName();
+          const syntheticName = firstBindingName ? destructuredFromMap.get(firstBindingName) : undefined;
+          if (syntheticName) {
+            const initText = source.slice(init.getStart(), init.getEnd());
+            const synthetic = syntheticVarInfo.get(syntheticName);
+            const signalProps = synthetic?.signalProperties ?? new Set;
+            const lines = [];
+            lines.push(`const ${syntheticName} = ${initText}`);
+            for (const el of elements) {
+              if (el.getDotDotDotToken()) {
+                const restName = el.getName();
+                lines.push(`const { ...${restName} } = ${syntheticName}`);
+                continue;
+              }
+              const bindingName = el.getName();
+              const propName = el.getPropertyNameNode()?.getText() ?? bindingName;
+              if (computeds.has(bindingName) && signalProps.has(propName)) {
+                lines.push(`const ${bindingName} = computed(() => ${syntheticName}.${propName}.value)`);
+              } else {
+                lines.push(`const ${bindingName} = ${syntheticName}.${propName}`);
+              }
+            }
+            source.overwrite(stmt.getStart(), stmt.getEnd(), `${lines.join(`;
+`)};`);
+            continue;
+          }
+          const computedElements = elements.filter((el) => computeds.has(el.getName()));
+          if (computedElements.length > 0) {
+            const initText = source.slice(init.getStart(), init.getEnd());
+            const replacements = elements.map((el) => {
+              const bindingName = el.getName();
+              const propName = el.getPropertyNameNode()?.getText() ?? bindingName;
+              if (computeds.has(bindingName)) {
+                return `const ${bindingName} = computed(() => ${initText}.${propName})`;
+              }
+              return `const ${bindingName} = ${initText}.${propName}`;
+            });
+            source.overwrite(stmt.getStart(), stmt.getEnd(), `${replacements.join(`;
+`)};`);
+          }
+          continue;
+        }
+        const name = decl.getName();
+        if (!computeds.has(name))
+          continue;
+        source.appendLeft(init.getStart(), "computed(() => ");
+        source.appendRight(init.getEnd(), ")");
+      }
+    }
+  }
+}
+function transformComputedReads(source, bodyNode, computeds) {
+  bodyNode.forEachDescendant((node) => {
+    if (!node.isKind(SyntaxKind9.Identifier))
+      return;
+    const name = node.getText();
+    if (!computeds.has(name))
+      return;
+    const parent = node.getParent();
+    if (!parent)
+      return;
+    if (parent.isKind(SyntaxKind9.VariableDeclaration) && parent.getNameNode() === node) {
+      return;
+    }
+    if (parent.isKind(SyntaxKind9.PropertyAccessExpression) && parent.getNameNode() === node) {
+      return;
+    }
+    if (parent.isKind(SyntaxKind9.PropertyAssignment) && parent.getNameNode() === node) {
+      return;
+    }
+    if (parent.isKind(SyntaxKind9.ShorthandPropertyAssignment)) {
+      return;
+    }
+    if (parent.isKind(SyntaxKind9.BindingElement)) {
+      return;
+    }
+    source.overwrite(node.getStart(), node.getEnd(), `${name}.value`);
+  });
+}
+
+// src/transformers/jsx-transformer.ts
+import { SyntaxKind as SyntaxKind10 } from "ts-morph";
+var varCounter = 0;
+function genVar() {
+  return `__el${varCounter++}`;
+}
+function resetVarCounter() {
+  varCounter = 0;
+}
+
+class JsxTransformer {
+  transform(source, sourceFile, component, variables, jsxExpressions) {
+    resetVarCounter();
+    const bodyNode = findBodyNode(sourceFile, component);
+    if (!bodyNode)
+      return;
+    const reactiveNames = new Set(variables.filter((v) => v.kind === "signal" || v.kind === "computed").map((v) => v.name));
+    const jsxMap = new Map(jsxExpressions.map((e) => [e.start, e]));
+    const formVarNames = new Set;
+    for (const v of variables) {
+      if (v.fieldSignalProperties && v.fieldSignalProperties.size > 0) {
+        formVarNames.add(v.name);
+      }
+    }
+    this.transformAllJsx(bodyNode, reactiveNames, jsxMap, source, formVarNames);
+  }
+  transformAllJsx(node, reactiveNames, jsxMap, source, formVarNames) {
+    if (isJsxTopLevel(node)) {
+      const transformed = transformJsxNode(node, reactiveNames, jsxMap, source, formVarNames);
+      source.overwrite(node.getStart(), node.getEnd(), transformed);
+      return;
+    }
+    for (const child of node.getChildren()) {
+      this.transformAllJsx(child, reactiveNames, jsxMap, source, formVarNames);
+    }
+  }
+}
+function isJsxTopLevel(node) {
+  return node.isKind(SyntaxKind10.JsxElement) || node.isKind(SyntaxKind10.JsxSelfClosingElement) || node.isKind(SyntaxKind10.JsxFragment);
+}
+function transformJsxNode(node, reactiveNames, jsxMap, source, formVarNames = new Set) {
+  if (node.isKind(SyntaxKind10.ParenthesizedExpression)) {
+    return transformJsxNode(node.getExpression(), reactiveNames, jsxMap, source, formVarNames);
+  }
+  if (node.isKind(SyntaxKind10.JsxElement)) {
+    return transformJsxElement(node, reactiveNames, jsxMap, source, formVarNames);
+  }
+  if (node.isKind(SyntaxKind10.JsxSelfClosingElement)) {
+    return transformSelfClosingElement(node, reactiveNames, jsxMap, source, formVarNames);
+  }
+  if (node.isKind(SyntaxKind10.JsxFragment)) {
+    return transformFragment(node, reactiveNames, jsxMap, source, formVarNames);
+  }
+  if (node.isKind(SyntaxKind10.JsxText)) {
+    const text = node.getText().trim();
+    if (!text)
+      return "";
+    return `__staticText(${JSON.stringify(text)})`;
+  }
+  return node.getText();
+}
+function transformJsxElement(node, reactiveNames, jsxMap, source, formVarNames = new Set) {
+  const openingElement = node.getFirstChildByKind(SyntaxKind10.JsxOpeningElement);
+  if (!openingElement)
+    return node.getText();
+  const tagName = openingElement.getTagNameNode().getText();
+  const isComponent = /^[A-Z]/.test(tagName);
+  if (isComponent) {
+    const hasExplicitChildren = openingElement.getAttributes().filter((a) => a.isKind(SyntaxKind10.JsxAttribute)).some((attr) => attr.getNameNode().getText() === "children");
+    let extraEntries;
+    if (!hasExplicitChildren) {
+      const children2 = getJsxChildren(node);
+      const nonEmptyChildren = children2.filter((child) => {
+        if (child.isKind(SyntaxKind10.JsxText))
+          return !!child.getText().trim();
+        return true;
+      });
+      if (nonEmptyChildren.length > 0) {
+        const thunkCode = buildComponentChildrenThunk(nonEmptyChildren, reactiveNames, jsxMap, source, formVarNames);
+        if (thunkCode) {
+          extraEntries = new Map([["children", thunkCode]]);
+        }
+      }
+    }
+    const propsObj = buildPropsObject(openingElement, jsxMap, source, reactiveNames, formVarNames, extraEntries);
+    return `${tagName}(${propsObj})`;
+  }
+  const elVar = genVar();
+  const statements = [];
+  statements.push(`const ${elVar} = __element(${JSON.stringify(tagName)})`);
+  const attrs = openingElement.getAttributes();
+  for (const attr of attrs) {
+    if (!attr.isKind(SyntaxKind10.JsxAttribute))
+      continue;
+    const attrStmt = processAttribute(attr, elVar, jsxMap, source);
+    if (attrStmt)
+      statements.push(attrStmt);
+  }
+  const bindStmt = tryBindElement(tagName, openingElement, elVar, formVarNames);
+  if (bindStmt)
+    statements.push(bindStmt);
+  const children = getJsxChildren(node);
+  const hasChildren = children.some((child) => {
+    if (child.isKind(SyntaxKind10.JsxText))
+      return !!child.getText().trim();
+    return true;
+  });
+  if (hasChildren) {
+    statements.push(`__enterChildren(${elVar})`);
+  }
+  for (const child of children) {
+    const childCode = transformChild(child, reactiveNames, jsxMap, elVar, source, formVarNames);
+    if (childCode)
+      statements.push(childCode);
+  }
+  if (hasChildren) {
+    statements.push(`__exitChildren()`);
+  }
+  return `(() => {
+${statements.map((s) => `  ${s};`).join(`
+`)}
+  return ${elVar};
+})()`;
+}
+function transformSelfClosingElement(node, reactiveNames, jsxMap, source, formVarNames = new Set) {
+  if (!node.isKind(SyntaxKind10.JsxSelfClosingElement))
+    return node.getText();
+  const tagName = node.getTagNameNode().getText();
+  const isComponent = /^[A-Z]/.test(tagName);
+  if (isComponent) {
+    const propsObj = buildPropsObject(node, jsxMap, source, reactiveNames, formVarNames);
+    return `${tagName}(${propsObj})`;
+  }
+  const elVar = genVar();
+  const statements = [];
+  statements.push(`const ${elVar} = __element(${JSON.stringify(tagName)})`);
+  const attrs = node.getAttributes();
+  for (const attr of attrs) {
+    if (!attr.isKind(SyntaxKind10.JsxAttribute))
+      continue;
+    const attrStmt = processAttribute(attr, elVar, jsxMap, source);
+    if (attrStmt)
+      statements.push(attrStmt);
+  }
+  const bindStmt = tryBindElement(tagName, node, elVar, formVarNames);
+  if (bindStmt)
+    statements.push(bindStmt);
+  return `(() => {
+${statements.map((s) => `  ${s};`).join(`
+`)}
+  return ${elVar};
+})()`;
+}
+function transformFragment(node, reactiveNames, jsxMap, source, formVarNames = new Set) {
+  const fragVar = genVar();
+  const statements = [];
+  statements.push(`const ${fragVar} = document.createDocumentFragment()`);
+  const children = getJsxChildren(node);
+  for (const child of children) {
+    const childCode = transformChild(child, reactiveNames, jsxMap, fragVar, source, formVarNames);
+    if (childCode)
+      statements.push(childCode);
+  }
+  return `(() => {
+${statements.map((s) => `  ${s};`).join(`
+`)}
+  return ${fragVar};
+})()`;
+}
+function processAttribute(attr, elVar, jsxMap, source) {
+  if (!attr.isKind(SyntaxKind10.JsxAttribute))
+    return null;
+  const attrName = attr.getNameNode().getText();
+  const init = attr.getInitializer();
+  if (!init)
+    return null;
+  if (attrName.startsWith("on") && attrName.length > 2) {
+    const eventName = attrName[2]?.toLowerCase() + attrName.slice(3);
+    if (init.isKind(SyntaxKind10.JsxExpression)) {
+      const exprNode = init.getExpression();
+      const handlerText = exprNode ? source.slice(exprNode.getStart(), exprNode.getEnd()) : "";
+      return `__on(${elVar}, ${JSON.stringify(eventName)}, ${handlerText})`;
+    }
+    return null;
+  }
+  if (init.isKind(SyntaxKind10.StringLiteral)) {
+    return `${elVar}.setAttribute(${JSON.stringify(attrName)}, ${init.getText()})`;
+  }
+  if (init.isKind(SyntaxKind10.JsxExpression)) {
+    const exprInfo = jsxMap.get(init.getStart());
+    const exprNode = init.getExpression();
+    const exprText = exprNode ? source.slice(exprNode.getStart(), exprNode.getEnd()) : "";
+    if (exprInfo?.reactive) {
+      return `__attr(${elVar}, ${JSON.stringify(attrName)}, () => ${exprText})`;
+    }
+    return `{ const __v = ${exprText}; if (__v != null && __v !== false) ${elVar}.setAttribute(${JSON.stringify(attrName)}, __v === true ? "" : __v); }`;
+  }
+  return null;
+}
+function transformChild(child, reactiveNames, jsxMap, parentVar, source, formVarNames = new Set) {
+  if (child.isKind(SyntaxKind10.JsxText)) {
+    const text = child.getText().trim();
+    if (!text)
+      return null;
+    return `__append(${parentVar}, __staticText(${JSON.stringify(text)}))`;
+  }
+  if (child.isKind(SyntaxKind10.JsxExpression)) {
+    const exprInfo = jsxMap.get(child.getStart());
+    const exprNode = child.getExpression();
+    if (!exprNode)
+      return null;
+    if (exprInfo?.reactive) {
+      const conditionalCode = tryTransformConditional(exprNode, reactiveNames, jsxMap, source);
+      if (conditionalCode) {
+        return `__append(${parentVar}, ${conditionalCode})`;
+      }
+      const listCode = tryTransformList(exprNode, reactiveNames, jsxMap, parentVar, source);
+      if (listCode) {
+        return listCode;
+      }
+    }
+    const exprText = source.slice(exprNode.getStart(), exprNode.getEnd());
+    if (exprInfo?.reactive) {
+      return `__append(${parentVar}, __child(() => ${exprText}))`;
+    }
+    return `__insert(${parentVar}, ${exprText})`;
+  }
+  if (child.isKind(SyntaxKind10.JsxElement) || child.isKind(SyntaxKind10.JsxSelfClosingElement) || child.isKind(SyntaxKind10.JsxFragment)) {
+    const childCode = transformJsxNode(child, reactiveNames, jsxMap, source, formVarNames);
+    return `__append(${parentVar}, ${childCode})`;
+  }
+  return null;
+}
+function transformChildAsValue(child, reactiveNames, jsxMap, source, formVarNames = new Set) {
+  if (child.isKind(SyntaxKind10.JsxText)) {
+    const text = child.getText().trim();
+    if (!text)
+      return null;
+    return `__staticText(${JSON.stringify(text)})`;
+  }
+  if (child.isKind(SyntaxKind10.JsxExpression)) {
+    const exprInfo = jsxMap.get(child.getStart());
+    const exprNode = child.getExpression();
+    if (!exprNode)
+      return null;
+    if (exprInfo?.reactive) {
+      const conditionalCode = tryTransformConditional(exprNode, reactiveNames, jsxMap, source);
+      if (conditionalCode) {
+        return conditionalCode;
+      }
+    }
+    const exprText = source.slice(exprNode.getStart(), exprNode.getEnd());
+    if (exprInfo?.reactive) {
+      return `__child(() => ${exprText})`;
+    }
+    return exprText;
+  }
+  if (child.isKind(SyntaxKind10.JsxElement) || child.isKind(SyntaxKind10.JsxSelfClosingElement) || child.isKind(SyntaxKind10.JsxFragment)) {
+    return transformJsxNode(child, reactiveNames, jsxMap, source, formVarNames);
+  }
+  return null;
+}
+function buildComponentChildrenThunk(children, reactiveNames, jsxMap, source, formVarNames) {
+  const values = [];
+  for (const child of children) {
+    const value = transformChildAsValue(child, reactiveNames, jsxMap, source, formVarNames);
+    if (value)
+      values.push(value);
+  }
+  if (values.length === 0)
+    return "";
+  if (values.length === 1)
+    return `() => ${values[0]}`;
+  return `() => [${values.join(", ")}]`;
+}
+function tryTransformConditional(exprNode, reactiveNames, jsxMap, source) {
+  if (exprNode.isKind(SyntaxKind10.ConditionalExpression)) {
+    const condition = exprNode.getCondition();
+    const whenTrue = exprNode.getWhenTrue();
+    const whenFalse = exprNode.getWhenFalse();
+    const condText = source.slice(condition.getStart(), condition.getEnd());
+    const trueBranch = transformBranch(whenTrue, reactiveNames, jsxMap, source);
+    const falseBranch = transformBranch(whenFalse, reactiveNames, jsxMap, source);
+    return `__conditional(() => ${condText}, () => ${trueBranch}, () => ${falseBranch})`;
+  }
+  if (exprNode.isKind(SyntaxKind10.BinaryExpression) && exprNode.getOperatorToken().getKind() === SyntaxKind10.AmpersandAmpersandToken) {
+    const left = exprNode.getLeft();
+    const right = exprNode.getRight();
+    const condText = source.slice(left.getStart(), left.getEnd());
+    const trueBranch = transformBranch(right, reactiveNames, jsxMap, source);
+    return `__conditional(() => ${condText}, () => ${trueBranch}, () => null)`;
+  }
+  return null;
+}
+function transformBranch(node, reactiveNames, jsxMap, source) {
+  if (node.isKind(SyntaxKind10.ParenthesizedExpression)) {
+    return transformBranch(node.getExpression(), reactiveNames, jsxMap, source);
+  }
+  if (node.isKind(SyntaxKind10.JsxElement) || node.isKind(SyntaxKind10.JsxSelfClosingElement) || node.isKind(SyntaxKind10.JsxFragment)) {
+    return transformJsxNode(node, reactiveNames, jsxMap, source);
+  }
+  if (node.isKind(SyntaxKind10.ConditionalExpression)) {
+    const nested = tryTransformConditional(node, reactiveNames, jsxMap, source);
+    if (nested)
+      return nested;
+  }
+  return source.slice(node.getStart(), node.getEnd());
+}
+function tryTransformList(exprNode, reactiveNames, jsxMap, parentVar, source) {
+  if (!exprNode.isKind(SyntaxKind10.CallExpression))
+    return null;
+  const propAccess = exprNode.getExpression();
+  if (!propAccess.isKind(SyntaxKind10.PropertyAccessExpression))
+    return null;
+  const methodName = propAccess.getNameNode().getText();
+  if (methodName !== "map")
+    return null;
+  const args = exprNode.getArguments();
+  if (args.length === 0)
+    return null;
+  const callbackArg = args[0];
+  if (!callbackArg)
+    return null;
+  const sourceObj = propAccess.getExpression();
+  const sourceObjText = source.slice(sourceObj.getStart(), sourceObj.getEnd());
+  let itemParam = null;
+  let indexParam = null;
+  let callbackBody = null;
+  if (callbackArg.isKind(SyntaxKind10.ArrowFunction)) {
+    const params = callbackArg.getParameters();
+    itemParam = params[0]?.getName() ?? null;
+    indexParam = params[1]?.getName() ?? null;
+    const body = callbackArg.getBody();
+    callbackBody = body;
+  }
+  if (!itemParam || !callbackBody)
+    return null;
+  const keyFn = extractKeyFunction(callbackBody, itemParam, indexParam);
+  const renderFn = buildListRenderFunction(callbackBody, itemParam, reactiveNames, jsxMap, source);
+  return `__list(${parentVar}, () => ${sourceObjText}, ${keyFn}, ${renderFn})`;
+}
+function extractKeyFunction(callbackBody, itemParam, indexParam) {
+  const jsxNode = findJsxInBody(callbackBody);
+  if (jsxNode) {
+    const keyValue = extractKeyPropValue(jsxNode);
+    if (keyValue) {
+      return `(${itemParam}) => ${keyValue}`;
+    }
+  }
+  if (indexParam) {
+    return `(_item, ${indexParam}) => ${indexParam}`;
+  }
+  return `(_item, __i) => __i`;
+}
+function findJsxInBody(node) {
+  if (node.isKind(SyntaxKind10.JsxElement) || node.isKind(SyntaxKind10.JsxSelfClosingElement)) {
+    return node;
+  }
+  if (node.isKind(SyntaxKind10.Block)) {
+    const returnStmt = node.getFirstDescendantByKind(SyntaxKind10.ReturnStatement);
+    if (returnStmt) {
+      const expr = returnStmt.getExpression();
+      if (expr)
+        return findJsxInBody(expr);
+    }
+  }
+  if (node.isKind(SyntaxKind10.ParenthesizedExpression)) {
+    return findJsxInBody(node.getExpression());
+  }
+  return null;
+}
+function extractKeyPropValue(jsxNode) {
+  const attrs = jsxNode.getDescendantsOfKind(SyntaxKind10.JsxAttribute);
+  for (const attr of attrs) {
+    if (attr.getNameNode().getText() !== "key")
+      continue;
+    const init = attr.getInitializer();
+    if (!init)
+      continue;
+    if (init.isKind(SyntaxKind10.JsxExpression)) {
+      const expr = init.getExpression();
+      if (expr)
+        return expr.getText();
+    }
+    if (init.isKind(SyntaxKind10.StringLiteral)) {
+      return init.getText();
+    }
+  }
+  return null;
+}
+function buildListRenderFunction(callbackBody, itemParam, reactiveNames, jsxMap, source) {
+  const jsxNode = findJsxInBody(callbackBody);
+  if (jsxNode) {
+    const transformed = transformJsxNode(jsxNode, reactiveNames, jsxMap, source);
+    return `(${itemParam}) => ${transformed}`;
+  }
+  const bodyText = source.slice(callbackBody.getStart(), callbackBody.getEnd());
+  return `(${itemParam}) => ${bodyText}`;
+}
+function sliceWithTransformedJsx(node, reactiveNames, jsxMap, source, formVarNames) {
+  const start = node.getStart();
+  const end = node.getEnd();
+  const jsxNodes = [];
+  collectJsxInExpression(node, reactiveNames, jsxMap, source, formVarNames, jsxNodes);
+  if (jsxNodes.length === 0) {
+    return source.slice(start, end);
+  }
+  jsxNodes.sort((a, b) => a.start - b.start);
+  let result = "";
+  let cursor = start;
+  for (const jsx of jsxNodes) {
+    result += source.slice(cursor, jsx.start);
+    result += jsx.transformed;
+    cursor = jsx.end;
+  }
+  result += source.slice(cursor, end);
+  return result;
+}
+function collectJsxInExpression(node, reactiveNames, jsxMap, source, formVarNames, results) {
+  if (isJsxTopLevel(node)) {
+    const transformed = transformJsxNode(node, reactiveNames, jsxMap, source, formVarNames);
+    results.push({ start: node.getStart(), end: node.getEnd(), transformed });
+    return;
+  }
+  for (const child of node.getChildren()) {
+    collectJsxInExpression(child, reactiveNames, jsxMap, source, formVarNames, results);
+  }
+}
+function buildPropsObject(element, jsxMap, source, reactiveNames, formVarNames, extraEntries) {
+  const attrs = element.isKind(SyntaxKind10.JsxOpeningElement) || element.isKind(SyntaxKind10.JsxSelfClosingElement) ? element.getAttributes().filter((a) => a.isKind(SyntaxKind10.JsxAttribute)) : element.getDescendantsOfKind(SyntaxKind10.JsxAttribute);
+  if (attrs.length === 0 && (!extraEntries || extraEntries.size === 0))
+    return "{}";
+  const props = [];
+  for (const attr of attrs) {
+    const name = attr.getNameNode().getText();
+    const init = attr.getInitializer();
+    if (!init) {
+      props.push(`${name}: true`);
+      continue;
+    }
+    if (init.isKind(SyntaxKind10.StringLiteral)) {
+      props.push(`${name}: ${init.getText()}`);
+      continue;
+    }
+    if (init.isKind(SyntaxKind10.JsxExpression)) {
+      const exprInfo = jsxMap.get(init.getStart());
+      const exprNode = init.getExpression();
+      const exprText = exprNode ? sliceWithTransformedJsx(exprNode, reactiveNames, jsxMap, source, formVarNames) : "";
+      if (exprInfo?.reactive) {
+        props.push(`get ${name}() { return ${exprText}; }`);
+      } else {
+        props.push(`${name}: ${exprText}`);
+      }
+    }
+  }
+  if (extraEntries) {
+    for (const [key, value] of extraEntries) {
+      props.push(`${key}: ${value}`);
+    }
+  }
+  return `{ ${props.join(", ")} }`;
+}
+function getJsxChildren(node) {
+  const children = [];
+  for (const child of node.getChildren()) {
+    if (isJsxChild(child)) {
+      children.push(child);
+    } else if (child.isKind(SyntaxKind10.SyntaxList)) {
+      for (const grandchild of child.getChildren()) {
+        if (isJsxChild(grandchild)) {
+          children.push(grandchild);
+        }
+      }
+    }
+  }
+  return children;
+}
+function isJsxChild(node) {
+  return node.isKind(SyntaxKind10.JsxText) || node.isKind(SyntaxKind10.JsxExpression) || node.isKind(SyntaxKind10.JsxElement) || node.isKind(SyntaxKind10.JsxSelfClosingElement) || node.isKind(SyntaxKind10.JsxFragment);
+}
+function tryBindElement(tagName, element, elVar, formVarNames) {
+  if (tagName !== "form" || formVarNames.size === 0)
+    return null;
+  const attrs = element.getDescendantsOfKind(SyntaxKind10.JsxAttribute);
+  for (const attr of attrs) {
+    if (attr.getNameNode().getText() !== "onSubmit")
+      continue;
+    const init = attr.getInitializer();
+    if (!init?.isKind(SyntaxKind10.JsxExpression))
+      continue;
+    const exprNode = init.getExpression();
+    if (!exprNode?.isKind(SyntaxKind10.PropertyAccessExpression))
+      continue;
+    const obj = exprNode.getExpression();
+    if (!obj.isKind(SyntaxKind10.Identifier))
+      continue;
+    const varName = obj.getText();
+    if (formVarNames.has(varName)) {
+      return `${varName}.__bindElement(${elVar})`;
+    }
+  }
+  return null;
+}
+
+// src/transformers/mutation-transformer.ts
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function replaceWithBoundary(text, variableName, suffix, replacement) {
+  const pattern = new RegExp(`(?<![a-zA-Z0-9_$])${escapeRegExp(variableName)}${escapeRegExp(suffix)}`, "g");
+  return text.replace(pattern, replacement);
+}
+
+class MutationTransformer {
+  transform(source, _component, mutations) {
+    if (mutations.length === 0)
+      return;
+    const sorted = [...mutations].sort((a, b) => b.start - a.start);
+    for (const mutation of sorted) {
+      const originalText = source.slice(mutation.start, mutation.end);
+      switch (mutation.kind) {
+        case "method-call":
+          this._transformMethodCall(source, mutation, originalText);
+          break;
+        case "property-assignment":
+          this._transformPropertyAssignment(source, mutation, originalText);
+          break;
+        case "index-assignment":
+          this._transformIndexAssignment(source, mutation, originalText);
+          break;
+        case "delete":
+          this._transformDelete(source, mutation, originalText);
+          break;
+        case "object-assign":
+          this._transformObjectAssign(source, mutation, originalText);
+          break;
+      }
+    }
+  }
+  _transformMethodCall(source, mutation, originalText) {
+    const { variableName } = mutation;
+    const peekText = replaceWithBoundary(originalText, variableName, ".", `${variableName}.peek().`);
+    source.overwrite(mutation.start, mutation.end, `(${peekText}, ${variableName}.notify())`);
+  }
+  _transformPropertyAssignment(source, mutation, originalText) {
+    const { variableName } = mutation;
+    const peekText = replaceWithBoundary(originalText, variableName, ".", `${variableName}.peek().`);
+    source.overwrite(mutation.start, mutation.end, `(${peekText}, ${variableName}.notify())`);
+  }
+  _transformIndexAssignment(source, mutation, originalText) {
+    const { variableName } = mutation;
+    const peekText = replaceWithBoundary(originalText, variableName, "[", `${variableName}.peek()[`);
+    source.overwrite(mutation.start, mutation.end, `(${peekText}, ${variableName}.notify())`);
+  }
+  _transformDelete(source, mutation, originalText) {
+    const { variableName } = mutation;
+    const peekText = replaceWithBoundary(originalText, variableName, ".", `${variableName}.peek().`);
+    source.overwrite(mutation.start, mutation.end, `(${peekText}, ${variableName}.notify())`);
+  }
+  _transformObjectAssign(source, mutation, originalText) {
+    const { variableName } = mutation;
+    const peekText = originalText.replace(`Object.assign(${variableName}`, `Object.assign(${variableName}.peek()`);
+    source.overwrite(mutation.start, mutation.end, `(${peekText}, ${variableName}.notify())`);
+  }
+}
+
+// src/transformers/signal-transformer.ts
+import { SyntaxKind as SyntaxKind11 } from "ts-morph";
+class SignalTransformer {
+  transform(source, sourceFile, component, variables, mutationRanges = []) {
+    const signals = new Set(variables.filter((v) => v.kind === "signal").map((v) => v.name));
+    const signalApiVars = new Map;
+    const plainPropVars = new Map;
+    const fieldSignalPropVars = new Map;
+    for (const v of variables) {
+      if (v.signalProperties && v.signalProperties.size > 0) {
+        signalApiVars.set(v.name, v.signalProperties);
+      }
+      if (v.plainProperties && v.plainProperties.size > 0) {
+        plainPropVars.set(v.name, v.plainProperties);
+      }
+      if (v.fieldSignalProperties && v.fieldSignalProperties.size > 0) {
+        fieldSignalPropVars.set(v.name, v.fieldSignalProperties);
+      }
+    }
+    const bodyNode = findBodyNode(sourceFile, component);
+    if (!bodyNode)
+      return;
+    if (signals.size > 0) {
+      transformDeclarations(source, bodyNode, signals);
+      transformReferences(source, bodyNode, signals, mutationRanges);
+    }
+    if (signalApiVars.size > 0 || fieldSignalPropVars.size > 0) {
+      transformSignalApiProperties(source, bodyNode, signalApiVars, plainPropVars, fieldSignalPropVars);
+    }
+  }
+}
+function transformDeclarations(source, bodyNode, signals) {
+  for (const stmt of bodyNode.getChildSyntaxList()?.getChildren() ?? []) {
+    if (!stmt.isKind(SyntaxKind11.VariableStatement))
+      continue;
+    const declList = stmt.getChildrenOfKind(SyntaxKind11.VariableDeclarationList)[0];
+    if (!declList)
+      continue;
+    for (const decl of declList.getDeclarations()) {
+      const name = decl.getName();
+      if (!signals.has(name))
+        continue;
+      const init = decl.getInitializer();
+      if (!init)
+        continue;
+      const letKeyword = declList.getFirstChildByKind(SyntaxKind11.LetKeyword);
+      if (letKeyword) {
+        source.overwrite(letKeyword.getStart(), letKeyword.getEnd(), "const");
+      }
+      source.appendLeft(init.getStart(), "signal(");
+      source.appendRight(init.getEnd(), ")");
+    }
+  }
+}
+function isInsideMutationRange(pos, ranges) {
+  return ranges.some((r) => pos >= r.start && pos < r.end);
+}
+function transformReferences(source, bodyNode, signals, mutationRanges) {
+  bodyNode.forEachDescendant((node) => {
+    if (!node.isKind(SyntaxKind11.Identifier))
+      return;
+    const name = node.getText();
+    if (!signals.has(name))
+      return;
+    const parent = node.getParent();
+    if (!parent)
+      return;
+    if (parent.isKind(SyntaxKind11.VariableDeclaration) && parent.getNameNode() === node) {
+      return;
+    }
+    if (parent.isKind(SyntaxKind11.PropertyAccessExpression) && parent.getNameNode() === node) {
+      return;
+    }
+    if (parent.isKind(SyntaxKind11.PropertyAssignment) && parent.getNameNode() === node) {
+      return;
+    }
+    if (parent.isKind(SyntaxKind11.ShorthandPropertyAssignment)) {
+      return;
+    }
+    if (parent.isKind(SyntaxKind11.BindingElement)) {
+      return;
+    }
+    if (isInsideMutationRange(node.getStart(), mutationRanges)) {
+      return;
+    }
+    source.overwrite(node.getStart(), node.getEnd(), `${name}.value`);
+  });
+}
+function transformSignalApiProperties(source, bodyNode, signalApiVars, plainPropVars, fieldSignalPropVars) {
+  const threeLevelRanges = [];
+  bodyNode.forEachDescendant((node) => {
+    if (!node.isKind(SyntaxKind11.PropertyAccessExpression))
+      return;
+    const outerExpr = node.asKindOrThrow(SyntaxKind11.PropertyAccessExpression);
+    const middleExpr = outerExpr.getExpression();
+    const leafProp = outerExpr.getName();
+    if (!middleExpr.isKind(SyntaxKind11.PropertyAccessExpression))
+      return;
+    const innerExpr = middleExpr.asKindOrThrow(SyntaxKind11.PropertyAccessExpression);
+    const rootExpr = innerExpr.getExpression();
+    const middleProp = innerExpr.getName();
+    if (!rootExpr.isKind(SyntaxKind11.Identifier))
+      return;
+    const rootName = rootExpr.getText();
+    const fieldSignalProps = fieldSignalPropVars.get(rootName);
+    if (!fieldSignalProps)
+      return;
+    const signalProps = signalApiVars.get(rootName);
+    const plainProps = plainPropVars.get(rootName);
+    if (signalProps?.has(middleProp) || plainProps?.has(middleProp))
+      return;
+    if (!fieldSignalProps.has(leafProp))
+      return;
+    const parent = outerExpr.getParent();
+    if (parent?.isKind(SyntaxKind11.PropertyAccessExpression)) {
+      const parentProp = parent.asKindOrThrow(SyntaxKind11.PropertyAccessExpression);
+      if (parentProp.getExpression() === outerExpr && parentProp.getName() === "value") {
+        threeLevelRanges.push({ start: outerExpr.getStart(), end: outerExpr.getEnd() });
+        return;
+      }
+    }
+    source.appendLeft(outerExpr.getEnd(), ".value");
+    threeLevelRanges.push({ start: outerExpr.getStart(), end: outerExpr.getEnd() });
+  });
+  bodyNode.forEachDescendant((node) => {
+    if (!node.isKind(SyntaxKind11.PropertyAccessExpression))
+      return;
+    const expr = node.asKindOrThrow(SyntaxKind11.PropertyAccessExpression);
+    const nodeStart = expr.getStart();
+    if (threeLevelRanges.some((r) => nodeStart >= r.start && nodeStart < r.end))
+      return;
+    const objExpr = expr.getExpression();
+    const propName = expr.getName();
+    if (!objExpr.isKind(SyntaxKind11.Identifier))
+      return;
+    const varName = objExpr.getText();
+    const signalProps = signalApiVars.get(varName);
+    if (!signalProps || !signalProps.has(propName))
+      return;
+    const parent = expr.getParent();
+    if (parent?.isKind(SyntaxKind11.PropertyAccessExpression)) {
+      const parentProp = parent.asKindOrThrow(SyntaxKind11.PropertyAccessExpression);
+      if (parentProp.getExpression() === expr && parentProp.getName() === "value") {
+        return;
+      }
+    }
+    source.appendLeft(expr.getEnd(), ".value");
+  });
+}
+
+// src/compiler.ts
+function compile(source, optionsOrFilename) {
+  const options = typeof optionsOrFilename === "string" ? { filename: optionsOrFilename } : optionsOrFilename ?? {};
+  const filename = options.filename ?? "input.tsx";
+  const project = new Project({
+    useInMemoryFileSystem: true,
+    compilerOptions: {
+      jsx: ts.JsxEmit.Preserve,
+      strict: true
+    }
+  });
+  const sourceFile = project.createSourceFile(filename, source);
+  const s = new MagicString(source);
+  const allDiagnostics = [];
+  const componentAnalyzer = new ComponentAnalyzer;
+  const components = componentAnalyzer.analyze(sourceFile);
+  if (components.length === 0) {
+    return {
+      code: source,
+      map: s.generateMap({ source: filename, includeContent: true }),
+      diagnostics: []
+    };
+  }
+  const usedFeatures = new Set;
+  for (const component of components) {
+    const reactivityAnalyzer = new ReactivityAnalyzer;
+    const variables = reactivityAnalyzer.analyze(sourceFile, component);
+    const hasSignals = variables.some((v) => v.kind === "signal");
+    const hasComputeds = variables.some((v) => v.kind === "computed");
+    if (hasSignals)
+      usedFeatures.add("signal");
+    if (hasComputeds)
+      usedFeatures.add("computed");
+    const mutationAnalyzer = new MutationAnalyzer;
+    const mutations = mutationAnalyzer.analyze(sourceFile, component, variables);
+    const mutationRanges = mutations.map((m) => ({ start: m.start, end: m.end }));
+    if (mutations.length > 0) {
+      const mutationTransformer = new MutationTransformer;
+      mutationTransformer.transform(s, component, mutations);
+    }
+    const signalTransformer = new SignalTransformer;
+    signalTransformer.transform(s, sourceFile, component, variables, mutationRanges);
+    const computedTransformer = new ComputedTransformer;
+    computedTransformer.transform(s, sourceFile, component, variables);
+    const jsxAnalyzer = new JsxAnalyzer;
+    const jsxExpressions = jsxAnalyzer.analyze(sourceFile, component, variables);
+    if (jsxExpressions.length > 0) {
+      usedFeatures.add("__element");
+      usedFeatures.add("__child");
+    }
+    if (jsxExpressions.some((e) => e.reactive)) {
+      usedFeatures.add("__text");
+      usedFeatures.add("__attr");
+    }
+    const hasEvents = sourceFile.getDescendantsOfKind(SyntaxKind12.JsxAttribute).some((attr) => {
+      const name = attr.getNameNode().getText();
+      return name.startsWith("on") && name.length > 2;
+    });
+    if (hasEvents) {
+      usedFeatures.add("__on");
+    }
+    const jsxTransformer = new JsxTransformer;
+    jsxTransformer.transform(s, sourceFile, component, variables, jsxExpressions);
+    const mutationDiags = new MutationDiagnostics;
+    allDiagnostics.push(...mutationDiags.analyze(sourceFile, component, variables));
+    const ssrDiags = new SSRSafetyDiagnostics;
+    allDiagnostics.push(...ssrDiags.analyze(sourceFile, component));
+  }
+  const propsDiags = new PropsDestructuringDiagnostics;
+  allDiagnostics.push(...propsDiags.analyze(sourceFile, components));
+  detectDomHelpers(s.toString(), usedFeatures);
+  const target = options.target ?? "dom";
+  const imports = buildImportStatement(usedFeatures, target);
+  if (imports) {
+    s.prepend(`${imports}
+`);
+  }
+  const map = s.generateMap({
+    source: filename,
+    includeContent: true
+  });
+  return {
+    code: s.toString(),
+    map,
+    diagnostics: allDiagnostics
+  };
+}
+var DOM_HELPERS = [
+  "__append",
+  "__child",
+  "__enterChildren",
+  "__exitChildren",
+  "__insert",
+  "__conditional",
+  "__list",
+  "__show",
+  "__classList",
+  "__staticText"
+];
+function detectDomHelpers(output, usedFeatures) {
+  for (const helper of DOM_HELPERS) {
+    if (output.includes(`${helper}(`)) {
+      usedFeatures.add(helper);
+    }
+  }
+}
+function buildImportStatement(features, target) {
+  const runtimeImports = [];
+  const domImports = [];
+  for (const feature of features) {
+    if (feature === "signal" || feature === "computed" || feature === "effect" || feature === "batch" || feature === "untrack") {
+      runtimeImports.push(feature);
+    } else if (feature.startsWith("__")) {
+      domImports.push(feature);
+    }
+  }
+  const internalsSource = target === "tui" ? "@vertz/tui/internals" : "@vertz/ui/internals";
+  const parts = [];
+  if (runtimeImports.length > 0) {
+    parts.push(`import { ${runtimeImports.sort().join(", ")} } from '@vertz/ui';`);
+  }
+  if (domImports.length > 0) {
+    parts.push(`import { ${domImports.sort().join(", ")} } from '${internalsSource}';`);
+  }
+  return parts.length > 0 ? parts.join(`
+`) : null;
+}
+// src/css-extraction/code-splitting.ts
+class CSSCodeSplitter {
+  split(manifest, fileExtractions) {
+    const fileRouteCount = new Map;
+    for (const [_route, files] of manifest) {
+      for (const filePath of files) {
+        fileRouteCount.set(filePath, (fileRouteCount.get(filePath) ?? 0) + 1);
+      }
+    }
+    const sharedFiles = new Set;
+    for (const [filePath, count] of fileRouteCount) {
+      if (count > 1) {
+        sharedFiles.add(filePath);
+      }
+    }
+    const result = {};
+    const commonCSS = [];
+    for (const filePath of sharedFiles) {
+      const extraction = fileExtractions.get(filePath);
+      if (extraction && extraction.css.length > 0) {
+        commonCSS.push(extraction.css);
+      }
+    }
+    if (commonCSS.length > 0) {
+      result.__common = commonCSS.join(`
+`);
+    }
+    for (const [route, files] of manifest) {
+      const routeCSS = [];
+      for (const filePath of files) {
+        if (sharedFiles.has(filePath))
+          continue;
+        const extraction = fileExtractions.get(filePath);
+        if (extraction && extraction.css.length > 0) {
+          routeCSS.push(extraction.css);
+        }
+      }
+      result[route] = routeCSS.join(`
+`);
+    }
+    return result;
+  }
+}
+// src/css-extraction/dead-css.ts
+class DeadCSSEliminator {
+  eliminate(extractions, usedFiles) {
+    const liveCSS = [];
+    for (const [filePath, extraction] of extractions) {
+      if (usedFiles.has(filePath) && extraction.css.length > 0) {
+        liveCSS.push(extraction.css);
+      }
+    }
+    return liveCSS.join(`
+`);
+  }
+}
+// src/css-extraction/extractor.ts
+import {
+  ALIGNMENT_MAP,
+  COLOR_NAMESPACES,
+  CONTENT_MAP,
+  CSS_COLOR_KEYWORDS,
+  DISPLAY_MAP,
+  FONT_SIZE_SCALE,
+  FONT_WEIGHT_SCALE,
+  HEIGHT_AXIS_PROPERTIES,
+  KEYWORD_MAP,
+  LINE_HEIGHT_SCALE,
+  PROPERTY_MAP,
+  PSEUDO_MAP,
+  PSEUDO_PREFIXES,
+  RADIUS_SCALE,
+  SHADOW_SCALE,
+  SIZE_KEYWORDS,
+  SPACING_SCALE
+} from "@vertz/ui/internals";
+import { Project as Project2, SyntaxKind as SyntaxKind13, ts as ts2 } from "ts-morph";
+
+class CSSExtractor {
+  extract(source, filePath) {
+    const project = new Project2({
+      useInMemoryFileSystem: true,
+      compilerOptions: { jsx: ts2.JsxEmit.Preserve, strict: true }
+    });
+    const sourceFile = project.createSourceFile(filePath, source);
+    const allCssRules = [];
+    const allBlockNames = [];
+    const callExpressions = sourceFile.getDescendantsOfKind(SyntaxKind13.CallExpression);
+    for (const call of callExpressions) {
+      const expression = call.getExpression();
+      if (!expression.isKind(SyntaxKind13.Identifier) || expression.getText() !== "css") {
+        continue;
+      }
+      const args = call.getArguments();
+      if (args.length === 0)
+        continue;
+      const firstArg = args[0];
+      if (!firstArg.isKind(SyntaxKind13.ObjectLiteralExpression))
+        continue;
+      if (!isStaticCSSCall(firstArg))
+        continue;
+      for (const prop of firstArg.getProperties()) {
+        if (!prop.isKind(SyntaxKind13.PropertyAssignment))
+          continue;
+        const blockName = prop.getName();
+        allBlockNames.push(blockName);
+        const className = generateClassName(filePath, blockName);
+        const init = prop.getInitializer();
+        if (!init || !init.isKind(SyntaxKind13.ArrayLiteralExpression))
+          continue;
+        const entries = extractEntries(init);
+        const rules = buildCSSRules(className, entries);
+        allCssRules.push(...rules);
+      }
+    }
+    return {
+      css: allCssRules.join(`
+`),
+      blockNames: allBlockNames
+    };
+  }
+}
+function isStaticCSSCall(node) {
+  if (!node.isKind(SyntaxKind13.ObjectLiteralExpression))
+    return false;
+  for (const prop of node.getProperties()) {
+    if (!prop.isKind(SyntaxKind13.PropertyAssignment))
+      return false;
+    const initializer = prop.getInitializer();
+    if (!initializer || !initializer.isKind(SyntaxKind13.ArrayLiteralExpression))
+      return false;
+    for (const element of initializer.getElements()) {
+      if (element.isKind(SyntaxKind13.StringLiteral))
+        continue;
+      if (element.isKind(SyntaxKind13.ObjectLiteralExpression)) {
+        if (!isStaticNestedObject(element))
+          return false;
+        continue;
+      }
+      return false;
+    }
+  }
+  return true;
+}
+function isStaticNestedObject(node) {
+  if (!node.isKind(SyntaxKind13.ObjectLiteralExpression))
+    return false;
+  for (const prop of node.getProperties()) {
+    if (!prop.isKind(SyntaxKind13.PropertyAssignment))
+      return false;
+    const init = prop.getInitializer();
+    if (!init || !init.isKind(SyntaxKind13.ArrayLiteralExpression))
+      return false;
+    for (const el of init.getElements()) {
+      if (el.isKind(SyntaxKind13.StringLiteral))
+        continue;
+      if (el.isKind(SyntaxKind13.ObjectLiteralExpression)) {
+        if (isStaticRawDeclaration(el))
+          continue;
+        return false;
+      }
+      return false;
+    }
+  }
+  return true;
+}
+function isStaticRawDeclaration(node) {
+  if (!node.isKind(SyntaxKind13.ObjectLiteralExpression))
+    return false;
+  const props = node.getProperties();
+  if (props.length !== 2)
+    return false;
+  let hasProperty = false;
+  let hasValue = false;
+  for (const prop of props) {
+    if (!prop.isKind(SyntaxKind13.PropertyAssignment))
+      return false;
+    const init = prop.getInitializer();
+    if (!init || !init.isKind(SyntaxKind13.StringLiteral))
+      return false;
+    const name = prop.getName();
+    if (name === "property")
+      hasProperty = true;
+    else if (name === "value")
+      hasValue = true;
+  }
+  return hasProperty && hasValue;
+}
+function extractEntries(arrayNode) {
+  if (!arrayNode.isKind(SyntaxKind13.ArrayLiteralExpression))
+    return [];
+  const results = [];
+  for (const element of arrayNode.getElements()) {
+    if (element.isKind(SyntaxKind13.StringLiteral)) {
+      results.push({ kind: "shorthand", value: element.getLiteralValue() });
+    } else if (element.isKind(SyntaxKind13.ObjectLiteralExpression)) {
+      for (const prop of element.getProperties()) {
+        if (!prop.isKind(SyntaxKind13.PropertyAssignment))
+          continue;
+        const selector = prop.getName();
+        const nameNode = prop.getNameNode();
+        const actualSelector = nameNode.isKind(SyntaxKind13.StringLiteral) ? nameNode.getLiteralValue() : selector;
+        const init = prop.getInitializer();
+        if (!init || !init.isKind(SyntaxKind13.ArrayLiteralExpression))
+          continue;
+        const nestedEntries = [];
+        const rawDeclarations = [];
+        for (const el of init.getElements()) {
+          if (el.isKind(SyntaxKind13.StringLiteral)) {
+            nestedEntries.push(el.getLiteralValue());
+          } else if (el.isKind(SyntaxKind13.ObjectLiteralExpression)) {
+            const rawDecl = extractRawDeclaration(el);
+            if (rawDecl)
+              rawDeclarations.push(rawDecl);
+          }
+        }
+        results.push({
+          kind: "nested",
+          value: "",
+          selector: actualSelector,
+          entries: nestedEntries,
+          rawDeclarations
+        });
+      }
+    }
+  }
+  return results;
+}
+function extractRawDeclaration(node) {
+  if (!node.isKind(SyntaxKind13.ObjectLiteralExpression))
+    return null;
+  let property = null;
+  let value = null;
+  for (const prop of node.getProperties()) {
+    if (!prop.isKind(SyntaxKind13.PropertyAssignment))
+      return null;
+    const name = prop.getName();
+    const init = prop.getInitializer();
+    if (!init || !init.isKind(SyntaxKind13.StringLiteral))
+      return null;
+    if (name === "property")
+      property = init.getLiteralValue();
+    else if (name === "value")
+      value = init.getLiteralValue();
+  }
+  if (property && value)
+    return { property, value };
+  return null;
+}
+function buildCSSRules(className, entries) {
+  const rules = [];
+  const baseDecls = [];
+  const pseudoDecls = new Map;
+  for (const entry of entries) {
+    if (entry.kind === "shorthand") {
+      const parsed = parseShorthand(entry.value);
+      if (!parsed)
+        continue;
+      const resolved = resolveDeclarations(parsed);
+      if (!resolved)
+        continue;
+      if (parsed.pseudo) {
+        const existing = pseudoDecls.get(parsed.pseudo) ?? [];
+        existing.push(...resolved);
+        pseudoDecls.set(parsed.pseudo, existing);
+      } else {
+        baseDecls.push(...resolved);
+      }
+    } else if (entry.kind === "nested" && entry.selector && entry.entries) {
+      const nestedDecls = [];
+      for (const nestedEntry of entry.entries) {
+        const parsed = parseShorthand(nestedEntry);
+        if (!parsed)
+          continue;
+        const resolved = resolveDeclarations(parsed);
+        if (!resolved)
+          continue;
+        nestedDecls.push(...resolved);
+      }
+      if (entry.rawDeclarations) {
+        for (const raw of entry.rawDeclarations) {
+          nestedDecls.push(`${raw.property}: ${raw.value};`);
+        }
+      }
+      const resolvedSelector = entry.selector.replaceAll("&", `.${className}`);
+      if (nestedDecls.length > 0) {
+        rules.push(formatCSSRule(resolvedSelector, nestedDecls));
+      }
+    }
+  }
+  if (baseDecls.length > 0) {
+    rules.unshift(formatCSSRule(`.${className}`, baseDecls));
+  }
+  for (const [pseudo, decls] of pseudoDecls) {
+    rules.push(formatCSSRule(`.${className}${pseudo}`, decls));
+  }
+  return rules;
+}
+function formatCSSRule(selector, declarations) {
+  const props = declarations.map((d) => `  ${d}`).join(`
+`);
+  return `${selector} {
+${props}
+}`;
+}
+function parseShorthand(input) {
+  const parts = input.split(":");
+  if (parts.length === 1) {
+    const [property] = parts;
+    return { property, value: null, pseudo: null };
+  }
+  if (parts.length === 2) {
+    const [a, b] = parts;
+    if (PSEUDO_PREFIXES.has(a)) {
+      return { property: b, value: null, pseudo: PSEUDO_MAP[a] ?? a };
+    }
+    return { property: a, value: b, pseudo: null };
+  }
+  if (parts.length === 3) {
+    const [a, b, c] = parts;
+    if (PSEUDO_PREFIXES.has(a)) {
+      return { property: b, value: c, pseudo: PSEUDO_MAP[a] ?? a };
+    }
+  }
+  return null;
+}
+function resolveDeclarations(parsed) {
+  const { property, value } = parsed;
+  if (DISPLAY_MAP[property] !== undefined && value === null) {
+    return [`display: ${DISPLAY_MAP[property]};`];
+  }
+  const keyword = KEYWORD_MAP[property];
+  if (keyword !== undefined && value === null) {
+    return keyword.map((d) => `${d.property}: ${d.value};`);
+  }
+  const mapping = PROPERTY_MAP[property];
+  if (!mapping || value === null)
+    return null;
+  const resolvedValue = resolveValue(value, mapping.valueType, property);
+  if (resolvedValue === null)
+    return null;
+  return mapping.properties.map((prop) => `${prop}: ${resolvedValue};`);
+}
+function resolveValue(value, valueType, property) {
+  switch (valueType) {
+    case "spacing":
+      return SPACING_SCALE[value] ?? null;
+    case "color":
+      return resolveColor(value);
+    case "radius":
+      return RADIUS_SCALE[value] ?? null;
+    case "shadow":
+      return SHADOW_SCALE[value] ?? null;
+    case "size": {
+      if (value === "screen") {
+        return HEIGHT_AXIS_PROPERTIES.has(property) ? "100vh" : "100vw";
+      }
+      return SPACING_SCALE[value] ?? SIZE_KEYWORDS[value] ?? null;
+    }
+    case "alignment":
+      return ALIGNMENT_MAP[value] ?? null;
+    case "font-size":
+      return FONT_SIZE_SCALE[value] ?? null;
+    case "font-weight":
+      return FONT_WEIGHT_SCALE[value] ?? null;
+    case "line-height":
+      return LINE_HEIGHT_SCALE[value] ?? null;
+    case "ring": {
+      const num = Number(value);
+      if (Number.isNaN(num) || num < 0)
+        return null;
+      return `${num}px solid var(--color-ring)`;
+    }
+    case "content":
+      return CONTENT_MAP[value] ?? null;
+    default:
+      return value;
+  }
+}
+function resolveColor(value) {
+  const dotIndex = value.indexOf(".");
+  if (dotIndex !== -1) {
+    const namespace = value.substring(0, dotIndex);
+    const shade = value.substring(dotIndex + 1);
+    if (COLOR_NAMESPACES.has(namespace)) {
+      return `var(--color-${namespace}-${shade})`;
+    }
+    return null;
+  }
+  if (COLOR_NAMESPACES.has(value)) {
+    return `var(--color-${value})`;
+  }
+  if (CSS_COLOR_KEYWORDS.has(value))
+    return value;
+  return null;
+}
+function generateClassName(filePath, blockName) {
+  const input = `${filePath}::${blockName}`;
+  const hash = djb2Hash(input);
+  return `_${hash}`;
+}
+function djb2Hash(str) {
+  let hash = 5381;
+  for (let i = 0;i < str.length; i++) {
+    hash = (hash << 5) + hash + str.charCodeAt(i) | 0;
+  }
+  return (hash >>> 0).toString(16).padStart(8, "0");
+}
+// src/css-extraction/hmr.ts
+class CSSHMRHandler {
+  cssCache = new Map;
+  register(filePath, css) {
+    this.cssCache.set(filePath, css);
+  }
+  update(filePath, newCSS) {
+    const previousCSS = this.cssCache.get(filePath);
+    if (previousCSS === newCSS) {
+      return {
+        hasChanged: false,
+        css: newCSS,
+        affectedFiles: []
+      };
+    }
+    this.cssCache.set(filePath, newCSS);
+    return {
+      hasChanged: true,
+      css: newCSS,
+      affectedFiles: [filePath]
+    };
+  }
+  remove(filePath) {
+    this.cssCache.delete(filePath);
+  }
+  getSnapshot() {
+    const parts = [];
+    for (const [_filePath, css] of this.cssCache) {
+      if (css.length > 0) {
+        parts.push(css);
+      }
+    }
+    return parts.join(`
+`);
+  }
+  get size() {
+    return this.cssCache.size;
+  }
+  clear() {
+    this.cssCache.clear();
+  }
+}
+// src/css-extraction/route-css-manifest.ts
+class RouteCSSManifest {
+  build(routeToFiles, fileExtractions) {
+    const manifest = new Map;
+    for (const [route, files] of routeToFiles) {
+      const cssFiles = [];
+      for (const filePath of files) {
+        const extraction = fileExtractions.get(filePath);
+        if (extraction && extraction.css.length > 0) {
+          cssFiles.push(filePath);
+        }
+      }
+      manifest.set(route, cssFiles);
+    }
+    return manifest;
+  }
+}
+// src/diagnostics/css-diagnostics.ts
+import {
+  COLOR_NAMESPACES as COLOR_NAMESPACES2,
+  CSS_COLOR_KEYWORDS as CSS_COLOR_KEYWORDS2,
+  KEYWORD_MAP as KEYWORD_MAP2,
+  PROPERTY_MAP as PROPERTY_MAP2,
+  PSEUDO_PREFIXES as PSEUDO_PREFIXES2,
+  SPACING_SCALE as SPACING_SCALE2
+} from "@vertz/ui/internals";
+import { SyntaxKind as SyntaxKind14 } from "ts-morph";
+var KNOWN_PROPERTIES = new Set([...Object.keys(PROPERTY_MAP2), ...Object.keys(KEYWORD_MAP2)]);
+var SPACING_VALUES = new Set(Object.keys(SPACING_SCALE2));
+var SPACING_PROPERTIES = new Set(Object.entries(PROPERTY_MAP2).filter(([_, mapping]) => mapping.valueType === "spacing").map(([key]) => key));
+
+class CSSDiagnostics {
+  analyze(sourceFile) {
+    const diagnostics = [];
+    const callExpressions = sourceFile.getDescendantsOfKind(SyntaxKind14.CallExpression);
+    for (const call of callExpressions) {
+      const expression = call.getExpression();
+      if (!expression.isKind(SyntaxKind14.Identifier) || expression.getText() !== "css") {
+        continue;
+      }
+      const args = call.getArguments();
+      if (args.length === 0)
+        continue;
+      const firstArg = args[0];
+      if (!firstArg || !firstArg.isKind(SyntaxKind14.ObjectLiteralExpression))
+        continue;
+      for (const prop of firstArg.getProperties()) {
+        if (!prop.isKind(SyntaxKind14.PropertyAssignment))
+          continue;
+        const init = prop.getInitializer();
+        if (!init || !init.isKind(SyntaxKind14.ArrayLiteralExpression))
+          continue;
+        for (const element of init.getElements()) {
+          if (!element.isKind(SyntaxKind14.StringLiteral))
+            continue;
+          const value = element.getLiteralValue();
+          const pos = sourceFile.getLineAndColumnAtPos(element.getStart());
+          diagnostics.push(...this.validateShorthand(value, pos.line, pos.column - 1));
+        }
+      }
+    }
+    return diagnostics;
+  }
+  validateShorthand(input, line, column) {
+    const diagnostics = [];
+    const parts = input.split(":");
+    if (parts.length === 0 || parts.length === 1 && parts[0] === "") {
+      diagnostics.push({
+        code: "css-empty-shorthand",
+        message: "Empty shorthand string",
+        severity: "error",
+        line,
+        column
+      });
+      return diagnostics;
+    }
+    let property;
+    let value;
+    let pseudo;
+    if (parts.length === 1) {
+      const [p] = parts;
+      property = p;
+    } else if (parts.length === 2) {
+      const [a, b] = parts;
+      if (PSEUDO_PREFIXES2.has(a)) {
+        pseudo = a;
+        property = b;
+      } else {
+        property = a;
+        value = b;
+      }
+    } else if (parts.length === 3) {
+      const [a, b, c] = parts;
+      pseudo = a;
+      property = b;
+      value = c;
+    } else {
+      diagnostics.push({
+        code: "css-malformed-shorthand",
+        message: `Malformed shorthand '${input}': too many segments. Expected 'property:value' or 'pseudo:property:value'.`,
+        severity: "error",
+        line,
+        column
+      });
+      return diagnostics;
+    }
+    if (pseudo && !PSEUDO_PREFIXES2.has(pseudo)) {
+      diagnostics.push({
+        code: "css-unknown-pseudo",
+        message: `Unknown pseudo prefix '${pseudo}'. Supported: ${[...PSEUDO_PREFIXES2].join(", ")}`,
+        severity: "error",
+        line,
+        column,
+        fix: `Use one of: ${[...PSEUDO_PREFIXES2].join(", ")}`
+      });
+    }
+    if (!KNOWN_PROPERTIES.has(property)) {
+      diagnostics.push({
+        code: "css-unknown-property",
+        message: `Unknown CSS shorthand property '${property}'.`,
+        severity: "error",
+        line,
+        column,
+        fix: `Available properties: ${[...KNOWN_PROPERTIES].join(", ")}`
+      });
+    }
+    if (value && SPACING_PROPERTIES.has(property) && !SPACING_VALUES.has(value)) {
+      diagnostics.push({
+        code: "css-invalid-spacing",
+        message: `Invalid spacing value '${value}' for '${property}'. Use the spacing scale (0, 1, 2, 4, 8, etc.).`,
+        severity: "error",
+        line,
+        column,
+        fix: `Use a spacing scale value: ${[...SPACING_VALUES].join(", ")}`
+      });
+    }
+    if (value && (property === "bg" || property === "text" || property === "border")) {
+      this.validateColorToken(value, property, line, column, diagnostics);
+    }
+    return diagnostics;
+  }
+  validateColorToken(value, property, line, column, diagnostics) {
+    if (CSS_COLOR_KEYWORDS2.has(value))
+      return;
+    const dotIndex = value.indexOf(".");
+    if (dotIndex !== -1) {
+      const namespace = value.substring(0, dotIndex);
+      if (!COLOR_NAMESPACES2.has(namespace)) {
+        diagnostics.push({
+          code: "css-unknown-color-token",
+          message: `Unknown color token namespace '${namespace}' in '${property}:${value}'. Known: ${[...COLOR_NAMESPACES2].join(", ")}`,
+          severity: "error",
+          line,
+          column,
+          fix: `Use a known color namespace: ${[...COLOR_NAMESPACES2].join(", ")}`
+        });
+      }
+      return;
+    }
+    if (!COLOR_NAMESPACES2.has(value)) {
+      diagnostics.push({
+        code: "css-unknown-color-token",
+        message: `Unknown color token '${value}' for '${property}'. Use a design token (e.g. 'primary', 'background') or shade notation (e.g. 'primary.700').`,
+        severity: "error",
+        line,
+        column,
+        fix: `Use a known color token: ${[...COLOR_NAMESPACES2].join(", ")}`
+      });
+    }
+  }
+}
+// src/library-plugin.ts
+import { readFile } from "node:fs/promises";
+import remapping from "@ampproject/remapping";
+import MagicString2 from "magic-string";
+import { Project as Project3, ts as ts3 } from "ts-morph";
+
+// src/transformers/hydration-transformer.ts
+import { SyntaxKind as SyntaxKind15 } from "ts-morph";
+class HydrationTransformer {
+  transform(s, sourceFile) {
+    const componentAnalyzer = new ComponentAnalyzer;
+    const components = componentAnalyzer.analyze(sourceFile);
+    for (const component of components) {
+      if (this._isInteractive(sourceFile, component)) {
+        this._addHydrationMarker(s, sourceFile, component);
+      }
+    }
+  }
+  _isInteractive(sourceFile, component) {
+    const bodyNode = findBodyNode(sourceFile, component);
+    if (!bodyNode)
+      return false;
+    for (const stmt of bodyNode.getChildSyntaxList()?.getChildren() ?? []) {
+      if (!stmt.isKind(SyntaxKind15.VariableStatement))
+        continue;
+      const declList = stmt.getChildrenOfKind(SyntaxKind15.VariableDeclarationList)[0];
+      if (!declList)
+        continue;
+      if (declList.getText().startsWith("let ")) {
+        return true;
+      }
+    }
+    return false;
+  }
+  _addHydrationMarker(s, sourceFile, component) {
+    const bodyNode = findBodyNode(sourceFile, component);
+    if (!bodyNode)
+      return;
+    const returnStmts = bodyNode.getDescendantsOfKind(SyntaxKind15.ReturnStatement);
+    for (const ret of returnStmts) {
+      const expr = ret.getExpression();
+      if (!expr)
+        continue;
+      const rootJsx = this._findRootJsx(expr);
+      if (rootJsx) {
+        this._injectAttribute(s, rootJsx, component.name);
+        return;
+      }
+    }
+    const arrowBodies = sourceFile.getDescendantsOfKind(SyntaxKind15.ArrowFunction);
+    for (const arrow of arrowBodies) {
+      const body = arrow.getBody();
+      if (body.getStart() === component.bodyStart && body.getEnd() === component.bodyEnd) {
+        const rootJsx = this._findRootJsx(body);
+        if (rootJsx) {
+          this._injectAttribute(s, rootJsx, component.name);
+          return;
+        }
+      }
+    }
+  }
+  _findRootJsx(node) {
+    if (node.isKind(SyntaxKind15.JsxElement) || node.isKind(SyntaxKind15.JsxSelfClosingElement)) {
+      return node;
+    }
+    if (node.isKind(SyntaxKind15.ParenthesizedExpression)) {
+      const inner = node.getExpression();
+      return this._findRootJsx(inner);
+    }
+    for (const child of node.getChildren()) {
+      const found = this._findRootJsx(child);
+      if (found)
+        return found;
+    }
+    return null;
+  }
+  _injectAttribute(s, jsxNode, componentName) {
+    if (jsxNode.isKind(SyntaxKind15.JsxSelfClosingElement)) {
+      const tagName = jsxNode.getChildrenOfKind(SyntaxKind15.Identifier)[0];
+      if (tagName) {
+        const insertPos = tagName.getEnd();
+        s.appendLeft(insertPos, ` data-v-id="${componentName}"`);
+      }
+    } else if (jsxNode.isKind(SyntaxKind15.JsxElement)) {
+      const openingElement = jsxNode.getChildrenOfKind(SyntaxKind15.JsxOpeningElement)[0];
+      if (openingElement) {
+        const tagName = openingElement.getChildrenOfKind(SyntaxKind15.Identifier)[0];
+        if (tagName) {
+          const insertPos = tagName.getEnd();
+          s.appendLeft(insertPos, ` data-v-id="${componentName}"`);
+        }
+      }
+    }
+  }
+}
+
+// src/library-plugin.ts
+function createVertzLibraryPlugin(options) {
+  const filter = options?.filter ?? /\.tsx$/;
+  return {
+    name: "vertz-library-plugin",
+    setup(build) {
+      build.onLoad({ filter }, async (args) => {
+        const source = await readFile(args.path, "utf-8");
+        const hydrationS = new MagicString2(source);
+        const hydrationProject = new Project3({
+          useInMemoryFileSystem: true,
+          compilerOptions: {
+            jsx: ts3.JsxEmit.Preserve,
+            strict: true
+          }
+        });
+        const hydrationSourceFile = hydrationProject.createSourceFile(args.path, source);
+        const hydrationTransformer = new HydrationTransformer;
+        hydrationTransformer.transform(hydrationS, hydrationSourceFile);
+        const hydratedCode = hydrationS.toString();
+        const hydrationMap = hydrationS.generateMap({
+          source: args.path,
+          includeContent: true
+        });
+        const compileResult = compile(hydratedCode, {
+          filename: args.path,
+          target: options?.target
+        });
+        const errors = compileResult.diagnostics.filter((d) => d.severity === "error");
+        if (errors.length > 0) {
+          const messages = errors.map((d) => `${d.code}: ${d.message} (line ${d.line})`);
+          throw new Error(`Vertz compilation errors in ${args.path}:
+${messages.join(`
+`)}`);
+        }
+        for (const d of compileResult.diagnostics) {
+          if (d.severity === "warning") {
+            console.warn(`[vertz-library-plugin] ${args.path}:${d.line} ${d.code}: ${d.message}`);
+          }
+        }
+        const remapped = remapping([compileResult.map, hydrationMap], () => null);
+        const mapBase64 = Buffer.from(remapped.toString()).toString("base64");
+        const sourceMapComment = `
+//# sourceMappingURL=data:application/json;base64,${mapBase64}`;
+        const contents = compileResult.code + sourceMapComment;
+        return { contents, loader: "tsx" };
+      });
+    }
+  };
+}
+// src/transformers/css-transformer.ts
+import {
+  ALIGNMENT_MAP as ALIGNMENT_MAP2,
+  COLOR_NAMESPACES as COLOR_NAMESPACES3,
+  CONTENT_MAP as CONTENT_MAP2,
+  CSS_COLOR_KEYWORDS as CSS_COLOR_KEYWORDS3,
+  DISPLAY_MAP as DISPLAY_MAP2,
+  FONT_SIZE_SCALE as FONT_SIZE_SCALE2,
+  FONT_WEIGHT_SCALE as FONT_WEIGHT_SCALE2,
+  HEIGHT_AXIS_PROPERTIES as HEIGHT_AXIS_PROPERTIES2,
+  KEYWORD_MAP as KEYWORD_MAP3,
+  LINE_HEIGHT_SCALE as LINE_HEIGHT_SCALE2,
+  PROPERTY_MAP as PROPERTY_MAP3,
+  PSEUDO_MAP as PSEUDO_MAP2,
+  PSEUDO_PREFIXES as PSEUDO_PREFIXES3,
+  RADIUS_SCALE as RADIUS_SCALE2,
+  SHADOW_SCALE as SHADOW_SCALE2,
+  SIZE_KEYWORDS as SIZE_KEYWORDS2,
+  SPACING_SCALE as SPACING_SCALE3
+} from "@vertz/ui/internals";
+import { SyntaxKind as SyntaxKind16 } from "ts-morph";
+
+class CSSTransformer {
+  transform(s, sourceFile, cssCalls, filePath) {
+    const allCssRules = [];
+    const classNameMaps = new Map;
+    const sortedCalls = [...cssCalls].sort((a, b) => b.start - a.start);
+    for (const call of sortedCalls) {
+      if (call.kind !== "static")
+        continue;
+      const callIndex = cssCalls.indexOf(call);
+      const { classNames, cssRules } = this.processStaticCall(sourceFile, call, filePath);
+      classNameMaps.set(callIndex, classNames);
+      allCssRules.push(...cssRules);
+      const replacement = this.buildReplacement(classNames);
+      s.overwrite(call.start, call.end, replacement);
+    }
+    return {
+      css: allCssRules.join(`
+`),
+      classNameMaps
+    };
+  }
+  processStaticCall(sourceFile, call, filePath) {
+    const classNames = {};
+    const cssRules = [];
+    const callNode = findCallAtPosition(sourceFile, call.start);
+    if (!callNode)
+      return { classNames, cssRules };
+    const args = callNode.getArguments();
+    if (args.length === 0)
+      return { classNames, cssRules };
+    const firstArg = args[0];
+    if (!firstArg || !firstArg.isKind(SyntaxKind16.ObjectLiteralExpression)) {
+      return { classNames, cssRules };
+    }
+    for (const prop of firstArg.getProperties()) {
+      if (!prop.isKind(SyntaxKind16.PropertyAssignment))
+        continue;
+      const blockName = prop.getName();
+      const className = generateClassName2(filePath, blockName);
+      classNames[blockName] = className;
+      const init = prop.getInitializer();
+      if (!init || !init.isKind(SyntaxKind16.ArrayLiteralExpression))
+        continue;
+      const entries = extractEntries2(init);
+      const rules = buildCSSRules2(className, entries);
+      cssRules.push(...rules);
+    }
+    return { classNames, cssRules };
+  }
+  buildReplacement(classNames) {
+    const entries = Object.entries(classNames).map(([name, className]) => `${name}: '${className}'`).join(", ");
+    return `{ ${entries} }`;
+  }
+}
+function findCallAtPosition(sourceFile, start) {
+  const calls = sourceFile.getDescendantsOfKind(SyntaxKind16.CallExpression);
+  for (const call of calls) {
+    if (call.getStart() === start)
+      return call;
+  }
+  return null;
+}
+function extractEntries2(arrayNode) {
+  if (!arrayNode.isKind(SyntaxKind16.ArrayLiteralExpression))
+    return [];
+  const results = [];
+  for (const element of arrayNode.getElements()) {
+    if (element.isKind(SyntaxKind16.StringLiteral)) {
+      results.push({ kind: "shorthand", value: element.getLiteralValue() });
+    } else if (element.isKind(SyntaxKind16.ObjectLiteralExpression)) {
+      for (const prop of element.getProperties()) {
+        if (!prop.isKind(SyntaxKind16.PropertyAssignment))
+          continue;
+        const selector = prop.getName();
+        const nameNode = prop.getNameNode();
+        const actualSelector = nameNode.isKind(SyntaxKind16.StringLiteral) ? nameNode.getLiteralValue() : selector;
+        const init = prop.getInitializer();
+        if (!init || !init.isKind(SyntaxKind16.ArrayLiteralExpression))
+          continue;
+        const nestedEntries = [];
+        const rawDeclarations = [];
+        for (const el of init.getElements()) {
+          if (el.isKind(SyntaxKind16.StringLiteral)) {
+            nestedEntries.push(el.getLiteralValue());
+          } else if (el.isKind(SyntaxKind16.ObjectLiteralExpression)) {
+            const rawDecl = extractRawDeclaration2(el);
+            if (rawDecl)
+              rawDeclarations.push(rawDecl);
+          }
+        }
+        results.push({
+          kind: "nested",
+          value: "",
+          selector: actualSelector,
+          entries: nestedEntries,
+          rawDeclarations
+        });
+      }
+    }
+  }
+  return results;
+}
+function extractRawDeclaration2(node) {
+  if (!node.isKind(SyntaxKind16.ObjectLiteralExpression))
+    return null;
+  let property = null;
+  let value = null;
+  for (const prop of node.getProperties()) {
+    if (!prop.isKind(SyntaxKind16.PropertyAssignment))
+      return null;
+    const name = prop.getName();
+    const init = prop.getInitializer();
+    if (!init || !init.isKind(SyntaxKind16.StringLiteral))
+      return null;
+    if (name === "property")
+      property = init.getLiteralValue();
+    else if (name === "value")
+      value = init.getLiteralValue();
+  }
+  if (property && value)
+    return { property, value };
+  return null;
+}
+function generateClassName2(filePath, blockName) {
+  const input = `${filePath}::${blockName}`;
+  const hash = djb2Hash2(input);
+  return `_${hash}`;
+}
+function djb2Hash2(str) {
+  let hash = 5381;
+  for (let i = 0;i < str.length; i++) {
+    hash = (hash << 5) + hash + str.charCodeAt(i) | 0;
+  }
+  return (hash >>> 0).toString(16).padStart(8, "0");
+}
+function buildCSSRules2(className, entries) {
+  const rules = [];
+  const baseDecls = [];
+  const pseudoDecls = new Map;
+  for (const entry of entries) {
+    if (entry.kind === "shorthand") {
+      const parsed = parseShorthandInline(entry.value);
+      if (!parsed)
+        continue;
+      const resolved = resolveInline(parsed);
+      if (!resolved)
+        continue;
+      if (parsed.pseudo) {
+        const existing = pseudoDecls.get(parsed.pseudo) ?? [];
+        existing.push(...resolved);
+        pseudoDecls.set(parsed.pseudo, existing);
+      } else {
+        baseDecls.push(...resolved);
+      }
+    } else if (entry.kind === "nested" && entry.selector && entry.entries) {
+      const nestedDecls = [];
+      for (const nestedEntry of entry.entries) {
+        const parsed = parseShorthandInline(nestedEntry);
+        if (!parsed)
+          continue;
+        const resolved = resolveInline(parsed);
+        if (!resolved)
+          continue;
+        nestedDecls.push(...resolved);
+      }
+      if (entry.rawDeclarations) {
+        for (const raw of entry.rawDeclarations) {
+          nestedDecls.push(`${raw.property}: ${raw.value};`);
+        }
+      }
+      const resolvedSelector = entry.selector.replaceAll("&", `.${className}`);
+      if (nestedDecls.length > 0) {
+        rules.push(formatCSSRule2(resolvedSelector, nestedDecls));
+      }
+    }
+  }
+  if (baseDecls.length > 0) {
+    rules.unshift(formatCSSRule2(`.${className}`, baseDecls));
+  }
+  for (const [pseudo, decls] of pseudoDecls) {
+    rules.push(formatCSSRule2(`.${className}${pseudo}`, decls));
+  }
+  return rules;
+}
+function formatCSSRule2(selector, declarations) {
+  const props = declarations.map((d) => `  ${d}`).join(`
+`);
+  return `${selector} {
+${props}
+}`;
+}
+function parseShorthandInline(input) {
+  const parts = input.split(":");
+  if (parts.length === 1) {
+    const [property] = parts;
+    return { property, value: null, pseudo: null };
+  }
+  if (parts.length === 2) {
+    const [a, b] = parts;
+    if (PSEUDO_PREFIXES3.has(a)) {
+      return { property: b, value: null, pseudo: PSEUDO_MAP2[a] ?? a };
+    }
+    return { property: a, value: b, pseudo: null };
+  }
+  if (parts.length === 3) {
+    const [a, b, c] = parts;
+    if (PSEUDO_PREFIXES3.has(a)) {
+      return { property: b, value: c, pseudo: PSEUDO_MAP2[a] ?? a };
+    }
+  }
+  return null;
+}
+function resolveInline(parsed) {
+  const { property, value } = parsed;
+  if (DISPLAY_MAP2[property] !== undefined && value === null) {
+    return [`display: ${DISPLAY_MAP2[property]};`];
+  }
+  const keyword = KEYWORD_MAP3[property];
+  if (keyword !== undefined && value === null) {
+    return keyword.map((d) => `${d.property}: ${d.value};`);
+  }
+  const mapping = PROPERTY_MAP3[property];
+  if (!mapping || value === null)
+    return null;
+  const resolvedValue = resolveValueInline(value, mapping.valueType, property);
+  if (resolvedValue === null)
+    return null;
+  return mapping.properties.map((prop) => `${prop}: ${resolvedValue};`);
+}
+function resolveValueInline(value, valueType, property) {
+  switch (valueType) {
+    case "spacing":
+      return SPACING_SCALE3[value] ?? null;
+    case "color":
+      return resolveColorInline(value);
+    case "radius":
+      return RADIUS_SCALE2[value] ?? null;
+    case "shadow":
+      return SHADOW_SCALE2[value] ?? null;
+    case "size": {
+      if (value === "screen") {
+        return HEIGHT_AXIS_PROPERTIES2.has(property) ? "100vh" : "100vw";
+      }
+      return SPACING_SCALE3[value] ?? SIZE_KEYWORDS2[value] ?? null;
+    }
+    case "alignment":
+      return ALIGNMENT_MAP2[value] ?? null;
+    case "font-size":
+      return FONT_SIZE_SCALE2[value] ?? null;
+    case "font-weight":
+      return FONT_WEIGHT_SCALE2[value] ?? null;
+    case "line-height":
+      return LINE_HEIGHT_SCALE2[value] ?? null;
+    case "ring": {
+      const num = Number(value);
+      if (Number.isNaN(num) || num < 0)
+        return null;
+      return `${num}px solid var(--color-ring)`;
+    }
+    case "content":
+      return CONTENT_MAP2[value] ?? null;
+    default:
+      return value;
+  }
+}
+function resolveColorInline(value) {
+  const dotIndex = value.indexOf(".");
+  if (dotIndex !== -1) {
+    const namespace = value.substring(0, dotIndex);
+    const shade = value.substring(dotIndex + 1);
+    if (COLOR_NAMESPACES3.has(namespace)) {
+      return `var(--color-${namespace}-${shade})`;
+    }
+    return null;
+  }
+  if (COLOR_NAMESPACES3.has(value)) {
+    return `var(--color-${value})`;
+  }
+  if (CSS_COLOR_KEYWORDS3.has(value))
+    return value;
+  return null;
+}
+// src/transformers/prop-transformer.ts
+import { SyntaxKind as SyntaxKind17 } from "ts-morph";
+
+class PropTransformer {
+  transform(_source, _sourceFile, _component, _variables, _jsxExpressions) {}
+  buildPropsObject(attrs, jsxMap) {
+    if (attrs.length === 0)
+      return "{}";
+    const props = [];
+    for (const attr of attrs) {
+      if (!attr.isKind(SyntaxKind17.JsxAttribute))
+        continue;
+      const name = attr.getNameNode().getText();
+      const init = attr.getInitializer();
+      if (!init) {
+        props.push(`${name}: true`);
+        continue;
+      }
+      if (init.isKind(SyntaxKind17.StringLiteral)) {
+        props.push(`${name}: ${init.getText()}`);
+        continue;
+      }
+      if (init.isKind(SyntaxKind17.JsxExpression)) {
+        const exprInfo = jsxMap.get(init.getStart());
+        const exprNode = init.getExpression();
+        const exprText = exprNode?.getText() ?? "";
+        if (exprInfo?.reactive) {
+          props.push(`get ${name}() { return ${exprText}; }`);
+        } else {
+          props.push(`${name}: ${exprText}`);
+        }
+      }
+    }
+    return `{ ${props.join(", ")} }`;
+  }
+}
+// src/type-generation/css-properties.ts
+function generateCSSProperties(input) {
+  const varRefs = [];
+  for (const [name, values] of Object.entries(input.colors)) {
+    for (const key of Object.keys(values)) {
+      if (key === "DEFAULT") {
+        varRefs.push(`'var(--color-${name})'`);
+      } else if (!key.startsWith("_")) {
+        varRefs.push(`'var(--color-${name}-${key})'`);
+      }
+    }
+  }
+  if (input.spacing) {
+    for (const name of Object.keys(input.spacing)) {
+      varRefs.push(`'var(--spacing-${name})'`);
+    }
+  }
+  const unionMembers = varRefs.length > 0 ? varRefs.join(" | ") : "never";
+  const lines = [];
+  lines.push(`type ThemeTokenVar = ${unionMembers};`);
+  lines.push("");
+  lines.push("export interface CSSProperties {");
+  lines.push("  color?: ThemeTokenVar | string;");
+  lines.push("  backgroundColor?: ThemeTokenVar | string;");
+  lines.push("  borderColor?: ThemeTokenVar | string;");
+  lines.push("  padding?: ThemeTokenVar | string;");
+  lines.push("  margin?: ThemeTokenVar | string;");
+  lines.push("  gap?: ThemeTokenVar | string;");
+  lines.push("  width?: ThemeTokenVar | string;");
+  lines.push("  height?: ThemeTokenVar | string;");
+  lines.push("}");
+  return lines.join(`
+`);
+}
+// src/type-generation/theme-types.ts
+function generateThemeTypes(input) {
+  const entries = [];
+  for (const [name, values] of Object.entries(input.colors)) {
+    for (const key of Object.keys(values)) {
+      if (key === "DEFAULT") {
+        entries.push(`  '${name}': string;`);
+      } else if (!key.startsWith("_")) {
+        entries.push(`  '${name}.${key}': string;`);
+      }
+    }
+  }
+  if (input.spacing) {
+    for (const name of Object.keys(input.spacing)) {
+      entries.push(`  'spacing.${name}': string;`);
+    }
+  }
+  return `export type ThemeTokens = {
+${entries.join(`
+`)}
+};`;
+}
+export {
+  generateThemeTypes,
+  generateCSSProperties,
+  createVertzLibraryPlugin,
+  compile,
+  SignalTransformer,
+  SSRSafetyDiagnostics,
+  RouteCSSManifest,
+  ReactivityAnalyzer,
+  PropsDestructuringDiagnostics,
+  PropTransformer,
+  MutationTransformer,
+  MutationDiagnostics,
+  MutationAnalyzer,
+  JsxTransformer,
+  JsxAnalyzer,
+  HydrationTransformer,
+  DeadCSSEliminator,
+  ComputedTransformer,
+  ComponentAnalyzer,
+  CSSTransformer,
+  CSSHMRHandler,
+  CSSExtractor,
+  CSSDiagnostics,
+  CSSCodeSplitter,
+  CSSAnalyzer
+};