@velarscript/web 0.12.1 → 0.13.0

package/dist/analyzer.js

@@ -2,13 +2,13 @@ import { semanticTypeIdentity } from "@velarscript/compiler";
 import { Analyzer, anyType, boolType, describeType, expressionContainsDirectAwait, invalidType, isInvalidType, isAssignable, isReadonlyView, nullType, nonOptional, numberType, optionalOf, spanIdentity, stringType, unknownType, } from "@velarscript/compiler/extension";
 import { BROWSER_TEST_MODULE, BROWSER_TEST_SOURCE_SUFFIX, browserTestImportGuidance } from "./browser-test.js";
 import { cssTokens } from "./css-tokens.js";
-import { LOOK_ABSENT_MEDIA_SUBJECTS, LOOK_ARITHMETIC_HINT, LOOK_ANIMATION_DIRECTIONS, LOOK_ANIMATION_EASINGS, LOOK_ANIMATION_FILLS, LOOK_BORDER_STYLE_NAMES, LOOK_BUILDER_NUMERIC_RANGES, LOOK_BUILDERS, LOOK_EXCLUDED_PROPERTIES, LOOK_HOOKS, LOOK_CSS_WIDE_KEYWORDS, LOOK_LARGE_KEYWORD_SETS, LOOK_LENGTH_BUILDERS, LOOK_MEDIA_LENGTH_UNITS, LOOK_MEDIA_SUBJECTS, LOOK_NUMERIC_TYPE_NAMES, LOOK_NON_ANIMATABLE_PROPERTIES, LOOK_PARTIAL_KEYWORD_PROPERTIES, LOOK_PROPERTIES, LOOK_PROPERTY_KEYWORDS, LOOK_PROPERTY_VALUE_KINDS, LOOK_TARGETS, LOOK_UNIT_TYPES, LOOK_UNITLESS_PROPERTIES, lookOwnKeywords, nearestLookName, } from "./look.js";
-import { collectLookStaticValues, evaluateLookStaticExpression, isLookStaticValue } from "./look-static.js";
+import { LOOK_ABSENT_MEDIA_SUBJECTS, LOOK_ARITHMETIC_HINT, LOOK_ANIMATION_DIRECTIONS, LOOK_ANIMATION_EASINGS, LOOK_ANIMATION_FILLS, LOOK_BORDER_STYLE_NAMES, LOOK_BUILDER_NUMERIC_RANGES, LOOK_BUILDER_SIGNATURES, LOOK_BUILDERS, LOOK_EXCLUDED_PROPERTIES, LOOK_HOOKS, LOOK_CSS_WIDE_KEYWORDS, LOOK_LARGE_KEYWORD_SETS, LOOK_LENGTH_BUILDERS, LOOK_MEDIA_LENGTH_UNITS, LOOK_MEDIA_SUBJECTS, LOOK_NUMERIC_TYPE_NAMES, LOOK_NON_ANIMATABLE_PROPERTIES, LOOK_PARTIAL_KEYWORD_PROPERTIES, LOOK_PROPERTIES, LOOK_PROPERTY_KEYWORDS, LOOK_PROPERTY_VALUE_KINDS, LOOK_TARGETS, LOOK_UNIT_TYPES, LOOK_UNITLESS_PROPERTIES, lookOwnKeywords, nearestLookName, } from "./look.js";
+import { collectLookStaticValues, evaluateLookStaticExpression, isLookStaticValue, lookStaticCss } from "./look-static.js";
 import { keyframeCssValue } from "./keyframes.js";
 import { dynamicChildLeaves } from "./emitter.js";
-import { isWebCustomElementName, WEB_NATIVE_ELEMENTS } from "./elements.js";
+import { isWebCustomElementName, WEB_ARIA_ATTRIBUTES, WEB_ARIA_ENUMERATED_VALUES, WEB_ARIA_ROLES, WEB_ARIA_ROLE_SYNONYMS, WEB_MISSPELLED_ATTRIBUTES, WEB_NATIVE_ELEMENTS, } from "./elements.js";
 import { isWebExpression, isWebJsx, isWebKeyframes, isWebLook, isWebStatement, isWebUnit, } from "./ast.js";
-import { CACHED_INTRINSIC_TYPE, isWebComponentConstructor, isWebComponentType, isWebComputedExport, isWebNodeType, normalizeWebComponentType, webComponentConstructor, webComponentHandle, webComponentIntrinsic, webComponentName, webNodeType, WEB_EVENT_TYPE_NAMES, WEB_OWNED_TYPE_NAMES, } from "./types.js";
+import { isWebComponentConstructor, isWebComponentType, isWebComputedExport, isWebNodeType, normalizeWebComponentType, webComponentConstructor, webComponentHandle, webComponentIntrinsic, webComponentName, webNodeType, WEB_EVENT_TYPE_NAMES, WEB_OWNED_TYPE_NAMES, } from "./types.js";
 // The canonical nominal identity of the Web RouteContext record. Route checks
 // probe with this identity so they succeed in modules that use route() without
 // importing RouteContext by name.
@@ -24,6 +24,33 @@ const nativeDomEventNames = new Set([
     "compositionstart", "compositionupdate", "compositionend",
     "copy", "cut", "paste", "load", "error", "transitionend", "animationend", "play", "pause", "ended",
 ]);
+// The attribute names an element really compiles as script: the browser turns
+// the attribute's text into a function body in the document's origin. This is a
+// different roster from `nativeDomEventNames` above, which answers "is there an
+// `on:` directive worth naming for this remainder". The two used to be one set,
+// so `onanimationstart` was told its name is merely reserved while the browser
+// was compiling it, and before that `onward` was told the reverse. Lookups
+// lowercase the written name, because an HTML attribute name is matched
+// ASCII-case-insensitively. Window-reflecting handlers (`onstorage`,
+// `onmessage`, `onunload`) stay out: they take effect only on `<body>`, so the
+// clause would be false of the element the author actually wrote.
+const htmlEventHandlerAttributes = new Set([
+    "onabort", "onauxclick", "onbeforeinput", "onbeforematch", "onbeforetoggle", "onblur", "oncancel",
+    "oncanplay", "oncanplaythrough", "onchange", "onclick", "onclose", "oncontextlost", "oncontextmenu",
+    "oncontextrestored", "oncopy", "oncuechange", "oncut", "ondblclick", "ondrag", "ondragend", "ondragenter",
+    "ondragleave", "ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "onerror",
+    "onfocus", "onformdata", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onload",
+    "onloadeddata", "onloadedmetadata", "onloadstart", "onmousedown", "onmouseenter", "onmouseleave",
+    "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onpaste", "onpause", "onplay", "onplaying",
+    "onprogress", "onratechange", "onreset", "onresize", "onscroll", "onscrollend", "onsecuritypolicyviolation",
+    "onseeked", "onseeking", "onselect", "onslotchange", "onstalled", "onsubmit", "onsuspend", "ontimeupdate",
+    "ontoggle", "onvolumechange", "onwaiting", "onwheel",
+    "onanimationstart", "onanimationend", "onanimationiteration", "onanimationcancel",
+    "ontransitionrun", "ontransitionstart", "ontransitionend", "ontransitioncancel",
+    "onpointerdown", "onpointerup", "onpointermove", "onpointerover", "onpointerout", "onpointerenter",
+    "onpointerleave", "onpointercancel", "ongotpointercapture", "onlostpointercapture",
+    "ontouchstart", "ontouchend", "ontouchmove", "ontouchcancel",
+]);
 const textualWebPrimitiveNames = new Set(["Length", "Percentage", "LengthPercentage", "TrackFraction", "Color", "Duration", "Angle"]);
 // D72 rule 186: derived from the published table, not restated beside it.
 const webEventTypeNames = WEB_EVENT_TYPE_NAMES;
@@ -96,19 +123,17 @@ function storageReadGuidance(call) {
 export function inferWebIntrinsic(context) {
     const { intrinsic, argumentAt, callSpan, arity, inferAt, callbackAt, runtimeTypeAt } = context;
     switch (intrinsic.name) {
-        case "reactive.computed": {
+        case RETIRED_ACCESSOR_INTRINSIC: {
+            // A call around the retired `computed(...)` returns the reader it
+            // always returned, carrying the callback's own result so an annotated
+            // declaration reads its migration message and nothing else. Nothing else
+            // is checked here — the shape is already refused, and a second complaint
+            // about a spelling that no longer exists teaches the author nothing.
             arity(1, 1);
             const callback = callbackAt(0, [], unknownType);
-            if (callback.kind === "any")
-                return { kind: "function", parameters: [], requiredParameters: 0, result: anyType };
-            if (callback.kind !== "function" && callback.kind !== "intrinsic") {
-                context.typeError("cached requires a synchronous zero-argument function", argumentAt(0)?.span ?? callSpan);
-                return { kind: "function", parameters: [], requiredParameters: 0, result: unknownType };
-            }
-            const result = callback.result;
-            if (context.expandAliases(result).kind === "promise") {
-                context.typeError("cached cannot hold a Promise; load asynchronous data with a resource", argumentAt(0)?.span ?? callSpan);
-            }
+            const result = callback.kind === "function" || callback.kind === "intrinsic" || callback.kind === "action"
+                ? callback.result
+                : callback.kind === "any" ? anyType : unknownType;
             return { kind: "function", parameters: [], requiredParameters: 0, result };
         }
         case "web.route": {
@@ -117,7 +142,7 @@ export function inferWebIntrinsic(context) {
             const component = inferAt(1);
             const path = argumentAt(0);
             if (path?.kind === "LiteralExpression" && typeof path.value === "string")
-                checkRoutePath(path.value, path.span, context);
+                checkRoutePath(path.value, path.span, context.typeError);
             checkRouteComponent(component, argumentAt(1)?.span ?? callSpan, "A route", context);
             return { kind: "object", fields: new Map([["path", stringType], ["component", component]]) };
         }
@@ -134,13 +159,17 @@ export function inferWebIntrinsic(context) {
             }
             if (isInvalidType(loader))
                 return loader;
-            if (loader.kind !== "function" && loader.kind !== "any") {
+            // No `any` arm on either line: the gate above has already established
+            // that argument 0 is a zero-parameter arrow, and the core analyzer infers
+            // an arrow on one return path that always answers `kind: "function"`
+            // (`inferArrow`). The loader is therefore never `any`, and D90 R17 —
+            // which retired the JavaScript boundary that used to hand one back — left
+            // nothing that could make it one.
+            if (loader.kind !== "function") {
                 if (loaderExpression)
                     context.typeError(`Expected a module loader, received ${describeType(loader)}`, loaderExpression.span);
                 return anyType;
             }
-            if (loader.kind === "any")
-                return anyType;
             if (isInvalidType(loader.result))
                 return loader.result;
             if (loader.parameters.length !== 0)
@@ -222,14 +251,6 @@ export function inferWebIntrinsic(context) {
             }
             return intrinsic.result;
         }
-        case "realtime.sendJson": {
-            arity(1, 1);
-            const value = inferAt(0);
-            const valueExpression = argumentAt(0);
-            if (context.jsonSerializable(value) === false && valueExpression)
-                context.typeError(`Realtime JSON accepts only records, Lists, enums, primitives, and optionals; received ${describeType(value)}`, valueExpression.span);
-            return nullType;
-        }
         case "config.public":
             arity(1, 1);
             return runtimeTypeAt(0);
@@ -460,16 +481,61 @@ function lookVocabularyGuidance(property, written, own, lead) {
         named: false,
     };
 }
-function literalLookStrings(expression) {
+/**
+ * Every string this expression can be when it is written out of literals alone
+ * — one literal, or a ternary whose branches are literals all the way down.
+ * Answers null when a value is decided anywhere else, which is the signal that
+ * a check reading it has nothing static to look at.
+ */
+function literalStringValues(expression) {
     if (expression.kind === "LiteralExpression")
         return typeof expression.value === "string" ? [expression.value] : [];
     if (expression.kind === "ConditionalExpression") {
-        const thenValues = literalLookStrings(expression.thenValue);
-        const elseValues = literalLookStrings(expression.elseValue);
+        const thenValues = literalStringValues(expression.thenValue);
+        const elseValues = literalStringValues(expression.elseValue);
         return thenValues && elseValues ? [...thenValues, ...elseValues] : null;
     }
     return null;
 }
+// WEB-S2: the attributes whose value the browser resolves as a URL and then
+// navigates, fetches, or submits to. A `javascript:`/`vbscript:` string in one
+// of them is script the page runs, which is the boundary the charter reserves
+// for `unsafe:html` — so the scheme is checked wherever it is written down.
+const WEB_URL_ATTRIBUTES = new Set(["href", "src", "action", "formaction", "poster", "data", "xlink:href", "ping", "cite"]);
+const WEB_SCRIPT_URL_SCHEMES = new Set(["javascript", "vbscript"]);
+// A `data:` URL is a document the browser builds from the string itself, so it
+// is inert only for the media types that cannot carry script. `image/svg+xml`
+// is deliberately absent: an SVG document runs script.
+const WEB_INERT_DATA_MEDIA_TYPES = new Set([
+    "image/png", "image/jpeg", "image/gif", "image/webp", "image/avif", "image/bmp", "image/x-icon",
+    "video/mp4", "video/webm", "video/ogg", "audio/mpeg", "audio/ogg", "audio/wav", "audio/webm",
+    "font/woff", "font/woff2", "font/ttf", "font/otf", "text/plain", "text/css",
+]);
+/**
+ * The scheme a browser reads out of a URL string. Leading and embedded ASCII
+ * whitespace and control characters are stripped first, because the URL parser
+ * strips them too — `java\tscript:alert(1)` is a `javascript:` URL.
+ */
+function urlAttributeScheme(value) {
+    const stripped = value.replace(/[\u0000-\u0020]/gu, "");
+    const match = /^([A-Za-z][A-Za-z0-9+.-]*):/u.exec(stripped);
+    return match ? { scheme: match[1].toLowerCase(), rest: stripped.slice(match[0].length) } : null;
+}
+/** The clause naming why one literal URL is refused, or null when it is fine. */
+function urlSchemeRefusal(value) {
+    const parsed = urlAttributeScheme(value);
+    if (!parsed)
+        return null;
+    if (WEB_SCRIPT_URL_SCHEMES.has(parsed.scheme)) {
+        return `'${parsed.scheme}:' is script, not a location — write an 'on:click' handler for behavior, or a real URL for navigation`;
+    }
+    if (parsed.scheme !== "data")
+        return null;
+    const media = (/^([^,;]*)/u.exec(parsed.rest)?.[1] ?? "").toLowerCase();
+    if (WEB_INERT_DATA_MEDIA_TYPES.has(media))
+        return null;
+    return `a 'data:' URL is only accepted for a media type that cannot carry script${media ? `, and '${media}' can` : ""}; the inert types are ${[...WEB_INERT_DATA_MEDIA_TYPES].join(", ")}`;
+}
 function isViewportComparison(expression) {
     if (expression.kind !== "BinaryExpression" || !["<", "<=", ">", ">="].includes(expression.operator))
         return false;
@@ -525,21 +591,20 @@ function lookSourceOf(expression) {
     return "breakpoint";
 }
 /**
- * A canonical rendering of one Look condition, so two sibling blocks that lower
- * to the same selector and media query share a duplicate-detection scope.
+ * A syntactic rendering of one condition operand, used for the part of a Look
+ * condition that does not lower to a selector or a media query: a runtime term
+ * keeps its own scope, because two different runtime conditions really are two
+ * different scopes.
  */
-function lookConditionSignature(expression) {
+function lookRuntimeSignature(expression) {
     if (isWebExpression(expression) && expression.kind === "ExtensionExpression:web:look-hook")
         return `@${expression.name}`;
     if (expression.kind === "UnaryExpression" && expression.operator === "not")
-        return `!(${lookConditionSignature(expression.operand)})`;
-    if (expression.kind === "BinaryExpression" && (expression.operator === "and" || expression.operator === "or")) {
-        return `(${lookConditionSignature(expression.left)}${expression.operator}${lookConditionSignature(expression.right)})`;
-    }
+        return `!(${lookRuntimeSignature(expression.operand)})`;
     if (expression.kind === "BinaryExpression")
-        return `(${lookConditionSignature(expression.left)}${expression.operator}${lookConditionSignature(expression.right)})`;
+        return `(${lookRuntimeSignature(expression.left)}${expression.operator}${lookRuntimeSignature(expression.right)})`;
     if (expression.kind === "MemberExpression")
-        return `${lookConditionSignature(expression.object)}.${expression.property}`;
+        return `${lookRuntimeSignature(expression.object)}.${expression.property}`;
     if (expression.kind === "IdentifierExpression")
         return `id:${expression.name}`;
     if (isWebUnit(expression))
@@ -548,11 +613,87 @@ function lookConditionSignature(expression) {
         return `lit:${expression.raw}`;
     return `span:${expression.span.start}`;
 }
+function lookKebab(value) {
+    return value.replace(/[A-Z]/gu, (character) => `-${character.toLowerCase()}`);
+}
+const lookOperatorNames = new Map([["<", "lt"], ["<=", "lte"], [">", "gt"], [">=", "gte"]]);
+const lookNegatedOperators = new Map([["<", ">="], ["<=", ">"], [">", "<="], [">=", "<"]]);
+/**
+ * LOK-I5: the duplicate-property scope used to key on the *written* condition,
+ * while the emitter keys its rules on the *lowered* one. `if scheme.dark:` and
+ * `if not scheme.light:` are the same condition by the charter's own words, so
+ * one silently overwrote the other and the loser was never reported. These
+ * atoms mirror the emitter's lowering exactly — a scheme and a reduced-motion
+ * negation name the other side of the query, and a negated breakpoint flips its
+ * operator — so the scope key is the token the rule ends up carrying.
+ */
+function lookConditionAtom(expression, negated, staticValues) {
+    if (isWebExpression(expression) && expression.kind === "ExtensionExpression:web:look-hook") {
+        return `${negated ? "not-" : ""}${lookKebab(expression.name)}`;
+    }
+    if (expression.kind === "MemberExpression" && expression.object.kind === "IdentifierExpression") {
+        if (expression.object.name === "motion") {
+            return expression.property === "reduced" ? `motion-${negated ? "no-preference" : "reduce"}` : null;
+        }
+        if (expression.object.name === "scheme" && (expression.property === "dark" || expression.property === "light")) {
+            return `scheme-${negated ? (expression.property === "dark" ? "light" : "dark") : expression.property}`;
+        }
+        return null;
+    }
+    if (!isViewportComparison(expression))
+        return null;
+    const comparison = expression;
+    const threshold = evaluateLookStaticExpression(comparison.right, staticValues);
+    if (threshold?.kind !== "unit" || !LOOK_MEDIA_LENGTH_UNITS.has(threshold.unit))
+        return null;
+    const property = comparison.left.property;
+    const operator = negated ? lookNegatedOperators.get(comparison.operator) : comparison.operator;
+    return `viewport-${property}-${lookOperatorNames.get(operator)}-${lookStaticCss(threshold)}`;
+}
+/**
+ * One Look condition as the set of alternatives it lowers to, each alternative
+ * being the sorted atoms that must hold together. Two conditions share a
+ * duplicate-detection scope exactly when this rendering matches, so a condition
+ * written the other way round, negated into its complement, or spelled with its
+ * operands swapped lands in the scope its rule will actually occupy.
+ */
+function lookConditionKey(expression, negated, staticValues) {
+    const terms = lookConditionTerms(expression, negated, staticValues);
+    return terms.map((term) => [...term].sort().join("+")).sort().join("|");
+}
+function lookConditionTerms(expression, negated, staticValues) {
+    if (expression.kind === "UnaryExpression" && expression.operator === "not") {
+        return lookConditionTerms(expression.operand, !negated, staticValues);
+    }
+    if (expression.kind === "BinaryExpression" && (expression.operator === "and" || expression.operator === "or")) {
+        const conjunction = (expression.operator === "and") !== negated;
+        const left = lookConditionTerms(expression.left, negated, staticValues);
+        const right = lookConditionTerms(expression.right, negated, staticValues);
+        if (!conjunction)
+            return [...left, ...right].slice(0, LOOK_CONDITION_TERM_LIMIT);
+        const combined = [];
+        for (const first of left) {
+            for (const second of right) {
+                combined.push([...first, ...second]);
+                if (combined.length >= LOOK_CONDITION_TERM_LIMIT)
+                    return combined;
+            }
+        }
+        return combined;
+    }
+    const atom = lookConditionAtom(expression, negated, staticValues);
+    return [[atom ?? `rt:${negated ? "!" : ""}${lookRuntimeSignature(expression)}`]];
+}
 /**
  * Every name in a module or component body whose read is reactive but whose
  * binding is not itself a state/prop reference: a computed accessor, a resource
  * handle, an action handle. A Look literal that reads one of these freezes it
  * exactly as it freezes a state read (LOK-D1).
+ *
+ * The retired `computed(...)` accessor stays in the callee test even though it
+ * is not a global any more (D71 replaced it with the declaration): analysis
+ * after a migration diagnostic still has to stay coherent, so the name a
+ * retired declaration binds is treated as derived exactly as it was before.
  */
 function collectDerivedReactiveNames(program) {
     const names = new Set();
@@ -560,7 +701,7 @@ function collectDerivedReactiveNames(program) {
         for (const statement of statements) {
             if (statement.kind === "VariableDeclaration" && statement.pattern.kind === "NameBindingPattern"
                 && statement.initializer.kind === "CallExpression" && statement.initializer.callee.kind === "IdentifierExpression"
-                && (statement.initializer.callee.name === "cached" || statement.initializer.callee.name === "computed")) {
+                && isRetiredAccessorName(statement.initializer.callee.name)) {
                 names.add(statement.pattern.name);
                 continue;
             }
@@ -575,6 +716,74 @@ function collectDerivedReactiveNames(program) {
     record(program.body);
     return names;
 }
+/**
+ * Every `const name = look:` in the module, wherever it is written. A name
+ * declared twice maps to null: two different Look literals under one name make
+ * the composition question unanswerable, so the check that reads this map
+ * declines rather than guessing which one an element received.
+ */
+function collectLookDeclarations(program) {
+    const looks = new Map();
+    const visit = (value) => {
+        if (Array.isArray(value)) {
+            for (const item of value)
+                visit(item);
+            return;
+        }
+        if (!value || typeof value !== "object")
+            return;
+        const record = value;
+        if (record.kind === "VariableDeclaration") {
+            const declaration = record;
+            if (declaration.binding === "const" && declaration.pattern.kind === "NameBindingPattern" && isWebLook(declaration.initializer)) {
+                looks.set(declaration.pattern.name, looks.has(declaration.pattern.name) ? null : declaration.initializer);
+            }
+        }
+        for (const [key, child] of Object.entries(record))
+            if (key !== "span")
+                visit(child);
+    };
+    visit(program.body);
+    return looks;
+}
+/**
+ * The properties one Look sets, each keyed by the target it sets them on so a
+ * `@before:` colour and an element colour stay two different decisions. The
+ * condition is deliberately not part of the key: two looks that set one
+ * property under conditions that can both hold are exactly the ambiguity this
+ * serves. A `...spread` of another look is followed, and the names followed are
+ * reported back, because composing is what makes two looks ordered rather than
+ * independent.
+ */
+function lookContributions(look, looks, visited = new Set()) {
+    const properties = new Set();
+    const composed = new Set();
+    const walk = (entries, target) => {
+        for (const entry of entries) {
+            if (entry.kind === "LookProperty")
+                properties.add(`${target}:${entry.name}`);
+            else if (entry.kind === "LookIf") {
+                walk(entry.thenEntries, target);
+                walk(entry.elseEntries, target);
+            }
+            else if (entry.kind === "LookTarget")
+                walk(entry.entries, entry.name);
+            else if (entry.kind === "LookSpread" && entry.value.kind === "IdentifierExpression" && !visited.has(entry.value.name)) {
+                const source = looks.get(entry.value.name);
+                composed.add(entry.value.name);
+                if (!source)
+                    continue;
+                const inner = lookContributions(source, looks, new Set([...visited, entry.value.name]));
+                for (const property of inner.properties)
+                    properties.add(property);
+                for (const name of inner.composed)
+                    composed.add(name);
+            }
+        }
+    };
+    walk(look.entries, "");
+    return { properties, composed };
+}
 /** Local names bound to a velar/look builder, including aliased imports. */
 function collectLookBuilderNames(program) {
     const names = new Map();
@@ -669,37 +878,37 @@ function checkRouteComponent(type, sourceSpan, subject, context) {
     if (routeProp && !context.isAssignable({ kind: "named", name: "RouteContext", identity: routeContextIdentity }, routeProp))
         context.typeError(`${subject} component's route prop must accept RouteContext, received ${describeType(routeProp)}`, sourceSpan);
 }
-function checkRoutePath(path, sourceSpan, context) {
+function checkRoutePath(path, sourceSpan, report) {
     if (!path.startsWith("/"))
-        context.typeError("A route path must start with '/'", sourceSpan);
+        report("A route path must start with '/'", sourceSpan);
     if (path.includes("?") || path.includes("#"))
-        context.typeError("A route path describes only a pathname; read query and hash from RouteContext", sourceSpan);
+        report("A route path describes only a pathname; read query and hash from RouteContext", sourceSpan);
     if (path.includes("\\"))
-        context.typeError("A route path cannot contain a backslash", sourceSpan);
+        report("A route path cannot contain a backslash", sourceSpan);
     if (path.length > 1 && path.endsWith("/"))
-        context.typeError("A route path cannot end with '/'; matching already accepts one trailing slash", sourceSpan);
+        report("A route path cannot end with '/'; matching already accepts one trailing slash", sourceSpan);
     const segments = path.split("/").slice(1);
     const parameters = new Set();
     for (const [index, segment] of segments.entries()) {
         if (segment.length === 0 && path !== "/")
-            context.typeError("A route path cannot contain an empty segment", sourceSpan);
+            report("A route path cannot contain an empty segment", sourceSpan);
         if (segment === "*") {
             if (index !== segments.length - 1)
-                context.typeError("A route wildcard must be the final segment", sourceSpan);
+                report("A route wildcard must be the final segment", sourceSpan);
             if (parameters.has("wildcard"))
-                context.typeError("A route parameter named 'wildcard' conflicts with the '*' capture", sourceSpan);
+                report("A route parameter named 'wildcard' conflicts with the '*' capture", sourceSpan);
             parameters.add("wildcard");
             continue;
         }
         if (segment.includes("*"))
-            context.typeError("A route wildcard must occupy its whole final segment", sourceSpan);
+            report("A route wildcard must occupy its whole final segment", sourceSpan);
         if (!segment.startsWith(":"))
             continue;
         const name = segment.slice(1);
         if (!/^[A-Za-z_][A-Za-z0-9_]*$/u.test(name))
-            context.typeError("A route parameter requires a valid name", sourceSpan);
+            report("A route parameter requires a valid name", sourceSpan);
         else if (parameters.has(name))
-            context.typeError(`Route parameter '${name}' is repeated`, sourceSpan);
+            report(`Route parameter '${name}' is repeated`, sourceSpan);
         parameters.add(name);
     }
 }
@@ -744,12 +953,446 @@ function hasAccessibleSvgName(expression) {
     return expression.children.some((child) => child.kind === "ExtensionExpression:web:jsx"
         && child.tag === "title" && hasAccessibleJsxContent(child));
 }
+/**
+ * `computed(...)` the function is answered with the signature it always had, so
+ * a call written around it still type-checks instead of collapsing into an
+ * unknown one — that is what keeps the one message about the declaration form
+ * the only thing the author reads. `reactive.computed` itself is gone; this one
+ * derives no reactivity and is never emitted, because every site that produces
+ * it also produces an error. It stays an intrinsic only so the reader it
+ * returns carries the callback's own result: an annotated declaration —
+ * `const one: () -> number = computed(() => 1)` — would otherwise read a
+ * second, spurious assignability error on top of it.
+ */
+const RETIRED_ACCESSOR_INTRINSIC = "reactive.retired-accessor";
+const retiredAccessorReaderType = Object.freeze({ kind: "function", parameters: [], requiredParameters: 0, result: unknownType });
+const RETIRED_ACCESSOR_TYPE = Object.freeze({
+    kind: "intrinsic",
+    name: RETIRED_ACCESSOR_INTRINSIC,
+    parameterNames: ["read"],
+    parameters: [retiredAccessorReaderType],
+    requiredParameters: 1,
+    result: retiredAccessorReaderType,
+});
+/** The function spelling of a derived value; `computed` the declaration is what it becomes. */
+function isRetiredAccessorName(name) {
+    return name === "computed";
+}
+/**
+ * D90 R15(a): a watch subject names a place in the reactive graph — the name of
+ * a `state` or a `computed`, or a read path out of one — and never computes a
+ * value. The rule is written positively, as this allowlist, because that is
+ * what makes the relation between a watch and its source *declared* rather than
+ * inferred; every earlier attempt to infer it was defeated by one more
+ * indirection. A path is legal at any depth and with any index expression:
+ * `rows[i].cells[j]` still selects a place, and whether `i` is a constant or
+ * another state changes nothing about that. An operator or a call derives a new
+ * value instead, and a derived value already has a spelling that names it,
+ * caches it, and declares its dependencies. The conditional is an operator by
+ * the charter's own vocabulary, and an f-string builds a new string, so neither
+ * needs a clause of its own — they simply are not paths.
+ *
+ * Whether the root of a legal path is reactive is a different question, and
+ * `frozenWatchSubject` keeps it: this answers shape only.
+ */
+function watchSubjectPath(expression) {
+    switch (expression.kind) {
+        case "IdentifierExpression":
+            return true;
+        case "MemberExpression":
+        case "IndexExpression":
+            return watchSubjectPath(expression.object);
+        default:
+            return false;
+    }
+}
+/** The escapes a text literal carries back into source (`scanStringEscape`). */
+const WATCH_SUBJECT_TEXT_ESCAPES = {
+    "\\": "\\\\",
+    "\"": "\\\"",
+    "\n": "\\n",
+    "\r": "\\r",
+    "\t": "\\t",
+};
+/**
+ * A text literal written back as source. `LiteralExpression.raw` holds the
+ * decoded content without its quotes, so echoing it would quote an expression
+ * the author never wrote and hand him a `computed` line that does not compile —
+ * `watch term + "!":` would read back as `term + !`. The quote the author chose
+ * is not on the node, so every text literal reads back double-quoted; that is a
+ * spelling difference, not a meaning one, and it compiles.
+ */
+function renderWatchTextLiteral(value, insideFString) {
+    let text = "";
+    for (const character of value) {
+        const escape = WATCH_SUBJECT_TEXT_ESCAPES[character];
+        if (escape !== undefined) {
+            text += escape;
+            continue;
+        }
+        // `{{` and `}}` are how an f-string carries a brace that is not a hole.
+        if (insideFString && (character === "{" || character === "}")) {
+            text += `${character}${character}`;
+            continue;
+        }
+        const code = character.codePointAt(0);
+        text += code < 0x20 || code === 0x7f ? `\\u{${code.toString(16)}}` : character;
+    }
+    return text;
+}
+/**
+ * The subject as the author wrote it, reconstructed from the AST for exactly
+ * the node kinds a subject can be. The analyzer never sees the module text, and
+ * a refusal that cannot quote what it refused teaches nothing — so the message
+ * quotes this. It is a reconstruction and stays one: it is used in the message
+ * only, never in a `fix`, because rewriting an author's source from a
+ * reconstruction is a worse defect than the one being reported. Null means
+ * "cannot say faithfully", and the message drops the echo rather than guess.
+ *
+ * Faithfulness is the whole point, so grouping is carried across rather than
+ * re-derived: the three nodes that record the author's own parentheses are
+ * printed with them, and the low-precedence nodes that record nothing are
+ * parenthesized wherever a bare printing would re-associate. The reconstruction
+ * therefore parses back to the tree it came from.
+ */
+function renderWatchSubject(expression) {
+    switch (expression.kind) {
+        case "IdentifierExpression":
+            return expression.name;
+        case "LiteralExpression":
+            return typeof expression.value === "string" ? `"${renderWatchTextLiteral(expression.value, false)}"` : expression.raw;
+        case "MemberExpression": {
+            const object = renderWatchSubjectOperand(expression.object);
+            return object === null ? null : `${object}${expression.optional ? "?." : "."}${expression.property}`;
+        }
+        case "IndexExpression": {
+            const object = renderWatchSubjectOperand(expression.object);
+            const index = renderWatchSubject(expression.index);
+            return object === null || index === null ? null : `${object}${expression.optional ? "?" : ""}[${index}]`;
+        }
+        case "CallExpression": {
+            const callee = renderWatchSubjectOperand(expression.callee);
+            if (callee === null)
+                return null;
+            const argumentTexts = [];
+            for (const [index, argument] of expression.arguments.entries()) {
+                const rendered = renderWatchSubject(argument);
+                if (rendered === null)
+                    return null;
+                const name = expression.argumentNames?.[index] ?? null;
+                argumentTexts.push(name === null ? rendered : `${name} = ${rendered}`);
+            }
+            return `${callee}${expression.optional ? "?" : ""}(${argumentTexts.join(", ")})`;
+        }
+        case "SpreadExpression": {
+            const value = renderWatchSubjectOperand(expression.value);
+            return value === null ? null : `...${value}`;
+        }
+        case "RequiredExpression": {
+            const value = renderWatchSubjectOperand(expression.value);
+            return value === null ? null : `${value}!`;
+        }
+        case "TryExpression": {
+            const value = renderWatchSubjectOperand(expression.value);
+            return value === null ? null : `try ${value}`;
+        }
+        case "ListExpression": {
+            const elements = expression.elements.map((element) => renderWatchSubject(element));
+            if (elements.some((element) => element === null))
+                return null;
+            return `[${elements.join(", ")}]`;
+        }
+        case "ObjectExpression": {
+            const entries = [];
+            for (const property of expression.properties) {
+                if (property.kind === "ObjectSpread") {
+                    const value = renderWatchSubjectOperand(property.value);
+                    if (value === null)
+                        return null;
+                    entries.push(`...${value}`);
+                    continue;
+                }
+                if (property.shorthand === true) {
+                    entries.push(property.name);
+                    continue;
+                }
+                const value = renderWatchSubject(property.value);
+                if (value === null)
+                    return null;
+                entries.push(`${property.name}: ${value}`);
+            }
+            return `{${entries.join(", ")}}`;
+        }
+        case "ArrowFunctionExpression": {
+            // An annotated or defaulted parameter would need a type printer this file
+            // has no business owning; the callback shapes a subject carries do not.
+            if (expression.parameters.some((parameter) => parameter.type !== null || parameter.defaultValue !== null))
+                return null;
+            const body = renderWatchSubject(expression.body);
+            if (body === null)
+                return null;
+            const parameters = expression.parameters.map((parameter) => `${parameter.rest ? "..." : ""}${parameter.name}`);
+            const head = expression.parameters.length === 1 && !expression.parameters[0].rest
+                ? parameters[0]
+                : `(${parameters.join(", ")})`;
+            return `${expression.asynchronous ? "async " : ""}${head} => ${body}`;
+        }
+        case "UnaryExpression": {
+            const operand = renderWatchSubjectOperand(expression.operand);
+            if (operand === null)
+                return null;
+            const spaced = expression.operator === "not" || expression.operator === "await";
+            return `${expression.operator}${spaced ? " " : ""}${operand}`;
+        }
+        case "BinaryExpression": {
+            const left = renderWatchSubjectOperand(expression.left);
+            const right = renderWatchSubjectOperand(expression.right);
+            if (left === null || right === null)
+                return null;
+            return groupWatchSubject(`${left} ${expression.operator} ${right}`, expression.parenthesized);
+        }
+        case "ComparisonChainExpression": {
+            const operands = expression.operands.map((operand) => renderWatchSubjectOperand(operand));
+            const first = operands[0];
+            if (first === undefined || first === null || operands.some((operand) => operand === null))
+                return null;
+            const chain = operands.slice(1).reduce((text, operand, index) => `${text} ${expression.operators[index]} ${operand}`, first);
+            return groupWatchSubject(chain, expression.parenthesized);
+        }
+        case "ConditionalExpression": {
+            const condition = renderWatchSubjectOperand(expression.condition);
+            const thenValue = renderWatchSubjectOperand(expression.thenValue);
+            const elseValue = renderWatchSubject(expression.elseValue);
+            if (condition === null || thenValue === null || elseValue === null)
+                return null;
+            return `${condition} ? ${thenValue} : ${elseValue}`;
+        }
+        case "IsExpression": {
+            const value = renderWatchSubjectOperand(expression.value);
+            // Only a plain named type reads back as one word; anything generic or
+            // optional would need a type printer this file has no business owning.
+            if (value === null || expression.type.syntax.kind !== "NamedTypeSyntax")
+                return null;
+            return groupWatchSubject(`${value} ${expression.operator} ${expression.type.syntax.name}`, expression.parenthesized);
+        }
+        case "FStringExpression": {
+            let text = "";
+            for (const part of expression.parts) {
+                if (part.kind === "text") {
+                    text += renderWatchTextLiteral(part.value, true);
+                    continue;
+                }
+                const value = renderWatchSubject(part.value);
+                if (value === null)
+                    return null;
+                text += `{${value}}`;
+            }
+            return `f"${text}"`;
+        }
+        default:
+            return null;
+    }
+}
+/**
+ * The same reconstruction in a position where a bare printing would bind
+ * differently than the author's source did — a binary operand, the object of a
+ * member read, the callee of a call. A conditional or an arrow reaches such a
+ * position only through parentheses the author wrote, and neither node records
+ * them, so they are restored here.
+ */
+function renderWatchSubjectOperand(expression) {
+    const rendered = renderWatchSubject(expression);
+    if (rendered === null)
+        return null;
+    return expression.kind === "ConditionalExpression" || expression.kind === "ArrowFunctionExpression"
+        ? `(${rendered})`
+        : rendered;
+}
+/** Restores the parentheses the author wrote, for the three nodes that record them. */
+function groupWatchSubject(rendered, parenthesized) {
+    return parenthesized === true ? `(${rendered})` : rendered;
+}
+/**
+ * D89 A4: what a `map` callback rebuilds, when it returns a newly built record
+ * instead of the row it was handed. Null is the non-trigger answer the ruling
+ * names — a callback that returns its parameter, or anything else that is not a
+ * record literal, builds nothing and moves no identity. A record is reported
+ * even when no field can be named, because it is the rebuilt row's own identity
+ * that the keyed list stops recognising, not any one field it carries.
+ *
+ * A conditional is read through because the React spelling nearly always
+ * carries one, `t.id == id ? {...t, done: true} : t`, and its `else` branch is
+ * the returns-the-original case rather than a second shape. A branch that names
+ * a field is preferred, since a suggestion that names one is the whole product.
+ */
+function keyedRebuiltRecord(body, row) {
+    if (body.kind === "ObjectExpression") {
+        // `{ id: item.id, done: true }` copies the key across and rewrites `done`.
+        // Naming `id` would send the author to write the one field whose value the
+        // keyed list reads, so a field that only carries the row's own value over
+        // is not the field the message is about.
+        for (const property of body.properties) {
+            if (property.kind !== "ObjectProperty")
+                continue;
+            if (rowFieldPassthrough(property.value, row, property.name))
+                continue;
+            return { field: property.name };
+        }
+        // A pure `{...item}` rewrites no field at all; the copy itself is what
+        // moves the row's identity, so there is no field name for the message.
+        return body.properties.length > 0 ? { field: null } : null;
+    }
+    if (body.kind === "ConditionalExpression") {
+        const thenSide = keyedRebuiltRecord(body.thenValue, row);
+        const elseSide = keyedRebuiltRecord(body.elseValue, row);
+        if (thenSide?.field)
+            return thenSide;
+        if (elseSide?.field)
+            return elseSide;
+        return thenSide ?? elseSide;
+    }
+    return null;
+}
+/**
+ * The reactive declarations a `def` body may not hold when the `def` answers
+ * `WebNode`. `watch`, `resource` and `action` are already refused outside a
+ * module or component scope (VEL3010/VEL3012/VEL3013); they stay listed because
+ * the defect is the declaration, not which of them the author reached for.
+ */
+const WEB_REACTIVE_DECLARATION_LABELS = new Map([
+    ["ExtensionStatement:web:state", "'state'"],
+    ["ExtensionStatement:web:computed", "'computed'"],
+    ["ExtensionStatement:web:resource", "'resource'"],
+    ["ExtensionStatement:web:watch", "'watch'"],
+    ["ExtensionStatement:web:mounted", "'@mounted'"],
+    ["ExtensionStatement:web:cleanup", "'@cleanup'"],
+]);
+/**
+ * The first reactive declaration a body holds, in source order. A nested `def`
+ * or `component` owns its own declarations, so the walk stops at one.
+ */
+function firstReactiveDeclaration(body) {
+    let found = null;
+    const pending = [...body];
+    while (pending.length > 0) {
+        const value = pending.pop();
+        if (Array.isArray(value)) {
+            for (const entry of value)
+                pending.push(entry);
+            continue;
+        }
+        if (value === null || typeof value !== "object")
+            continue;
+        const node = value;
+        const kind = typeof node.kind === "string" ? node.kind : null;
+        if (kind === "FunctionDeclaration" || kind === "ExtensionStatement:web:component")
+            continue;
+        const label = kind === null ? undefined : WEB_REACTIVE_DECLARATION_LABELS.get(kind);
+        if (label !== undefined) {
+            const span = node.span;
+            if (found === null || span.start < found.span.start)
+                found = { label, span };
+            continue;
+        }
+        for (const key of Object.keys(node))
+            pending.push(node[key]);
+    }
+    return found;
+}
+/**
+ * Whether a type answers markup. `WebNode` is the value, and `WebNode?` and
+ * `List<WebNode>` are the two shapes markup legitimately travels in — a helper
+ * that answers "this row, or nothing" and one that answers a row per item.
+ * Reading only the bare annotation closed the spelling instead of the sink:
+ * the identical body under `-> WebNode?` reached the same defect unreported.
+ */
+function carriesWebNode(type) {
+    if (isWebNodeType(type))
+        return true;
+    if (type.kind === "optional")
+        return carriesWebNode(type.inner);
+    if (type.kind === "list")
+        return carriesWebNode(type.element);
+    return false;
+}
+/**
+ * Whether a body's own `return`s carry JSX. A return type is optional on a
+ * `def`, and an omitted one left the same defective helper unreported, so the
+ * markup the body returns answers for the annotation that was never written.
+ * A nested `def` or `component` owns its own returns, exactly as it owns its
+ * own declarations.
+ */
+function bodyReturnsJsx(body) {
+    const pending = [...body];
+    while (pending.length > 0) {
+        const value = pending.pop();
+        if (Array.isArray(value)) {
+            for (const entry of value)
+                pending.push(entry);
+            continue;
+        }
+        if (value === null || typeof value !== "object")
+            continue;
+        const node = value;
+        const kind = typeof node.kind === "string" ? node.kind : null;
+        if (kind === "FunctionDeclaration" || kind === "ExtensionStatement:web:component")
+            continue;
+        if (kind === "ReturnStatement") {
+            if (subtreeHoldsJsx(node.value))
+                return true;
+            continue;
+        }
+        for (const key of Object.keys(node))
+            pending.push(node[key]);
+    }
+    return false;
+}
+/**
+ * A returned expression that builds markup anywhere inside it — bare, inside a
+ * List, behind a condition, or built by the callback of a `.map(...)` that
+ * answers a row per item. The arrow is walked rather than skipped for the same
+ * reason the optional and List annotations are unwrapped: `rows()` returning
+ * `items.map(item => <li>…</li>)` is a markup helper by every measure except
+ * the one spelling that was being read.
+ */
+function subtreeHoldsJsx(value) {
+    const pending = [value];
+    while (pending.length > 0) {
+        const entry = pending.pop();
+        if (Array.isArray(entry)) {
+            for (const item of entry)
+                pending.push(item);
+            continue;
+        }
+        if (entry === null || typeof entry !== "object")
+            continue;
+        const node = entry;
+        if (node.kind === "ExtensionExpression:web:jsx")
+            return true;
+        for (const key of Object.keys(node))
+            pending.push(node[key]);
+    }
+    return false;
+}
+/** The component spelling of a helper's name: components render as a PascalCase tag. */
+function componentSpelling(name) {
+    return name.length === 0 ? name : `${name[0].toUpperCase()}${name.slice(1)}`;
+}
+/** `{ id: item.id }` in a callback over `item`: the field carries its own value over unchanged. */
+function rowFieldPassthrough(value, row, name) {
+    return value.kind === "MemberExpression" && value.property === name
+        && value.object.kind === "IdentifierExpression" && value.object.name === row;
+}
 export class VelarWebAnalyzer extends Analyzer {
     componentStates = null;
     mountedDepth = 0;
     cleanupDepth = 0;
     /** D51 (audit 12): a component `watch` body runs on a change and ends, exactly as a module `watch` body does. */
     watchBodyDepth = 0;
+    /** D89 A4: the binding identity of every list a keyed `.map(...)` interpolation renders. */
+    keyedListSources = new Set();
+    /** D89 A4: every `list = list.map(item => {…})` rewrite of this module, in source order. */
+    keyedListRebuilds = [];
     synchronousReactiveDepth = 0;
     jsxDepth = 0;
     resources;
@@ -764,6 +1407,7 @@ export class VelarWebAnalyzer extends Analyzer {
     honoredJsxKeys = new Set();
     reportedJsxKeys = new Set();
     lookBuilderNames = new Map();
+    lookDeclarations = new Map();
     lookLiteralDepth = 0;
     /**
      * D71 rule 182: the declaration spans of every `computed` binding in scope.
@@ -775,7 +1419,7 @@ export class VelarWebAnalyzer extends Analyzer {
     importedComputedNames;
     /** The resolved spans of those imports, so a local shadow of the name is not one. */
     importedComputedSpans = new Set();
-    /** D71 migration state: retired `const x = computed(...)` sites, their reads, and every other `computed` reference. */
+    /** D71 migration state: `const x = computed(...)` sites, their reads, and every other reference to the name. */
     retiredAccessorDeclarations = new Map();
     retiredAccessorReads = new Map();
     retiredComputedReferences = new Map();
@@ -797,13 +1441,17 @@ export class VelarWebAnalyzer extends Analyzer {
     analyze(program) {
         this.lookStaticValues = collectLookStaticValues(program, this.importedLookStaticValues);
         this.lookBuilderNames = collectLookBuilderNames(program);
+        this.lookDeclarations = collectLookDeclarations(program);
         for (const name of collectDerivedReactiveNames(program))
             this.derivedReactiveNames.add(name);
         this.reportBrowserTestImports(program);
         this.rejectWebOwnedTypeNames(program);
+        this.keyedListSources.clear();
+        this.keyedListRebuilds.length = 0;
         super.analyze(program);
         this.reportStaticJsxKeys();
         this.reportRetiredComputedFunction();
+        this.adviseKeyedListRebuilds();
         return this.diagnostics;
     }
     /**
@@ -912,8 +1560,9 @@ export class VelarWebAnalyzer extends Analyzer {
             return true;
         if (statement.kind === "VariableDeclaration") {
             this.recordRetiredAccessorDeclaration(statement);
-            this.reportExportedCachedContract(statement);
         }
+        if (statement.kind === "FunctionDeclaration")
+            this.rejectStatefulWebNodeFunction(statement);
         if (!isWebStatement(statement))
             return false;
         switch (statement.kind) {
@@ -969,7 +1618,7 @@ export class VelarWebAnalyzer extends Analyzer {
                     // the body only runs on a later change, so its reads are deferred
                     // for the module-initialization-cycle classification.
                     const watched = this.inferExpression(statement.expression);
-                    this.rejectFrozenWatchSubject(statement.expression, watched);
+                    this.rejectFrozenWatchSubject(statement.expression, watched, statement.currentName, statement.previousName);
                     this.enterScope();
                     if (statement.currentName)
                         this.declareBinding(statement.currentName, false, watched, statement.span);
@@ -1019,6 +1668,7 @@ export class VelarWebAnalyzer extends Analyzer {
     }
     analyzeStatement(statement) {
         const readonlyProp = this.directReadonlyPropMutation(statement);
+        this.recordKeyedListRebuild(statement);
         const firstDiagnostic = this.diagnostics.length;
         super.analyzeStatement(statement);
         if (!readonlyProp)
@@ -1251,11 +1901,12 @@ export class VelarWebAnalyzer extends Analyzer {
             // unknown one: the author gets its migration and nothing else, and the
             // call around it still type-checks against the signature it always had.
             if (retired)
-                return CACHED_INTRINSIC_TYPE;
+                return RETIRED_ACCESSOR_TYPE;
         }
         const result = super.inferExpression(expression, contextualType);
-        if (expression.kind === "CallExpression")
+        if (expression.kind === "CallExpression") {
             this.checkLookBuilderCall(expression);
+        }
         return result;
     }
     // A name refers to writable reactive state only when ordinary lexical lookup
@@ -1263,6 +1914,38 @@ export class VelarWebAnalyzer extends Analyzer {
     writableStateName(name) {
         return this.reactiveBindingKind(name) === "state";
     }
+    /**
+     * The audit's seventh root cause: a `def` that declares reactive state and
+     * answers `WebNode` is a component wearing a function's clothes, and calling
+     * it bypasses exactly what the charter already refuses `View(...)` for. Two
+     * things follow from the call, both reproduced: every call runs the `state`
+     * declaration again, so the value resets on every re-render; and the
+     * observers the returned markup registers bind to whatever scope the call
+     * site was building — at module scope the global one, which is never
+     * destroyed, so they are never cleaned up.
+     *
+     * Only DECLARATION is refused. A `def -> WebNode` that merely reads state or a
+     * prop is a legitimate markup helper — examples/app has two — and a `def`
+     * nested inside a component binds its observers to that component's scope, so
+     * nothing about reading is defective.
+     *
+     * What answers "this `def` returns markup" is the sink, not one spelling of
+     * it: `-> WebNode?` and `-> List<WebNode>` are the shapes markup travels in,
+     * and a `def` may carry no return type at all — all three reached the same
+     * defect with the same body while only the bare annotation was read.
+     */
+    rejectStatefulWebNodeFunction(statement) {
+        const answersMarkup = statement.returnType
+            ? carriesWebNode(this.resolveAnnotation(statement.returnType))
+            : bodyReturnsJsx(statement.body);
+        if (!answersMarkup)
+            return;
+        const declaration = firstReactiveDeclaration(statement.body);
+        if (!declaration)
+            return;
+        const component = componentSpelling(statement.name);
+        this.diagnostics.push(diagnostic("VEL5074", `'${statement.name}' declares ${declaration.label} and returns WebNode, so calling it bypasses JSX ownership, prop cells, and lifecycle: every call declares the value again, so it resets on each render, and the observers its markup registers belong to whatever scope the call site was building rather than to this value. Write it as a component — 'component ${component}(...)' rendered as '<${component} />'; a 'def' that returns WebNode is a markup helper and may only read.`, declaration.span));
+    }
     /**
      * D71 rule 182: a declared derived value is read bare, exactly like state.
      * Calling one is the habit the retired `computed(...)` accessor taught, and it
@@ -1296,23 +1979,110 @@ export class VelarWebAnalyzer extends Analyzer {
     /**
      * D69 rule 178: a `watch` body that can never run is a block of statements
      * the compile silently drops — the same defect a bare `5` is already rejected
-     * for (VEL4030), reached from a position the rule could not see. The subject
-     * is refused only where the compile can *prove* nothing behind it moves, so a
-     * call whose reactivity lives inside another module is left alone: a rule that
-     * rejected those would be worse than the hole it closes.
+     * for (VEL4030), reached from a position the rule could not see.
+     *
+     * D90 R15(a) adds the third refusal and fixes the order the three are asked
+     * in. A frozen subject is answered before the shape rule so that one shape
+     * never draws two messages: a subject built only from frozen parts has no
+     * reactive source at all, and telling its author to declare a `computed`
+     * would only buy him a dead one. What survives both is either a path — the
+     * name of a reactive binding, or a member/index read out of one — or a
+     * computation, and a computation has a spelling of its own.
      *
-     * The two refusals are separate because their causes are: a reader that was
-     * not called has one correct spelling to name, and a frozen value has none.
+     * The three refusals are separate because their causes are: a reader that was
+     * not called names a value that never moves, a frozen value has no reactive
+     * source behind it at all, and a computed subject has one but hides which.
      */
-    rejectFrozenWatchSubject(expression, watched) {
+    rejectFrozenWatchSubject(expression, watched, currentName, previousName) {
         const name = expression.kind === "IdentifierExpression" ? expression.name : null;
         if (name !== null && this.reactiveBindingKind(name) === null && this.zeroArgumentReader(watched)) {
-            this.diagnostics.push(diagnostic("VEL5064", `'${name}' is the reader itself, so watching it watches a value that never changes; write 'watch ${name}():' to watch what it reads`, expression.span));
+            this.diagnostics.push(diagnostic("VEL5064", `'${name}' is the reader itself, so watching it watches a value that never changes; declare the derived value — 'computed name = ${name}()' — then 'watch name:'`, expression.span));
+            return;
+        }
+        if (this.frozenWatchSubject(expression)) {
+            this.diagnostics.push(diagnostic("VEL5064", `This watch subject never changes, so its body can never run${name === null ? "" : ` — '${name}' is not a reactive source`}; watch a 'state', a 'computed', a prop, or a resource field, or move these statements to where they should run`, expression.span));
             return;
         }
-        if (!this.frozenWatchSubject(expression))
+        if (watchSubjectPath(expression))
             return;
-        this.diagnostics.push(diagnostic("VEL5064", `This watch subject never changes, so its body can never run${name === null ? "" : ` — '${name}' is not a reactive source`}; watch a 'state', a 'computed', a prop, or a resource field, or move these statements to where they should run`, expression.span));
+        // D69's own shape, `watch total()`, is a called `computed`, and VEL5063 has
+        // already named it with the one-character edit that makes this subject
+        // legal. Stacking the shape rule on top would report one mistake twice and
+        // would hand the author 'computed value = total()' — a line that reports
+        // VEL5063 in its turn. The same reason the frozen rule is asked first.
+        if (this.diagnostics.some((item) => item.code === "VEL5063"
+            && item.span.start === expression.span.start && item.span.end === expression.span.end))
+            return;
+        const derived = currentName ?? "value";
+        const watchLine = currentName === null
+            ? `watch ${derived}:`
+            : `watch ${derived} as current${previousName === null ? "" : `, ${previousName}`}:`;
+        const rendered = renderWatchSubject(expression);
+        this.diagnostics.push(diagnostic("VEL5071", rendered === null
+            ? `A watch subject names what to watch, not what to compute. Declare the value — 'computed ${derived} = ...' — then '${watchLine}'`
+            : `A watch subject names what to watch, not what to compute: '${rendered}' computes a value. Declare it — 'computed ${derived} = ${rendered}' — then '${watchLine}'`, expression.span));
+    }
+    /**
+     * D89 A4: records `list = list.map(item => {…})`, React's immutable update,
+     * where the callback builds a new record rather than changing a field.
+     *
+     * D90 R2 stands — `__velarKeyed` compares identity and that does not move,
+     * and the framework does not accommodate the idiom. This channel is not the
+     * framework taking responsibility; it is the compiler telling the author that
+     * the row he is typing into is about to be destroyed. Nothing is reported
+     * yet: the advisory is owed only if the rewritten list is what a keyed list
+     * renders, and the render usually sits below the update.
+     */
+    recordKeyedListRebuild(statement) {
+        if (statement.kind !== "AssignmentStatement" || statement.operator !== "=")
+            return;
+        if (statement.target.kind !== "IdentifierExpression")
+            return;
+        const value = statement.value;
+        if (value.kind !== "CallExpression" || value.callee.kind !== "MemberExpression" || value.callee.property !== "map")
+            return;
+        // The map has to be over the list being replaced; `rows = source.map(...)`
+        // builds a new list, and a new list has no identity to preserve.
+        if (value.callee.object.kind !== "IdentifierExpression" || value.callee.object.name !== statement.target.name)
+            return;
+        const callback = value.arguments[0];
+        if (!callback || callback.kind !== "ArrowFunctionExpression")
+            return;
+        const [row] = callback.parameters;
+        if (!row || callback.parameters.length !== 1)
+            return;
+        const rebuilt = keyedRebuiltRecord(callback.body, row.name);
+        if (!rebuilt)
+            return;
+        const binding = this.lookup(statement.target.name);
+        if (!binding)
+            return;
+        this.keyedListRebuilds.push({
+            source: spanIdentity(binding.span),
+            name: statement.target.name,
+            field: rebuilt.field,
+            span: statement.span,
+        });
+    }
+    /**
+     * D89 A4: raises the advisory for the rewrites whose list a keyed position
+     * really renders. The advisory channel cannot reach `this.diagnostics`, so
+     * nothing here fails a build, changes an emitted byte, or moves a semantic
+     * rule; `// velar-allow A4: <reason>` suppresses it where `map` plus a record
+     * literal is the only spelling, which a `readonly` list or one API response
+     * makes it.
+     */
+    adviseKeyedListRebuilds() {
+        for (const rebuild of this.keyedListRebuilds) {
+            if (!this.keyedListSources.has(rebuild.source))
+                continue;
+            // The keys do not move; the rows do. `__velarKeyed` finds the entry under
+            // the same key and then drops it because the row it holds is no longer
+            // the same value, so a message blaming the key sends an author to check
+            // `id`, find it unchanged, and conclude the advisory is wrong.
+            const field = rebuild.field ?? "<field>";
+            this.advise("A4", `This rebuilds every row of '${rebuild.name}', so every row is a new value and the keyed list that renders '${rebuild.name}' no longer recognises any of them: it destroys and rebuilds all of its children — an input being typed into loses focus. Change the field in place instead: '${rebuild.name}[index].${field} = ...'`, rebuild.span);
+        }
     }
     /** A value that is read by calling it and takes no arguments to do so. */
     zeroArgumentReader(type) {
@@ -1380,16 +2150,16 @@ export class VelarWebAnalyzer extends Analyzer {
         return true;
     }
     /**
-     * D71 rule 183: `computed(...)` the function is retired in favour of
-     * `cached(...)`, and `const x = computed(() => E)` is retired in favour of the
-     * declaration. The declaration is recorded before the core walks the module so
-     * its reads can be matched against it — the rewrite that removes the call
+     * D71 rule 183: `computed(...)` the function — the shape Vue and the signals
+     * libraries teach — is not how a derived value is written here; the `computed`
+     * declaration is. The declaration is recorded before the core walks the module
+     * so its reads can be matched against it — the rewrite that removes the call
      * parentheses is only offered when every read is a plain `x()`.
      */
     recordRetiredAccessorDeclaration(statement) {
         const initializer = statement.initializer;
         if (initializer.kind !== "CallExpression" || initializer.callee.kind !== "IdentifierExpression"
-            || initializer.callee.name !== "computed" || this.lookup("computed") !== null)
+            || !isRetiredAccessorName(initializer.callee.name) || this.lookup(initializer.callee.name) !== null)
             return;
         if (statement.binding !== "const" || statement.pattern.kind !== "NameBindingPattern")
             return;
@@ -1398,25 +2168,26 @@ export class VelarWebAnalyzer extends Analyzer {
         // Only the `() => E` shape has a body that becomes the declaration's
         // initializer verbatim. Every other argument — a named function, a partial
         // application — would need the rewriter to invent an expression, so it is
-        // left to the author with the rename as its only mechanical answer.
+        // left to the author with the call spelled out as its only mechanical answer.
         const body = read?.kind === "ArrowFunctionExpression" && !read.asynchronous && read.parameters.length === 0
             ? read.body : null;
         this.retiredAccessorDeclarations.set(spanIdentity(statement.pattern.span), {
             name: statement.pattern.name,
             exported: statement.exported,
+            readName: read?.kind === "IdentifierExpression" ? read.name : null,
             declarationSpan: statement.span,
             callSpan: initializer.span,
             bodySpan: body ? body.span : null,
         });
         this.migratedComputedCallees.add(spanIdentity(initializer.callee.span));
     }
-    /** Returns true when the name is the retired `computed` global this pass owns. */
+    /** Returns true when the name is one of the retired accessor globals this pass owns. */
     recordRetiredAccessorRead(expression) {
-        if (expression.name === "computed") {
-            if (this.lookup("computed") !== null)
+        if (isRetiredAccessorName(expression.name)) {
+            if (this.lookup(expression.name) !== null)
                 return false;
             if (!this.migratedComputedCallees.has(spanIdentity(expression.span))) {
-                this.retiredComputedReferences.set(spanIdentity(expression.span), expression.span);
+                this.retiredComputedReferences.set(spanIdentity(expression.span), { name: expression.name, span: expression.span });
             }
             return true;
         }
@@ -1434,11 +2205,12 @@ export class VelarWebAnalyzer extends Analyzer {
         return false;
     }
     /**
-     * D71 migration: one message per retired site, and a mechanical rewrite only
-     * where the compile can prove the rewrite. Where the accessor is used as a
-     * value the choice between `computed x = E` and `cached(...)` turns on whether
-     * the caller wants the cache, which is the author's decision — so that site
-     * gets the message and no edit.
+     * D71 migration: one message per site, and a mechanical rewrite only where
+     * the compile can prove the rewrite. Where the
+     * accessor is used as a value there is no second spelling left to offer, so
+     * that site is told to declare the value and write an ordinary `def` where a
+     * callable is what the caller wants — and it gets no edit, because moving a
+     * reader out of a value position is the author's decision.
      */
     reportRetiredComputedFunction() {
         for (const [key, accessor] of this.retiredAccessorDeclarations) {
@@ -1453,8 +2225,8 @@ export class VelarWebAnalyzer extends Analyzer {
                 ]
                 : null;
             const alternative = accessor.bodySpan === null
-                ? ` Where the argument is a function rather than an expression, write the call — 'computed ${accessor.name} = read()' — or keep a passable cached reader with 'cached(...)'`
-                : ` Where the reader itself is passed on rather than read here, keep it a value with 'cached(...)'`;
+                ? ` Where the argument is a function rather than an expression, write the call — 'computed ${accessor.name} = ${accessor.readName ?? "read"}()'`
+                : ` Where the reader itself is passed on rather than read here, declare the value — 'computed ${accessor.name} = ...' — and write an ordinary 'def' where a callable is required`;
             this.diagnostics.push({
                 code: "VEL5055",
                 message: `A derived value is declared, not called: write 'computed ${accessor.name} = ...' and read '${accessor.name}' bare.${rewritable ? "" : alternative}`,
@@ -1462,29 +2234,13 @@ export class VelarWebAnalyzer extends Analyzer {
                 ...(edits ? { fix: { title: `Declare '${accessor.name}' with computed`, edits } } : {}),
             });
         }
-        for (const span of this.retiredComputedReferences.values()) {
-            this.diagnostics.push({
-                code: "VEL5055",
-                message: "'computed' is the keyword that declares a derived value — 'computed name = expression'. The function that returns a cached reader is now 'cached'",
-                span,
-                fix: { title: "Rename computed to cached", edits: [{ span, text: "cached" }] },
-            });
+        // There is no `fix`: the rewrite is a declaration, not a rename, and the
+        // declaration form is offered above where the compile can see the whole
+        // shape.
+        for (const reference of this.retiredComputedReferences.values()) {
+            this.diagnostics.push(diagnostic("VEL5055", "'computed' declares a derived value — 'computed name = expression'. There is no function form, and 'computed' already caches", reference.span));
         }
     }
-    /**
-     * D71 rule 183 keeps the export-boundary contract the retired spelling had:
-     * an exported cached reader has no inferable public type, so the annotation
-     * is required at the boundary rather than discovered by the importer.
-     */
-    reportExportedCachedContract(statement) {
-        if (!statement.exported || statement.type || statement.pattern.kind !== "NameBindingPattern")
-            return;
-        const initializer = statement.initializer;
-        if (initializer.kind !== "CallExpression" || initializer.callee.kind !== "IdentifierExpression"
-            || initializer.callee.name !== "cached" || this.lookup("cached") !== null)
-            return;
-        this.diagnostics.push(diagnostic("VEL4025", `Exported cached readers need an explicit contract at the export boundary; write 'export const ${statement.pattern.name}: () -> T = cached(...)', or declare the derived value itself with 'export computed ${statement.pattern.name} = ...'`, statement.span));
-    }
     extensionFieldsOf(name) {
         return webTypeFields(name);
     }
@@ -1697,7 +2453,7 @@ export class VelarWebAnalyzer extends Analyzer {
                 this.flowFrameDepth += 1;
                 this.synchronousReactiveDepth += 1;
                 const watched = this.inferExpression(item.expression);
-                this.rejectFrozenWatchSubject(item.expression, watched);
+                this.rejectFrozenWatchSubject(item.expression, watched, item.currentName, item.previousName);
                 this.enterScope();
                 if (item.currentName)
                     this.declareBinding(item.currentName, false, watched, item.span);
@@ -1862,9 +2618,10 @@ export class VelarWebAnalyzer extends Analyzer {
                 if (inheritedTerms * Math.max(thenTerms, elseTerms) > LOOK_CONDITION_TERM_LIMIT) {
                     this.diagnostics.push(diagnostic("VEL5045", `A Look condition may expand to at most ${LOOK_CONDITION_TERM_LIMIT} selector/runtime terms; split this visual decision into ordinary values`, entry.condition.span));
                 }
-                const signature = lookConditionSignature(entry.condition);
-                this.analyzeLookEntries(entry.thenEntries, insideTarget, true, Math.min(LOOK_CONDITION_TERM_LIMIT, inheritedTerms * thenTerms), `${scopeKey}&${signature}`);
-                this.analyzeLookEntries(entry.elseEntries, insideTarget, true, Math.min(LOOK_CONDITION_TERM_LIMIT, inheritedTerms * elseTerms), `${scopeKey}&!${signature}`);
+                const thenKey = lookConditionKey(entry.condition, false, this.lookStaticValues);
+                const elseKey = lookConditionKey(entry.condition, true, this.lookStaticValues);
+                this.analyzeLookEntries(entry.thenEntries, insideTarget, true, Math.min(LOOK_CONDITION_TERM_LIMIT, inheritedTerms * thenTerms), `${scopeKey}&${thenKey}`);
+                this.analyzeLookEntries(entry.elseEntries, insideTarget, true, Math.min(LOOK_CONDITION_TERM_LIMIT, inheritedTerms * elseTerms), `${scopeKey}&${elseKey}`);
                 continue;
             }
             if (entry.kind === "LookTarget") {
@@ -1975,13 +2732,25 @@ export class VelarWebAnalyzer extends Analyzer {
             return;
         }
         const ranges = LOOK_BUILDER_NUMERIC_RANGES.get(builder);
+        // A named argument fills the same slot its positional spelling does, so the
+        // position comes from the builder's own signature — the one table the
+        // module interface, the named-argument arity check, and the `keyframes:`
+        // lowering already derive from. Reading `-1` here instead put every check
+        // in this loop out of reach of the named spelling, not only the range
+        // table: `rgba(0, 0, 0, alpha=2)` compiled clean while `rgba(0, 0, 0, 2)`
+        // was refused.
+        const parameters = LOOK_BUILDER_SIGNATURES.get(builder)?.parameters;
         for (const [index, argument] of expression.arguments.entries()) {
             const named = expression.argumentNames?.[index] ?? null;
-            const position = named ? -1 : index;
+            const position = named === null ? index : parameters?.indexOf(named) ?? -1;
             const range = position >= 0 ? ranges?.[position] : undefined;
-            const literal = argument.kind === "LiteralExpression" && typeof argument.value === "number" ? argument.value
-                : argument.kind === "UnaryExpression" && argument.operator === "-" && argument.operand.kind === "LiteralExpression" && typeof argument.operand.value === "number"
-                    ? -argument.operand.value : null;
+            // LOK-U8 completed: a `keyframes:` stop lowers its builder calls at
+            // compile time, so no call survives to run the runtime guard. Reading the
+            // folded value rather than the literal node is what makes the promise
+            // "a computed argument keeps the same check" true where the run time the
+            // charter names does not exist.
+            const folded = evaluateLookStaticExpression(argument, this.lookStaticValues);
+            const literal = folded?.kind === "number" ? folded.value : null;
             if (range && literal !== null && (literal < range[1] || literal > range[2])) {
                 this.diagnostics.push(diagnostic("VEL5042", `${range[0]} must be from ${range[1]} through ${range[2]}; ${builder} received ${literal}`, argument.span));
             }
@@ -1995,6 +2764,14 @@ export class VelarWebAnalyzer extends Analyzer {
                 && !LOOK_BORDER_STYLE_NAMES.has(argument.value)) {
                 this.diagnostics.push(diagnostic("VEL5042", `Border style '${argument.value}' is not a CSS border style; use one of ${[...LOOK_BORDER_STYLE_NAMES].join(", ")}`, argument.span));
             }
+            // D60 rule 150 gave `transitionProperty` a real vocabulary and the
+            // charter says the builder takes the same one. It took none, so the
+            // longhand's refusal taught the camelCase spelling the builder accepted
+            // and the browser discarded. Routing the argument through the property's
+            // own checker keeps one vocabulary and one message.
+            if (builder === "transition" && position === 0) {
+                this.validateLookStringVocabulary("transitionProperty", argument, "The transition builder's property argument");
+            }
         }
         if (builder === "tracks" && expression.arguments.length > 1024) {
             this.diagnostics.push(diagnostic("VEL5042", "tracks cannot contain more than 1024 values", expression.span));
@@ -2028,7 +2805,7 @@ export class VelarWebAnalyzer extends Analyzer {
             this.diagnostics.push(diagnostic("VEL5060", "Animation count must be a positive integer no greater than 1000000", count.span));
         }
         if (count && loop) {
-            this.diagnostics.push(diagnostic("VEL5060", "animate accepts either count or loop, not both; use loop=true for an infinite animation", expression.span));
+            this.diagnostics.push(diagnostic("VEL5060", "animate accepts either count or loop, not both: count names the number of runs, and loop=true replaces that count with an unbounded one", expression.span));
         }
         this.checkAnimationKeyword(easing, "easing", LOOK_ANIMATION_EASINGS);
         this.checkAnimationKeyword(direction, "direction", LOOK_ANIMATION_DIRECTIONS);
@@ -2061,7 +2838,7 @@ export class VelarWebAnalyzer extends Analyzer {
                 const actual = this.inferExpression(entry.value, expected);
                 this.reportKeyframeSnapshotReads(entry.value);
                 if (keyframeCssValue(entry.value, this.lookStaticValues) === null) {
-                    this.diagnostics.push(diagnostic("VEL5060", "A keyframe value must resolve to static CSS from literals, unit values, arithmetic, or velar/look builders", entry.value.span));
+                    this.diagnostics.push(diagnostic("VEL5060", "A keyframe value must resolve to static CSS from literals, unit values, arithmetic, velar/look builders, or const bindings — local or imported — that hold any of those, and the text it resolves to must read as one declaration value: no ';', '{', '}', or '@' outside a string, with parentheses, strings, and comments all closed", entry.value.span));
                 }
                 if (mentionsLookUnitType(expected) && lookLiteralZero(entry.value))
                     continue;
@@ -2144,11 +2921,18 @@ export class VelarWebAnalyzer extends Analyzer {
             return false;
         return true;
     }
-    validateLookStringVocabulary(name, value) {
+    /**
+     * `subject` names the position in the message. It is the property itself
+     * everywhere except the `transition(...)` builder, whose first argument takes
+     * `transitionProperty`'s vocabulary but is not written as that property — a
+     * refusal that named the longhand there would name a spelling the author
+     * never wrote.
+     */
+    validateLookStringVocabulary(name, value, subject = `Look property '${name}'`) {
         const kind = LOOK_PROPERTY_VALUE_KINDS.get(name);
         if (!kind || kind === "text" || kind === "filter" || kind === "transform" || kind === "animation")
             return true;
-        const values = literalLookStrings(value);
+        const values = literalStringValues(value) ?? this.foldedLookKeyword(value);
         if (values === null)
             return true;
         for (const text of values) {
@@ -2197,7 +2981,7 @@ export class VelarWebAnalyzer extends Analyzer {
                 // D65 rule 169: a property whose CSS value space no set can hold says
                 // what it left out, so the boundary is legible where it is met.
                 const partial = expected.named ? undefined : LOOK_PARTIAL_KEYWORD_PROPERTIES.get(name);
-                this.diagnostics.push(diagnostic("VEL5038", `Look property '${name}' does not accept '${normalized}'; ${expected.text}${partial
+                this.diagnostics.push(diagnostic("VEL5038", `${subject} does not accept '${normalized}'; ${expected.text}${partial
                     ? `. ${partial}; use a module-level 'import css unsafe "./styles.css" before look' when that boundary is intentional`
                     : ""}`, value.span));
                 return false;
@@ -2205,6 +2989,22 @@ export class VelarWebAnalyzer extends Analyzer {
         }
         return true;
     }
+    /**
+     * D65 rule 168 closed the closed sets against misspelled literals, and D65
+     * item 3 makes a `const` string a first-class design token — so the two have
+     * to agree. A name or a record field that folds to a bare CSS keyword is
+     * checked exactly as the literal spelling of it is; anything that folds to
+     * composed CSS text (a builder result, a unit, a gradient) is not a keyword
+     * and is left to the type and to the builder's own checks.
+     */
+    foldedLookKeyword(value) {
+        if (value.kind !== "IdentifierExpression" && value.kind !== "MemberExpression")
+            return null;
+        const folded = evaluateLookStaticExpression(value, this.lookStaticValues);
+        if (folded?.kind !== "css" || !/^[A-Za-z][A-Za-z0-9-]*$/u.test(folded.value))
+            return null;
+        return [folded.value];
+    }
     /**
      * LOK-D3: a bare number on a length property reaches CSS as a declaration the
      * browser discards. The union already rejects it; this diagnostic replaces the
@@ -2322,6 +3122,8 @@ export class VelarWebAnalyzer extends Analyzer {
             if (expression.tag === "a" && target === "_blank" && (typeof relation !== "string" || !relation.split(/\s+/u).includes("noopener"))) {
                 this.diagnostics.push(diagnostic("VEL5028", "An anchor with target='_blank' requires rel='noopener'", expression.span));
             }
+            if (expression.tag === "iframe" && attributes.has("srcdoc"))
+                this.reportIframeSrcdocSandbox(expression, attributes);
         }
         if (component)
             this.analyzeComponentElement(expression);
@@ -2349,6 +3151,52 @@ export class VelarWebAnalyzer extends Analyzer {
         this.jsxDepth -= 1;
         return webNodeType;
     }
+    /**
+     * WEB-S3: `srcdoc` builds a whole document out of a string, and that document
+     * inherits this page's origin — so it is a second raw-HTML boundary next to
+     * the one the charter names (`unsafe:html`), reachable with no marker at all.
+     * The marker this one gets is `sandbox`, because sandbox is what actually
+     * takes the origin away; requiring it makes the boundary visible where it is
+     * crossed. `allow-scripts allow-same-origin` together hands the origin back,
+     * so the pair is refused by name rather than accepted as a sandbox.
+     */
+    reportIframeSrcdocSandbox(expression, attributes) {
+        const sandbox = attributes.get("sandbox");
+        if (!sandbox) {
+            this.diagnostics.push(diagnostic("VEL5066", "An iframe with srcdoc builds a document from a string, and that document runs script in this page's origin; add a sandbox attribute such as sandbox=\"allow-forms\" — write sandbox=\"\" when the frame needs no capability at all", expression.span));
+            return;
+        }
+        const tokens = typeof sandbox.value === "string" ? sandbox.value
+            : sandbox.value && sandbox.value.kind === "LiteralExpression" && typeof sandbox.value.value === "string" ? sandbox.value.value
+                : null;
+        if (tokens === null)
+            return;
+        const granted = new Set(tokens.split(/\s+/u).filter(Boolean));
+        if (granted.has("allow-scripts") && granted.has("allow-same-origin")) {
+            this.diagnostics.push(diagnostic("VEL5066", "sandbox='allow-scripts allow-same-origin' lets the framed document remove its own sandbox, so a srcdoc frame with both is not sandboxed at all; drop one of the two", sandbox.span));
+        }
+    }
+    /**
+     * WEB-S2: the analyzer already refuses an anchor that opens a window without
+     * 'noopener', so a URL attribute whose value is a script scheme cannot be the
+     * one URL question it declines to ask. A written-down URL is answered here; a
+     * value that arrives at run time is answered by the runtime attribute check.
+     */
+    reportUrlAttributeScheme(attribute) {
+        if (!WEB_URL_ATTRIBUTES.has(attribute.name))
+            return;
+        const value = attribute.value;
+        const written = typeof value === "string" ? [value] : value ? literalStringValues(value) : null;
+        if (written === null)
+            return;
+        for (const text of written) {
+            const refusal = urlSchemeRefusal(text);
+            if (!refusal)
+                continue;
+            this.diagnostics.push(diagnostic("VEL5067", `JSX '${attribute.name}' takes a URL, and ${refusal}`, attribute.span));
+            return;
+        }
+    }
     // Mirrors the emitter's keyed-children recognizer (dynamicChildLeaves): a
     // leaf shaped `source.map(item => <… key=… />)` — either the interpolation
     // itself or a '?:' branch of it — compiles to the identity-preserving keyed
@@ -2360,8 +3208,14 @@ export class VelarWebAnalyzer extends Analyzer {
         for (const leaf of dynamicChildLeaves(expression)) {
             if (!leaf.list)
                 continue;
-            if (leaf.list.key)
+            if (leaf.list.key) {
                 honoredKeyRoots.add(leaf.list.arrow.body);
+                // D89 A4: the list this keyed position renders by identity. A rewrite
+                // of that same list is what changes every row's identity at once.
+                const source = leaf.list.source.kind === "IdentifierExpression" ? this.lookup(leaf.list.source.name) : null;
+                if (source)
+                    this.keyedListSources.add(spanIdentity(source.span));
+            }
             else
                 this.diagnostics.push(diagnostic("VEL5017", "A JSX list rendered with .map() requires a key on its root element", leaf.list.arrow.body.span));
         }
@@ -2405,8 +3259,11 @@ export class VelarWebAnalyzer extends Analyzer {
         const hasChildren = expression.children.some((child) => child.kind !== "JSXText" || child.value.trim().length > 0);
         if (hasChildren && provided.has("children"))
             this.diagnostics.push(diagnostic("VEL5014", `Component '${expression.tag}' receives children both as a prop and as JSX content`, expression.span));
+        // D31 item 26: the message used to state the deficiency and stop. `children`
+        // is an ordinary named prop, so the remedy is one declaration and the
+        // diagnostic is the only place the charter's reader meets its spelling.
         else if (hasChildren && !component.properties.has("children"))
-            this.diagnostics.push(diagnostic("VEL5018", `Component '${expression.tag}' does not declare JSX children`, expression.span));
+            this.diagnostics.push(diagnostic("VEL5018", `Component '${expression.tag}' does not declare JSX children; declare a 'children: WebNode' prop to accept them`, expression.span));
         else if (hasChildren) {
             provided.add("children");
             this.requireAssignable(webNodeType, component.properties.get("children"), expression.span);
@@ -2476,6 +3333,10 @@ export class VelarWebAnalyzer extends Analyzer {
             if (isWebComponentConstructor(component) && webComponentIntrinsic(component) === "web.router" && attribute.name === "fallback" && actual.kind !== "null" && actual.kind !== "any") {
                 this.checkWebRouteComponent(actual, attribute.span, "A Router fallback");
             }
+            if (isWebComponentConstructor(component) && webComponentIntrinsic(component) === "web.router" && attribute.name === "routes"
+                && attribute.value !== null && typeof attribute.value !== "string") {
+                this.checkWebRouteRecords(attribute.value);
+            }
             this.requireAssignable(actual, expected, attribute.span);
         }
     }
@@ -2506,6 +3367,46 @@ export class VelarWebAnalyzer extends Analyzer {
         const actual = this.inferExpression(value);
         if (!this.isLookInput(actual))
             this.diagnostics.push(diagnostic("VEL5040", `JSX look requires Look, Look?, or a list of Look values; received ${describeType(actual)}`, attribute.span));
+        if (value.kind === "ListExpression")
+            this.reportIndependentLookCollisions(value, attribute);
+    }
+    /**
+     * Composition is how a Look overrides another one: `...baseLook` puts the two
+     * in an order the reader can see, and everything after it wins. Two looks
+     * placed side by side on one element state no order at all, so a property both
+     * of them set has no answer the source gives — the winner used to fall out of
+     * whichever rule the stylesheet happened to carry last. The shape is refused
+     * rather than ordered by fiat, and the refusal names the spelling that states
+     * the order the author meant.
+     */
+    reportIndependentLookCollisions(value, attribute) {
+        const entries = [];
+        for (const element of value.elements) {
+            if (element.kind !== "IdentifierExpression")
+                continue;
+            const look = this.lookDeclarations.get(element.name);
+            if (look)
+                entries.push({ name: element.name, look });
+        }
+        for (const [index, first] of entries.entries()) {
+            for (const second of entries.slice(index + 1)) {
+                if (first.name === second.name)
+                    continue;
+                const left = lookContributions(first.look, this.lookDeclarations);
+                const right = lookContributions(second.look, this.lookDeclarations);
+                // A look that composes the other is already ordered against it: the
+                // spread says which one is the base, so nothing here is ambiguous.
+                if (left.composed.has(second.name) || right.composed.has(first.name))
+                    continue;
+                const collision = [...left.properties].find((property) => right.properties.has(property));
+                if (collision === undefined)
+                    continue;
+                const property = collision.slice(collision.indexOf(":") + 1);
+                const target = collision.slice(0, collision.indexOf(":"));
+                this.diagnostics.push(diagnostic("VEL5068", `Look '${first.name}' and Look '${second.name}' both set '${property}'${target ? ` on '@${target}'` : ""}, and placing them side by side states no order between them; write one Look that starts with '...${first.name}' and overrides '${property}' from there, then pass that one`, attribute.span));
+                return;
+            }
+        }
     }
     analyzeComponentRef(expression, attribute, component) {
         const value = attribute.value;
@@ -2531,6 +3432,7 @@ export class VelarWebAnalyzer extends Analyzer {
     }
     analyzeNativeJsxAttribute(expression, attribute) {
         const value = attribute.value;
+        this.reportUrlAttributeScheme(attribute);
         const eventName = attribute.name.startsWith("on:") ? attribute.name.slice(3).split(".")[0] ?? "" : "";
         const expectedEvent = eventName ? webEventType(eventName) : null;
         // GRM-A4: the declared handler type returns null. `() => {}` after a fat
@@ -2570,6 +3472,14 @@ export class VelarWebAnalyzer extends Analyzer {
             if (!isInvalidType(inferred) && inferred.kind !== "any" && !this.isOptionalString(inferred)) {
                 this.diagnostics.push(diagnostic("VEL5047", `unsafe:html requires string or string?, received ${describeType(inferred)}`, attribute.span));
             }
+            // D90 coherence-3, one step sideways: `unsafe:` is a closed prefix with
+            // exactly one member, so `unsafe:script=` is wrong by construction rather
+            // than merely unrecognised — and it used to be emitted verbatim as a dead
+            // attribute, which is the worst possible answer for a name that reads like
+            // an escape hatch the author believes they opened.
+        }
+        else if (attribute.name.startsWith("unsafe:")) {
+            this.diagnostics.push(diagnostic("VEL5015", `Unknown escape hatch '${attribute.name}'; 'unsafe:html' is the only one an element has, and it takes the HTML text as a string`, attribute.span));
         }
         else if (attribute.name === "bind:value") {
             if (!this.isWritableBindTarget(value)) {
@@ -2611,20 +3521,54 @@ export class VelarWebAnalyzer extends Analyzer {
                 else if (target.kind !== "any" && (target.kind !== "named" || !accepted.has(target.name)))
                     this.diagnostics.push(diagnostic("VEL5024", `A <${expression.tag}> ref requires ${expected}? or a parent element type`, attribute.span));
             }
-        }
-        else if (attribute.name === "bind") {
-            this.diagnostics.push(diagnostic("VEL5019", "Use 'bind:value={name}'; the bind directive names the bound property, such as bind:value or bind:checked", attribute.span));
-        }
-        else if (/^on[A-Z]/u.test(attribute.name)) {
+            // The three branches above are the whole `bind:` family, so a fourth suffix
+            // names no binding — and it used to reach the attribute emitter and render
+            // a dead `bind:foo` attribute, silently binding nothing. Same shape as the
+            // React-spelling rule: a closed VelarScript vocabulary, so an outside name
+            // is wrong rather than unknown.
+        }
+        else if (attribute.name === "bind" || attribute.name.startsWith("bind:")) {
+            const property = attribute.name.slice("bind:".length);
+            const nearest = property ? nearestLookName(property, ["value", "checked", "group"]) : null;
+            this.diagnostics.push(diagnostic("VEL5019", property
+                ? `Unknown binding 'bind:${property}'${nearest ? `; did you mean 'bind:${nearest}'?` : "; an element binds bind:value for a field, bind:checked for a flag, and bind:group for a set of choices"}`
+                : "Use 'bind:value={name}'; the bind directive names the bound property, such as bind:value or bind:checked", attribute.span));
+            // WEB-S1: the guard used to be anchored on an uppercase letter, which
+            // closed the React reflex `onClick=` and left the lowercase HTML spelling
+            // open. Both are the same attribute — an HTML attribute name is matched
+            // ASCII-case-insensitively, and `setAttribute` lowercases on an HTML
+            // element, so `onClick` and `ONCLICK` reach `onclick` too. That attribute
+            // is the one that matters: the browser compiles its value as script, so any
+            // string routed there is executable code in the application's origin, which
+            // the charter reserves for `unsafe:html`. So a native element reserves the
+            // whole `on` prefix by name rather than by a roster of handler names: a
+            // roster leaves the next handler spelling open, and every event is written
+            // with the `on:` directive anyway. The lookahead keeps that directive out.
+        }
+        else if (/^on(?!:)/iu.test(attribute.name)) {
+            const camel = attribute.name.slice(2);
+            const event = camel === "DoubleClick" || camel === "DblClick" ? "dblclick" : camel.toLowerCase();
+            // Only a name the browser really compiles as script earns the executable
+            // clause; a name that is no event at all is refused by the prefix rule,
+            // not by the browser, and a message that claimed otherwise would state a
+            // rule the author did not hit. The roster answering that question is
+            // HTML's handler attributes, read case-insensitively as the browser reads
+            // them — the `on:` directive vocabulary is a different question and
+            // answered it wrongly in both directions.
+            const executable = htmlEventHandlerAttributes.has(attribute.name.toLowerCase());
+            // A concrete `on:` replacement is worth naming only when the remainder is
+            // a real event; `onward` would otherwise be answered with `on:ward`.
+            const named = executable || nativeDomEventNames.has(event);
+            const script = executable
+                ? ` — an '${attribute.name}' attribute is compiled as script by the browser, so any value written there runs`
+                : "";
             if (attribute.name === "onEnter") {
                 this.diagnostics.push(diagnostic("VEL5025", "Use 'on:keydown' with a handler that checks 'event.key == \"Enter\"'; VelarScript has no dedicated enter-key event", attribute.span));
             }
             else {
-                const camel = attribute.name.slice(2);
-                const event = camel === "DoubleClick" || camel === "DblClick" ? "dblclick" : camel.toLowerCase();
-                this.diagnostics.push(diagnostic("VEL5025", nativeDomEventNames.has(event)
-                    ? `Use 'on:${event}'; VelarScript event attributes use the on: directive`
-                    : "Use an 'on:event' directive with a native DOM event name, such as 'on:click' or 'on:keydown'", attribute.span));
+                this.diagnostics.push(diagnostic("VEL5025", named
+                    ? `Use 'on:${event}'; VelarScript event attributes use the on: directive, written 'on:${event}={handler}'${script}`
+                    : "Use an 'on:event' directive with a native DOM event name, such as 'on:click={handler}' or 'on:keydown={handler}'; an element reserves every attribute name beginning with 'on' other than the 'on:' directive itself, because the handler spellings among them — 'onclick', 'onerror', 'onload' — are executable script in the browser", attribute.span));
             }
         }
         else if (attribute.name.startsWith("on:")) {
@@ -2653,14 +3597,132 @@ export class VelarWebAnalyzer extends Analyzer {
         }
         else if (attribute.name === "key" && !isInvalidType(inferred) && inferred.kind !== "string" && inferred.kind !== "number" && inferred.kind !== "enum" && inferred.kind !== "enumMember" && inferred.kind !== "any") {
             this.diagnostics.push(diagnostic("VEL5022", "A JSX key must be a string, string-backed enum, or number", attribute.span));
-        }
-        else if (!isInvalidType(inferred) && !this.isJsxAttributeValue(inferred)) {
+            // The name check sits at the tail of the chain so every directive above it
+            // — look:, class:, on:, bind:, ref, key — keeps owning its own spelling and
+            // is never read as an HTML attribute name. It reports at most once per
+            // attribute and short-circuits the value-shape message, so a React spelling
+            // is answered with its successor rather than with two half-answers.
+        }
+        else if (!this.reportNativeAttributeSpelling(expression, attribute)
+            && !isInvalidType(inferred) && !this.isJsxAttributeValue(inferred)) {
             this.diagnostics.push(diagnostic("VEL5047", `Native JSX attributes require text, finite numbers, bool, enums, or null; received ${describeType(inferred)}`, attribute.span));
         }
         if (attribute.name.startsWith("on:click") && !["button", "a", "input", "select", "textarea", "summary"].includes(expression.tag)
             && !expression.attributes.some((item) => item.name === "role"))
             this.diagnostics.push(diagnostic("VEL5023", `Clickable <${expression.tag}> requires an explicit role`, expression.span));
     }
+    /**
+     * D90 coherence-3: DOM attribute names and ARIA are documented as checked
+     * surfaces, and nothing checked them — `className="panel"` compiled clean and
+     * emitted a dead attribute, while the sibling React reflex `onClick=` on the
+     * same element was already refused. So a model got a clean bill of health on
+     * exactly the half of its React habit that silently breaks the page.
+     *
+     * The rule diagnoses names that are KNOWN wrong, never names that are merely
+     * unknown. HTML lets a document carry attributes no roster can enumerate, so
+     * `foo="bar"`, `data-*`, and a framework's own prefixes stay legal; a false
+     * positive there would block a correct program, which is worse than the
+     * silence it replaces. Three closed rosters answer three closed questions:
+     * the React / JavaScript-property spellings, the ARIA attribute names (ARIA,
+     * unlike HTML, admits no custom names), and the ARIA and role vocabularies.
+     *
+     * D61 bounds the value half. It ruled that an `aria-*` attribute given a
+     * `bool` renders the literal text "true"/"false", and explicitly rejected
+     * making the author write `aria-pressed={x ? "true" : "false"}` as ceremony.
+     * So a token vocabulary is read only against a string literal; an expression
+     * value is a runtime question and is never touched here.
+     *
+     * Returns true when it reported, so the caller does not stack a value-shape
+     * message on an attribute whose name is already answered.
+     */
+    reportNativeAttributeSpelling(expression, attribute) {
+        // A custom element owns its own attribute vocabulary, and an unknown tag was
+        // already reported as a tag; neither is a surface these rosters describe.
+        if (!WEB_NATIVE_ELEMENTS.has(expression.tag))
+            return false;
+        const name = attribute.name;
+        // The attribute span opens on the name, so the name occupies its first
+        // `name.length` characters — the range a rename rewrites, leaving the value
+        // exactly as written.
+        const nameSpan = { start: attribute.span.start, end: attribute.span.start + name.length };
+        const rename = (write) => ({ fix: { title: `Use '${write}'`, edits: [{ span: nameSpan, text: write }] } });
+        const spelling = WEB_MISSPELLED_ATTRIBUTES.get(name);
+        if (spelling) {
+            this.diagnostics.push({
+                code: "VEL5070",
+                message: `'${name}' is not a native attribute name; write '${spelling.write}'${spelling.note ? ` ${spelling.note}` : ""}`,
+                span: attribute.span,
+                ...(spelling.note === undefined ? rename(spelling.write) : {}),
+            });
+            return true;
+        }
+        if (/^aria[A-Z]/u.test(name)) {
+            // Every ARIA attribute is `aria-` followed by one lowercase word, so
+            // lowercasing the remainder recovers the spelling whenever one exists.
+            const hyphenated = `aria-${name.slice(4).toLowerCase()}`;
+            const known = WEB_ARIA_ATTRIBUTES.has(hyphenated);
+            this.diagnostics.push({
+                code: "VEL5070",
+                message: known
+                    ? `'${name}' is not a native attribute name; ARIA attribute names are hyphenated — write '${hyphenated}'`
+                    : `'${name}' is not a native attribute name; ARIA attribute names are hyphenated and lowercase, such as 'aria-label'`,
+                span: attribute.span,
+                ...(known ? rename(hyphenated) : {}),
+            });
+            return true;
+        }
+        if (name.startsWith("aria-") && !WEB_ARIA_ATTRIBUTES.has(name)) {
+            const nearest = nearestLookName(name, WEB_ARIA_ATTRIBUTES);
+            this.diagnostics.push({
+                code: "VEL5070",
+                message: nearest
+                    ? `Unknown ARIA attribute '${name}'; did you mean '${nearest}'?`
+                    : `Unknown ARIA attribute '${name}'; ARIA defines a closed set of aria-* names, so a state or property it does not define belongs on a data-* attribute`,
+                span: attribute.span,
+                ...(nearest ? rename(nearest) : {}),
+            });
+            return true;
+        }
+        // Only a literal value is read. A fix is not registered for a value: the
+        // attribute span opens on the name, so the value's own range is not known
+        // here, and the message names the token instead.
+        const literal = attribute.value;
+        // The empty string is not an out-of-vocabulary token: ARIA reads it as the
+        // attribute's own default, so `aria-hidden=""` is an uncommon but correct
+        // spelling of "not hidden" and refusing it would block a working document.
+        // `role=""` is already silent for the same reason — its loop skips empty
+        // tokens — so this keeps the two halves of the value check agreeing.
+        if (typeof literal !== "string" || literal === "")
+            return false;
+        const vocabulary = WEB_ARIA_ENUMERATED_VALUES.get(name);
+        if (vocabulary && !vocabulary.has(literal)) {
+            const nearest = nearestLookName(literal, vocabulary);
+            this.diagnostics.push(diagnostic("VEL5070", `'${name}' takes one of ${[...vocabulary].join(", ")}; '${literal}' is not one of them${nearest ? ` — did you mean '${nearest}'?` : ""}`, attribute.span));
+            return true;
+        }
+        if (name === "role") {
+            // `role` takes a space-separated fallback list, so each token is its own
+            // question and only the unknown ones are named.
+            let reported = false;
+            for (const token of literal.split(/\s+/u)) {
+                if (!token || WEB_ARIA_ROLES.has(token))
+                    continue;
+                // A published second spelling is answered as a synonym rather than as
+                // an unknown name. `image` is ARIA's own later spelling of `img`, and
+                // "Unknown ARIA role 'image'" would assert something false about it.
+                const synonym = WEB_ARIA_ROLE_SYNONYMS.get(token);
+                const nearest = synonym ? null : nearestLookName(token, WEB_ARIA_ROLES);
+                this.diagnostics.push(diagnostic("VEL5070", synonym
+                    ? `ARIA publishes '${token}' and '${synonym}' as one role; VelarScript writes '${synonym}'`
+                    : nearest
+                        ? `Unknown ARIA role '${token}'; did you mean '${nearest}'?`
+                        : `Unknown ARIA role '${token}'; role takes an ARIA role name such as 'button', 'dialog', or 'status'`, attribute.span));
+                reported = true;
+            }
+            return reported;
+        }
+        return false;
+    }
     /**
      * GRM-A4: an event handler runs for effect and returns null. The hole this
      * closes is `on:click={() => {}}`: after a fat arrow, braces build a record,
@@ -2842,12 +3904,71 @@ export class VelarWebAnalyzer extends Analyzer {
             return expanded.members.every((member) => this.isOptionalString(member));
         return false;
     }
+    /**
+     * The elements of a `<Router routes={...}>` list literal, one at a time.
+     *
+     * A route written as `route("/a", Panel)` is checked at that call; the record
+     * that call returns — `{path: "/a", component: Panel}` — is a legal spelling
+     * of the same value, reaches the same runtime position, and until now was
+     * checked by nothing: `{path: "no-leading-slash", component: 5}` compiled
+     * clean and handed `5` to the Router as a component. Closing the sink rather
+     * than the spelling means asking the same questions wherever a route arrives,
+     * so this reports exactly what `route(...)` reports, word for word.
+     *
+     * The runtime is already the second referee (D90 R19): `routerTable`
+     * validates every path and refuses a component that is not callable. Nothing
+     * here changes which programs run — it moves a refusal the author would have
+     * met at mount to the place the source shows the mistake.
+     *
+     * The `any` component slot is skipped here rather than inside
+     * `checkWebRouteComponent`, which is why that method carries no `any` arm:
+     * this loop and the Router `fallback` attribute are its only two callers, and
+     * both filter first. An `any` reaches this slot for real — `web.lazy` answers
+     * `anyType` from each of its error paths — and it arrives with the author's
+     * real message already reported, so a second "received any" would be a
+     * cascade. The `route(...)` twin skips it for the same reason.
+     */
+    checkWebRouteRecords(expression) {
+        if (expression.kind !== "ListExpression")
+            return;
+        for (const element of expression.elements) {
+            if (element.kind !== "ObjectExpression")
+                continue;
+            for (const entry of element.properties) {
+                if (entry.kind !== "ObjectProperty")
+                    continue;
+                if (entry.name === "path") {
+                    const path = entry.value;
+                    if (path.kind === "LiteralExpression" && typeof path.value === "string") {
+                        checkRoutePath(path.value, path.span, (message, span) => this.typeError(message, span));
+                    }
+                    continue;
+                }
+                if (entry.name !== "component")
+                    continue;
+                // The attribute has already been inferred as a whole, so every
+                // sub-expression here has been reported once. This second pass exists
+                // only to read the component slot's type back; anything it says is a
+                // repeat of what the author already has, and is dropped. Advisories
+                // need no such cursor — `advise` is deduplicated by code and span
+                // precisely so a re-analysis cannot raise one twice.
+                const reported = this.diagnostics.length;
+                const type = this.inferExpression(entry.value);
+                this.diagnostics.splice(reported);
+                if (type.kind === "any")
+                    continue;
+                this.checkWebRouteComponent(type, entry.value.span, "A route");
+            }
+        }
+    }
     checkWebRouteComponent(type, sourceSpan, subject) {
         if (isInvalidType(type))
             return;
         if (!isWebComponentType(type)) {
-            if (type.kind !== "any")
-                this.typeError(`${subject} requires a component, received ${describeType(type)}`, sourceSpan);
+            // No `any` arm, unlike the `route(...)` twin above: both callers — the
+            // Router `fallback` attribute and `checkWebRouteRecords` — already filter
+            // `any` out before they call here, so a branch for it could never run.
+            this.typeError(`${subject} requires a component, received ${describeType(type)}`, sourceSpan);
             return;
         }
         const unsupported = [...type.requiredProperties].filter((name) => name !== "route");