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

package/dist/compiler-runtime.mjs

@@ -1,6 +1,23 @@
 import React from 'react';
 import { flushSync } from 'react-dom';
 
+// src/compiler-runtime.tsx
+
+// src/iterable.ts
+var oneShotSnapshots = /* @__PURE__ */ new WeakMap();
+function materializeIterable(source) {
+  if (source == null) return [];
+  const iterator = source[Symbol.iterator]();
+  const oneShot = iterator === source && (typeof source === "object" || typeof source === "function");
+  if (oneShot) {
+    const cached = oneShotSnapshots.get(source);
+    if (cached) return cached;
+  }
+  const items = Array.from({ [Symbol.iterator]: () => iterator });
+  if (oneShot) oneShotSnapshots.set(source, items);
+  return items;
+}
+
 // src/compiler-runtime.tsx
 var COMPILER_HMR_REGISTRY = /* @__PURE__ */ Symbol.for("@farm.js/react/compiler-hmr-registry");
 function getCompilerHmrRegistry() {
@@ -16,6 +33,11 @@ function renderTextValue(value) {
   if (value === null || value === void 0 || typeof value === "boolean") return "";
   return String(value);
 }
+function isCompilerPrimitive(value) {
+  if (value === null) return true;
+  const kind = typeof value;
+  return kind === "string" || kind === "number" || kind === "boolean" || kind === "bigint" || kind === "undefined";
+}
 function findBindingTarget(root, path, blockRoots) {
   let current = root;
   for (const index of path) {
@@ -254,14 +276,19 @@ function createCompilerHostElement(document, descriptor) {
     updateAttribute(element, attribute.name, attribute.value);
   }
   for (const style of descriptor.styles) updateStyle(element, style.name, style.value);
-  for (const child of descriptor.children) {
+  const appendChild = (child) => {
+    if (Array.isArray(child)) {
+      for (const nested of child) appendChild(nested);
+      return;
+    }
     if (isCompilerHostElement(child)) {
       element.append(createCompilerHostElement(document, child));
-      continue;
+      return;
     }
     const text = renderTextValue(child);
     if (text) element.append(document.createTextNode(text));
-  }
+  };
+  for (const child of materializeCompilerHostChildren(descriptor)) appendChild(child);
   for (const attribute of descriptor.attributes) {
     if (attribute.name === "value" && (isSelectElement(element) || isTextAreaElement(element))) {
       updateAttribute(element, attribute.name, attribute.value);
@@ -271,18 +298,110 @@ function createCompilerHostElement(document, descriptor) {
 }
 function matchesCompilerHostElement(element, descriptor, opaquePaths = /* @__PURE__ */ new Set(), path = []) {
   if (element.tagName.toLowerCase() !== descriptor.tag.toLowerCase()) return false;
-  if (opaquePaths.has(path.join("."))) return true;
-  const expectedChildren = descriptor.children.filter(isCompilerHostElement);
+  if (opaquePaths.has(path.join(".")) || descriptor.block) return true;
+  const expectedChildren = flattenCompilerHostElements(descriptor.children);
   if (element.children.length !== expectedChildren.length) return false;
   return expectedChildren.every(
     (child, index) => matchesCompilerHostElement(element.children[index], child, opaquePaths, [...path, index])
   );
 }
+function flattenCompilerHostElements(children) {
+  const elements = [];
+  const visit = (child) => {
+    if (Array.isArray(child)) {
+      for (const nested of child) visit(nested);
+    } else if (isCompilerHostElement(child)) {
+      elements.push(child);
+    }
+  };
+  for (const child of children) visit(child);
+  return elements;
+}
+function materializeCompilerHostChildren(descriptor) {
+  const block = descriptor.block;
+  if (block?.kind !== "keyed-ranges" || !block.staticChildrenOnly) {
+    return descriptor.children;
+  }
+  const staticChildren = flattenCompilerHostElements(descriptor.children);
+  const children = [];
+  let cursor = 0;
+  for (const range of block.ranges) {
+    children.push(...staticChildren.slice(cursor, cursor + range.before));
+    cursor += range.before;
+    const items = materializeIterable(range.items());
+    children.push(...items.map((item, index) => range.create(item, index)));
+  }
+  children.push(...staticChildren.slice(cursor, cursor + block.trailing));
+  return children;
+}
+function collectCompilerHostBlockIds(descriptor, ids) {
+  for (const child of flattenCompilerHostElements(descriptor.children)) {
+    collectCompilerHostBlockIds(child, ids);
+  }
+  const block = descriptor.block;
+  if (!block || ids.has(block.id)) return;
+  ids.add(block.id);
+  if (block.kind === "conditional-ranges") {
+    for (const range of block.ranges) {
+      if (range.truthy) collectCompilerHostBlockIds(range.truthy.create(), ids);
+      if (range.falsy) collectCompilerHostBlockIds(range.falsy.create(), ids);
+    }
+  } else if (block.kind === "keyed-ranges") {
+    for (const range of block.ranges) {
+      const first = materializeIterable(range.items())[0];
+      if (first !== void 0) collectCompilerHostBlockIds(range.create(first, 0), ids);
+    }
+  } else {
+    for (const range of block.ranges) {
+      if (range.kind === "conditional") {
+        if (range.truthy) collectCompilerHostBlockIds(range.truthy.create(), ids);
+        if (range.falsy) collectCompilerHostBlockIds(range.falsy.create(), ids);
+      } else {
+        const first = materializeIterable(range.items())[0];
+        if (first !== void 0) collectCompilerHostBlockIds(range.create(first, 0), ids);
+      }
+    }
+  }
+}
 function findCompilerHostTarget(root, path) {
   let current = root;
   for (const index of path) current = current?.children[index] || null;
   return current;
 }
+var UNSET_STATIC_RANGE_BINDING = /* @__PURE__ */ Symbol("unset static range binding");
+function normalizedStaticRangeBindingValue(binding, value) {
+  return binding.kind === "text" ? renderTextValue(value) : value;
+}
+function applyStaticRangeBindings(bindings, segments, values) {
+  const activeBindings = bindings || [];
+  if (values.length === 0 && activeBindings.length > 0) {
+    values.push(...activeBindings.map(() => UNSET_STATIC_RANGE_BINDING));
+  }
+  if (values.length !== activeBindings.length) return false;
+  for (let index = 0; index < activeBindings.length; index += 1) {
+    const binding = activeBindings[index];
+    if (!Number.isSafeInteger(binding.segment) || binding.segment < 0 || !Number.isSafeInteger(binding.sibling) || binding.sibling < 0) {
+      return false;
+    }
+    const sibling = segments[binding.segment]?.[binding.sibling];
+    const target = sibling && findCompilerHostTarget(sibling, binding.path);
+    if (!target) return false;
+    const rawValue = binding.read();
+    const value = normalizedStaticRangeBindingValue(binding, rawValue);
+    if (Object.is(values[index], value)) continue;
+    values[index] = value;
+    if (binding.kind === "text") {
+      target.textContent = value;
+    } else if (binding.kind === "style" && binding.name) {
+      updateStyle(target, binding.name, rawValue);
+    } else if (binding.kind === "attribute" && binding.name) {
+      updateAttribute(target, binding.name, rawValue);
+    } else {
+      return false;
+    }
+  }
+  return true;
+}
 var UNSET_KEYED_ROW_BINDING = /* @__PURE__ */ Symbol("unset interactive keyed-row binding");
 function keyedRowIdentity(key) {
   return String(key);
@@ -297,20 +416,23 @@ function readKeyedRowBindingValues(props, item, index) {
 }
 function applyKeyedRowBindings(props, instance, item, index) {
   for (let bindingIndex = 0; bindingIndex < props.bindings.length; bindingIndex += 1) {
-    const binding = props.bindings[bindingIndex];
-    const rawValue = binding.read(item, index);
-    const value = normalizedKeyedRowBindingValue(binding, rawValue);
-    if (Object.is(instance.values[bindingIndex], value)) continue;
-    instance.values[bindingIndex] = value;
-    const target = findCompilerHostTarget(instance.element, binding.path);
-    if (!target) continue;
-    if (binding.kind === "text") {
-      target.textContent = value;
-    } else if (binding.kind === "style" && binding.name) {
-      updateStyle(target, binding.name, rawValue);
-    } else if (binding.kind === "attribute" && binding.name) {
-      updateAttribute(target, binding.name, rawValue);
-    }
+    applyKeyedRowBinding(props, instance, item, index, bindingIndex);
+  }
+}
+function applyKeyedRowBinding(props, instance, item, index, bindingIndex) {
+  const binding = props.bindings[bindingIndex];
+  const rawValue = binding.read(item, index);
+  const value = normalizedKeyedRowBindingValue(binding, rawValue);
+  if (Object.is(instance.values[bindingIndex], value)) return;
+  instance.values[bindingIndex] = value;
+  const target = findCompilerHostTarget(instance.element, binding.path);
+  if (!target) return;
+  if (binding.kind === "text") {
+    target.textContent = value;
+  } else if (binding.kind === "style" && binding.name) {
+    updateStyle(target, binding.name, rawValue);
+  } else if (binding.kind === "attribute" && binding.name) {
+    updateAttribute(target, binding.name, rawValue);
   }
 }
 function keyedRowConditionalSnapshot(conditional, item, index) {
@@ -329,13 +451,15 @@ function keyedRowConditionalSnapshot(conditional, item, index) {
   ];
 }
 function readKeyedRowConditionalValues(props, item, index) {
+  if (!props.conditionals?.length) return EMPTY_KEYED_ROW_CONDITIONAL_VALUES;
   return new Map(
-    (props.conditionals || []).map((conditional) => [
+    props.conditionals.map((conditional) => [
       conditional.id,
       keyedRowConditionalSnapshot(conditional, item, index)
     ])
   );
 }
+var EMPTY_KEYED_ROW_CONDITIONAL_VALUES = /* @__PURE__ */ new Map();
 function keyedRowConditionalChanged(previous, next) {
   return !previous || previous.length !== next.length || next.some((value, index) => !Object.is(value, previous[index]));
 }
@@ -352,11 +476,6 @@ function hostConditionalSelection(props) {
 function normalizedHostConditionalBindingValue(binding, value) {
   return binding.kind === "text" ? renderTextValue(value) : value;
 }
-function readHostConditionalBindingValues(branch) {
-  return branch.bindings.map(
-    (binding) => normalizedHostConditionalBindingValue(binding, binding.read())
-  );
-}
 function applyHostConditionalBindings(branch, instance) {
   for (let bindingIndex = 0; bindingIndex < branch.bindings.length; bindingIndex += 1) {
     const binding = branch.bindings[bindingIndex];
@@ -375,6 +494,903 @@ function applyHostConditionalBindings(branch, instance) {
     }
   }
 }
+var UNSET_HOST_CONDITIONAL_BINDING = /* @__PURE__ */ Symbol("unset host conditional binding");
+function mountCompilerHostTree(owner, element, descriptor, onFallback) {
+  if (!matchesCompilerHostElement(element, descriptor)) return null;
+  if (descriptor.block?.kind === "conditional-ranges") {
+    const controller = new CompilerNestedConditionalRanges(
+      owner,
+      element,
+      descriptor,
+      descriptor.block,
+      onFallback
+    );
+    try {
+      if (controller.adopt()) return controller;
+      controller.cleanup();
+      return null;
+    } catch (error) {
+      controller.cleanup();
+      throw error;
+    }
+  }
+  if (descriptor.block?.kind === "keyed-ranges") {
+    const controller = new CompilerNestedKeyedRanges(
+      owner,
+      element,
+      descriptor,
+      descriptor.block,
+      onFallback
+    );
+    try {
+      if (controller.adopt()) return controller;
+      controller.cleanup();
+      return null;
+    } catch (error) {
+      controller.cleanup();
+      throw error;
+    }
+  }
+  if (descriptor.block?.kind === "mixed-ranges") {
+    const controller = new CompilerNestedMixedRanges(
+      owner,
+      element,
+      descriptor,
+      descriptor.block,
+      onFallback
+    );
+    try {
+      if (controller.adopt()) return controller;
+      controller.cleanup();
+      return null;
+    } catch (error) {
+      controller.cleanup();
+      throw error;
+    }
+  }
+  const descriptors = flattenCompilerHostElements(descriptor.children);
+  if (descriptors.length !== element.children.length) return null;
+  const scopes = [];
+  for (let index = 0; index < descriptors.length; index += 1) {
+    const scope = mountCompilerHostTree(
+      owner,
+      element.children[index],
+      descriptors[index],
+      onFallback
+    );
+    if (!scope) {
+      for (const mounted of scopes) mounted.cleanup();
+      return null;
+    }
+    scopes.push(scope);
+  }
+  let active = true;
+  return {
+    update(nextDescriptor) {
+      if (!active || nextDescriptor.block || !matchesCompilerHostElement(element, nextDescriptor)) {
+        return false;
+      }
+      const nextChildren = flattenCompilerHostElements(nextDescriptor.children);
+      if (nextChildren.length !== scopes.length) return false;
+      return scopes.every((scope, index) => scope.update(nextChildren[index]));
+    },
+    cleanup() {
+      if (!active) return;
+      active = false;
+      for (const scope of scopes) scope.cleanup();
+    }
+  };
+}
+function mountCompilerHostInstance(owner, element, descriptor, branch, onFallback) {
+  const scope = mountCompilerHostTree(owner, element, descriptor, onFallback);
+  if (!scope) return null;
+  const instance = {
+    element,
+    scope,
+    values: branch.bindings.map(() => UNSET_HOST_CONDITIONAL_BINDING)
+  };
+  try {
+    applyHostConditionalBindings(branch, instance);
+  } catch (error) {
+    scope.cleanup();
+    throw error;
+  }
+  return instance;
+}
+var CompilerNestedConditionalRanges = class {
+  constructor(owner, root, host, block, onFallback) {
+    this.owner = owner;
+    this.root = root;
+    this.host = host;
+    this.block = block;
+    this.onFallback = onFallback;
+    this.instances = [];
+    this.staticSegments = [];
+    this.staticScopes = [];
+    this.staticValues = [];
+    this.active = true;
+    this.refresh = (afterCommit) => {
+      if (!this.active) {
+        afterCommit?.();
+        return;
+      }
+      const selections = this.readSelections();
+      if (!selections || selections.length !== this.instances.length) {
+        this.onFallback();
+        afterCommit?.();
+        return;
+      }
+      if (!applyStaticRangeBindings(this.block.bindings, this.staticSegments, this.staticValues)) {
+        this.onFallback();
+        afterCommit?.();
+        return;
+      }
+      for (let index = this.instances.length - 1; index >= 0; index -= 1) {
+        if (!this.reconcileRange(index, selections[index])) {
+          this.onFallback();
+          afterCommit?.();
+          return;
+        }
+      }
+      afterCommit?.();
+    };
+  }
+  readSelections() {
+    const selections = [];
+    for (const range of this.block.ranges) {
+      const selection = hostConditionalSelection(range);
+      if (selection.kind === "fallback") return null;
+      selections.push(selection);
+    }
+    return selections;
+  }
+  mountStatic(elements, descriptors) {
+    if (elements.length !== descriptors.length) return false;
+    for (let index = 0; index < elements.length; index += 1) {
+      const scope = mountCompilerHostTree(
+        this.owner,
+        elements[index],
+        descriptors[index],
+        this.onFallback
+      );
+      if (!scope) return false;
+      this.staticScopes.push(scope);
+    }
+    return true;
+  }
+  adopt() {
+    if (!Number.isSafeInteger(this.block.trailing) || this.block.trailing < 0) return false;
+    const selections = this.readSelections();
+    if (!selections) return false;
+    const elements = [...this.root.children];
+    const descriptors = flattenCompilerHostElements(this.host.children);
+    if (elements.length !== descriptors.length) return false;
+    let cursor = 0;
+    for (let index = 0; index < this.block.ranges.length; index += 1) {
+      const range = this.block.ranges[index];
+      if (!Number.isSafeInteger(range.before) || range.before < 0) {
+        this.cleanup();
+        return false;
+      }
+      const staticEnd = cursor + range.before;
+      if (staticEnd > elements.length || !this.mountStatic(elements.slice(cursor, staticEnd), descriptors.slice(cursor, staticEnd))) {
+        this.cleanup();
+        return false;
+      }
+      this.staticSegments.push(elements.slice(cursor, staticEnd));
+      cursor = staticEnd;
+      const selection = selections[index];
+      if (selection.kind === "empty") {
+        this.instances.push(null);
+        continue;
+      }
+      const element = elements[cursor];
+      if (!element) {
+        this.cleanup();
+        return false;
+      }
+      const descriptor = selection.branch.create();
+      const host = mountCompilerHostInstance(
+        this.owner,
+        element,
+        descriptor,
+        selection.branch,
+        this.onFallback
+      );
+      if (!host) {
+        this.cleanup();
+        return false;
+      }
+      this.instances.push({ key: selection.key, host });
+      cursor += 1;
+    }
+    const trailingEnd = cursor + this.block.trailing;
+    if (trailingEnd !== elements.length || !this.mountStatic(elements.slice(cursor), descriptors.slice(cursor))) {
+      this.cleanup();
+      return false;
+    }
+    this.staticSegments.push(elements.slice(cursor));
+    if (!applyStaticRangeBindings(this.block.bindings, this.staticSegments, this.staticValues)) {
+      this.cleanup();
+      return false;
+    }
+    this.unsubscribe = this.owner.subscribe(this.block.id, this.refresh);
+    return true;
+  }
+  anchorAfter(rangeIndex) {
+    for (let next = rangeIndex + 1; next < this.instances.length; next += 1) {
+      const staticAnchor = this.staticSegments[next]?.[0];
+      if (staticAnchor) return staticAnchor;
+      const rangeAnchor = this.instances[next]?.host.element;
+      if (rangeAnchor) return rangeAnchor;
+    }
+    return this.staticSegments[this.instances.length]?.[0] || null;
+  }
+  reconcileRange(rangeIndex, selection) {
+    const previous = this.instances[rangeIndex];
+    if (selection.kind === "empty") {
+      previous?.host.scope?.cleanup();
+      previous?.host.element.remove();
+      this.instances[rangeIndex] = null;
+      return true;
+    }
+    if (previous?.key === selection.key) {
+      const descriptor2 = selection.branch.create();
+      if (!previous.host.scope?.update(descriptor2)) return false;
+      applyHostConditionalBindings(selection.branch, previous.host);
+      return true;
+    }
+    const descriptor = selection.branch.create();
+    const element = createCompilerHostElement(this.root.ownerDocument, descriptor);
+    const host = mountCompilerHostInstance(
+      this.owner,
+      element,
+      descriptor,
+      selection.branch,
+      this.onFallback
+    );
+    if (!host) return false;
+    previous?.host.scope?.cleanup();
+    if (previous) previous.host.element.replaceWith(element);
+    else this.root.insertBefore(element, this.anchorAfter(rangeIndex));
+    this.instances[rangeIndex] = { key: selection.key, host };
+    return true;
+  }
+  updateStaticScopes(descriptor, selections) {
+    const descriptors = flattenCompilerHostElements(descriptor.children);
+    let descriptorIndex = 0;
+    let scopeIndex = 0;
+    for (let rangeIndex = 0; rangeIndex < this.block.ranges.length; rangeIndex += 1) {
+      const range = this.block.ranges[rangeIndex];
+      for (let index = 0; index < range.before; index += 1) {
+        const scope = this.staticScopes[scopeIndex++];
+        const child = descriptors[descriptorIndex++];
+        if (!scope || !child || !scope.update(child)) return false;
+      }
+      if (selections[rangeIndex].kind === "branch") descriptorIndex += 1;
+    }
+    for (let index = 0; index < this.block.trailing; index += 1) {
+      const scope = this.staticScopes[scopeIndex++];
+      const child = descriptors[descriptorIndex++];
+      if (!scope || !child || !scope.update(child)) return false;
+    }
+    return scopeIndex === this.staticScopes.length && descriptorIndex === descriptors.length;
+  }
+  update(descriptor) {
+    const block = descriptor.block;
+    if (!this.active || block?.kind !== "conditional-ranges" || block.id !== this.block.id || block.ranges.length !== this.block.ranges.length || block.trailing !== this.block.trailing || block.ranges.some((range, index) => range.before !== this.block.ranges[index].before)) {
+      return false;
+    }
+    this.host = descriptor;
+    this.block = block;
+    const selections = this.readSelections();
+    if (!selections || !this.updateStaticScopes(descriptor, selections) || !applyStaticRangeBindings(this.block.bindings, this.staticSegments, this.staticValues)) {
+      return false;
+    }
+    for (let index = this.instances.length - 1; index >= 0; index -= 1) {
+      if (!this.reconcileRange(index, selections[index])) return false;
+    }
+    return true;
+  }
+  cleanup() {
+    if (!this.active) return;
+    this.active = false;
+    this.unsubscribe?.();
+    for (const instance of this.instances) instance?.host.scope?.cleanup();
+    for (const scope of this.staticScopes) scope.cleanup();
+    this.instances.length = 0;
+    this.staticSegments.length = 0;
+    this.staticScopes.length = 0;
+    this.staticValues.length = 0;
+  }
+};
+var CompilerNestedKeyedRanges = class {
+  constructor(owner, root, host, block, onFallback) {
+    this.owner = owner;
+    this.root = root;
+    this.host = host;
+    this.block = block;
+    this.onFallback = onFallback;
+    this.instances = [];
+    this.staticSegments = [];
+    this.staticScopes = [];
+    this.staticValues = [];
+    this.active = true;
+    this.refresh = (afterCommit) => {
+      if (!this.active) {
+        afterCommit?.();
+        return;
+      }
+      const rowsByRange = this.readRanges();
+      if (!rowsByRange || rowsByRange.length !== this.instances.length) {
+        this.onFallback();
+        afterCommit?.();
+        return;
+      }
+      if (!applyStaticRangeBindings(this.block.bindings, this.staticSegments, this.staticValues)) {
+        this.onFallback();
+        afterCommit?.();
+        return;
+      }
+      const activeElement = this.root.ownerDocument.activeElement;
+      const restoreFocus = Boolean(activeElement && this.root.contains(activeElement));
+      for (let index = rowsByRange.length - 1; index >= 0; index -= 1) {
+        if (!this.reconcileRange(index, rowsByRange[index])) {
+          this.onFallback();
+          afterCommit?.();
+          return;
+        }
+      }
+      if (restoreFocus && activeElement?.isConnected && activeElement.ownerDocument.activeElement !== activeElement && "focus" in activeElement) {
+        activeElement.focus({ preventScroll: true });
+      }
+      afterCommit?.();
+    };
+  }
+  readRange(range) {
+    const items = materializeIterable(range.items());
+    const keys = items.map((item, index) => keyedRowIdentity(range.rowKey(item, index)));
+    return new Set(keys).size === keys.length ? { items, keys } : null;
+  }
+  readRanges() {
+    const ranges = [];
+    for (const range of this.block.ranges) {
+      const rows = this.readRange(range);
+      if (!rows) return null;
+      ranges.push(rows);
+    }
+    return ranges;
+  }
+  mountStatic(elements, descriptors) {
+    if (elements.length !== descriptors.length) return false;
+    for (let index = 0; index < elements.length; index += 1) {
+      const scope = mountCompilerHostTree(
+        this.owner,
+        elements[index],
+        descriptors[index],
+        this.onFallback
+      );
+      if (!scope) return false;
+      this.staticScopes.push(scope);
+    }
+    return true;
+  }
+  adopt() {
+    if (!Number.isSafeInteger(this.block.trailing) || this.block.trailing < 0) return false;
+    const rowsByRange = this.readRanges();
+    if (!rowsByRange) return false;
+    const elements = [...this.root.children];
+    const descriptors = flattenCompilerHostElements(materializeCompilerHostChildren(this.host));
+    if (elements.length !== descriptors.length) return false;
+    let cursor = 0;
+    for (let rangeIndex = 0; rangeIndex < this.block.ranges.length; rangeIndex += 1) {
+      const range = this.block.ranges[rangeIndex];
+      const rows = rowsByRange[rangeIndex];
+      if (!Number.isSafeInteger(range.before) || range.before < 0) {
+        this.cleanup();
+        return false;
+      }
+      const staticEnd = cursor + range.before;
+      if (staticEnd > elements.length || !this.mountStatic(elements.slice(cursor, staticEnd), descriptors.slice(cursor, staticEnd))) {
+        this.cleanup();
+        return false;
+      }
+      this.staticSegments.push(elements.slice(cursor, staticEnd));
+      cursor = staticEnd;
+      const instances = /* @__PURE__ */ new Map();
+      for (let index = 0; index < rows.items.length; index += 1) {
+        const element = elements[cursor + index];
+        if (!element) {
+          this.cleanup();
+          return false;
+        }
+        const descriptor = range.create(rows.items[index], index);
+        const scope = mountCompilerHostTree(this.owner, element, descriptor, this.onFallback);
+        if (!scope) {
+          this.cleanup();
+          return false;
+        }
+        instances.set(rows.keys[index], {
+          key: rows.keys[index],
+          element,
+          scope,
+          values: range.bindings.map(() => UNSET_KEYED_ROW_BINDING),
+          item: rows.items[index],
+          index,
+          conditionalValues: /* @__PURE__ */ new Map()
+        });
+        applyKeyedRowBindings(range, instances.get(rows.keys[index]), rows.items[index], index);
+      }
+      this.instances.push(instances);
+      cursor += rows.items.length;
+    }
+    const trailingEnd = cursor + this.block.trailing;
+    if (trailingEnd !== elements.length || !this.mountStatic(elements.slice(cursor), descriptors.slice(cursor))) {
+      this.cleanup();
+      return false;
+    }
+    this.staticSegments.push(elements.slice(cursor));
+    if (!applyStaticRangeBindings(this.block.bindings, this.staticSegments, this.staticValues)) {
+      this.cleanup();
+      return false;
+    }
+    this.unsubscribe = this.owner.subscribe(this.block.id, this.refresh);
+    return true;
+  }
+  anchorAfter(rangeIndex) {
+    for (let next = rangeIndex + 1; next < this.instances.length; next += 1) {
+      const staticAnchor = this.staticSegments[next]?.[0];
+      if (staticAnchor) return staticAnchor;
+      const rowAnchor = this.instances[next].values().next().value?.element;
+      if (rowAnchor) return rowAnchor;
+    }
+    return this.staticSegments[this.instances.length]?.[0] || null;
+  }
+  reconcileRange(rangeIndex, rows) {
+    const range = this.block.ranges[rangeIndex];
+    const previous = this.instances[rangeIndex];
+    const oldIndices = /* @__PURE__ */ new Map();
+    [...previous.keys()].forEach((key, index) => oldIndices.set(key, index));
+    const nextKeys = new Set(rows.keys);
+    for (const [key, instance] of previous) {
+      if (nextKeys.has(key)) continue;
+      instance.scope?.cleanup();
+      instance.element.remove();
+    }
+    const sequence = rows.keys.map((key) => oldIndices.get(key) ?? -1);
+    const stablePositions = longestIncreasingSubsequencePositions(sequence);
+    const nextInstances = [];
+    for (let index = 0; index < rows.items.length; index += 1) {
+      const key = rows.keys[index];
+      const existing = previous.get(key);
+      if (existing) {
+        const descriptor2 = range.create(rows.items[index], index);
+        if (!existing.scope?.update(descriptor2)) return false;
+        applyKeyedRowBindings(range, existing, rows.items[index], index);
+        existing.item = rows.items[index];
+        existing.index = index;
+        nextInstances.push(existing);
+        continue;
+      }
+      const descriptor = range.create(rows.items[index], index);
+      const element = createCompilerHostElement(this.root.ownerDocument, descriptor);
+      const scope = mountCompilerHostTree(this.owner, element, descriptor, this.onFallback);
+      if (!scope) return false;
+      nextInstances.push({
+        key,
+        element,
+        scope,
+        values: readKeyedRowBindingValues(range, rows.items[index], index),
+        item: rows.items[index],
+        index,
+        conditionalValues: /* @__PURE__ */ new Map()
+      });
+    }
+    let anchor = this.anchorAfter(rangeIndex);
+    for (let index = nextInstances.length - 1; index >= 0; index -= 1) {
+      const instance = nextInstances[index];
+      if (sequence[index] < 0 || !stablePositions.has(index) && instance.element.nextSibling !== anchor) {
+        this.root.insertBefore(instance.element, anchor);
+      }
+      anchor = instance.element;
+    }
+    this.instances[rangeIndex] = new Map(nextInstances.map((instance) => [instance.key, instance]));
+    return true;
+  }
+  updateStaticScopes(descriptor, rowsByRange) {
+    const descriptors = flattenCompilerHostElements(materializeCompilerHostChildren(descriptor));
+    let descriptorIndex = 0;
+    let scopeIndex = 0;
+    for (let rangeIndex = 0; rangeIndex < this.block.ranges.length; rangeIndex += 1) {
+      const range = this.block.ranges[rangeIndex];
+      for (let index = 0; index < range.before; index += 1) {
+        const scope = this.staticScopes[scopeIndex++];
+        const child = descriptors[descriptorIndex++];
+        if (!scope || !child || !scope.update(child)) return false;
+      }
+      descriptorIndex += rowsByRange[rangeIndex].items.length;
+    }
+    for (let index = 0; index < this.block.trailing; index += 1) {
+      const scope = this.staticScopes[scopeIndex++];
+      const child = descriptors[descriptorIndex++];
+      if (!scope || !child || !scope.update(child)) return false;
+    }
+    return scopeIndex === this.staticScopes.length && descriptorIndex === descriptors.length;
+  }
+  update(descriptor) {
+    const block = descriptor.block;
+    if (!this.active || block?.kind !== "keyed-ranges" || block.id !== this.block.id || block.ranges.length !== this.block.ranges.length || block.trailing !== this.block.trailing || block.ranges.some((range, index) => range.before !== this.block.ranges[index].before)) {
+      return false;
+    }
+    this.host = descriptor;
+    this.block = block;
+    const rowsByRange = this.readRanges();
+    if (!rowsByRange || rowsByRange.length !== this.instances.length || !this.updateStaticScopes(descriptor, rowsByRange) || !applyStaticRangeBindings(this.block.bindings, this.staticSegments, this.staticValues)) {
+      return false;
+    }
+    for (let index = rowsByRange.length - 1; index >= 0; index -= 1) {
+      if (!this.reconcileRange(index, rowsByRange[index])) return false;
+    }
+    return true;
+  }
+  cleanup() {
+    if (!this.active) return;
+    this.active = false;
+    this.unsubscribe?.();
+    for (const instances of this.instances) {
+      for (const instance of instances.values()) instance.scope?.cleanup();
+    }
+    for (const scope of this.staticScopes) scope.cleanup();
+    this.instances.length = 0;
+    this.staticSegments.length = 0;
+    this.staticScopes.length = 0;
+    this.staticValues.length = 0;
+  }
+};
+var CompilerNestedMixedRanges = class {
+  constructor(owner, root, host, block, onFallback) {
+    this.owner = owner;
+    this.root = root;
+    this.host = host;
+    this.block = block;
+    this.onFallback = onFallback;
+    this.instances = [];
+    this.staticSegments = [];
+    this.staticScopes = [];
+    this.staticValues = [];
+    this.active = true;
+    this.refresh = (afterCommit) => {
+      if (!this.active) {
+        afterCommit?.();
+        return;
+      }
+      const snapshots = this.readSnapshots();
+      if (!snapshots || snapshots.length !== this.instances.length) {
+        this.onFallback();
+        afterCommit?.();
+        return;
+      }
+      if (!applyStaticRangeBindings(this.block.bindings, this.staticSegments, this.staticValues)) {
+        this.onFallback();
+        afterCommit?.();
+        return;
+      }
+      const activeElement = this.root.ownerDocument.activeElement;
+      const restoreFocus = Boolean(activeElement && this.root.contains(activeElement));
+      for (let index = snapshots.length - 1; index >= 0; index -= 1) {
+        if (!this.reconcileRange(index, snapshots[index])) {
+          this.onFallback();
+          afterCommit?.();
+          return;
+        }
+      }
+      if (restoreFocus && activeElement?.isConnected && activeElement.ownerDocument.activeElement !== activeElement && "focus" in activeElement) {
+        activeElement.focus({ preventScroll: true });
+      }
+      afterCommit?.();
+    };
+  }
+  readSnapshots() {
+    const snapshots = [];
+    for (const range of this.block.ranges) {
+      if (range.kind === "conditional") {
+        const selection = hostConditionalSelection(range);
+        if (selection.kind === "fallback") return null;
+        snapshots.push({ kind: "conditional", selection });
+        continue;
+      }
+      const items = materializeIterable(range.items());
+      const keys = items.map((item, index) => keyedRowIdentity(range.rowKey(item, index)));
+      if (new Set(keys).size !== keys.length) return null;
+      snapshots.push({ kind: "keyed", rows: { items, keys } });
+    }
+    return snapshots;
+  }
+  mountStatic(elements, descriptors) {
+    if (elements.length !== descriptors.length) return false;
+    for (let index = 0; index < elements.length; index += 1) {
+      const scope = mountCompilerHostTree(
+        this.owner,
+        elements[index],
+        descriptors[index],
+        this.onFallback
+      );
+      if (!scope) return false;
+      this.staticScopes.push(scope);
+    }
+    return true;
+  }
+  adopt() {
+    if (!Number.isSafeInteger(this.block.trailing) || this.block.trailing < 0) return false;
+    const snapshots = this.readSnapshots();
+    if (!snapshots) return false;
+    const elements = [...this.root.children];
+    const descriptors = flattenCompilerHostElements(this.host.children);
+    if (elements.length !== descriptors.length) return false;
+    let cursor = 0;
+    for (let rangeIndex = 0; rangeIndex < this.block.ranges.length; rangeIndex += 1) {
+      const range = this.block.ranges[rangeIndex];
+      const snapshot = snapshots[rangeIndex];
+      if (!Number.isSafeInteger(range.before) || range.before < 0 || range.kind !== snapshot.kind) {
+        this.cleanup();
+        return false;
+      }
+      const staticEnd = cursor + range.before;
+      if (staticEnd > elements.length || !this.mountStatic(elements.slice(cursor, staticEnd), descriptors.slice(cursor, staticEnd))) {
+        this.cleanup();
+        return false;
+      }
+      this.staticSegments.push(elements.slice(cursor, staticEnd));
+      cursor = staticEnd;
+      if (range.kind === "conditional" && snapshot.kind === "conditional") {
+        if (snapshot.selection.kind === "empty") {
+          this.instances.push({ kind: "conditional", value: null });
+          continue;
+        }
+        const element = elements[cursor];
+        if (!element) {
+          this.cleanup();
+          return false;
+        }
+        const descriptor = snapshot.selection.branch.create();
+        const host = mountCompilerHostInstance(
+          this.owner,
+          element,
+          descriptor,
+          snapshot.selection.branch,
+          this.onFallback
+        );
+        if (!host) {
+          this.cleanup();
+          return false;
+        }
+        this.instances.push({
+          kind: "conditional",
+          value: { key: snapshot.selection.key, host }
+        });
+        cursor += 1;
+        continue;
+      }
+      if (range.kind !== "keyed" || snapshot.kind !== "keyed") {
+        this.cleanup();
+        return false;
+      }
+      const keyedInstances = /* @__PURE__ */ new Map();
+      for (let index = 0; index < snapshot.rows.items.length; index += 1) {
+        const element = elements[cursor + index];
+        if (!element) {
+          this.cleanup();
+          return false;
+        }
+        const descriptor = range.create(snapshot.rows.items[index], index);
+        const scope = mountCompilerHostTree(this.owner, element, descriptor, this.onFallback);
+        if (!scope) {
+          this.cleanup();
+          return false;
+        }
+        const instance = {
+          key: snapshot.rows.keys[index],
+          element,
+          scope,
+          values: range.bindings.map(() => UNSET_KEYED_ROW_BINDING),
+          item: snapshot.rows.items[index],
+          index,
+          conditionalValues: /* @__PURE__ */ new Map()
+        };
+        try {
+          applyKeyedRowBindings(range, instance, snapshot.rows.items[index], index);
+        } catch (error) {
+          scope.cleanup();
+          throw error;
+        }
+        keyedInstances.set(snapshot.rows.keys[index], instance);
+      }
+      this.instances.push({ kind: "keyed", value: keyedInstances });
+      cursor += snapshot.rows.items.length;
+    }
+    const trailingEnd = cursor + this.block.trailing;
+    if (trailingEnd !== elements.length || !this.mountStatic(elements.slice(cursor), descriptors.slice(cursor))) {
+      this.cleanup();
+      return false;
+    }
+    this.staticSegments.push(elements.slice(cursor));
+    if (!applyStaticRangeBindings(this.block.bindings, this.staticSegments, this.staticValues)) {
+      this.cleanup();
+      return false;
+    }
+    this.unsubscribe = this.owner.subscribe(this.block.id, this.refresh);
+    return true;
+  }
+  firstInstanceElement(instance) {
+    if (instance.kind === "conditional") return instance.value?.host.element || null;
+    return instance.value.values().next().value?.element || null;
+  }
+  anchorAfter(rangeIndex) {
+    for (let next = rangeIndex + 1; next < this.instances.length; next += 1) {
+      const staticAnchor = this.staticSegments[next]?.[0];
+      if (staticAnchor) return staticAnchor;
+      const rangeAnchor = this.firstInstanceElement(this.instances[next]);
+      if (rangeAnchor) return rangeAnchor;
+    }
+    return this.staticSegments[this.instances.length]?.[0] || null;
+  }
+  reconcileConditional(rangeIndex, range, selection) {
+    const instance = this.instances[rangeIndex];
+    if (instance.kind !== "conditional") return false;
+    const previous = instance.value;
+    if (selection.kind === "empty") {
+      previous?.host.scope?.cleanup();
+      previous?.host.element.remove();
+      instance.value = null;
+      return true;
+    }
+    if (previous?.key === selection.key) {
+      const descriptor2 = selection.branch.create();
+      if (!previous.host.scope?.update(descriptor2)) return false;
+      applyHostConditionalBindings(selection.branch, previous.host);
+      return true;
+    }
+    const descriptor = selection.branch.create();
+    const element = createCompilerHostElement(this.root.ownerDocument, descriptor);
+    const host = mountCompilerHostInstance(
+      this.owner,
+      element,
+      descriptor,
+      selection.branch,
+      this.onFallback
+    );
+    if (!host) return false;
+    previous?.host.scope?.cleanup();
+    if (previous) previous.host.element.replaceWith(element);
+    else this.root.insertBefore(element, this.anchorAfter(rangeIndex));
+    instance.value = { key: selection.key, host };
+    return true;
+  }
+  reconcileKeyed(rangeIndex, range, rows) {
+    const instance = this.instances[rangeIndex];
+    if (instance.kind !== "keyed") return false;
+    const previous = instance.value;
+    const oldIndices = /* @__PURE__ */ new Map();
+    [...previous.keys()].forEach((key, index) => oldIndices.set(key, index));
+    const nextKeys = new Set(rows.keys);
+    for (const [key, row] of previous) {
+      if (nextKeys.has(key)) continue;
+      row.scope?.cleanup();
+      row.element.remove();
+    }
+    const sequence = rows.keys.map((key) => oldIndices.get(key) ?? -1);
+    const stablePositions = longestIncreasingSubsequencePositions(sequence);
+    const nextInstances = [];
+    for (let index = 0; index < rows.items.length; index += 1) {
+      const key = rows.keys[index];
+      const existing = previous.get(key);
+      if (existing) {
+        const descriptor2 = range.create(rows.items[index], index);
+        if (!existing.scope?.update(descriptor2)) return false;
+        applyKeyedRowBindings(range, existing, rows.items[index], index);
+        existing.item = rows.items[index];
+        existing.index = index;
+        nextInstances.push(existing);
+        continue;
+      }
+      const descriptor = range.create(rows.items[index], index);
+      const element = createCompilerHostElement(this.root.ownerDocument, descriptor);
+      const scope = mountCompilerHostTree(this.owner, element, descriptor, this.onFallback);
+      if (!scope) return false;
+      let values;
+      try {
+        values = readKeyedRowBindingValues(range, rows.items[index], index);
+      } catch (error) {
+        scope.cleanup();
+        throw error;
+      }
+      nextInstances.push({
+        key,
+        element,
+        scope,
+        values,
+        item: rows.items[index],
+        index,
+        conditionalValues: /* @__PURE__ */ new Map()
+      });
+    }
+    let anchor = this.anchorAfter(rangeIndex);
+    for (let index = nextInstances.length - 1; index >= 0; index -= 1) {
+      const row = nextInstances[index];
+      if (sequence[index] < 0 || !stablePositions.has(index) && row.element.nextSibling !== anchor) {
+        this.root.insertBefore(row.element, anchor);
+      }
+      anchor = row.element;
+    }
+    instance.value = new Map(nextInstances.map((row) => [row.key, row]));
+    return true;
+  }
+  reconcileRange(rangeIndex, snapshot) {
+    const range = this.block.ranges[rangeIndex];
+    if (range.kind !== snapshot.kind) return false;
+    return range.kind === "conditional" && snapshot.kind === "conditional" ? this.reconcileConditional(rangeIndex, range, snapshot.selection) : range.kind === "keyed" && snapshot.kind === "keyed" ? this.reconcileKeyed(rangeIndex, range, snapshot.rows) : false;
+  }
+  updateStaticScopes(descriptor, snapshots) {
+    const descriptors = flattenCompilerHostElements(descriptor.children);
+    let descriptorIndex = 0;
+    let scopeIndex = 0;
+    for (let rangeIndex = 0; rangeIndex < this.block.ranges.length; rangeIndex += 1) {
+      const range = this.block.ranges[rangeIndex];
+      for (let index = 0; index < range.before; index += 1) {
+        const scope = this.staticScopes[scopeIndex++];
+        const child = descriptors[descriptorIndex++];
+        if (!scope || !child || !scope.update(child)) return false;
+      }
+      const snapshot = snapshots[rangeIndex];
+      if (snapshot.kind === "conditional") {
+        if (snapshot.selection.kind === "branch") descriptorIndex += 1;
+      } else {
+        descriptorIndex += snapshot.rows.items.length;
+      }
+    }
+    for (let index = 0; index < this.block.trailing; index += 1) {
+      const scope = this.staticScopes[scopeIndex++];
+      const child = descriptors[descriptorIndex++];
+      if (!scope || !child || !scope.update(child)) return false;
+    }
+    return scopeIndex === this.staticScopes.length && descriptorIndex === descriptors.length;
+  }
+  update(descriptor) {
+    const block = descriptor.block;
+    if (!this.active || block?.kind !== "mixed-ranges" || block.id !== this.block.id || block.ranges.length !== this.block.ranges.length || block.trailing !== this.block.trailing || block.ranges.some(
+      (range, index) => range.kind !== this.block.ranges[index].kind || range.before !== this.block.ranges[index].before
+    )) {
+      return false;
+    }
+    this.host = descriptor;
+    this.block = block;
+    const snapshots = this.readSnapshots();
+    if (!snapshots || snapshots.length !== this.instances.length || !this.updateStaticScopes(descriptor, snapshots) || !applyStaticRangeBindings(this.block.bindings, this.staticSegments, this.staticValues)) {
+      return false;
+    }
+    for (let index = snapshots.length - 1; index >= 0; index -= 1) {
+      if (!this.reconcileRange(index, snapshots[index])) return false;
+    }
+    return true;
+  }
+  cleanup() {
+    if (!this.active) return;
+    this.active = false;
+    this.unsubscribe?.();
+    for (const instance of this.instances) {
+      if (instance.kind === "conditional") {
+        instance.value?.host.scope?.cleanup();
+      } else {
+        for (const row of instance.value.values()) row.scope?.cleanup();
+      }
+    }
+    for (const scope of this.staticScopes) scope.cleanup();
+    this.instances.length = 0;
+    this.staticSegments.length = 0;
+    this.staticScopes.length = 0;
+    this.staticValues.length = 0;
+  }
+};
 function createHostConditionalBlockComponent(owner) {
   class FarmHostConditionalBlock extends React.Component {
     constructor() {
@@ -386,8 +1402,13 @@ function createHostConditionalBlockComponent(owner) {
       this.fallbackVersion = 0;
       this.propSyncQueued = false;
       this.currentProps = this.props;
+      this.fallbackUnsubscribers = [];
       this.activeBranch = null;
       this.instance = null;
+      this.requestNestedFallback = () => {
+        this.instance?.scope?.cleanup();
+        this.activateFallback();
+      };
       this.captureRoot = (root) => {
         this.root = root;
       };
@@ -395,6 +1416,26 @@ function createHostConditionalBlockComponent(owner) {
         this.reconcile(afterCommit);
       };
     }
+    subscribeFallbackDescendants() {
+      for (const unsubscribe of this.fallbackUnsubscribers) unsubscribe();
+      this.fallbackUnsubscribers = [];
+      const ids = /* @__PURE__ */ new Set();
+      if (this.currentProps.truthy) {
+        collectCompilerHostBlockIds(this.currentProps.truthy.create(), ids);
+      }
+      if (this.currentProps.falsy) {
+        collectCompilerHostBlockIds(this.currentProps.falsy.create(), ids);
+      }
+      ids.delete(this.currentProps.id);
+      for (const id of ids) {
+        this.fallbackUnsubscribers.push(
+          owner.subscribe(id, (afterCommit) => {
+            this.fallbackVersion += 1;
+            this.forceUpdate(afterCommit);
+          })
+        );
+      }
+    }
     adopt() {
       if (!this.root) return false;
       const selection = hostConditionalSelection(this.currentProps);
@@ -411,11 +1452,16 @@ function createHostConditionalBlockComponent(owner) {
       const descriptor = selection.branch.create();
       const element = this.root.firstElementChild;
       if (!matchesCompilerHostElement(element, descriptor)) return false;
-      this.activeBranch = selection.key;
-      this.instance = {
+      const instance = mountCompilerHostInstance(
+        owner,
         element,
-        values: readHostConditionalBindingValues(selection.branch)
-      };
+        descriptor,
+        selection.branch,
+        this.requestNestedFallback
+      );
+      if (!instance) return false;
+      this.activeBranch = selection.key;
+      this.instance = instance;
       return true;
     }
     activateFallback(afterCommit) {
@@ -424,6 +1470,10 @@ function createHostConditionalBlockComponent(owner) {
         return;
       }
       this.fallbackRequested = true;
+      this.instance?.scope?.cleanup();
+      this.instance = null;
+      this.activeBranch = null;
+      this.subscribeFallbackDescendants();
       this.fallbackVersion += 1;
       this.setState({ fallback: true }, afterCommit);
     }
@@ -442,6 +1492,7 @@ function createHostConditionalBlockComponent(owner) {
         return;
       }
       if (selection.kind === "empty") {
+        this.instance?.scope?.cleanup();
         if (this.instance) this.instance.element.remove();
         this.activeBranch = null;
         this.instance = null;
@@ -449,17 +1500,40 @@ function createHostConditionalBlockComponent(owner) {
         return;
       }
       if (this.activeBranch === selection.key && this.instance) {
+        const descriptor2 = selection.branch.create();
+        const scope = mountCompilerHostTree(
+          owner,
+          this.instance.element,
+          descriptor2,
+          this.requestNestedFallback
+        );
+        if (!scope) {
+          this.activateFallback(afterCommit);
+          return;
+        }
+        this.instance.scope?.cleanup();
+        this.instance.scope = scope;
         applyHostConditionalBindings(selection.branch, this.instance);
         afterCommit?.();
         return;
       }
-      const element = createCompilerHostElement(this.root.ownerDocument, selection.branch.create());
+      const descriptor = selection.branch.create();
+      const element = createCompilerHostElement(this.root.ownerDocument, descriptor);
+      const instance = mountCompilerHostInstance(
+        owner,
+        element,
+        descriptor,
+        selection.branch,
+        this.requestNestedFallback
+      );
+      if (!instance) {
+        this.activateFallback(afterCommit);
+        return;
+      }
+      this.instance?.scope?.cleanup();
       this.root.replaceChildren(element);
       this.activeBranch = selection.key;
-      this.instance = {
-        element,
-        values: readHostConditionalBindingValues(selection.branch)
-      };
+      this.instance = instance;
       afterCommit?.();
     }
     schedulePropSync() {
@@ -484,6 +1558,9 @@ function createHostConditionalBlockComponent(owner) {
     componentWillUnmount() {
       this.mounted = false;
       this.unsubscribe?.();
+      for (const unsubscribe of this.fallbackUnsubscribers) unsubscribe();
+      this.fallbackUnsubscribers = [];
+      this.instance?.scope?.cleanup();
       this.root = null;
       this.activeBranch = null;
       this.instance = null;
@@ -504,6 +1581,279 @@ function createHostConditionalBlockComponent(owner) {
   FarmHostConditionalBlock.displayName = "FarmCompiledHostConditional";
   return FarmHostConditionalBlock;
 }
+function createConditionalRangesBlockComponent(owner) {
+  class FarmConditionalRangesBlock extends React.Component {
+    constructor() {
+      super(...arguments);
+      this.state = { fallback: false };
+      this.root = null;
+      this.mounted = false;
+      this.fallbackRequested = false;
+      this.fallbackVersion = 0;
+      this.propFallbackQueued = false;
+      this.currentProps = this.props;
+      this.fallbackUnsubscribers = [];
+      this.rangeInstances = [];
+      this.staticSegments = [];
+      this.staticValues = [];
+      this.requestNestedFallback = () => {
+        for (const instance of this.rangeInstances) instance?.host.scope?.cleanup();
+        this.activateFallback();
+      };
+      this.captureRoot = (root) => {
+        this.root = root;
+        this.currentProps.rootRef?.(root);
+      };
+      this.refresh = (afterCommit) => {
+        this.reconcile(afterCommit);
+      };
+    }
+    subscribeFallbackDescendants() {
+      for (const unsubscribe of this.fallbackUnsubscribers) unsubscribe();
+      this.fallbackUnsubscribers = [];
+      const ids = /* @__PURE__ */ new Set();
+      for (const range of this.currentProps.ranges) {
+        if (range.truthy) collectCompilerHostBlockIds(range.truthy.create(), ids);
+        if (range.falsy) collectCompilerHostBlockIds(range.falsy.create(), ids);
+      }
+      ids.delete(this.currentProps.id);
+      for (const id of ids) {
+        this.fallbackUnsubscribers.push(
+          owner.subscribe(id, (afterCommit) => {
+            this.fallbackVersion += 1;
+            this.forceUpdate(afterCommit);
+          })
+        );
+      }
+    }
+    readSelections(props) {
+      const selections = [];
+      for (const range of props.ranges) {
+        const selection = hostConditionalSelection(range);
+        if (selection.kind === "fallback") return null;
+        selections.push(selection);
+      }
+      return selections;
+    }
+    adopt(props = this.currentProps) {
+      if (!this.root || !Number.isSafeInteger(props.trailing) || props.trailing < 0) return false;
+      const selections = this.readSelections(props);
+      if (!selections) return false;
+      const elements = [...this.root.children];
+      const staticSegments = [];
+      const instances = [];
+      const cleanupInstances = () => {
+        for (const instance of instances) instance?.host.scope?.cleanup();
+      };
+      let cursor = 0;
+      for (let rangeIndex = 0; rangeIndex < props.ranges.length; rangeIndex += 1) {
+        const range = props.ranges[rangeIndex];
+        if (!Number.isSafeInteger(range.before) || range.before < 0) {
+          cleanupInstances();
+          return false;
+        }
+        const staticEnd = cursor + range.before;
+        if (staticEnd > elements.length) {
+          cleanupInstances();
+          return false;
+        }
+        staticSegments.push(elements.slice(cursor, staticEnd));
+        cursor = staticEnd;
+        const selection = selections[rangeIndex];
+        if (selection.kind === "empty") {
+          instances.push(null);
+          continue;
+        }
+        const element = elements[cursor];
+        if (!element) {
+          cleanupInstances();
+          return false;
+        }
+        const descriptor = selection.branch.create();
+        if (!matchesCompilerHostElement(element, descriptor)) {
+          cleanupInstances();
+          return false;
+        }
+        const host = mountCompilerHostInstance(
+          owner,
+          element,
+          descriptor,
+          selection.branch,
+          this.requestNestedFallback
+        );
+        if (!host) {
+          cleanupInstances();
+          return false;
+        }
+        instances.push({
+          key: selection.key,
+          host
+        });
+        cursor += 1;
+      }
+      if (cursor + props.trailing !== elements.length) {
+        cleanupInstances();
+        return false;
+      }
+      staticSegments.push(elements.slice(cursor));
+      this.staticSegments = staticSegments;
+      this.rangeInstances = instances;
+      if (!applyStaticRangeBindings(props.bindings, this.staticSegments, this.staticValues)) {
+        cleanupInstances();
+        this.rangeInstances = [];
+        this.staticSegments = [];
+        return false;
+      }
+      return true;
+    }
+    anchorAfter(rangeIndex) {
+      for (let next = rangeIndex + 1; next < this.rangeInstances.length; next += 1) {
+        const staticAnchor = this.staticSegments[next]?.[0];
+        if (staticAnchor) return staticAnchor;
+        const rangeAnchor = this.rangeInstances[next]?.host.element;
+        if (rangeAnchor) return rangeAnchor;
+      }
+      return this.staticSegments[this.rangeInstances.length]?.[0] || null;
+    }
+    reconcileRange(rangeIndex, selection) {
+      if (!this.root) return false;
+      const previous = this.rangeInstances[rangeIndex];
+      if (selection.kind === "empty") {
+        previous?.host.scope?.cleanup();
+        previous?.host.element.remove();
+        this.rangeInstances[rangeIndex] = null;
+        return true;
+      }
+      if (previous?.key === selection.key) {
+        const descriptor2 = selection.branch.create();
+        const scope = mountCompilerHostTree(
+          owner,
+          previous.host.element,
+          descriptor2,
+          this.requestNestedFallback
+        );
+        if (!scope) {
+          this.requestNestedFallback();
+          return false;
+        }
+        previous.host.scope?.cleanup();
+        previous.host.scope = scope;
+        applyHostConditionalBindings(selection.branch, previous.host);
+        return true;
+      }
+      const descriptor = selection.branch.create();
+      const element = createCompilerHostElement(this.root.ownerDocument, descriptor);
+      const host = mountCompilerHostInstance(
+        owner,
+        element,
+        descriptor,
+        selection.branch,
+        this.requestNestedFallback
+      );
+      if (!host) {
+        this.requestNestedFallback();
+        return false;
+      }
+      previous?.host.scope?.cleanup();
+      if (previous) previous.host.element.replaceWith(element);
+      else this.root.insertBefore(element, this.anchorAfter(rangeIndex));
+      this.rangeInstances[rangeIndex] = {
+        key: selection.key,
+        host
+      };
+      return true;
+    }
+    reconcile(afterCommit) {
+      if (!this.mounted || !this.root) {
+        afterCommit?.();
+        return;
+      }
+      if (this.state.fallback) {
+        this.fallbackVersion += 1;
+        this.forceUpdate(afterCommit);
+        return;
+      }
+      if (this.currentProps.ranges.length !== this.rangeInstances.length) {
+        this.activateFallback(afterCommit);
+        return;
+      }
+      const selections = this.readSelections(this.currentProps);
+      if (!selections) {
+        this.activateFallback(afterCommit);
+        return;
+      }
+      if (!applyStaticRangeBindings(
+        this.currentProps.bindings,
+        this.staticSegments,
+        this.staticValues
+      )) {
+        this.activateFallback(afterCommit);
+        return;
+      }
+      for (let rangeIndex = this.rangeInstances.length - 1; rangeIndex >= 0; rangeIndex -= 1) {
+        if (!this.reconcileRange(rangeIndex, selections[rangeIndex])) {
+          afterCommit?.();
+          return;
+        }
+      }
+      afterCommit?.();
+    }
+    activateFallback(afterCommit) {
+      if (!this.mounted || this.state.fallback || this.fallbackRequested) {
+        afterCommit?.();
+        return;
+      }
+      this.fallbackRequested = true;
+      for (const instance of this.rangeInstances) instance?.host.scope?.cleanup();
+      this.subscribeFallbackDescendants();
+      this.setState({ fallback: true }, afterCommit);
+    }
+    schedulePropFallback() {
+      if (this.propFallbackQueued) return;
+      this.propFallbackQueued = true;
+      queueMicrotask(() => {
+        this.propFallbackQueued = false;
+        if (this.mounted && !this.state.fallback) this.activateFallback();
+      });
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+      this.currentProps = nextProps;
+      if (nextState.fallback || this.state.fallback) return true;
+      this.schedulePropFallback();
+      return false;
+    }
+    componentDidMount() {
+      this.mounted = true;
+      this.unsubscribe = owner.subscribe(this.props.id, this.refresh);
+      if (!this.adopt()) this.activateFallback();
+    }
+    componentWillUnmount() {
+      this.mounted = false;
+      this.unsubscribe?.();
+      for (const unsubscribe of this.fallbackUnsubscribers) unsubscribe();
+      this.fallbackUnsubscribers = [];
+      for (const instance of this.rangeInstances) instance?.host.scope?.cleanup();
+      this.root = null;
+      this.rangeInstances = [];
+      this.staticSegments = [];
+      this.staticValues.length = 0;
+    }
+    render() {
+      const container = this.currentProps.render();
+      if (!React.isValidElement(container) || typeof container.type !== "string") {
+        throw new TypeError(
+          `Compiled conditional ranges ${this.currentProps.id} must own one host container.`
+        );
+      }
+      return React.cloneElement(container, {
+        key: this.state.fallback ? `react-${this.fallbackVersion}` : "compiled",
+        ref: this.captureRoot
+      });
+    }
+  }
+  FarmConditionalRangesBlock.displayName = "FarmCompiledConditionalRanges";
+  return FarmConditionalRangesBlock;
+}
 function longestIncreasingSubsequencePositions(sequence) {
   const tails = [];
   const previous = Array.from({ length: sequence.length }, () => -1);
@@ -528,6 +1878,10 @@ function longestIncreasingSubsequencePositions(sequence) {
   return positions;
 }
 function createKeyedRowsBlockComponent(owner) {
+  const rowHostScopeOwner = {
+    subscribe: () => () => {
+    }
+  };
   class FarmKeyedRowConditional extends React.Component {
     constructor() {
       super(...arguments);
@@ -584,16 +1938,23 @@ function createKeyedRowsBlockComponent(owner) {
       this.renderVersion = 0;
       this.eventHandlers = /* @__PURE__ */ new Map();
       this.conditionalListeners = /* @__PURE__ */ new Map();
+      this.instancesByElement = /* @__PURE__ */ new WeakMap();
       this.conditionalOwner = {
         subscribe: (key, id, refresh) => this.subscribeToRowConditional(key, id, refresh)
       };
       this.captureRoot = (root) => {
         this.root = root;
       };
+      this.requestHostScopeFallback = () => {
+        this.activateFallback();
+      };
       this.rowEvent = (item, index, eventId) => {
         if (this.state.fallback) {
           return (event) => this.currentProps.events?.[eventId]?.invoke(item, index, event);
         }
+        if (this.usesDelegatedEvents()) {
+          return void 0;
+        }
         const key = keyedRowIdentity(this.currentProps.rowKey(item, index));
         let handlers = this.eventHandlers.get(key);
         if (!handlers) {
@@ -611,6 +1972,26 @@ function createKeyedRowsBlockComponent(owner) {
         handlers.set(eventId, handler);
         return handler;
       };
+      this.dispatchDelegatedEvent = (name, event) => {
+        const instance = this.eventRowInstance(event);
+        const eventTarget = event.target;
+        if (!instance || !eventTarget) return;
+        const capture = name.endsWith("Capture");
+        const matches = (this.currentProps.events || []).filter((descriptor) => descriptor.name === name && descriptor.path !== void 0).map((descriptor) => ({
+          descriptor,
+          target: findCompilerHostTarget(instance.element, descriptor.path || [])
+        })).filter(
+          (match) => Boolean(
+            match.target && (match.target === eventTarget || match.target.contains(eventTarget))
+          )
+        ).sort(
+          (left, right) => capture ? (left.descriptor.path?.length || 0) - (right.descriptor.path?.length || 0) : (right.descriptor.path?.length || 0) - (left.descriptor.path?.length || 0)
+        );
+        for (const match of matches) {
+          this.invokeDelegatedEvent(match.descriptor, instance, event, match.target);
+          if (event.isPropagationStopped()) break;
+        }
+      };
       this.rowConditional = (item, index, conditionalId, render) => {
         if (this.state.fallback) return render(item, index);
         const key = keyedRowIdentity(this.currentProps.rowKey(item, index));
@@ -625,17 +2006,65 @@ function createKeyedRowsBlockComponent(owner) {
           render
         });
       };
-      this.refresh = (afterCommit) => {
+      this.refresh = (afterCommit, dirtyState) => {
+        if (dirtyState && this.refreshDirtyBindings(dirtyState, afterCommit)) return;
         this.reconcile(afterCommit);
       };
     }
     readRows(props) {
-      const source = props.items();
-      const items = source ? Array.from(source) : [];
+      const items = materializeIterable(props.items());
       const keys = items.map((item, index) => keyedRowIdentity(props.rowKey(item, index)));
       if (new Set(keys).size !== keys.length) return null;
       return { items, keys };
     }
+    usesDelegatedEvents(props = this.currentProps) {
+      return Boolean(
+        props.delegateEvents && props.events?.length && props.events.every((event) => event.path !== void 0)
+      );
+    }
+    rebuildElementIndex(instances) {
+      this.instancesByElement = /* @__PURE__ */ new WeakMap();
+      for (const instance of instances.values()) {
+        this.instancesByElement.set(instance.element, instance);
+      }
+    }
+    eventRowInstance(event) {
+      if (!this.root) return void 0;
+      const target = event.target;
+      if (!target) return void 0;
+      let element = target.nodeType === 1 ? target : target.parentElement;
+      while (element && element.parentElement !== this.root) element = element.parentElement;
+      return element?.parentElement === this.root ? this.instancesByElement.get(element) : void 0;
+    }
+    invokeDelegatedEvent(descriptor, instance, event, currentTarget) {
+      const ownCurrentTarget = Object.getOwnPropertyDescriptor(event, "currentTarget");
+      try {
+        Object.defineProperty(event, "currentTarget", {
+          configurable: true,
+          value: currentTarget
+        });
+        descriptor.invoke(instance.item, instance.index, event);
+      } finally {
+        if (ownCurrentTarget) Object.defineProperty(event, "currentTarget", ownCurrentTarget);
+        else Reflect.deleteProperty(event, "currentTarget");
+      }
+    }
+    delegatedContainerProps(container) {
+      if (this.state.fallback || !this.usesDelegatedEvents()) return {};
+      const props = container.props;
+      return Object.fromEntries(
+        [...new Set((this.currentProps.events || []).map((event) => event.name))].map((name) => {
+          const existing = props[name];
+          const capture = name.endsWith("Capture");
+          const handler = (event) => {
+            if (capture) existing?.(event);
+            if (!event.isPropagationStopped()) this.dispatchDelegatedEvent(name, event);
+            if (!capture && !event.isPropagationStopped()) existing?.(event);
+          };
+          return [name, handler];
+        })
+      );
+    }
     subscribeToRowConditional(key, id, refresh) {
       let listeners = this.conditionalListeners.get(key);
       if (!listeners) {
@@ -651,7 +2080,21 @@ function createKeyedRowsBlockComponent(owner) {
       };
     }
     hasReactOwnedRows(props = this.currentProps) {
-      return Boolean(props.events?.length || props.conditionals?.length);
+      return Boolean(
+        props.conditionals?.length || props.events?.length && !this.usesDelegatedEvents(props)
+      );
+    }
+    cleanupHostScopes(instances = this.instances) {
+      for (const instance of instances.values()) instance.scope?.cleanup();
+    }
+    mountRowHostScope(element, descriptor, props = this.currentProps) {
+      if (!props.hostBlocks) return void 0;
+      return mountCompilerHostTree(
+        rowHostScopeOwner,
+        element,
+        descriptor,
+        this.requestHostScopeFallback
+      );
     }
     pruneEventHandlers(keys) {
       const active = new Set(keys);
@@ -675,16 +2118,20 @@ function createKeyedRowsBlockComponent(owner) {
       );
       const instances = /* @__PURE__ */ new Map();
       for (let index = 0; index < rows.items.length; index += 1) {
-        if (this.hasReactOwnedRows() && !matchesCompilerHostElement(
-          elements[index],
-          this.currentProps.create(rows.items[index], index),
-          opaqueConditionalPaths
-        )) {
+        const descriptor = this.currentProps.create(rows.items[index], index);
+        if (this.hasReactOwnedRows() && !matchesCompilerHostElement(elements[index], descriptor, opaqueConditionalPaths)) {
+          this.cleanupHostScopes(instances);
+          return false;
+        }
+        const scope = this.mountRowHostScope(elements[index], descriptor);
+        if (this.currentProps.hostBlocks && !scope) {
+          this.cleanupHostScopes(instances);
           return false;
         }
         const instance = {
           key: rows.keys[index],
           element: elements[index],
+          scope: scope || void 0,
           values: this.hasReactOwnedRows() ? this.currentProps.bindings.map(() => UNSET_KEYED_ROW_BINDING) : readKeyedRowBindingValues(this.currentProps, rows.items[index], index),
           item: rows.items[index],
           index,
@@ -699,7 +2146,9 @@ function createKeyedRowsBlockComponent(owner) {
         }
         instances.set(rows.keys[index], instance);
       }
+      this.cleanupHostScopes();
       this.instances = instances;
+      this.rebuildElementIndex(instances);
       this.pruneEventHandlers(rows.keys);
       this.pruneConditionalListeners(rows.keys);
       return true;
@@ -718,6 +2167,7 @@ function createKeyedRowsBlockComponent(owner) {
       }
       this.fallbackRequested = true;
       this.fallbackKeysWereUnsafe = this.hasUnsafeFallbackKeys();
+      this.cleanupHostScopes();
       this.fallbackVersion += 1;
       this.setState({ fallback: true }, afterCommit);
     }
@@ -752,6 +2202,116 @@ function createKeyedRowsBlockComponent(owner) {
         }
       });
     }
+    refreshDirtyBindings(dirtyState, afterCommit) {
+      if (!this.mounted || !this.root || this.state.fallback || this.hasReactOwnedRows() || this.currentProps.hostBlocks || !this.currentProps.structureDependencies || this.currentProps.structureDependencies.some((dependency) => dirtyState.has(dependency)) || this.currentProps.bindings.some((binding) => binding.dependencies === void 0)) {
+        return false;
+      }
+      const affectedBindingIndices = [];
+      for (let bindingIndex = 0; bindingIndex < this.currentProps.bindings.length; bindingIndex += 1) {
+        const dependencies = this.currentProps.bindings[bindingIndex].dependencies || [];
+        if (dependencies.some((dependency) => dirtyState.has(dependency))) {
+          affectedBindingIndices.push(bindingIndex);
+        }
+      }
+      for (const instance of this.instances.values()) {
+        for (const bindingIndex of affectedBindingIndices) {
+          applyKeyedRowBinding(
+            this.currentProps,
+            instance,
+            instance.item,
+            instance.index,
+            bindingIndex
+          );
+        }
+      }
+      afterCommit?.();
+      return true;
+    }
+    reconcileStableRows(rows, afterCommit) {
+      if (rows.keys.length !== this.instances.size) return false;
+      let index = 0;
+      for (const key of this.instances.keys()) {
+        if (rows.keys[index] !== key) return false;
+        index += 1;
+      }
+      const conditionalChanges = [];
+      for (index = 0; index < rows.items.length; index += 1) {
+        const key = rows.keys[index];
+        const existing = this.instances.get(key);
+        if (!existing) return false;
+        if (this.currentProps.hostBlocks) {
+          const descriptor = this.currentProps.create(rows.items[index], index);
+          if (!existing.scope?.update(descriptor)) {
+            this.activateFallback(afterCommit);
+            return true;
+          }
+        }
+        applyKeyedRowBindings(this.currentProps, existing, rows.items[index], index);
+        const conditionalValues = readKeyedRowConditionalValues(
+          this.currentProps,
+          rows.items[index],
+          index
+        );
+        for (const [id, values] of conditionalValues) {
+          if (keyedRowConditionalChanged(existing.conditionalValues.get(id), values)) {
+            conditionalChanges.push({ key, id, item: rows.items[index], index });
+          }
+        }
+        existing.conditionalValues = conditionalValues;
+        existing.item = rows.items[index];
+        existing.index = index;
+      }
+      this.notifyConditionalChanges(conditionalChanges, afterCommit);
+      return true;
+    }
+    reconcileSingleRemoval(rows, afterCommit) {
+      if (this.hasReactOwnedRows() || rows.keys.length + 1 !== this.instances.size) return false;
+      const previousKeys = [...this.instances.keys()];
+      let removedIndex = 0;
+      while (removedIndex < rows.keys.length && previousKeys[removedIndex] === rows.keys[removedIndex]) {
+        removedIndex += 1;
+      }
+      for (let index = removedIndex; index < rows.keys.length; index += 1) {
+        if (previousKeys[index + 1] !== rows.keys[index]) return false;
+      }
+      const removedKey = previousKeys[removedIndex];
+      const removed = this.instances.get(removedKey);
+      if (!removed) return false;
+      const conditionalChanges = [];
+      for (let index = 0; index < rows.items.length; index += 1) {
+        const key = rows.keys[index];
+        const existing = this.instances.get(key);
+        if (!existing) return false;
+        if (this.currentProps.hostBlocks) {
+          const descriptor = this.currentProps.create(rows.items[index], index);
+          if (!existing.scope?.update(descriptor)) {
+            this.activateFallback(afterCommit);
+            return true;
+          }
+        }
+        applyKeyedRowBindings(this.currentProps, existing, rows.items[index], index);
+        const conditionalValues = readKeyedRowConditionalValues(
+          this.currentProps,
+          rows.items[index],
+          index
+        );
+        for (const [id, values] of conditionalValues) {
+          if (keyedRowConditionalChanged(existing.conditionalValues.get(id), values)) {
+            conditionalChanges.push({ key, id, item: rows.items[index], index });
+          }
+        }
+        existing.conditionalValues = conditionalValues;
+        existing.item = rows.items[index];
+        existing.index = index;
+      }
+      removed.scope?.cleanup();
+      removed.element.remove();
+      this.instances.delete(removedKey);
+      this.eventHandlers.delete(removedKey);
+      this.conditionalListeners.delete(removedKey);
+      this.notifyConditionalChanges(conditionalChanges, afterCommit);
+      return true;
+    }
     reconcile(afterCommit) {
       if (!this.mounted || !this.root) {
         afterCommit?.();
@@ -771,27 +2331,54 @@ function createKeyedRowsBlockComponent(owner) {
         this.activateFallback(afterCommit);
         return;
       }
-      const previousKeys = [...this.instances.keys()];
-      if (this.hasReactOwnedRows() && (rows.keys.length !== previousKeys.length || rows.keys.some((key, index) => key !== previousKeys[index]))) {
-        this.synchronizeReactOwnedRows(afterCommit);
+      if (this.hasReactOwnedRows()) {
+        const previousKeys = [...this.instances.keys()];
+        if (rows.keys.length !== previousKeys.length || rows.keys.some((key, index) => key !== previousKeys[index])) {
+          this.synchronizeReactOwnedRows(afterCommit);
+          return;
+        }
+      }
+      if (rows.items.length === 0) {
+        this.cleanupHostScopes();
+        this.root.replaceChildren();
+        this.instances = /* @__PURE__ */ new Map();
+        this.instancesByElement = /* @__PURE__ */ new WeakMap();
+        this.eventHandlers.clear();
+        this.conditionalListeners.clear();
+        afterCommit?.();
         return;
       }
-      const oldIndices = /* @__PURE__ */ new Map();
+      if (this.reconcileStableRows(rows, afterCommit)) return;
+      if (this.reconcileSingleRemoval(rows, afterCommit)) return;
       const activeElement = this.root.ownerDocument.activeElement;
       const restoreFocus = Boolean(activeElement && this.root.contains(activeElement));
-      [...this.instances].forEach(([key], index) => oldIndices.set(key, index));
       const nextKeys = new Set(rows.keys);
+      const hasSurvivingRows = rows.keys.some((key) => this.instances.has(key));
+      const oldIndices = /* @__PURE__ */ new Map();
+      if (hasSurvivingRows) {
+        [...this.instances].forEach(([key], index) => oldIndices.set(key, index));
+      }
       for (const [key, instance] of this.instances) {
-        if (!nextKeys.has(key)) instance.element.remove();
+        if (!nextKeys.has(key)) {
+          instance.scope?.cleanup();
+          if (hasSurvivingRows) instance.element.remove();
+        }
       }
-      const sequence = rows.keys.map((key) => oldIndices.get(key) ?? -1);
-      const stablePositions = longestIncreasingSubsequencePositions(sequence);
+      const sequence = hasSurvivingRows ? rows.keys.map((key) => oldIndices.get(key) ?? -1) : rows.keys.map(() => -1);
+      const stablePositions = hasSurvivingRows ? longestIncreasingSubsequencePositions(sequence) : /* @__PURE__ */ new Set();
       const nextInstances = [];
       const conditionalChanges = [];
       for (let index = 0; index < rows.items.length; index += 1) {
         const key = rows.keys[index];
         const existing = this.instances.get(key);
         if (existing) {
+          if (this.currentProps.hostBlocks) {
+            const descriptor2 = this.currentProps.create(rows.items[index], index);
+            if (!existing.scope?.update(descriptor2)) {
+              this.activateFallback(afterCommit);
+              return;
+            }
+          }
           applyKeyedRowBindings(this.currentProps, existing, rows.items[index], index);
           const conditionalValues = readKeyedRowConditionalValues(
             this.currentProps,
@@ -809,13 +2396,20 @@ function createKeyedRowsBlockComponent(owner) {
           nextInstances.push(existing);
           continue;
         }
-        const element = createCompilerHostElement(
-          this.root.ownerDocument,
-          this.currentProps.create(rows.items[index], index)
-        );
+        const descriptor = this.currentProps.create(rows.items[index], index);
+        const element = createCompilerHostElement(this.root.ownerDocument, descriptor);
+        const scope = this.mountRowHostScope(element, descriptor);
+        if (this.currentProps.hostBlocks && !scope) {
+          for (const instance of nextInstances) {
+            if (!this.instances.has(instance.key)) instance.scope?.cleanup();
+          }
+          this.activateFallback(afterCommit);
+          return;
+        }
         nextInstances.push({
           key,
           element,
+          scope: scope || void 0,
           values: readKeyedRowBindingValues(this.currentProps, rows.items[index], index),
           item: rows.items[index],
           index,
@@ -826,17 +2420,34 @@ function createKeyedRowsBlockComponent(owner) {
           )
         });
       }
-      let anchor = null;
-      for (let index = nextInstances.length - 1; index >= 0; index -= 1) {
-        const instance = nextInstances[index];
-        if (sequence[index] < 0) {
-          this.root.insertBefore(instance.element, anchor);
-        } else if (!stablePositions.has(index) && instance.element.nextSibling !== anchor) {
-          this.root.insertBefore(instance.element, anchor);
+      if (!hasSurvivingRows) {
+        const fragment = this.root.ownerDocument.createDocumentFragment();
+        for (const instance of nextInstances) fragment.append(instance.element);
+        this.root.replaceChildren(fragment);
+      } else {
+        let anchor = null;
+        for (let index = nextInstances.length - 1; index >= 0; index -= 1) {
+          const instance = nextInstances[index];
+          if (sequence[index] < 0) {
+            let start = index;
+            while (start > 0 && sequence[start - 1] < 0) start -= 1;
+            const fragment = this.root.ownerDocument.createDocumentFragment();
+            for (let itemIndex = start; itemIndex <= index; itemIndex += 1) {
+              fragment.append(nextInstances[itemIndex].element);
+            }
+            this.root.insertBefore(fragment, anchor);
+            anchor = nextInstances[start].element;
+            index = start;
+          } else {
+            if (!stablePositions.has(index) && instance.element.nextSibling !== anchor) {
+              this.root.insertBefore(instance.element, anchor);
+            }
+            anchor = instance.element;
+          }
         }
-        anchor = instance.element;
       }
       this.instances = new Map(nextInstances.map((instance) => [instance.key, instance]));
+      this.rebuildElementIndex(this.instances);
       this.pruneEventHandlers(rows.keys);
       this.pruneConditionalListeners(rows.keys);
       if (restoreFocus && activeElement?.isConnected && activeElement.ownerDocument.activeElement !== activeElement && "focus" in activeElement) {
@@ -879,7 +2490,9 @@ function createKeyedRowsBlockComponent(owner) {
       this.mounted = false;
       this.unsubscribe?.();
       this.root = null;
+      this.cleanupHostScopes();
       this.instances.clear();
+      this.instancesByElement = /* @__PURE__ */ new WeakMap();
       this.eventHandlers.clear();
       this.conditionalListeners.clear();
     }
@@ -892,6 +2505,7 @@ function createKeyedRowsBlockComponent(owner) {
         );
       }
       return React.cloneElement(container, {
+        ...this.delegatedContainerProps(container),
         key: this.state.fallback ? `react-${this.fallbackVersion}` : "compiled",
         ref: this.captureRoot
       });
@@ -913,6 +2527,7 @@ function createKeyedRangesBlockComponent(owner) {
       this.currentProps = this.props;
       this.rangeInstances = [];
       this.staticSegments = [];
+      this.staticValues = [];
       this.captureRoot = (root) => {
         this.root = root;
         this.currentProps.rootRef?.(root);
@@ -922,8 +2537,7 @@ function createKeyedRangesBlockComponent(owner) {
       };
     }
     readRange(range) {
-      const source = range.items();
-      const items = source ? Array.from(source) : [];
+      const items = materializeIterable(range.items());
       const keys = items.map((item, index) => keyedRowIdentity(range.rowKey(item, index)));
       if (new Set(keys).size !== keys.length) return null;
       return { items, keys };
@@ -977,6 +2591,11 @@ function createKeyedRangesBlockComponent(owner) {
       staticSegments.push(elements.slice(cursor));
       this.staticSegments = staticSegments;
       this.rangeInstances = instancesByRange;
+      if (!applyStaticRangeBindings(props.bindings, this.staticSegments, this.staticValues)) {
+        this.rangeInstances = [];
+        this.staticSegments = [];
+        return false;
+      }
       return true;
     }
     anchorAfter(rangeIndex) {
@@ -1053,6 +2672,14 @@ function createKeyedRangesBlockComponent(owner) {
         this.activateFallback(afterCommit);
         return;
       }
+      if (!applyStaticRangeBindings(
+        this.currentProps.bindings,
+        this.staticSegments,
+        this.staticValues
+      )) {
+        this.activateFallback(afterCommit);
+        return;
+      }
       const activeElement = this.root.ownerDocument.activeElement;
       const restoreFocus = Boolean(activeElement && this.root.contains(activeElement));
       for (let rangeIndex = rowsByRange.length - 1; rangeIndex >= 0; rangeIndex -= 1) {
@@ -1096,6 +2723,7 @@ function createKeyedRangesBlockComponent(owner) {
       this.root = null;
       this.rangeInstances = [];
       this.staticSegments = [];
+      this.staticValues.length = 0;
     }
     render() {
       const container = this.currentProps.render();
@@ -1113,6 +2741,128 @@ function createKeyedRangesBlockComponent(owner) {
   FarmKeyedRangesBlock.displayName = "FarmCompiledKeyedRanges";
   return FarmKeyedRangesBlock;
 }
+function createMixedRangesBlockComponent(owner) {
+  class FarmMixedRangesBlock extends React.Component {
+    constructor() {
+      super(...arguments);
+      this.state = { fallback: false };
+      this.root = null;
+      this.mounted = false;
+      this.fallbackRequested = false;
+      this.fallbackVersion = 0;
+      this.propFallbackQueued = false;
+      this.currentProps = this.props;
+      this.controller = null;
+      this.fallbackUnsubscribers = [];
+      this.captureRoot = (root) => {
+        this.root = root;
+        this.currentProps.rootRef?.(root);
+      };
+      this.activateFallback = (afterCommit) => {
+        if (!this.mounted || this.state.fallback || this.fallbackRequested) {
+          afterCommit?.();
+          return;
+        }
+        this.fallbackRequested = true;
+        this.controller?.cleanup();
+        this.controller = null;
+        this.fallbackVersion += 1;
+        this.setState({ fallback: true }, () => {
+          this.subscribeFallbackBlocks();
+          afterCommit?.();
+        });
+      };
+    }
+    clearFallbackSubscriptions() {
+      for (const unsubscribe of this.fallbackUnsubscribers) unsubscribe();
+      this.fallbackUnsubscribers = [];
+    }
+    subscribeFallbackBlocks() {
+      this.clearFallbackSubscriptions();
+      const descriptor = this.currentProps.create();
+      const ids = /* @__PURE__ */ new Set();
+      collectCompilerHostBlockIds(descriptor, ids);
+      for (const id of ids) {
+        this.fallbackUnsubscribers.push(
+          owner.subscribe(id, (afterCommit) => {
+            if (!this.mounted || !this.state.fallback) {
+              afterCommit?.();
+              return;
+            }
+            this.fallbackVersion += 1;
+            this.forceUpdate(afterCommit);
+          })
+        );
+      }
+    }
+    adopt() {
+      if (!this.root) return false;
+      const descriptor = this.currentProps.create();
+      const block = descriptor.block;
+      if (block?.kind !== "mixed-ranges" || block.id !== this.currentProps.id) return false;
+      const controller = new CompilerNestedMixedRanges(
+        owner,
+        this.root,
+        descriptor,
+        block,
+        this.activateFallback
+      );
+      try {
+        if (!controller.adopt()) {
+          controller.cleanup();
+          return false;
+        }
+      } catch (error) {
+        controller.cleanup();
+        throw error;
+      }
+      this.controller = controller;
+      return true;
+    }
+    schedulePropFallback() {
+      if (this.propFallbackQueued) return;
+      this.propFallbackQueued = true;
+      queueMicrotask(() => {
+        this.propFallbackQueued = false;
+        if (this.mounted && !this.state.fallback) this.activateFallback();
+      });
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+      this.currentProps = nextProps;
+      if (nextState.fallback || this.state.fallback) return true;
+      this.schedulePropFallback();
+      return false;
+    }
+    componentDidMount() {
+      this.mounted = true;
+      if (!this.adopt()) this.activateFallback();
+    }
+    componentDidUpdate() {
+      if (this.state.fallback) this.subscribeFallbackBlocks();
+    }
+    componentWillUnmount() {
+      this.mounted = false;
+      this.controller?.cleanup();
+      this.controller = null;
+      this.clearFallbackSubscriptions();
+      this.root = null;
+    }
+    render() {
+      const container = this.currentProps.render();
+      if (!React.isValidElement(container) || typeof container.type !== "string") {
+        throw new TypeError(
+          `Compiled mixed ranges ${this.currentProps.id} must own one host container.`
+        );
+      }
+      return React.cloneElement(container, {
+        key: this.state.fallback ? `react-${this.fallbackVersion}` : "compiled",
+        ref: this.captureRoot
+      });
+    }
+  }
+  FarmMixedRangesBlock.displayName = "FarmCompiledMixedRanges";
+  return FarmMixedRangesBlock;
+}
 function createComponentBlockComponent(owner) {
   class FarmComponentBlock extends React.Component {
     constructor() {
@@ -1165,6 +2915,17 @@ function createCompiledComponent(definition) {
       this.hasBindingError = false;
       this.inputSelection = null;
       this.dirtyState = /* @__PURE__ */ new Set();
+      this.indexedDefinition = null;
+      this.staticBindingsByDependency = [];
+      this.blockBindingsByDependency = [];
+      this.blockBindings = /* @__PURE__ */ new Map();
+      this.trackedBindingsByDependency = [];
+      this.trackedDependenciesByBinding = /* @__PURE__ */ new Map();
+      this.bindingValues = /* @__PURE__ */ new Map();
+      this.activeBinding = null;
+      this.activeDependencies = null;
+      this.renderedDefinition = null;
+      this.renderedElement = null;
       this.blockRefreshListeners = /* @__PURE__ */ new Map();
       this.blockRoots = /* @__PURE__ */ new Map();
       this.blockRootElements = /* @__PURE__ */ new Set();
@@ -1176,20 +2937,35 @@ function createCompiledComponent(definition) {
       this.refreshDefinition = () => {
         if (this.mounted) this.forceUpdate();
       };
-      this.cells = definitionReference.current.initialize(props).map((initialValue, index) => {
+      const initialState = definitionReference.current.initialize(props);
+      const initialProps = definitionReference.current.readProps?.(props) || [];
+      this.propCellOffset = initialState.length;
+      this.cells = [...initialState, ...initialProps].map((initialValue, index) => {
         let value = initialValue;
         const pending = [];
         return {
-          get: () => value,
+          get: () => {
+            if (this.activeBinding && this.activeDependencies) {
+              this.activeDependencies.add(index);
+            }
+            return value;
+          },
           set: (next) => {
-            pending.push(next);
+            pending.push({ kind: "state", update: next });
             this.scheduleBindingFlush(index);
           },
+          replace: (next) => {
+            pending.push({ kind: "value", value: next });
+          },
           flush: () => {
             if (pending.length === 0) return false;
             const previous = value;
             for (const next of pending.splice(0)) {
-              value = typeof next === "function" ? next(value) : next;
+              if (next.kind === "value") {
+                value = next.value;
+              } else {
+                value = typeof next.update === "function" ? next.update(value) : next.update;
+              }
             }
             return !Object.is(previous, value);
           }
@@ -1203,6 +2979,9 @@ function createCompiledComponent(definition) {
         HostConditional: createHostConditionalBlockComponent({
           subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
         }),
+        ConditionalRanges: createConditionalRangesBlockComponent({
+          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
+        }),
         KeyedList: createKeyedListBlockComponent({
           subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
         }),
@@ -1212,12 +2991,113 @@ function createCompiledComponent(definition) {
         KeyedRanges: createKeyedRangesBlockComponent({
           subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
         }),
+        MixedRanges: createMixedRangesBlockComponent({
+          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
+        }),
         Component: createComponentBlockComponent({
           subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
         }),
         target: (id) => this.bindingTarget(id)
       };
     }
+    usesHybridReactivity() {
+      return definitionReference.current.reactivity === "hybrid";
+    }
+    canReuseRenderedElement(currentDefinition, propValues) {
+      return Boolean(
+        this.mounted && propValues && propValues.every(isCompilerPrimitive) && this.renderedDefinition === currentDefinition && this.renderedElement
+      );
+    }
+    renderCellsForProps(propValues) {
+      if (!propValues) return { cells: this.cells, commit: () => void 0 };
+      let committed = false;
+      const cells = this.cells.slice(0, this.propCellOffset);
+      for (let propIndex = 0; propIndex < propValues.length; propIndex += 1) {
+        const cell = this.cells[this.propCellOffset + propIndex];
+        if (!cell) continue;
+        cells.push({
+          get: () => committed ? cell.get() : propValues[propIndex],
+          set: (next) => cell.set(next)
+        });
+      }
+      return {
+        cells,
+        commit: () => {
+          committed = true;
+        }
+      };
+    }
+    tracksBinding(binding) {
+      return this.usesHybridReactivity() && binding.tracking === "dynamic";
+    }
+    ensureBindingIndex() {
+      const currentDefinition = definitionReference.current;
+      if (this.indexedDefinition === currentDefinition) return;
+      this.indexedDefinition = currentDefinition;
+      this.staticBindingsByDependency = Array.from({ length: this.cells.length }, () => []);
+      this.blockBindingsByDependency = Array.from({ length: this.cells.length }, () => []);
+      this.trackedBindingsByDependency = Array.from(
+        { length: this.cells.length },
+        () => /* @__PURE__ */ new Set()
+      );
+      this.blockBindings.clear();
+      this.trackedDependenciesByBinding.clear();
+      this.bindingValues.clear();
+      for (const binding of currentDefinition.bindings) {
+        if (binding.kind === "block") this.blockBindings.set(binding.id, binding);
+        for (const dependency of binding.dependencies) {
+          if (dependency < 0 || dependency >= this.cells.length) continue;
+          if (binding.kind === "block") {
+            this.blockBindingsByDependency[dependency].push(binding);
+          } else if (!this.tracksBinding(binding)) {
+            this.staticBindingsByDependency[dependency].push(binding);
+          }
+        }
+      }
+    }
+    updateTrackedDependencies(binding, nextDependencies) {
+      const previousDependencies = this.trackedDependenciesByBinding.get(binding);
+      if (previousDependencies) {
+        for (const dependency of previousDependencies) {
+          if (!nextDependencies.has(dependency)) {
+            this.trackedBindingsByDependency[dependency]?.delete(binding);
+          }
+        }
+      }
+      for (const dependency of nextDependencies) {
+        if (!previousDependencies?.has(dependency)) {
+          this.trackedBindingsByDependency[dependency]?.add(binding);
+        }
+      }
+      this.trackedDependenciesByBinding.set(binding, nextDependencies);
+    }
+    readBinding(binding) {
+      if (!this.tracksBinding(binding)) return binding.read(this.props, this.cells);
+      const previousBinding = this.activeBinding;
+      const previousDependencies = this.activeDependencies;
+      const nextDependencies = /* @__PURE__ */ new Set();
+      this.activeBinding = binding;
+      this.activeDependencies = nextDependencies;
+      try {
+        return binding.read(this.props, this.cells);
+      } finally {
+        this.activeBinding = previousBinding;
+        this.activeDependencies = previousDependencies;
+        this.updateTrackedDependencies(binding, nextDependencies);
+      }
+    }
+    bindingValue(binding, value) {
+      return binding.kind === "text" ? renderTextValue(value) : value;
+    }
+    primeHybridBindings() {
+      if (!this.usesHybridReactivity()) return;
+      for (const binding of definitionReference.current.bindings) {
+        if (binding.kind === "block") continue;
+        if (!this.tracksBinding(binding)) continue;
+        const value = this.readBinding(binding);
+        this.bindingValues.set(binding, this.bindingValue(binding, value));
+      }
+    }
     bindingTarget(id) {
       const existing = this.bindingTargetRefs.get(id);
       if (existing) return existing;
@@ -1274,83 +3154,118 @@ function createCompiledComponent(definition) {
       this.flushQueued = true;
       queueMicrotask(() => {
         this.flushQueued = false;
-        const inputSelection = this.inputSelection;
-        this.inputSelection = null;
-        if (!this.mounted) return;
-        const dirty = /* @__PURE__ */ new Set();
-        for (const index2 of this.dirtyState) {
-          if (this.cells[index2]?.flush()) dirty.add(index2);
-        }
-        this.dirtyState.clear();
-        if (dirty.size === 0) return;
-        try {
-          const bindings = definitionReference.current.bindings;
-          const blockBindings = /* @__PURE__ */ new Map();
-          const affectedBlockIds = /* @__PURE__ */ new Set();
-          for (const binding of bindings) {
-            if (binding.kind !== "block") continue;
-            blockBindings.set(binding.id, binding);
-            if (binding.dependencies.some((dependency) => dirty.has(dependency))) {
-              affectedBlockIds.add(binding.id);
-            }
+        this.flushBindingUpdates();
+      });
+    }
+    flushBindingUpdates() {
+      const inputSelection = this.inputSelection;
+      this.inputSelection = null;
+      if (!this.mounted) return;
+      const dirty = /* @__PURE__ */ new Set();
+      for (const index of this.dirtyState) {
+        if (this.cells[index]?.flush()) dirty.add(index);
+      }
+      this.dirtyState.clear();
+      if (dirty.size === 0) return;
+      try {
+        this.ensureBindingIndex();
+        const affectedBlockIds = /* @__PURE__ */ new Set();
+        const affectedBindings = /* @__PURE__ */ new Set();
+        for (const dependency of dirty) {
+          for (const binding of this.blockBindingsByDependency[dependency] || []) {
+            affectedBlockIds.add(binding.id);
           }
-          const hasAffectedMountedAncestor = (binding) => {
-            let parent = binding.parent;
-            while (parent !== void 0) {
-              if (affectedBlockIds.has(parent) && this.blockRefreshListeners.has(parent)) {
-                return true;
-              }
-              parent = blockBindings.get(parent)?.parent;
-            }
-            return false;
-          };
-          const blockRefreshes = [...affectedBlockIds].map((id) => {
-            const binding = blockBindings.get(id);
-            const refresh = this.blockRefreshListeners.get(id);
-            return binding && refresh && !hasAffectedMountedAncestor(binding) ? refresh : void 0;
-          }).filter(
-            (refresh) => refresh !== void 0
-          );
-          for (const binding of bindings) {
-            if (binding.kind !== "block" && binding.dependencies.some((dependency) => dirty.has(dependency))) {
-              this.applyBinding(binding);
+          for (const binding of this.staticBindingsByDependency[dependency] || []) {
+            affectedBindings.add(binding);
+          }
+          if (this.usesHybridReactivity()) {
+            for (const binding of this.trackedBindingsByDependency[dependency] || []) {
+              affectedBindings.add(binding);
             }
           }
-          let pendingBlockCommits = blockRefreshes.length;
-          for (const refresh of blockRefreshes) {
-            refresh(() => {
-              pendingBlockCommits -= 1;
-              if (pendingBlockCommits === 0) this.restoreInputSelection(inputSelection);
-            });
+        }
+        const hasAffectedMountedAncestor = (binding) => {
+          let parent = binding.parent;
+          while (parent !== void 0) {
+            if (affectedBlockIds.has(parent) && this.blockRefreshListeners.has(parent)) {
+              return true;
+            }
+            parent = this.blockBindings.get(parent)?.parent;
           }
-          if (blockRefreshes.length === 0) this.restoreInputSelection(inputSelection);
-        } catch (error) {
-          this.bindingError = error;
-          this.hasBindingError = true;
-          this.forceUpdate();
+          return false;
+        };
+        const blockRefreshes = [...affectedBlockIds].map((id) => {
+          const binding = this.blockBindings.get(id);
+          const refresh = this.blockRefreshListeners.get(id);
+          return binding && refresh && !hasAffectedMountedAncestor(binding) ? refresh : void 0;
+        }).filter((refresh) => refresh !== void 0);
+        for (const binding of affectedBindings) {
+          if (binding.kind !== "block") this.applyBinding(binding);
         }
-      });
+        let pendingBlockCommits = blockRefreshes.length;
+        for (const refresh of blockRefreshes) {
+          refresh(() => {
+            pendingBlockCommits -= 1;
+            if (pendingBlockCommits === 0) this.restoreInputSelection(inputSelection);
+          }, dirty);
+        }
+        if (blockRefreshes.length === 0) this.restoreInputSelection(inputSelection);
+      } catch (error) {
+        this.bindingError = error;
+        this.hasBindingError = true;
+        this.forceUpdate();
+      }
     }
-    applyBinding(binding) {
+    applyBinding(binding, force = false) {
       if (!this.root || binding.kind === "block") return;
       const target = binding.target === void 0 ? findBindingTarget(this.root, binding.path, this.blockRootElements) : binding.path.length === 0 ? this.root : this.bindingTargets.get(binding.target) || null;
       if (!target) return;
-      const value = binding.read(this.props, this.cells);
+      const value = this.readBinding(binding);
+      const comparableValue = this.bindingValue(binding, value);
+      if (!force && this.bindingValues.has(binding)) {
+        if (Object.is(this.bindingValues.get(binding), comparableValue)) return;
+      }
       if (binding.kind === "text") {
-        target.textContent = renderTextValue(value);
+        target.textContent = comparableValue;
       } else if (binding.kind === "style") {
         updateStyle(target, binding.name, value);
       } else {
         updateAttribute(target, binding.name, value);
       }
+      this.bindingValues.set(binding, comparableValue);
     }
     componentDidMount() {
       this.mounted = true;
       refreshListeners.add(this.refreshDefinition);
+      this.ensureBindingIndex();
+      this.primeHybridBindings();
     }
-    componentDidUpdate() {
+    getSnapshotBeforeUpdate() {
+      const currentDefinition = definitionReference.current;
+      const propValues = currentDefinition.readProps?.(this.props) || null;
+      return this.canReuseRenderedElement(currentDefinition, propValues);
+    }
+    componentDidUpdate(_previousProps, _previousState, reusedRenderedElement = false) {
+      const propValues = definitionReference.current.readProps?.(this.props) || null;
+      if (propValues) {
+        if (reusedRenderedElement) this.captureInputSelection();
+        for (let propIndex = 0; propIndex < propValues.length; propIndex += 1) {
+          const cellIndex = this.propCellOffset + propIndex;
+          const cell = this.cells[cellIndex];
+          if (!cell) continue;
+          cell.replace(propValues[propIndex]);
+          if (reusedRenderedElement) {
+            this.dirtyState.add(cellIndex);
+          } else {
+            cell.flush();
+          }
+        }
+        this.flushBindingUpdates();
+        return;
+      }
+      this.ensureBindingIndex();
       for (const binding of definitionReference.current.bindings) {
-        if (binding.kind !== "block") this.applyBinding(binding);
+        if (binding.kind !== "block") this.applyBinding(binding, true);
       }
     }
     componentWillUnmount() {
@@ -1363,30 +3278,68 @@ function createCompiledComponent(definition) {
       this.blockRootElements.clear();
       this.bindingTargets.clear();
       this.bindingTargetRefs.clear();
+      this.indexedDefinition = null;
+      this.staticBindingsByDependency = [];
+      this.blockBindingsByDependency = [];
+      this.blockBindings.clear();
+      this.trackedBindingsByDependency = [];
+      this.trackedDependenciesByBinding.clear();
+      this.bindingValues.clear();
+      this.activeBinding = null;
+      this.activeDependencies = null;
       refreshListeners.delete(this.refreshDefinition);
     }
     render() {
       if (this.hasBindingError) throw this.bindingError;
       const currentDefinition = definitionReference.current;
-      const element = currentDefinition.render(this.props, this.cells, this.blockRuntime);
+      const propValues = currentDefinition.readProps?.(this.props) || null;
+      if (this.canReuseRenderedElement(currentDefinition, propValues)) {
+        return this.renderedElement;
+      }
+      const renderCells = this.renderCellsForProps(propValues);
+      const element = currentDefinition.render(this.props, renderCells.cells, this.blockRuntime);
       if (!React.isValidElement(element)) {
         throw new TypeError(
           `Compiled component ${currentDefinition.displayName} must return one host element.`
         );
       }
+      let renderedElement;
+      const captureCommittedRoot = (root) => {
+        this.captureRoot(root);
+        if (!root) return;
+        renderCells.commit();
+        this.renderedDefinition = currentDefinition;
+        this.renderedElement = renderedElement;
+      };
       if (element.type === this.blockRuntime.KeyedRanges) {
-        return React.cloneElement(element, {
-          rootRef: this.captureRoot
-        });
-      }
-      if (typeof element.type !== "string") {
+        renderedElement = React.cloneElement(
+          element,
+          {
+            rootRef: captureCommittedRoot
+          }
+        );
+      } else if (element.type === this.blockRuntime.ConditionalRanges) {
+        renderedElement = React.cloneElement(
+          element,
+          { rootRef: captureCommittedRoot }
+        );
+      } else if (element.type === this.blockRuntime.MixedRanges) {
+        renderedElement = React.cloneElement(
+          element,
+          {
+            rootRef: captureCommittedRoot
+          }
+        );
+      } else if (typeof element.type !== "string") {
         throw new TypeError(
           `Compiled component ${currentDefinition.displayName} must return one host element.`
         );
+      } else {
+        renderedElement = React.cloneElement(element, {
+          ref: captureCommittedRoot
+        });
       }
-      return React.cloneElement(element, {
-        ref: this.captureRoot
-      });
+      return renderedElement;
     }
   }
   FarmCompiledComponent.displayName = `FarmCompiled(${definition.displayName})`;