marko 6.3.33 → 6.3.34

package/cheatsheet.md

@@ -1,25 +1,25 @@
 # Marko 6 cheat sheet
 
-Marko 6 = HTML superset. NOT JSX, NOT old Marko 4/5. `.marko` files are components; the filename is the tag name.
+Marko 6 = HTML superset, not JSX and not Marko 4/5 syntax. `.marko` files are components; the filename is the tag name.
 
 ## 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>` — 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/quotes: `<div title=user.name data-n=1 + 1>`.
-2. A top-level `>` in an attribute value **ENDS THE TAG**: the value truncates there, the rest of the line becomes body text, and it usually still compiles clean. `<button disabled=count>=8 onClick() {…}>More</button>` is `disabled=count` plus the TEXT `=8 onClick() {…}>`, so the handler never binds; spaces don't help (`disabled=a > b` closes too). Parenthesize the value — `disabled=(count >= 8)`, `hidden=(a > b)`, and for 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 }`, `of=list.filter(x => x > 1)`), but an arrow BODY is not nested: `<const/f=(a, b) => a > b>` truncates to `(a, b) => a`. `<` 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`), 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).
 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. `<let>` is deliberately different: its value is an INITIAL value, so `<let/draft=input.text>` seeds from a reactive value and then de-syncs — that de-sync is the point of an editable copy. So 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 — recompute from the `<let>`.
-5. NEVER mutate state in place. `items.push(x)` will NOT update the UI. Always reassign:
+4. Derived values: `<const/total=items.length * price>` auto-recomputes. Never use an effect to derive state. `<let>` is deliberately different: its value is an _initial_ value, so `<let/draft=input.text>` seeds from a reactive value and then de-syncs; that de-sync is the point of an editable copy. So 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>`.
+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`. Handler gets the DOM event: `onSubmit(e) { e.preventDefault(); save() }`. Don't sync input values through `onInput`/`onChange` — that's what the change handlers below are for.
-7. Native inputs are UNCONTROLLED by default: `value=` only sets the initial value. 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.)
-8. Transform in the handler when needed — number inputs give STRINGS: `<input type="number" value=n valueChange(v) { n = +v }>`, or `value:parseFloat:=n`.
-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 and helpers need `static`: `static const LIMIT = 10`, `static function fmt(n) {…}`. Without it `function fmt(n) {` parses as a TAG — ``Unable to find entry point for custom tag `<function>` ``, an error that never says `static`. Prefer it to `<const>` for anything that never changes: `<const/LIMIT=10>` emits a per-instance signal plus a `$setup` call.
+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.
+7. Native inputs are uncontrolled by default: `value=` only sets the initial value. 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.)
+8. Transform in the handler when needed; number inputs give strings: `<input type="number" value=n valueChange(v) { n = +v }>`, or `value:parseFloat:=n`.
+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 and helpers need `static`: `static const LIMIT = 10`, `static function fmt(n) {…}`. Without it `function fmt(n) {` parses as a tag: ``Unable to find entry point for custom tag `<function>` ``, an error that never says `static`. Prefer it to `<const>` for anything that never changes: `<const/LIMIT=10>` emits a per-instance signal plus a `$setup` call.
 
-## Canonical component (copy this shape)
+## Canonical component
 
 ```marko
 <let/items=[]>
@@ -58,12 +58,12 @@ Marko 6 = HTML superset. NOT JSX, NOT old Marko 4/5. `.marko` files are componen
 ## Control flow
 
 ```marko
-<if=cond> A </if>
+<if=(count > 10)> A </if>   // parenthesize comparisons; a bare `>` 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|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
 
 <show=open> stays mounted, keeps state (form drafts) when hidden </show>
@@ -88,13 +88,13 @@ import { getUser } from "../data.js";
 
 `@placeholder`/`@catch` go on `<try>`, never on `<await>`. On the server this streams (placeholder flushes first, content follows). It works in the browser too: hand `<await>` a new promise (e.g. a `<const>` derived from state) and it shows the placeholder again, then the new result. `@catch` can't recover in place: redirect (a `<script>` setting `location`), or re-render the `<try>` by bumping a key on a wrapping `<for>`.
 
-Don't fetch while rendering: start data loads early, pass the PROMISE through the template, and `<await>` it where the data is rendered. Fetching inside each component that renders the data serializes the requests (waterfalls). Under @marko/run, load in the route handler — `return next({ user: getUser() })`, no await — and render with `<await|user|=$global.data.user>`.
+Don't fetch while rendering: start data loads early, pass the promise through the template, and `<await>` it where the data is rendered. Fetching inside each component that renders the data serializes the requests (waterfalls). Under @marko/run, load in the route handler (`return next({ user: getUser() })`, no await) and render with `<await|user|=$global.data.user>`.
 
 ## Components
 
 - File `src/tags/product-card.marko` is auto-discovered as `<product-card>` from any template (no import needed). Attributes arrive as `input`: `${input.title}`.
-- Body content renders where the child places `<${input.content}/>`, and the child can hand it values — `<${input.content}(x, y)/>` in the child, `<my-tag|count, total|>${count}</my-tag>` in the parent. Placement is the child's: put it inside a `<for>` and the body appears once per item, each with its own values (`<for|...args| to=input.to><${input.content}(...args)/></>`). Those values exist ONLY inside that body.
-- `<return=value>` publishes ONE value into the PARENT's scope, named by a tag variable; from there it is an ordinary value in that template. A native tag variable's value is itself a function returning the element, so `<div/el>` is read as `el()`. So: body parameters when the value belongs to the nested markup, including one set per item where the child loops; a tag variable when the parent needs one value outside the body. A tag var on a child that never returns is `undefined`.
+- Body content renders where the child places `<${input.content}/>`, and the child can hand it values: `<${input.content}(x, y)/>` in the child, `<my-tag|count, total|>${count}</my-tag>` in the parent. Placement is the child's: put it inside a `<for>` and the body appears once per item, each with its own values (`<for|...args| to=input.to><${input.content}(...args)/></>`). Those values exist only inside that body.
+- `<return=value>` publishes one value into the parent's scope, named by a tag variable; from there it is an ordinary value in that template. A native tag variable's value is itself a function returning the element, so `<div/el>` is read as `el()`. So: body parameters when the value belongs to the nested markup, including one set per item where the child loops; a tag variable when the parent needs one value outside the body. A tag var on a child that never returns is `undefined`.
 
 ```marko
 /* src/tags/toggle-section.marko */
@@ -125,30 +125,32 @@ 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`, 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>`.
 - 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.
-- `<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.
+- `<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.
 
 ## 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 prop-drill through `input`; there is no provider/consumer context API.
 - 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 — an event handler, a `<script>`, markup the browser (re)creates, 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.
 
-## Client-side effects (rare — prefer state/const)
+## Client-side effects
+
+Rare; prefer state and `<const>`.
 
 ```marko
 <div/el/>
 <script>
   // Browser-only. Runs after mount and re-runs when referenced state changes.
-  el().focus();                                  // NATIVE element refs are getter FUNCTIONS
+  el().focus();                                  // native element refs are getter functions
   const id = setInterval(tick, 1000);
   $signal.onabort = () => clearInterval(id);     // cleanup
 </script>
 ```
 
-`<style>` = real CSS, extracted & global; `<style/styles>` scopes it (CSS modules) — `.card {...}` then `class=styles.card`, or `<style/{card}>` then `class=card`. Don't hand-namespace globals. `<script>` = reactive effect, NOT an HTML script tag.
+`<style>` = real CSS, extracted & global; `<style/styles>` scopes it (CSS modules): `.card {...}` then `class=styles.card`, or `<style/{card}>` then `class=card`. Don't hand-namespace globals. `<script>` = reactive effect, not an HTML script tag.
 
 Imperative libs (charts, maps) needing mount/update/destroy: use `<lifecycle>`, not a hand-wired `<script>`. `this` persists across all three; return an object from `onMount` to stash the instance:
 
@@ -172,7 +174,7 @@ import PriceChart from "<price-chart>" with { load: "visible#chart" }
 
 ## TypeScript
 
-`export interface Input` types `input` — generic as `Input<T>`, body content as `Marko.Body<[params]>`, repeated attr tags as `Marko.AttrTag<T>`.
+`export interface Input` types `input`; generic as `Input<T>`, body content as `Marko.Body<[params]>`, repeated attr tags as `Marko.AttrTag<T>`.
 
 ```marko
 export interface Input<T> {
@@ -184,19 +186,21 @@ export interface Input<T> {
 <${input.then}(input.value)/>
 ```
 
-`tsc` silently SKIPS `.marko` — a type-broken template still exits 0. Check with `mtc` (`@marko/type-check`).
+`tsc` silently skips `.marko`, so a type-broken template still exits 0. Check with `mtc` (`@marko/type-check`); in TS mode an undeclared `Input` is `{}` by design, so declare one before reading `input`.
+
+## DON'T
 
-## DON'T (these are errors or silently wrong)
+Each left-hand habit is an error or silently wrong.
 
 | Wrong (React/Vue/Marko5 habit)                              | Right                                                                                |
 | ----------------------------------------------------------- | ------------------------------------------------------------------------------------ |
-| `disabled=n>=8` / `hidden=a > b` (top-level `>` in a value) | `disabled=(n >= 8)` — a bare `>` closes the tag; the rest of the line becomes text   |
-| `<let/s=new Set<string>()>` (type argument in a value)      | `<let/s=(new Set<string>())>` — a tag-var annotation fails type-check                |
+| `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                 |
 | `{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`                                                             |
 | `$ const y = x * 2;` (scriptlets are removed)               | `<const/y=x * 2>`                                                                    |
-| `<let/n=a + b>` when you want it to recompute               | `<const/n=a + b>` — `<let>` seeds an initial value, then de-syncs by design          |
+| `<let/n=a + b>` for a value that should recompute           | `<const/n=a + b>`; `<let>` seeds an initial value, then de-syncs by design           |
 | `function fmt(n) {…}` / `const LIMIT = 10` at module level  | `static function fmt(n) {…}` / `static const LIMIT = 10`                             |
 | `<let x=0>`                                                 | `<let/x=0>`                                                                          |
 | `<if(cond)>`                                                | `<if=cond>`                                                                          |
@@ -206,8 +210,8 @@ export interface Input<T> {
 | `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                                       |
+| `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                                        |
 | 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`)                      |
@@ -216,6 +220,6 @@ export interface Input<T> {
 | 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`                                  |
-| `$global.x` in client-reactive code, not allow-listed       | `$global.serializedGlobals = { x: true }` first — otherwise the read is `undefined`  |
+| `$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                                       |
+| `tsc --noEmit` to type check templates                      | `mtc`; `tsc` skips `.marko` files and exits 0                                        |

package/dist/common/errors.d.ts

@@ -2,6 +2,7 @@ export declare function assertValidAttrValue(name: string, value: unknown): void
 export declare function assertValidTextValue(value: unknown): void;
 export declare function assertValidLoopKey(key: unknown, seenKeys?: Set<unknown>): void;
 export declare function assertValidList(value: unknown): void;
+export declare function assertValidRangeStart(name: string, value: unknown): void;
 export declare function assertValidRangeBound(name: string, value: unknown): void;
 export declare function assertValidAttrName(name: string): void;
 export declare function _el_read_error(): void;

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

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-CiFITSPN.js");
+const require_control_flow = require("../dom-Bj58jt8y.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 { Cn as PendingRenders, Jt as caughtError, Sn as PendingEffects, Xt as placeholderShown, Yt as installCatch, gn as ClosestBranch, h as renderCatch, mn as Scope, pn as Pending, xn as ParentBranch } from "../dom-BJ93mcSe.mjs";
+import { Cn as PendingRenders, Jt as caughtError, Sn as PendingEffects, Xt as placeholderShown, Yt as installCatch, gn as ClosestBranch, h as renderCatch, mn as Scope, pn as Pending, xn as ParentBranch } from "../dom-klf8Ec_o.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-CiFITSPN.js");
+const require_control_flow = require("../dom-Bj58jt8y.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 { R as controllableScripts, S as _attr_input_checkedValue_script, k as _attr_input_value_script, w as _attr_input_checked_script } from "../dom-BJ93mcSe.mjs";
+import { R as controllableScripts, S as _attr_input_checkedValue_script, k as _attr_input_value_script, w as _attr_input_checked_script } from "../dom-klf8Ec_o.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-CiFITSPN.js");
+const require_control_flow = require("../dom-Bj58jt8y.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 { R as controllableScripts, v as _attr_details_or_dialog_open_script } from "../dom-BJ93mcSe.mjs";
+import { R as controllableScripts, v as _attr_details_or_dialog_open_script } from "../dom-klf8Ec_o.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-CiFITSPN.js");
+const require_control_flow = require("../dom-Bj58jt8y.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 { M as _attr_select_value_script, R as controllableScripts } from "../dom-BJ93mcSe.mjs";
+import { M as _attr_select_value_script, R as controllableScripts } from "../dom-klf8Ec_o.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-CiFITSPN.js");
+const require_control_flow = require("../dom-Bj58jt8y.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 { R as controllableScripts, k as _attr_input_value_script } from "../dom-BJ93mcSe.mjs";
+import { R as controllableScripts, k as _attr_input_value_script } from "../dom-klf8Ec_o.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-CiFITSPN.js");
+const require_control_flow = require("../dom-Bj58jt8y.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_select, I as _controllable_textarea, L as controllableRenders, N as _controllable_input, P as _controllable_open } from "../dom-BJ93mcSe.mjs";
+import { F as _controllable_select, I as _controllable_textarea, L as controllableRenders, N as _controllable_input, P as _controllable_open } from "../dom-klf8Ec_o.mjs";
 import "./controllable-input.feat.mjs";
 import "./controllable-open.feat.mjs";
 import "./controllable-select.feat.mjs";

package/dist/debug/{dom-CiFITSPN.js → dom-Bj58jt8y.js}

@@ -113,6 +113,7 @@ function stringifyStyleObject(name, value) {
 		warnedStyleKeys.add(name);
 		console.warn(`\`${name}\` is not a CSS property name; \`style\` object keys are written verbatim, so it renders as invalid CSS. Use \`${name.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase()).replace(/^ms-/, "-ms-")}\`.`);
 	}
+	if (value !== value || typeof value === "bigint" && !value) console.warn(`The \`${name}\` style value \`${value !== value ? "NaN" : "0n"}\` drops the declaration; convert it to a string or number to render it.`);
 	return value || value === 0 ? escapeStyleAttr(name) + ":" + escapeStyleAttr(value + "") : "";
 }
 const unsafeStyleAttrReg = /[\\;]/g;
@@ -189,6 +190,13 @@ function assertValidAttrValue(name, value) {
 function assertValidTextValue(value) {
 	const unrenderable = describeUnrenderable(value);
 	if (unrenderable) throw new Error(`Text content cannot be ${unrenderable}.`);
+	if (isSilentlyDropped(value)) console.warn(`Text content of \`${describeDropped(value)}\` renders as nothing; convert it to a string or number to render it.`);
+}
+function isSilentlyDropped(value) {
+	return value !== value || typeof value === "bigint" && !value;
+}
+function describeDropped(value) {
+	return value !== value ? "NaN" : "0n";
 }
 function describeUnrenderable(value) {
 	if (typeof value === "symbol") return "a symbol";
@@ -212,6 +220,9 @@ function assertValidLoopKey(key, seenKeys) {
 function assertValidList(value) {
 	if (value && typeof value[Symbol.iterator] !== "function") throw new Error(`A \`<for>\` tag's \`of\` attribute must be an iterable, such as an array, but received ${describeForValue(value)}.`);
 }
+function assertValidRangeStart(name, value) {
+	if (value && (typeof value !== "number" || !isFinite(value))) throw new Error(`A \`<for>\` tag's \`${name}\` attribute must be a finite number, but received ${describeForValue(value)}.`);
+}
 function assertValidRangeBound(name, value) {
 	if (!isFinite(value)) throw new Error(`A \`<for>\` tag's \`${name}\` attribute must be a finite number, but received ${describeForValue(value)}.`);
 }
@@ -278,12 +289,16 @@ function forOf(list, cb) {
 }
 function forTo(to, from, step, cb) {
 	assertValidRangeBound("to", to);
+	assertValidRangeStart("from", from);
+	assertValidRangeStart("step", step);
 	const start = from || 0;
 	const delta = step || 1;
 	for (let steps = (to - start) / delta, i = 0; i <= steps; i++) cb(start + i * delta);
 }
 function forUntil(until, from, step, cb) {
 	assertValidRangeBound("until", until);
+	assertValidRangeStart("from", from);
+	assertValidRangeStart("step", step);
 	const start = from || 0;
 	const delta = step || 1;
 	for (let steps = (until - start) / delta, i = 0; i < steps; i++) cb(start + i * delta);
@@ -441,10 +456,10 @@ function push(opt, item) {
 //#region src/dom/event.ts
 function _on(element, type, handler) {
 	assertHandlerIsFunction("on" + type[0].toUpperCase() + type.slice(1), handler);
-	if (element["$" + type] === void 0) delegate(type, handleDelegated);
-	element["$" + type] = handler || null;
+	if (element[1 + type] === void 0) delegate(type, handleDelegated);
+	element[1 + type] = handler || null;
 }
-const delegate = (type, handler) => handler[type] ||= (document.addEventListener(type, handler, true), 1);
+const delegate = (type, handler) => handler[1 + type] ||= (document.addEventListener(type, handler, true), 1);
 function handleDelegated(ev) {
 	let target = !rendering && ev.target;
 	Object.defineProperty(ev, "currentTarget", {
@@ -455,7 +470,7 @@ function handleDelegated(ev) {
 		}
 	});
 	while (target) {
-		target["$" + ev.type]?.(ev, target);
+		target[1 + ev.type]?.(ev, target);
 		target = ev.bubbles && !ev.cancelBubble && target.parentNode;
 	}
 	delete ev.currentTarget;
@@ -720,7 +735,7 @@ function _var(scope, childAccessor, signal) {
 }
 const _return = (scope, value) => scope[TagVariable]?.(value);
 function _return_change(scope, changeHandler) {
-	if (changeHandler) scope[TagVariableChange] = changeHandler;
+	scope[TagVariableChange] = changeHandler || void 0;
 }
 const _var_change = (scope, value, name = "This") => {
 	if (typeof scope["#TagVariableChange"] !== "function") throw new TypeError(`${name} is a readonly tag variable.`);
@@ -1056,7 +1071,7 @@ function _content(id, template, walks, setup, params, dynamicScopesAccessor) {
 	setup = setup ? setup._ || setup : void 0;
 	params ||= void 0;
 	const clone = template ? (branch, ns) => {
-		((cloneCache[ns] ||= {})[template] ||= createCloneableHTML(template, ns))(branch, walks);
+		((cloneCache[ns] ||= {})[1 + template] ||= createCloneableHTML(template, ns))(branch, walks);
 	} : (branch) => {
 		walk(branch[StartNode] = branch[EndNode] = new Text(), walks, branch);
 	};
@@ -1176,7 +1191,7 @@ function _attrs_partial(scope, nodeAccessor, nextAttrs, skip, controllable) {
 	const partial = {};
 	for (let i = el.attributes.length; i--;) {
 		const { name } = el.attributes.item(i);
-		if (!skip[name] && !(nextAttrs && name in nextAttrs)) el.removeAttribute(name);
+		if (!skip[name] && !(nextAttrs && (name in nextAttrs || hasAttrAlias(el, name, nextAttrs)))) el.removeAttribute(name);
 	}
 	for (const name in nextAttrs) {
 		const key = isEventHandler(name) ? `on-${getEventHandlerName(name)}` : name;
@@ -1290,17 +1305,16 @@ function toInsertNode(startNode, endNode) {
 }
 //#endregion
 //#region src/dom/resolve-cursor-position.ts
-const R = /[^\p{L}\p{N}]/gu;
+const R = /[\p{L}\p{N}]/gu;
 function resolveCursorPosition(inputType, initialPosition, initialValue, updatedValue) {
 	if ((initialPosition || initialPosition === 0) && (initialPosition !== initialValue.length || /kw/.test(inputType))) {
 		const before = initialValue.slice(0, initialPosition);
 		const after = initialValue.slice(initialPosition);
 		if (updatedValue.startsWith(before)) return initialPosition;
 		if (updatedValue.endsWith(after)) return updatedValue.length - after.length;
-		let count = before.replace(R, "").length;
-		let pos = 0;
-		while (count && updatedValue[pos]) if (updatedValue[pos++].replace(R, "")) count--;
-		return pos;
+		let count = before.match(R)?.length;
+		while (count && R.test(updatedValue)) count--;
+		return count ? updatedValue.length : R.lastIndex;
 	}
 	return -1;
 }
@@ -1644,12 +1658,12 @@ function _await_promise(nodeAccessor, params) {
 		if (!scope[promiseAccessor]) {
 			if (awaitBranch) awaitBranch[PendingRenders] ||= [];
 			if (tryPlaceholder) awaitCounter = addAwaitCounter(scope, tryPlaceholder);
-			else if (!awaitCounter.i++) requestAnimationFrame(() => awaitCounter.i && runEffects(prepareEffects(() => queueRender(scope, () => {
+			else scheduleAwaitFrame(awaitCounter, scope, () => {
 				if (!awaitBranch["#DetachedAwait"]) {
-					awaitBranch["#StartNode"].parentNode.insertBefore(scope[nodeAccessor], awaitBranch["#StartNode"]);
+					awaitBranch[StartNode].parentNode.insertBefore(scope[nodeAccessor], awaitBranch[StartNode]);
 					tempDetachBranch(tryBranch);
 				}
-			}, -1))));
+			});
 		}
 		const thisPromise = scope[promiseAccessor] = promise.then((data) => {
 			if (thisPromise === scope[promiseAccessor]) {
@@ -1714,12 +1728,15 @@ function addAwaitCounter(scope, tryBranch = findBranchWithKey(scope, Placeholder
 	let awaitCounter = tryBranch[AwaitCounter];
 	if (!awaitCounter?.i) awaitCounter = createAwaitCounter(tryBranch, () => dismissPlaceholder(tryBranch));
 	placeholderShown.add(pendingEffects);
-	if (!awaitCounter.i++) requestAnimationFrame(() => awaitCounter.i && runEffects(prepareEffects(() => queueRender(tryBranch, () => {
-		insertBranchBefore(tryBranch["#PlaceholderBranch"] = createAndSetupBranch(tryBranch["$global"], tryBranch["#PlaceholderContent"], tryBranch["_"], tryBranch["#StartNode"].parentNode), tryBranch["#StartNode"].parentNode, tryBranch["#StartNode"]);
+	scheduleAwaitFrame(awaitCounter, tryBranch, () => {
+		insertBranchBefore(tryBranch[PlaceholderBranch] = createAndSetupBranch(tryBranch[Global], tryBranch[PlaceholderContent], tryBranch["_"], tryBranch[StartNode].parentNode), tryBranch[StartNode].parentNode, tryBranch[StartNode]);
 		tempDetachBranch(tryBranch);
-	}, -1))));
+	});
 	return awaitCounter;
 }
+function scheduleAwaitFrame(awaitCounter, scope, render) {
+	if (!awaitCounter.i++) requestAnimationFrame(() => awaitCounter.i && runEffects(prepareEffects(() => queueRender(scope, render, -1))));
+}
 function createAwaitCounter(tryBranch, done) {
 	const awaitCounter = tryBranch[AwaitCounter] = {
 		i: 0,
@@ -1831,8 +1848,8 @@ let _dynamic_tag = /*@__PURE__*/ withBranches((nodeAccessor, getContent, getTagV
 			if (typeof normalizedRenderer === "string") {
 				if (getContent) {
 					const content = getContent(scope);
-					setConditionalRenderer(scope[childScopeAccessor], `#${normalizedRenderer}/0`, content, createAndSetupBranch);
-					if (content["accessor"]) subscribeToScopeSet(content[Owner], content[Accessor], scope[childScopeAccessor][`BranchScopes:#${normalizedRenderer}/0`]);
+					setConditionalRenderer(scope[childScopeAccessor], `#${normalizedRenderer.toLowerCase()}/0`, content, createAndSetupBranch);
+					if (content["accessor"]) subscribeToScopeSet(content[Owner], content[Accessor], scope[childScopeAccessor][`BranchScopes:#${normalizedRenderer.toLowerCase()}/0`]);
 				}
 			} else if (normalizedRenderer?.["accessor"]) subscribeToScopeSet(normalizedRenderer[Owner], normalizedRenderer[Accessor], scope[childScopeAccessor]);
 		}
@@ -1840,7 +1857,7 @@ let _dynamic_tag = /*@__PURE__*/ withBranches((nodeAccessor, getContent, getTagV
 			const childScope = scope[childScopeAccessor];
 			const args = getInput?.();
 			if (typeof normalizedRenderer === "string") {
-				const nodeAccessor = `#${normalizedRenderer}/0`;
+				const nodeAccessor = `#${normalizedRenderer.toLowerCase()}/0`;
 				(getContent ? _attrs : _attrs_content)(childScope, nodeAccessor, (inputIsArgs ? args[0] : args) || {}, controllableRenders[childScope[nodeAccessor].tagName]);
 				if (childScope["EventAttributes:" + nodeAccessor] || childScope["ControlledHandler:" + nodeAccessor]) queueEffect(childScope, dynamicTagScript);
 			} else {
@@ -1868,11 +1885,9 @@ const _dynamic_tag_content = /*@__PURE__*/ withBranches((nodeAccessor) => {
 		if (renderer) for (const accessor in renderer[LocalClosures]) renderer[LocalClosures][accessor](scope[childScopeAccessor], renderer[LocalClosureValues][accessor]);
 	};
 });
-function _resume_dynamic_tag() {
-	_resume(DYNAMIC_TAG_SCRIPT_REGISTER_ID, dynamicTagScript);
-}
+const _resume_dynamic_tag = /*@__PURE__*/ withBranches(() => _resume(DYNAMIC_TAG_SCRIPT_REGISTER_ID, dynamicTagScript));
 function dynamicTagScript(branch) {
-	_attrs_script(branch, `#${branch[Renderer]}/0`);
+	_attrs_script(branch, `#${branch[Renderer].toLowerCase()}/0`);
 }
 function setConditionalRenderer(scope, nodeAccessor, newRenderer, createBranch) {
 	const referenceNode = scope[nodeAccessor];
@@ -1993,17 +2008,27 @@ const loop = /*@__PURE__*/ withBranches((forEach) => (nodeAccessor, template, wa
 		}
 	};
 });
-const _for_of = /*@__PURE__*/ loop(([all, by = bySecondArg], cb) => {
+const _for_of = /*@__PURE__*/ loop(([all, by], cb) => {
+	by ||= bySecondArg;
 	if (typeof by === "string") forOf(all, (item, i) => cb(item[by], [item, i]));
 	else forOf(all, (item, i) => cb(by(item, i), [item, i]));
 });
-const _for_in = /*@__PURE__*/ loop(([obj, by = byFirstArg], cb) => forIn(obj, (key, value) => cb(by(key, value), [key, value])));
-const _for_to = /*@__PURE__*/ loop(([to, from, step, by = byFirstArg], cb) => forTo(to, from, step, (v) => cb(by(v), [v])));
-const _for_until = /*@__PURE__*/ loop(([until, from, step, by = byFirstArg], cb) => forUntil(until, from, step, (v) => cb(by(v), [v])));
+const _for_in = /*@__PURE__*/ loop(([obj, by], cb) => {
+	by ||= byFirstArg;
+	forIn(obj, (key, value) => cb(by(key, value), [key, value]));
+});
+const _for_to = /*@__PURE__*/ loop(([to, from, step, by], cb) => {
+	by ||= byFirstArg;
+	forTo(to, from, step, (v) => cb(by(v), [v]));
+});
+const _for_until = /*@__PURE__*/ loop(([until, from, step, by], cb) => {
+	by ||= byFirstArg;
+	forUntil(until, from, step, (v) => cb(by(v), [v]));
+});
 function createBranchWithTagNameOrRenderer($global, tagNameOrRenderer, parentScope, parentNode) {
 	if (typeof tagNameOrRenderer === "string") assertValidTagName(tagNameOrRenderer);
 	const branch = createBranch($global, tagNameOrRenderer, parentScope, parentNode);
-	if (typeof tagNameOrRenderer === "string") branch[`#${tagNameOrRenderer}/0`] = branch[StartNode] = branch[EndNode] = document.createElementNS(tagNameOrRenderer === "svg" ? "http://www.w3.org/2000/svg" : tagNameOrRenderer === "math" ? "http://www.w3.org/1998/Math/MathML" : parentNode.namespaceURI, tagNameOrRenderer);
+	if (typeof tagNameOrRenderer === "string") branch[`#${tagNameOrRenderer.toLowerCase()}/0`] = branch[StartNode] = branch[EndNode] = document.createElementNS(tagNameOrRenderer === "svg" ? "http://www.w3.org/2000/svg" : tagNameOrRenderer === "math" ? "http://www.w3.org/1998/Math/MathML" : parentNode.namespaceURI, tagNameOrRenderer);
 	else setupBranch(tagNameOrRenderer, branch);
 	return branch;
 }