@hyperfixi/core 3.1.1 → 3.2.0

package/dist/registry/index.cjs

@@ -899,6 +899,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)],
@@ -943,7 +976,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',
@@ -1119,36 +1152,108 @@ function setElementVar(context, name, value) {
     notifyLocalWrite(name, value, context);
 }
 
-function convertToNumber(value) {
-    if (value === null || value === undefined) {
-        return 0;
-    }
-    if (typeof value === 'number') {
-        return isFinite(value) ? value : 0;
-    }
-    if (typeof value === 'string') {
-        const parsed = parseFloat(value);
-        return parsed;
-    }
-    if (typeof value === 'boolean') {
-        return value ? 1 : 0;
-    }
+function isHTMLElement$2(value) {
+    return (value !== null &&
+        typeof value === 'object' &&
+        'nodeType' in value &&
+        value.nodeType === 1 &&
+        'tagName' in value &&
+        typeof value.tagName === 'string' &&
+        'classList' in value);
+}
+
+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 value.length;
-    }
+        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') {
-        if ('length' in value && typeof value.length === 'number') {
-            return value.length;
+        try {
+            const keys = Object.keys(value);
+            return `Object {${keys.slice(0, 3).join(', ')}${keys.length > 3 ? '...' : ''}}`;
         }
-        if (typeof value.valueOf === 'function') {
-            const result = value.valueOf();
-            if (typeof result === 'number') {
-                return result;
-            }
+        catch {
+            return '[Object]';
         }
-        return NaN;
     }
-    return 0;
+    return String(value);
+}
+
+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 resolveTargetElements(matches, selector, fromQuery) {
@@ -1514,13 +1619,6 @@ function isFunction(value) {
 function isInputElement(el) {
     return (el !== null && typeof el === 'object' && 'tagName' in el && el.tagName === 'INPUT');
 }
-function isFormElement(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' &&
@@ -1580,7 +1678,7 @@ const SPECIAL_DOM_PROPERTIES = {
     innertext: el => el.textContent?.trim(),
     innerHTML: el => el.innerHTML,
     outerhtml: el => el.outerHTML,
-    value: el => (isFormElement(el) ? el.value : undefined),
+    value: el => ('value' in el ? el.value : undefined),
     checked: el => (isInputElement(el) ? el.checked : undefined),
     disabled: el => ('disabled' in el ? el.disabled : undefined),
     selected: el => (isOptionElement(el) ? el.selected : undefined),
@@ -2248,14 +2346,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')
@@ -4641,7 +4740,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;
@@ -5718,6 +5817,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) {
@@ -5919,6 +6060,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)
@@ -6059,6 +6202,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)) {
@@ -6101,10 +6247,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 {
@@ -6350,7 +6498,7 @@ function parseIfCommand(ctx, commandToken) {
                 }));
             }
         }
-        if (!consumedElseIf && !ctx.isAtEnd()) {
+        if (!consumedElseIf && !ctx.atEndOfInput()) {
             ctx.consume(KEYWORDS.END, "Expected 'end' after if block");
         }
     }
@@ -6375,7 +6523,6 @@ function parseIfCommand(ctx, commandToken) {
         .build();
 }
 function parseForCommand(ctx, commandToken) {
-    const args = [];
     let variable = null;
     let collection = null;
     if (ctx.check(KEYWORDS.EACH)) {
@@ -6418,31 +6565,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();
 }
@@ -6498,86 +6636,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')) {
@@ -6874,11 +7085,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) })
@@ -7639,6 +7856,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]);
@@ -7670,10 +7889,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(',')) {
@@ -7838,8 +8060,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();
@@ -7874,45 +8096,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) {
@@ -8032,6 +8215,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();
@@ -8042,7 +8226,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)) {
@@ -8191,7 +8376,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>]' },
@@ -8202,8 +8386,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,
@@ -8227,7 +8410,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>]'),
@@ -8582,7 +8766,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`);
@@ -8602,6 +8789,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)) {
@@ -8663,6 +8853,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;
@@ -8865,6 +9084,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();
@@ -8948,7 +9171,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`);
         }
@@ -8961,7 +9184,7 @@ class Parser {
             if (this.check('end')) {
                 this.advance();
             }
-            else {
+            else if (!this.atEndOfInput()) {
                 throw new Error('Expected "end" to close repeat block');
             }
         }
@@ -8977,7 +9200,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 };
     }
@@ -9561,7 +9787,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,
@@ -9737,10 +9965,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) {
@@ -9766,7 +10013,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;
@@ -9930,10 +10180,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;
@@ -9979,7 +10241,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 {
@@ -10011,7 +10273,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();
@@ -10120,6 +10382,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 }),
@@ -10375,10 +10638,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);
@@ -10477,6 +10739,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) {
@@ -10516,6 +10781,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');
         }
@@ -10531,7 +10799,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 },
@@ -10729,6 +10997,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);
     }
@@ -10837,6 +11112,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 };
@@ -11048,6 +11339,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),
@@ -11098,7 +11390,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);
@@ -11540,11 +11840,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));
             }
         }
     }
@@ -11556,6 +11861,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);
@@ -11563,6 +11874,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(cur, seg) : cur[seg];
             }
             return typeof cur === 'function' ? cur.bind(target) : cur;
@@ -11587,26 +11902,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 }));
@@ -11864,9 +12174,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) {
@@ -11984,6 +12293,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 '-':
@@ -12073,6 +12385,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': {