@farm.js/react 0.1.0-beta.0 → 0.1.0-beta.2

package/dist/vite.mjs

@@ -1,10 +1,18 @@
 import { normalizePath } from 'vite';
 import { transformAsync, types, traverse } from '@babel/core';
+import { mkdir, writeFile } from 'fs/promises';
+import { resolve, dirname, relative } from 'path';
 
 // src/vite.ts
+var SAFE_GLOBAL_CALLS = /* @__PURE__ */ new Set(["Boolean", "Number", "String"]);
+var SAFE_MATH_CALLS = /* @__PURE__ */ new Set(["abs", "ceil", "floor", "max", "min", "round", "sign", "trunc"]);
 function isComponentName(name) {
   return /^[A-Z]/.test(name);
 }
+function isHostElement(element) {
+  const name = element.openingElement.name;
+  return types.isJSXIdentifier(name) && /^[a-z]/.test(name.name);
+}
 function directiveValues(node) {
   return (node.directives || []).map((directive) => directive.value.value);
 }
@@ -38,108 +46,1963 @@ function referencesIdentifier(expression, name) {
         referenced = true;
       }
     }
-  });
-  return referenced;
+  });
+  return referenced;
+}
+function collectReferencedLocals(expression, names) {
+  const references = /* @__PURE__ */ new Set();
+  traverse(expressionFile(cloneExpression(expression)), {
+    ReferencedIdentifier(path) {
+      if (names.has(path.node.name) && !path.scope.hasBinding(path.node.name)) {
+        references.add(path.node.name);
+      }
+    }
+  });
+  return [...references];
+}
+function rewriteDerivedAccess(expression, derivedByName) {
+  const file = expressionFile(cloneExpression(expression));
+  traverse(file, {
+    ReferencedIdentifier(path) {
+      if (path.scope.hasBinding(path.node.name)) return;
+      const derived = derivedByName.get(path.node.name);
+      if (!derived) return;
+      path.replaceWith(cloneExpression(derived));
+      path.skip();
+    }
+  });
+  return file.program.body[0].expression;
+}
+function rewriteDestructuredPropAccess(expression, names, propsParameter) {
+  if (names.size === 0) return cloneExpression(expression);
+  const file = expressionFile(cloneExpression(expression));
+  traverse(file, {
+    ReferencedIdentifier(path) {
+      if (!names.has(path.node.name) || path.scope.hasBinding(path.node.name)) return;
+      if (path.parentPath.isJSXOpeningElement() || path.parentPath.isJSXClosingElement()) return;
+      path.replaceWith(
+        types.memberExpression(types.cloneNode(propsParameter), types.identifier(path.node.name))
+      );
+      path.skip();
+    }
+  });
+  return file.program.body[0].expression;
+}
+function rewriteHandlerAccess(root, handlersByName) {
+  if (handlersByName.size === 0) return { root: types.cloneNode(root, true) };
+  const file = expressionFile(types.cloneNode(root, true));
+  let reason;
+  traverse(file, {
+    ReferencedIdentifier(path) {
+      if (reason || path.scope.hasBinding(path.node.name)) return;
+      const handler = handlersByName.get(path.node.name);
+      if (!handler) return;
+      const container = path.parentPath;
+      const attribute = container.parentPath;
+      const eventName = attribute?.isJSXAttribute() && jsxAttributeName(attribute.node);
+      if (container.isJSXExpressionContainer() && container.node.expression === path.node && eventName && /^on[A-Z]/.test(eventName)) {
+        path.replaceWith(types.cloneNode(handler.value, true));
+        path.skip();
+        return;
+      }
+      const call = container.isCallExpression() && container.node.callee === path.node ? container : null;
+      const event = call && findContainingEvent(call);
+      const eventExpression = event?.node.value && types.isJSXExpressionContainer(event.node.value) && event.node.value.expression;
+      const isInsideInlineHandler = eventExpression && (types.isArrowFunctionExpression(eventExpression) || types.isFunctionExpression(eventExpression)) && Boolean(call?.findParent((parent) => parent.node === eventExpression));
+      if (!call || !event || !isInsideInlineHandler) {
+        reason = `event handler ${handler.name} must be passed directly to a JSX event or called inside its inline handler`;
+        path.stop();
+        return;
+      }
+      path.replaceWith(types.cloneNode(handler.value, true));
+      path.skip();
+    }
+  });
+  return reason ? { reason } : { root: file.program.body[0].expression };
+}
+function isSafeCompilerCall(expression, safeGlobals) {
+  if (types.isIdentifier(expression.callee)) {
+    return safeGlobals.has(expression.callee.name) && SAFE_GLOBAL_CALLS.has(expression.callee.name);
+  }
+  return types.isMemberExpression(expression.callee) && !expression.callee.computed && types.isIdentifier(expression.callee.object, { name: "Math" }) && safeGlobals.has("Math") && types.isIdentifier(expression.callee.property) && SAFE_MATH_CALLS.has(expression.callee.property.name);
+}
+function validateDerivedExpression(expression, safeGlobals) {
+  let unsupported;
+  const reject = (reason, path) => {
+    unsupported = reason;
+    path.stop();
+  };
+  traverse(expressionFile(cloneExpression(expression)), {
+    ArrayExpression: (path) => reject("array literals", path),
+    AssignmentExpression: (path) => reject("assignments", path),
+    AwaitExpression: (path) => reject("await expressions", path),
+    CallExpression(path) {
+      if (!isSafeCompilerCall(path.node, safeGlobals)) reject("function calls", path);
+    },
+    ClassExpression: (path) => reject("class expressions", path),
+    Function: (path) => reject("function expressions", path),
+    JSXElement: (path) => reject("JSX", path),
+    JSXFragment: (path) => reject("JSX", path),
+    NewExpression: (path) => reject("constructor calls", path),
+    ObjectExpression: (path) => reject("object literals", path),
+    OptionalCallExpression: (path) => reject("function calls", path),
+    TaggedTemplateExpression: (path) => reject("tagged templates", path),
+    ThisExpression: (path) => reject("this expressions", path),
+    UnaryExpression(path) {
+      if (path.node.operator === "delete") reject("delete expressions", path);
+    },
+    UpdateExpression: (path) => reject("update expressions", path),
+    YieldExpression: (path) => reject("yield expressions", path)
+  });
+  return unsupported;
+}
+function findContainingEvent(path) {
+  const attribute = path.findParent((parent) => parent.isJSXAttribute());
+  if (!attribute?.isJSXAttribute() || !types.isJSXIdentifier(attribute.node.name)) return null;
+  return /^on[A-Z]/.test(attribute.node.name.name) ? attribute : null;
+}
+function validateSetterUsage(root, statesBySetter) {
+  const file = expressionFile(types.cloneNode(root, true));
+  let reason;
+  traverse(file, {
+    ReferencedIdentifier(path) {
+      if (reason) return;
+      const state = statesBySetter.get(path.node.name);
+      if (!state || path.scope.hasBinding(path.node.name)) return;
+      const parent = path.parentPath;
+      if (!parent.isCallExpression() || parent.node.callee !== path.node || !findContainingEvent(parent)) {
+        reason = `${state.setterName} must be called inside a JSX event handler`;
+      }
+    }
+  });
+  return reason;
+}
+function rewriteStateAccess(expression, stateParameter, statesByValue, statesBySetter) {
+  const file = expressionFile(cloneExpression(expression));
+  traverse(file, {
+    CallExpression(path) {
+      const callee = path.get("callee");
+      if (!callee.isIdentifier() || callee.scope.hasBinding(callee.node.name)) return;
+      const state = statesBySetter.get(callee.node.name);
+      if (!state) return;
+      callee.replaceWith(
+        types.memberExpression(
+          types.memberExpression(types.cloneNode(stateParameter), types.numericLiteral(state.index), true),
+          types.identifier("set")
+        )
+      );
+    },
+    ReferencedIdentifier(path) {
+      const state = statesByValue.get(path.node.name);
+      if (!state || path.scope.hasBinding(path.node.name)) return;
+      path.replaceWith(
+        types.callExpression(
+          types.memberExpression(
+            types.memberExpression(types.cloneNode(stateParameter), types.numericLiteral(state.index), true),
+            types.identifier("get")
+          ),
+          []
+        )
+      );
+    }
+  });
+  return file.program.body[0].expression;
+}
+function cleanJsxText(value) {
+  const lines = value.replace(/\r/g, "").split("\n");
+  let result = "";
+  for (let index = 0; index < lines.length; index += 1) {
+    const lastNonEmptyLine = lines.slice(index + 1).every((line2) => line2.trim().length === 0);
+    let line = lines[index].replace(/\t/g, " ").replace(/ +/g, " ");
+    if (index > 0) line = line.replace(/^ /, "");
+    if (!lastNonEmptyLine) line = line.replace(/ $/, "");
+    if (line) result += line + (!lastNonEmptyLine ? " " : "");
+  }
+  return result;
+}
+function isTextExpression(expression, statesByValue, safeGlobals) {
+  if (collectStateDependencies(expression, statesByValue).length > 0) {
+    return validateDerivedExpression(expression, safeGlobals) === void 0;
+  }
+  let supported = true;
+  traverse(expressionFile(cloneExpression(expression)), {
+    CallExpression(path) {
+      if (!isSafeCompilerCall(path.node, safeGlobals)) {
+        supported = false;
+        path.stop();
+      }
+    },
+    OptionalCallExpression(path) {
+      supported = false;
+      path.stop();
+    },
+    JSXElement(path) {
+      supported = false;
+      path.stop();
+    },
+    JSXFragment(path) {
+      supported = false;
+      path.stop();
+    },
+    ObjectExpression(path) {
+      supported = false;
+      path.stop();
+    },
+    Function(path) {
+      supported = false;
+      path.stop();
+    }
+  });
+  return supported;
+}
+function jsxAttributeName(attribute) {
+  return types.isJSXIdentifier(attribute.name) ? attribute.name.name : void 0;
+}
+function jsxAttribute(element, name) {
+  return element.openingElement.attributes.find(
+    (attribute) => types.isJSXAttribute(attribute) && jsxAttributeName(attribute) === name
+  );
+}
+function staticJsxAttributeString(attribute) {
+  if (!attribute?.value) return attribute ? "" : void 0;
+  if (types.isStringLiteral(attribute.value)) return attribute.value.value;
+  if (types.isJSXExpressionContainer(attribute.value) && types.isStringLiteral(attribute.value.expression)) {
+    return attribute.value.expression.value;
+  }
+  return void 0;
+}
+function controlledSelectHasDynamicOptions(element) {
+  let dynamic = false;
+  types.traverseFast(element, (node) => {
+    if (dynamic || !types.isJSXElement(node)) return;
+    const tag = node.openingElement.name;
+    if (!types.isJSXIdentifier(tag) || tag.name !== "option" && tag.name !== "optgroup") return;
+    dynamic = node.openingElement.attributes.some(
+      (attribute) => types.isJSXSpreadAttribute(attribute) || types.isJSXAttribute(attribute) && types.isJSXExpressionContainer(attribute.value) && !types.isJSXEmptyExpression(attribute.value.expression)
+    );
+  });
+  return dynamic;
+}
+function isEmptyConditionalBranch(expression) {
+  return types.isNullLiteral(expression) || types.isBooleanLiteral(expression, { value: false });
+}
+function conditionalBlockShape(expression) {
+  if (types.isLogicalExpression(expression, { operator: "&&" }) && types.isExpression(expression.left) && types.isJSXElement(expression.right)) {
+    return {
+      test: expression.left,
+      logical: true,
+      truthy: expression.right,
+      branches: [expression.right]
+    };
+  }
+  if (!types.isConditionalExpression(expression)) return null;
+  const branches = [expression.consequent, expression.alternate];
+  if (!branches.every((branch) => types.isJSXElement(branch) || isEmptyConditionalBranch(branch)) || !branches.some((branch) => types.isJSXElement(branch))) {
+    return null;
+  }
+  return {
+    test: expression.test,
+    logical: false,
+    truthy: types.isJSXElement(expression.consequent) ? expression.consequent : void 0,
+    falsy: types.isJSXElement(expression.alternate) ? expression.alternate : void 0,
+    branches: branches.filter((branch) => types.isJSXElement(branch))
+  };
+}
+function isMapCall(expression) {
+  return types.isCallExpression(expression) && types.isMemberExpression(expression.callee) && !expression.callee.computed && types.isExpression(expression.callee.object) && types.isIdentifier(expression.callee.property, { name: "map" });
+}
+function returnedExpression(callback) {
+  if (types.isExpression(callback.body)) return callback.body;
+  if (callback.body.body.length !== 1 || !types.isReturnStatement(callback.body.body[0])) {
+    return void 0;
+  }
+  const value = callback.body.body[0].argument;
+  return value && types.isExpression(value) ? value : void 0;
+}
+var SAFE_COLLECTION_PIPELINE_METHODS = /* @__PURE__ */ new Set(["filter", "slice", "toReversed", "toSorted"]);
+function collectionPipelineMethod(expression) {
+  if (!types.isCallExpression(expression) || !types.isMemberExpression(expression.callee) || expression.callee.computed || !types.isExpression(expression.callee.object) || !types.isIdentifier(expression.callee.property)) {
+    return void 0;
+  }
+  return SAFE_COLLECTION_PIPELINE_METHODS.has(expression.callee.property.name) ? expression.callee.property.name : void 0;
+}
+function validateCollectionCallback(callback, method, safeGlobals) {
+  const expectedParameters = method === "filter" ? "one item and an optional index" : "two items";
+  const validParameterCount = method === "filter" ? callback.params.length >= 1 && callback.params.length <= 2 : callback.params.length === 2;
+  if (callback.async || callback.generator || !validParameterCount || callback.params.some((parameter) => !types.isIdentifier(parameter))) {
+    return `${method} callbacks must be synchronous and use ${expectedParameters}`;
+  }
+  if (containsDirectHookCall(callback)) {
+    return `Hooks cannot be called inside a ${method} callback`;
+  }
+  const value = returnedExpression(callback);
+  if (!value) return `${method} callbacks must return one expression`;
+  const unsupported = validateDerivedExpression(value, safeGlobals);
+  return unsupported ? `${method} callbacks cannot use ${unsupported}` : void 0;
+}
+function validateCollectionPipeline(expression, safeGlobals) {
+  const method = collectionPipelineMethod(expression);
+  if (!method || !types.isCallExpression(expression)) {
+    return validateDerivedExpression(expression, safeGlobals);
+  }
+  const source = expression.callee.object;
+  const sourceUnsupported = collectionPipelineMethod(source) ? validateCollectionPipeline(source, safeGlobals) : validateDerivedExpression(source, safeGlobals);
+  if (sourceUnsupported) return sourceUnsupported;
+  if (method === "filter") {
+    if (expression.arguments.length !== 1 || !types.isArrowFunctionExpression(expression.arguments[0]) && !types.isFunctionExpression(expression.arguments[0])) {
+      return "filter requires one inline callback";
+    }
+    return validateCollectionCallback(expression.arguments[0], "filter", safeGlobals);
+  }
+  if (method === "toSorted") {
+    if (expression.arguments.length === 0) return void 0;
+    if (expression.arguments.length !== 1 || !types.isArrowFunctionExpression(expression.arguments[0]) && !types.isFunctionExpression(expression.arguments[0])) {
+      return "toSorted requires an optional inline comparator";
+    }
+    return validateCollectionCallback(expression.arguments[0], "toSorted", safeGlobals);
+  }
+  const maximumArguments = method === "slice" ? 2 : 0;
+  if (expression.arguments.length > maximumArguments) {
+    return `${method} accepts at most ${maximumArguments} compiler-safe arguments`;
+  }
+  for (const argument of expression.arguments) {
+    if (!types.isExpression(argument)) return `${method} does not support spread arguments`;
+    const unsupported = validateDerivedExpression(argument, safeGlobals);
+    if (unsupported) return `${method} arguments cannot use ${unsupported}`;
+  }
+  return void 0;
+}
+function containsDirectHookCall(callback) {
+  let found = false;
+  traverse(expressionFile(types.cloneNode(callback, true)), {
+    CallExpression(path) {
+      const callee = path.node.callee;
+      const name = types.isIdentifier(callee) ? callee.name : types.isMemberExpression(callee) && !callee.computed && types.isIdentifier(callee.property) ? callee.property.name : "";
+      if (/^use[A-Z0-9]/.test(name)) {
+        found = true;
+        path.stop();
+      }
+    }
+  });
+  return found;
+}
+function jsxKeyExpression(element) {
+  for (const attribute of element.openingElement.attributes) {
+    if (!types.isJSXAttribute(attribute) || !types.isJSXIdentifier(attribute.name, { name: "key" })) {
+      continue;
+    }
+    if (types.isStringLiteral(attribute.value)) return types.stringLiteral(attribute.value.value);
+    if (types.isJSXExpressionContainer(attribute.value) && !types.isJSXEmptyExpression(attribute.value.expression))
+      return attribute.value.expression;
+  }
+  return void 0;
+}
+function validateKeyFunction(callback, keyExpression, safeGlobals) {
+  if (callback.async || callback.generator || callback.params.length < 1 || callback.params.length > 2 || !types.isIdentifier(callback.params[0]) || callback.params[1] !== void 0 && !types.isIdentifier(callback.params[1])) {
+    return "keyed list callbacks must be synchronous and use item and optional index identifiers";
+  }
+  const item = callback.params[0].name;
+  const index = types.isIdentifier(callback.params[1]) ? callback.params[1].name : void 0;
+  if (index && referencesIdentifier(keyExpression, index)) {
+    return "keyed list keys cannot depend on the array index";
+  }
+  if (!referencesIdentifier(keyExpression, item)) {
+    return "keyed list keys must depend on the mapped item";
+  }
+  const unsupported = validateDerivedExpression(keyExpression, safeGlobals);
+  return unsupported ? `keyed list keys cannot use ${unsupported}` : void 0;
+}
+function isPublicListElement(element, listNames) {
+  const name = element.openingElement.name;
+  return types.isJSXIdentifier(name) && listNames.has(name.name);
+}
+function meaningfulJsxChildren(element) {
+  return element.children.filter((child) => {
+    if (types.isJSXText(child)) return child.value.trim().length > 0;
+    return !(types.isJSXExpressionContainer(child) && types.isJSXEmptyExpression(child.expression));
+  });
+}
+function analyzeMapList(expression, statesByValue, safeGlobals) {
+  const callee = expression.callee;
+  const collection = callee.object;
+  const collectionUnsupported = validateCollectionPipeline(collection, safeGlobals);
+  if (collectionUnsupported) {
+    return { reason: `keyed list collection cannot use ${collectionUnsupported}` };
+  }
+  if (expression.arguments.length !== 1 || !types.isArrowFunctionExpression(expression.arguments[0]) && !types.isFunctionExpression(expression.arguments[0])) {
+    return { reason: "keyed list map must use one inline render callback" };
+  }
+  const callback = expression.arguments[0];
+  if (containsDirectHookCall(callback)) {
+    return { reason: "Hooks cannot be called directly inside a keyed list callback" };
+  }
+  const row = returnedExpression(callback);
+  if (!row || !types.isJSXElement(row)) {
+    return { reason: "keyed list map callbacks must return one React element" };
+  }
+  const key = jsxKeyExpression(row);
+  if (!key) return { reason: "automatically compiled lists require an explicit item key" };
+  const keyReason = validateKeyFunction(callback, key, safeGlobals);
+  if (keyReason) return { reason: keyReason };
+  return { dependencies: collectStateDependencies(expression, statesByValue) };
+}
+function listAttributeExpression(element, name) {
+  for (const attribute of element.openingElement.attributes) {
+    if (types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name, { name }) && types.isJSXExpressionContainer(attribute.value) && !types.isJSXEmptyExpression(attribute.value.expression)) {
+      return attribute.value.expression;
+    }
+  }
+  return void 0;
+}
+function analyzePublicList(element, statesByValue, safeGlobals) {
+  if (element.openingElement.attributes.some((attribute) => types.isJSXSpreadAttribute(attribute))) {
+    return { reason: "compiled List boundaries do not support JSX attribute spreads" };
+  }
+  const each = listAttributeExpression(element, "each");
+  const by = listAttributeExpression(element, "by");
+  if (!each || !by) return { reason: "List requires explicit each and by properties" };
+  const collectionUnsupported = validateCollectionPipeline(each, safeGlobals);
+  if (collectionUnsupported) {
+    return { reason: `List each cannot use ${collectionUnsupported}` };
+  }
+  if (!types.isArrowFunctionExpression(by) && !types.isFunctionExpression(by)) {
+    return { reason: "compiled List by must use an inline key function" };
+  }
+  const key = returnedExpression(by);
+  if (!key) return { reason: "compiled List by must return one key expression" };
+  const keyReason = validateKeyFunction(by, key, safeGlobals);
+  if (keyReason) return { reason: keyReason };
+  const children = meaningfulJsxChildren(element);
+  if (children.length !== 1 || !types.isJSXExpressionContainer(children[0]) || types.isJSXEmptyExpression(children[0].expression) || !types.isArrowFunctionExpression(children[0].expression) && !types.isFunctionExpression(children[0].expression)) {
+    return { reason: "compiled List children must use one inline render function" };
+  }
+  const render = children[0].expression;
+  if (!returnedExpression(render)) {
+    return { reason: "compiled List children must return one React element" };
+  }
+  if (containsDirectHookCall(render)) {
+    return { reason: "Hooks cannot be called directly inside List children" };
+  }
+  return { dependencies: collectStateDependencies(element, statesByValue) };
+}
+function validateKeyedRowEventHandler(handler) {
+  let reason;
+  traverse(expressionFile(types.cloneNode(handler, true)), {
+    MetaProperty(path) {
+      reason = "meta properties";
+      path.stop();
+    },
+    ReferencedIdentifier(path) {
+      if (path.node.name !== "arguments") return;
+      reason = "arguments access";
+      path.stop();
+    },
+    Super(path) {
+      reason = "super access";
+      path.stop();
+    },
+    ThisExpression(path) {
+      reason = "this access";
+      path.stop();
+    }
+  });
+  return reason;
+}
+function stabilizeDeferredEventCurrentTarget(handler, compilerSetters) {
+  const cloned = types.cloneNode(handler, true);
+  const eventParameter = cloned.params[0];
+  if (!types.isIdentifier(eventParameter) || compilerSetters.size === 0) return cloned;
+  const file = expressionFile(cloned);
+  const expression = file.program.body[0].expression;
+  if (!types.isArrowFunctionExpression(expression) && !types.isFunctionExpression(expression)) {
+    return cloned;
+  }
+  const rootBindingIdentifier = expression.params[0];
+  const snapshots = [];
+  const snapshotsByProperty = /* @__PURE__ */ new Map();
+  const replaceCurrentTarget = (path) => {
+    const property = path.node.property;
+    const isCurrentTarget = path.node.computed ? types.isStringLiteral(property, { value: "currentTarget" }) : types.isIdentifier(property, { name: "currentTarget" });
+    if (!isCurrentTarget || !types.isIdentifier(path.node.object, { name: eventParameter.name }))
+      return;
+    const binding = path.scope.getBinding(eventParameter.name);
+    if (!binding || binding.identifier !== rootBindingIdentifier) return;
+    const setterCall = path.findParent(
+      (parent2) => parent2.isCallExpression() && types.isIdentifier(parent2.node.callee) && compilerSetters.has(parent2.node.callee.name)
+    );
+    if (!setterCall) return;
+    const deferredFunction = path.findParent(
+      (parent2) => parent2.isFunction() && parent2.node !== expression
+    );
+    if (!deferredFunction || !deferredFunction.findParent((parent2) => parent2 === setterCall))
+      return;
+    const parent = path.parentPath;
+    const propertyRead = (parent?.isMemberExpression() || parent?.isOptionalMemberExpression()) && parent.node.object === path.node ? parent : path;
+    const snapshotProperty = propertyRead === path ? "element" : propertyRead.node.computed ? types.isStringLiteral(propertyRead.node.property) ? propertyRead.node.property.value : `computed${snapshots.length}` : types.isIdentifier(propertyRead.node.property) ? propertyRead.node.property.name : `property${snapshots.length}`;
+    let snapshot = snapshotsByProperty.get(snapshotProperty);
+    if (!snapshot) {
+      const suffix = snapshotProperty.replace(/[^A-Za-z0-9_$]/g, " ").replace(
+        /(?:^|\s+)([A-Za-z0-9_$])/g,
+        (_match, character) => character.toUpperCase()
+      ).replace(/\s/g, "");
+      snapshot = uniqueLocalIdentifier(`_farmCurrentTarget${suffix}`, [
+        expression,
+        ...snapshots.map((entry) => entry.identifier)
+      ]);
+      snapshotsByProperty.set(snapshotProperty, snapshot);
+      snapshots.push({
+        identifier: snapshot,
+        value: types.cloneNode(propertyRead.node, true)
+      });
+    }
+    propertyRead.replaceWith(types.cloneNode(snapshot));
+    propertyRead.skip();
+  };
+  traverse(file, {
+    MemberExpression: replaceCurrentTarget,
+    OptionalMemberExpression: replaceCurrentTarget
+  });
+  if (snapshots.length === 0) return expression;
+  const declarations = snapshots.map(
+    ({ identifier, value }) => types.variableDeclaration("const", [types.variableDeclarator(types.cloneNode(identifier), value)])
+  );
+  if (types.isBlockStatement(expression.body)) {
+    expression.body.body.unshift(...declarations);
+  } else {
+    expression.body = types.blockStatement([...declarations, types.returnStatement(expression.body)]);
+  }
+  return expression;
+}
+function stabilizeDeferredEventCurrentTargets(root, compilerSetters) {
+  const file = expressionFile(types.cloneNode(root, true));
+  traverse(file, {
+    JSXAttribute(path) {
+      if (!types.isJSXIdentifier(path.node.name) || !/^on[A-Z]/.test(path.node.name.name)) return;
+      const value = path.node.value;
+      if (!types.isJSXExpressionContainer(value) || !types.isArrowFunctionExpression(value.expression) && !types.isFunctionExpression(value.expression)) {
+        return;
+      }
+      value.expression = stabilizeDeferredEventCurrentTarget(value.expression, compilerSetters);
+    }
+  });
+  const expression = file.program.body[0].expression;
+  return types.isJSXElement(expression) ? expression : types.cloneNode(root, true);
+}
+function analyzeKeyedRowTree(row, renderCallback, safeGlobals, compilerSetters) {
+  if (renderCallback.async || renderCallback.generator || renderCallback.params.length < 1 || renderCallback.params.length > 2 || !types.isIdentifier(renderCallback.params[0]) || renderCallback.params[1] !== void 0 && !types.isIdentifier(renderCallback.params[1])) {
+    return { reason: "compiled keyed rows require item and optional index identifiers" };
+  }
+  const bindings = [];
+  const events = [];
+  const conditionals = [];
+  const visit = (element, path) => {
+    const tag = element.openingElement.name;
+    if (!types.isJSXIdentifier(tag) || !/^[a-z]/.test(tag.name)) {
+      return "compiled keyed rows support host elements only";
+    }
+    if (tag.name === "svg") return "compiled keyed rows do not support SVG yet";
+    const attributeNames = new Set(
+      element.openingElement.attributes.filter((attribute) => types.isJSXAttribute(attribute)).map(jsxAttributeName).filter((name) => name !== void 0)
+    );
+    const controlled = attributeNames.has("value") || attributeNames.has("checked");
+    if (attributeNames.has("contentEditable")) {
+      return "content-editable keyed rows require React ownership";
+    }
+    if (tag.name === "input" && controlled) {
+      const type = jsxAttribute(element, "type");
+      const staticType = staticJsxAttributeString(type);
+      if (type && staticType === void 0) {
+        return "controlled keyed row inputs require a static type";
+      }
+      if (attributeNames.has("value") && staticType?.toLowerCase() === "file") {
+        return "file inputs require React ownership";
+      }
+    }
+    if (tag.name === "textarea" && controlled && meaningfulJsxChildren(element).length > 0) {
+      return "controlled keyed row textareas cannot also use children";
+    }
+    if (tag.name === "select" && controlled && controlledSelectHasDynamicOptions(element)) {
+      return "controlled keyed row selects require static options";
+    }
+    for (const attribute of element.openingElement.attributes) {
+      if (types.isJSXSpreadAttribute(attribute)) {
+        return "compiled keyed rows do not support JSX attribute spreads";
+      }
+      const name = jsxAttributeName(attribute);
+      if (!name) return "compiled keyed rows do not support namespaced JSX attributes";
+      if (name === "ref" || name === "dangerouslySetInnerHTML") {
+        return `compiled keyed row ${name} requires React ownership`;
+      }
+      if (name === "key") continue;
+      if (/^on[A-Z]/.test(name)) {
+        if (!types.isJSXExpressionContainer(attribute.value) || !types.isArrowFunctionExpression(attribute.value.expression) && !types.isFunctionExpression(attribute.value.expression)) {
+          return "interactive compiled keyed rows require inline synchronous event handlers";
+        }
+        const handler = attribute.value.expression;
+        if (handler.async || handler.generator) {
+          return "interactive compiled keyed row handlers must be synchronous";
+        }
+        if (containsDirectHookCall(handler)) {
+          return "Hooks cannot be called inside compiled keyed row handlers";
+        }
+        const unsupported2 = validateKeyedRowEventHandler(handler);
+        if (unsupported2) {
+          return `interactive compiled keyed row handlers cannot use ${unsupported2}`;
+        }
+        events.push({
+          id: events.length,
+          path: [...path],
+          name,
+          value: stabilizeDeferredEventCurrentTarget(handler, compilerSetters)
+        });
+        continue;
+      }
+      if (!types.isJSXExpressionContainer(attribute.value) || types.isJSXEmptyExpression(attribute.value.expression)) {
+        continue;
+      }
+      const expression = attribute.value.expression;
+      if (name === "style") {
+        if (!types.isObjectExpression(expression)) {
+          return "compiled keyed row styles must use one inline object literal";
+        }
+        for (const property of expression.properties) {
+          if (!types.isObjectProperty(property) || property.computed || !types.isExpression(property.value)) {
+            return "compiled keyed row styles do not support spreads, methods, or computed properties";
+          }
+          const propertyName = types.isIdentifier(property.key) ? property.key.name : types.isStringLiteral(property.key) ? property.key.value : void 0;
+          if (!propertyName || propertyName.includes("-") && !propertyName.startsWith("--")) {
+            return "compiled keyed row style names must use camelCase or a CSS custom property";
+          }
+          const unsupported2 = validateDerivedExpression(property.value, safeGlobals);
+          if (unsupported2) {
+            return `compiled keyed row style ${propertyName} cannot use ${unsupported2}`;
+          }
+          bindings.push({
+            kind: "style",
+            path: [...path],
+            name: propertyName,
+            value: cloneExpression(property.value)
+          });
+        }
+        continue;
+      }
+      if (name === "children") return "compiled keyed row children props are not supported yet";
+      const unsupported = validateDerivedExpression(expression, safeGlobals);
+      if (unsupported) return `compiled keyed row ${name} cannot use ${unsupported}`;
+      bindings.push({
+        kind: "attribute",
+        path: [...path],
+        name,
+        value: cloneExpression(expression)
+      });
+    }
+    const meaningfulChildren = meaningfulJsxChildren(element);
+    const conditionalChild = meaningfulChildren.find(
+      (child) => types.isJSXExpressionContainer(child) && !types.isJSXEmptyExpression(child.expression) && conditionalBlockShape(child.expression) !== null
+    );
+    if (conditionalChild && !types.isJSXEmptyExpression(conditionalChild.expression)) {
+      if (meaningfulChildren.length !== 1) {
+        return "compiled keyed row conditionals must be the only child of a host container";
+      }
+      const shape = conditionalBlockShape(conditionalChild.expression);
+      if (!shape) return "compiled keyed row conditional shape is not supported";
+      const testUnsupported = validateDerivedExpression(shape.test, safeGlobals);
+      if (testUnsupported) {
+        return `compiled keyed row conditional test cannot use ${testUnsupported}`;
+      }
+      const truthyAnalysis = shape.truthy ? analyzeHostConditionalTree(shape.truthy, safeGlobals) : { bindings: [] };
+      const falsyAnalysis = shape.falsy ? analyzeHostConditionalTree(shape.falsy, safeGlobals) : { bindings: [] };
+      if (truthyAnalysis.reason || falsyAnalysis.reason) {
+        return truthyAnalysis.reason || falsyAnalysis.reason || "compiled keyed row conditional branch is not supported";
+      }
+      conditionals.push({
+        id: conditionals.length,
+        path: [...path],
+        test: cloneExpression(shape.test),
+        logical: shape.logical,
+        truthy: shape.truthy ? types.cloneNode(shape.truthy, true) : void 0,
+        falsy: shape.falsy ? types.cloneNode(shape.falsy, true) : void 0,
+        truthyBindings: truthyAnalysis.bindings || [],
+        falsyBindings: falsyAnalysis.bindings || []
+      });
+      return void 0;
+    }
+    const nestedElements = element.children.filter(
+      (child) => types.isJSXElement(child)
+    );
+    if (element.children.some((child) => types.isJSXFragment(child))) {
+      return "compiled keyed rows do not support fragments yet";
+    }
+    const expressions = element.children.filter(
+      (child) => types.isJSXExpressionContainer(child) && !types.isJSXEmptyExpression(child.expression)
+    );
+    for (const child of expressions) {
+      const unsupported = validateDerivedExpression(child.expression, safeGlobals);
+      if (unsupported) return `compiled keyed row text cannot use ${unsupported}`;
+    }
+    if (nestedElements.length > 0 && expressions.length > 0) {
+      return "compiled keyed rows do not support dynamic text beside nested elements yet";
+    }
+    if (nestedElements.length === 0 && expressions.length > 0) {
+      const parts = [];
+      for (const child of element.children) {
+        if (types.isJSXText(child)) {
+          const text = cleanJsxText(child.value);
+          if (text) parts.push(types.stringLiteral(text));
+        } else if (types.isJSXExpressionContainer(child) && !types.isJSXEmptyExpression(child.expression)) {
+          parts.push(cloneExpression(child.expression));
+        }
+      }
+      bindings.push({ kind: "text", path: [...path], value: types.arrayExpression(parts) });
+    }
+    let elementIndex = 0;
+    for (const child of element.children) {
+      if (!types.isJSXElement(child)) continue;
+      const reason2 = visit(child, [...path, elementIndex]);
+      if (reason2) return reason2;
+      elementIndex += 1;
+    }
+    return void 0;
+  };
+  const reason = visit(row, []);
+  return reason ? { reason } : { bindings, events, conditionals };
+}
+function analyzeKeyedRowChild(child, statesByValue, safeGlobals, listNames) {
+  let collection;
+  let keyCallback;
+  let renderCallback;
+  let row;
+  let dependencies;
+  let syntax;
+  let source;
+  if (types.isJSXExpressionContainer(child) && !types.isJSXEmptyExpression(child.expression) && isMapCall(child.expression)) {
+    const result = analyzeMapList(child.expression, statesByValue, safeGlobals);
+    if (result.reason) return void 0;
+    const callback = child.expression.arguments[0];
+    if (!types.isArrowFunctionExpression(callback) && !types.isFunctionExpression(callback))
+      return void 0;
+    const returned = returnedExpression(callback);
+    if (!returned || !types.isJSXElement(returned)) return void 0;
+    const key = jsxKeyExpression(returned);
+    if (!key) return void 0;
+    collection = child.expression.callee.object;
+    keyCallback = types.arrowFunctionExpression(
+      callback.params.map((parameter) => types.cloneNode(parameter, true)),
+      cloneExpression(key)
+    );
+    renderCallback = callback;
+    row = returned;
+    dependencies = result.dependencies || [];
+    syntax = "map";
+    source = child.expression;
+  } else if (types.isJSXElement(child) && isPublicListElement(child, listNames)) {
+    const result = analyzePublicList(child, statesByValue, safeGlobals);
+    if (result.reason) return void 0;
+    const each = listAttributeExpression(child, "each");
+    const by = listAttributeExpression(child, "by");
+    const renderChild = meaningfulJsxChildren(child)[0];
+    if (!each || !types.isArrowFunctionExpression(by) && !types.isFunctionExpression(by) || !types.isJSXExpressionContainer(renderChild) || types.isJSXEmptyExpression(renderChild.expression) || !types.isArrowFunctionExpression(renderChild.expression) && !types.isFunctionExpression(renderChild.expression)) {
+      return void 0;
+    }
+    const returned = returnedExpression(renderChild.expression);
+    if (!returned || !types.isJSXElement(returned)) return void 0;
+    collection = each;
+    keyCallback = by;
+    renderCallback = renderChild.expression;
+    row = returned;
+    dependencies = result.dependencies || [];
+    syntax = "list";
+    source = child;
+  } else {
+    return void 0;
+  }
+  const rowAnalysis = analyzeKeyedRowTree(
+    row,
+    renderCallback,
+    safeGlobals,
+    new Set([...statesByValue.values()].map((state) => state.setterName))
+  );
+  if (rowAnalysis.reason) return void 0;
+  return {
+    source,
+    collection,
+    keyCallback,
+    renderCallback,
+    row,
+    dependencies,
+    bindings: rowAnalysis.bindings || [],
+    events: rowAnalysis.events || [],
+    conditionals: rowAnalysis.conditionals || [],
+    syntax
+  };
+}
+function analyzeKeyedRowsContainer(container, statesByValue, safeGlobals, listNames) {
+  if (container.openingElement.attributes.some(
+    (attribute) => types.isJSXSpreadAttribute(attribute) || types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name) && (attribute.name.name === "ref" || attribute.name.name === "dangerouslySetInnerHTML")
+  )) {
+    return void 0;
+  }
+  for (const attribute of container.openingElement.attributes) {
+    if (types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name) && types.isJSXExpressionContainer(attribute.value) && !types.isJSXEmptyExpression(attribute.value.expression) && !/^on[A-Z]/.test(attribute.name.name) && collectStateDependencies(attribute.value.expression, statesByValue).length > 0) {
+      return void 0;
+    }
+  }
+  const children = meaningfulJsxChildren(container);
+  if (children.length !== 1) return void 0;
+  return analyzeKeyedRowChild(children[0], statesByValue, safeGlobals, listNames);
+}
+function isStaticKeyedRangeSibling(element, statesByValue, safeGlobals) {
+  for (const child of meaningfulJsxChildren(element)) {
+    if (types.isJSXFragment(child)) return false;
+    if (types.isJSXElement(child)) {
+      if (!isHostElement(child) || !isStaticKeyedRangeSibling(child, statesByValue, safeGlobals)) {
+        return false;
+      }
+      continue;
+    }
+    if (types.isJSXExpressionContainer(child) && !types.isJSXEmptyExpression(child.expression) && !isTextExpression(child.expression, statesByValue, safeGlobals)) {
+      return false;
+    }
+  }
+  return true;
+}
+function analyzeKeyedRangesContainer(container, statesByValue, safeGlobals, listNames, allowSingleRange = false) {
+  if (container.openingElement.attributes.some(
+    (attribute) => types.isJSXSpreadAttribute(attribute) || types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name) && (attribute.name.name === "ref" || attribute.name.name === "dangerouslySetInnerHTML")
+  )) {
+    return void 0;
+  }
+  const children = meaningfulJsxChildren(container);
+  if (children.length < (allowSingleRange ? 1 : 2)) return void 0;
+  const ranges = [];
+  const dependencies = /* @__PURE__ */ new Set();
+  let staticBefore = 0;
+  for (const child of children) {
+    const range = analyzeKeyedRowChild(child, statesByValue, safeGlobals, listNames);
+    if (range) {
+      if (range.events.length > 0 || range.conditionals.length > 0) return void 0;
+      ranges.push({
+        before: staticBefore,
+        source: range.source,
+        collection: range.collection,
+        keyCallback: range.keyCallback,
+        renderCallback: range.renderCallback,
+        row: range.row,
+        bindings: range.bindings,
+        syntax: range.syntax
+      });
+      for (const dependency of range.dependencies) dependencies.add(dependency);
+      staticBefore = 0;
+      continue;
+    }
+    if (!types.isJSXElement(child) || !isHostElement(child)) return void 0;
+    if (!isStaticKeyedRangeSibling(child, statesByValue, safeGlobals)) return void 0;
+    staticBefore += 1;
+  }
+  if (ranges.length === 0) return void 0;
+  return {
+    ranges,
+    trailing: staticBefore,
+    dependencies: [...dependencies].sort((left, right) => left - right)
+  };
+}
+function analyzeHostConditionalTree(branch, safeGlobals) {
+  const bindings = [];
+  const visit = (element, path) => {
+    const tag = element.openingElement.name;
+    if (!types.isJSXIdentifier(tag) || !/^[a-z]/.test(tag.name)) {
+      return "compiler-owned conditionals support host elements only";
+    }
+    if (tag.name === "svg") return "compiler-owned conditionals do not support SVG yet";
+    for (const attribute of element.openingElement.attributes) {
+      if (types.isJSXSpreadAttribute(attribute)) {
+        return "compiler-owned conditionals do not support JSX attribute spreads";
+      }
+      const name = jsxAttributeName(attribute);
+      if (!name) return "compiler-owned conditionals do not support namespaced JSX attributes";
+      if (name === "ref" || name === "dangerouslySetInnerHTML" || name === "key") {
+        return `compiler-owned conditional ${name} requires React ownership`;
+      }
+      if (/^on[A-Z]/.test(name)) {
+        return "compiler-owned conditional events require React ownership";
+      }
+      if (!types.isJSXExpressionContainer(attribute.value) || types.isJSXEmptyExpression(attribute.value.expression)) {
+        continue;
+      }
+      const expression = attribute.value.expression;
+      if (name === "style") {
+        if (!types.isObjectExpression(expression)) {
+          return "compiler-owned conditional styles must use one inline object literal";
+        }
+        for (const property of expression.properties) {
+          if (!types.isObjectProperty(property) || property.computed || !types.isExpression(property.value)) {
+            return "compiler-owned conditional styles do not support spreads, methods, or computed properties";
+          }
+          const propertyName = types.isIdentifier(property.key) ? property.key.name : types.isStringLiteral(property.key) ? property.key.value : void 0;
+          if (!propertyName || propertyName.includes("-") && !propertyName.startsWith("--")) {
+            return "compiler-owned conditional style names must use camelCase or a CSS custom property";
+          }
+          const unsupported2 = validateDerivedExpression(property.value, safeGlobals);
+          if (unsupported2) {
+            return `compiler-owned conditional style ${propertyName} cannot use ${unsupported2}`;
+          }
+          bindings.push({
+            kind: "style",
+            path: [...path],
+            name: propertyName,
+            value: cloneExpression(property.value)
+          });
+        }
+        continue;
+      }
+      if (name === "children") {
+        return "compiler-owned conditional children props are not supported yet";
+      }
+      const unsupported = validateDerivedExpression(expression, safeGlobals);
+      if (unsupported) return `compiler-owned conditional ${name} cannot use ${unsupported}`;
+      bindings.push({
+        kind: "attribute",
+        path: [...path],
+        name,
+        value: cloneExpression(expression)
+      });
+    }
+    const nestedElements = element.children.filter(
+      (child) => types.isJSXElement(child)
+    );
+    if (element.children.some((child) => types.isJSXFragment(child))) {
+      return "compiler-owned conditionals do not support fragments yet";
+    }
+    const expressions = element.children.filter(
+      (child) => types.isJSXExpressionContainer(child) && !types.isJSXEmptyExpression(child.expression)
+    );
+    for (const child of expressions) {
+      const unsupported = validateDerivedExpression(child.expression, safeGlobals);
+      if (unsupported) return `compiler-owned conditional text cannot use ${unsupported}`;
+    }
+    if (nestedElements.length > 0 && expressions.length > 0) {
+      return "compiler-owned conditionals do not support dynamic text beside nested elements yet";
+    }
+    if (nestedElements.length === 0 && expressions.length > 0) {
+      const parts = [];
+      for (const child of element.children) {
+        if (types.isJSXText(child)) {
+          const text = cleanJsxText(child.value);
+          if (text) parts.push(types.stringLiteral(text));
+        } else if (types.isJSXExpressionContainer(child) && !types.isJSXEmptyExpression(child.expression)) {
+          parts.push(cloneExpression(child.expression));
+        }
+      }
+      bindings.push({ kind: "text", path: [...path], value: types.arrayExpression(parts) });
+    }
+    let elementIndex = 0;
+    for (const child of element.children) {
+      if (!types.isJSXElement(child)) continue;
+      const reason2 = visit(child, [...path, elementIndex]);
+      if (reason2) return reason2;
+      elementIndex += 1;
+    }
+    return void 0;
+  };
+  const reason = visit(branch, []);
+  return reason ? { reason } : { bindings };
+}
+function analyzeHostConditionalContainer(container, statesByValue, safeGlobals) {
+  const containerName = container.openingElement.name;
+  if (!types.isJSXIdentifier(containerName) || !/^[a-z]/.test(containerName.name) || containerName.name === "svg") {
+    return void 0;
+  }
+  if (container.openingElement.attributes.some(
+    (attribute) => types.isJSXSpreadAttribute(attribute) || types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name) && (attribute.name.name === "ref" || attribute.name.name === "dangerouslySetInnerHTML")
+  )) {
+    return void 0;
+  }
+  for (const attribute of container.openingElement.attributes) {
+    if (!types.isJSXAttribute(attribute) || !types.isJSXIdentifier(attribute.name)) return void 0;
+    if (/^on[A-Z]/.test(attribute.name.name) || attribute.name.name === "key") return void 0;
+    if (types.isJSXExpressionContainer(attribute.value) && !types.isJSXEmptyExpression(attribute.value.expression))
+      return void 0;
+  }
+  const children = meaningfulJsxChildren(container);
+  if (children.length !== 1 || !types.isJSXExpressionContainer(children[0]) || types.isJSXEmptyExpression(children[0].expression)) {
+    return void 0;
+  }
+  const shape = conditionalBlockShape(children[0].expression);
+  if (!shape || validateDerivedExpression(shape.test, safeGlobals)) return void 0;
+  const truthyAnalysis = shape.truthy ? analyzeHostConditionalTree(shape.truthy, safeGlobals) : { bindings: [] };
+  const falsyAnalysis = shape.falsy ? analyzeHostConditionalTree(shape.falsy, safeGlobals) : { bindings: [] };
+  if (truthyAnalysis.reason || falsyAnalysis.reason) return void 0;
+  const dependencies = new Set(collectStateDependencies(shape.test, statesByValue));
+  for (const binding of [...truthyAnalysis.bindings || [], ...falsyAnalysis.bindings || []]) {
+    for (const dependency of collectStateDependencies(binding.value, statesByValue)) {
+      dependencies.add(dependency);
+    }
+  }
+  return {
+    dependencies: [...dependencies].sort((left, right) => left - right),
+    test: cloneExpression(shape.test),
+    logical: shape.logical,
+    truthy: shape.truthy,
+    falsy: shape.falsy,
+    truthyBindings: truthyAnalysis.bindings || [],
+    falsyBindings: falsyAnalysis.bindings || []
+  };
+}
+function keyedListBoundary(blockRuntime, plan, source) {
+  const name = types.jsxMemberExpression(
+    types.jsxIdentifier(blockRuntime.name),
+    types.jsxIdentifier("KeyedList")
+  );
+  return types.jsxElement(
+    types.jsxOpeningElement(
+      name,
+      [
+        types.jsxAttribute(types.jsxIdentifier("id"), types.jsxExpressionContainer(types.numericLiteral(plan.id))),
+        types.jsxAttribute(
+          types.jsxIdentifier("render"),
+          types.jsxExpressionContainer(types.arrowFunctionExpression([], cloneExpression(source)))
+        )
+      ],
+      true
+    ),
+    null,
+    [],
+    true
+  );
+}
+function hostElementDescriptor(element) {
+  const tag = element.openingElement.name;
+  const attributes = [];
+  const styles = [];
+  for (const attribute of element.openingElement.attributes) {
+    if (!types.isJSXAttribute(attribute)) continue;
+    const name = jsxAttributeName(attribute);
+    if (!name || name === "key" || /^on[A-Z]/.test(name)) continue;
+    if (name === "style") {
+      if (types.isJSXExpressionContainer(attribute.value) && types.isObjectExpression(attribute.value.expression)) {
+        for (const property of attribute.value.expression.properties) {
+          if (!types.isObjectProperty(property) || !types.isExpression(property.value)) continue;
+          const propertyName = types.isIdentifier(property.key) ? property.key.name : property.key.value;
+          styles.push(
+            types.objectExpression([
+              types.objectProperty(types.identifier("name"), types.stringLiteral(propertyName)),
+              types.objectProperty(types.identifier("value"), cloneExpression(property.value))
+            ])
+          );
+        }
+      }
+      continue;
+    }
+    const value = attribute.value ? types.isStringLiteral(attribute.value) ? types.stringLiteral(attribute.value.value) : types.isJSXExpressionContainer(attribute.value) && !types.isJSXEmptyExpression(attribute.value.expression) ? cloneExpression(attribute.value.expression) : types.identifier("undefined") : types.booleanLiteral(true);
+    attributes.push(
+      types.objectExpression([
+        types.objectProperty(types.identifier("name"), types.stringLiteral(name)),
+        types.objectProperty(types.identifier("value"), value)
+      ])
+    );
+  }
+  const children = [];
+  for (const child of element.children) {
+    if (types.isJSXText(child)) {
+      const text = cleanJsxText(child.value);
+      if (text) children.push(types.stringLiteral(text));
+    } else if (types.isJSXElement(child)) {
+      children.push(hostElementDescriptor(child));
+    } else if (types.isJSXExpressionContainer(child) && !types.isJSXEmptyExpression(child.expression)) {
+      children.push(cloneExpression(child.expression));
+    }
+  }
+  return types.objectExpression([
+    types.objectProperty(types.identifier("kind"), types.stringLiteral("element")),
+    types.objectProperty(types.identifier("tag"), types.stringLiteral(tag.name)),
+    types.objectProperty(types.identifier("attributes"), types.arrayExpression(attributes)),
+    types.objectProperty(types.identifier("styles"), types.arrayExpression(styles)),
+    types.objectProperty(types.identifier("children"), types.arrayExpression(children))
+  ]);
+}
+function keyedRowBindingObject(binding, parameters) {
+  const properties = [
+    types.objectProperty(types.identifier("kind"), types.stringLiteral(binding.kind)),
+    types.objectProperty(
+      types.identifier("path"),
+      types.arrayExpression(binding.path.map((part) => types.numericLiteral(part)))
+    )
+  ];
+  if (binding.name) {
+    properties.push(types.objectProperty(types.identifier("name"), types.stringLiteral(binding.name)));
+  }
+  properties.push(
+    types.objectProperty(
+      types.identifier("read"),
+      types.arrowFunctionExpression(
+        parameters.map((parameter) => types.cloneNode(parameter, true)),
+        cloneExpression(binding.value)
+      )
+    )
+  );
+  return types.objectExpression(properties);
+}
+function uniqueLocalIdentifier(base, nodes) {
+  const names = /* @__PURE__ */ new Set();
+  for (const node of nodes) {
+    types.traverseFast(node, (child) => {
+      if (types.isIdentifier(child)) names.add(child.name);
+    });
+  }
+  let name = base;
+  let suffix = 2;
+  while (names.has(name)) name = `${base}${suffix++}`;
+  return types.identifier(name);
+}
+function rewriteKeyedRowEventAttributes(row, events, eventFactory, item, index) {
+  const eventByLocation = new Map(
+    events.map((event) => [`${event.path.join(".")}:${event.name}`, event])
+  );
+  const visit = (element, path) => {
+    for (const attribute of element.openingElement.attributes) {
+      if (!types.isJSXAttribute(attribute)) continue;
+      const name = jsxAttributeName(attribute);
+      if (!name || !/^on[A-Z]/.test(name)) continue;
+      const event = eventByLocation.get(`${path.join(".")}:${name}`);
+      if (!event) continue;
+      attribute.value = types.jsxExpressionContainer(
+        types.callExpression(types.cloneNode(eventFactory), [
+          types.cloneNode(item),
+          types.cloneNode(index),
+          types.numericLiteral(event.id)
+        ])
+      );
+    }
+    let elementIndex = 0;
+    for (const child of element.children) {
+      if (!types.isJSXElement(child)) continue;
+      visit(child, [...path, elementIndex]);
+      elementIndex += 1;
+    }
+  };
+  visit(row, []);
+}
+function rewriteKeyedRowConditionalExpressions(row, conditionals, conditionalFactory, item, index, renderParameters) {
+  const conditionalByLocation = new Map(
+    conditionals.map((conditional) => [conditional.path.join("."), conditional])
+  );
+  const visit = (element, path) => {
+    const conditional = conditionalByLocation.get(path.join("."));
+    if (conditional) {
+      element.children = element.children.map((child) => {
+        if (!types.isJSXExpressionContainer(child) || types.isJSXEmptyExpression(child.expression) || !conditionalBlockShape(child.expression)) {
+          return child;
+        }
+        return types.jsxExpressionContainer(
+          types.callExpression(types.cloneNode(conditionalFactory), [
+            types.cloneNode(item),
+            types.cloneNode(index),
+            types.numericLiteral(conditional.id),
+            types.arrowFunctionExpression(
+              renderParameters.map((parameter) => types.cloneNode(parameter, true)),
+              cloneExpression(child.expression)
+            )
+          ])
+        );
+      });
+      return;
+    }
+    let elementIndex = 0;
+    for (const child of element.children) {
+      if (!types.isJSXElement(child)) continue;
+      visit(child, [...path, elementIndex]);
+      elementIndex += 1;
+    }
+  };
+  visit(row, []);
+}
+function keyedRowsRenderSource(plan, eventFactory, conditionalFactory) {
+  const source = types.cloneNode(plan.source, true);
+  const child = meaningfulJsxChildren(source)[0];
+  let callback;
+  if (plan.syntax === "map" && types.isJSXExpressionContainer(child) && !types.isJSXEmptyExpression(child.expression) && isMapCall(child.expression)) {
+    const candidate = child.expression.arguments[0];
+    if (types.isArrowFunctionExpression(candidate) || types.isFunctionExpression(candidate)) {
+      callback = candidate;
+    }
+  } else if (plan.syntax === "list" && types.isJSXElement(child)) {
+    const renderChild = meaningfulJsxChildren(child)[0];
+    if (types.isJSXExpressionContainer(renderChild) && !types.isJSXEmptyExpression(renderChild.expression) && (types.isArrowFunctionExpression(renderChild.expression) || types.isFunctionExpression(renderChild.expression))) {
+      callback = renderChild.expression;
+    }
+  }
+  const row = callback && returnedExpression(callback);
+  const item = callback?.params[0];
+  const index = callback?.params[1];
+  if (!callback || !types.isJSXElement(row) || !types.isIdentifier(item)) return source;
+  const runtimeIndex = types.isIdentifier(index) ? index : types.numericLiteral(0);
+  if (plan.events.length > 0) {
+    rewriteKeyedRowEventAttributes(row, plan.events, eventFactory, item, runtimeIndex);
+  }
+  if (plan.conditionals.length > 0) {
+    rewriteKeyedRowConditionalExpressions(
+      row,
+      plan.conditionals,
+      conditionalFactory,
+      item,
+      runtimeIndex,
+      callback.params
+    );
+  }
+  return source;
+}
+function keyedRowEventObject(event, renderParameters) {
+  const nodes = [event.value, ...renderParameters];
+  const index = renderParameters[1] ? types.cloneNode(renderParameters[1], true) : uniqueLocalIdentifier("_farmRowIndex", nodes);
+  const syntheticEvent = uniqueLocalIdentifier("_farmEvent", [...nodes, index]);
+  const parameters = [types.cloneNode(renderParameters[0], true), index, syntheticEvent];
+  return types.objectExpression([
+    types.objectProperty(types.identifier("name"), types.stringLiteral(event.name)),
+    types.objectProperty(
+      types.identifier("invoke"),
+      types.arrowFunctionExpression(
+        parameters,
+        types.callExpression(types.parenthesizedExpression(types.cloneNode(event.value, true)), [
+          types.cloneNode(syntheticEvent)
+        ])
+      )
+    )
+  ]);
+}
+function keyedRowConditionalBranchObject(bindings, parameters) {
+  return types.objectExpression([
+    types.objectProperty(
+      types.identifier("bindings"),
+      types.arrayExpression(bindings.map((binding) => keyedRowBindingObject(binding, parameters)))
+    )
+  ]);
+}
+function keyedRowConditionalObject(conditional, parameters) {
+  const properties = [
+    types.objectProperty(types.identifier("id"), types.numericLiteral(conditional.id)),
+    types.objectProperty(
+      types.identifier("path"),
+      types.arrayExpression(conditional.path.map((part) => types.numericLiteral(part)))
+    ),
+    types.objectProperty(
+      types.identifier("test"),
+      types.arrowFunctionExpression(
+        parameters.map((parameter) => types.cloneNode(parameter, true)),
+        cloneExpression(conditional.test)
+      )
+    ),
+    types.objectProperty(types.identifier("logical"), types.booleanLiteral(conditional.logical))
+  ];
+  if (conditional.truthy) {
+    properties.push(
+      types.objectProperty(
+        types.identifier("truthy"),
+        keyedRowConditionalBranchObject(conditional.truthyBindings, parameters)
+      )
+    );
+  }
+  if (conditional.falsy) {
+    properties.push(
+      types.objectProperty(
+        types.identifier("falsy"),
+        keyedRowConditionalBranchObject(conditional.falsyBindings, parameters)
+      )
+    );
+  }
+  return types.objectExpression(properties);
+}
+function keyedRowsBoundary(blockRuntime, plan) {
+  const name = types.jsxMemberExpression(
+    types.jsxIdentifier(blockRuntime.name),
+    types.jsxIdentifier("KeyedRows")
+  );
+  const parameters = plan.renderCallback.params.map(
+    (parameter) => types.cloneNode(parameter, true)
+  );
+  const eventFactory = uniqueLocalIdentifier("_farmRowEvent", [
+    plan.source,
+    ...plan.events.map((event) => event.value)
+  ]);
+  const conditionalFactory = uniqueLocalIdentifier("_farmRowConditional", [
+    plan.source,
+    ...plan.conditionals.map((conditional) => conditional.test)
+  ]);
+  const renderSource = keyedRowsRenderSource(plan, eventFactory, conditionalFactory);
+  const renderFactoryParameters = plan.conditionals.length > 0 ? [types.cloneNode(eventFactory), types.cloneNode(conditionalFactory)] : plan.events.length > 0 ? [types.cloneNode(eventFactory)] : [];
+  return types.jsxElement(
+    types.jsxOpeningElement(
+      name,
+      [
+        types.jsxAttribute(types.jsxIdentifier("id"), types.jsxExpressionContainer(types.numericLiteral(plan.id))),
+        types.jsxAttribute(
+          types.jsxIdentifier("render"),
+          types.jsxExpressionContainer(
+            types.arrowFunctionExpression(renderFactoryParameters, renderSource)
+          )
+        ),
+        types.jsxAttribute(
+          types.jsxIdentifier("items"),
+          types.jsxExpressionContainer(types.arrowFunctionExpression([], cloneExpression(plan.collection)))
+        ),
+        types.jsxAttribute(
+          types.jsxIdentifier("rowKey"),
+          types.jsxExpressionContainer(types.cloneNode(plan.keyCallback, true))
+        ),
+        types.jsxAttribute(
+          types.jsxIdentifier("create"),
+          types.jsxExpressionContainer(
+            types.arrowFunctionExpression(
+              parameters.map((parameter) => types.cloneNode(parameter, true)),
+              hostElementDescriptor(plan.row)
+            )
+          )
+        ),
+        types.jsxAttribute(
+          types.jsxIdentifier("bindings"),
+          types.jsxExpressionContainer(
+            types.arrayExpression(
+              plan.bindings.map((binding) => keyedRowBindingObject(binding, parameters))
+            )
+          )
+        ),
+        ...plan.events.length > 0 ? [
+          types.jsxAttribute(
+            types.jsxIdentifier("events"),
+            types.jsxExpressionContainer(
+              types.arrayExpression(
+                plan.events.map((event) => keyedRowEventObject(event, parameters))
+              )
+            )
+          )
+        ] : [],
+        ...plan.conditionals.length > 0 ? [
+          types.jsxAttribute(
+            types.jsxIdentifier("conditionals"),
+            types.jsxExpressionContainer(
+              types.arrayExpression(
+                plan.conditionals.map(
+                  (conditional) => keyedRowConditionalObject(conditional, parameters)
+                )
+              )
+            )
+          )
+        ] : []
+      ],
+      true
+    ),
+    null,
+    [],
+    true
+  );
+}
+function keyedRangeObject(range) {
+  const parameters = range.renderCallback.params.map(
+    (parameter) => types.cloneNode(parameter, true)
+  );
+  return types.objectExpression([
+    types.objectProperty(types.identifier("before"), types.numericLiteral(range.before)),
+    types.objectProperty(
+      types.identifier("items"),
+      types.arrowFunctionExpression([], cloneExpression(range.collection))
+    ),
+    types.objectProperty(types.identifier("rowKey"), types.cloneNode(range.keyCallback, true)),
+    types.objectProperty(
+      types.identifier("create"),
+      types.arrowFunctionExpression(
+        parameters.map((parameter) => types.cloneNode(parameter, true)),
+        hostElementDescriptor(range.row)
+      )
+    ),
+    types.objectProperty(
+      types.identifier("bindings"),
+      types.arrayExpression(
+        range.bindings.map((binding) => keyedRowBindingObject(binding, parameters))
+      )
+    )
+  ]);
+}
+function keyedRangesBoundary(blockRuntime, plan) {
+  const name = types.jsxMemberExpression(
+    types.jsxIdentifier(blockRuntime.name),
+    types.jsxIdentifier("KeyedRanges")
+  );
+  const source = types.cloneNode(plan.source, true);
+  let rootRef;
+  source.openingElement.attributes = source.openingElement.attributes.filter((attribute) => {
+    if (!types.isJSXAttribute(attribute) || jsxAttributeName(attribute) !== "ref" || !types.isJSXExpressionContainer(attribute.value) || types.isJSXEmptyExpression(attribute.value.expression)) {
+      return true;
+    }
+    rootRef = cloneExpression(attribute.value.expression);
+    return false;
+  });
+  return types.jsxElement(
+    types.jsxOpeningElement(
+      name,
+      [
+        types.jsxAttribute(types.jsxIdentifier("id"), types.jsxExpressionContainer(types.numericLiteral(plan.id))),
+        types.jsxAttribute(
+          types.jsxIdentifier("render"),
+          types.jsxExpressionContainer(types.arrowFunctionExpression([], source))
+        ),
+        ...rootRef ? [types.jsxAttribute(types.jsxIdentifier("rootRef"), types.jsxExpressionContainer(rootRef))] : [],
+        types.jsxAttribute(
+          types.jsxIdentifier("ranges"),
+          types.jsxExpressionContainer(
+            types.arrayExpression(plan.ranges.map((range) => keyedRangeObject(range)))
+          )
+        ),
+        types.jsxAttribute(
+          types.jsxIdentifier("trailing"),
+          types.jsxExpressionContainer(types.numericLiteral(plan.trailing))
+        )
+      ],
+      true
+    ),
+    null,
+    [],
+    true
+  );
+}
+function hostConditionalBranchObject(branch, bindings) {
+  return types.objectExpression([
+    types.objectProperty(
+      types.identifier("create"),
+      types.arrowFunctionExpression([], hostElementDescriptor(branch))
+    ),
+    types.objectProperty(
+      types.identifier("bindings"),
+      types.arrayExpression(bindings.map((binding) => keyedRowBindingObject(binding, [])))
+    )
+  ]);
+}
+function hostConditionalBoundary(blockRuntime, plan) {
+  const name = types.jsxMemberExpression(
+    types.jsxIdentifier(blockRuntime.name),
+    types.jsxIdentifier("HostConditional")
+  );
+  const attributes = [
+    types.jsxAttribute(types.jsxIdentifier("id"), types.jsxExpressionContainer(types.numericLiteral(plan.id))),
+    types.jsxAttribute(
+      types.jsxIdentifier("render"),
+      types.jsxExpressionContainer(types.arrowFunctionExpression([], types.cloneNode(plan.source, true)))
+    ),
+    types.jsxAttribute(
+      types.jsxIdentifier("test"),
+      types.jsxExpressionContainer(types.arrowFunctionExpression([], cloneExpression(plan.test)))
+    )
+  ];
+  if (plan.logical) attributes.push(types.jsxAttribute(types.jsxIdentifier("logical")));
+  if (plan.truthy) {
+    attributes.push(
+      types.jsxAttribute(
+        types.jsxIdentifier("truthy"),
+        types.jsxExpressionContainer(hostConditionalBranchObject(plan.truthy, plan.truthyBindings))
+      )
+    );
+  }
+  if (plan.falsy) {
+    attributes.push(
+      types.jsxAttribute(
+        types.jsxIdentifier("falsy"),
+        types.jsxExpressionContainer(hostConditionalBranchObject(plan.falsy, plan.falsyBindings))
+      )
+    );
+  }
+  return types.jsxElement(types.jsxOpeningElement(name, attributes, true), null, [], true);
+}
+function analyzeComponentIslandElement(element, statesByValue, safeGlobals, allowedComponentNames) {
+  const name = element.openingElement.name;
+  if (!types.isJSXIdentifier(name) || !isComponentName(name.name)) {
+    return { reason: "component islands require a direct component identifier" };
+  }
+  if (!allowedComponentNames.has(name.name)) {
+    return {
+      reason: `component island ${name.name} must reference a stable module-level component`
+    };
+  }
+  if (meaningfulJsxChildren(element).length > 0) {
+    return { reason: `component island ${name.name} does not support children yet` };
+  }
+  const dependencies = /* @__PURE__ */ new Set();
+  for (const attribute of element.openingElement.attributes) {
+    if (types.isJSXSpreadAttribute(attribute)) {
+      return { reason: `component island ${name.name} does not support JSX attribute spreads` };
+    }
+    const attributeName = jsxAttributeName(attribute);
+    if (!attributeName) {
+      return { reason: `component island ${name.name} does not support namespaced JSX attributes` };
+    }
+    if (attributeName === "ref" || attributeName === "key" || attributeName === "children") {
+      return { reason: `component island ${name.name} does not support ${attributeName} yet` };
+    }
+    if (!types.isJSXExpressionContainer(attribute.value) || types.isJSXEmptyExpression(attribute.value.expression)) {
+      continue;
+    }
+    const expression = attribute.value.expression;
+    const isEventFunction = /^on[A-Z]/.test(attributeName) && (types.isArrowFunctionExpression(expression) || types.isFunctionExpression(expression));
+    if (!isEventFunction) {
+      const unsupported = validateDerivedExpression(expression, safeGlobals);
+      if (unsupported) {
+        return {
+          reason: `component island ${name.name} prop ${attributeName} cannot use ${unsupported}`
+        };
+      }
+    }
+    collectStateDependencies(expression, statesByValue).forEach(
+      (dependency) => dependencies.add(dependency)
+    );
+  }
+  return { dependencies: [...dependencies].sort((left, right) => left - right) };
+}
+function componentIslandBoundary(blockRuntime, plan, source) {
+  const name = types.jsxMemberExpression(
+    types.jsxIdentifier(blockRuntime.name),
+    types.jsxIdentifier("Component")
+  );
+  return types.jsxElement(
+    types.jsxOpeningElement(
+      name,
+      [
+        types.jsxAttribute(types.jsxIdentifier("id"), types.jsxExpressionContainer(types.numericLiteral(plan.id))),
+        types.jsxAttribute(
+          types.jsxIdentifier("render"),
+          types.jsxExpressionContainer(types.arrowFunctionExpression([], types.cloneNode(source, true)))
+        )
+      ],
+      true
+    ),
+    null,
+    [],
+    true
+  );
+}
+function analyzeComposableBlocks(root, statesByValue, safeGlobals, listNames, allowedComponentNames) {
+  const plans = [];
+  const componentElements = /* @__PURE__ */ new Set();
+  const conditionalExpressions = /* @__PURE__ */ new Set();
+  const ownedElements = /* @__PURE__ */ new Set();
+  const keyedExpressions = /* @__PURE__ */ new Set();
+  let nextId = 0;
+  const mergeDependencies = (target, dependencies) => {
+    for (const dependency of dependencies) target.add(dependency);
+  };
+  const visitHost = (element, parent, insideConditional) => {
+    const dependencies = /* @__PURE__ */ new Set();
+    if (!isHostElement(element)) {
+      return {
+        dependencies,
+        reason: insideConditional ? "conditional blocks currently support host elements only" : "compiled trees currently support host elements only"
+      };
+    }
+    if (insideConditional) {
+      for (const attribute of element.openingElement.attributes) {
+        if (types.isJSXSpreadAttribute(attribute)) {
+          return {
+            dependencies,
+            reason: "conditional blocks do not support JSX attribute spreads"
+          };
+        }
+        const name = jsxAttributeName(attribute);
+        if (!name) {
+          return {
+            dependencies,
+            reason: "conditional blocks do not support namespaced JSX attributes"
+          };
+        }
+        if (name === "ref" || name === "dangerouslySetInnerHTML") {
+          return {
+            dependencies,
+            reason: `conditional block ${name} requires React ownership`
+          };
+        }
+        if (!types.isJSXExpressionContainer(attribute.value) || types.isJSXEmptyExpression(attribute.value.expression) || /^on[A-Z]/.test(name)) {
+          continue;
+        }
+        const expression = attribute.value.expression;
+        if (name === "style") {
+          if (!types.isObjectExpression(expression)) {
+            return {
+              dependencies,
+              reason: "conditional block styles must use one inline object literal"
+            };
+          }
+          for (const property of expression.properties) {
+            if (!types.isObjectProperty(property) || property.computed) {
+              return {
+                dependencies,
+                reason: "conditional block styles do not support spreads, methods, or computed properties"
+              };
+            }
+            if (!types.isExpression(property.value)) {
+              return {
+                dependencies,
+                reason: "conditional block style properties must use expression values"
+              };
+            }
+            const unsupported2 = validateDerivedExpression(property.value, safeGlobals);
+            if (unsupported2) {
+              return {
+                dependencies,
+                reason: `conditional block style cannot use ${unsupported2}`
+              };
+            }
+            mergeDependencies(
+              dependencies,
+              collectStateDependencies(property.value, statesByValue)
+            );
+          }
+          continue;
+        }
+        const unsupported = validateDerivedExpression(expression, safeGlobals);
+        if (unsupported) {
+          return {
+            dependencies,
+            reason: `conditional block attribute ${name} cannot use ${unsupported}`
+          };
+        }
+        mergeDependencies(dependencies, collectStateDependencies(expression, statesByValue));
+      }
+    }
+    for (const child of element.children) {
+      if (types.isJSXFragment(child)) {
+        if (insideConditional) {
+          return {
+            dependencies,
+            reason: "conditional blocks do not support fragments yet"
+          };
+        }
+        continue;
+      }
+      if (types.isJSXElement(child)) {
+        if (isHostElement(child)) {
+          const keyedRanges = insideConditional ? void 0 : analyzeKeyedRangesContainer(child, statesByValue, safeGlobals, listNames);
+          if (keyedRanges) {
+            plans.push({
+              kind: "keyed-ranges",
+              id: nextId++,
+              parent,
+              dependencies: keyedRanges.dependencies,
+              source: child,
+              ranges: keyedRanges.ranges,
+              trailing: keyedRanges.trailing
+            });
+            for (const range of keyedRanges.ranges) {
+              if (types.isJSXElement(range.source)) ownedElements.add(range.source);
+              else keyedExpressions.add(range.source);
+            }
+            continue;
+          }
+          const hostConditional = analyzeHostConditionalContainer(
+            child,
+            statesByValue,
+            safeGlobals
+          );
+          if (hostConditional) {
+            plans.push({
+              kind: "host-conditional",
+              id: nextId++,
+              parent,
+              source: child,
+              ...hostConditional
+            });
+            ownedElements.add(child);
+            continue;
+          }
+          const keyedRows = analyzeKeyedRowsContainer(child, statesByValue, safeGlobals, listNames);
+          if (keyedRows) {
+            plans.push({
+              kind: "keyed-rows",
+              id: nextId++,
+              parent,
+              dependencies: keyedRows.dependencies,
+              source: child,
+              collection: keyedRows.collection,
+              keyCallback: keyedRows.keyCallback,
+              renderCallback: keyedRows.renderCallback,
+              row: keyedRows.row,
+              bindings: keyedRows.bindings,
+              events: keyedRows.events,
+              conditionals: keyedRows.conditionals,
+              syntax: keyedRows.syntax
+            });
+            ownedElements.add(child);
+            continue;
+          }
+          const nested = visitHost(child, parent, insideConditional);
+          if (nested.reason) return { dependencies, reason: nested.reason };
+          mergeDependencies(dependencies, nested.dependencies);
+          continue;
+        }
+        if (isPublicListElement(child, listNames)) {
+          const result3 = analyzePublicList(child, statesByValue, safeGlobals);
+          if (result3.reason) return { dependencies, reason: result3.reason };
+          const plan = {
+            kind: "keyed-list",
+            id: nextId++,
+            parent,
+            dependencies: result3.dependencies || [],
+            source: child,
+            syntax: "list"
+          };
+          plans.push(plan);
+          ownedElements.add(child);
+          continue;
+        }
+        const result2 = analyzeComponentIslandElement(
+          child,
+          statesByValue,
+          safeGlobals,
+          allowedComponentNames
+        );
+        if (result2.reason) return { dependencies, reason: result2.reason };
+        componentElements.add(child);
+        if ((result2.dependencies || []).length > 0) {
+          plans.push({
+            kind: "component",
+            id: nextId++,
+            parent,
+            dependencies: result2.dependencies || [],
+            source: child
+          });
+        }
+        continue;
+      }
+      if (!types.isJSXExpressionContainer(child) || types.isJSXEmptyExpression(child.expression)) {
+        continue;
+      }
+      const expression = child.expression;
+      const shape = conditionalBlockShape(expression);
+      if (shape) {
+        const unsupported = validateDerivedExpression(shape.test, safeGlobals);
+        if (unsupported) {
+          return {
+            dependencies,
+            reason: `conditional block test cannot use ${unsupported}`
+          };
+        }
+        const plan = {
+          kind: "conditional",
+          id: nextId++,
+          parent,
+          dependencies: collectStateDependencies(shape.test, statesByValue),
+          source: expression
+        };
+        plans.push(plan);
+        conditionalExpressions.add(expression);
+        const ownedDependencies = new Set(plan.dependencies);
+        for (const branch of shape.branches) {
+          const nested = visitHost(branch, plan.id, true);
+          if (nested.reason) return { dependencies, reason: nested.reason };
+          mergeDependencies(ownedDependencies, nested.dependencies);
+        }
+        plan.dependencies = [...ownedDependencies].sort((left, right) => left - right);
+        continue;
+      }
+      if (isMapCall(expression)) {
+        const result2 = analyzeMapList(expression, statesByValue, safeGlobals);
+        if (result2.reason) return { dependencies, reason: result2.reason };
+        plans.push({
+          kind: "keyed-list",
+          id: nextId++,
+          parent,
+          dependencies: result2.dependencies || [],
+          source: expression,
+          syntax: "map"
+        });
+        keyedExpressions.add(expression);
+        continue;
+      }
+      if (insideConditional) {
+        if (!isTextExpression(expression, statesByValue, safeGlobals)) {
+          return {
+            dependencies,
+            reason: "conditional block children must keep one supported block or static host tree"
+          };
+        }
+        mergeDependencies(dependencies, collectStateDependencies(expression, statesByValue));
+      }
+    }
+    return { dependencies };
+  };
+  const rootRanges = analyzeKeyedRangesContainer(root, statesByValue, safeGlobals, listNames, true);
+  if (rootRanges) {
+    plans.push({
+      kind: "keyed-ranges",
+      id: nextId++,
+      dependencies: rootRanges.dependencies,
+      source: root,
+      ranges: rootRanges.ranges,
+      trailing: rootRanges.trailing
+    });
+    for (const range of rootRanges.ranges) {
+      if (types.isJSXElement(range.source)) ownedElements.add(range.source);
+      else keyedExpressions.add(range.source);
+    }
+    return {
+      plans,
+      componentElements,
+      conditionalExpressions,
+      ownedElements,
+      keyedExpressions
+    };
+  }
+  const result = visitHost(root, void 0, false);
+  if (result.reason) return { reason: result.reason };
+  return {
+    plans,
+    componentElements,
+    conditionalExpressions,
+    ownedElements,
+    keyedExpressions
+  };
 }
-function findContainingEvent(path) {
-  const attribute = path.findParent((parent) => parent.isJSXAttribute());
-  if (!attribute?.isJSXAttribute() || !types.isJSXIdentifier(attribute.node.name)) return null;
-  return /^on[A-Z]/.test(attribute.node.name.name) ? attribute : null;
+function conditionalBlockBoundary(blockRuntime, plan, source) {
+  const name = types.jsxMemberExpression(
+    types.jsxIdentifier(blockRuntime.name),
+    types.jsxIdentifier("Conditional")
+  );
+  return types.jsxElement(
+    types.jsxOpeningElement(
+      name,
+      [
+        types.jsxAttribute(types.jsxIdentifier("id"), types.jsxExpressionContainer(types.numericLiteral(plan.id))),
+        types.jsxAttribute(
+          types.jsxIdentifier("render"),
+          types.jsxExpressionContainer(types.arrowFunctionExpression([], cloneExpression(source)))
+        )
+      ],
+      true
+    ),
+    null,
+    [],
+    true
+  );
 }
-function validateSetterUsage(root, statesBySetter) {
-  const file = expressionFile(types.cloneNode(root, true));
-  let reason;
-  traverse(file, {
-    ReferencedIdentifier(path) {
-      if (reason) return;
-      const state = statesBySetter.get(path.node.name);
-      if (!state || path.scope.hasBinding(path.node.name)) return;
-      const parent = path.parentPath;
-      if (!parent.isCallExpression() || parent.node.callee !== path.node || !findContainingEvent(parent)) {
-        reason = `${state.setterName} must be called inside a JSX event handler`;
+function lowerComposableBlocks(root, plans, blockRuntime, listNames) {
+  const planBySource = new Map(
+    plans.map((plan) => [plan.source, plan])
+  );
+  const rootPlan = planBySource.get(root);
+  if (rootPlan?.kind === "keyed-ranges") {
+    return keyedRangesBoundary(blockRuntime, rootPlan);
+  }
+  const visit = (element) => {
+    element.children = element.children.map((child) => {
+      if (types.isJSXElement(child)) {
+        const plan2 = planBySource.get(child);
+        if (plan2?.kind === "host-conditional") {
+          return hostConditionalBoundary(blockRuntime, plan2);
+        }
+        if (plan2?.kind === "keyed-rows") {
+          return keyedRowsBoundary(blockRuntime, plan2);
+        }
+        if (plan2?.kind === "keyed-ranges") {
+          return keyedRangesBoundary(blockRuntime, plan2);
+        }
+        if (plan2?.kind === "component") {
+          return componentIslandBoundary(blockRuntime, plan2, child);
+        }
+        if (plan2?.kind === "keyed-list" && isPublicListElement(child, listNames)) {
+          return keyedListBoundary(blockRuntime, plan2, child);
+        }
+        if (isHostElement(child)) visit(child);
+        return child;
       }
+      if (!types.isJSXExpressionContainer(child) || types.isJSXEmptyExpression(child.expression)) {
+        return child;
+      }
+      const plan = planBySource.get(child.expression);
+      if (plan?.kind === "conditional") {
+        const shape = conditionalBlockShape(child.expression);
+        for (const branch of shape?.branches || []) visit(branch);
+        return conditionalBlockBoundary(blockRuntime, plan, child.expression);
+      }
+      if (plan?.kind === "keyed-list") {
+        return keyedListBoundary(blockRuntime, plan, child.expression);
+      }
+      return child;
+    });
+  };
+  visit(root);
+  return root;
+}
+function assignStableBindingTargets(bindings) {
+  const targetByPath = /* @__PURE__ */ new Map();
+  for (const binding of bindings) {
+    if (binding.kind === "block") continue;
+    const key = binding.path.join(".");
+    let target = targetByPath.get(key);
+    if (target === void 0) {
+      target = targetByPath.size;
+      targetByPath.set(key, target);
     }
-  });
-  return reason;
+    binding.target = target;
+  }
 }
-function rewriteStateAccess(expression, stateParameter, statesByValue, statesBySetter) {
-  const file = expressionFile(cloneExpression(expression));
-  traverse(file, {
-    CallExpression(path) {
-      const callee = path.get("callee");
-      if (!callee.isIdentifier() || callee.scope.hasBinding(callee.node.name)) return;
-      const state = statesBySetter.get(callee.node.name);
-      if (!state) return;
-      callee.replaceWith(
-        types.memberExpression(
-          types.memberExpression(types.cloneNode(stateParameter), types.numericLiteral(state.index), true),
-          types.identifier("set")
-        )
-      );
-    },
-    ReferencedIdentifier(path) {
-      const state = statesByValue.get(path.node.name);
-      if (!state || path.scope.hasBinding(path.node.name)) return;
-      path.replaceWith(
-        types.callExpression(
-          types.memberExpression(
-            types.memberExpression(types.cloneNode(stateParameter), types.numericLiteral(state.index), true),
-            types.identifier("get")
-          ),
-          []
+function lowerStableBindingTargets(root, bindings, blockRuntime, ownedElements) {
+  const targetByPath = /* @__PURE__ */ new Map();
+  for (const binding of bindings) {
+    if (binding.kind !== "block" && binding.target !== void 0) {
+      targetByPath.set(binding.path.join("."), binding.target);
+    }
+  }
+  const visit = (element, path) => {
+    const target = targetByPath.get(path.join("."));
+    if (target !== void 0 && path.length > 0) {
+      element.openingElement.attributes.push(
+        types.jsxAttribute(
+          types.jsxIdentifier("ref"),
+          types.jsxExpressionContainer(
+            types.callExpression(
+              types.memberExpression(types.cloneNode(blockRuntime), types.identifier("target")),
+              [types.numericLiteral(target)]
+            )
+          )
         )
       );
     }
-  });
-  return file.program.body[0].expression;
-}
-function cleanJsxText(value) {
-  const lines = value.replace(/\r/g, "").split("\n");
-  let result = "";
-  for (let index = 0; index < lines.length; index += 1) {
-    const lastNonEmptyLine = lines.slice(index + 1).every((line2) => line2.trim().length === 0);
-    let line = lines[index].replace(/\t/g, " ").replace(/ +/g, " ");
-    if (index > 0) line = line.replace(/^ /, "");
-    if (!lastNonEmptyLine) line = line.replace(/ $/, "");
-    if (line) result += line + (!lastNonEmptyLine ? " " : "");
-  }
-  return result;
-}
-function isTextExpression(expression) {
-  let supported = true;
-  traverse(expressionFile(cloneExpression(expression)), {
-    CallExpression(path) {
-      supported = false;
-      path.stop();
-    },
-    OptionalCallExpression(path) {
-      supported = false;
-      path.stop();
-    },
-    JSXElement(path) {
-      supported = false;
-      path.stop();
-    },
-    JSXFragment(path) {
-      supported = false;
-      path.stop();
-    },
-    ObjectExpression(path) {
-      supported = false;
-      path.stop();
-    },
-    Function(path) {
-      supported = false;
-      path.stop();
+    let elementIndex = 0;
+    for (const child of element.children) {
+      if (!types.isJSXElement(child) || !isHostElement(child)) continue;
+      if (ownedElements.has(child)) continue;
+      visit(child, [...path, elementIndex]);
+      elementIndex += 1;
     }
-  });
-  return supported;
-}
-function jsxAttributeName(attribute) {
-  return types.isJSXIdentifier(attribute.name) ? attribute.name.name : void 0;
+  };
+  visit(root, []);
+  return root;
 }
-function analyzeHostTree(root, statesByValue) {
+function analyzeHostTree(root, statesByValue, safeGlobals, conditionalExpressions, keyedExpressions, ownedElements, componentElements) {
   const bindings = [];
+  const analyzeStyle = (expression, path) => {
+    if (!types.isObjectExpression(expression)) {
+      return "stateful style bindings must use one inline object literal";
+    }
+    for (const property of expression.properties) {
+      if (!types.isObjectProperty(property) || property.computed) {
+        return "stateful style bindings do not support spreads, methods, or computed properties";
+      }
+      const name = types.isIdentifier(property.key) ? property.key.name : types.isStringLiteral(property.key) ? property.key.value : void 0;
+      if (!name || name.includes("-") && !name.startsWith("--")) {
+        return "stateful style property names must use camelCase or a CSS custom property";
+      }
+      if (!types.isExpression(property.value)) {
+        return `stateful style property ${name} must use an expression value`;
+      }
+      const dependencies = collectStateDependencies(property.value, statesByValue);
+      if (dependencies.length === 0) continue;
+      const unsupported = validateDerivedExpression(property.value, safeGlobals);
+      if (unsupported) return `stateful style property ${name} cannot use ${unsupported}`;
+      bindings.push({
+        kind: "style",
+        path: [...path],
+        dependencies,
+        name,
+        value: cloneExpression(property.value)
+      });
+    }
+    return void 0;
+  };
   const visit = (element, path) => {
     const tag = element.openingElement.name;
     if (!types.isJSXIdentifier(tag) || !/^[a-z]/.test(tag.name)) {
@@ -158,9 +2021,16 @@ function analyzeHostTree(root, statesByValue) {
       const expression = attribute.value.expression;
       const dependencies = collectStateDependencies(expression, statesByValue);
       if (dependencies.length === 0 || /^on[A-Z]/.test(name)) continue;
-      if (name === "style" || name === "children" || name === "key") {
+      if (name === "style") {
+        const reason2 = analyzeStyle(expression, path);
+        if (reason2) return reason2;
+        continue;
+      }
+      if (name === "children" || name === "key") {
         return `stateful ${name} bindings are not supported yet`;
       }
+      const unsupported = validateDerivedExpression(expression, safeGlobals);
+      if (unsupported) return `stateful ${name} binding cannot use ${unsupported}`;
       bindings.push({
         kind: "attribute",
         path: [...path],
@@ -170,18 +2040,29 @@ function analyzeHostTree(root, statesByValue) {
       });
     }
     const nestedElements = element.children.filter(
-      (child) => types.isJSXElement(child)
+      (child) => types.isJSXElement(child) && isHostElement(child) && !ownedElements.has(child)
     );
     const expressionChildren = element.children.filter(
       (child) => types.isJSXExpressionContainer(child)
     );
     for (const child of expressionChildren) {
       if (types.isJSXEmptyExpression(child.expression)) continue;
-      if (!isTextExpression(child.expression)) {
+      if (conditionalExpressions.has(child.expression)) continue;
+      if (keyedExpressions.has(child.expression)) continue;
+      if (!isTextExpression(child.expression, statesByValue, safeGlobals)) {
         return "dynamic child structures require React reconciliation";
       }
     }
-    if (nestedElements.length === 0) {
+    const hasOwnedElement = element.children.some(
+      (child) => types.isJSXElement(child) && ownedElements.has(child)
+    );
+    const hasComponentElement = element.children.some(
+      (child) => types.isJSXElement(child) && componentElements.has(child)
+    );
+    const hasDynamicBlocks = hasOwnedElement || hasComponentElement || expressionChildren.some(
+      (child) => !types.isJSXEmptyExpression(child.expression) && (conditionalExpressions.has(child.expression) || keyedExpressions.has(child.expression))
+    );
+    if (nestedElements.length === 0 && !hasDynamicBlocks) {
       const dependencies = /* @__PURE__ */ new Set();
       const parts = [];
       for (const child of element.children) {
@@ -205,13 +2086,13 @@ function analyzeHostTree(root, statesByValue) {
       }
     } else {
       for (const child of expressionChildren) {
-        if (!types.isJSXEmptyExpression(child.expression) && collectStateDependencies(child.expression, statesByValue).length > 0) {
+        if (!types.isJSXEmptyExpression(child.expression) && !conditionalExpressions.has(child.expression) && !keyedExpressions.has(child.expression) && collectStateDependencies(child.expression, statesByValue).length > 0) {
           return "mixed element and stateful text children are not supported yet";
         }
       }
       let elementIndex = 0;
       for (const child of element.children) {
-        if (!types.isJSXElement(child)) continue;
+        if (!types.isJSXElement(child) || !isHostElement(child) || ownedElements.has(child)) continue;
         const reason2 = visit(child, [...path, elementIndex]);
         if (reason2) return reason2;
         elementIndex += 1;
@@ -246,29 +2127,94 @@ function lazyInitialValue(expression) {
     []
   );
 }
-function clonePropsParameter(path) {
+function analyzePropsParameter(path) {
   const parameter = path.node.params[0];
-  return parameter && types.isIdentifier(parameter) ? types.cloneNode(parameter, true) : types.identifier("_props");
+  if (!parameter) {
+    return {
+      definitionParameter: path.scope.generateUidIdentifier("props"),
+      destructuredNames: /* @__PURE__ */ new Set()
+    };
+  }
+  if (types.isIdentifier(parameter)) {
+    return {
+      definitionParameter: types.cloneNode(parameter, true),
+      wrapperProps: types.cloneNode(parameter, true),
+      destructuredNames: /* @__PURE__ */ new Set()
+    };
+  }
+  if (!types.isObjectPattern(parameter)) {
+    return "components must use zero parameters, one props identifier, or flat object props destructuring";
+  }
+  const localNames = /* @__PURE__ */ new Set();
+  for (const property of parameter.properties) {
+    if (types.isRestElement(property)) {
+      return "rest properties in component props destructuring are not supported yet";
+    }
+    if (property.computed) {
+      return "computed component props destructuring is not supported yet";
+    }
+    let local;
+    if (types.isIdentifier(property.value)) {
+      local = property.value;
+    } else if (types.isAssignmentPattern(property.value) && types.isIdentifier(property.value.left)) {
+      local = property.value.left;
+    }
+    if (!local) {
+      return "nested component props destructuring is not supported yet";
+    }
+    if (localNames.has(local.name)) {
+      return "component props destructuring local names must be unique";
+    }
+    localNames.add(local.name);
+  }
+  const definitionParameter = path.scope.generateUidIdentifier("props");
+  return {
+    definitionParameter,
+    wrapperProps: types.objectExpression(
+      [...localNames].map(
+        (name) => types.objectProperty(types.identifier(name), types.identifier(name), false, true)
+      )
+    ),
+    destructuredNames: localNames
+  };
 }
-function bindingObject(binding, componentPath, stateParameter, statesByValue, statesBySetter) {
+function bindingObject(binding, propsParameter, stateParameter, statesByValue, statesBySetter) {
   const properties = [
     types.objectProperty(types.identifier("kind"), types.stringLiteral(binding.kind)),
-    types.objectProperty(
-      types.identifier("path"),
-      types.arrayExpression(binding.path.map((part) => types.numericLiteral(part)))
-    ),
     types.objectProperty(
       types.identifier("dependencies"),
       types.arrayExpression(binding.dependencies.map((part) => types.numericLiteral(part)))
     )
   ];
+  if (binding.kind === "block") {
+    properties.push(types.objectProperty(types.identifier("id"), types.numericLiteral(binding.id)));
+    if (binding.parent !== void 0) {
+      properties.push(types.objectProperty(types.identifier("parent"), types.numericLiteral(binding.parent)));
+    }
+    return types.objectExpression(properties);
+  }
+  properties.splice(
+    1,
+    0,
+    types.objectProperty(
+      types.identifier("path"),
+      types.arrayExpression(binding.path.map((part) => types.numericLiteral(part)))
+    )
+  );
+  if (binding.target !== void 0) {
+    properties.splice(
+      2,
+      0,
+      types.objectProperty(types.identifier("target"), types.numericLiteral(binding.target))
+    );
+  }
   if (binding.name)
     properties.push(types.objectProperty(types.identifier("name"), types.stringLiteral(binding.name)));
   properties.push(
     types.objectProperty(
       types.identifier("read"),
       types.arrowFunctionExpression(
-        [clonePropsParameter(componentPath), types.cloneNode(stateParameter)],
+        [types.cloneNode(propsParameter), types.cloneNode(stateParameter)],
         rewriteStateAccess(binding.value, stateParameter, statesByValue, statesBySetter)
       )
     )
@@ -280,16 +2226,20 @@ function wrapperElement(definitionIdentifier, props) {
   const attributes = props ? [types.jsxSpreadAttribute(types.cloneNode(props))] : [];
   return types.jsxElement(types.jsxOpeningElement(name, attributes, true), null, [], true);
 }
-function compileCandidate(candidate, createComponentIdentifier, useStateNames, reactNames) {
+function compileCandidate(candidate, createComponentIdentifier, useStateNames, reactNames, listNames, moduleId) {
   const { path, name, statementPath } = candidate;
   if (path.node.async || path.node.generator)
     return "async and generator components are not supported";
   if (path.node.typeParameters) return "generic components are not supported yet";
-  if (path.node.params.length > 1 || path.node.params[0] && !types.isIdentifier(path.node.params[0])) {
-    return "components must use zero parameters or one props identifier";
-  }
+  if (path.node.params.length > 1) return "components must use at most one props parameter";
+  const propsPlan = analyzePropsParameter(path);
+  if (typeof propsPlan === "string") return propsPlan;
   if (!types.isBlockStatement(path.node.body)) return "components must use a block body";
+  const safeGlobals = new Set(
+    [...SAFE_GLOBAL_CALLS, "Math"].filter((name2) => !path.scope.getBinding(name2))
+  );
   const states = [];
+  const locals = [];
   let returned;
   for (const statement of path.node.body.body) {
     if (types.isReturnStatement(statement)) {
@@ -297,19 +2247,48 @@ function compileCandidate(candidate, createComponentIdentifier, useStateNames, r
       returned = statement;
       continue;
     }
-    if (!types.isVariableDeclaration(statement) || statement.declarations.length !== 1) {
-      return "only top-level useState declarations and one return are supported in Group 1";
+    if (types.isFunctionDeclaration(statement)) {
+      if (!statement.id) return "named event handler declarations must have a name";
+      if (statement.async || statement.generator || statement.typeParameters) {
+        return `event handler ${statement.id.name} must be synchronous and non-generic`;
+      }
+      locals.push({
+        kind: "handler",
+        name: statement.id.name,
+        value: types.toExpression(types.cloneNode(statement, true))
+      });
+      continue;
+    }
+    if (!types.isVariableDeclaration(statement) || statement.kind !== "const" || statement.declarations.length !== 1) {
+      return "only top-level useState declarations, pure derived const values, named synchronous handlers, and one return are supported by the current compiler";
     }
     const declaration = statement.declarations[0];
-    if (statement.kind !== "const" || !types.isArrayPattern(declaration.id) || declaration.id.elements.length !== 2 || !types.isIdentifier(declaration.id.elements[0]) || !types.isIdentifier(declaration.id.elements[1]) || !isUseStateCall(declaration.init, useStateNames, reactNames) || declaration.init.arguments.length > 1 || declaration.init.arguments[0] && !types.isExpression(declaration.init.arguments[0])) {
-      return "only const [value, setValue] = useState(initial) declarations are supported";
-    }
-    states.push({
-      valueName: declaration.id.elements[0].name,
-      setterName: declaration.id.elements[1].name,
-      index: states.length,
-      initialValue: declaration.init.arguments[0]
-    });
+    if (types.isArrayPattern(declaration.id)) {
+      if (declaration.id.elements.length !== 2 || !types.isIdentifier(declaration.id.elements[0]) || !types.isIdentifier(declaration.id.elements[1]) || !isUseStateCall(declaration.init, useStateNames, reactNames) || declaration.init.arguments.length > 1 || declaration.init.arguments[0] && !types.isExpression(declaration.init.arguments[0])) {
+        return "only const [value, setValue] = useState(initial) state declarations are supported";
+      }
+      if (locals.length > 0) {
+        return "useState declarations must appear before derived local values and event handlers";
+      }
+      states.push({
+        valueName: declaration.id.elements[0].name,
+        setterName: declaration.id.elements[1].name,
+        index: states.length,
+        initialValue: declaration.init.arguments[0]
+      });
+      continue;
+    }
+    if (!types.isIdentifier(declaration.id) || !types.isExpression(declaration.init)) {
+      return "derived const values and event handlers must use one identifier and one expression";
+    }
+    if (types.isArrowFunctionExpression(declaration.init) || types.isFunctionExpression(declaration.init)) {
+      if (declaration.init.async || declaration.init.generator) {
+        return `event handler ${declaration.id.name} must be synchronous`;
+      }
+      locals.push({ kind: "handler", name: declaration.id.name, value: declaration.init });
+    } else {
+      locals.push({ kind: "derived", name: declaration.id.name, value: declaration.init });
+    }
   }
   if (states.length === 0) return "no local useState binding was found";
   if (!returned?.argument || !types.isJSXElement(returned.argument)) {
@@ -317,22 +2296,109 @@ function compileCandidate(candidate, createComponentIdentifier, useStateNames, r
   }
   const statesByValue = new Map(states.map((state) => [state.valueName, state]));
   const statesBySetter = new Map(states.map((state) => [state.setterName, state]));
+  const localNames = new Set(locals.map((binding) => binding.name));
+  if (localNames.size !== locals.length) return "local binding names must be unique";
   for (const state of states) {
-    if (state.initialValue && (collectStateDependencies(state.initialValue, statesByValue).length > 0 || [...statesBySetter].some(
+    if (state.initialValue && (collectStateDependencies(state.initialValue, statesByValue).length > 0 || collectReferencedLocals(state.initialValue, localNames).length > 0 || [...statesBySetter].some(
       ([setterName]) => referencesIdentifier(state.initialValue, setterName)
     ))) {
-      return "useState initializers cannot reference another local state binding";
+      return "useState initializers cannot reference another local binding";
+    }
+  }
+  const derivedByName = /* @__PURE__ */ new Map();
+  const handlersByName = /* @__PURE__ */ new Map();
+  for (const binding of locals) {
+    const forwardReferences = collectReferencedLocals(binding.value, localNames).filter(
+      (reference) => !derivedByName.has(reference)
+    );
+    if (forwardReferences.length > 0) {
+      return `${binding.kind === "handler" ? "event handler" : "derived local"} ${binding.name} can only reference earlier derived local values`;
+    }
+    const expanded = rewriteDerivedAccess(binding.value, derivedByName);
+    if (binding.kind === "handler") {
+      handlersByName.set(binding.name, {
+        name: binding.name,
+        value: expanded
+      });
+      continue;
     }
+    const unsupported = collectionPipelineMethod(expanded) ? validateCollectionPipeline(expanded, safeGlobals) : validateDerivedExpression(expanded, safeGlobals);
+    if (unsupported) {
+      return `derived local ${binding.name} cannot use ${unsupported}`;
+    }
+    derivedByName.set(binding.name, expanded);
   }
-  const setterReason = validateSetterUsage(returned.argument, statesBySetter);
+  const rootWithDerived = rewriteDerivedAccess(returned.argument, derivedByName);
+  const handlerRewrite = rewriteHandlerAccess(rootWithDerived, handlersByName);
+  if (handlerRewrite.reason) return handlerRewrite.reason;
+  if (!handlerRewrite.root) return "event handlers could not be prepared safely";
+  const expandedRootWithDeferredEvents = rewriteDestructuredPropAccess(
+    handlerRewrite.root,
+    propsPlan.destructuredNames,
+    propsPlan.definitionParameter
+  );
+  const expandedRoot = stabilizeDeferredEventCurrentTargets(
+    expandedRootWithDeferredEvents,
+    new Set(states.map((state) => state.setterName))
+  );
+  const setterReason = validateSetterUsage(expandedRoot, statesBySetter);
   if (setterReason) return setterReason;
-  const analysis = analyzeHostTree(returned.argument, statesByValue);
+  const referencedComponentNames = /* @__PURE__ */ new Set();
+  traverse(expressionFile(types.cloneNode(expandedRoot, true)), {
+    JSXOpeningElement(componentPath) {
+      const componentName = componentPath.node.name;
+      if (types.isJSXIdentifier(componentName) && isComponentName(componentName.name)) {
+        referencedComponentNames.add(componentName.name);
+      }
+    }
+  });
+  const allowedComponentNames = new Set(
+    [...referencedComponentNames].filter((componentName) => {
+      if (listNames.has(componentName)) return false;
+      const binding = path.scope.getBinding(componentName);
+      return Boolean(
+        binding?.constant && binding.scope.path.isProgram() && binding.kind !== "let" && binding.kind !== "var"
+      );
+    })
+  );
+  const blockAnalysis = analyzeComposableBlocks(
+    expandedRoot,
+    statesByValue,
+    safeGlobals,
+    listNames,
+    allowedComponentNames
+  );
+  if (blockAnalysis.reason) return blockAnalysis.reason;
+  const blockPlans = blockAnalysis.plans || [];
+  const analysis = analyzeHostTree(
+    expandedRoot,
+    statesByValue,
+    safeGlobals,
+    blockAnalysis.conditionalExpressions || /* @__PURE__ */ new Set(),
+    blockAnalysis.keyedExpressions || /* @__PURE__ */ new Set(),
+    blockAnalysis.ownedElements || /* @__PURE__ */ new Set(),
+    blockAnalysis.componentElements || /* @__PURE__ */ new Set()
+  );
   if (analysis.reason) return analysis.reason;
+  assignStableBindingTargets(analysis.bindings || []);
   const stateParameter = path.scope.generateUidIdentifier("farmState");
+  const blockParameter = path.scope.generateUidIdentifier("farmBlocks");
   const definitionIdentifier = path.scope.generateUidIdentifier(`${name}Compiled`);
-  const propsParameter = clonePropsParameter(path);
+  const propsParameter = propsPlan.definitionParameter;
+  const rootWithTargets = lowerStableBindingTargets(
+    expandedRoot,
+    analysis.bindings || [],
+    blockParameter,
+    blockAnalysis.ownedElements || /* @__PURE__ */ new Set()
+  );
+  const rootWithBlocks = lowerComposableBlocks(
+    rootWithTargets,
+    blockPlans,
+    blockParameter,
+    listNames
+  );
   const rewrittenRoot = rewriteStateAccess(
-    returned.argument,
+    rootWithBlocks,
     stateParameter,
     statesByValue,
     statesBySetter
@@ -340,39 +2406,67 @@ function compileCandidate(candidate, createComponentIdentifier, useStateNames, r
   const definition = types.callExpression(types.cloneNode(createComponentIdentifier), [
     types.objectExpression([
       types.objectProperty(types.identifier("displayName"), types.stringLiteral(name)),
+      types.spreadElement(
+        types.conditionalExpression(
+          types.memberExpression(
+            types.metaProperty(types.identifier("import"), types.identifier("meta")),
+            types.identifier("hot")
+          ),
+          types.objectExpression([
+            types.objectProperty(types.identifier("hmrId"), types.stringLiteral(`${moduleId}#${name}`)),
+            types.objectProperty(
+              types.identifier("stateSignature"),
+              types.stringLiteral(String(states.length))
+            )
+          ]),
+          types.objectExpression([])
+        )
+      ),
       types.objectProperty(
         types.identifier("initialize"),
         types.arrowFunctionExpression(
           [types.cloneNode(propsParameter)],
-          types.arrayExpression(states.map((state) => lazyInitialValue(state.initialValue)))
+          types.arrayExpression(
+            states.map(
+              (state) => lazyInitialValue(
+                state.initialValue ? rewriteDestructuredPropAccess(
+                  state.initialValue,
+                  propsPlan.destructuredNames,
+                  propsParameter
+                ) : void 0
+              )
+            )
+          )
         )
       ),
       types.objectProperty(
         types.identifier("render"),
         types.arrowFunctionExpression(
-          [types.cloneNode(propsParameter), types.cloneNode(stateParameter)],
+          [types.cloneNode(propsParameter), types.cloneNode(stateParameter), types.cloneNode(blockParameter)],
           rewrittenRoot
         )
       ),
       types.objectProperty(
         types.identifier("bindings"),
         types.arrayExpression(
-          (analysis.bindings || []).map(
-            (binding) => bindingObject(binding, path, stateParameter, statesByValue, statesBySetter)
+          [
+            ...analysis.bindings || [],
+            ...blockPlans.map((block) => ({
+              kind: "block",
+              id: block.id,
+              parent: block.parent,
+              dependencies: block.dependencies
+            }))
+          ].map(
+            (binding) => bindingObject(binding, propsParameter, stateParameter, statesByValue, statesBySetter)
           )
         )
       )
     ])
   ]);
-  const originalProps = path.node.params[0];
   path.get("body").replaceWith(
     types.blockStatement([
-      types.returnStatement(
-        wrapperElement(
-          definitionIdentifier,
-          originalProps && types.isIdentifier(originalProps) ? originalProps : void 0
-        )
-      )
+      types.returnStatement(wrapperElement(definitionIdentifier, propsPlan.wrapperProps))
     ])
   );
   statementPath.insertAfter(
@@ -423,8 +2517,18 @@ async function compileReactModule(code, id, options) {
         const moduleDirectives = new Set(directiveValues(programPath.node));
         const useStateNames = /* @__PURE__ */ new Set();
         const reactNames = /* @__PURE__ */ new Set();
+        const listNames = /* @__PURE__ */ new Set();
         for (const statement of programPath.node.body) {
-          if (!types.isImportDeclaration(statement) || statement.source.value !== "react") continue;
+          if (!types.isImportDeclaration(statement)) continue;
+          if (statement.source.value === "@farm.js/react/list") {
+            for (const specifier of statement.specifiers) {
+              if (types.isImportSpecifier(specifier) && types.isIdentifier(specifier.imported, { name: "List" })) {
+                listNames.add(specifier.local.name);
+              }
+            }
+            continue;
+          }
+          if (statement.source.value !== "react") continue;
           for (const specifier of statement.specifiers) {
             if (types.isImportDefaultSpecifier(specifier) || types.isImportNamespaceSpecifier(specifier)) {
               reactNames.add(specifier.local.name);
@@ -446,7 +2550,9 @@ async function compileReactModule(code, id, options) {
             candidate,
             createComponentIdentifier,
             useStateNames,
-            reactNames
+            reactNames,
+            listNames,
+            id
           );
           if (reason) {
             diagnostics.push({
@@ -500,9 +2606,65 @@ async function compileReactModule(code, id, options) {
     diagnostics
   };
 }
+function projectRelativeId(projectRoot, id) {
+  return relative(projectRoot, id).replace(/\\/g, "/");
+}
+function createReactCompilerReport(projectRoot, observations) {
+  const reasonCounts = /* @__PURE__ */ new Map();
+  let componentsConsidered = 0;
+  let compiled = 0;
+  let fallback = 0;
+  const modules = [...observations].map(({ id, result }) => {
+    componentsConsidered += result.compiled.length + result.diagnostics.length;
+    compiled += result.compiled.length;
+    fallback += result.diagnostics.length;
+    const moduleId = projectRelativeId(projectRoot, id);
+    const fallbacks = result.diagnostics.map((diagnostic) => {
+      reasonCounts.set(diagnostic.reason, (reasonCounts.get(diagnostic.reason) || 0) + 1);
+      return { module: moduleId, ...diagnostic };
+    });
+    return {
+      id: moduleId,
+      compiled: [...result.compiled].sort(),
+      fallbacks
+    };
+  }).sort((left, right) => left.id.localeCompare(right.id));
+  const fallbackReasons = [...reasonCounts].map(([reason, count]) => ({ count, reason })).sort((left, right) => right.count - left.count || left.reason.localeCompare(right.reason));
+  return {
+    version: 1,
+    summary: {
+      modules: modules.length,
+      componentsConsidered,
+      compiled,
+      fallback
+    },
+    fallbackReasons,
+    modules
+  };
+}
+async function writeReactCompilerReport(projectRoot, reportFile, observations) {
+  const outputPath = resolve(projectRoot, reportFile);
+  const report = createReactCompilerReport(projectRoot, observations);
+  await mkdir(dirname(outputPath), { recursive: true });
+  await writeFile(outputPath, `${JSON.stringify(report, null, 2)}
+`, "utf8");
+  return outputPath;
+}
 
 // src/index.ts
 var DEFAULT_COMPILER_DIRECTIVE = "use compiler";
+var DEFAULT_COMPILER_REPORT_FILE = ".farm/react-compiler.json";
+function normalizeCompilerReportFile(value) {
+  if (value === void 0) return DEFAULT_COMPILER_REPORT_FILE;
+  if (typeof value !== "string" || !value.trim()) {
+    throw new TypeError("The React compiler report file must be a non-empty relative path.");
+  }
+  const normalized = value.trim().replace(/\\/g, "/");
+  if (normalized.startsWith("/") || /^[A-Za-z]:\//.test(normalized) || normalized.split("/").includes("..")) {
+    throw new TypeError("The React compiler report file must stay inside the project root.");
+  }
+  return normalized;
+}
 function normalizeReactCompilerOptions(value) {
   const options = value === true ? {} : value;
   const mode = options.mode || "infer";
@@ -517,7 +2679,17 @@ function normalizeReactCompilerOptions(value) {
   if (!["fallback", "warn", "error"].includes(onUnsupported)) {
     throw new TypeError(`Unknown unsupported-component behavior: ${String(onUnsupported)}`);
   }
-  return { mode, directive, onUnsupported };
+  if (options.report !== void 0 && typeof options.report !== "boolean") {
+    throw new TypeError("The React compiler report option must be a boolean.");
+  }
+  if (options.report === false && options.reportFile !== void 0) {
+    throw new TypeError(
+      "A React compiler report file cannot be configured when reporting is false."
+    );
+  }
+  const reportFile = normalizeCompilerReportFile(options.reportFile);
+  const report = options.report === true || options.reportFile !== void 0;
+  return { mode, directive, onUnsupported, report, reportFile };
 }
 
 // src/vite.ts
@@ -542,6 +2714,8 @@ function createFarmRendererPlugin(options = {}) {
   const compilerOptions = readCompilerOptions(options.rendererOptions);
   if (!compilerOptions) return [];
   let projectRoot = "";
+  const reportEnabled = compilerOptions.report && options.ssr !== true;
+  const reportObservations = /* @__PURE__ */ new Map();
   return [
     {
       name: "farm:react-aot-compiler",
@@ -549,11 +2723,21 @@ function createFarmRendererPlugin(options = {}) {
       configResolved(config) {
         projectRoot = normalizePath(config.root).replace(/\/$/, "");
       },
+      buildStart() {
+        reportObservations.clear();
+      },
       async transform(code, id) {
         const cleanId = normalizePath(id.split("?", 1)[0]);
         if (!/\.[jt]sx$/.test(cleanId) || cleanId.includes("/node_modules/") || projectRoot && !cleanId.startsWith(`${projectRoot}/`))
           return null;
         const result = await compileReactModule(code, cleanId, compilerOptions);
+        if (reportEnabled) {
+          if (result.compiled.length > 0 || result.diagnostics.length > 0) {
+            reportObservations.set(cleanId, { id: cleanId, result });
+          } else {
+            reportObservations.delete(cleanId);
+          }
+        }
         for (const diagnostic of result.diagnostics) {
           const message = `[react-compiler] ${diagnostic.component}: ${diagnostic.reason}; using React.`;
           if (compilerOptions.onUnsupported === "error") this.error(message);
@@ -561,6 +2745,14 @@ function createFarmRendererPlugin(options = {}) {
         }
         if (result.compiled.length === 0) return null;
         return { code: result.code, map: result.map };
+      },
+      async buildEnd(error) {
+        if (error || !reportEnabled || !projectRoot) return;
+        await writeReactCompilerReport(
+          projectRoot,
+          compilerOptions.reportFile,
+          reportObservations.values()
+        );
       }
     }
   ];