marko 6.0.0-next.3.36 → 6.0.0-next.3.38

package/dist/debug/html.js

@@ -1614,7 +1614,7 @@ function resumeForOf(list, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForOf(list, cb, scopeId, accessor) {
+function resumeSingleNodeForOf(list, cb, scopeId, accessor, onlyChildInParent) {
   let branchIds = "";
   forOf(list, (item, index) => {
     const branchId = peekNextScopeId();
@@ -1623,7 +1623,7 @@ function resumeSingleNodeForOf(list, cb, scopeId, accessor) {
   });
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChildInParent ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1645,7 +1645,7 @@ function resumeForIn(obj, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForIn(obj, cb, scopeId, accessor) {
+function resumeSingleNodeForIn(obj, cb, scopeId, accessor, onlyChild) {
   let branchIds = "";
   forIn(obj, (key, value) => {
     const branchId = peekNextScopeId();
@@ -1654,7 +1654,7 @@ function resumeSingleNodeForIn(obj, cb, scopeId, accessor) {
   });
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1676,7 +1676,7 @@ function resumeForTo(to, from, step, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor) {
+function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor, onlyChild) {
   let branchIds = "";
   forTo(to, from, step, (index) => {
     const branchId = peekNextScopeId();
@@ -1685,7 +1685,7 @@ function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor) {
   });
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1709,7 +1709,7 @@ function resumeConditional(cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeConditional(cb, scopeId, accessor) {
+function resumeSingleNodeConditional(cb, scopeId, accessor, onlyChild) {
   const branchId = peekNextScopeId();
   withContext(branchIdKey, branchId, cb);
   const rendered = peekNextScopeId() !== branchId;
@@ -1720,7 +1720,7 @@ function resumeSingleNodeConditional(cb, scopeId, accessor) {
   }
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + (rendered ? " " + branchId : "")
     )
   );

package/dist/debug/html.mjs

@@ -1532,7 +1532,7 @@ function resumeForOf(list, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForOf(list, cb, scopeId, accessor) {
+function resumeSingleNodeForOf(list, cb, scopeId, accessor, onlyChildInParent) {
   let branchIds = "";
   forOf(list, (item, index) => {
     const branchId = peekNextScopeId();
@@ -1541,7 +1541,7 @@ function resumeSingleNodeForOf(list, cb, scopeId, accessor) {
   });
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChildInParent ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1563,7 +1563,7 @@ function resumeForIn(obj, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForIn(obj, cb, scopeId, accessor) {
+function resumeSingleNodeForIn(obj, cb, scopeId, accessor, onlyChild) {
   let branchIds = "";
   forIn(obj, (key, value) => {
     const branchId = peekNextScopeId();
@@ -1572,7 +1572,7 @@ function resumeSingleNodeForIn(obj, cb, scopeId, accessor) {
   });
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1594,7 +1594,7 @@ function resumeForTo(to, from, step, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor) {
+function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor, onlyChild) {
   let branchIds = "";
   forTo(to, from, step, (index) => {
     const branchId = peekNextScopeId();
@@ -1603,7 +1603,7 @@ function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor) {
   });
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1627,7 +1627,7 @@ function resumeConditional(cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeConditional(cb, scopeId, accessor) {
+function resumeSingleNodeConditional(cb, scopeId, accessor, onlyChild) {
   const branchId = peekNextScopeId();
   withContext(branchIdKey, branchId, cb);
   const rendered = peekNextScopeId() !== branchId;
@@ -1638,7 +1638,7 @@ function resumeSingleNodeConditional(cb, scopeId, accessor) {
   }
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + (rendered ? " " + branchId : "")
     )
   );

package/dist/dom/compat.d.ts

@@ -1,13 +1,13 @@
-import { patchConditionals } from "./control-flow";
+import { patchDynamicTag } from "./control-flow";
 import { queueEffect } from "./queue";
 import { type Renderer } from "./renderer";
 export declare const compat: {
-    patchConditionals: typeof patchConditionals;
+    patchConditionals: typeof patchDynamicTag;
     queueEffect: typeof queueEffect;
     init(warp10Noop: any): void;
     registerRenderer(fn: any): void;
     isOp(value: any): boolean;
-    isRenderer(renderer: any): boolean;
+    isRenderer(renderer: any): any;
     getStartNode(branch: any): any;
     setScopeNodes(branch: any, startNode: Node, endNode: Node): void;
     runComponentEffects(this: any): void;

package/dist/dom/control-flow.d.ts

@@ -1,11 +1,10 @@
 import { type Accessor, type BranchScope, type Scope } from "../common/types";
 import { type Renderer } from "./renderer";
 import { type Signal, type SignalOp } from "./signals";
-export declare function patchConditionals(fn: <T extends typeof conditional | typeof conditionalOnlyChild>(cond: T) => T): void;
-export declare let conditional: (nodeAccessor: Accessor, fn?: ((scope: Scope) => void) | 0, getIntersection?: () => Signal<never>) => Signal<Renderer | string | undefined>;
-export declare function setConditionalRenderer(scope: Scope, nodeAccessor: Accessor, newRenderer: Renderer | string | undefined): void;
-export declare let conditionalOnlyChild: (nodeAccessor: Accessor, fn?: ((scope: Scope) => void) | 0, getIntersection?: () => Signal<never>) => Signal<Renderer | string | undefined>;
-export declare function setConditionalRendererOnlyChild(scope: Scope, nodeAccessor: Accessor, newRenderer: Renderer | string | undefined): void;
+export declare function conditional(nodeAccessor: Accessor, ...branches: Renderer[]): Signal<number>;
+export declare function patchDynamicTag(fn: <T extends typeof dynamicTag>(cond: T) => T): void;
+export declare let dynamicTag: (nodeAccessor: Accessor, fn?: ((scope: Scope) => void) | 0, getIntersection?: () => Signal<never>) => Signal<Renderer | string | undefined>;
+export declare function setConditionalRendererOnlyChild<T>(scope: Scope, nodeAccessor: Accessor, newRenderer: T, createBranch: (renderer: NonNullable<T>, $global: Scope["$global"], parentScope: Scope, parentNode: ParentNode) => BranchScope): void;
 export declare const emptyMarkerArray: BranchScope[];
 export declare function loopOf(nodeAccessor: Accessor, renderer: Renderer): (scope: Scope, valueOrOp: SignalOp | [all: unknown[], by?: ((item: unknown, index: number) => unknown) | undefined]) => void;
 export declare function loopIn(nodeAccessor: Accessor, renderer: Renderer): (scope: Scope, valueOrOp: SignalOp | [obj: {}, by?: ((key: string, v: unknown) => unknown) | undefined]) => void;

package/dist/dom/renderer.d.ts

@@ -4,9 +4,8 @@ export type Renderer = {
     ___id: symbol;
     ___template: string;
     ___walks: string;
-    ___setup: SetupFn | undefined;
+    ___setup: SetupFn | undefined | 0;
     ___clone: (ns: string) => ChildNode;
-    ___sourceNode: Node | undefined;
     ___args: Signal<unknown> | undefined;
     ___owner: Scope | undefined;
 };
@@ -15,6 +14,6 @@ export declare function createBranchScopeWithRenderer(renderer: Renderer, $globa
 export declare function createBranchScopeWithTagNameOrRenderer(tagNameOrRenderer: Renderer | string, $global: Scope["$global"], parentScope: Scope, parentNode: ParentNode): BranchScope;
 export declare function initBranch(renderer: Renderer, branch: BranchScope, parentNode: ParentNode): void;
 export declare function dynamicTagAttrs(nodeAccessor: Accessor, getContent?: (scope: Scope) => Renderer, inputIsArgs?: boolean): (scope: Scope, attrsOrOp: (() => Record<string, unknown>) | SignalOp) => void;
-export declare function createRendererWithOwner(template: string, rawWalks?: string, setup?: SetupFn, getArgs?: () => Signal<unknown>): (owner?: Scope) => Renderer;
-export declare function createRenderer(template: string, walks?: string, setup?: SetupFn, getArgs?: () => Signal<unknown>): Renderer;
+export declare function createRendererWithOwner(template: string, rawWalks?: string | 0, setup?: SetupFn | 0, getArgs?: () => Signal<unknown>): (owner?: Scope) => Renderer;
+export declare function createRenderer(template: string, walks?: string | 0, setup?: SetupFn | 0, getArgs?: () => Signal<unknown>): Renderer;
 export {};

package/dist/dom/signals.d.ts

@@ -1,5 +1,4 @@
 import { type Accessor, type Scope } from "../common/types";
-import type { Renderer } from "./renderer";
 export declare const MARK: unique symbol;
 export declare const CLEAN: unique symbol;
 export declare const DIRTY: unique symbol;
@@ -13,7 +12,7 @@ export declare function value<T>(valueAccessor: Accessor, fn: SignalFn<T> | 0, g
 export declare function intersection(count: number, fn: SignalFn<never>, getIntersection?: () => Signal<never>): Signal<never>;
 export declare function closure<T>(fn: SignalFn<T> | 0, getIntersection?: () => Signal<never>): Signal<T>;
 export declare function loopClosure<T>(ownerLoopNodeAccessor: Accessor, fn: SignalFn<T> | 0, getIntersection?: () => Signal<never>): SignalFn<T>;
-export declare function conditionalClosure<T>(ownerConditionalNodeAccessor: Accessor, getRenderer: () => Renderer, fn: SignalFn<T> | 0, getIntersection?: () => Signal<never>): SignalFn<T>;
+export declare function conditionalClosure<T>(ownerConditionalNodeAccessor: Accessor, branch: number, fn: SignalFn<T> | 0, getIntersection?: () => Signal<never>): SignalFn<T>;
 export declare function dynamicClosure<T>(fn: Signal<T> | 0, getOwnerScope?: (scope: Scope) => Scope, getIntersection?: () => Signal<never>): SignalFn<T>;
 export declare function setTagVar(scope: Scope, childAccessor: Accessor, tagVarSignal: Signal<unknown>): void;
 export declare const tagVarSignal: (scope: Scope, valueOrOp: unknown | SignalOp) => any;

package/dist/dom/template.d.ts

@@ -1,3 +1,3 @@
 import type { Template } from "../common/types";
 import { createRenderer } from "./renderer";
-export declare const createTemplate: (templateId: string, template: string, walks?: string | undefined, setup?: ((scope: import("../common/types").Scope) => void) | undefined, getArgs?: (() => import("./signals").Signal<unknown>) | undefined) => Template;
+export declare const createTemplate: (templateId: string, template: string, walks?: string | 0 | undefined, setup?: 0 | ((scope: import("../common/types").Scope) => void) | undefined, getArgs?: (() => import("./signals").Signal<unknown>) | undefined) => Template;

package/dist/dom.d.ts

@@ -2,7 +2,7 @@ export { attrTag, attrTags } from "./common/attr-tag";
 export { forIn, forOf, forTo } from "./common/for";
 export { getAbortSignal, resetAbortSignal } from "./dom/abort-signal";
 export { compat } from "./dom/compat";
-export { conditional, conditionalOnlyChild, loopIn, loopOf, loopTo, } from "./dom/control-flow";
+export { conditional, dynamicTag, loopIn, loopOf, loopTo, } from "./dom/control-flow";
 export { controllable_detailsOrDialog_open, controllable_detailsOrDialog_open_effect, controllable_input_checked, controllable_input_checked_effect, controllable_input_checkedValue, controllable_input_checkedValue_effect, controllable_input_value, controllable_input_value_effect, controllable_select_value, controllable_select_value_effect, controllable_textarea_value, controllable_textarea_value_effect, } from "./dom/controllable";
 export { attr, attrs, attrsEvents, classAttr, data, html, lifecycle, partialAttrs, props, styleAttr, textContent, } from "./dom/dom";
 export { on } from "./dom/event";

package/dist/dom.js

@@ -26,7 +26,6 @@ __export(dom_exports, {
   compat: () => compat,
   conditional: () => conditional,
   conditionalClosure: () => conditionalClosure,
-  conditionalOnlyChild: () => conditionalOnlyChild,
   controllable_detailsOrDialog_open: () => controllable_detailsOrDialog_open,
   controllable_detailsOrDialog_open_effect: () => controllable_detailsOrDialog_open_effect,
   controllable_input_checked: () => controllable_input_checked,
@@ -44,6 +43,7 @@ __export(dom_exports, {
   createTemplate: () => createTemplate,
   data: () => data,
   dynamicClosure: () => dynamicClosure,
+  dynamicTag: () => dynamicTag,
   dynamicTagAttrs: () => dynamicTagAttrs,
   effect: () => effect,
   forIn: () => forIn,
@@ -178,13 +178,13 @@ function normalizeDynamicRenderer(value2) {
 var elementHandlersByEvent = /* @__PURE__ */ new Map(), defaultDelegator = createDelegator();
 function on(element, type, handler) {
   let handlersByElement = elementHandlersByEvent.get(type);
-  handlersByElement || elementHandlersByEvent.set(type, handlersByElement = /* @__PURE__ */ new WeakMap()), handlersByElement.has(element) || defaultDelegator(element, type, handleDelegated), handlersByElement.set(element, handler || void 0);
+  handlersByElement || elementHandlersByEvent.set(type, handlersByElement = /* @__PURE__ */ new WeakMap()), handlersByElement.has(element) || defaultDelegator(element, type, handleDelegated), handlersByElement.set(element, handler || null);
 }
 function createDelegator() {
-  let delegatedEventsByRoot = /* @__PURE__ */ new WeakMap();
+  let kEvents = Symbol();
   return function(node, type, handler) {
-    let root = node.getRootNode(), delegatedEvents = delegatedEventsByRoot.get(root);
-    delegatedEvents || delegatedEventsByRoot.set(root, delegatedEvents = /* @__PURE__ */ new Set()), delegatedEvents.has(type) || (delegatedEvents.add(type), root.addEventListener(type, handler, !0));
+    let root = node.getRootNode();
+    (root[kEvents] ||= {})[type] ||= (root.addEventListener(type, handler, !0), 1);
   };
 }
 function handleDelegated(ev) {
@@ -224,19 +224,19 @@ var DEFAULT_RUNTIME_ID = "M", DEFAULT_RENDER_ID = "_";
 
 // src/dom/resume.ts
 var registeredValues = {}, Render = class {
-  n = [];
-  o = {};
+  m = [];
+  n = {};
   A = {
     _: registeredValues
   };
   constructor(renders, runtimeId, renderId) {
-    this.B = renders, this.C = runtimeId, this.p = renderId, this.q = renders[renderId], this.s();
+    this.B = renders, this.C = runtimeId, this.o = renderId, this.p = renders[renderId], this.q();
   }
   w() {
-    this.q.w(), this.s();
+    this.p.w(), this.q();
   }
-  s() {
-    let data2 = this.q, serializeContext = this.A, scopeLookup = this.o, visits = data2.v, branchIds = /* @__PURE__ */ new Set(), parentBranchIds = /* @__PURE__ */ new Map();
+  q() {
+    let data2 = this.p, serializeContext = this.A, scopeLookup = this.n, visits = data2.v, branchIds = /* @__PURE__ */ new Set(), parentBranchIds = /* @__PURE__ */ new Map();
     if (visits.length) {
       let commentPrefixLen = data2.i.length, closestBranchMarkers = /* @__PURE__ */ new Map(), visitNodes = new Set(visits), lastEndNode;
       data2.v = [];
@@ -258,7 +258,7 @@ var registeredValues = {}, Render = class {
         else if (token === "$" /* ClosestBranch */)
           closestBranchMarkers.set(scopeId, visit);
         else if (token === "[" /* BranchStart */)
-          this.e && (dataIndex && branchEnd(this.e, visit, visit), this.n.push(this.e)), this.e = scopeId, scope.a = visit;
+          this.e && (dataIndex && branchEnd(this.e, visit, visit), this.m.push(this.e)), this.e = scopeId, scope.a = visit;
         else if (token === "]" /* BranchEnd */) {
           scope[data3] = visit;
           let curParent = visit.parentNode, startNode = branchEnd(
@@ -266,10 +266,10 @@ var registeredValues = {}, Render = class {
             visit,
             visit
           ).a;
-          curParent !== startNode.parentNode && curParent.prepend(startNode), this.e = this.n.pop();
-        } else if (token === "|" /* BranchSingleNode */) {
-          let next = data3.indexOf(" "), curNode = scope[~next ? data3.slice(0, next) : data3] = visit;
-          for (; ~next; ) {
+          curParent !== startNode.parentNode && curParent.prepend(startNode), this.e = this.m.pop();
+        } else if (token === "|" /* BranchSingleNode */ || token === "=" /* BranchSingleNodeOnlyChildInParent */) {
+          let next = data3.indexOf(" "), curNode = visit;
+          for (scope[~next ? data3.slice(0, next) : data3] = token === "=" /* BranchSingleNodeOnlyChildInParent */ ? visit.parentNode : visit; ~next; ) {
             let start = next + 1;
             next = data3.indexOf(" ", start);
             let childScopeId = data3.slice(start, ~next ? next : data3.length);
@@ -287,7 +287,7 @@ var registeredValues = {}, Render = class {
           let resumeData = resumes[i++];
           if (typeof resumeData == "function") {
             let scopes = resumeData(serializeContext), { $global } = scopeLookup;
-            $global || (scopeLookup.$global = $global = scopes.$ || {}, $global.runtimeId = this.C, $global.renderId = this.p);
+            $global || (scopeLookup.$global = $global = scopes.$ || {}, $global.runtimeId = this.C, $global.renderId = this.o);
             for (let scopeId in scopes)
               if (scopeId !== "$") {
                 let scope = scopes[scopeId], prevScope = scopeLookup[scopeId];
@@ -298,10 +298,10 @@ var registeredValues = {}, Render = class {
                 let parentBranchId = parentBranchIds.get(scopeId);
                 if (parentBranchId && (scope.c = scopes[parentBranchId]), branchIds.has(scopeId)) {
                   let branch = scope, parentBranch = branch.c;
-                  branch.f = +scopeId, scope.c = branch, parentBranch && (branch.t = parentBranch, (parentBranch.k ||= /* @__PURE__ */ new Set()).add(branch));
+                  branch.f = +scopeId, scope.c = branch, parentBranch && (branch.s = parentBranch, (parentBranch.j ||= /* @__PURE__ */ new Set()).add(branch));
                 }
               }
-          } else i === len || typeof resumes[i] != "string" ? delete this.B[this.p] : registeredValues[resumes[i++]](
+          } else i === len || typeof resumes[i] != "string" ? delete this.B[this.o] : registeredValues[resumes[i++]](
             scopeLookup[resumeData],
             scopeLookup[resumeData]
           );
@@ -408,8 +408,7 @@ function controllable_select_value(scope, nodeAccessor, value2, valueChange) {
   );
 }
 function controllable_select_value_effect(scope, nodeAccessor) {
-  let el = scope[nodeAccessor];
-  syncControllable(el, "input", hasSelectChanged, () => {
+  let el = scope[nodeAccessor], onChange = () => {
     let valueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
     valueChange && (scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */, valueChange(
       Array.isArray(scope[nodeAccessor + ":" /* ControlledValue */]) ? Array.from(el.selectedOptions, toValueProp) : el.value
@@ -418,7 +417,14 @@ function controllable_select_value_effect(scope, nodeAccessor) {
       scope[nodeAccessor + ":" /* ControlledValue */],
       valueChange
     ));
-  });
+  };
+  controllableHandlers.has(el) || new MutationObserver(() => {
+    let value2 = scope[nodeAccessor + ":" /* ControlledValue */];
+    (Array.isArray(value2) ? value2.length !== el.selectedOptions.length || value2.some((value3, i) => value3 != el.selectedOptions[i].value) : el.value != value2) && onChange();
+  }).observe(el, {
+    childList: !0,
+    subtree: !0
+  }), syncControllable(el, "input", hasSelectChanged, onChange);
 }
 function setSelectOptions(el, value2, valueChange) {
   if (Array.isArray(value2))
@@ -470,17 +476,17 @@ function setValueAndUpdateSelection(el, value2) {
 function setCheckboxValue(scope, nodeAccessor, type, checked, checkedChange) {
   scope[nodeAccessor + ";" /* ControlledHandler */] = checkedChange, checkedChange ? (scope[nodeAccessor + "=" /* ControlledType */] = type, scope[nodeAccessor].checked = checked) : (scope[nodeAccessor + "=" /* ControlledType */] = 5 /* None */, scope[nodeAccessor].defaultChecked = checked);
 }
-var delegateFormControl = createDelegator(), formChangeHandlers = /* @__PURE__ */ new WeakMap();
+var controllableDelegate = createDelegator(), controllableHandlers = /* @__PURE__ */ new WeakMap();
 function syncControllable(el, event, hasChanged, onChange) {
-  formChangeHandlers.set(el, onChange), delegateFormControl(el, event, onFormChange), el.form && delegateFormControl(el.form, "reset", onFormReset), isResuming && hasChanged(el) && queueMicrotask(onChange);
+  controllableHandlers.has(el) || (controllableDelegate(el, event, handleChange), el.form && controllableDelegate(el.form, "reset", handleFormReset), isResuming && hasChanged(el) && queueMicrotask(onChange)), controllableHandlers.set(el, onChange);
 }
-function onFormChange(ev) {
-  formChangeHandlers.get(ev.target)?.(ev);
+function handleChange(ev) {
+  controllableHandlers.get(ev.target)?.(ev);
 }
-function onFormReset(ev) {
+function handleFormReset(ev) {
   let handlers = [];
   for (let el of ev.target.elements) {
-    let handler = formChangeHandlers.get(el);
+    let handler = controllableHandlers.get(el);
     handler && hasFormElementChanged(el) && handlers.push(handler);
   }
   requestAnimationFrame(() => {
@@ -734,10 +740,10 @@ function getEmptyBranch(marker) {
   return emptyBranch.a = emptyBranch.b = marker, emptyBranch;
 }
 function destroyBranch(branch) {
-  branch.t?.k?.delete(branch), destroyNestedBranches(branch);
+  branch.s?.j?.delete(branch), destroyNestedBranches(branch);
 }
 function destroyNestedBranches(branch) {
-  branch.E = 1, branch.k?.forEach(destroyNestedBranches), branch.F?.forEach((scope) => {
+  branch.E = 1, branch.j?.forEach(destroyNestedBranches), branch.F?.forEach((scope) => {
     for (let id in scope.h)
       scope.h[id]?.abort();
   });
@@ -876,7 +882,7 @@ function walkInternal(walkCodes, scope, currentWalkIndex) {
 function createBranchScopeWithRenderer(renderer, $global, parentScope, parentNode) {
   let branch = createBranch(
     $global,
-    renderer.u || parentScope,
+    renderer.t || parentScope,
     parentScope
   );
   return initBranch(renderer, branch, parentNode), branch;
@@ -897,11 +903,11 @@ function createBranchScopeWithTagNameOrRenderer(tagNameOrRenderer, $global, pare
 }
 function createBranch($global, ownerScope, parentScope) {
   let branch = createScope($global), parentBranch = parentScope.c;
-  return branch._ = ownerScope, branch.c = branch, parentBranch ? (branch.f = parentBranch.f + 1, branch.t = parentBranch, (parentBranch.k ||= /* @__PURE__ */ new Set()).add(branch)) : branch.f = 1, branch;
+  return branch._ = ownerScope, branch.c = branch, parentBranch ? (branch.f = parentBranch.f + 1, branch.s = parentBranch, (parentBranch.j ||= /* @__PURE__ */ new Set()).add(branch)) : branch.f = 1, branch;
 }
 function initBranch(renderer, branch, parentNode) {
-  let clone = renderer.l(parentNode.namespaceURI), cloneParent = clone.parentNode;
-  walk(cloneParent?.firstChild || clone, renderer.G, branch), branch.a = cloneParent?.firstChild || clone, branch.b = cloneParent?.lastChild || clone, renderer.x && queueRender(branch, renderer.x);
+  let clone = renderer.k(parentNode.namespaceURI), cloneParent = clone.parentNode;
+  walk(cloneParent?.firstChild || clone, renderer.G, branch), branch.a = cloneParent?.firstChild || clone, branch.b = cloneParent?.lastChild || clone, renderer.u && queueRender(branch, renderer.u);
 }
 function dynamicTagAttrs(nodeAccessor, getContent, inputIsArgs) {
   return (scope, attrsOrOp) => {
@@ -913,7 +919,12 @@ function dynamicTagAttrs(nodeAccessor, getContent, inputIsArgs) {
       return renderer.d?.(childScope, attrsOrOp);
     let content = getContent?.(scope);
     if (typeof renderer == "string")
-      setConditionalRendererOnlyChild(childScope, 0, content), attrs(childScope, 0, attrsOrOp());
+      setConditionalRendererOnlyChild(
+        childScope,
+        0,
+        content,
+        createBranchScopeWithTagNameOrRenderer
+      ), attrs(childScope, 0, attrsOrOp());
     else if (renderer.d) {
       let attributes = attrsOrOp();
       renderer.d(
@@ -931,13 +942,12 @@ function dynamicTagAttrs(nodeAccessor, getContent, inputIsArgs) {
 function createRendererWithOwner(template, rawWalks, setup, getArgs) {
   let args, id = {}, walks = rawWalks ? /* @__PURE__ */ trimWalkString(rawWalks) : " ";
   return (owner) => ({
-    j: id,
+    x: id,
     y: template,
     G: walks,
-    x: setup,
-    l: _clone,
-    u: owner,
-    J: void 0,
+    u: setup,
+    k: _clone,
+    t: owner,
     get d() {
       return args ||= getArgs?.();
     }
@@ -959,63 +969,58 @@ function createCloneableHTML(html2, ns) {
 }
 
 // src/dom/control-flow.ts
-function patchConditionals(fn) {
-  conditional = fn(conditional), conditionalOnlyChild = fn(conditionalOnlyChild);
+function conditional(nodeAccessor, ...branches) {
+  let branchAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
+  return (scope, newBranchIndexOrOp) => {
+    newBranchIndexOrOp !== scope[branchAccessor] && newBranchIndexOrOp !== DIRTY && newBranchIndexOrOp !== MARK && newBranchIndexOrOp !== CLEAN && (scope[nodeAccessor].nodeType > 1 /* Element */ ? setConditionalRenderer : setConditionalRendererOnlyChild)(
+      scope,
+      nodeAccessor,
+      branches[scope[branchAccessor] = newBranchIndexOrOp],
+      createBranchScopeWithRenderer
+    );
+  };
+}
+function patchDynamicTag(fn) {
+  dynamicTag = fn(dynamicTag);
 }
-var conditional = function(nodeAccessor, fn, getIntersection) {
+var dynamicTag = function(nodeAccessor, fn, getIntersection) {
   let rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */, intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, newRendererOrOp) => {
     if (newRendererOrOp === DIRTY) return;
     let currentRenderer = scope[rendererAccessor], op = newRendererOrOp;
     if (newRendererOrOp !== MARK && newRendererOrOp !== CLEAN) {
       let normalizedRenderer = normalizeDynamicRenderer(newRendererOrOp);
-      isDifferentRenderer(normalizedRenderer, currentRenderer) ? (scope[rendererAccessor] = normalizedRenderer, setConditionalRenderer(scope, nodeAccessor, normalizedRenderer), fn && fn(scope), op = DIRTY) : op = CLEAN;
+      isDifferentRenderer(normalizedRenderer, currentRenderer) ? (scope[rendererAccessor] = normalizedRenderer, setConditionalRenderer(
+        scope,
+        nodeAccessor,
+        normalizedRenderer,
+        createBranchScopeWithTagNameOrRenderer
+      ), fn && fn(scope), op = DIRTY) : op = CLEAN;
     }
     intersection2?.(scope, op);
   };
 };
-function setConditionalRenderer(scope, nodeAccessor, newRenderer) {
-  let prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */] || getEmptyBranch(scope[nodeAccessor]), newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
+function setConditionalRenderer(scope, nodeAccessor, newRenderer, createBranch2) {
+  let prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */] || getEmptyBranch(scope[nodeAccessor]), newBranch = newRenderer ? createBranch2(
     newRenderer,
     scope.$global,
     scope,
     prevBranch.b.parentNode
   ) : getEmptyBranch(scope[nodeAccessor]);
-  insertBranchBefore(
+  prevBranch !== newBranch && (insertBranchBefore(
     newBranch,
     prevBranch.b.parentNode,
     prevBranch.b.nextSibling
-  ), removeAndDestroyBranch(prevBranch), scope[nodeAccessor + "!" /* ConditionalScope */] = newRenderer && newBranch;
+  ), removeAndDestroyBranch(prevBranch), scope[nodeAccessor + "!" /* ConditionalScope */] = newRenderer && newBranch);
 }
-var conditionalOnlyChild = function(nodeAccessor, fn, getIntersection) {
-  let rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */, intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
-  return (scope, newRendererOrOp) => {
-    if (newRendererOrOp === DIRTY) return;
-    let currentRenderer = scope[rendererAccessor], op = newRendererOrOp;
-    if (newRendererOrOp !== MARK && newRendererOrOp !== CLEAN) {
-      let normalizedRenderer = normalizeDynamicRenderer(newRendererOrOp);
-      isDifferentRenderer(normalizedRenderer, currentRenderer) ? (currentRenderer = scope[rendererAccessor] = normalizedRenderer, setConditionalRendererOnlyChild(
-        scope,
-        nodeAccessor,
-        normalizedRenderer
-      ), fn && fn(scope), op = DIRTY) : op = CLEAN;
-    }
-    intersection2?.(scope, op);
-  };
-};
-function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
-  let prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */], referenceNode = scope[nodeAccessor], newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
-    newRenderer,
-    scope.$global,
-    scope,
-    referenceNode
-  ) : void 0;
+function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer, createBranch2) {
+  let prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */], referenceNode = scope[nodeAccessor], newBranch = newRenderer && createBranch2(newRenderer, scope.$global, scope, referenceNode);
   referenceNode.textContent = "", newBranch && insertBranchBefore(newBranch, referenceNode, null), prevBranch && destroyBranch(prevBranch), scope[nodeAccessor + "!" /* ConditionalScope */] = newBranch;
 }
 var emptyMarkerMap = /* @__PURE__ */ new Map([
-  [Symbol(), getEmptyBranch(void 0)]
+  [Symbol(), /* @__PURE__ */ getEmptyBranch(0)]
 ]), emptyMarkerArray = [
-  /* @__PURE__ */ getEmptyBranch(void 0)
+  /* @__PURE__ */ getEmptyBranch(0)
 ], emptyMap = /* @__PURE__ */ new Map(), emptyArray = [];
 function loopOf(nodeAccessor, renderer) {
   return loop(
@@ -1073,7 +1078,7 @@ function byFirstArg(name) {
   return name;
 }
 function isDifferentRenderer(a, b) {
-  return a !== b && (a?.j || 0) !== b?.j;
+  return a !== b && (a?.x || 0) !== b?.x;
 }
 
 // src/dom/signals.ts
@@ -1118,10 +1123,10 @@ function loopClosure(ownerLoopNodeAccessor, fn, getIntersection) {
   };
   return helperSignal._ = signal, helperSignal;
 }
-function conditionalClosure(ownerConditionalNodeAccessor, getRenderer, fn, getIntersection) {
-  let signal = closure(fn, getIntersection), scopeAccessor = ownerConditionalNodeAccessor + "!" /* ConditionalScope */, rendererAccessor = ownerConditionalNodeAccessor + "(" /* ConditionalRenderer */, helperSignal = (scope, value2) => {
-    let conditionalScope = scope[scopeAccessor];
-    conditionalScope && !conditionalScope.g && scope[rendererAccessor]?.j === getRenderer().j && queueSource(conditionalScope, signal, value2);
+function conditionalClosure(ownerConditionalNodeAccessor, branch, fn, getIntersection) {
+  let signal = closure(fn, getIntersection), scopeAccessor = ownerConditionalNodeAccessor + "!" /* ConditionalScope */, branchAccessor = ownerConditionalNodeAccessor + "(" /* ConditionalRenderer */, helperSignal = (scope, value2) => {
+    let ifScope = scope[scopeAccessor];
+    ifScope && !ifScope.g && scope[branchAccessor] === branch && queueSource(ifScope, signal, value2);
   };
   return helperSignal._ = signal, helperSignal;
 }
@@ -1180,7 +1185,7 @@ function queueSource(scope, signal, value2) {
 }
 function queueRender(scope, signal, value2) {
   let i = pendingRenders.length, render = {
-    m: scope,
+    l: scope,
     H: signal,
     I: value2,
     z: i
@@ -1236,7 +1241,7 @@ function runRenders() {
       }
       pendingRenders[i] = item;
     }
-    render.m.c?.E || render.H(render.m, render.I);
+    render.l.c?.E || render.H(render.l, render.I);
   }
   finishPendingScopes();
 }
@@ -1244,7 +1249,7 @@ function comparePendingRenders(a, b) {
   return getBranchDepth(a) - getBranchDepth(b) || a.z - b.z;
 }
 function getBranchDepth(render) {
-  return render.m.c?.f || 0;
+  return render.l.c?.f || 0;
 }
 
 // src/dom/abort-signal.ts
@@ -1264,7 +1269,7 @@ var prefix = "$C_", RENDERER_REGISTER_ID = prefix + "r", SET_SCOPE_REGISTER_ID =
 
 // src/dom/compat.ts
 var classIdToBranch = /* @__PURE__ */ new Map(), compat = {
-  patchConditionals,
+  patchConditionals: patchDynamicTag,
   queueEffect,
   init(warp10Noop) {
     register(SET_SCOPE_REGISTER_ID, (branch) => {
@@ -1278,7 +1283,7 @@ var classIdToBranch = /* @__PURE__ */ new Map(), compat = {
     return value2 === MARK || value2 === CLEAN || value2 === DIRTY;
   },
   isRenderer(renderer) {
-    return renderer.l !== void 0;
+    return renderer.k;
   },
   getStartNode(branch) {
     return branch.a;
@@ -1298,12 +1303,12 @@ var classIdToBranch = /* @__PURE__ */ new Map(), compat = {
   }) {
     return Array.isArray(value2) && typeof value2[0] == "string" ? getRegisteredWithScope(
       value2[0],
-      value2.length === 2 && window[runtimeId]?.[componentIdPrefix === "s" ? "_" : componentIdPrefix]?.o[value2[1]]
+      value2.length === 2 && window[runtimeId]?.[componentIdPrefix === "s" ? "_" : componentIdPrefix]?.n[value2[1]]
     ) : value2;
   },
   createRenderer(setup, clone, args) {
-    let renderer = createRenderer("", void 0, setup, args && (() => args));
-    return renderer.l = clone, renderer;
+    let renderer = createRenderer("", 0, setup, args && (() => args));
+    return renderer.k = clone, renderer;
   },
   render(out, component, renderer, args) {
     let branch = component.scope;
@@ -1315,7 +1320,7 @@ var classIdToBranch = /* @__PURE__ */ new Map(), compat = {
         normalizedInput[key === "renderBody" ? "content" : key] = input[key];
     }
     if (component.effects = prepareEffects(() => {
-      branch ? (applyArgs(branch, MARK), existing = !0) : (branch = component.scope = createScope(out.global), branch._ = renderer.u, initBranch(renderer, branch, document.body)), applyArgs(branch, args);
+      branch ? (applyArgs(branch, MARK), existing = !0) : (branch = component.scope = createScope(out.global), branch._ = renderer.t, initBranch(renderer, branch, document.body)), applyArgs(branch, args);
     }), !existing)
       return toInsertNode(branch.a, branch.b);
   }