marko 6.3.46 → 6.3.48

package/cheatsheet.md

@@ -4,20 +4,20 @@ Marko 6 = HTML superset, not JSX and not Marko 4/5 syntax. `.marko` files are co
 
 ## Golden rules
 
-1. Text interpolation: `${expr}` inside tag bodies. A bare line at the template root parses as a tag (concise mode): `Welcome aboard` fails to compile, but `p is a tag` compiles **silently** to `<p is a tag></p>`, since any line starting with a real tag name loses its words to attributes. Wrap text in an element (`<p>Welcome aboard</p>`) or prefix the line with `--` and a space (`-- Welcome ${name}`). Attributes take raw JS after `=` with no braces or quotes: `<div title=user.name data-n=1 + 1>`.
-2. A top-level `>` hugging its operand in an attribute value **ends the tag** silently: `<button disabled=count>=8 onClick() {…}>More</button>` is `disabled=count` plus the text `=8 onClick() {…}>`, so the handler never binds. Space a `>=` (`disabled=count >= 8`), and parenthesize a bare `>` comparison (`hidden=(a > b)`) and a TS type argument `<let/s=(new Set<string>())>`. Do not move the type onto the tag variable instead: `<let/s:Set<string>=new Set()>` compiles but fails type-check with TS2322 (the annotation does not flow into the initializer). A `>` nested inside `(…)`/`{…}`/`[…]` is safe (`class={ big: n > 1 }`). `<` never closes a tag (`disabled=count<=1` is fine).
+1. Text interpolation: `${expr}` inside tag bodies. A bare line at the template root parses as a tag (concise mode): `Welcome aboard` fails to compile, but `p is a tag` compiles silently to `<p is a tag></p>`, since any line starting with a real tag name loses its words to attributes. Wrap text in an element (`<p>Welcome aboard</p>`) or prefix the line with `--` and a space (`-- Welcome ${name}`). Attributes take raw JS after `=` with no braces or quotes: `<div title=user.name data-n=1 + 1>`.
+2. A top-level `>` hugging its operand in an attribute value ends the tag silently: `<button disabled=count>=8 onClick() {…}>More</button>` is `disabled=count` plus the text `=8 onClick() {…}>`, so the handler never binds. Space a `>=` (`disabled=count >= 8`); parenthesize a bare `>` comparison (`hidden=(a > b)`) and a TS type argument (`<let/s=(new Set<string>())>`, else it parses as `new Set() < string`). Do not move the type onto the tag variable instead: `<let/s:Set<string>=new Set()>` compiles but fails type-check with TS2322 (the annotation does not flow into the initializer). A `>` nested inside `(…)`/`{…}`/`[…]` is safe (`class={ big: n > 1 }`). `<` never closes a tag (`disabled=count<=1` is fine).
 3. State: `<let/name=initial>` (slash then var name!). Update by plain assignment in an event handler: `count++`, `text = "hi"`. No setState, no hooks.
-4. Derived values: `<const/total=items.length * price>` auto-recomputes. Never use an effect to derive state. A tag variable is whatever the tag returns, not the attribute you passed. `<let/draft=input.text>` re-runs on every `input.text` change but returns state it controls, so `draft` keeps your edits; only a controllable `<let>` (`valueChange=`, or `<let/draft:=input.text>`) takes the new value. Pick by intent: recomputes → `<const>`, seeds then diverges → `<let>`. A `<let>` you never assign is just a frozen `<const>`. Updates batch: mid-handler a reassigned `<let>` reads current but its derived `<const>` reads stale, so recompute from the `<let>`.
+4. Derived values: `<const/total=items.length * price>` auto-recomputes. Never use an effect to derive state. A tag variable is whatever the tag returns, not the attribute passed to it. `<let/draft=input.text>` re-runs on every `input.text` change but returns state it controls, so `draft` keeps its edits; only a controllable `<let>` (`valueChange=`, or `<let/draft:=input.text>`) takes the new value. Pick by intent: recomputes → `<const>`, seeds then diverges → `<let>`. A `<let>` that is never assigned is just a frozen `<const>`. Updates batch: mid-handler a reassigned `<let>` reads current but its derived `<const>` reads stale, so recompute from the `<let>`.
 5. Never mutate state in place: `items.push(x)` does not update the UI. Always reassign:
    - add: `items = items.concat(x)`
    - remove: `items = items.toSpliced(i, 1)`
    - update: `items = items.toSpliced(i, 1, { ...item, done: true })`
    - object: `user = { ...user, name }`
 6. Events: method shorthand `onClick() { ... }` or `onClick=fn`. Handlers receive `(event, element)`; delegation means the element is the second parameter, not `event.currentTarget`: `onSubmit(e) { e.preventDefault(); save() }`, `onClick(e, el) { el.focus() }`. Don't sync input values through `onInput`/`onChange`; that's what the change handlers below are for. Prefix with `async` to `await` in the body: `async onClick() { await save() }`.
-7. Native inputs are uncontrolled by default: `value=` sets the default value — later writes update what `form.reset()` restores, never a dirty field's display. Adding the matching `*Change` handler is what makes them controlled: `valueChange` on `<input>`/`<textarea>`/`<select>`, `checkedChange` on checkboxes/radios, `openChange` on `<details>`/`<dialog>`. `value:=text` is the shorthand for `value=text valueChange(v) { text = v }`. (`<textarea value:=text/>`: value attribute, not body.) `:=` differs by operand: on an identifier (`value:=text`) it assigns that variable; on a member expression (`<let/count:=input.count>` in a child) it wires `input.countChange`, so the child is controlled when the parent passes that handler and keeps its own state when it doesn't.
+7. Native inputs are uncontrolled by default: `value=` sets the default value. Later writes update what `form.reset()` restores, never a dirty field's display. Adding the matching `*Change` handler is what makes them controlled: `valueChange` on `<input>`/`<textarea>`/`<select>`, `checkedChange` on checkboxes/radios, `openChange` on `<details>`/`<dialog>`. `value:=text` is the shorthand for `value=text valueChange(v) { text = v }`. (`<textarea value:=text/>`: value attribute, not body.) `:=` differs by operand: on an identifier (`value:=text`) it assigns that variable; on a member expression (`<let/count:=input.count>` in a child) it wires `input.countChange`, so the child is controlled when the parent passes that handler and keeps its own state when it doesn't.
 8. Transform in the handler when needed; number inputs give strings: `<input type="number" value=n valueChange(v) { n = +v }>`, or `value:parseFloat:=n`. Uncommitted edits (debounce, commit on blur) never sync through a `<script>`; that is rule 4's derive-by-effect trap. Pair a controllable `<let/value:=input.value>` with `<let/pending=null>`, show `<const/draft=pending ?? value>`, collect with `valueChange(v) { pending = v }`, and commit by assigning `value = pending; pending = null`. Prefer that to calling `input.valueChange(...)`, which throws unless every caller controls the tag.
 9. Radio/checkbox groups: `checkedValue:=picked` on each input (shared var, distinct `value=`); the match is checked; array var for multi-checkbox. Dropdown: `<select value:=picked>`.
-10. Module-level values, helpers and type aliases need `static`: `static const LIMIT = 10`, `static function fmt(n) {…}`, `static type Row = {…}`. Without it `function fmt(n) {` parses as a tag: ``Unable to find entry point for custom tag `<function>` ``, an error that points at `static`. Prefer it to `<const>` for anything that never changes: `<const/LIMIT=10>` emits a per-instance signal plus a `$setup` call. `server`/`client` narrow `static` to one platform (`client import { Chart } from "chart"`); the binding is `undefined` on the other, so read a `client` one only from `<script>`/handlers/`<lifecycle>` — reading it while rendering throws `is not a function` during SSR.
+10. Module-level values, helpers and type aliases need `static`: `static const LIMIT = 10`, `static function fmt(n) {…}`, `static type Row = {…}`. Prefer it to `<const>` for anything that never changes: `<const/LIMIT=10>` runs per instance, `static` hoists it to a module constant. `server`/`client` narrow `static` to one platform (`client import { Chart } from "chart"`); the binding is `undefined` on the other, so read a `client` one only from `<script>`/handlers/`<lifecycle>`. Reading it while rendering throws `is not a function` during SSR.
 
 ## Canonical component
 
@@ -58,13 +58,14 @@ Marko 6 = HTML superset, not JSX and not Marko 4/5 syntax. `.marko` files are co
 ## Control flow
 
 ```marko
-<if=(count > 10)> A </if>   // parenthesize comparisons; a bare `>` ends the tag (rule 2)
+<if=(count > 10)> A </if>   // parenthesize comparisons; a hugging `>` ends the tag (rule 2)
 <else if=other> B </else>
 <else> C </else>
 
 <for|item, index| of=list by="id"> ${item.name} </for>   // by keys the loop (no key= attr!)
-<for|city| of=cities by=(city) => city> ${city} </for>    // primitives: by takes a function; the loop param is not in scope in by=, so by=city is an undefined variable
-<for|i| from=0 until=5> ${i} </for>                       // 0..4
+<for|city| of=cities by=(city) => city> ${city} </for>    // primitives: by takes a function, evaluated before the loop
+<for|i| from=0 until=5> ${i} </for>                       // 0..4 (to= is inclusive, step= optional)
+<for|key, value| in=obj> ${key}=${value} </for>           // object entries
 
 <show=open> stays mounted, keeps state (form drafts) when hidden </show>
 ```
@@ -125,17 +126,20 @@ Don't fetch while rendering: start data loads early, pass the promise through th
 </div>
 ```
 
-- Repeated attr tags (many `<@tab ...>`) arrive as the singular prop `input.tab`, which is iterable but not an array: `input.tab[i]` and `input.tab.length` are undefined. To index or count, spread first: `<const/tabs=[...input.tab ?? []]>` then `tabs[active]`/`tabs.length`. Looping directly is fine: `<for|tab| of=input.tab>`.
+- Repeated attr tags (many `<@tab ...>`) arrive as the singular prop `input.tab`: the first tab's attrs, made iterable, not an array: `input.tab[i]` and `input.tab.length` are undefined. To index or count, spread first: `<const/tabs=[...input.tab ?? []]>` then `tabs[active]`/`tabs.length`. Looping directly is fine: `<for|tab| of=input.tab>`.
+- Text: `0` renders; `false`/`null`/`undefined`/`""`/`NaN` render nothing. `$!{html}` inserts raw HTML.
 - Conditional attrs: `false`/`null` attrs are omitted from HTML. `aria-selected` etc. want strings: `aria-selected=(i === active && "true")`.
-- `class=` / `style=` accept strings, objects, arrays: `class=["btn", { active }]`, `style={ color }` (single braces). `style=` keys are kebab-case CSS names (`{ "background-color": c }`), not camelCase.
+- `class=` / `style=` accept strings, objects, arrays: `class=["btn", { active }]`, `style={ color }` (single braces). `style=` keys are kebab-case CSS names (`{ "background-color": c }`); camelCase keys are written verbatim. `...input` spreads attrs onto a tag; `content=` passes body content as an attr.
+- `<define/Panel|input|>` declares a local tag inline; `<${Toolbar.Undo}/>` renders a dynamic tag (falsy name → content only).
+- `<select value:=picked>`: every `<option>` needs `value=`; `multiple` binds an array.
 - `<id/x>` mints a collision-free id for label/input wiring (`<label for=x>`/`<input id=x>`); don't hardcode ids in reusable tags; `<id/x=input.id>` reuses a caller's.
 - Head tags render where written: a `<title>`/`<meta>`/`<link>` inside a nested component stays in the body, giving a second title or an inert canonical. `<head>` is already written by the time descendants render, so page meta has to be known before it: under @marko/run declare it in the route's `+meta.*` file and read `$global.meta` from the layout that owns `<head>`, otherwise pass it down or set it on `$global` at the render call.
 
 ## Sharing data (`$global`)
 
-- Read request-scoped `$global` from any template, no threading: `${$global.messages.title}`. Otherwise prop-drill through `input`; there is no provider/consumer context API.
+- Read request-scoped `$global` from any template, no threading: `${$global.messages.title}`. Otherwise pass data down through `input`.
 - Populate at the render call: `template.render({ $global: { messages } })`. Under @marko/run a middleware's `return next({ messages })` merges into `$global.data`.
-- `$global` is not serialized to the client by default. Mark any key the browser itself evaluates, e.g. an event handler, a `<script>`, markup the browser (re)creates, or a `<const>` that recomputes from state: `$global.serializedGlobals = { messages: true }` at the render call (under @marko/run, `context.serializedGlobals.data = true`; it ships `params`/`url` already). What the server already rendered needs no opt-in.
+- `$global` is not serialized to the client by default. Mark any key the browser itself evaluates, e.g. an event handler, a `<script>`, markup the browser (re)creates, or a `<const>` that recomputes from state: `$global.serializedGlobals = { messages: true }` at the render call (under @marko/run, `context.serializedGlobals.data = true`; it ships `params`/`url` already). What the server already rendered needs no opt-in; a debug build logs an unserialized key read in the browser.
 
 ## Client-side effects
 
@@ -166,7 +170,7 @@ Imperative libs (charts, maps) needing mount/update/destroy: use `<lifecycle>`,
 
 ## Lazy loading
 
-Defer a tag's JS into its own bundle until a trigger fires: `render`, `visible#sel`, `idle`, `media(...)`, `on-click#sel` (combine with `|`). Server HTML renders immediately; `<try>` shows a `@placeholder` while loading. Don't hand-roll an `IntersectionObserver`.
+Defer a tag's JS into its own bundle until a trigger fires: `visible#sel`, `idle`, `media(...)`, `on-click#sel` (combine with `|`), or `render` alone. Server HTML renders immediately; in the browser `<try>` shows a `@placeholder` while loading. Don't hand-roll an `IntersectionObserver`.
 
 ```marko
 import PriceChart from "<price-chart>" with { load: "visible#chart" }
@@ -196,7 +200,7 @@ Each left-hand habit is an error or silently wrong.
 | Wrong (React/Vue/Marko5 habit)                              | Right                                                                                |
 | ----------------------------------------------------------- | ------------------------------------------------------------------------------------ |
 | `disabled=n>=8` (hugging `>` in a value)                    | `disabled=n >= 8` or `disabled=(n >= 8)`; a hugging `>` silently closes the tag      |
-| `<let/s=new Set<string>()>` (type argument in a value)      | `<let/s=(new Set<string>())>`; a tag-var annotation fails type-check                 |
+| `<let/s=new Set<string>()>` (type argument in a value)      | `<let/s=(new Set<string>())>`; else it parses as `new Set() < string`                |
 | `{expr}` in markup, `className`, `key=`, `style={{...}}`    | `${expr}`, `class`, `by=` on `<for>`, `style={...}`                                  |
 | `onClick={() => ...}` / `@click` / `on-click("name")`       | `onClick() { ... }`                                                                  |
 | `const [x, setX] = useState()` / `state` / `class {}` block | `<let/x=0>` then `x = 1`                                                             |
@@ -213,18 +217,17 @@ Each left-hand habit is an error or silently wrong.
 | `el.focus()` on a ref                                       | `el().focus()` inside `<script>`/handler                                             |
 | `input.tab[0]` / `input.tab.length`                         | `[...input.tab ?? []]` first (attr tags are iterables, not arrays)                   |
 | bare text on its own line at template root                  | wrap in an element (`<p>...`), or prefix the line with `--` and a space              |
-| `by=item` using the loop variable                           | `by="propName"` or `by=(item) => key`; `by=` is evaluated outside the loop           |
 | `onInput(e) { q = e.target.value }` to sync an input        | `value:=q`; the change handler owns the value                                        |
 | `<script>` syncing a draft field back from `value`          | `<const/draft=pending ?? value>`; a `<let>` holds only the uncommitted edit          |
 | fetching inside the component that renders the data         | start the promise early (route handler / top of template), pass it down to `<await>` |
 | `style={ backgroundColor: c }` (camelCase keys)             | `style={ "background-color": c }` (kebab-case)                                       |
 | `this.querySelector` / `this.getRootNode()` in `<script>`   | element ref getter: `<div/el>` then `el()` (there is no `this`)                      |
-| `<div/my-el>` / `<input/card-input>` (hyphen in tag var)    | valid JS identifier: `<div/myEl>` (the error won't name the hyphen)                  |
 | hand-rolled radios `checked=x checkedChange(v){…}`          | `checkedValue:=picked` on each radio (shared var, distinct `value=`)                 |
 | hand-rolled `IntersectionObserver` to defer a widget's JS   | `import W from "<w>" with { load: "visible#sel" }`                                   |
 | imperative lib wired through `<script>` mount + cleanup     | `<lifecycle onMount/onUpdate/onDestroy>` (keeps `this` across all three)             |
 | `createContext`/provider to share data                      | `input` (prop drilling) or request-scoped `$global`                                  |
 | `<title>`/`<meta>` in a nested component                    | put page meta in the layout that owns `<head>`; head tags never hoist                |
+| `<option selected=...>` in a controlled `<select>`          | `value=` on every option and `value:=picked` on the select                           |
 | `$global.x` in client-reactive code, not allow-listed       | `$global.serializedGlobals = { x: true }` first; otherwise the read is `undefined`   |
 | hand-namespaced global classes (`.my-card-title`)           | `<style/styles>` + `class=styles.card` (scoped CSS modules)                          |
 | `tsc --noEmit` to type check templates                      | `mtc`; `tsc` skips `.marko` files and exits 0                                        |

package/dist/common/accessor.d.ts

@@ -2,7 +2,6 @@ import * as AccessorPrefix from "./constants/accessor-prefix";
 import * as AccessorProp from "./constants/accessor-prop";
 import * as ClosureSignalProp from "./constants/closure-signal-prop";
 import * as KeyedScopesProp from "./constants/keyed-scopes-prop";
-import * as LoadSignalValue from "./constants/load-signal-value";
 import * as PendingRenderProp from "./constants/pending-render-prop";
 import * as RendererProp from "./constants/renderer-prop";
 type AccessorPrefix = AccessorPrefix.Value;
@@ -17,5 +16,3 @@ type ClosureSignalProp = ClosureSignalProp.Value;
 export { ClosureSignalProp };
 type KeyedScopesProp = KeyedScopesProp.Value;
 export { KeyedScopesProp };
-type LoadSignalValue = LoadSignalValue.Value;
-export { LoadSignalValue };

package/dist/common/accessor.debug.d.ts

@@ -2,7 +2,6 @@ import * as AccessorPrefix from "./constants/accessor-prefix.debug";
 import * as AccessorProp from "./constants/accessor-prop.debug";
 import * as ClosureSignalProp from "./constants/closure-signal-prop.debug";
 import * as KeyedScopesProp from "./constants/keyed-scopes-prop.debug";
-import * as LoadSignalValue from "./constants/load-signal-value.debug";
 import * as PendingRenderProp from "./constants/pending-render-prop.debug";
 import * as RendererProp from "./constants/renderer-prop.debug";
 type AccessorPrefix = AccessorPrefix.Value;
@@ -17,5 +16,3 @@ type ClosureSignalProp = ClosureSignalProp.Value;
 export { ClosureSignalProp };
 type KeyedScopesProp = KeyedScopesProp.Value;
 export { KeyedScopesProp };
-type LoadSignalValue = LoadSignalValue.Value;
-export { LoadSignalValue };

package/dist/common/constants/resume-symbol.d.ts

@@ -1,7 +1,10 @@
-export declare const Node = "*";
+export declare const Node = "$";
+export declare const EmptyText = "%";
+export declare const HtmlStart = "&";
+export declare const HtmlEnd = "'";
 export declare const BranchStart = "[";
 export declare const BranchEnd = "]";
-export declare const BranchEndNativeTag = "'";
+export declare const BranchEndNativeTag = "(";
 export declare const BranchEndSingleNode = "|";
 export declare const BranchEndOnlyChildInParent = ")";
 export declare const BranchEndSingleNodeOnlyChildInParent = "}";

package/dist/common/helpers.d.ts

@@ -15,3 +15,5 @@ export declare function normalizeDynamicRenderer<Renderer>(value: any): Renderer
 export declare const decodeAccessor: (num: number) => string;
 export declare let branchesEnabled: undefined | 1;
 export declare function withBranches<T>(runtime?: T): T;
+export declare let dynamicHtmlEnabled: undefined | 1;
+export declare function withDynamicHtml<T>(runtime: T): T;

package/dist/debug/dom/catch.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-WyMgkHne.js");
+const require_control_flow = require("../dom-CA_HiiES.js");
 //#region src/dom/catch.feat.ts
 const handlePendingTry = (fn, scope, branch) => {
 	while (branch) {

package/dist/debug/dom/catch.feat.mjs

@@ -1,4 +1,4 @@
-import { An as PendingEffects, Sn as Scope, g as renderCatch, jn as PendingRenders, kn as ParentBranch, nn as installCatch, rn as placeholderShown, tn as caughtError, wn as ClosestBranch, xn as Pending } from "../dom-CIt3_Sdm.mjs";
+import { An as ParentBranch, Cn as Scope, Mn as PendingRenders, Sn as Pending, Tn as ClosestBranch, g as renderCatch, jn as PendingEffects, nn as installCatch, rn as placeholderShown, tn as caughtError } from "../dom-DBMLPLeE.mjs";
 //#region src/dom/catch.feat.ts
 const handlePendingTry = (fn, scope, branch) => {
 	while (branch) {

package/dist/debug/dom/controllable-input.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-WyMgkHne.js");
+const require_control_flow = require("../dom-CA_HiiES.js");
 //#region src/dom/controllable-input.feat.ts
 require_control_flow.controllableScripts[0] = require_control_flow._attr_input_checked_script;
 require_control_flow.controllableScripts[1] = require_control_flow._attr_input_checkedValue_script;

package/dist/debug/dom/controllable-input.feat.mjs

@@ -1,4 +1,4 @@
-import { A as _attr_input_value_script, C as _attr_input_checkedValue_script, T as _attr_input_checked_script, z as controllableScripts } from "../dom-CIt3_Sdm.mjs";
+import { A as _attr_input_value_script, C as _attr_input_checkedValue_script, T as _attr_input_checked_script, z as controllableScripts } from "../dom-DBMLPLeE.mjs";
 //#region src/dom/controllable-input.feat.ts
 controllableScripts[0] = _attr_input_checked_script;
 controllableScripts[1] = _attr_input_checkedValue_script;

package/dist/debug/dom/controllable-open.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-WyMgkHne.js");
+const require_control_flow = require("../dom-CA_HiiES.js");
 //#region src/dom/controllable-open.feat.ts
 require_control_flow.controllableScripts[4] = require_control_flow._attr_details_or_dialog_open_script;
 //#endregion

package/dist/debug/dom/controllable-open.feat.mjs

@@ -1,4 +1,4 @@
-import { y as _attr_details_or_dialog_open_script, z as controllableScripts } from "../dom-CIt3_Sdm.mjs";
+import { y as _attr_details_or_dialog_open_script, z as controllableScripts } from "../dom-DBMLPLeE.mjs";
 //#region src/dom/controllable-open.feat.ts
 controllableScripts[4] = _attr_details_or_dialog_open_script;
 //#endregion

package/dist/debug/dom/controllable-select.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-WyMgkHne.js");
+const require_control_flow = require("../dom-CA_HiiES.js");
 //#region src/dom/controllable-select.feat.ts
 require_control_flow.controllableScripts[3] = require_control_flow._attr_select_value_script;
 //#endregion

package/dist/debug/dom/controllable-select.feat.mjs

@@ -1,4 +1,4 @@
-import { N as _attr_select_value_script, z as controllableScripts } from "../dom-CIt3_Sdm.mjs";
+import { N as _attr_select_value_script, z as controllableScripts } from "../dom-DBMLPLeE.mjs";
 //#region src/dom/controllable-select.feat.ts
 controllableScripts[3] = _attr_select_value_script;
 //#endregion

package/dist/debug/dom/controllable-textarea.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-WyMgkHne.js");
+const require_control_flow = require("../dom-CA_HiiES.js");
 //#region src/dom/controllable-textarea.feat.ts
 require_control_flow.controllableScripts[2] = require_control_flow._attr_input_value_script;
 //#endregion

package/dist/debug/dom/controllable-textarea.feat.mjs

@@ -1,4 +1,4 @@
-import { A as _attr_input_value_script, z as controllableScripts } from "../dom-CIt3_Sdm.mjs";
+import { A as _attr_input_value_script, z as controllableScripts } from "../dom-DBMLPLeE.mjs";
 //#region src/dom/controllable-textarea.feat.ts
 controllableScripts[2] = _attr_input_value_script;
 //#endregion

package/dist/debug/dom/controllable.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-WyMgkHne.js");
+const require_control_flow = require("../dom-CA_HiiES.js");
 require("./controllable-input.feat.js");
 require("./controllable-open.feat.js");
 require("./controllable-select.feat.js");

package/dist/debug/dom/controllable.feat.mjs

@@ -1,4 +1,4 @@
-import { F as _controllable_open, I as _controllable_select, L as _controllable_textarea, P as _controllable_input, R as controllableRenders } from "../dom-CIt3_Sdm.mjs";
+import { F as _controllable_open, I as _controllable_select, L as _controllable_textarea, P as _controllable_input, R as controllableRenders } from "../dom-DBMLPLeE.mjs";
 import "./controllable-input.feat.mjs";
 import "./controllable-open.feat.mjs";
 import "./controllable-select.feat.mjs";

package/dist/debug/dom/dynamic-tag-var.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-WyMgkHne.js");
+const require_control_flow = require("../dom-CA_HiiES.js");
 //#region src/dom/dynamic-tag-var.feat.ts
 const elementGetter = (branch) => () => require_control_flow._el_read(branch[require_control_flow.StartNode]);
 require_control_flow.installDynamicTagVar((branch) => branch[require_control_flow.TagVariable](elementGetter(branch)));

package/dist/debug/dom/dynamic-tag-var.feat.mjs

@@ -1,4 +1,4 @@
-import { Nn as StartNode, Pn as TagVariable, Zt as DYNAMIC_TAG_VAR_REGISTER_ID, gt as _resume, kt as _el_read, m as installDynamicTagVar } from "../dom-CIt3_Sdm.mjs";
+import { Fn as TagVariable, Pn as StartNode, Zt as DYNAMIC_TAG_VAR_REGISTER_ID, gt as _resume, kt as _el_read, m as installDynamicTagVar } from "../dom-DBMLPLeE.mjs";
 //#region src/dom/dynamic-tag-var.feat.ts
 const elementGetter = (branch) => () => _el_read(branch[StartNode]);
 installDynamicTagVar((branch) => branch[TagVariable](elementGetter(branch)));

package/dist/debug/dom/placeholder.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-WyMgkHne.js");
+const require_control_flow = require("../dom-CA_HiiES.js");
 //#region src/dom/placeholder.feat.ts
 require_control_flow.registeredValues[require_control_flow.PLACEHOLDER_DISMISS_REGISTER_ID] = (tryBranch) => {
 	if (tryBranch["#PlaceholderBranch"]) {

package/dist/debug/dom/placeholder.feat.mjs

@@ -1,4 +1,4 @@
-import { Ct as registeredValues, Kt as destroyBranch, Mn as PlaceholderBranch, Qt as PLACEHOLDER_DISMISS_REGISTER_ID } from "../dom-CIt3_Sdm.mjs";
+import { Ct as registeredValues, Kt as destroyBranch, Nn as PlaceholderBranch, Qt as PLACEHOLDER_DISMISS_REGISTER_ID } from "../dom-DBMLPLeE.mjs";
 //#region src/dom/placeholder.feat.ts
 registeredValues[PLACEHOLDER_DISMISS_REGISTER_ID] = (tryBranch) => {
 	if (tryBranch["#PlaceholderBranch"]) {

package/dist/debug/{dom-WyMgkHne.js → dom-CA_HiiES.js}

@@ -178,6 +178,11 @@ function withBranches(runtime) {
 	branchesEnabled = 1;
 	return runtime;
 }
+let dynamicHtmlEnabled;
+function withDynamicHtml(runtime) {
+	dynamicHtmlEnabled = 1;
+	return runtime;
+}
 //#endregion
 //#region src/common/errors.ts
 const lowercaseEventHandlerReg = /^on[a-z]/;
@@ -944,7 +949,7 @@ function init(runtimeId = "M") {
 							while (startVisit.previousSibling && ~visits.indexOf(startVisit = startVisit.previousSibling));
 							branch["_"] ??= visitScope;
 							branch[EndNode] = branch[StartNode] = startVisit;
-							if (visitType === "'") branch[getDebugKey(0, startVisit)] = startVisit;
+							if (visitType === "(") branch[getDebugKey(0, startVisit)] = startVisit;
 						} else {
 							curBranchScopes = push(curBranchScopes, branch);
 							if (accessor) {
@@ -1011,6 +1016,7 @@ function init(runtimeId = "M") {
 			let lastToken;
 			let lastTokenIndex;
 			let visitBranches;
+			let htmlStart;
 			let embedAnchor;
 			serializeContext._ = registeredValues;
 			if (render.m) throw new Error(`Marko rendered multiple times with $global.runtimeId as ${JSON.stringify(runtimeId)} and $global.renderId as ${JSON.stringify(renderId)}. Ensure each render into a page has a unique $global.renderId.`);
@@ -1029,11 +1035,14 @@ function init(runtimeId = "M") {
 					visitText = visit.data;
 					visitType = visitText[lastTokenIndex++];
 					visitScope = getScope(nextToken());
-					if (visitType === "*") {
-						const prev = visit.previousSibling;
-						visitScope[nextToken()] = prev && (prev.nodeType < 8 || prev.data) ? prev : visit.parentNode.insertBefore(new Text(), visit);
-					} else if (branchesEnabled) (visitBranches ||= createVisitBranches())();
-					else if (lazyEnabled && render.b) visits[retained++] = visit;
+					if (dynamicHtmlEnabled && visitType > "%" && visitType <= "'") if (visitType === "&") htmlStart = visit;
+					else {
+						visitScope[nextToken()] = htmlStart;
+						visitScope[DynamicHTMLLastChild + lastToken] = visit;
+					}
+					else if (branchesEnabled && visitType > "'") (visitBranches ||= createVisitBranches())();
+					else if (lazyEnabled && render.b && visitType > "%") visits[retained++] = visit;
+					else visitScope[nextToken()] = visitType === "$" ? visit.previousSibling : visit.parentNode.insertBefore(new Text(), visit);
 				}
 				if (embedRenders && !embedAnchor && visit) embedRenders.set(embedAnchor = visit.parentNode.insertBefore(new Text(), visit.nextSibling), [renderId, scopeLookup]);
 				visits.length = retained;
@@ -1283,14 +1292,14 @@ function _attrs_script(scope, nodeAccessor) {
 	controllableScripts[scope[ControlledType + nodeAccessor]]?.(scope, nodeAccessor);
 	for (const name in events) _on(el, name, events[name]);
 }
-function _html(scope, value, accessor) {
+const _html = /*@__PURE__*/ withDynamicHtml(function _html(scope, value, accessor) {
 	const firstChild = scope[accessor];
 	const parentNode = firstChild.parentNode;
 	const lastChild = scope["DynamicHTMLLastChild:" + accessor] || firstChild;
 	const newContent = parseHTML(_to_text(value), parentNode.namespaceURI);
 	insertChildNodes(parentNode, firstChild, scope[accessor] = newContent.firstChild || newContent.appendChild(new Text()), scope[DynamicHTMLLastChild + accessor] = newContent.lastChild);
 	removeChildNodes(firstChild, lastChild);
-}
+});
 function normalizeClientRender(value) {
 	const renderer = normalizeDynamicRenderer(value);
 	if (renderer) if (renderer["id"]) return renderer;
@@ -2864,6 +2873,12 @@ Object.defineProperty(exports, "queueEffect", {
 		return queueEffect;
 	}
 });
+Object.defineProperty(exports, "queueRender", {
+	enumerable: true,
+	get: function() {
+		return queueRender;
+	}
+});
 Object.defineProperty(exports, "ready", {
 	enumerable: true,
 	get: function() {

package/dist/debug/{dom-CIt3_Sdm.mjs → dom-DBMLPLeE.mjs}

@@ -177,6 +177,11 @@ function withBranches(runtime) {
 	branchesEnabled = 1;
 	return runtime;
 }
+let dynamicHtmlEnabled;
+function withDynamicHtml(runtime) {
+	dynamicHtmlEnabled = 1;
+	return runtime;
+}
 //#endregion
 //#region src/common/errors.ts
 const lowercaseEventHandlerReg = /^on[a-z]/;
@@ -943,7 +948,7 @@ function init(runtimeId = "M") {
 							while (startVisit.previousSibling && ~visits.indexOf(startVisit = startVisit.previousSibling));
 							branch["_"] ??= visitScope;
 							branch[EndNode] = branch[StartNode] = startVisit;
-							if (visitType === "'") branch[getDebugKey(0, startVisit)] = startVisit;
+							if (visitType === "(") branch[getDebugKey(0, startVisit)] = startVisit;
 						} else {
 							curBranchScopes = push(curBranchScopes, branch);
 							if (accessor) {
@@ -1010,6 +1015,7 @@ function init(runtimeId = "M") {
 			let lastToken;
 			let lastTokenIndex;
 			let visitBranches;
+			let htmlStart;
 			let embedAnchor;
 			serializeContext._ = registeredValues;
 			if (render.m) throw new Error(`Marko rendered multiple times with $global.runtimeId as ${JSON.stringify(runtimeId)} and $global.renderId as ${JSON.stringify(renderId)}. Ensure each render into a page has a unique $global.renderId.`);
@@ -1028,11 +1034,14 @@ function init(runtimeId = "M") {
 					visitText = visit.data;
 					visitType = visitText[lastTokenIndex++];
 					visitScope = getScope(nextToken());
-					if (visitType === "*") {
-						const prev = visit.previousSibling;
-						visitScope[nextToken()] = prev && (prev.nodeType < 8 || prev.data) ? prev : visit.parentNode.insertBefore(new Text(), visit);
-					} else if (branchesEnabled) (visitBranches ||= createVisitBranches())();
-					else if (lazyEnabled && render.b) visits[retained++] = visit;
+					if (dynamicHtmlEnabled && visitType > "%" && visitType <= "'") if (visitType === "&") htmlStart = visit;
+					else {
+						visitScope[nextToken()] = htmlStart;
+						visitScope[DynamicHTMLLastChild + lastToken] = visit;
+					}
+					else if (branchesEnabled && visitType > "'") (visitBranches ||= createVisitBranches())();
+					else if (lazyEnabled && render.b && visitType > "%") visits[retained++] = visit;
+					else visitScope[nextToken()] = visitType === "$" ? visit.previousSibling : visit.parentNode.insertBefore(new Text(), visit);
 				}
 				if (embedRenders && !embedAnchor && visit) embedRenders.set(embedAnchor = visit.parentNode.insertBefore(new Text(), visit.nextSibling), [renderId, scopeLookup]);
 				visits.length = retained;
@@ -1282,14 +1291,14 @@ function _attrs_script(scope, nodeAccessor) {
 	controllableScripts[scope[ControlledType + nodeAccessor]]?.(scope, nodeAccessor);
 	for (const name in events) _on(el, name, events[name]);
 }
-function _html(scope, value, accessor) {
+const _html = /*@__PURE__*/ withDynamicHtml(function _html(scope, value, accessor) {
 	const firstChild = scope[accessor];
 	const parentNode = firstChild.parentNode;
 	const lastChild = scope["DynamicHTMLLastChild:" + accessor] || firstChild;
 	const newContent = parseHTML(_to_text(value), parentNode.namespaceURI);
 	insertChildNodes(parentNode, firstChild, scope[accessor] = newContent.firstChild || newContent.appendChild(new Text()), scope[DynamicHTMLLastChild + accessor] = newContent.lastChild);
 	removeChildNodes(firstChild, lastChild);
-}
+});
 function normalizeClientRender(value) {
 	const renderer = normalizeDynamicRenderer(value);
 	if (renderer) if (renderer["id"]) return renderer;
@@ -2083,4 +2092,4 @@ function byFirstArg(name) {
 	return name;
 }
 //#endregion
-export { _attrs_script as $, $signal as $t, _attr_input_value_script as A, PendingEffects as An, _for_closure as At, _attr as B, _return as Bt, _attr_input_checkedValue_script as C, AwaitCounter as Cn, registeredValues as Ct, _attr_input_value_attribute_default as D, Global as Dn, _closure_get as Dt, _attr_input_value as E, Gen$1 as En, _closure as Et, _controllable_open as F, _id as Ft, _attr_nonce as G, _assert_init as Gt, _attr_class_item as H, _script as Ht, _controllable_select as I, _if_closure as It, _attr_style_items as J, removeAndDestroyBranch as Jt, _attr_style as K, destroyBranch as Kt, _controllable_textarea as L, _let as Lt, _attr_select_value_default as M, PlaceholderBranch as Mn, _global_read as Mt, _attr_select_value_script as N, StartNode as Nn, _hoist as Nt, _attr_input_value_default as O, Load as On, _const as Ot, _controllable_input as P, TagVariable as Pn, _hoist_resume as Pt, _attrs_partial_content as Q, PLACEHOLDER_DISMISS_REGISTER_ID as Qt, controllableRenders as R, _let_change as Rt, _attr_input_checkedValue_default as S, Scope as Sn, readyFailed as St, _attr_input_checked_script as T, EndNode as Tn, _child_setup as Tt, _attr_class_items as U, _var as Ut, _attr_class as V, _return_change as Vt, _attr_content as W, _var_change as Wt, _attrs_content as X, _on as Xt, _attrs as Y, syncGen as Yt, _attrs_partial as Z, DYNAMIC_TAG_VAR_REGISTER_ID as Zt, _attr_details_or_dialog_open as _, Clone as _n, _var_resume as _t, _for_in as a, queueAsyncRender as an, _text_content as at, _attr_input_checked as b, Setup as bn, initEmbedded as bt, _for_until as c, runEffects as cn, toInsertNode as ct, _show as d, forOf as dn, _content_resume as dt, $signalReset as en, _html as et, _try as f, forTo as fn, createAndSetupBranch as ft, renderCatch as g, _call as gn, _resume as gt, patchDynamicTag as h, _hoist_read_error as hn, _el as ht, _dynamic_tag_content as i, prepareEffects as in, _text as it, _attr_select_value as j, PendingRenders as jn, _for_selector as jt, _attr_input_value_dynamic_default as k, ParentBranch as kn, _el_read as kt, _if as l, runId as ln, _content as lt, installDynamicTagVar as m, _assert_hoist as mn, setupBranch as mt, _await_promise as n, installCatch as nn, _style_rule_item as nt, _for_of as o, queueEffect as on, _to_text as ot, addAwaitCounter as p, forUntil as pn, createBranch as pt, _attr_style_item as q, insertBranchBefore as qt, _dynamic_tag as r, placeholderShown as rn, _style_shell as rt, _for_to as s, run as sn, insertChildNodes as st, _await_content as t, caughtError as tn, _lifecycle as tt, _resume_dynamic_tag as u, forIn as un, _content_closures as ut, _attr_details_or_dialog_open_default as v, Owner as vn, getRegisteredWithScope as vt, _attr_input_checked_default as w, ClosestBranch as wn, withLazy as wt, _attr_input_checkedValue as x, Pending as xn, ready as xt, _attr_details_or_dialog_open_script as y, Params as yn, init as yt, controllableScripts as z, _or as zt };
+export { _attrs_script as $, $signal as $t, _attr_input_value_script as A, ParentBranch as An, _for_closure as At, _attr as B, _return as Bt, _attr_input_checkedValue_script as C, Scope as Cn, registeredValues as Ct, _attr_input_value_attribute_default as D, Gen$1 as Dn, _closure_get as Dt, _attr_input_value as E, EndNode as En, _closure as Et, _controllable_open as F, TagVariable as Fn, _id as Ft, _attr_nonce as G, _assert_init as Gt, _attr_class_item as H, _script as Ht, _controllable_select as I, _if_closure as It, _attr_style_items as J, removeAndDestroyBranch as Jt, _attr_style as K, destroyBranch as Kt, _controllable_textarea as L, _let as Lt, _attr_select_value_default as M, PendingRenders as Mn, _global_read as Mt, _attr_select_value_script as N, PlaceholderBranch as Nn, _hoist as Nt, _attr_input_value_default as O, Global as On, _const as Ot, _controllable_input as P, StartNode as Pn, _hoist_resume as Pt, _attrs_partial_content as Q, PLACEHOLDER_DISMISS_REGISTER_ID as Qt, controllableRenders as R, _let_change as Rt, _attr_input_checkedValue_default as S, Pending as Sn, readyFailed as St, _attr_input_checked_script as T, ClosestBranch as Tn, _child_setup as Tt, _attr_class_items as U, _var as Ut, _attr_class as V, _return_change as Vt, _attr_content as W, _var_change as Wt, _attrs_content as X, _on as Xt, _attrs as Y, syncGen as Yt, _attrs_partial as Z, DYNAMIC_TAG_VAR_REGISTER_ID as Zt, _attr_details_or_dialog_open as _, _call as _n, _var_resume as _t, _for_in as a, queueAsyncRender as an, _text_content as at, _attr_input_checked as b, Params as bn, initEmbedded as bt, _for_until as c, run as cn, toInsertNode as ct, _show as d, forIn as dn, _content_resume as dt, $signalReset as en, _html as et, _try as f, forOf as fn, createAndSetupBranch as ft, renderCatch as g, _hoist_read_error as gn, _resume as gt, patchDynamicTag as h, _assert_hoist as hn, _el as ht, _dynamic_tag_content as i, prepareEffects as in, _text as it, _attr_select_value as j, PendingEffects as jn, _for_selector as jt, _attr_input_value_dynamic_default as k, Load as kn, _el_read as kt, _if as l, runEffects as ln, _content as lt, installDynamicTagVar as m, forUntil as mn, setupBranch as mt, _await_promise as n, installCatch as nn, _style_rule_item as nt, _for_of as o, queueEffect as on, _to_text as ot, addAwaitCounter as p, forTo as pn, createBranch as pt, _attr_style_item as q, insertBranchBefore as qt, _dynamic_tag as r, placeholderShown as rn, _style_shell as rt, _for_to as s, queueRender as sn, insertChildNodes as st, _await_content as t, caughtError as tn, _lifecycle as tt, _resume_dynamic_tag as u, runId as un, _content_closures as ut, _attr_details_or_dialog_open_default as v, Clone as vn, getRegisteredWithScope as vt, _attr_input_checked_default as w, AwaitCounter as wn, withLazy as wt, _attr_input_checkedValue as x, Setup as xn, ready as xt, _attr_details_or_dialog_open_script as y, Owner as yn, init as yt, controllableScripts as z, _or as zt };

package/dist/debug/dom.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_control_flow = require("./dom-WyMgkHne.js");
+const require_control_flow = require("./dom-CA_HiiES.js");
 //#region src/common/attr-tag.ts
 const empty = [];
 const rest = Symbol("Attribute Tag");
@@ -22,10 +22,6 @@ function* attrTagIterator() {
 	yield* this[rest];
 }
 //#endregion
-//#region src/common/constants/load-signal-value.debug.ts
-const Value = "value";
-const Signal = "signal";
-//#endregion
 //#region src/common/compat-meta.ts
 const SET_SCOPE_REGISTER_ID = "$compat_setScope";
 const RENDER_BODY_ID = "$compat_renderBody";
@@ -213,9 +209,10 @@ const _load_template = /*@__PURE__*/ require_control_flow.withLazy((id, load) =>
 const _load_setup = /*@__PURE__*/ require_control_flow.withLazy((nodeAccessor, childScopeAccessor, load) => {
 	let pending;
 	let renderer;
+	const insertCached = (child, marker) => insertLoaded(renderer, child, marker);
 	return (owner) => {
 		const child = owner[childScopeAccessor];
-		if (renderer) insertLoaded(renderer, child, owner[nodeAccessor]);
+		if (renderer) require_control_flow.queueRender(child, insertCached, -1, owner[nodeAccessor]);
 		else {
 			const awaitCounter = require_control_flow.addAwaitCounter(owner);
 			child[require_control_flow.Load] ||= /* @__PURE__ */ new Map();
@@ -227,27 +224,26 @@ const _load_setup = /*@__PURE__*/ require_control_flow.withLazy((nodeAccessor, c
 	};
 });
 function insertLoaded(renderer, branch, marker, awaitCounter) {
-	const parent = marker.parentNode, values = branch[require_control_flow.Load], insert = () => {
+	const parent = marker.parentNode, values = branch[require_control_flow.Load], clone = () => {
+		require_control_flow.syncGen(branch);
+		renderer[require_control_flow.Clone](branch, parent.namespaceURI);
+		branch[require_control_flow.Load] = 0;
+	}, insert = () => {
 		require_control_flow.insertBranchBefore(branch, parent, marker);
 		marker.remove();
 		awaitCounter?.c();
 	};
 	let remaining;
-	require_control_flow.syncGen(branch);
-	renderer[require_control_flow.Clone](branch, parent.namespaceURI);
-	branch[require_control_flow.Load] = 0;
 	if (remaining = values?.size) {
 		const fail = loadFailed(branch, awaitCounter);
-		for (const [promise, entry] of values) promise.then((signal) => {
-			entry[Signal] = signal;
-			if (!--remaining) require_control_flow.queueAsyncRender(branch, (branch) => {
-				require_control_flow.syncGen(branch);
-				renderer[require_control_flow.Setup]?.(branch);
-				values.forEach((e) => e[Signal]._(branch, e[Value]));
-				insert();
-			});
-		}, (error) => remaining > 0 && (remaining = 0, fail(error)));
+		values.forEach(([, apply], promise) => promise.then((mod) => (apply._ = mod._) && !--remaining && require_control_flow.queueAsyncRender(branch, (branch) => {
+			clone();
+			renderer["setup"]?.(branch);
+			values.forEach(([value, apply]) => apply(branch, value));
+			insert();
+		}), (error) => remaining > 0 && (remaining = 0, fail(error))));
 	} else {
+		clone();
 		require_control_flow.setupBranch(renderer, branch);
 		insert();
 	}
@@ -261,13 +257,13 @@ function loadFailed(scope, awaitCounter) {
 }
 const _load_signal = /*@__PURE__*/ require_control_flow.withLazy((load) => {
 	let pending;
-	let signal;
-	return (scope, value) => {
+	const apply = (scope, value) => {
 		pending ||= load();
-		if (scope["#Load"] || !("#Load" in scope) && scope["#Gen"] === require_control_flow.runId) (scope[require_control_flow.Load] ||= /* @__PURE__ */ new Map()).set(pending, { [Value]: value });
-		else if (signal) signal(scope, value);
-		else pending.then((mod) => require_control_flow.queueAsyncRender(scope, signal = mod._, value), () => 0);
+		if (scope["#Load"] || !("#Load" in scope) && scope["#Gen"] === require_control_flow.runId) (scope[require_control_flow.Load] ||= /* @__PURE__ */ new Map()).set(pending, [value, apply]);
+		else if (apply._) apply._(scope, value);
+		else pending.then((mod) => require_control_flow.queueAsyncRender(scope, apply._ = mod._, value), () => 0);
 	};
+	return apply;
 });
 function _load_visible_trigger(selector, options) {
 	let pending;