@hyperfixi/core 3.1.1 → 3.3.0

package/dist/commands/index.mjs

@@ -535,6 +535,75 @@ function parseAttributeWithValue(expression) {
     return { name: result.name, value: result.value ?? '' };
 }
 
+function _parseDurationComponents(value) {
+    const trimmed = value.trim();
+    const match = trimmed.match(/^(\d+(?:\.\d+)?)\s*(s|ms|sec|seconds?|milliseconds?)?$/i);
+    if (!match) {
+        return null;
+    }
+    const number = parseFloat(match[1]);
+    const unit = (match[2] || 'ms').toLowerCase();
+    if (unit === 'ms' || unit === 'millisecond' || unit === 'milliseconds') {
+        return { number, milliseconds: Math.floor(number) };
+    }
+    else if (unit === 's' || unit === 'sec' || unit === 'second' || unit === 'seconds') {
+        return { number, milliseconds: Math.floor(number * 1000) };
+    }
+    return null;
+}
+function parseDuration(value, defaultMs = 300) {
+    if (typeof value === 'number') {
+        return Math.max(0, Math.floor(value));
+    }
+    if (typeof value === 'string') {
+        const result = _parseDurationComponents(value);
+        return result ? result.milliseconds : defaultMs;
+    }
+    return defaultMs;
+}
+function parseDurationStrict(value) {
+    if (typeof value === 'number') {
+        if (value < 0)
+            throw new Error('Duration must be >= 0');
+        return Math.floor(value);
+    }
+    if (typeof value === 'string') {
+        const result = _parseDurationComponents(value);
+        if (!result) {
+            throw new Error(`Invalid duration format: "${value}"`);
+        }
+        return result.milliseconds;
+    }
+    throw new Error(`Invalid duration type: ${typeof value}`);
+}
+function parseCSSDurations(durationString) {
+    if (!durationString || durationString === 'none') {
+        return [0];
+    }
+    return durationString.split(',').map(duration => {
+        const value = parseFloat(duration.trim());
+        if (isNaN(value))
+            return 0;
+        if (duration.includes('s') && !duration.includes('ms')) {
+            return value * 1000;
+        }
+        return value;
+    });
+}
+function calculateMaxAnimationTime(durations, delays) {
+    let maxTime = 0;
+    for (let i = 0; i < durations.length; i++) {
+        const duration = durations[i] || 0;
+        const delay = delays[i] || 0;
+        const totalTime = duration + delay;
+        maxTime = Math.max(maxTime, totalTime);
+    }
+    return maxTime;
+}
+function camelToKebab(str) {
+    return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
 function batchApply(targets, operation) {
     for (const element of targets) {
         operation(element);
@@ -600,15 +669,18 @@ function toggleAttribute(element, name, value) {
         }
     }
 }
+function toCssPropertyName(property) {
+    return property.startsWith('--') ? property : camelToKebab(property);
+}
 function batchSetStyles(targets, styles) {
     const entries = Object.entries(styles);
     return batchApplyItems(targets, entries, (element, [property, value]) => {
-        element.style.setProperty(property, value);
+        element.style.setProperty(toCssPropertyName(property), value);
     });
 }
 function batchRemoveStyles(targets, properties) {
     return batchApplyItems(targets, properties, (element, property) => {
-        element.style.removeProperty(property);
+        element.style.removeProperty(toCssPropertyName(property));
     });
 }
 
@@ -1343,75 +1415,6 @@ let RemoveCommand = (() => {
 })();
 const createRemoveCommand = createFactory(RemoveCommand);
 
-function _parseDurationComponents(value) {
-    const trimmed = value.trim();
-    const match = trimmed.match(/^(\d+(?:\.\d+)?)\s*(s|ms|sec|seconds?|milliseconds?)?$/i);
-    if (!match) {
-        return null;
-    }
-    const number = parseFloat(match[1]);
-    const unit = (match[2] || 'ms').toLowerCase();
-    if (unit === 'ms' || unit === 'millisecond' || unit === 'milliseconds') {
-        return { number, milliseconds: Math.floor(number) };
-    }
-    else if (unit === 's' || unit === 'sec' || unit === 'second' || unit === 'seconds') {
-        return { number, milliseconds: Math.floor(number * 1000) };
-    }
-    return null;
-}
-function parseDuration(value, defaultMs = 300) {
-    if (typeof value === 'number') {
-        return Math.max(0, Math.floor(value));
-    }
-    if (typeof value === 'string') {
-        const result = _parseDurationComponents(value);
-        return result ? result.milliseconds : defaultMs;
-    }
-    return defaultMs;
-}
-function parseDurationStrict(value) {
-    if (typeof value === 'number') {
-        if (value < 0)
-            throw new Error('Duration must be >= 0');
-        return Math.floor(value);
-    }
-    if (typeof value === 'string') {
-        const result = _parseDurationComponents(value);
-        if (!result) {
-            throw new Error(`Invalid duration format: "${value}"`);
-        }
-        return result.milliseconds;
-    }
-    throw new Error(`Invalid duration type: ${typeof value}`);
-}
-function parseCSSDurations(durationString) {
-    if (!durationString || durationString === 'none') {
-        return [0];
-    }
-    return durationString.split(',').map(duration => {
-        const value = parseFloat(duration.trim());
-        if (isNaN(value))
-            return 0;
-        if (duration.includes('s') && !duration.includes('ms')) {
-            return value * 1000;
-        }
-        return value;
-    });
-}
-function calculateMaxAnimationTime(durations, delays) {
-    let maxTime = 0;
-    for (let i = 0; i < durations.length; i++) {
-        const duration = durations[i] || 0;
-        const delay = delays[i] || 0;
-        const totalTime = duration + delay;
-        maxTime = Math.max(maxTime, totalTime);
-    }
-    return maxTime;
-}
-function camelToKebab(str) {
-    return str.replace(/([A-Z])/g, '-$1').toLowerCase();
-}
-
 function detectSmartElementType(elements) {
     if (elements.length === 0)
         return null;
@@ -1877,13 +1880,6 @@ function isFunction(value) {
 function isInputElement$1(el) {
     return (el !== null && typeof el === 'object' && 'tagName' in el && el.tagName === 'INPUT');
 }
-function isFormElement$1(el) {
-    if (el === null || typeof el !== 'object' || !('tagName' in el)) {
-        return false;
-    }
-    const tag = el.tagName;
-    return tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA';
-}
 function isHTMLElement$1(el) {
     return (el !== null &&
         typeof el === 'object' &&
@@ -1943,7 +1939,7 @@ const SPECIAL_DOM_PROPERTIES = {
     innertext: el => el.textContent?.trim(),
     innerHTML: el => el.innerHTML,
     outerhtml: el => el.outerHTML,
-    value: el => (isFormElement$1(el) ? el.value : undefined),
+    value: el => ('value' in el ? el.value : undefined),
     checked: el => (isInputElement$1(el) ? el.checked : undefined),
     disabled: el => ('disabled' in el ? el.disabled : undefined),
     selected: el => (isOptionElement$1(el) ? el.selected : undefined),
@@ -2813,7 +2809,11 @@ let PutCommand = (() => {
             }
             if (isInsertableNode(v))
                 return v;
-            return v == null ? '' : String(v);
+            if (v == null)
+                return 'null';
+            if (Array.isArray(v))
+                return arrayFragment(v);
+            return String(v);
         }
         looksLikeCss(s) {
             if (!s)
@@ -2898,6 +2898,19 @@ let PutCommand = (() => {
     })();
     return PutCommand = _classThis;
 })();
+function arrayFragment(items) {
+    const fragment = document.createDocumentFragment();
+    for (const item of items) {
+        if (isInsertableNode(item)) {
+            fragment.append(item);
+            continue;
+        }
+        const template = document.createElement('template');
+        template.innerHTML = item === null ? '' : String(item);
+        fragment.append(template.content);
+    }
+    return fragment;
+}
 const createPutCommand = createFactory(PutCommand);
 
 const GLOBAL_WRITE_HOOKS = new Set();
@@ -3020,6 +3033,16 @@ function convertToNumber(value) {
     }
     return 0;
 }
+function counterAmount(value) {
+    return typeof value === 'number' ? value : parseFloat(String(value));
+}
+function counterValue(value) {
+    if (isHTMLElement$2(value)) {
+        const element = value;
+        return counterValue(element.value || element.textContent);
+    }
+    return value ? counterAmount(value) : 0;
+}
 function getVariableValue(name, context, preferredScope) {
     if (preferredScope === 'element') {
         return getElementVar(context, name);
@@ -3124,35 +3147,39 @@ function setElementPropertyValue(propertyPath, value, context) {
         element[property] = value;
     }
 }
+function isObjectOwner(value) {
+    return (typeof value === 'object' && value !== null && !Array.isArray(value) && !isHTMLElement$2(value));
+}
 function getCurrentNumericValue(target, property, scope, context) {
     if (typeof target === 'number') {
         return target;
     }
     if (isHTMLElement$2(target)) {
         const element = target;
+        if (property?.startsWith('@'))
+            return counterValue(element.getAttribute(property.slice(1)));
         if (property) {
             if (property.startsWith('data-') ||
                 ['id', 'class', 'title', 'alt', 'src', 'href'].includes(property)) {
-                const value = element.getAttribute(property);
-                return convertToNumber(value);
+                return counterValue(element.getAttribute(property));
             }
             else {
-                const value = element[property];
-                return convertToNumber(value);
+                return counterValue(element[property]);
             }
         }
         else {
-            const value = element.value || element.textContent;
-            return convertToNumber(value);
+            return counterValue(element);
         }
     }
+    if (property && isObjectOwner(target)) {
+        return counterValue(target[property]);
+    }
     if (typeof target === 'string') {
         if (scope === 'element') {
-            return convertToNumber(getVariableValue(target, context, 'element'));
+            return counterValue(getVariableValue(target, context, 'element'));
         }
         if (scope === 'global') {
-            const value = getVariableValue(target, context, 'global');
-            return convertToNumber(value);
+            return counterValue(getVariableValue(target, context, 'global'));
         }
         if (target.includes('.')) {
             return getElementPropertyValue(target, context);
@@ -3166,14 +3193,17 @@ function getCurrentNumericValue(target, property, scope, context) {
         else if (target === 'you' && context.you) {
             return convertToNumber(context.you.value || 0);
         }
-        const value = getVariableValue(target, context);
-        return convertToNumber(value);
+        return counterValue(getVariableValue(target, context));
     }
-    return convertToNumber(target);
+    return counterValue(target);
 }
 function setTargetValue(target, property, scope, newValue, context) {
     if (isHTMLElement$2(target)) {
         const element = target;
+        if (property?.startsWith('@')) {
+            element.setAttribute(property.slice(1), String(newValue));
+            return;
+        }
         if (property) {
             if (property.startsWith('data-') ||
                 ['id', 'class', 'title', 'alt', 'src', 'href'].includes(property)) {
@@ -3193,6 +3223,10 @@ function setTargetValue(target, property, scope, newValue, context) {
         }
         return;
     }
+    if (property && isObjectOwner(target)) {
+        target[property] = newValue;
+        return;
+    }
     if (typeof target === 'string') {
         if (scope === 'element') {
             setVariableValue(target, newValue, context, 'element');
@@ -3967,6 +4001,39 @@ function makeTypeCheckHandler(negated) {
         };
     };
 }
+const OF_OPERAND_BP = 70;
+function parseOfOperand(ctx, minBp = OF_OPERAND_BP) {
+    let right = ctx.parseExpr(minBp);
+    if (ctx.peek()?.value === 'in') {
+        const inToken = ctx.advance();
+        const scope = ctx.parseExpr(minBp);
+        right = {
+            type: 'binaryExpression',
+            operator: 'in',
+            left: right,
+            right: scope,
+            start: right.start,
+            end: scope.end ?? inToken.end,
+            line: right.line ?? inToken.line,
+            column: right.column ?? inToken.column,
+        };
+    }
+    return right;
+}
+const THE_OF_TARGET_BP = OF_OPERAND_BP + 1;
+function ofHandler(left, token, ctx) {
+    const right = parseOfOperand(ctx);
+    return {
+        type: 'binaryExpression',
+        operator: token.value,
+        left,
+        right,
+        start: left.start,
+        end: right.end ?? token.end,
+        line: left.line ?? token.line,
+        column: left.column ?? token.column,
+    };
+}
 const PARSER_COMPARISON_FRAGMENT = new Map([
     ['===', leftAssoc(30)],
     ['!==', leftAssoc(30)],
@@ -4011,7 +4078,7 @@ const PARSER_COMPARISON_FRAGMENT = new Map([
     ['is greater than or equal to', leftAssoc(30)],
     ['is less than or equal to', leftAssoc(30)],
     ['in', leftAssoc(30)],
-    ['of', rightAssoc(30)],
+    ['of', { infix: { bp: [90, OF_OPERAND_BP], handler: ofHandler } }],
     ['really', leftAssoc(30)],
     [
         'exists',
@@ -4102,6 +4169,89 @@ function getRegisteredNodeWriter(type) {
     return NODE_WRITERS.get(type);
 }
 
+function beepValues(me, values) {
+    const outputs = values.map(describeBeepValue);
+    const shown = outputs.filter(output => announce(me, output.value));
+    if (shown.length === 0)
+        return outputs;
+    console.group('\ud83d\udd14 beep! Debug Output');
+    for (const output of shown) {
+        console.log(`Value:`, output.value);
+        console.log(`Type:`, output.type);
+        console.log(`Representation:`, output.representation);
+        console.log('---');
+    }
+    console.groupEnd();
+    return outputs;
+}
+function announce(me, value) {
+    const target = me;
+    if (typeof CustomEvent !== 'function' || typeof target?.dispatchEvent !== 'function')
+        return true;
+    return target.dispatchEvent(new CustomEvent('hyperscript:beep', {
+        bubbles: true,
+        cancelable: true,
+        detail: { element: me, value },
+    }));
+}
+function describeBeepValue(value) {
+    return { value, type: typeOf(value), representation: representationOf(value) };
+}
+function typeOf(value) {
+    if (value === null)
+        return 'null';
+    if (value === undefined)
+        return 'undefined';
+    if (Array.isArray(value))
+        return 'array';
+    if (isHTMLElement$2(value))
+        return 'HTMLElement';
+    if (typeof Element !== 'undefined' && value instanceof Element)
+        return 'Element';
+    if (typeof Node !== 'undefined' && value instanceof Node)
+        return 'Node';
+    if (value instanceof Error)
+        return 'Error';
+    if (value instanceof Date)
+        return 'Date';
+    if (value instanceof RegExp)
+        return 'RegExp';
+    return typeof value;
+}
+function representationOf(value) {
+    if (value === null)
+        return 'null';
+    if (value === undefined)
+        return 'undefined';
+    if (Array.isArray(value)) {
+        return `Array(${value.length}) [${value
+            .slice(0, 3)
+            .map(v => representationOf(v))
+            .join(', ')}${value.length > 3 ? '...' : ''}]`;
+    }
+    if (isHTMLElement$2(value)) {
+        const el = value;
+        const tag = el.tagName.toLowerCase();
+        const id = el.id ? `#${el.id}` : '';
+        const classes = el.className ? `.${el.className.split(' ').join('.')}` : '';
+        return `<${tag}${id}${classes}/>`;
+    }
+    if (value instanceof Error)
+        return `Error: ${value.message}`;
+    if (typeof value === 'string')
+        return value.length > 50 ? `"${value.substring(0, 47)}..."` : `"${value}"`;
+    if (typeof value === 'object') {
+        try {
+            const keys = Object.keys(value);
+            return `Object {${keys.slice(0, 3).join(', ')}${keys.length > 3 ? '...' : ''}}`;
+        }
+        catch {
+            return '[Object]';
+        }
+    }
+    return String(value);
+}
+
 const NUMBER_WORDS = {
     1: 'one',
     2: 'two',
@@ -4703,14 +4853,15 @@ const closestExpression = {
         if (typeof selector !== 'string') {
             throw new Error('closest requires a string selector');
         }
-        if (!context.me) {
+        const start = args.length > 1 ? args[1] : context.me;
+        if (!(start instanceof Element)) {
             return null;
         }
-        return context.me.closest(selector);
+        return start.closest(selector);
     },
     validate(args) {
-        if (args.length !== 1) {
-            return 'closest requires exactly 1 argument (selector)';
+        if (args.length !== 1 && args.length !== 2) {
+            return 'closest requires a selector and, optionally, the element to start from';
         }
         const arg = args[0];
         if (typeof arg === 'string')
@@ -7096,7 +7247,7 @@ const isEmptyExpression = {
         else if (value instanceof Node || value instanceof Element)
             result = false;
         else if (isObject(value))
-            result = Object.keys(value).length === 0;
+            result = value.length === 0;
         else
             result = false;
         return result;
@@ -8173,6 +8324,48 @@ function parseMaybeNamedArgument(ctx) {
     const value = ctx.parseExpression();
     return name !== undefined ? { name, value } : { value };
 }
+function isNakedNamedArgStart(ctx) {
+    if (ctx.check('{'))
+        return false;
+    if (!ctx.checkIdentifierLike())
+        return false;
+    const next = ctx.peekAt(1);
+    return next !== null && next.value === ':';
+}
+function parseNakedNamedArgs(ctx, parseValue, command) {
+    const properties = [];
+    const startPos = ctx.getPosition();
+    do {
+        if (!ctx.checkIdentifierLike())
+            break;
+        const keyToken = ctx.advance();
+        const key = {
+            type: 'identifier',
+            name: keyToken.value,
+            start: keyToken.start,
+            end: keyToken.end,
+            line: keyToken.line,
+            column: keyToken.column,
+        };
+        ctx.consume(':', `Expected ':' after property name in ${command} named arguments`);
+        const value = parseValue();
+        if (value) {
+            properties.push({ key, value });
+        }
+    } while (ctx.match(',') && !ctx.isAtEnd());
+    const endPos = ctx.getPosition();
+    return {
+        type: 'objectLiteral',
+        properties,
+        start: startPos.start,
+        end: endPos.end,
+        line: startPos.line,
+        column: startPos.column,
+    };
+}
+function isGluedBeepBang(beep, bang) {
+    return beep?.value === 'beep' && bang?.value === '!' && bang.start === beep.end;
+}
 
 class CommandNodeBuilder {
     constructor(name) {
@@ -8374,6 +8567,8 @@ function parseTriggerCommand(ctx, identifierNode) {
     const modifiers = {};
     while (!isCommandBoundary(ctx)) {
         if (ctx.check(KEYWORDS.ON) || ctx.check(KEYWORDS.TO)) {
+            if (modifiers['on'])
+                break;
             ctx.advance();
             const target = parseOneArgument(ctx, [KEYWORDS.WITH]);
             if (target)
@@ -8514,6 +8709,9 @@ function parseRepeatCommand(ctx, commandToken) {
         ctx.advance();
         loopType = KEYWORDS.FOREVER;
     }
+    else if (ctx.checkIsCommand() || ctx.isCommand(ctx.peek().value)) {
+        loopType = KEYWORDS.FOREVER;
+    }
     else {
         times = ctx.parseExpression();
         if (ctx.check(KEYWORDS.TIMES)) {
@@ -8556,10 +8754,12 @@ function parseRepeatCommand(ctx, commandToken) {
             loopType = result.terminator;
             ctx.advance();
             condition = ctx.parseExpression();
-            if (!ctx.check('end')) {
+            if (ctx.check('end')) {
+                ctx.advance();
+            }
+            else if (!ctx.atEndOfInput()) {
                 throw new Error('Expected "end" to close repeat block');
             }
-            ctx.advance();
         }
     }
     else {
@@ -8805,7 +9005,7 @@ function parseIfCommand(ctx, commandToken) {
                 }));
             }
         }
-        if (!consumedElseIf && !ctx.isAtEnd()) {
+        if (!consumedElseIf && !ctx.atEndOfInput()) {
             ctx.consume(KEYWORDS.END, "Expected 'end' after if block");
         }
     }
@@ -8830,7 +9030,6 @@ function parseIfCommand(ctx, commandToken) {
         .build();
 }
 function parseForCommand(ctx, commandToken) {
-    const args = [];
     let variable = null;
     let collection = null;
     if (ctx.check(KEYWORDS.EACH)) {
@@ -8873,31 +9072,22 @@ function parseForCommand(ctx, commandToken) {
         }
     }
     const commands = ctx.parseCommandListUntilEnd('for');
-    args.push({
-        type: 'identifier',
-        name: 'for',
-        start: commandToken.start,
-        end: commandToken.end,
-        line: commandToken.line,
-        column: commandToken.column,
-    });
-    const forPos = {
+    const pos = {
         start: commandToken.start,
         end: commandToken.end,
         line: commandToken.line,
         column: commandToken.column,
     };
-    args.push(createStringLiteral(variable, forPos));
-    args.push(collection);
-    if (indexVariable) {
-        args.push(createStringLiteral(indexVariable, forPos));
-    }
-    args.push(createBlock(commands, { ...forPos, end: forPos.end || 0 }));
-    return CommandNodeBuilder.from({
-        ...commandToken,
-        value: 'repeat',
-    })
-        .withArgs(...args)
+    const modifiers = {
+        loopType: toLegacyExpression(createStringLiteral(KEYWORDS.FOR, pos)),
+        for: toLegacyExpression(createStringLiteral(variable, pos)),
+        in: collection,
+    };
+    if (indexVariable)
+        modifiers['index'] = toLegacyExpression(createStringLiteral(indexVariable, pos));
+    return CommandNodeBuilder.from({ ...commandToken, value: 'repeat' })
+        .withArgs(createBlock(commands, { ...pos, end: pos.end || 0 }))
+        .withModifiers(modifiers)
         .endingAt(ctx.getPosition())
         .build();
 }
@@ -8953,86 +9143,159 @@ function parseMeasureCommand(ctx, identifierNode) {
     }
     return builder.build();
 }
-const CONTEXT_POSSESSIVES = new Set(['my', 'its', 'your']);
+const CONTEXT_REFS = new Set(['me', 'it', 'you', 'result']);
 function parseTransitionCommand(ctx, commandToken) {
-    const args = [];
-    const modifiers = {};
-    let property = null;
-    let target = null;
-    const leadToken = ctx.peek();
-    const startsTarget = ctx.checkAnySelector() ||
-        ctx.checkContextVar() ||
-        ctx.check('<') ||
-        (isIdentifierLike(leadToken) && CONTEXT_POSSESSIVES.has(leadToken.value));
-    if (startsTarget) {
-        const parsed = ctx.parsePrimary();
-        if ((parsed.type === 'possessiveExpression' ||
-            (parsed.type === 'memberExpression' && !parsed.computed)) &&
-            parsed.object &&
-            parsed.property?.name) {
-            target = parsed.object;
-            property = {
-                type: 'string',
-                value: parsed.property.name,
-                start: leadToken.start || 0,
-                end: ctx.getPosition().end,
-                line: leadToken.line,
-                column: leadToken.column,
-            };
+    const pairs = [];
+    do {
+        pairs.push(parseTransitionPair(ctx));
+    } while (startsAnotherPair(ctx));
+    const [first, ...rest] = pairs;
+    const args = first.owner ? [first.owner, first.property] : [first.property];
+    const modifiers = { to: first.to };
+    if (first.from)
+        modifiers['from'] = first.from;
+    if (rest.length > 0)
+        modifiers['pairs'] = pairsNode(rest);
+    for (let i = 0; i < 3 && !ctx.isAtEnd(); i++) {
+        if (ctx.check('over') && !modifiers['over']) {
+            ctx.advance();
+            modifiers['over'] = ctx.parseExpression();
         }
-        else {
-            target = parsed;
-            if (ctx.check("'s"))
-                ctx.advance();
+        else if (ctx.check('using') && !modifiers['using']) {
+            ctx.advance();
+            modifiers['using'] = ctx.parseExpression();
         }
-    }
-    const firstToken = ctx.peek();
-    if (!property && (isIdentifierLike(firstToken) || firstToken.value === '*')) {
-        let propertyValue = '';
-        if (ctx.check('*')) {
-            propertyValue = '*';
+        else if (ctx.check(KEYWORDS.WITH) && !modifiers['with']) {
             ctx.advance();
+            modifiers['with'] = ctx.parsePrimary();
         }
-        const hyphenatedName = parseHyphenatedName(ctx);
-        if (hyphenatedName) {
-            propertyValue += hyphenatedName;
-            property = {
-                type: 'string',
-                value: propertyValue,
-                start: firstToken.start || 0,
-                end: ctx.getPosition().end,
-                line: firstToken.line,
-                column: firstToken.column,
-            };
+        else {
+            break;
         }
     }
-    if (!property) {
-        throw new Error('Transition command requires a CSS property');
+    return CommandNodeBuilder.from(commandToken)
+        .withArgs(...args)
+        .withModifiers(modifiers)
+        .endingAt(ctx.getPosition())
+        .build();
+}
+function parseTransitionPair(ctx) {
+    const { owner, property } = parseTransitionProperty(ctx);
+    let from = null;
+    if (ctx.check('from')) {
+        ctx.advance();
+        from = ctx.parseExpression();
     }
-    if (target)
-        args.push(target);
-    args.push(property);
     if (!ctx.check(KEYWORDS.TO)) {
         throw new Error('Expected "to" keyword after property in transition command');
     }
     ctx.advance();
-    const value = ctx.parseExpression();
-    modifiers['to'] = value;
-    if (ctx.check('over')) {
-        ctx.advance();
-        const duration = ctx.parseExpression();
-        modifiers['over'] = duration;
+    const to = ctx.parseExpression();
+    return { owner, property, from, to };
+}
+function parseTransitionProperty(ctx) {
+    const lead = ctx.peek();
+    if (!lead || isKeyword(lead, [KEYWORDS.TO, 'from'])) {
+        throw new Error('Transition command requires a CSS property');
     }
-    if (ctx.check(KEYWORDS.WITH)) {
+    const expr = ctx.parseExpression();
+    const split = splitStyleExpression(expr);
+    if (split)
+        return { owner: split.owner, property: propertyNode(split.name, lead, ctx) };
+    let name = '';
+    if (ctx.check('*')) {
+        name = '*';
         ctx.advance();
-        const timingFunction = ctx.parsePrimary();
-        modifiers['with'] = timingFunction;
     }
-    return CommandNodeBuilder.from(commandToken)
-        .withArgs(...args)
-        .withModifiers(modifiers)
-        .endingAt(ctx.getPosition())
-        .build();
+    const hyphenated = parseHyphenatedName(ctx);
+    if (!hyphenated)
+        throw new Error('Transition command requires a CSS property');
+    return { owner: expr, property: propertyNode(name + hyphenated, lead, ctx) };
+}
+function splitStyleExpression(node) {
+    const n = node;
+    switch (n.type) {
+        case 'selector':
+            return typeof n.value === 'string' && n.value.startsWith('*')
+                ? { owner: null, name: n.value }
+                : null;
+        case 'identifier':
+            return typeof n.name === 'string' && !CONTEXT_REFS.has(n.name)
+                ? { owner: null, name: n.name }
+                : null;
+        case 'possessiveExpression':
+        case 'memberExpression':
+            return !n.computed && n.object && typeof n.property?.name === 'string'
+                ? { owner: n.object, name: n.property.name }
+                : null;
+        case 'binaryExpression': {
+            if (n.operator !== 'of' || !n.left || !n.right)
+                return null;
+            const inner = splitStyleExpression(n.left);
+            return inner && !inner.owner ? { owner: n.right, name: inner.name } : null;
+        }
+        case 'propertyOfExpression':
+            return n.target && typeof n.property?.name === 'string'
+                ? { owner: n.target, name: n.property.name }
+                : null;
+        default:
+            return null;
+    }
+}
+function propertyNode(name, lead, ctx) {
+    return {
+        type: 'string',
+        value: name,
+        start: lead.start || 0,
+        end: ctx.getPosition().end,
+        line: lead.line,
+        column: lead.column,
+    };
+}
+function startsAnotherPair(ctx) {
+    if (ctx.isAtEnd() || isComment(ctx.peek()))
+        return false;
+    if (isKeyword(ctx.peek(), ['over', 'using', KEYWORDS.WITH]))
+        return false;
+    return !isCommandBoundary(ctx, ['catch', 'finally', 'on']);
+}
+function pairsNode(pairs) {
+    const field = (name, value) => ({
+        key: {
+            type: 'identifier',
+            name,
+            start: value.start,
+            end: value.end,
+            line: value.line,
+            column: value.column,
+        },
+        value,
+    });
+    const elements = pairs.map(pair => {
+        const properties = [field('property', pair.property), field('to', pair.to)];
+        if (pair.owner)
+            properties.push(field('owner', pair.owner));
+        if (pair.from)
+            properties.push(field('from', pair.from));
+        return {
+            type: 'objectLiteral',
+            properties,
+            start: (pair.owner ?? pair.property).start,
+            end: pair.to.end,
+            line: (pair.owner ?? pair.property).line,
+            column: (pair.owner ?? pair.property).column,
+        };
+    });
+    const firstEl = elements[0];
+    const lastEl = elements[elements.length - 1];
+    return {
+        type: 'arrayLiteral',
+        elements,
+        start: firstEl.start,
+        end: lastEl.end,
+        line: firstEl.line,
+        column: firstEl.column,
+    };
 }
 function parseStartCommand(ctx, identifierNode) {
     if (!ctx.match('view')) {
@@ -9152,6 +9415,15 @@ function parseToggleCommand(ctx, identifierNode) {
             args.push(classArg.expression);
             modifiers['as'] = literalModifier(mode);
         }
+        else if (classArg?.type === 'binaryExpression' &&
+            classArg.operator === 'of' &&
+            classArg.left?.type === 'selector' &&
+            typeof classArg.left.value === 'string' &&
+            classArg.left.value.startsWith('*') &&
+            classArg.right) {
+            args.push(classArg.left);
+            modifiers['on'] = classArg.right;
+        }
         else if (classArg) {
             args.push(classArg);
         }
@@ -9329,11 +9601,17 @@ function parseSwapCommand(ctx, identifierNode) {
     const targetExpr = isDelete ? ctx.parseExpression() : parseOneArgument(ctx, [KEYWORDS.WITH]);
     if (targetExpr)
         args.push(targetExpr);
-    if (!isDelete && consumeOptionalKeyword(ctx, KEYWORDS.WITH)) {
+    const isMorph = identifierNode.name === 'morph';
+    if (!isDelete &&
+        (consumeOptionalKeyword(ctx, KEYWORDS.WITH) ||
+            (isMorph && consumeOptionalKeyword(ctx, KEYWORDS.TO)))) {
         const contentExpr = parseOneArgument(ctx, ['using']);
         if (contentExpr)
             modifiers['with'] = contentExpr;
     }
+    if (isMorph && modifiers['with'] === undefined) {
+        ctx.addError("Expected 'to' and the content to morph into");
+    }
     return CommandNodeBuilder.fromIdentifier(identifierNode)
         .withArgs(...args)
         .withModifiers({ ...modifiers, ...parseViewTransitionTail(ctx) })
@@ -10094,6 +10372,8 @@ function atArgumentBoundary(ctx, grammar) {
     const next = ctx.peek();
     if (ctx.checkIsCommand() && ctx.peekAt(1)?.value === '(')
         return false;
+    if (isGluedBeepBang(next, ctx.peekAt(1)))
+        return false;
     if (isCommandBoundary(ctx, ['catch', 'finally', 'on']))
         return true;
     return isKeyword(next, [...grammar.markers]);
@@ -10125,10 +10405,13 @@ function parseDeclaredCommand(ctx, commandToken, name, grammar) {
         }
     }
     const commaList = new Set(grammar.commaList ?? []);
+    const namedArgs = new Set(grammar.namedArgs ?? []);
     while (!ctx.isAtEnd() && isKeyword(ctx.peek(), [...grammar.markers])) {
         const keyword = ctx.advance().value;
         const key = ctx.resolveKeyword(keyword).toLowerCase();
-        let value = ctx.parseExpression();
+        let value = namedArgs.has(key) && isNakedNamedArgStart(ctx)
+            ? parseNakedNamedArgs(ctx, () => ctx.parseExpression(), name)
+            : ctx.parseExpression();
         if (value && commaList.has(key) && ctx.check(',')) {
             const elements = [value];
             while (ctx.match(',')) {
@@ -10293,8 +10576,8 @@ function parseFetchCommand(ctx, commandToken) {
         }
         if (ctx.check('with') && !modifiers['with']) {
             ctx.advance();
-            if (isFetchNakedNamedArgStart(ctx)) {
-                modifiers['with'] = parseFetchNakedNamedArgs(ctx);
+            if (isNakedNamedArgStart(ctx)) {
+                modifiers['with'] = parseNakedNamedArgs(ctx, () => ctx.parsePrimary(), 'fetch');
             }
             else {
                 modifiers['with'] = ctx.parsePrimary();
@@ -10329,45 +10612,6 @@ function parseFetchCommand(ctx, commandToken) {
     }
     return builder.build();
 }
-function isFetchNakedNamedArgStart(ctx) {
-    if (ctx.check('{'))
-        return false;
-    if (!ctx.checkIdentifierLike())
-        return false;
-    const next = ctx.peekAt(1);
-    return next !== null && next.value === ':';
-}
-function parseFetchNakedNamedArgs(ctx) {
-    const properties = [];
-    const startPos = ctx.getPosition();
-    do {
-        if (!ctx.checkIdentifierLike())
-            break;
-        const keyToken = ctx.advance();
-        const key = {
-            type: 'identifier',
-            name: keyToken.value,
-            start: keyToken.start,
-            end: keyToken.end,
-            line: keyToken.line,
-            column: keyToken.column,
-        };
-        ctx.consume(':', "Expected ':' after property name in fetch named arguments");
-        const value = ctx.parsePrimary();
-        if (value) {
-            properties.push({ key, value });
-        }
-    } while (ctx.match(',') && !ctx.isAtEnd());
-    const endPos = ctx.getPosition();
-    return {
-        type: 'objectLiteral',
-        properties,
-        start: startPos.start,
-        end: endPos.end,
-        line: startPos.line,
-        column: startPos.column,
-    };
-}
 function findJsEndBoundary(ctx, startPos) {
     const input = ctx.getInputSlice(startPos);
     if (!input) {
@@ -10487,6 +10731,7 @@ function parseTellCommand(ctx, identifierNode) {
     const commands = [];
     while (!ctx.isAtEnd()) {
         if (ctx.checkIsCommand()) {
+            const word = ctx.peek().value;
             try {
                 ctx.advance();
                 const cmd = ctx.parseCommand();
@@ -10497,7 +10742,8 @@ function parseTellCommand(ctx, identifierNode) {
                     break;
                 }
             }
-            catch {
+            catch (error) {
+                ctx.addError(`'${word}' in a tell body failed to parse: ${error instanceof Error ? error.message : String(error)}`);
                 break;
             }
             if (ctx.match(KEYWORDS.AND) || ctx.match(KEYWORDS.THEN)) {
@@ -10646,7 +10892,6 @@ const ONE_EXPR = (syntax) => ({
     markers: [],
     syntax,
 });
-const BEEP = ONE_EXPR('beep! [<expression>, \u2026]');
 const COMMAND_GRAMMAR = {
     append: { positional: 'expression', markers: ['to'], syntax: 'append <value> [to <target>]' },
     prepend: { positional: 'expression', markers: ['to'], syntax: 'prepend <value> [to <target>]' },
@@ -10657,8 +10902,7 @@ const COMMAND_GRAMMAR = {
         syntax: 'make (a|an) <type> [from <args>] [called <name>]',
     },
     throw: { positional: 'primary', markers: [], syntax: 'throw <error>' },
-    'beep!': BEEP,
-    beep: BEEP,
+    beep: ONE_EXPR('beep! [<expression>, \u2026]'),
     blur: ONE_EXPR('blur [<target>]'),
     break: NONE,
     breakpoint: NONE,
@@ -10682,7 +10926,8 @@ const COMMAND_GRAMMAR = {
     render: {
         positional: 'expression',
         markers: ['with'],
-        syntax: 'render <template> [with <variables>]',
+        namedArgs: ['with'],
+        syntax: 'render <template> [with <name>: <value>, \u2026]',
     },
     reset: ONE_EXPR('reset [<form>]'),
     return: ONE_EXPR('return [<value>]'),
@@ -11037,7 +11282,10 @@ class Parser {
         const firstToken = this.peek();
         const prefixEntry = Parser.PRATT_TABLE.get(firstToken.value);
         let left;
-        if (prefixEntry?.prefix) {
+        if (isGluedBeepBang(firstToken, this.tokens[this.current + 1])) {
+            left = this.parseBeepExpression();
+        }
+        else if (prefixEntry?.prefix) {
             const token = this.advance();
             if (this.isAtEnd()) {
                 this.addError(`Expected expression after '${token.value}' operator`);
@@ -11057,6 +11305,9 @@ class Parser {
                     continue;
                 }
             }
+            if (nextToken.value === '*' && this.isSpacedStyleRef(this.current)) {
+                break;
+            }
             const infixEntry = Parser.PRATT_TABLE.get(nextToken.value);
             if (!infixEntry?.infix) {
                 if (STOP_TOKENS.has(nextToken.value) || STOP_DELIMITERS.has(nextToken.value)) {
@@ -11118,6 +11369,35 @@ class Parser {
         this.prattCache.set(cacheKey, { node: left, endPos: this.current });
         return left;
     }
+    parseBeepExpression() {
+        const beepToken = this.advance();
+        this.advance();
+        if (this.isAtEnd()) {
+            this.addError("Expected expression after 'beep!'");
+            return this.createErrorNode();
+        }
+        const operand = this.parseExpressionPratt(Parser.BEEP_OPERAND_BP);
+        return {
+            type: 'unaryExpression',
+            operator: 'beep!',
+            operand,
+            argument: operand,
+            prefix: true,
+            start: beepToken.start,
+            end: this.previous().end,
+            line: beepToken.line,
+            column: beepToken.column,
+        };
+    }
+    isStyleRefStar(i) {
+        const star = this.tokens[i];
+        const name = this.tokens[i + 1];
+        return star?.value === '*' && !!name && name.start === star.end && isIdentifierLike(name);
+    }
+    isSpacedStyleRef(i) {
+        const prev = this.tokens[i - 1];
+        return this.isStyleRefStar(i) && !!prev && prev.end < this.tokens[i].start;
+    }
     tryParseStringPostfix(left, nextToken) {
         const v = nextToken.value;
         let unit = null;
@@ -11320,6 +11600,10 @@ class Parser {
         const isStop = () => this.check('end') || extraStops.some(s => this.check(s));
         debug.parse('\ud83d\udd04 parseCommandListUntilTerminator: Starting (extraStops:', extraStops.join(','), ')');
         while (!this.isAtEnd() && !isStop()) {
+            if (this.checkComment()) {
+                this.advance();
+                continue;
+            }
             debug.parse('\ud83d\udccd Loop iteration, current token:', this.peek().value, 'kind:', this.peek().kind);
             let parsedCommand = false;
             const isCommandToken = this.checkIsCommand();
@@ -11403,7 +11687,7 @@ class Parser {
             debug.parse('\u2705 Found "end", consuming it');
             this.advance();
         }
-        else {
+        else if (!this.atEndOfInput()) {
             debug.parse('\u274c ERROR: Expected "end" but got:', this.peek().value, 'at position:', this.peek().start);
             throw new Error(`Expected "end" to close ${construct} block`);
         }
@@ -11416,7 +11700,7 @@ class Parser {
             if (this.check('end')) {
                 this.advance();
             }
-            else {
+            else if (!this.atEndOfInput()) {
                 throw new Error('Expected "end" to close repeat block');
             }
         }
@@ -11432,7 +11716,10 @@ class Parser {
             this.advance();
         }
         else if (terminator === '') {
-            throw new Error('Expected "end", "else", "until", or "while" to close repeat block');
+            if (!this.atEndOfInput()) {
+                throw new Error('Expected "end", "else", "until", or "while" to close repeat block');
+            }
+            return { commands, terminator: 'end' };
         }
         return { commands, terminator };
     }
@@ -12016,7 +12303,9 @@ class Parser {
     parseTopLevelInitBlock() {
         const pos = this.getPosition();
         const initCommands = this.parseCommandBlock(['end']);
-        this.consume('end', "Expected 'end' after init block");
+        if (!this.match('end') && !this.atEndOfInput() && !this.checkFeatureStart()) {
+            this.consume('end', "Expected 'end' after init block");
+        }
         return {
             type: 'initBlock',
             commands: initCommands,
@@ -12192,10 +12481,29 @@ class Parser {
             ...(sourceExpr.column !== undefined && { column: sourceExpr.column }),
         };
     }
+    isArgumentListOnly(open) {
+        let depth = 0;
+        for (let i = open; i < this.tokens.length; i++) {
+            const token = this.tokens[i];
+            if (token.kind !== 'operator')
+                continue;
+            if (token.value === '(' || token.value === '[' || token.value === '{')
+                depth++;
+            else if (token.value === ')' || token.value === ']' || token.value === '}') {
+                if (--depth === 0)
+                    return i === open + 1;
+            }
+            else if (token.value === ',' && depth === 1)
+                return true;
+        }
+        return false;
+    }
     tryParsePseudoCommand(callExpr, sourceExpr) {
         const methodName = callExpr.callee.name;
         const nextToken = this.peek();
-        const hasPseudoCommandPattern = Parser.PSEUDO_COMMAND_PREPOSITIONS.includes(nextToken.value.toLowerCase()) ||
+        const nextIsArticle = nextToken.value.toLowerCase() === 'the';
+        const hasPseudoCommandPattern = nextIsArticle ||
+            Parser.PSEUDO_COMMAND_PREPOSITIONS.includes(nextToken.value.toLowerCase()) ||
             (isIdentifier(nextToken) && !this.isCommand(nextToken.value)) ||
             isContextVar(nextToken);
         if (!hasPseudoCommandPattern) {
@@ -12221,7 +12529,10 @@ class Parser {
             });
         }
         let preposition;
-        if (Parser.PSEUDO_COMMAND_PREPOSITIONS.includes(this.peek().value.toLowerCase())) {
+        if (nextIsArticle) {
+            this.advance();
+        }
+        else if (Parser.PSEUDO_COMMAND_PREPOSITIONS.includes(this.peek().value.toLowerCase())) {
             preposition = this.advance().value.toLowerCase();
         }
         let targetExpr;
@@ -12385,10 +12696,22 @@ class Parser {
             this.consume(']', "Expected ']' after event condition");
         }
         let target;
+        let targetExpression;
         if (this.match('from')) {
-            const targetToken = this.advance();
-            target = targetToken.value;
-            debug.parse(`\ud83d\udd27 parseEventHandler: Parsed 'from' target: ${target} (kind: ${targetToken.kind})`);
+            if (this.check('the'))
+                this.advance();
+            if (Parser.POSITIONAL_SOURCE_HEADS.has(this.peek().value.toLowerCase())) {
+                const startIndex = this.current;
+                targetExpression = this.parseExpression();
+                target = this.tokens
+                    .slice(startIndex, this.current)
+                    .map(t => t.value)
+                    .join(' ');
+            }
+            else {
+                target = this.advance().value;
+            }
+            debug.parse(`\ud83d\udd27 parseEventHandler: Parsed 'from' target: ${target}`);
             this.parseTemporalKeywordModifiers(modifiers);
         }
         let attributeName;
@@ -12434,7 +12757,7 @@ class Parser {
                 const nextIsOpenParen = this.tokens[this.current + 1]?.value === '(';
                 const commandName = this.peek().value.toLowerCase();
                 const isSpecialBodyCommand = commandName === 'js' || commandName === 'tell';
-                if (nextIsOpenParen && !isSpecialBodyCommand) {
+                if (nextIsOpenParen && !isSpecialBodyCommand && this.isArgumentListOnly(this.current + 1)) {
                     let expr;
                     const savedError = this.error;
                     try {
@@ -12466,7 +12789,7 @@ class Parser {
                     }
                 }
             }
-            else if (this.checkIdentifier()) {
+            else if (this.checkIdentifier() || this.checkEventNamedCall()) {
                 const token = this.peek();
                 if (this.isCommand(token.value)) {
                     const cmd = this.parseCommandWithErrorRecovery();
@@ -12575,6 +12898,7 @@ class Parser {
             ...(eventParams.length > 0 && { args: eventParams }),
             ...(condition && { condition: fromLegacyExpression(condition) }),
             ...(target && { target }),
+            ...(targetExpression && { targetExpression: fromLegacyExpression(targetExpression) }),
             ...(attributeName && { attributeName }),
             ...(watchTarget && { watchTarget: fromLegacyExpression(watchTarget) }),
             ...(customEventSource && { customEventSource }),
@@ -12830,10 +13154,9 @@ class Parser {
     }
     parseCommandCore() {
         const commandToken = this.previous();
-        let commandName = commandToken.value;
+        const commandName = commandToken.value;
         if (commandName === 'beep' && this.check('!')) {
             this.advance();
-            commandName = 'beep!';
         }
         if (commandName === 'fetch') {
             return parseFetchCommand(this.getContext(), commandToken);
@@ -12932,6 +13255,9 @@ class Parser {
             args.push(this.parsePrimary());
         }
         const callNode = this.createCallExpression(createIdentifier(funcName, namePos), args);
+        if (funcName === 'closest' && args.length > 0 && this.match('to')) {
+            callNode.closestTo = this.parseExpression();
+        }
         if (funcName === 'next' || funcName === 'previous') {
             const relativePositional = this.parseRelativePositionalModifiers();
             if (relativePositional) {
@@ -12971,6 +13297,9 @@ class Parser {
     }
     parseTheXofY() {
         const positionalKeywords = ['first', 'last', 'next', 'previous', 'random', 'closest'];
+        if (this.isStyleRefStar(this.current)) {
+            return this.parsePrimary();
+        }
         if (!this.checkIdentifier()) {
             return this.createIdentifier('the');
         }
@@ -12986,7 +13315,7 @@ class Parser {
             return this.createIdentifier(propertyName);
         }
         this.advance();
-        const target = this.parseCall();
+        const target = parseOfOperand(this.makePrattContext(), THE_OF_TARGET_BP);
         return {
             type: 'propertyOfExpression',
             property: { type: 'identifier', name: propertyName },
@@ -13184,6 +13513,13 @@ class Parser {
     checkLiteral() {
         return this.checkPredicate(isLiteral);
     }
+    checkEventNamedCall() {
+        if (this.isAtEnd() || !this.checkIdentifierLike() || this.checkIsCommand())
+            return false;
+        const token = this.peek();
+        const next = this.tokens[this.current + 1];
+        return next?.value === '(' && next.start === token.end;
+    }
     checkIdentifierLike() {
         return this.checkPredicate(isIdentifierLike);
     }
@@ -13292,6 +13628,22 @@ class Parser {
     isAtEnd() {
         return this.current >= this.tokens.length;
     }
+    atEndOfInput() {
+        for (let i = this.current; i < this.tokens.length; i++) {
+            if (!isComment(this.tokens[i]))
+                return false;
+        }
+        return true;
+    }
+    checkFeatureStart() {
+        if (this.isAtEnd())
+            return false;
+        const value = this.peek().value;
+        return (value === 'init' ||
+            value === 'on' ||
+            value === 'def' ||
+            getRegisteredFeature(value) !== undefined);
+    }
     peek() {
         if (this.isAtEnd()) {
             return { kind: 'unknown', value: '', start: 0, end: 0, line: 1, column: 1 };
@@ -13503,6 +13855,7 @@ class Parser {
             match: this.match.bind(this),
             matchOperator: this.matchOperator.bind(this),
             isAtEnd: this.isAtEnd.bind(this),
+            atEndOfInput: this.atEndOfInput.bind(this),
             createIdentifier: this.createIdentifier.bind(this),
             parseExpression: this.parseExpression.bind(this),
             parsePrimary: this.parsePrimary.bind(this),
@@ -13553,7 +13906,15 @@ Parser.POSTFIX_UNARY_OPERATORS = new Set([
     'ignoring case',
 ]);
 Parser.PRATT_TABLE = PARSER_TABLE;
+Parser.BEEP_OPERAND_BP = 80;
 Parser.PSEUDO_COMMAND_PREPOSITIONS = ['from', 'on', 'with', 'into', 'at', 'to'];
+Parser.POSITIONAL_SOURCE_HEADS = new Set([
+    'closest',
+    'next',
+    'previous',
+    'first',
+    'last',
+]);
 function parse(input, options) {
     const tokens = tokenize(input);
     const parser = new Parser(tokens, options, input);
@@ -13995,11 +14356,16 @@ async function evaluateBinaryExpression(node, context) {
                 }
             }
         }
-        if (leftNode?.type === 'selector' && leftNode.fromQuery && typeof leftNode.value === 'string') {
+        if (leftNode?.type === 'selector' &&
+            typeof leftNode.value === 'string' &&
+            (leftNode.fromQuery || (operator === 'in' && leftNode.value.startsWith('.')))) {
             const root = await evaluateAST(node.right, context);
             const scope = root && typeof root.querySelectorAll === 'function' ? root : null;
             if (scope) {
-                return Array.from(scope.querySelectorAll(leftNode.value));
+                const query = leftNode.fromQuery
+                    ? leftNode.value
+                    : escapeSelectorForQuery(leftNode, leftNode.value);
+                return Array.from(scope.querySelectorAll(query));
             }
         }
     }
@@ -14011,6 +14377,12 @@ async function evaluateBinaryExpression(node, context) {
         return getExpr(context, 'styleRef').evaluate(context, leftNode.value.slice(1), el);
     }
     if (operator === 'of') {
+        if (leftNode?.type === 'attributeAccess') {
+            const target = await evaluateAST(node.right, context);
+            if (target == null)
+                return undefined;
+            return getExpr(context, 'possessive').evaluate(context, target, `@${leftNode.attributeName}`);
+        }
         const path = propertyPathOf(node.left);
         if (path) {
             const target = await evaluateAST(node.right, context);
@@ -14018,6 +14390,10 @@ async function evaluateBinaryExpression(node, context) {
             for (const seg of path) {
                 if (cur == null)
                     return undefined;
+                if (isMappableCollection(cur) && !(seg in cur)) {
+                    cur = await getExpr(context, 'possessive').evaluate(context, cur, seg);
+                    continue;
+                }
                 cur = isElement(cur) ? getElementProperty$1(cur, seg) : cur[seg];
             }
             return typeof cur === 'function' ? cur.bind(target) : cur;
@@ -14042,26 +14418,21 @@ async function evaluateBinaryExpression(node, context) {
     const R = node.ignoringCase ? applyCI(right) : right;
     switch (operator) {
         case '+': {
-            let addLeft = left;
-            let addRight = right;
             if (node.coerceNumeric) {
-                if (typeof addLeft === 'string')
-                    addLeft = convertToNumber(addLeft);
-                if (typeof addRight === 'string')
-                    addRight = convertToNumber(addRight);
+                return counterValue(left) + counterAmount(right);
             }
-            if (typeof addLeft === 'string' || typeof addRight === 'string') {
-                return String(addLeft ?? '') + String(addRight ?? '');
+            if (typeof left === 'string' || typeof right === 'string') {
+                return String(left ?? '') + String(right ?? '');
             }
-            if (Array.isArray(addLeft)) {
-                return Array.isArray(addRight) ? [...addLeft, ...addRight] : [...addLeft, addRight];
+            if (Array.isArray(left)) {
+                return Array.isArray(right) ? [...left, ...right] : [...left, right];
             }
-            return unwrapTypedResult(await getExpr(context, 'addition').evaluate(context, {
-                left: addLeft,
-                right: addRight,
-            }));
+            return unwrapTypedResult(await getExpr(context, 'addition').evaluate(context, { left, right }));
         }
         case '-':
+            if (node.coerceNumeric) {
+                return counterValue(left) - counterAmount(right);
+            }
             return unwrapTypedResult(await getExpr(context, 'subtraction').evaluate(context, { left, right }));
         case '*':
             return unwrapTypedResult(await getExpr(context, 'multiplication').evaluate(context, { left, right }));
@@ -14319,9 +14690,8 @@ async function evaluatePropertyOfExpressionNode(node, context) {
     }
     const propertyName = propertyNode.name;
     const target = await evaluateAST(node.target, context);
-    if (target == null) {
-        throw new Error(`Cannot access property "${propertyName}" of ${target}`);
-    }
+    if (target == null)
+        return undefined;
     return getExpr(context, 'possessive').evaluate(context, target, propertyName);
 }
 async function evaluateTemplateLiteralNode(node, context) {
@@ -14439,6 +14809,9 @@ async function evaluateUnaryExpression(node, context) {
         case 'not':
         case '!':
             return logicalExpressions.not.evaluate(context, value);
+        case 'beep!':
+            beepValues(context.me, [value]);
+            return value;
         case 'no':
             return logicalExpressions.no.evaluate(context, value);
         case '-':
@@ -14528,6 +14901,10 @@ async function evaluateCallExpression(node, context) {
         const args = await resolveCallArgs(node.arguments, funcName, context);
         switch (funcName) {
             case 'closest':
+                if (node.closestTo) {
+                    const start = unwrapElement(await evaluateAST(node.closestTo, context)) ?? null;
+                    return referencesExpressions.closest.evaluate(context, args[0], start);
+                }
                 return referencesExpressions.closest.evaluate(context, ...args);
             case 'previous':
             case 'next': {
@@ -15952,10 +16329,29 @@ const STRATEGY_KEYWORDS = {
     innermorph: 'morph',
     outermorph: 'morphOuter',
 };
+function loneRootWithTag(content, tagName) {
+    let root;
+    if (typeof content === 'string') {
+        const template = document.createElement('template');
+        template.innerHTML = content;
+        root = template.content.firstElementChild;
+        if (!root || root.nextElementSibling)
+            return null;
+    }
+    else {
+        root = content.cloneNode(true);
+    }
+    return root.tagName === tagName && isHTMLElement$2(root) ? root : null;
+}
 function executeSwap(target, content, strategy, morphOptions) {
     const contentStr = content !== null && !isHTMLElement$2(content) ? content : '';
     const contentEl = isHTMLElement$2(content) ? content : null;
     switch (strategy) {
+        case 'morphMerge': {
+            const root = content !== null ? loneRootWithTag(content, target.tagName) : null;
+            executeSwap(target, root ?? content, root ? 'morphOuter' : 'morph', morphOptions);
+            break;
+        }
         case 'morph':
             if (content !== null) {
                 try {
@@ -16245,7 +16641,7 @@ let MorphCommand = (() => {
             if (args.length === 0 && modifiers.with === undefined) {
                 throw new Error('[HyperFixi] morph: command requires arguments');
             }
-            const strategy = literalText(modifiers.strategy)?.toLowerCase() === 'over' ? 'morphOuter' : 'morph';
+            const strategy = literalText(modifiers.strategy)?.toLowerCase() === 'over' ? 'morphOuter' : 'morphMerge';
             const useViewTransition = modifiers.viewTransition !== undefined;
             const targetNode = modifiers.on !== undefined ? modifiers.on : args[0];
             const contentNode = modifiers.with !== undefined
@@ -17535,6 +17931,19 @@ async function resolveWriteTarget(node, evaluator, context, options) {
         }
         return { kind: 'property', target: property };
     }
+    if (options.ofAndObjectProperty) {
+        const access = ofOrPossessiveAccess(n);
+        if (access) {
+            const owner = await evaluator.evaluate(access.owner, context);
+            const element = Array.isArray(owner) ? owner[0] : owner;
+            if (access.isOf && isHTMLElement$2(element)) {
+                return { kind: 'property', target: { element, property: access.name } };
+            }
+            if (isObjectOwner(owner)) {
+                return { kind: 'member', container: owner, property: access.name };
+            }
+        }
+    }
     if (options.bareReference &&
         (nodeType === 'identifier' || nodeType === 'variable' || nodeType === 'symbol') &&
         typeof n.name === 'string') {
@@ -17544,6 +17953,19 @@ async function resolveWriteTarget(node, evaluator, context, options) {
     }
     return null;
 }
+function ofOrPossessiveAccess(n) {
+    const [owner, property, isOf] = n.type === 'possessiveExpression'
+        ? [n.object, n.property, false]
+        : n.type === 'propertyOfExpression'
+            ? [n.target, n.property, false]
+            : n.type === 'binaryExpression' && n.operator === 'of'
+                ? [n.right, n.left, true]
+                : [undefined, undefined, false];
+    const name = property?.name;
+    if (!owner || typeof name !== 'string' || !/^[A-Za-z_$][\w$]*$/.test(name))
+        return null;
+    return { owner, name, isOf };
+}
 
 function toSetInput(target, value) {
     switch (target.kind) {
@@ -17565,10 +17987,18 @@ function toSetInput(target, value) {
                 property: target.target.property,
                 value,
             };
+        case 'member':
+            return {
+                type: 'member-assignment',
+                container: target.container,
+                property: target.property,
+                value,
+            };
         default:
             throw new Error(`set: unrequested write-target rung '${target.kind}'`);
     }
 }
+const SET_RUNGS = { nodeWriters: true, styleSplit: true, ofAndObjectProperty: true };
 let SetCommand = (() => {
     let _classDecorators = [command({ name: 'set' })];
     let _classDescriptor;
@@ -17587,8 +18017,7 @@ let SetCommand = (() => {
             const argScope = firstArg?.scope;
             const writeTarget = await resolveWriteTarget(firstArg, evaluator, context, {
                 scopeElements: () => this.resolveTargets(raw.modifiers.on, evaluator, context),
-                nodeWriters: true,
-                styleSplit: true,
+                ...SET_RUNGS,
             });
             if (writeTarget) {
                 return toSetInput(writeTarget, await this.extractValue(raw, evaluator, context));
@@ -17914,12 +18343,30 @@ function getNodeType(node) {
         return 'unknown';
     return node.type || 'unknown';
 }
+function propertyTarget(node) {
+    const n = node;
+    const owner = n.type === 'propertyOfExpression'
+        ? n.target
+        : n.type === 'possessiveExpression' ||
+            n.type === 'memberExpression' ||
+            n.type === 'propertyAccess'
+            ? n.object
+            : undefined;
+    if (!owner || n.computed)
+        return null;
+    const p = n.property;
+    const name = typeof p === 'string' ? p : typeof p?.name === 'string' ? p.name : undefined;
+    if (!name || !/^[A-Za-z_$][\w$-]*$/.test(name))
+        return null;
+    return { owner, name };
+}
 async function parseNumericTargetInput(raw, evaluator, context, commandName) {
     if (!raw.args || raw.args.length === 0) {
         throw new Error(`${commandName} command requires a target`);
     }
     const targetArg = raw.args[0];
     let target;
+    let property;
     let extractedScope;
     let customWrite;
     const nodeType = getNodeType(targetArg);
@@ -17934,7 +18381,25 @@ async function parseNumericTargetInput(raw, evaluator, context, commandName) {
     }
     else {
         const writer = getRegisteredNodeWriter(nodeType);
-        if (writer) {
+        const attribute = writer
+            ? null
+            : await resolveAttributeWriteTarget(targetArg, evaluator, context, async () => context.me ? [context.me] : []);
+        const prop = writer || attribute ? null : propertyTarget(targetArg);
+        const owner = prop ? await evaluator.evaluate(prop.owner, context) : undefined;
+        const ownerElement = Array.isArray(owner) ? owner[0] : owner;
+        if (attribute?.elements[0]) {
+            target = attribute.elements[0];
+            property = `@${attribute.name}`;
+        }
+        else if (prop && isHTMLElement$2(ownerElement)) {
+            target = ownerElement;
+            property = prop.name;
+        }
+        else if (prop && isObjectOwner(owner)) {
+            target = owner;
+            property = prop.name;
+        }
+        else if (writer) {
             const currentRaw = await evaluator.evaluate(targetArg, context);
             const currentValue = typeof currentRaw === 'number'
                 ? currentRaw
@@ -17972,24 +18437,22 @@ async function parseNumericTargetInput(raw, evaluator, context, commandName) {
             if (typeof evaluated === 'number') {
                 amount = evaluated;
             }
+            else if (evaluated == null) {
+                amount = NaN;
+            }
         }
     }
     const byModifier = raw.modifiers?.by;
     if (byModifier) {
-        const byValue = byModifier.value;
-        if (getNodeType(byModifier) === 'literal' && typeof byValue === 'number') {
-            amount = byValue;
-        }
-        else if (getNodeType(byModifier) !== 'literal') {
-            const evaluated = await evaluator.evaluate(byModifier, context);
-            if (typeof evaluated === 'number') {
-                amount = evaluated;
-            }
-        }
+        const value = getNodeType(byModifier) === 'literal'
+            ? byModifier.value
+            : await evaluator.evaluate(byModifier, context);
+        amount = counterAmount(value);
     }
     return {
         target,
         amount,
+        ...(property && { property }),
         ...(scope && { scope }),
         ...(customWrite && { customWrite }),
     };
@@ -18012,7 +18475,7 @@ let NumericModifyCommand = (() => {
         async execute(input, context) {
             const { target, property, scope, amount = 1, operation = 'increment', customWrite } = input;
             if (customWrite) {
-                const delta = isFinite(amount) ? amount : 1;
+                const delta = amount;
                 const newValue = operation === 'increment'
                     ? customWrite.currentValue + delta
                     : customWrite.currentValue - delta;
@@ -18026,8 +18489,7 @@ let NumericModifyCommand = (() => {
                 newValue = NaN;
             }
             else {
-                const delta = isFinite(amount) ? amount : 1;
-                newValue = operation === 'increment' ? currentValue + delta : currentValue - delta;
+                newValue = operation === 'increment' ? currentValue + amount : currentValue - amount;
             }
             setTargetValue(target, property, scope, newValue, context);
             Object.assign(context, { it: newValue });
@@ -18843,17 +19305,7 @@ let BeepCommand = (() => {
                 this.debugContext(context);
                 return { expressionCount: 0, debugged: true, outputs: [] };
             }
-            const outputs = [];
-            console.group('\ud83d\udd14 beep! Debug Output');
-            for (const expression of expressions) {
-                const output = this.debugExpression(expression);
-                outputs.push(output);
-                console.log(`Value:`, expression);
-                console.log(`Type:`, output.type);
-                console.log(`Representation:`, output.representation);
-                console.log('---');
-            }
-            console.groupEnd();
+            const outputs = beepValues(context.me, expressions);
             return { expressionCount: expressions.length, debugged: true, outputs };
         }
         debugContext(context) {
@@ -18866,67 +19318,6 @@ let BeepCommand = (() => {
             console.log('variables:', context.variables);
             console.groupEnd();
         }
-        debugExpression(expression) {
-            return {
-                value: expression,
-                type: this.getType(expression),
-                representation: this.getRepresentation(expression),
-            };
-        }
-        getType(value) {
-            if (value === null)
-                return 'null';
-            if (value === undefined)
-                return 'undefined';
-            if (Array.isArray(value))
-                return 'array';
-            if (isHTMLElement$2(value))
-                return 'HTMLElement';
-            if (value instanceof Element)
-                return 'Element';
-            if (value instanceof Node)
-                return 'Node';
-            if (value instanceof Error)
-                return 'Error';
-            if (value instanceof Date)
-                return 'Date';
-            if (value instanceof RegExp)
-                return 'RegExp';
-            return typeof value;
-        }
-        getRepresentation(value) {
-            if (value === null)
-                return 'null';
-            if (value === undefined)
-                return 'undefined';
-            if (Array.isArray(value)) {
-                return `Array(${value.length}) [${value
-                    .slice(0, 3)
-                    .map(v => this.getRepresentation(v))
-                    .join(', ')}${value.length > 3 ? '...' : ''}]`;
-            }
-            if (isHTMLElement$2(value)) {
-                const el = value;
-                const tag = el.tagName.toLowerCase();
-                const id = el.id ? `#${el.id}` : '';
-                const classes = el.className ? `.${el.className.split(' ').join('.')}` : '';
-                return `<${tag}${id}${classes}/>`;
-            }
-            if (value instanceof Error)
-                return `Error: ${value.message}`;
-            if (typeof value === 'string')
-                return value.length > 50 ? `"${value.substring(0, 47)}..."` : `"${value}"`;
-            if (typeof value === 'object') {
-                try {
-                    const keys = Object.keys(value);
-                    return `Object {${keys.slice(0, 3).join(', ')}${keys.length > 3 ? '...' : ''}}`;
-                }
-                catch {
-                    return '[Object]';
-                }
-            }
-            return String(value);
-        }
     };
     __setFunctionName(_classThis, "BeepCommand");
     (() => {
@@ -19888,7 +20279,10 @@ function createUntilLoopConfig(conditionExpr, evaluateCondition, context, indexV
     };
     const config = {
         type: 'until',
-        shouldContinue: () => !evaluateCondition(conditionExpr, context),
+        shouldContinue: () => {
+            const met = evaluateCondition(conditionExpr, context);
+            return met instanceof Promise ? met.then(value => !value) : !met;
+        },
     };
     return { config, iterCtx };
 }
@@ -19937,6 +20331,18 @@ async function slotText(node, evaluator, context) {
     const v = await evaluator.evaluate(node, context);
     return typeof v === 'string' ? v : undefined;
 }
+function isEventTarget(value) {
+    return typeof value?.addEventListener === 'function';
+}
+async function evaluateLoopCondition(condition, context) {
+    if (typeof condition === 'function')
+        return Boolean(await condition());
+    return evaluateCondition(condition, context);
+}
+function loopCount(value) {
+    const count = Number(value);
+    return Number.isNaN(count) ? 0 : count;
+}
 let RepeatCommand = (() => {
     let _classDecorators = [command({ name: 'repeat' })];
     let _classDescriptor;
@@ -19994,17 +20400,24 @@ let RepeatCommand = (() => {
                 };
             }
             if (loopType === 'times' || m.times) {
-                const countValue = m.times && (await evaluator.evaluate(m.times, context));
-                const count = typeof countValue === 'number' ? countValue : parseInt(String(countValue), 10);
-                if (isNaN(count))
+                if (!m.times)
                     throw new Error('times loops require a count number');
+                const count = loopCount(await evaluator.evaluate(m.times, context));
                 return { type: 'times', count, indexVariable, commands, elseCommands };
             }
             if (loopType === 'while' || m.while) {
                 const condition = m.while;
                 if (!condition)
                     throw new Error('while loops require a condition');
-                return { type: 'while', condition, indexVariable, commands, elseCommands, bottomTested };
+                const check = () => evaluator.evaluate(condition, context);
+                return {
+                    type: 'while',
+                    condition: check,
+                    indexVariable,
+                    commands,
+                    elseCommands,
+                    bottomTested,
+                };
             }
             if (loopType === 'until-event' || m.event) {
                 const eventName = await text(m.event);
@@ -20022,7 +20435,7 @@ let RepeatCommand = (() => {
                     }
                     else {
                         const target = await evaluator.evaluate(m.from, context);
-                        if (target instanceof EventTarget)
+                        if (isEventTarget(target))
                             eventTarget = target;
                         else if (target === 'document')
                             eventTarget = document;
@@ -20043,7 +20456,15 @@ let RepeatCommand = (() => {
                 const condition = m.until;
                 if (!condition)
                     throw new Error('until loops require a condition');
-                return { type: 'until', condition, indexVariable, commands, elseCommands, bottomTested };
+                const check = () => evaluator.evaluate(condition, context);
+                return {
+                    type: 'until',
+                    condition: check,
+                    indexVariable,
+                    commands,
+                    elseCommands,
+                    bottomTested,
+                };
             }
             if (loopType === 'forever') {
                 return { type: 'forever', indexVariable, commands, elseCommands };
@@ -20061,10 +20482,10 @@ let RepeatCommand = (() => {
                     ({ config, iterCtx } = createTimesLoopConfig(count, indexVariable));
                     break;
                 case 'while':
-                    ({ config, iterCtx } = createWhileLoopConfig(condition, evaluateCondition, context, indexVariable));
+                    ({ config, iterCtx } = createWhileLoopConfig(condition, evaluateLoopCondition, context, indexVariable));
                     break;
                 case 'until':
-                    ({ config, iterCtx } = createUntilLoopConfig(condition, evaluateCondition, context, indexVariable));
+                    ({ config, iterCtx } = createUntilLoopConfig(condition, evaluateLoopCondition, context, indexVariable));
                     break;
                 case 'until-event':
                     ({ config, iterCtx } = createUntilEventLoopConfig(eventName, eventTarget, indexVariable));
@@ -21095,6 +21516,29 @@ function namedPropertyOf(node) {
     }
     return null;
 }
+const RESTORE_KEYWORDS = new Set(['initial', 'inherit', 'unset', 'revert']);
+function elementsOf(value) {
+    if (Array.isArray(value) || isNodeList(value)) {
+        return Array.from(value).filter(isHTMLElement$2);
+    }
+    return isHTMLElement$2(value) ? [value] : [];
+}
+async function valueOf(node, evaluator, context) {
+    const value = await evaluator.evaluate(node, context);
+    const name = node.name;
+    if (value === undefined && node.type === 'identifier' && typeof name === 'string')
+        return name;
+    return value;
+}
+function longestTransitionMs(css) {
+    let longest;
+    for (const item of css.split(',')) {
+        const times = [...item.matchAll(/(\d*\.?\d+)(ms|s)\b/g)].map(m => parseFloat(m[1]) * (m[2] === 's' ? 1000 : 1));
+        if (times.length > 0)
+            longest = Math.max(longest ?? 0, times[0] + (times[1] ?? 0));
+    }
+    return longest;
+}
 let TransitionCommand = (() => {
     let _classDecorators = [command({ name: 'transition' })];
     let _classDescriptor;
@@ -21110,11 +21554,10 @@ let TransitionCommand = (() => {
             let property;
             let target;
             const firstArg = await evaluator.evaluate(raw.args[0], context);
-            const asElement = (value) => Array.isArray(value) || isNodeList(value) ? value[0] : value;
-            const firstAsElement = asElement(firstArg);
-            if (isHTMLElement$2(firstAsElement) ||
+            const owners = elementsOf(firstArg);
+            if (owners.length > 0 ||
                 (typeof firstArg === 'string' && /^[#.]|^(?:me|it|you)$/.test(firstArg))) {
-                target = firstAsElement;
+                target = owners.length === 1 ? owners[0] : owners.length > 1 ? owners : firstArg;
                 property = String(await evaluator.evaluate(raw.args[1], context));
             }
             else if (raw.args.length >= 2) {
@@ -21126,9 +21569,9 @@ let TransitionCommand = (() => {
                     throw new Error('transition requires a CSS property');
                 property = named.property;
                 if (named.objectNode !== undefined) {
-                    const owner = asElement(await evaluator.evaluate(named.objectNode, context));
-                    if (isHTMLElement$2(owner))
-                        target = owner;
+                    const owner = elementsOf(await evaluator.evaluate(named.objectNode, context));
+                    if (owner.length > 0)
+                        target = owner.length === 1 ? owner[0] : owner;
                 }
             }
             else {
@@ -21139,60 +21582,131 @@ let TransitionCommand = (() => {
             }
             if (!raw.modifiers?.to)
                 throw new Error('transition requires "to <value>"');
-            let value = await evaluator.evaluate(raw.modifiers.to, context);
-            if (value === undefined && raw.modifiers.to.type === 'identifier') {
-                value = raw.modifiers.to.name;
-            }
-            const result = { property, value: value };
+            const result = {
+                property,
+                value: await valueOf(raw.modifiers.to, evaluator, context),
+            };
             if (target !== undefined)
                 result.target = target;
+            if (raw.modifiers?.from)
+                result.from = await valueOf(raw.modifiers.from, evaluator, context);
+            if (raw.modifiers?.pairs) {
+                result.pairs = await this.laterPairs(raw.modifiers.pairs, evaluator, context);
+            }
             if (raw.modifiers?.over)
                 result.duration = await evaluator.evaluate(raw.modifiers.over, context);
             if (raw.modifiers?.with)
                 result.timingFunction = String(await evaluator.evaluate(raw.modifiers.with, context));
+            if (raw.modifiers?.using)
+                result.using = String(await evaluator.evaluate(raw.modifiers.using, context));
             return result;
         }
+        async laterPairs(node, evaluator, context) {
+            const pairs = [];
+            for (const pairNode of node.elements ?? []) {
+                const fields = new Map();
+                const properties = pairNode
+                    .properties ?? [];
+                for (const { key, value } of properties) {
+                    if (typeof key.name === 'string')
+                        fields.set(key.name, value);
+                }
+                const propertyNode = fields.get('property');
+                const toNode = fields.get('to');
+                if (!propertyNode || !toNode)
+                    throw new Error('transition requires property and value');
+                const pair = {
+                    property: String(await evaluator.evaluate(propertyNode, context)),
+                    value: await valueOf(toNode, evaluator, context),
+                };
+                const ownerNode = fields.get('owner');
+                if (ownerNode) {
+                    const owners = elementsOf(await evaluator.evaluate(ownerNode, context));
+                    if (owners.length === 0)
+                        throw new Error('transition: target element not found');
+                    pair.target = owners.length === 1 ? owners[0] : owners;
+                }
+                const fromNode = fields.get('from');
+                if (fromNode)
+                    pair.from = await valueOf(fromNode, evaluator, context);
+                pairs.push(pair);
+            }
+            return pairs;
+        }
         async execute(input, context) {
-            let { property } = input;
-            const { target, value, duration: durationInput, timingFunction } = input;
-            if (property.startsWith('*'))
-                property = property.substring(1);
-            property = camelToKebab(property);
-            const targetElement = resolveElement(target, context, 'transition');
-            const duration = parseDuration(durationInput, 300);
-            const fromValue = getComputedStyle(targetElement).getPropertyValue(property);
-            const originalTransition = targetElement.style.transition;
-            const transitionProp = `${property} ${duration}ms ${timingFunction || 'ease'}`;
-            targetElement.style.transition = originalTransition
-                ? `${originalTransition}, ${transitionProp}`
-                : transitionProp;
-            let toValue = String(value);
-            let removeInlineAfter = false;
-            if (toValue === 'initial' ||
-                toValue === 'inherit' ||
-                toValue === 'unset' ||
-                toValue === 'revert') {
-                const currentInline = targetElement.style.getPropertyValue(property);
-                targetElement.style.removeProperty(property);
-                toValue = getComputedStyle(targetElement).getPropertyValue(property);
-                if (currentInline) {
-                    targetElement.style.setProperty(property, currentInline);
-                }
-                removeInlineAfter = true;
-            }
-            targetElement.style.setProperty(property, toValue);
-            const result = await waitForTransitionEnd(targetElement, property, duration);
-            targetElement.style.transition = originalTransition;
-            if (removeInlineAfter) {
-                targetElement.style.removeProperty(property);
+            const duration = parseDuration(input.duration, (input.using !== undefined && longestTransitionMs(input.using)) || 300);
+            const timing = input.timingFunction || 'ease';
+            const jobs = [];
+            for (const pair of [input, ...(input.pairs ?? [])]) {
+                let property = pair.property;
+                if (property.startsWith('*'))
+                    property = property.substring(1);
+                property = camelToKebab(property);
+                const elements = Array.isArray(pair.target)
+                    ? pair.target.filter(isHTMLElement$2)
+                    : [resolveElement(pair.target, context, 'transition')];
+                for (const element of elements) {
+                    jobs.push({
+                        element,
+                        property,
+                        pair,
+                        fromValue: getComputedStyle(element).getPropertyValue(property),
+                        toValue: '',
+                        removeInlineAfter: false,
+                    });
+                }
             }
+            if (jobs.length === 0)
+                throw new Error('transition: target element not found');
+            for (const job of jobs) {
+                if (job.pair.from !== undefined) {
+                    job.element.style.setProperty(job.property, String(job.pair.from));
+                }
+            }
+            for (const job of jobs)
+                if (job.pair.from !== undefined)
+                    void job.element.offsetWidth;
+            const originals = new Map();
+            for (const job of jobs) {
+                if (!originals.has(job.element))
+                    originals.set(job.element, job.element.style.transition);
+            }
+            for (const [element, original] of originals) {
+                const own = jobs
+                    .filter(job => job.element === element)
+                    .map(job => `${job.property} ${duration}ms ${timing}`);
+                element.style.transition = input.using ?? [original, ...own].filter(Boolean).join(', ');
+            }
+            for (const job of jobs) {
+                const { element, property } = job;
+                let toValue = String(job.pair.value);
+                if (RESTORE_KEYWORDS.has(toValue)) {
+                    const currentInline = element.style.getPropertyValue(property);
+                    element.style.removeProperty(property);
+                    toValue = getComputedStyle(element).getPropertyValue(property);
+                    if (currentInline) {
+                        element.style.setProperty(property, currentInline);
+                    }
+                    job.removeInlineAfter = true;
+                }
+                job.toValue = toValue;
+                element.style.setProperty(property, toValue);
+            }
+            const results = await Promise.all(jobs.map(job => waitForTransitionEnd(job.element, job.property, duration)));
+            for (const [element, original] of originals)
+                element.style.transition = original;
+            for (const job of jobs) {
+                if (job.removeInlineAfter)
+                    job.element.style.removeProperty(job.property);
+            }
+            const first = jobs[0];
             return {
-                element: targetElement,
-                property,
-                fromValue,
-                toValue,
+                element: first.element,
+                property: first.property,
+                fromValue: first.fromValue,
+                toValue: first.toValue,
                 duration,
-                completed: result.completed,
+                completed: results.every(result => result.completed),
             };
         }
     };
@@ -21205,13 +21719,16 @@ let TransitionCommand = (() => {
     })();
     _classThis.metadata = commandMeta({
         description: 'Animate CSS properties using CSS transitions',
-        syntax: 'transition [<target>] <property> to <value> [over <duration>] [with <timing>]',
+        syntax: 'transition <property> [from <value>] to <value> [<property> \u2026 to <value>]\u2026 [over <duration>] [using <css> | with <timing>]',
         examples: [
             'transition opacity to 0.5',
             'transition my *opacity to 0 over 200ms',
             "transition #box's *opacity to 0 over 200ms",
             'transition left to 100px over 500ms',
             'transition background-color to red over 1s with ease-in-out',
+            'transition *width to 100px *height to 50px over 300ms',
+            'transition *opacity of #panel from 0 to 1 over 200ms',
+            'transition my *opacity to 0 using "opacity 1s ease-in"',
         ],
         sideEffects: ['style-change', 'timing'],
         category: 'animation',
@@ -22337,16 +22854,12 @@ class RenderCommand {
 }
 RenderCommand.metadata = commandMeta({
     description: 'Render templates with @if, @else, and @repeat directives',
-    syntax: [
-        'render <template>',
-        'render <template> with <variables>',
-        'render <template> with (key: value, ...)',
-    ],
+    syntax: ['render <template>', 'render <template> with <name>: <value>, ...'],
     examples: [
         'render myTemplate',
-        'render myTemplate with (name: "Alice")',
-        'render "<template>Hello ${name}!</template>" with (name: "World")',
-        'render template with (items: data)',
+        'render myTemplate with name: "Alice"',
+        'render "<template>Hello ${name}!</template>" with name: "World"',
+        'render template with items: data',
     ],
     category: 'templates',
     compatibility: 'standard',