@vertz/ui-compiler 0.2.3 → 1.0.0

package/dist/index.js

@@ -1,3 +1,6 @@
+import { createRequire } from "node:module";
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
 // src/analyzers/component-analyzer.ts
 import {
   SyntaxKind
@@ -169,40 +172,12 @@ class CSSAnalyzer {
       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;
+        if (!el.isKind(SyntaxKind2.StringLiteral))
           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 [];
@@ -235,24 +210,6 @@ function findBodyNode(sourceFile, component) {
 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 [];
@@ -262,71 +219,16 @@ class JsxAnalyzer {
       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,
+        reactive: uniqueDeps.length > 0,
         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) => {
@@ -453,26 +355,21 @@ 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"])
+    signalProperties: new Set(["data", "loading", "error"]),
+    plainProperties: new Set(["refetch"])
   },
   form: {
-    signalProperties: new Set(["submitting", "dirty", "valid"]),
-    plainProperties: new Set(["action", "method", "onSubmit", "reset", "setFieldError", "submit"]),
-    fieldSignalProperties: new Set(["error", "dirty", "touched", "value"])
+    signalProperties: new Set(["submitting", "errors", "values"]),
+    plainProperties: new Set(["reset", "submit", "handleSubmit"])
   },
   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];
 }
@@ -483,14 +380,10 @@ class ReactivityAnalyzer {
     const bodyNode = findBodyNode(sourceFile, component);
     if (!bodyNode)
       return [];
-    const { signalApiAliases: importAliases, reactiveSourceAliases } = buildImportAliasMap(sourceFile);
-    const declaredNames = collectDeclaredNames(bodyNode);
+    const importAliases = buildImportAliasMap(sourceFile);
     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;
@@ -504,52 +397,14 @@ class ReactivityAnalyzer {
         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: []
-                  });
-                }
-              }
-            }
-          }
+          const deps2 = init ? collectIdentifierRefs(init) : [];
           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 };
+            const entry2 = { start: decl.getStart(), end: decl.getEnd(), deps: deps2 };
+            if (isLet) {
+              lets.set(bindingName, entry2);
+            } else if (isConst) {
               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;
@@ -562,16 +417,13 @@ class ReactivityAnalyzer {
           const callName = callExpr.getExpression();
           if (callName.isKind(SyntaxKind6.Identifier)) {
             const fnName = callName.getText();
-            const originalName = importAliases.get(fnName);
-            if (originalName) {
+            const originalName = importAliases.get(fnName) ?? fnName;
+            if (isSignalApi(originalName)) {
               const config = getSignalApiConfig(originalName);
               if (config) {
-                signalApiVars.set(name, config);
+                signalApiVars.set(name, config.signalProperties);
               }
             }
-            if (reactiveSourceAliases.has(fnName)) {
-              reactiveSourceVars.add(name);
-            }
           }
         }
         if (isLet) {
@@ -610,7 +462,7 @@ class ReactivityAnalyzer {
       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));
+        const dependsOnReactive = info.deps.some((dep) => signals.has(dep) || computeds.has(dep));
         if (dependsOnReactive) {
           computeds.add(name);
           changed = true;
@@ -625,11 +477,8 @@ class ReactivityAnalyzer {
         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 (signalApiVars.has(name)) {
+        varInfo.signalProperties = signalApiVars.get(name);
       }
       results.push(varInfo);
     }
@@ -640,18 +489,8 @@ class ReactivityAnalyzer {
         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;
+      if (signalApiVars.has(name)) {
+        varInfo.signalProperties = signalApiVars.get(name);
       }
       results.push(varInfo);
     }
@@ -688,8 +527,7 @@ function collectIdentifierRefs(node) {
   return refs;
 }
 function buildImportAliasMap(sourceFile) {
-  const signalApiAliases = new Map;
-  const reactiveSourceAliases = new Set;
+  const aliases = new Map;
   for (const importDecl of sourceFile.getImportDeclarations()) {
     const moduleSpecifier = importDecl.getModuleSpecifierValue();
     if (moduleSpecifier !== "@vertz/ui")
@@ -697,37 +535,20 @@ function buildImportAliasMap(sourceFile) {
     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());
+      const aliasNode = namedImport.getAliasNode();
+      if (aliasNode) {
+        const aliasName = aliasNode.getText();
+        if (isSignalApi(originalName)) {
+          aliases.set(aliasName, originalName);
+        }
       }
     }
   }
-  return names;
+  return aliases;
 }
 // src/compiler.ts
 import MagicString from "magic-string";
-import { Project, SyntaxKind as SyntaxKind12, ts } from "ts-morph";
+import { Project, SyntaxKind as SyntaxKind11, ts } from "ts-morph";
 
 // src/diagnostics/mutation-diagnostics.ts
 import { SyntaxKind as SyntaxKind7 } from "ts-morph";
@@ -838,160 +659,8 @@ class PropsDestructuringDiagnostics {
   }
 }
 
-// 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";
+import { SyntaxKind as SyntaxKind8 } from "ts-morph";
 class ComputedTransformer {
   transform(source, sourceFile, component, variables) {
     const computeds = new Set(variables.filter((v) => v.kind === "computed").map((v) => v.name));
@@ -1000,21 +669,11 @@ class ComputedTransformer {
     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))
+      if (!stmt.isKind(SyntaxKind8.VariableStatement))
         continue;
-      const declList = stmt.getChildrenOfKind(SyntaxKind9.VariableDeclarationList)[0];
+      const declList = stmt.getChildrenOfKind(SyntaxKind8.VariableDeclarationList)[0];
       if (!declList)
         continue;
       for (const decl of declList.getDeclarations()) {
@@ -1022,34 +681,8 @@ class ComputedTransformer {
         const init = decl.getInitializer();
         if (!init)
           continue;
-        if (nameNode.isKind(SyntaxKind9.ObjectBindingPattern)) {
+        if (nameNode.isKind(SyntaxKind8.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());
@@ -1077,7 +710,7 @@ class ComputedTransformer {
 }
 function transformComputedReads(source, bodyNode, computeds) {
   bodyNode.forEachDescendant((node) => {
-    if (!node.isKind(SyntaxKind9.Identifier))
+    if (!node.isKind(SyntaxKind8.Identifier))
       return;
     const name = node.getText();
     if (!computeds.has(name))
@@ -1085,19 +718,19 @@ function transformComputedReads(source, bodyNode, computeds) {
     const parent = node.getParent();
     if (!parent)
       return;
-    if (parent.isKind(SyntaxKind9.VariableDeclaration) && parent.getNameNode() === node) {
+    if (parent.isKind(SyntaxKind8.VariableDeclaration) && parent.getNameNode() === node) {
       return;
     }
-    if (parent.isKind(SyntaxKind9.PropertyAccessExpression) && parent.getNameNode() === node) {
+    if (parent.isKind(SyntaxKind8.PropertyAccessExpression) && parent.getNameNode() === node) {
       return;
     }
-    if (parent.isKind(SyntaxKind9.PropertyAssignment) && parent.getNameNode() === node) {
+    if (parent.isKind(SyntaxKind8.PropertyAssignment) && parent.getNameNode() === node) {
       return;
     }
-    if (parent.isKind(SyntaxKind9.ShorthandPropertyAssignment)) {
+    if (parent.isKind(SyntaxKind8.ShorthandPropertyAssignment)) {
       return;
     }
-    if (parent.isKind(SyntaxKind9.BindingElement)) {
+    if (parent.isKind(SyntaxKind8.BindingElement)) {
       return;
     }
     source.overwrite(node.getStart(), node.getEnd(), `${name}.value`);
@@ -1105,7 +738,7 @@ function transformComputedReads(source, bodyNode, computeds) {
 }
 
 // src/transformers/jsx-transformer.ts
-import { SyntaxKind as SyntaxKind10 } from "ts-morph";
+import { SyntaxKind as SyntaxKind9 } from "ts-morph";
 var varCounter = 0;
 function genVar() {
   return `__el${varCounter++}`;
@@ -1122,73 +755,51 @@ class JsxTransformer {
       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);
+    this.transformAllJsx(bodyNode, reactiveNames, jsxMap, source);
   }
-  transformAllJsx(node, reactiveNames, jsxMap, source, formVarNames) {
+  transformAllJsx(node, reactiveNames, jsxMap, source) {
     if (isJsxTopLevel(node)) {
-      const transformed = transformJsxNode(node, reactiveNames, jsxMap, source, formVarNames);
+      const transformed = transformJsxNode(node, reactiveNames, jsxMap, source);
       source.overwrite(node.getStart(), node.getEnd(), transformed);
       return;
     }
     for (const child of node.getChildren()) {
-      this.transformAllJsx(child, reactiveNames, jsxMap, source, formVarNames);
+      this.transformAllJsx(child, reactiveNames, jsxMap, source);
     }
   }
 }
 function isJsxTopLevel(node) {
-  return node.isKind(SyntaxKind10.JsxElement) || node.isKind(SyntaxKind10.JsxSelfClosingElement) || node.isKind(SyntaxKind10.JsxFragment);
+  return node.isKind(SyntaxKind9.JsxElement) || node.isKind(SyntaxKind9.JsxSelfClosingElement) || node.isKind(SyntaxKind9.JsxFragment);
 }
-function transformJsxNode(node, reactiveNames, jsxMap, source, formVarNames = new Set) {
-  if (node.isKind(SyntaxKind10.ParenthesizedExpression)) {
-    return transformJsxNode(node.getExpression(), reactiveNames, jsxMap, source, formVarNames);
+function transformJsxNode(node, reactiveNames, jsxMap, source) {
+  if (node.isKind(SyntaxKind9.ParenthesizedExpression)) {
+    return transformJsxNode(node.getExpression(), reactiveNames, jsxMap, source);
   }
-  if (node.isKind(SyntaxKind10.JsxElement)) {
-    return transformJsxElement(node, reactiveNames, jsxMap, source, formVarNames);
+  if (node.isKind(SyntaxKind9.JsxElement)) {
+    return transformJsxElement(node, reactiveNames, jsxMap, source);
   }
-  if (node.isKind(SyntaxKind10.JsxSelfClosingElement)) {
-    return transformSelfClosingElement(node, reactiveNames, jsxMap, source, formVarNames);
+  if (node.isKind(SyntaxKind9.JsxSelfClosingElement)) {
+    return transformSelfClosingElement(node, reactiveNames, jsxMap, source);
   }
-  if (node.isKind(SyntaxKind10.JsxFragment)) {
-    return transformFragment(node, reactiveNames, jsxMap, source, formVarNames);
+  if (node.isKind(SyntaxKind9.JsxFragment)) {
+    return transformFragment(node, reactiveNames, jsxMap, source);
   }
-  if (node.isKind(SyntaxKind10.JsxText)) {
+  if (node.isKind(SyntaxKind9.JsxText)) {
     const text = node.getText().trim();
     if (!text)
       return "";
-    return `__staticText(${JSON.stringify(text)})`;
+    return `document.createTextNode(${JSON.stringify(text)})`;
   }
   return node.getText();
 }
-function transformJsxElement(node, reactiveNames, jsxMap, source, formVarNames = new Set) {
-  const openingElement = node.getFirstChildByKind(SyntaxKind10.JsxOpeningElement);
+function transformJsxElement(node, reactiveNames, jsxMap, source) {
+  const openingElement = node.getFirstChildByKind(SyntaxKind9.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);
+    const propsObj = buildPropsObject(openingElement, jsxMap, source);
     return `${tagName}(${propsObj})`;
   }
   const elVar = genVar();
@@ -1196,45 +807,31 @@ function transformJsxElement(node, reactiveNames, jsxMap, source, formVarNames =
   statements.push(`const ${elVar} = __element(${JSON.stringify(tagName)})`);
   const attrs = openingElement.getAttributes();
   for (const attr of attrs) {
-    if (!attr.isKind(SyntaxKind10.JsxAttribute))
+    if (!attr.isKind(SyntaxKind9.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);
+    const childCode = transformChild(child, reactiveNames, jsxMap, elVar, source);
     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))
+function transformSelfClosingElement(node, _reactiveNames, jsxMap, source) {
+  if (!node.isKind(SyntaxKind9.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);
+    const propsObj = buildPropsObject(node, jsxMap, source);
     return `${tagName}(${propsObj})`;
   }
   const elVar = genVar();
@@ -1242,28 +839,25 @@ function transformSelfClosingElement(node, reactiveNames, jsxMap, source, formVa
   statements.push(`const ${elVar} = __element(${JSON.stringify(tagName)})`);
   const attrs = node.getAttributes();
   for (const attr of attrs) {
-    if (!attr.isKind(SyntaxKind10.JsxAttribute))
+    if (!attr.isKind(SyntaxKind9.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) {
+function transformFragment(node, reactiveNames, jsxMap, source) {
   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);
+    const childCode = transformChild(child, reactiveNames, jsxMap, fragVar, source);
     if (childCode)
       statements.push(childCode);
   }
@@ -1274,7 +868,7 @@ ${statements.map((s) => `  ${s};`).join(`
 })()`;
 }
 function processAttribute(attr, elVar, jsxMap, source) {
-  if (!attr.isKind(SyntaxKind10.JsxAttribute))
+  if (!attr.isKind(SyntaxKind9.JsxAttribute))
     return null;
   const attrName = attr.getNameNode().getText();
   const init = attr.getInitializer();
@@ -1282,35 +876,35 @@ function processAttribute(attr, elVar, jsxMap, source) {
     return null;
   if (attrName.startsWith("on") && attrName.length > 2) {
     const eventName = attrName[2]?.toLowerCase() + attrName.slice(3);
-    if (init.isKind(SyntaxKind10.JsxExpression)) {
+    if (init.isKind(SyntaxKind9.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)) {
+  if (init.isKind(SyntaxKind9.StringLiteral)) {
     return `${elVar}.setAttribute(${JSON.stringify(attrName)}, ${init.getText()})`;
   }
-  if (init.isKind(SyntaxKind10.JsxExpression)) {
+  if (init.isKind(SyntaxKind9.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 `${elVar}.setAttribute(${JSON.stringify(attrName)}, ${exprText})`;
   }
   return null;
 }
-function transformChild(child, reactiveNames, jsxMap, parentVar, source, formVarNames = new Set) {
-  if (child.isKind(SyntaxKind10.JsxText)) {
+function transformChild(child, reactiveNames, jsxMap, parentVar, source) {
+  if (child.isKind(SyntaxKind9.JsxText)) {
     const text = child.getText().trim();
     if (!text)
       return null;
-    return `__append(${parentVar}, __staticText(${JSON.stringify(text)}))`;
+    return `${parentVar}.appendChild(document.createTextNode(${JSON.stringify(text)}))`;
   }
-  if (child.isKind(SyntaxKind10.JsxExpression)) {
+  if (child.isKind(SyntaxKind9.JsxExpression)) {
     const exprInfo = jsxMap.get(child.getStart());
     const exprNode = child.getExpression();
     if (!exprNode)
@@ -1318,7 +912,7 @@ function transformChild(child, reactiveNames, jsxMap, parentVar, source, formVar
     if (exprInfo?.reactive) {
       const conditionalCode = tryTransformConditional(exprNode, reactiveNames, jsxMap, source);
       if (conditionalCode) {
-        return `__append(${parentVar}, ${conditionalCode})`;
+        return `${parentVar}.appendChild(${conditionalCode})`;
       }
       const listCode = tryTransformList(exprNode, reactiveNames, jsxMap, parentVar, source);
       if (listCode) {
@@ -1327,60 +921,18 @@ function transformChild(child, reactiveNames, jsxMap, parentVar, source, formVar
     }
     const exprText = source.slice(exprNode.getStart(), exprNode.getEnd());
     if (exprInfo?.reactive) {
-      return `__append(${parentVar}, __child(() => ${exprText}))`;
+      return `${parentVar}.appendChild(__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);
+  if (child.isKind(SyntaxKind9.JsxElement) || child.isKind(SyntaxKind9.JsxSelfClosingElement)) {
+    const childCode = transformJsxNode(child, reactiveNames, jsxMap, source);
+    return `${parentVar}.appendChild(${childCode})`;
   }
   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)) {
+  if (exprNode.isKind(SyntaxKind9.ConditionalExpression)) {
     const condition = exprNode.getCondition();
     const whenTrue = exprNode.getWhenTrue();
     const whenFalse = exprNode.getWhenFalse();
@@ -1389,7 +941,7 @@ function tryTransformConditional(exprNode, 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) {
+  if (exprNode.isKind(SyntaxKind9.BinaryExpression) && exprNode.getOperatorToken().getKind() === SyntaxKind9.AmpersandAmpersandToken) {
     const left = exprNode.getLeft();
     const right = exprNode.getRight();
     const condText = source.slice(left.getStart(), left.getEnd());
@@ -1399,13 +951,13 @@ function tryTransformConditional(exprNode, reactiveNames, jsxMap, source) {
   return null;
 }
 function transformBranch(node, reactiveNames, jsxMap, source) {
-  if (node.isKind(SyntaxKind10.ParenthesizedExpression)) {
+  if (node.isKind(SyntaxKind9.ParenthesizedExpression)) {
     return transformBranch(node.getExpression(), reactiveNames, jsxMap, source);
   }
-  if (node.isKind(SyntaxKind10.JsxElement) || node.isKind(SyntaxKind10.JsxSelfClosingElement) || node.isKind(SyntaxKind10.JsxFragment)) {
+  if (node.isKind(SyntaxKind9.JsxElement) || node.isKind(SyntaxKind9.JsxSelfClosingElement) || node.isKind(SyntaxKind9.JsxFragment)) {
     return transformJsxNode(node, reactiveNames, jsxMap, source);
   }
-  if (node.isKind(SyntaxKind10.ConditionalExpression)) {
+  if (node.isKind(SyntaxKind9.ConditionalExpression)) {
     const nested = tryTransformConditional(node, reactiveNames, jsxMap, source);
     if (nested)
       return nested;
@@ -1413,10 +965,10 @@ function transformBranch(node, reactiveNames, jsxMap, source) {
   return source.slice(node.getStart(), node.getEnd());
 }
 function tryTransformList(exprNode, reactiveNames, jsxMap, parentVar, source) {
-  if (!exprNode.isKind(SyntaxKind10.CallExpression))
+  if (!exprNode.isKind(SyntaxKind9.CallExpression))
     return null;
   const propAccess = exprNode.getExpression();
-  if (!propAccess.isKind(SyntaxKind10.PropertyAccessExpression))
+  if (!propAccess.isKind(SyntaxKind9.PropertyAccessExpression))
     return null;
   const methodName = propAccess.getNameNode().getText();
   if (methodName !== "map")
@@ -1432,7 +984,7 @@ function tryTransformList(exprNode, reactiveNames, jsxMap, parentVar, source) {
   let itemParam = null;
   let indexParam = null;
   let callbackBody = null;
-  if (callbackArg.isKind(SyntaxKind10.ArrowFunction)) {
+  if (callbackArg.isKind(SyntaxKind9.ArrowFunction)) {
     const params = callbackArg.getParameters();
     itemParam = params[0]?.getName() ?? null;
     indexParam = params[1]?.getName() ?? null;
@@ -1459,36 +1011,36 @@ function extractKeyFunction(callbackBody, itemParam, indexParam) {
   return `(_item, __i) => __i`;
 }
 function findJsxInBody(node) {
-  if (node.isKind(SyntaxKind10.JsxElement) || node.isKind(SyntaxKind10.JsxSelfClosingElement)) {
+  if (node.isKind(SyntaxKind9.JsxElement) || node.isKind(SyntaxKind9.JsxSelfClosingElement)) {
     return node;
   }
-  if (node.isKind(SyntaxKind10.Block)) {
-    const returnStmt = node.getFirstDescendantByKind(SyntaxKind10.ReturnStatement);
+  if (node.isKind(SyntaxKind9.Block)) {
+    const returnStmt = node.getFirstDescendantByKind(SyntaxKind9.ReturnStatement);
     if (returnStmt) {
       const expr = returnStmt.getExpression();
       if (expr)
         return findJsxInBody(expr);
     }
   }
-  if (node.isKind(SyntaxKind10.ParenthesizedExpression)) {
+  if (node.isKind(SyntaxKind9.ParenthesizedExpression)) {
     return findJsxInBody(node.getExpression());
   }
   return null;
 }
 function extractKeyPropValue(jsxNode) {
-  const attrs = jsxNode.getDescendantsOfKind(SyntaxKind10.JsxAttribute);
+  const attrs = jsxNode.getDescendantsOfKind(SyntaxKind9.JsxAttribute);
   for (const attr of attrs) {
     if (attr.getNameNode().getText() !== "key")
       continue;
     const init = attr.getInitializer();
     if (!init)
       continue;
-    if (init.isKind(SyntaxKind10.JsxExpression)) {
+    if (init.isKind(SyntaxKind9.JsxExpression)) {
       const expr = init.getExpression();
       if (expr)
         return expr.getText();
     }
-    if (init.isKind(SyntaxKind10.StringLiteral)) {
+    if (init.isKind(SyntaxKind9.StringLiteral)) {
       return init.getText();
     }
   }
@@ -1503,38 +1055,9 @@ function buildListRenderFunction(callbackBody, itemParam, reactiveNames, jsxMap,
   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))
+function buildPropsObject(element, jsxMap, source) {
+  const attrs = element.getDescendantsOfKind(SyntaxKind9.JsxAttribute);
+  if (attrs.length === 0)
     return "{}";
   const props = [];
   for (const attr of attrs) {
@@ -1544,14 +1067,14 @@ function buildPropsObject(element, jsxMap, source, reactiveNames, formVarNames,
       props.push(`${name}: true`);
       continue;
     }
-    if (init.isKind(SyntaxKind10.StringLiteral)) {
+    if (init.isKind(SyntaxKind9.StringLiteral)) {
       props.push(`${name}: ${init.getText()}`);
       continue;
     }
-    if (init.isKind(SyntaxKind10.JsxExpression)) {
+    if (init.isKind(SyntaxKind9.JsxExpression)) {
       const exprInfo = jsxMap.get(init.getStart());
       const exprNode = init.getExpression();
-      const exprText = exprNode ? sliceWithTransformedJsx(exprNode, reactiveNames, jsxMap, source, formVarNames) : "";
+      const exprText = exprNode ? source.slice(exprNode.getStart(), exprNode.getEnd()) : "";
       if (exprInfo?.reactive) {
         props.push(`get ${name}() { return ${exprText}; }`);
       } else {
@@ -1559,11 +1082,6 @@ function buildPropsObject(element, jsxMap, source, reactiveNames, formVarNames,
       }
     }
   }
-  if (extraEntries) {
-    for (const [key, value] of extraEntries) {
-      props.push(`${key}: ${value}`);
-    }
-  }
   return `{ ${props.join(", ")} }`;
 }
 function getJsxChildren(node) {
@@ -1571,7 +1089,7 @@ function getJsxChildren(node) {
   for (const child of node.getChildren()) {
     if (isJsxChild(child)) {
       children.push(child);
-    } else if (child.isKind(SyntaxKind10.SyntaxList)) {
+    } else if (child.isKind(SyntaxKind9.SyntaxList)) {
       for (const grandchild of child.getChildren()) {
         if (isJsxChild(grandchild)) {
           children.push(grandchild);
@@ -1582,30 +1100,7 @@ function getJsxChildren(node) {
   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;
+  return node.isKind(SyntaxKind9.JsxText) || node.isKind(SyntaxKind9.JsxExpression) || node.isKind(SyntaxKind9.JsxElement) || node.isKind(SyntaxKind9.JsxSelfClosingElement);
 }
 
 // src/transformers/mutation-transformer.ts
@@ -1671,23 +1166,15 @@ class MutationTransformer {
 }
 
 // src/transformers/signal-transformer.ts
-import { SyntaxKind as SyntaxKind11 } from "ts-morph";
+import { SyntaxKind as SyntaxKind10 } 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)
@@ -1696,16 +1183,16 @@ class SignalTransformer {
       transformDeclarations(source, bodyNode, signals);
       transformReferences(source, bodyNode, signals, mutationRanges);
     }
-    if (signalApiVars.size > 0 || fieldSignalPropVars.size > 0) {
-      transformSignalApiProperties(source, bodyNode, signalApiVars, plainPropVars, fieldSignalPropVars);
+    if (signalApiVars.size > 0) {
+      transformSignalApiProperties(source, bodyNode, signalApiVars);
     }
   }
 }
 function transformDeclarations(source, bodyNode, signals) {
   for (const stmt of bodyNode.getChildSyntaxList()?.getChildren() ?? []) {
-    if (!stmt.isKind(SyntaxKind11.VariableStatement))
+    if (!stmt.isKind(SyntaxKind10.VariableStatement))
       continue;
-    const declList = stmt.getChildrenOfKind(SyntaxKind11.VariableDeclarationList)[0];
+    const declList = stmt.getChildrenOfKind(SyntaxKind10.VariableDeclarationList)[0];
     if (!declList)
       continue;
     for (const decl of declList.getDeclarations()) {
@@ -1715,7 +1202,7 @@ function transformDeclarations(source, bodyNode, signals) {
       const init = decl.getInitializer();
       if (!init)
         continue;
-      const letKeyword = declList.getFirstChildByKind(SyntaxKind11.LetKeyword);
+      const letKeyword = declList.getFirstChildByKind(SyntaxKind10.LetKeyword);
       if (letKeyword) {
         source.overwrite(letKeyword.getStart(), letKeyword.getEnd(), "const");
       }
@@ -1729,7 +1216,7 @@ function isInsideMutationRange(pos, ranges) {
 }
 function transformReferences(source, bodyNode, signals, mutationRanges) {
   bodyNode.forEachDescendant((node) => {
-    if (!node.isKind(SyntaxKind11.Identifier))
+    if (!node.isKind(SyntaxKind10.Identifier))
       return;
     const name = node.getText();
     if (!signals.has(name))
@@ -1737,19 +1224,16 @@ function transformReferences(source, bodyNode, signals, mutationRanges) {
     const parent = node.getParent();
     if (!parent)
       return;
-    if (parent.isKind(SyntaxKind11.VariableDeclaration) && parent.getNameNode() === node) {
-      return;
-    }
-    if (parent.isKind(SyntaxKind11.PropertyAccessExpression) && parent.getNameNode() === node) {
+    if (parent.isKind(SyntaxKind10.VariableDeclaration) && parent.getNameNode() === node) {
       return;
     }
-    if (parent.isKind(SyntaxKind11.PropertyAssignment) && parent.getNameNode() === node) {
+    if (parent.isKind(SyntaxKind10.PropertyAccessExpression) && parent.getNameNode() === node) {
       return;
     }
-    if (parent.isKind(SyntaxKind11.ShorthandPropertyAssignment)) {
+    if (parent.isKind(SyntaxKind10.PropertyAssignment) && parent.getNameNode() === node) {
       return;
     }
-    if (parent.isKind(SyntaxKind11.BindingElement)) {
+    if (parent.isKind(SyntaxKind10.ShorthandPropertyAssignment)) {
       return;
     }
     if (isInsideMutationRange(node.getStart(), mutationRanges)) {
@@ -1758,72 +1242,32 @@ function transformReferences(source, bodyNode, signals, mutationRanges) {
     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() });
-  });
+function transformSignalApiProperties(source, bodyNode, signalApiVars) {
   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))
+    if (!node.isKind(SyntaxKind10.PropertyAccessExpression))
       return;
+    const expr = node.asKindOrThrow(SyntaxKind10.PropertyAccessExpression);
     const objExpr = expr.getExpression();
     const propName = expr.getName();
-    if (!objExpr.isKind(SyntaxKind11.Identifier))
+    if (!objExpr.isKind(SyntaxKind10.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 (parent?.isKind(SyntaxKind10.PropertyAccessExpression)) {
+      const parentProp = parent.asKindOrThrow(SyntaxKind10.PropertyAccessExpression);
       if (parentProp.getExpression() === expr && parentProp.getName() === "value") {
         return;
       }
     }
-    source.appendLeft(expr.getEnd(), ".value");
+    source.appendRight(expr.getEnd(), ".value");
   });
 }
 
 // src/compiler.ts
-function compile(source, optionsOrFilename) {
-  const options = typeof optionsOrFilename === "string" ? { filename: optionsOrFilename } : optionsOrFilename ?? {};
-  const filename = options.filename ?? "input.tsx";
+function compile(source, filename = "input.tsx") {
   const project = new Project({
     useInMemoryFileSystem: true,
     compilerOptions: {
@@ -1874,7 +1318,7 @@ function compile(source, optionsOrFilename) {
       usedFeatures.add("__text");
       usedFeatures.add("__attr");
     }
-    const hasEvents = sourceFile.getDescendantsOfKind(SyntaxKind12.JsxAttribute).some((attr) => {
+    const hasEvents = sourceFile.getDescendantsOfKind(SyntaxKind11.JsxAttribute).some((attr) => {
       const name = attr.getNameNode().getText();
       return name.startsWith("on") && name.length > 2;
     });
@@ -1885,14 +1329,11 @@ function compile(source, optionsOrFilename) {
     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);
+  const imports = buildImportStatement(usedFeatures);
   if (imports) {
     s.prepend(`${imports}
 `);
@@ -1908,16 +1349,12 @@ function compile(source, optionsOrFilename) {
   };
 }
 var DOM_HELPERS = [
-  "__append",
   "__child",
-  "__enterChildren",
-  "__exitChildren",
   "__insert",
   "__conditional",
   "__list",
   "__show",
-  "__classList",
-  "__staticText"
+  "__classList"
 ];
 function detectDomHelpers(output, usedFeatures) {
   for (const helper of DOM_HELPERS) {
@@ -1926,7 +1363,7 @@ function detectDomHelpers(output, usedFeatures) {
     }
   }
 }
-function buildImportStatement(features, target) {
+function buildImportStatement(features) {
   const runtimeImports = [];
   const domImports = [];
   for (const feature of features) {
@@ -1936,13 +1373,12 @@ function buildImportStatement(features, target) {
       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}';`);
+    parts.push(`import { ${domImports.sort().join(", ")} } from '@vertz/ui/internals';`);
   }
   return parts.length > 0 ? parts.join(`
 `) : null;
@@ -2013,7 +1449,6 @@ import {
   FONT_SIZE_SCALE,
   FONT_WEIGHT_SCALE,
   HEIGHT_AXIS_PROPERTIES,
-  KEYWORD_MAP,
   LINE_HEIGHT_SCALE,
   PROPERTY_MAP,
   PSEUDO_MAP,
@@ -2023,7 +1458,7 @@ import {
   SIZE_KEYWORDS,
   SPACING_SCALE
 } from "@vertz/ui/internals";
-import { Project as Project2, SyntaxKind as SyntaxKind13, ts as ts2 } from "ts-morph";
+import { Project as Project2, SyntaxKind as SyntaxKind12, ts as ts2 } from "ts-morph";
 
 class CSSExtractor {
   extract(source, filePath) {
@@ -2034,28 +1469,28 @@ class CSSExtractor {
     const sourceFile = project.createSourceFile(filePath, source);
     const allCssRules = [];
     const allBlockNames = [];
-    const callExpressions = sourceFile.getDescendantsOfKind(SyntaxKind13.CallExpression);
+    const callExpressions = sourceFile.getDescendantsOfKind(SyntaxKind12.CallExpression);
     for (const call of callExpressions) {
       const expression = call.getExpression();
-      if (!expression.isKind(SyntaxKind13.Identifier) || expression.getText() !== "css") {
+      if (!expression.isKind(SyntaxKind12.Identifier) || expression.getText() !== "css") {
         continue;
       }
       const args = call.getArguments();
       if (args.length === 0)
         continue;
       const firstArg = args[0];
-      if (!firstArg.isKind(SyntaxKind13.ObjectLiteralExpression))
+      if (!firstArg.isKind(SyntaxKind12.ObjectLiteralExpression))
         continue;
       if (!isStaticCSSCall(firstArg))
         continue;
       for (const prop of firstArg.getProperties()) {
-        if (!prop.isKind(SyntaxKind13.PropertyAssignment))
+        if (!prop.isKind(SyntaxKind12.PropertyAssignment))
           continue;
         const blockName = prop.getName();
         allBlockNames.push(blockName);
         const className = generateClassName(filePath, blockName);
         const init = prop.getInitializer();
-        if (!init || !init.isKind(SyntaxKind13.ArrayLiteralExpression))
+        if (!init || !init.isKind(SyntaxKind12.ArrayLiteralExpression))
           continue;
         const entries = extractEntries(init);
         const rules = buildCSSRules(className, entries);
@@ -2070,18 +1505,18 @@ class CSSExtractor {
   }
 }
 function isStaticCSSCall(node) {
-  if (!node.isKind(SyntaxKind13.ObjectLiteralExpression))
+  if (!node.isKind(SyntaxKind12.ObjectLiteralExpression))
     return false;
   for (const prop of node.getProperties()) {
-    if (!prop.isKind(SyntaxKind13.PropertyAssignment))
+    if (!prop.isKind(SyntaxKind12.PropertyAssignment))
       return false;
     const initializer = prop.getInitializer();
-    if (!initializer || !initializer.isKind(SyntaxKind13.ArrayLiteralExpression))
+    if (!initializer || !initializer.isKind(SyntaxKind12.ArrayLiteralExpression))
       return false;
     for (const element of initializer.getElements()) {
-      if (element.isKind(SyntaxKind13.StringLiteral))
+      if (element.isKind(SyntaxKind12.StringLiteral))
         continue;
-      if (element.isKind(SyntaxKind13.ObjectLiteralExpression)) {
+      if (element.isKind(SyntaxKind12.ObjectLiteralExpression)) {
         if (!isStaticNestedObject(element))
           return false;
         continue;
@@ -2092,110 +1527,55 @@ function isStaticCSSCall(node) {
   return true;
 }
 function isStaticNestedObject(node) {
-  if (!node.isKind(SyntaxKind13.ObjectLiteralExpression))
+  if (!node.isKind(SyntaxKind12.ObjectLiteralExpression))
     return false;
   for (const prop of node.getProperties()) {
-    if (!prop.isKind(SyntaxKind13.PropertyAssignment))
+    if (!prop.isKind(SyntaxKind12.PropertyAssignment))
       return false;
     const init = prop.getInitializer();
-    if (!init || !init.isKind(SyntaxKind13.ArrayLiteralExpression))
+    if (!init || !init.isKind(SyntaxKind12.ArrayLiteralExpression))
       return false;
     for (const el of init.getElements()) {
-      if (el.isKind(SyntaxKind13.StringLiteral))
-        continue;
-      if (el.isKind(SyntaxKind13.ObjectLiteralExpression)) {
-        if (isStaticRawDeclaration(el))
-          continue;
+      if (!el.isKind(SyntaxKind12.StringLiteral))
         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))
+  if (!arrayNode.isKind(SyntaxKind12.ArrayLiteralExpression))
     return [];
   const results = [];
   for (const element of arrayNode.getElements()) {
-    if (element.isKind(SyntaxKind13.StringLiteral)) {
+    if (element.isKind(SyntaxKind12.StringLiteral)) {
       results.push({ kind: "shorthand", value: element.getLiteralValue() });
-    } else if (element.isKind(SyntaxKind13.ObjectLiteralExpression)) {
+    } else if (element.isKind(SyntaxKind12.ObjectLiteralExpression)) {
       for (const prop of element.getProperties()) {
-        if (!prop.isKind(SyntaxKind13.PropertyAssignment))
+        if (!prop.isKind(SyntaxKind12.PropertyAssignment))
           continue;
         const selector = prop.getName();
         const nameNode = prop.getNameNode();
-        const actualSelector = nameNode.isKind(SyntaxKind13.StringLiteral) ? nameNode.getLiteralValue() : selector;
+        const actualSelector = nameNode.isKind(SyntaxKind12.StringLiteral) ? nameNode.getLiteralValue() : selector;
         const init = prop.getInitializer();
-        if (!init || !init.isKind(SyntaxKind13.ArrayLiteralExpression))
+        if (!init || !init.isKind(SyntaxKind12.ArrayLiteralExpression))
           continue;
         const nestedEntries = [];
-        const rawDeclarations = [];
         for (const el of init.getElements()) {
-          if (el.isKind(SyntaxKind13.StringLiteral)) {
+          if (el.isKind(SyntaxKind12.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
+          entries: nestedEntries
         });
       }
     }
   }
   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 = [];
@@ -2226,12 +1606,7 @@ function buildCSSRules(className, entries) {
           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}`);
+      const resolvedSelector = entry.selector.replace("&", `.${className}`);
       if (nestedDecls.length > 0) {
         rules.push(formatCSSRule(resolvedSelector, nestedDecls));
       }
@@ -2278,10 +1653,6 @@ function resolveDeclarations(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;
@@ -2418,39 +1789,39 @@ class RouteCSSManifest {
 import {
   COLOR_NAMESPACES as COLOR_NAMESPACES2,
   CSS_COLOR_KEYWORDS as CSS_COLOR_KEYWORDS2,
-  KEYWORD_MAP as KEYWORD_MAP2,
+  KEYWORD_MAP,
   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)]);
+import { SyntaxKind as SyntaxKind13 } from "ts-morph";
+var KNOWN_PROPERTIES = new Set([...Object.keys(PROPERTY_MAP2), ...Object.keys(KEYWORD_MAP)]);
 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);
+    const callExpressions = sourceFile.getDescendantsOfKind(SyntaxKind13.CallExpression);
     for (const call of callExpressions) {
       const expression = call.getExpression();
-      if (!expression.isKind(SyntaxKind14.Identifier) || expression.getText() !== "css") {
+      if (!expression.isKind(SyntaxKind13.Identifier) || expression.getText() !== "css") {
         continue;
       }
       const args = call.getArguments();
       if (args.length === 0)
         continue;
       const firstArg = args[0];
-      if (!firstArg || !firstArg.isKind(SyntaxKind14.ObjectLiteralExpression))
+      if (!firstArg || !firstArg.isKind(SyntaxKind13.ObjectLiteralExpression))
         continue;
       for (const prop of firstArg.getProperties()) {
-        if (!prop.isKind(SyntaxKind14.PropertyAssignment))
+        if (!prop.isKind(SyntaxKind13.PropertyAssignment))
           continue;
         const init = prop.getInitializer();
-        if (!init || !init.isKind(SyntaxKind14.ArrayLiteralExpression))
+        if (!init || !init.isKind(SyntaxKind13.ArrayLiteralExpression))
           continue;
         for (const element of init.getElements()) {
-          if (!element.isKind(SyntaxKind14.StringLiteral))
+          if (!element.isKind(SyntaxKind13.StringLiteral))
             continue;
           const value = element.getLiteralValue();
           const pos = sourceFile.getLineAndColumnAtPos(element.getStart());
@@ -2568,152 +1939,6 @@ class CSSDiagnostics {
     }
   }
 }
-// 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,
@@ -2724,7 +1949,6 @@ import {
   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,
@@ -2734,7 +1958,7 @@ import {
   SIZE_KEYWORDS as SIZE_KEYWORDS2,
   SPACING_SCALE as SPACING_SCALE3
 } from "@vertz/ui/internals";
-import { SyntaxKind as SyntaxKind16 } from "ts-morph";
+import { SyntaxKind as SyntaxKind14 } from "ts-morph";
 
 class CSSTransformer {
   transform(s, sourceFile, cssCalls, filePath) {
@@ -2767,17 +1991,17 @@ class CSSTransformer {
     if (args.length === 0)
       return { classNames, cssRules };
     const firstArg = args[0];
-    if (!firstArg || !firstArg.isKind(SyntaxKind16.ObjectLiteralExpression)) {
+    if (!firstArg || !firstArg.isKind(SyntaxKind14.ObjectLiteralExpression)) {
       return { classNames, cssRules };
     }
     for (const prop of firstArg.getProperties()) {
-      if (!prop.isKind(SyntaxKind16.PropertyAssignment))
+      if (!prop.isKind(SyntaxKind14.PropertyAssignment))
         continue;
       const blockName = prop.getName();
       const className = generateClassName2(filePath, blockName);
       classNames[blockName] = className;
       const init = prop.getInitializer();
-      if (!init || !init.isKind(SyntaxKind16.ArrayLiteralExpression))
+      if (!init || !init.isKind(SyntaxKind14.ArrayLiteralExpression))
         continue;
       const entries = extractEntries2(init);
       const rules = buildCSSRules2(className, entries);
@@ -2791,7 +2015,7 @@ class CSSTransformer {
   }
 }
 function findCallAtPosition(sourceFile, start) {
-  const calls = sourceFile.getDescendantsOfKind(SyntaxKind16.CallExpression);
+  const calls = sourceFile.getDescendantsOfKind(SyntaxKind14.CallExpression);
   for (const call of calls) {
     if (call.getStart() === start)
       return call;
@@ -2799,66 +2023,39 @@ function findCallAtPosition(sourceFile, start) {
   return null;
 }
 function extractEntries2(arrayNode) {
-  if (!arrayNode.isKind(SyntaxKind16.ArrayLiteralExpression))
+  if (!arrayNode.isKind(SyntaxKind14.ArrayLiteralExpression))
     return [];
   const results = [];
   for (const element of arrayNode.getElements()) {
-    if (element.isKind(SyntaxKind16.StringLiteral)) {
+    if (element.isKind(SyntaxKind14.StringLiteral)) {
       results.push({ kind: "shorthand", value: element.getLiteralValue() });
-    } else if (element.isKind(SyntaxKind16.ObjectLiteralExpression)) {
+    } else if (element.isKind(SyntaxKind14.ObjectLiteralExpression)) {
       for (const prop of element.getProperties()) {
-        if (!prop.isKind(SyntaxKind16.PropertyAssignment))
+        if (!prop.isKind(SyntaxKind14.PropertyAssignment))
           continue;
         const selector = prop.getName();
         const nameNode = prop.getNameNode();
-        const actualSelector = nameNode.isKind(SyntaxKind16.StringLiteral) ? nameNode.getLiteralValue() : selector;
+        const actualSelector = nameNode.isKind(SyntaxKind14.StringLiteral) ? nameNode.getLiteralValue() : selector;
         const init = prop.getInitializer();
-        if (!init || !init.isKind(SyntaxKind16.ArrayLiteralExpression))
+        if (!init || !init.isKind(SyntaxKind14.ArrayLiteralExpression))
           continue;
         const nestedEntries = [];
-        const rawDeclarations = [];
         for (const el of init.getElements()) {
-          if (el.isKind(SyntaxKind16.StringLiteral)) {
+          if (el.isKind(SyntaxKind14.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
+          entries: nestedEntries
         });
       }
     }
   }
   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);
@@ -2901,12 +2098,7 @@ function buildCSSRules2(className, entries) {
           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}`);
+      const resolvedSelector = entry.selector.replace("&", `.${className}`);
       if (nestedDecls.length > 0) {
         rules.push(formatCSSRule2(resolvedSelector, nestedDecls));
       }
@@ -2953,10 +2145,6 @@ function resolveInline(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;
@@ -3018,8 +2206,97 @@ function resolveColorInline(value) {
     return value;
   return null;
 }
+// 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/transformers/prop-transformer.ts
-import { SyntaxKind as SyntaxKind17 } from "ts-morph";
+import { SyntaxKind as SyntaxKind16 } from "ts-morph";
 
 class PropTransformer {
   transform(_source, _sourceFile, _component, _variables, _jsxExpressions) {}
@@ -3028,7 +2305,7 @@ class PropTransformer {
       return "{}";
     const props = [];
     for (const attr of attrs) {
-      if (!attr.isKind(SyntaxKind17.JsxAttribute))
+      if (!attr.isKind(SyntaxKind16.JsxAttribute))
         continue;
       const name = attr.getNameNode().getText();
       const init = attr.getInitializer();
@@ -3036,11 +2313,11 @@ class PropTransformer {
         props.push(`${name}: true`);
         continue;
       }
-      if (init.isKind(SyntaxKind17.StringLiteral)) {
+      if (init.isKind(SyntaxKind16.StringLiteral)) {
         props.push(`${name}: ${init.getText()}`);
         continue;
       }
-      if (init.isKind(SyntaxKind17.JsxExpression)) {
+      if (init.isKind(SyntaxKind16.JsxExpression)) {
         const exprInfo = jsxMap.get(init.getStart());
         const exprNode = init.getExpression();
         const exprText = exprNode?.getText() ?? "";
@@ -3110,13 +2387,306 @@ ${entries.join(`
 `)}
 };`;
 }
+// src/vite-plugin.ts
+import remapping from "@ampproject/remapping";
+import MagicString2 from "magic-string";
+import { Project as Project3, ts as ts3 } from "ts-morph";
+var VIRTUAL_CSS_PREFIX = "\x00vertz-css:";
+var DEFAULT_INCLUDE = ["**/*.tsx", "**/*.jsx"];
+function vertzPlugin(options) {
+  const include = options?.include ?? DEFAULT_INCLUDE;
+  const exclude = options?.exclude ?? [];
+  const enableCssExtraction = options?.cssExtraction ?? true;
+  let resolvedConfig;
+  let isProduction = false;
+  const cssHmrHandler = new CSSHMRHandler;
+  const cssExtractor = new CSSExtractor;
+  const fileExtractions = new Map;
+  function shouldTransform(id) {
+    const cleanId = id.split("?")[0] ?? id;
+    for (const pattern of exclude) {
+      if (matchGlob(cleanId, pattern))
+        return false;
+    }
+    for (const pattern of include) {
+      if (matchGlob(cleanId, pattern))
+        return true;
+    }
+    return false;
+  }
+  return {
+    name: "vertz",
+    enforce: "pre",
+    config(_userConfig, env) {
+      if (options?.ssr && env.isSsrBuild) {
+        return {
+          resolve: {
+            alias: {
+              "@vertz/ui/jsx-runtime": "@vertz/ui-server/jsx-runtime",
+              "@vertz/ui/jsx-dev-runtime": "@vertz/ui-server/jsx-runtime"
+            }
+          }
+        };
+      }
+      return;
+    },
+    configResolved(cfg) {
+      resolvedConfig = cfg;
+      isProduction = resolvedConfig.command === "build" || resolvedConfig.mode === "production";
+    },
+    configureServer(server) {
+      if (!options?.ssr)
+        return;
+      const ssrOptions = typeof options.ssr === "object" ? options.ssr : {};
+      server.middlewares.use(async (req, res, next) => {
+        const url = req.url || "/";
+        if (!req.headers.accept?.includes("text/html") && !req.url?.endsWith(".html") && req.url !== "/") {
+          return next();
+        }
+        if (url.startsWith("/@") || url.startsWith("/node_modules") || url.includes("?") || /\.(js|css|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/.test(url)) {
+          return next();
+        }
+        try {
+          const { readFileSync } = await import("node:fs");
+          const { resolve } = await import("node:path");
+          let template = readFileSync(resolve(server.config.root, "index.html"), "utf-8");
+          template = await server.transformIndexHtml(url, template);
+          let entry = ssrOptions.entry;
+          if (!entry) {
+            const scriptMatch = template.match(/<script[^>]*type="module"[^>]*src="([^"]+)"/);
+            if (scriptMatch?.[1]) {
+              entry = scriptMatch[1];
+            } else {
+              throw new Error("Could not auto-detect entry from index.html. Please specify ssr.entry in vertz plugin options.");
+            }
+          }
+          const ssrEntryMod = server.moduleGraph.getModuleById("\x00vertz:ssr-entry");
+          if (ssrEntryMod) {
+            server.moduleGraph.invalidateModule(ssrEntryMod);
+          }
+          const ssrEntry = await server.ssrLoadModule("\x00vertz:ssr-entry");
+          const appHtml = await ssrEntry.renderToString(url);
+          let html;
+          if (template.includes("<!--ssr-outlet-->")) {
+            html = template.replace("<!--ssr-outlet-->", appHtml);
+          } else {
+            html = template.replace(/(<div[^>]*id="app"[^>]*>)([\s\S]*?)(<\/div>)/, `$1${appHtml}$3`);
+          }
+          res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+          res.end(html);
+        } catch (err) {
+          server.ssrFixStacktrace(err);
+          next(err);
+        }
+      });
+    },
+    resolveId(id) {
+      if (id.startsWith(VIRTUAL_CSS_PREFIX)) {
+        return id;
+      }
+      if (id === "\x00vertz:ssr-entry") {
+        return id;
+      }
+      return;
+    },
+    load(id) {
+      if (id.startsWith(VIRTUAL_CSS_PREFIX)) {
+        const sourceFile = id.slice(VIRTUAL_CSS_PREFIX.length);
+        const extraction = fileExtractions.get(sourceFile);
+        if (extraction) {
+          return extraction.css;
+        }
+        return "";
+      }
+      if (id === "\x00vertz:ssr-entry") {
+        const ssrOptions = typeof options?.ssr === "object" ? options.ssr : {};
+        const entry = ssrOptions.entry || "/src/index.ts";
+        return generateSSREntry(entry);
+      }
+      return;
+    },
+    transform(code, id) {
+      if (!shouldTransform(id)) {
+        return;
+      }
+      const cleanId = id.split("?")[0] ?? id;
+      const hydrationS = new MagicString2(code);
+      const hydrationProject = new Project3({
+        useInMemoryFileSystem: true,
+        compilerOptions: {
+          jsx: ts3.JsxEmit.Preserve,
+          strict: true
+        }
+      });
+      const hydrationSourceFile = hydrationProject.createSourceFile(cleanId, code);
+      const hydrationTransformer = new HydrationTransformer;
+      hydrationTransformer.transform(hydrationS, hydrationSourceFile);
+      const hydratedCode = hydrationS.toString();
+      const hydrationMap = hydrationS.generateMap({
+        source: cleanId,
+        includeContent: true
+      });
+      const compileResult = compile(hydratedCode, cleanId);
+      const remapped = remapping([
+        compileResult.map,
+        hydrationMap
+      ], () => null);
+      const rawChainedMap = JSON.parse(remapped.toString());
+      const chainedMap = {
+        ...rawChainedMap,
+        sourcesContent: rawChainedMap.sourcesContent?.map((c) => c ?? "")
+      };
+      let transformedCode = compileResult.code;
+      const extraction = cssExtractor.extract(code, cleanId);
+      if (extraction.css.length > 0) {
+        fileExtractions.set(cleanId, extraction);
+        if (isProduction && enableCssExtraction) {
+          transformedCode = `import '${VIRTUAL_CSS_PREFIX}${cleanId}';
+${transformedCode}`;
+        }
+        cssHmrHandler.register(cleanId, extraction.css);
+      }
+      return {
+        code: transformedCode,
+        map: chainedMap
+      };
+    },
+    handleHotUpdate(ctx) {
+      const { file, modules } = ctx;
+      if (file.includes(".vertz/generated/") || file.includes(".vertz\\generated\\")) {
+        const affectedModules = [];
+        for (const mod of modules) {
+          affectedModules.push(mod);
+          for (const importer of mod.importers) {
+            affectedModules.push(importer);
+          }
+        }
+        return affectedModules.length > 0 ? affectedModules : undefined;
+      }
+      if (!shouldTransform(file))
+        return;
+      const content = ctx.read();
+      const processContent = (newCode) => {
+        const extraction = cssExtractor.extract(newCode, file);
+        const hmrResult = cssHmrHandler.update(file, extraction.css);
+        if (hmrResult.hasChanged) {
+          fileExtractions.set(file, extraction);
+          const virtualId = VIRTUAL_CSS_PREFIX + file;
+          const cssModule = ctx.server.moduleGraph.getModuleById(virtualId);
+          if (cssModule) {
+            ctx.server.moduleGraph.invalidateModule(cssModule);
+            return [cssModule, ...modules];
+          }
+        }
+        return;
+      };
+      if (typeof content === "string") {
+        return processContent(content);
+      }
+      return content.then(processContent);
+    },
+    generateBundle() {
+      if (!isProduction || !enableCssExtraction)
+        return;
+      const usedFiles = new Set(fileExtractions.keys());
+      const deadCssEliminator = new DeadCSSEliminator;
+      const liveCSS = deadCssEliminator.eliminate(fileExtractions, usedFiles);
+      if (options?.routeMap && options.routeMap.size > 0) {
+        const routeManifest = new RouteCSSManifest;
+        const manifest = routeManifest.build(options.routeMap, fileExtractions);
+        const codeSplitter = new CSSCodeSplitter;
+        const chunks = codeSplitter.split(manifest, fileExtractions);
+        for (const [route, css] of Object.entries(chunks)) {
+          if (css.length === 0)
+            continue;
+          const fileName = route === "__common" ? "assets/common.css" : `assets/route-${sanitizeRoute(route)}.css`;
+          this.emitFile({
+            type: "asset",
+            fileName,
+            source: css
+          });
+        }
+      } else if (liveCSS.length > 0) {
+        this.emitFile({
+          type: "asset",
+          fileName: "assets/vertz.css",
+          source: liveCSS
+        });
+      }
+    }
+  };
+}
+function generateSSREntry(userEntry) {
+  return `
+import { installDomShim, toVNode } from '@vertz/ui-server/dom-shim';
+import { renderToStream, streamToString } from '@vertz/ui-server';
+
+/**
+ * Render the app to an HTML string for the given URL.
+ */
+export async function renderToString(url) {
+  // Normalize URL: strip /index.html suffix that Vite's SPA fallback may add
+  const normalizedUrl = url.endsWith('/index.html')
+    ? url.slice(0, -'/index.html'.length) || '/'
+    : url;
+  
+  // Set SSR context flag — invalidate and re-set on every call so
+  // module-scope code (e.g. createRouter) picks up the current URL.
+  globalThis.__SSR_URL__ = normalizedUrl;
+  
+  // Install DOM shim so @vertz/ui components work
+  installDomShim();
+  
+  // Import the user's app entry (dynamic import for fresh module state)
+  const userModule = await import('${userEntry}');
+  
+  // Call the default export or named App export
+  const createApp = userModule.default || userModule.App;
+  if (typeof createApp !== 'function') {
+    throw new Error('App entry must export a default function or named App function');
+  }
+  
+  const app = createApp();
+  
+  // Convert to VNode if needed
+  const vnode = toVNode(app);
+  
+  // Render to stream and convert to string
+  const stream = renderToStream(vnode);
+  const html = await streamToString(stream);
+  
+  return html;
+}
+`;
+}
+function matchGlob(filePath, pattern) {
+  if (pattern.startsWith("**/") && pattern.endsWith("/**")) {
+    const segment = pattern.slice(3, -3);
+    return filePath.includes(`/${segment}/`) || filePath.includes(`\\${segment}\\`);
+  }
+  if (pattern.startsWith("**/")) {
+    const suffix = pattern.slice(3);
+    if (suffix.startsWith("*.")) {
+      const ext = suffix.slice(1);
+      return filePath.endsWith(ext);
+    }
+    return filePath.includes(suffix);
+  }
+  if (pattern.startsWith("*.")) {
+    const ext = pattern.slice(1);
+    return filePath.endsWith(ext);
+  }
+  return filePath.includes(pattern);
+}
+function sanitizeRoute(route) {
+  return route.replace(/^\//, "").replace(/\//g, "-").replace(/[^a-zA-Z0-9-]/g, "_").replace(/^$/, "index");
+}
 export {
   generateThemeTypes,
   generateCSSProperties,
-  createVertzLibraryPlugin,
+  vertzPlugin as default,
   compile,
   SignalTransformer,
-  SSRSafetyDiagnostics,
   RouteCSSManifest,
   ReactivityAnalyzer,
   PropsDestructuringDiagnostics,