@lokascript/compilation-service 3.1.1 → 3.3.0

package/dist/{dist-HOHQFWDA.js → dist-OK2I5ODH.js}

@@ -1964,6 +1964,39 @@ function makeTypeCheckHandler(negated) {
     };
   };
 }
+var 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;
+}
+var 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
+  };
+}
 var PARSER_COMPARISON_FRAGMENT = /* @__PURE__ */ new Map([
   ["===", leftAssoc(30)],
   ["!==", leftAssoc(30)],
@@ -2008,7 +2041,7 @@ var PARSER_COMPARISON_FRAGMENT = /* @__PURE__ */ 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",
@@ -2694,6 +2727,48 @@ function parseMaybeNamedArgument(ctx) {
   const value = ctx.parseExpression();
   return name !== void 0 ? { 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, command2) {
+  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 ${command2} 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;
+}
 var CommandNodeBuilder = class _CommandNodeBuilder {
   constructor(name) {
     this.args = [];
@@ -2890,6 +2965,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)
@@ -3021,6 +3098,8 @@ function parseRepeatCommand(ctx, commandToken) {
   } else if (ctx.check(KEYWORDS.FOREVER)) {
     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)) {
@@ -3060,10 +3139,11 @@ 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 {
     const result = ctx.parseCommandListUntilEndOrElse();
@@ -3292,7 +3372,7 @@ function parseIfCommand(ctx, commandToken) {
         }));
       }
     }
-    if (!consumedElseIf && !ctx.isAtEnd()) {
+    if (!consumedElseIf && !ctx.atEndOfInput()) {
       ctx.consume(KEYWORDS.END, "Expected 'end' after if block");
     }
   } else {
@@ -3312,7 +3392,6 @@ function parseIfCommand(ctx, commandToken) {
   return CommandNodeBuilder.from(commandToken).withArgs(...args).endingAt(ctx.getPosition()).build();
 }
 function parseForCommand(ctx, commandToken) {
-  const args = [];
   let variable = null;
   let collection = null;
   if (ctx.check(KEYWORDS.EACH)) {
@@ -3352,30 +3431,20 @@ 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 pos2 = {
     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).endingAt(ctx.getPosition()).build();
+  const modifiers = {
+    loopType: toLegacyExpression(createStringLiteral(KEYWORDS.FOR, pos2)),
+    for: toLegacyExpression(createStringLiteral(variable, pos2)),
+    in: collection
+  };
+  if (indexVariable)
+    modifiers["index"] = toLegacyExpression(createStringLiteral(indexVariable, pos2));
+  return CommandNodeBuilder.from({ ...commandToken, value: "repeat" }).withArgs(createBlock(commands, { ...pos2, end: pos2.end || 0 })).withModifiers(modifiers).endingAt(ctx.getPosition()).build();
 }
 function parseMeasureCommand(ctx, identifierNode) {
   const args = [];
@@ -3424,75 +3493,144 @@ function parseMeasureCommand(ctx, identifierNode) {
   }
   return builder.build();
 }
-var CONTEXT_POSSESSIVES = /* @__PURE__ */ new Set(["my", "its", "your"]);
+var CONTEXT_REFS = /* @__PURE__ */ 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
-      };
-    } else {
-      target = parsed;
-      if (ctx.check("'s"))
-        ctx.advance();
-    }
-  }
-  const firstToken = ctx.peek();
-  if (!property && (isIdentifierLike(firstToken) || firstToken.value === "*")) {
-    let propertyValue = "";
-    if (ctx.check("*")) {
-      propertyValue = "*";
+  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();
-    }
-    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
-      };
+      modifiers["over"] = ctx.parseExpression();
+    } else if (ctx.check("using") && !modifiers["using"]) {
+      ctx.advance();
+      modifiers["using"] = ctx.parseExpression();
+    } else if (ctx.check(KEYWORDS.WITH) && !modifiers["with"]) {
+      ctx.advance();
+      modifiers["with"] = ctx.parsePrimary();
+    } 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")) {
@@ -3598,6 +3736,9 @@ function parseToggleCommand(ctx, identifierNode) {
     if (classArg && mode !== void 0 && classArg.expression) {
       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);
     }
@@ -3754,11 +3895,15 @@ 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"] === void 0) {
+    ctx.addError("Expected 'to' and the content to morph into");
+  }
   return CommandNodeBuilder.fromIdentifier(identifierNode).withArgs(...args).withModifiers({ ...modifiers, ...parseViewTransitionTail(ctx) }).endingAt(ctx.getPosition()).build();
 }
 function parseShowHideCommand(ctx, identifierNode) {
@@ -4448,6 +4593,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]);
@@ -4479,10 +4626,11 @@ 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(",")) {
@@ -4645,8 +4793,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();
       }
@@ -4678,45 +4826,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) {
@@ -4830,6 +4939,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();
@@ -4838,7 +4948,8 @@ function parseTellCommand(ctx, identifierNode) {
         } else {
           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)) {
@@ -4959,7 +5070,6 @@ var ONE_EXPR = (syntax) => ({
   markers: [],
   syntax
 });
-var BEEP = ONE_EXPR("beep! [<expression>, \u2026]");
 var COMMAND_GRAMMAR = {
   append: { positional: "expression", markers: ["to"], syntax: "append <value> [to <target>]" },
   prepend: { positional: "expression", markers: ["to"], syntax: "prepend <value> [to <target>]" },
@@ -4970,8 +5080,7 @@ var 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,
@@ -4995,7 +5104,8 @@ var 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>]"),
@@ -5334,7 +5444,9 @@ var Parser = 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`);
@@ -5353,6 +5465,9 @@ var Parser = 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)) {
@@ -5406,6 +5521,35 @@ var Parser = 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 v2 = nextToken.value;
     let unit = null;
@@ -5575,6 +5719,10 @@ var Parser = class _Parser {
     const isStop = () => this.check("end") || extraStops.some((s) => this.check(s));
     debug.parse("\u{1F504} parseCommandListUntilTerminator: Starting (extraStops:", extraStops.join(","), ")");
     while (!this.isAtEnd() && !isStop()) {
+      if (this.checkComment()) {
+        this.advance();
+        continue;
+      }
       debug.parse("\u{1F4CD} Loop iteration, current token:", this.peek().value, "kind:", this.peek().kind);
       let parsedCommand = false;
       const isCommandToken = this.checkIsCommand();
@@ -5646,7 +5794,7 @@ var Parser = class _Parser {
     if (this.check("end")) {
       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`);
     }
@@ -5658,7 +5806,7 @@ var Parser = class _Parser {
     if (!hasElse) {
       if (this.check("end")) {
         this.advance();
-      } else {
+      } else if (!this.atEndOfInput()) {
         throw new Error('Expected "end" to close repeat block');
       }
     }
@@ -5673,7 +5821,10 @@ var Parser = class _Parser {
     if (terminator === "end") {
       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 };
   }
@@ -6213,7 +6364,9 @@ var Parser = class _Parser {
   parseTopLevelInitBlock() {
     const pos2 = 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,
@@ -6382,10 +6535,27 @@ var Parser = class _Parser {
       ...sourceExpr.column !== void 0 && { 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()) || isIdentifier(nextToken) && !this.isCommand(nextToken.value) || isContextVar(nextToken);
+    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) {
       return {
         node: this.callExprToCommandNode(callExpr, sourceExpr),
@@ -6409,7 +6579,9 @@ var Parser = 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;
@@ -6562,10 +6734,18 @@ var Parser = 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(`\u{1F527} 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(`\u{1F527} parseEventHandler: Parsed 'from' target: ${target}`);
       this.parseTemporalKeywordModifiers(modifiers);
     }
     let attributeName;
@@ -6610,7 +6790,7 @@ var Parser = 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 {
@@ -6638,7 +6818,7 @@ var Parser = class _Parser {
             this.recordDropped(`Command '${cmdToken}' failed to parse and was discarded`);
           }
         }
-      } else if (this.checkIdentifier()) {
+      } else if (this.checkIdentifier() || this.checkEventNamedCall()) {
         const token = this.peek();
         if (this.isCommand(token.value)) {
           const cmd = this.parseCommandWithErrorRecovery();
@@ -6724,6 +6904,7 @@ var Parser = 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 },
@@ -6960,10 +7141,9 @@ var Parser = 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);
@@ -7056,6 +7236,9 @@ var Parser = 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) {
@@ -7094,6 +7277,9 @@ var Parser = 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");
     }
@@ -7109,7 +7295,7 @@ var Parser = 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 },
@@ -7304,6 +7490,13 @@ var Parser = 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);
   }
@@ -7412,6 +7605,19 @@ var Parser = 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) !== void 0;
+  }
   peek() {
     if (this.isAtEnd()) {
       return { kind: "unknown", value: "", start: 0, end: 0, line: 1, column: 1 };
@@ -7616,6 +7822,7 @@ var Parser = 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),
@@ -7664,7 +7871,15 @@ Parser.POSTFIX_UNARY_OPERATORS = /* @__PURE__ */ 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 = /* @__PURE__ */ new Set([
+  "closest",
+  "next",
+  "previous",
+  "first",
+  "last"
+]);
 function parse(input, options) {
   const tokens = tokenize(input);
   const parser = new Parser(tokens, options, input);
@@ -7846,6 +8061,84 @@ function isNodeList(value) {
 function isDocumentFragment(value) {
   return value !== null && typeof value === "object" && "nodeType" in value && value.nodeType === 11 && "childNodes" 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("\u{1F514} 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 === void 0)
+    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 === void 0)
+    return "undefined";
+  if (Array.isArray(value)) {
+    return `Array(${value.length}) [${value.slice(0, 3).map((v2) => representationOf(v2)).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);
+}
 function convertToNumber(value) {
   if (value === null || value === void 0) {
     return 0;
@@ -7877,6 +8170,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);
@@ -7978,32 +8281,36 @@ 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 value2 = getVariableValue(target, context, "global");
-      return convertToNumber(value2);
+      return counterValue(getVariableValue(target, context, "global"));
     }
     if (target.includes(".")) {
       return getElementPropertyValue(target, context);
@@ -8015,14 +8322,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)) {
         element.setAttribute(property, String(newValue));
@@ -8038,6 +8348,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");
@@ -8452,13 +8766,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" && "nodeType" in el && el.nodeType === 1 && "style" in el;
 }
@@ -8509,7 +8816,7 @@ var SPECIAL_DOM_PROPERTIES = {
   innertext: (el) => el.textContent?.trim(),
   innerHTML: (el) => el.innerHTML,
   outerhtml: (el) => el.outerHTML,
-  value: (el) => isFormElement$1(el) ? el.value : void 0,
+  value: (el) => "value" in el ? el.value : void 0,
   checked: (el) => isInputElement$1(el) ? el.checked : void 0,
   disabled: (el) => "disabled" in el ? el.disabled : void 0,
   selected: (el) => isOptionElement$1(el) ? el.selected : void 0,
@@ -9154,14 +9461,15 @@ var 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")
@@ -10625,7 +10933,7 @@ var 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;
@@ -11681,11 +11989,12 @@ 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));
       }
     }
   }
@@ -11694,6 +12003,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 void 0;
+      return getExpr(context, "possessive").evaluate(context, target, `@${leftNode.attributeName}`);
+    }
     const path = propertyPathOf(node.left);
     if (path) {
       const target = await evaluateAST(node.right, context);
@@ -11701,6 +12016,10 @@ async function evaluateBinaryExpression(node, context) {
       for (const seg of path) {
         if (cur == null)
           return void 0;
+        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;
@@ -11725,26 +12044,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 }));
@@ -11989,15 +12303,14 @@ async function evaluateAttributeAccessNode(node, context) {
   return `@${attributeName}`;
 }
 async function evaluatePropertyOfExpressionNode(node, context) {
-  const propertyNode = node.property;
-  if (propertyNode?.type !== "identifier") {
+  const propertyNode2 = node.property;
+  if (propertyNode2?.type !== "identifier") {
     throw new Error('Property name must be an identifier in "the X of Y" pattern');
   }
-  const propertyName = propertyNode.name;
+  const propertyName = propertyNode2.name;
   const target = await evaluateAST(node.target, context);
-  if (target == null) {
-    throw new Error(`Cannot access property "${propertyName}" of ${target}`);
-  }
+  if (target == null)
+    return void 0;
   return getExpr(context, "possessive").evaluate(context, target, propertyName);
 }
 async function evaluateTemplateLiteralNode(node, context) {
@@ -12113,6 +12426,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 "-":
@@ -12201,6 +12517,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": {
@@ -13156,8 +13476,8 @@ var RuntimeBase = class _RuntimeBase {
       }
       case "initBlock":
       case "block": {
-        const block = node;
-        const ops = (Array.isArray(block.commands) ? block.commands : []).map((c) => this.compile(c));
+        const block2 = node;
+        const ops = (Array.isArray(block2.commands) ? block2.commands : []).map((c) => this.compile(c));
         const consumesHalt = node.type === "initBlock";
         return async (context) => {
           for (const op of ops) {
@@ -13537,12 +13857,22 @@ var RuntimeBase = class _RuntimeBase {
     debug.runtime(`BEHAVIOR: Finished installing ${behaviorName}`);
   }
   async executeEventHandler(node, context) {
-    const { event, events, commands, target, args, selector, condition, attributeName, watchTarget, modifiers, errorSymbol, errorHandler, finallyHandler } = node;
+    const { event, events, commands, target, targetExpression, args, selector, condition, attributeName, watchTarget, modifiers, errorSymbol, errorHandler, finallyHandler } = node;
     const eventNames = events && events.length > 0 ? events : [event];
     debug.runtime(`BEHAVIOR: executeEventHandler: event='${event}', target='${target}'`);
     let targets = [];
     let globalTarget = null;
-    if (target) {
+    if (targetExpression) {
+      const resolved = await this.execute(targetExpression, context);
+      if (resolved === window)
+        globalTarget = window;
+      else if (resolved === document)
+        globalTarget = document;
+      else if (this.isElement(resolved))
+        targets = [resolved];
+      else if (Array.isArray(resolved))
+        targets = resolved.filter((el) => this.isElement(el));
+    } else if (target) {
       const targetLower = typeof target === "string" ? target.toLowerCase() : "";
       if (targetLower === "window" || targetLower === "the window") {
         globalTarget = window;
@@ -15450,12 +15780,79 @@ function parseAttribute(expression) {
   }
   throw new Error(`Invalid attribute syntax: ${expression}`);
 }
-function parseAttributeName(expression) {
-  return parseAttribute(expression).name;
+function parseAttributeName(expression) {
+  return parseAttribute(expression).name;
+}
+function parseAttributeWithValue(expression) {
+  const result = parseAttribute(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 * 1e3) };
+  }
+  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 * 1e3;
+    }
+    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 parseAttributeWithValue(expression) {
-  const result = parseAttribute(expression);
-  return { name: result.name, value: result.value ?? "" };
+function camelToKebab(str) {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
 }
 function batchApply(targets, operation) {
   for (const element of targets) {
@@ -15519,15 +15916,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));
   });
 }
 function parseClasses(classValue) {
@@ -16164,73 +16564,6 @@ var RemoveCommand = (() => {
   return RemoveCommand2 = _classThis;
 })();
 var 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 * 1e3) };
-  }
-  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 * 1e3;
-    }
-    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;
@@ -16544,13 +16877,13 @@ async function resolveAnyPropertyTarget(node, evaluator, context) {
   const anyNode = node;
   if (anyNode?.type === "possessiveExpression" || anyNode?.type === "memberExpression") {
     const objectNode = anyNode.object;
-    const propertyNode = anyNode.property;
+    const propertyNode2 = anyNode.property;
     let element = await evaluator.evaluate(objectNode, context);
     if (Array.isArray(element))
       element = element[0];
     if (!isHTMLElement$2(element))
       return null;
-    const propertyName = propertyNode?.name || propertyNode?.value;
+    const propertyName = propertyNode2?.name || propertyNode2?.value;
     if (!propertyName)
       return null;
     return { element, property: propertyName };
@@ -16668,9 +17001,9 @@ var ToggleCommand = (() => {
       if (!raw.args?.length)
         throw new Error("toggle command requires an argument");
       const firstArg = raw.args[0];
-      const propertyTarget = await resolveAnyPropertyTarget(firstArg, evaluator, context);
-      if (propertyTarget) {
-        return { type: "property", target: propertyTarget };
+      const propertyTarget2 = await resolveAnyPropertyTarget(firstArg, evaluator, context);
+      if (propertyTarget2) {
+        return { type: "property", target: propertyTarget2 };
       }
       if (firstArg.type === "selector" && typeof firstArg.value === "string" && firstArg.value.startsWith("*")) {
         let expression2 = firstArg.value;
@@ -16904,13 +17237,13 @@ var PutCommand = (() => {
       let targetSelector = null, memberPath, variableName;
       if (targetArg) {
         const tt = nodeType(targetArg);
-        const propertyTarget = await resolveAnyPropertyTarget(targetArg, evaluator, context);
-        if (propertyTarget) {
+        const propertyTarget2 = await resolveAnyPropertyTarget(targetArg, evaluator, context);
+        if (propertyTarget2) {
           return {
             value,
-            targets: [propertyTarget.element],
+            targets: [propertyTarget2.element],
             position: "into",
-            memberPath: propertyTarget.property
+            memberPath: propertyTarget2.property
           };
         }
         if (tt === "memberExpression") {
@@ -17050,7 +17383,11 @@ var PutCommand = (() => {
       }
       if (isInsertableNode(v2))
         return v2;
-      return v2 == null ? "" : String(v2);
+      if (v2 == null)
+        return "null";
+      if (Array.isArray(v2))
+        return arrayFragment(v2);
+      return String(v2);
     }
     looksLikeCss(s) {
       if (!s)
@@ -17135,6 +17472,19 @@ var PutCommand = (() => {
   })();
   return PutCommand2 = _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;
+}
 var createPutCommand = createFactory(PutCommand);
 var HTML_ESCAPE = {
   "&": "&amp;",
@@ -18321,10 +18671,28 @@ var 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 {
@@ -18594,7 +18962,7 @@ var MorphCommand = (() => {
       if (args.length === 0 && modifiers.with === void 0) {
         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 !== void 0;
       const targetNode = modifiers.on !== void 0 ? modifiers.on : args[0];
       const contentNode = modifiers.with !== void 0 ? modifiers.with : modifiers.on !== void 0 ? args[0] : args[1];
@@ -19862,6 +20230,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") {
     const rawScope = n.scope;
     const scope = rawScope === "element" || rawScope === "global" ? rawScope : void 0;
@@ -19869,6 +20250,13 @@ 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] : [void 0, void 0, 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) {
     case "node-write":
@@ -19889,10 +20277,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}'`);
   }
 }
+var SET_RUNGS = { nodeWriters: true, styleSplit: true, ofAndObjectProperty: true };
 var SetCommand = (() => {
   let _classDecorators = [command({ name: "set" })];
   let _classDescriptor;
@@ -19911,8 +20307,7 @@ var 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));
@@ -20036,13 +20431,13 @@ var SetCommand = (() => {
     }
     async tryParseMemberExpression(firstArg, raw, evaluator, context) {
       const objectNode = firstArg.object;
-      const propertyNode = firstArg.property;
-      if (objectNode?.name && propertyNode?.name) {
+      const propertyNode2 = firstArg.property;
+      if (objectNode?.name && propertyNode2?.name) {
         const objectName = objectNode.name.toLowerCase();
         if (["me", "my", "it", "its", "you", "your"].includes(objectName)) {
           const element = resolvePossessive(objectName, context);
           const value = await this.extractValue(raw, evaluator, context);
-          return { type: "property", element, property: propertyNode.name, value };
+          return { type: "property", element, property: propertyNode2.name, value };
         }
       }
       const objectAst = firstArg.object;
@@ -20058,7 +20453,7 @@ var SetCommand = (() => {
           container = await evaluator.evaluate(objectAst, context);
         }
         if (container != null && typeof container === "object") {
-          const property = computed ? String(await evaluator.evaluate(firstArg.property, context)) : propertyNode?.name || "";
+          const property = computed ? String(await evaluator.evaluate(firstArg.property, context)) : propertyNode2?.name || "";
           if (property) {
             const value = await this.extractValue(raw, evaluator, context);
             return {
@@ -20213,12 +20608,24 @@ 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 : void 0;
+  if (!owner || n.computed)
+    return null;
+  const p = n.property;
+  const name = typeof p === "string" ? p : typeof p?.name === "string" ? p.name : void 0;
+  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);
@@ -20231,7 +20638,20 @@ async function parseNumericTargetInput(raw, evaluator, context, commandName) {
     target = targetArg.value;
   } 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) : void 0;
+    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 : currentRaw == null ? 0 : Number(currentRaw) || 0;
       target = currentValue;
@@ -20260,24 +20680,20 @@ async function parseNumericTargetInput(raw, evaluator, context, commandName) {
       const evaluated = await evaluator.evaluate(arg, context);
       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 }
   };
@@ -20299,7 +20715,7 @@ var 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 newValue2 = operation === "increment" ? customWrite.currentValue + delta : customWrite.currentValue - delta;
         await customWrite.writer(customWrite.node, newValue2, context);
         Object.assign(context, { it: newValue2 });
@@ -20310,8 +20726,7 @@ var NumericModifyCommand = (() => {
       if (isNaN(currentValue)) {
         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 });
@@ -20737,9 +21152,9 @@ var GoCommand = (() => {
       }
       const { target, position, offset, behavior } = input;
       if (typeof window !== "undefined") {
-        const block = this.mapVerticalPosition(position.vertical);
+        const block2 = this.mapVerticalPosition(position.vertical);
         const inline = this.mapHorizontalPosition(position.horizontal);
-        target.scrollIntoView?.({ behavior, block, inline });
+        target.scrollIntoView?.({ behavior, block: block2, inline });
         if (offset !== 0) {
           const { x, y } = this.calculateScrollPosition(target, position, offset);
           window.scrollTo?.({ left: x, top: y, behavior });
@@ -21374,7 +21789,10 @@ function createUntilLoopConfig(conditionExpr, evaluateCondition2, context, index
   };
   const config2 = {
     type: "until",
-    shouldContinue: () => !evaluateCondition2(conditionExpr, context)
+    shouldContinue: () => {
+      const met = evaluateCondition2(conditionExpr, context);
+      return met instanceof Promise ? met.then((value) => !value) : !met;
+    }
   };
   return { config: config2, iterCtx };
 }
@@ -21409,7 +21827,7 @@ function createForeverLoopConfig(indexVariable, maxIterations = 1e4) {
   };
   return { config: config2, iterCtx };
 }
-async function slotText(node, evaluator, context) {
+async function slotText$1(node, evaluator, context) {
   if (!node)
     return void 0;
   const n = node;
@@ -21422,6 +21840,18 @@ async function slotText(node, evaluator, context) {
   const v2 = await evaluator.evaluate(node, context);
   return typeof v2 === "string" ? v2 : void 0;
 }
+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;
+}
 var RepeatCommand = (() => {
   let _classDecorators = [command({ name: "repeat" })];
   let _classDescriptor;
@@ -21458,7 +21888,7 @@ var RepeatCommand = (() => {
         }
       }
       const m = raw.modifiers ?? {};
-      const text = (node) => slotText(node, evaluator, context);
+      const text = (node) => slotText$1(node, evaluator, context);
       const loopType = await text(m.loopType) ?? null;
       const bottomTested = m.bottomTested ? await evaluator.evaluate(m.bottomTested, context) : false;
       if (loopType === "for" || m.for) {
@@ -21476,17 +21906,24 @@ var 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);
@@ -21502,7 +21939,7 @@ var RepeatCommand = (() => {
             eventTarget = window;
           } else {
             const target = await evaluator.evaluate(m.from, context);
-            if (target instanceof EventTarget)
+            if (isEventTarget(target))
               eventTarget = target;
             else if (target === "document")
               eventTarget = document;
@@ -21523,7 +21960,15 @@ var 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 };
@@ -21541,10 +21986,10 @@ var RepeatCommand = (() => {
           ({ config: config2, iterCtx } = createTimesLoopConfig(count, indexVariable));
           break;
         case "while":
-          ({ config: config2, iterCtx } = createWhileLoopConfig(condition, evaluateCondition, context, indexVariable));
+          ({ config: config2, iterCtx } = createWhileLoopConfig(condition, evaluateLoopCondition, context, indexVariable));
           break;
         case "until":
-          ({ config: config2, iterCtx } = createUntilLoopConfig(condition, evaluateCondition, context, indexVariable));
+          ({ config: config2, iterCtx } = createUntilLoopConfig(condition, evaluateLoopCondition, context, indexVariable));
           break;
         case "until-event":
           ({ config: config2, iterCtx } = createUntilEventLoopConfig(eventName, eventTarget, indexVariable));
@@ -22526,6 +22971,29 @@ function namedPropertyOf(node) {
   }
   return null;
 }
+var RESTORE_KEYWORDS = /* @__PURE__ */ 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 === void 0 && 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" ? 1e3 : 1));
+    if (times.length > 0)
+      longest = Math.max(longest ?? 0, times[0] + (times[1] ?? 0));
+  }
+  return longest;
+}
 var TransitionCommand = (() => {
   let _classDecorators = [command({ name: "transition" })];
   let _classDescriptor;
@@ -22541,10 +23009,9 @@ var TransitionCommand = (() => {
       let property;
       let target;
       const firstArg = await evaluator.evaluate(raw.args[0], context);
-      const asElement = (value2) => Array.isArray(value2) || isNodeList(value2) ? value2[0] : value2;
-      const firstAsElement = asElement(firstArg);
-      if (isHTMLElement$2(firstAsElement) || typeof firstArg === "string" && /^[#.]|^(?:me|it|you)$/.test(firstArg)) {
-        target = firstAsElement;
+      const owners = elementsOf(firstArg);
+      if (owners.length > 0 || typeof firstArg === "string" && /^[#.]|^(?:me|it|you)$/.test(firstArg)) {
+        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) {
         throw new Error("transition: target element not found");
@@ -22554,9 +23021,9 @@ var TransitionCommand = (() => {
           throw new Error("transition requires a CSS property");
         property = named.property;
         if (named.objectNode !== void 0) {
-          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 {
         property = String(firstArg);
@@ -22566,55 +23033,126 @@ var TransitionCommand = (() => {
       }
       if (!raw.modifiers?.to)
         throw new Error('transition requires "to <value>"');
-      let value = await evaluator.evaluate(raw.modifiers.to, context);
-      if (value === void 0 && raw.modifiers.to.type === "identifier") {
-        value = raw.modifiers.to.name;
-      }
-      const result = { property, value };
+      const result = {
+        property,
+        value: await valueOf(raw.modifiers.to, evaluator, context)
+      };
       if (target !== void 0)
         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 = /* @__PURE__ */ new Map();
+        const properties = pairNode.properties ?? [];
+        for (const { key, value } of properties) {
+          if (typeof key.name === "string")
+            fields.set(key.name, value);
+        }
+        const propertyNode2 = fields.get("property");
+        const toNode = fields.get("to");
+        if (!propertyNode2 || !toNode)
+          throw new Error("transition requires property and value");
+        const pair = {
+          property: String(await evaluator.evaluate(propertyNode2, 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 !== void 0 && 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 !== void 0) {
+          job.element.style.setProperty(job.property, String(job.pair.from));
+        }
+      }
+      for (const job of jobs)
+        if (job.pair.from !== void 0)
+          void job.element.offsetWidth;
+      const originals = /* @__PURE__ */ 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)
       };
     }
   };
@@ -22627,13 +23165,16 @@ var 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 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",
@@ -23834,17 +24375,7 @@ var BeepCommand = (() => {
         this.debugContext(context);
         return { expressionCount: 0, debugged: true, outputs: [] };
       }
-      const outputs = [];
-      console.group("\u{1F514} 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) {
@@ -23857,63 +24388,6 @@ var 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 === void 0)
-        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 === void 0)
-        return "undefined";
-      if (Array.isArray(value)) {
-        return `Array(${value.length}) [${value.slice(0, 3).map((v2) => this.getRepresentation(v2)).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");
   (() => {
@@ -24437,16 +24911,12 @@ var RenderCommand = 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",
@@ -24617,7 +25087,7 @@ function updateDebugStats(event) {
   }
   stats.averageConfidence = stats.confidenceHistory.reduce((a, b) => a + b, 0) / stats.confidenceHistory.length;
 }
-var VERSION = "3.1.1";
+var VERSION = "3.3.0";
 function createHistorySwap(config2) {
   const { target, strategy = "morph", useViewTransition = false, fetchOptions = {}, transformUrl, onBeforeFetch, onAfterSwap, onError } = config2;
   const resolveTarget = () => {
@@ -26125,6 +26595,14 @@ function convertNode(node, infer) {
         ...pos(node)
       };
     case "identifier":
+      if (node.scope === "element" || node.scope === "local" || node.scope === "global") {
+        return {
+          type: "variable",
+          name: node.name ?? "",
+          scope: node.scope,
+          ...pos(node)
+        };
+      }
       return {
         type: "identifier",
         value: node.name ?? node.value ?? "",
@@ -26147,6 +26625,15 @@ function convertNode(node, infer) {
         operand: convertNode(node.argument ?? node.operand, infer),
         ...pos(node)
       };
+    case "typeCheckExpression":
+      return {
+        type: "typeCheck",
+        value: convertNode(node.value, infer),
+        typeName: String(node.typeName),
+        nullOk: node.nullOk !== false,
+        negated: node.negated === true,
+        ...pos(node)
+      };
     case "timeExpression":
       return { type: "literal", value: node.value, ...pos(node) };
     case "templateLiteral":
@@ -26158,6 +26645,28 @@ function convertNode(node, infer) {
         scope: node.scope ?? "local",
         ...pos(node)
       };
+    case "arrayLiteral":
+      return {
+        type: "array",
+        elements: (node.elements ?? []).map((element) => convertNode(element, infer)),
+        ...pos(node)
+      };
+    case "attributeAccess":
+      return {
+        type: "possessive",
+        object: { type: "identifier", value: "me" },
+        property: `@${node.attributeName}`,
+        ...pos(node)
+      };
+    case "propertyOfExpression": {
+      const property = node.property;
+      return {
+        type: "possessive",
+        object: convertNode(node.target, infer),
+        property: property?.name ?? property?.value ?? "",
+        ...pos(node)
+      };
+    }
     case "htmlSelector":
       return {
         type: "selector",
@@ -26208,6 +26717,18 @@ function convertCommand$1(node, infer) {
   if (name === "repeat") {
     return convertRepeatCommand(node, infer);
   }
+  const original = node.originalCommand;
+  const sum = node.modifiers?.to;
+  const counted = node.args?.[0];
+  if (name === "set" && (original === "increment" || original === "decrement") && sum?.type === "binaryExpression" && counted) {
+    return convertCommand$1({
+      ...node,
+      name: original,
+      args: [counted],
+      modifiers: { by: sum.right },
+      originalCommand: void 0
+    }, infer);
+  }
   const args = (node.args ?? []).map((arg) => convertNode(arg, infer));
   const target = node.target ? convertNode(node.target, infer) : void 0;
   const modifiers = node.modifiers ? convertModifiers(node.modifiers, infer) : void 0;
@@ -26249,6 +26770,64 @@ function convertIfCommand(node, infer) {
   };
 }
 function convertRepeatCommand(node, infer) {
+  const slots = node.modifiers ?? {};
+  const form = slotText(slots.loopType);
+  if (form === void 0)
+    return convertPositionalRepeat(node, infer);
+  const [bodyBlock, elseBlock] = node.args ?? [];
+  const body = extractBlockCommands(bodyBlock, infer);
+  const indexName = slotText(slots.index);
+  const shared = {
+    ...indexName ? { indexName } : {},
+    ...elseBlock ? { elseBody: extractBlockCommands(elseBlock, infer) } : {},
+    ...pos(node)
+  };
+  const operand = (slot) => slot ? convertNode(slot, infer) : void 0;
+  switch (form) {
+    case "for":
+      return {
+        type: "foreach",
+        itemName: slotText(slots.for) ?? "it",
+        collection: operand(slots.in) ?? { type: "literal", value: null },
+        body,
+        ...shared
+      };
+    case "times":
+      return { type: "repeat", count: operand(slots.times), body, ...shared };
+    case "while":
+    case "until": {
+      const test = operand(slots[form]) ?? { type: "literal", value: form === "until" };
+      return {
+        type: "while",
+        condition: form === "until" ? { type: "unary", operator: "not", operand: test } : test,
+        ...slots.bottomTested?.value === true ? { bottomTested: true } : {},
+        body,
+        ...shared
+      };
+    }
+    case "until-event": {
+      const event = slotText(slots.event);
+      if (!event) {
+        return { type: "error", message: "'repeat until event' has no event name", ...pos(node) };
+      }
+      const target = operand(slots.from);
+      return {
+        type: "repeat",
+        untilEvent: event,
+        ...target ? { untilEventTarget: target } : {},
+        body,
+        ...shared
+      };
+    }
+    default:
+      return { type: "repeat", body, ...shared };
+  }
+}
+function slotText(slot) {
+  const text = slot?.value ?? slot?.name;
+  return typeof text === "string" ? text : void 0;
+}
+function convertPositionalRepeat(node, infer) {
   const args = node.args ?? [];
   if (args.length === 0) {
     return { type: "repeat", body: [], ...pos(node) };
@@ -26368,13 +26947,13 @@ function buildEventModifiers(node) {
     ...node.selector && !node.from ? { from: node.selector } : {}
   };
 }
-function extractBlockCommands(block, infer) {
-  if (!block)
+function extractBlockCommands(block2, infer) {
+  if (!block2)
     return [];
-  if (block.type === "block") {
-    return (block.commands ?? []).map((cmd) => convertNode(cmd, infer));
+  if (block2.type === "block") {
+    return (block2.commands ?? []).map((cmd) => convertNode(cmd, infer));
   }
-  return [convertNode(block, infer)];
+  return [convertNode(block2, infer)];
 }
 function inferRoles(name, args, modifiers, target, infer) {
   const roles = {};
@@ -26535,6 +27114,15 @@ function toCoreAST(node) {
         prefix: true,
         ...nodePos(node)
       };
+    case "typeCheck":
+      return {
+        type: "typeCheckExpression",
+        value: toCoreAST(node.value),
+        typeName: node.typeName,
+        nullOk: node.nullOk,
+        negated: node.negated,
+        ...nodePos(node)
+      };
     case "member":
       return {
         type: "memberExpression",
@@ -26543,6 +27131,12 @@ function toCoreAST(node) {
         computed: node.computed ?? false,
         ...nodePos(node)
       };
+    case "array":
+      return {
+        type: "arrayLiteral",
+        elements: node.elements.map((element) => toCoreAST(element)),
+        ...nodePos(node)
+      };
     case "possessive":
       return {
         type: "possessiveExpression",
@@ -26602,67 +27196,79 @@ function convertCommand(node) {
   }
   return result;
 }
+function block(nodes) {
+  return { type: "block", commands: nodes.map((n) => toCoreAST(n)), ...POS };
+}
 function convertIf(node) {
-  const result = {
+  const [elseIf, ...laterElseIfs] = node.elseIfBranches ?? [];
+  const elseBranch = elseIf ? [
+    {
+      type: "if",
+      condition: elseIf.condition,
+      thenBranch: elseIf.body,
+      elseIfBranches: laterElseIfs,
+      ...node.elseBranch ? { elseBranch: node.elseBranch } : {}
+    }
+  ] : node.elseBranch;
+  return {
     type: "command",
     name: "if",
     isBlocking: true,
-    condition: toCoreAST(node.condition),
-    thenBranch: node.thenBranch.map((n) => toCoreAST(n)),
-    args: [],
+    args: [
+      toCoreAST(node.condition),
+      block(node.thenBranch),
+      ...elseBranch ? [block(elseBranch)] : []
+    ],
     ...nodePos(node)
   };
-  if (node.elseBranch) {
-    result.elseBranch = node.elseBranch.map((n) => toCoreAST(n));
-  }
-  return result;
 }
-function convertRepeat(node) {
-  const result = {
+function loopCommand(node, form, operands) {
+  const modifiers = { loopType: slotString(form) };
+  for (const [slot, value] of Object.entries(operands)) {
+    if (value)
+      modifiers[slot] = value;
+  }
+  if (node.indexName)
+    modifiers.index = slotString(node.indexName);
+  return {
     type: "command",
     name: "repeat",
     isBlocking: true,
-    body: node.body.map((n) => toCoreAST(n)),
-    args: [],
+    args: [block(node.body), ...node.elseBody ? [block(node.elseBody)] : []],
+    modifiers,
     ...nodePos(node)
   };
+}
+function slotString(value) {
+  return { type: "string", value, ...POS };
+}
+function convertRepeat(node) {
   if (node.count !== void 0) {
-    result.count = typeof node.count === "number" ? { type: "literal", value: node.count, raw: String(node.count), ...POS } : toCoreAST(node.count);
-    result.loopVariant = "times";
-  } else if (node.whileCondition !== void 0) {
-    result.condition = toCoreAST(node.whileCondition);
-    result.loopVariant = "while";
-  } else if (node.untilEvent !== void 0) {
-    result.untilEvent = node.untilEvent;
-    result.loopVariant = "until";
+    const times = typeof node.count === "number" ? { type: "literal", value: node.count, raw: String(node.count), ...POS } : toCoreAST(node.count);
+    return loopCommand(node, "times", { times });
   }
-  return result;
+  if (node.whileCondition !== void 0) {
+    return loopCommand(node, "while", { while: toCoreAST(node.whileCondition) });
+  }
+  if (node.untilEvent !== void 0) {
+    return loopCommand(node, "until-event", {
+      event: slotString(node.untilEvent),
+      from: node.untilEventTarget ? toCoreAST(node.untilEventTarget) : void 0
+    });
+  }
+  return loopCommand(node, "forever", {});
 }
 function convertForEach(node) {
-  return {
-    type: "command",
-    name: "repeat",
-    isBlocking: true,
-    loopVariant: "for",
-    itemName: node.itemName,
-    ...node.indexName ? { indexName: node.indexName } : {},
-    collection: toCoreAST(node.collection),
-    body: node.body.map((n) => toCoreAST(n)),
-    args: [],
-    ...nodePos(node)
-  };
+  return loopCommand(node, "for", {
+    for: slotString(node.itemName),
+    in: toCoreAST(node.collection)
+  });
 }
 function convertWhile(node) {
-  return {
-    type: "command",
-    name: "repeat",
-    isBlocking: true,
-    loopVariant: "while",
-    condition: toCoreAST(node.condition),
-    body: node.body.map((n) => toCoreAST(n)),
-    args: [],
-    ...nodePos(node)
-  };
+  return loopCommand(node, "while", {
+    while: toCoreAST(node.condition),
+    bottomTested: node.bottomTested ? { type: "literal", value: true, raw: "true", ...POS } : void 0
+  });
 }
 function flattenEventModifiers(modifiers) {
   if (!modifiers)
@@ -27071,4 +27677,4 @@ export {
   toCoreAST,
   validatePartialContent
 };
-//# sourceMappingURL=dist-HOHQFWDA.js.map
+//# sourceMappingURL=dist-OK2I5ODH.js.map