@velarscript/web 0.27.3 → 0.28.0

package/dist/analyzer.js

@@ -1,5 +1,5 @@
 import { mechanicalEdits, mechanicalFix, 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 { Analyzer, anyType, boolType, describeType, expressionContainsDirectAwait, invalidType, isInvalidType, isAssignable, isReadonlyView, mutatingCollectionMethods, 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_BUILDER_SIGNATURES, LOOK_BUILDERS, LOOK_EXCLUDED_PROPERTIES, LOOK_HOOKS, LOOK_CSS_WIDE_KEYWORDS, LOOK_COLOR_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_SHARED_METRIC_KEYWORDS, LOOK_TARGETS, LOOK_TOKEN_NAME_RULE, LOOK_TOKEN_NO_FALLBACK_GUIDANCE, LOOK_UNIT_TYPES, LOOK_UNITLESS_PROPERTIES, isLookTokenName, isLookVarReference, lookOwnKeywords, lookShorthandOverlap, lookShorthandParts, lookTokenReference, lookVarReferenceName, nearestLookName, } from "./look.js";
@@ -72,6 +72,7 @@ const lookColor = { kind: "named", name: "Color" };
 const lookImage = { kind: "named", name: "Image" };
 const lookBorder = { kind: "named", name: "Border" };
 const lookShadow = { kind: "named", name: "Shadow" };
+const lookFilter = { kind: "named", name: "Filter" };
 const lookDuration = { kind: "named", name: "Duration" };
 const lookAngle = { kind: "named", name: "Angle" };
 const lookTrackList = { kind: "named", name: "TrackList" };
@@ -101,7 +102,7 @@ const lookPropertyType = (kind) => {
         case "shadow": return { kind: "union", members: [lookShadow, stringType] };
         case "track": return { kind: "union", members: [lookTrackList, stringType] };
         case "transition": return { kind: "union", members: [lookTransition, stringType] };
-        case "filter":
+        case "filter": return { kind: "union", members: [lookFilter, stringType] };
         case "keyword":
         case "text":
         case "transform":
@@ -428,6 +429,147 @@ function lookShorthandStringGuidance(name, value) {
     }
     return null;
 }
+const lookSimpleFilterBuilders = new Map([
+    ["blur", { builder: "blur", argument: "length" }],
+    ["brightness", { builder: "brightness", argument: "number" }],
+    ["contrast", { builder: "contrast", argument: "number" }],
+    ["grayscale", { builder: "grayscale", argument: "number" }],
+    ["hue-rotate", { builder: "hueRotate", argument: "angle" }],
+    ["invert", { builder: "invert", argument: "number" }],
+    ["opacity", { builder: "filterOpacity", argument: "number" }],
+    ["saturate", { builder: "saturate", argument: "number" }],
+    ["sepia", { builder: "sepia", argument: "number" }],
+]);
+function cssFunctionValues(text) {
+    const values = [];
+    let cursor = 0;
+    while (cursor < text.length) {
+        while (cursor < text.length && /\s/u.test(text[cursor]))
+            cursor += 1;
+        if (cursor === text.length)
+            break;
+        const matched = /^([a-z-]+)\(/iu.exec(text.slice(cursor));
+        if (!matched)
+            return null;
+        const name = matched[1].toLowerCase();
+        const start = cursor + matched[0].length;
+        let depth = 1;
+        let quote = null;
+        let escaped = false;
+        cursor = start;
+        while (cursor < text.length && depth > 0) {
+            const character = text[cursor];
+            if (escaped)
+                escaped = false;
+            else if (quote && character === "\\")
+                escaped = true;
+            else if (quote && character === quote)
+                quote = null;
+            else if (!quote && (character === "\"" || character === "'"))
+                quote = character;
+            else if (!quote && character === "(")
+                depth += 1;
+            else if (!quote && character === ")")
+                depth -= 1;
+            cursor += 1;
+        }
+        if (depth !== 0 || quote)
+            return null;
+        values.push({ name, arguments: text.slice(start, cursor - 1).trim() });
+        if (cursor < text.length && !/\s/u.test(text[cursor]))
+            return null;
+    }
+    return values.length > 0 ? values : null;
+}
+function topLevelWords(text) {
+    const words = [];
+    let start = 0;
+    let depth = 0;
+    for (let cursor = 0; cursor <= text.length; cursor += 1) {
+        const character = text[cursor];
+        if (character === "(")
+            depth += 1;
+        else if (character === ")") {
+            depth -= 1;
+            if (depth < 0)
+                return null;
+        }
+        if ((character === undefined || /\s/u.test(character)) && depth === 0) {
+            const word = text.slice(start, cursor).trim();
+            if (word)
+                words.push(word);
+            start = cursor + 1;
+        }
+    }
+    return depth === 0 ? words : null;
+}
+function filterLength(text) {
+    return /^(?:0|\+?(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem|em|vw|vh|vmin|vmax))$/u.test(text)
+        ? lookBuilderToken(text)
+        : null;
+}
+function filterNumericArgumentsHold(builder, values) {
+    const ranges = LOOK_BUILDER_NUMERIC_RANGES.get(builder);
+    return values.every((value, index) => {
+        const range = ranges?.[index];
+        const numeric = Number(value);
+        return Number.isFinite(numeric) && (!range || (numeric >= range[1] && numeric <= range[2]));
+    });
+}
+function filterColor(text) {
+    if (/^#[0-9a-f]{3,8}$/iu.test(text) || /^[a-z]+$/iu.test(text)) {
+        return { call: `color(${JSON.stringify(text)})`, builders: ["color"] };
+    }
+    const functional = /^(rgb|rgba)\((.*)\)$/iu.exec(text);
+    if (!functional)
+        return null;
+    const channels = functional[2].split(",").map((channel) => channel.trim());
+    const expected = functional[1].toLowerCase() === "rgb" ? 3 : 4;
+    if (channels.length !== expected || channels.some((channel) => !/^\+?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(channel)))
+        return null;
+    const builder = functional[1].toLowerCase();
+    if (!filterNumericArgumentsHold(builder, channels))
+        return null;
+    return { call: `${builder}(${channels.join(", ")})`, builders: [builder] };
+}
+function filterFunctionRewrite(value) {
+    const simple = lookSimpleFilterBuilders.get(value.name);
+    if (simple) {
+        const argument = simple.argument === "length"
+            ? filterLength(value.arguments)
+            : simple.argument === "angle"
+                ? (/^[+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:deg|turn)$/u.test(value.arguments) ? value.arguments : null)
+                : (/^\+?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(value.arguments)
+                    && filterNumericArgumentsHold(simple.builder, [value.arguments]) ? value.arguments : null);
+        return argument === null ? null : { call: `${simple.builder}(${argument})`, builders: [simple.builder] };
+    }
+    if (value.name !== "drop-shadow")
+        return null;
+    const words = topLevelWords(value.arguments);
+    if (!words || words.length !== 4)
+        return null;
+    const lengths = words.slice(0, 3).map(filterLength);
+    const color = filterColor(words[3]);
+    if (lengths.some((length) => length === null) || !color)
+        return null;
+    return {
+        call: `dropShadow(${lengths.join(", ")}, ${color.call})`,
+        builders: ["dropShadow", ...color.builders],
+    };
+}
+function lookFilterRewrite(text) {
+    const functions = cssFunctionValues(text.trim());
+    if (!functions)
+        return null;
+    const rewritten = functions.map(filterFunctionRewrite);
+    if (rewritten.some((item) => item === null))
+        return null;
+    const calls = rewritten;
+    const builders = [...new Set(calls.flatMap((item) => item.builders))];
+    if (calls.length === 1)
+        return { call: calls[0].call, builders };
+    return { call: `filters(${calls.map((item) => item.call).join(", ")})`, builders: ["filters", ...builders] };
+}
 /**
  * D104 rule 2 — what a refusal says when two entries in one scope write the
  * same CSS declaration. Written once because two positions raise it: a Look
@@ -1039,6 +1181,169 @@ function watchSubjectPath(expression) {
             return false;
     }
 }
+/**
+ * D114 W: a reactive place written as one comparable key, so "the write and the
+ * subject name the same place" is one string equality.
+ *
+ * It is deliberately narrower than `renderWatchSubject`, which reconstructs any
+ * expression for a message. A key has to *decide*, so only the parts that name
+ * the same place on two evaluations are allowed into one: names, fields, and an
+ * index that is either a literal or another such path. `items[next()]` renders
+ * perfectly well and answers a different element every call, so it has no key
+ * and the shapes below stay silent on it — which is the right answer for a
+ * refusal that has to be right every time.
+ */
+function reactiveWritePath(expression) {
+    switch (expression.kind) {
+        case "IdentifierExpression":
+            return expression.name;
+        case "MemberExpression": {
+            if (expression.optional)
+                return null;
+            const object = reactiveWritePath(expression.object);
+            return object === null ? null : `${object}.${expression.property}`;
+        }
+        case "IndexExpression": {
+            if (expression.optional)
+                return null;
+            const object = reactiveWritePath(expression.object);
+            if (object === null)
+                return null;
+            const index = expression.index.kind === "LiteralExpression"
+                ? (typeof expression.index.value === "string" ? JSON.stringify(expression.index.value) : expression.index.raw)
+                : reactiveWritePath(expression.index);
+            return index === null ? null : `${object}[${index}]`;
+        }
+        default:
+            return null;
+    }
+}
+/** The root name a reactive path starts from, which is the binding it resolves through. */
+function reactivePathRoot(expression) {
+    switch (expression.kind) {
+        case "IdentifierExpression":
+            return expression.name;
+        case "MemberExpression":
+        case "IndexExpression":
+            return reactivePathRoot(expression.object);
+        default:
+            return null;
+    }
+}
+function bindingPatternBinds(pattern, name) {
+    switch (pattern.kind) {
+        case "NameBindingPattern":
+            return pattern.name === name;
+        case "ObjectBindingPattern":
+            return pattern.rest?.name === name || pattern.entries.some((entry) => bindingPatternBinds(entry.pattern, name));
+        case "ListBindingPattern":
+            return pattern.rest?.name === name
+                || pattern.elements.some((element) => element !== null && bindingPatternBinds(element, name));
+        default:
+            return false;
+    }
+}
+/**
+ * D114 W: whether a body statement introduces its own binding of `name`. From
+ * that statement on, the spelling names something else, and a write through it
+ * is not a write of the watched place. The scan stops there rather than
+ * guessing which of the two a later line meant.
+ */
+function statementBindsName(statement, name) {
+    switch (statement.kind) {
+        case "VariableDeclaration":
+            return bindingPatternBinds(statement.pattern, name);
+        case "UsingDeclaration":
+        case "FunctionDeclaration":
+        case "ClassDeclaration":
+            return statement.name === name;
+        default:
+            return false;
+    }
+}
+/**
+ * D114 W: the call a body statement makes when the statement is nothing but
+ * that call. `detach` is included because it is how a synchronous watch body
+ * starts asynchronous work — the tour and four charter fences spell the reload
+ * that way — so a refusal that only saw the bare call would miss the shape it
+ * exists for. Everything else (a call inside an `if`, an argument, an assigned
+ * result) is not a plain top-level call and is not offered here.
+ */
+function topLevelCall(statement) {
+    const expression = statement.kind === "ExpressionStatement" ? statement.expression
+        : statement.kind === "DetachStatement" ? statement.expression
+            : null;
+    return expression !== null && expression.kind === "CallExpression" ? expression : null;
+}
+/**
+ * D114 W: whether one plain body statement writes the reactive place `path`.
+ * An assignment or a compound assignment to it is one; so is a call of a
+ * mutating collection method on it, because a watch on a collection fires on
+ * its deep mutation and `mutating` is the compiler's own roster of the calls
+ * that mutate.
+ */
+function reactiveWriteOf(statement, path, mutating) {
+    if (statement.kind === "AssignmentStatement")
+        return reactiveWritePath(statement.target) === path;
+    if (mutating === null)
+        return false;
+    const call = statement.kind === "ExpressionStatement" && statement.expression.kind === "CallExpression"
+        ? statement.expression
+        : null;
+    if (call === null || call.callee.kind !== "MemberExpression" || call.callee.optional)
+        return false;
+    return mutating.has(call.callee.property) && reactiveWritePath(call.callee.object) === path;
+}
+/**
+ * D114 W A2(b): whether an `action` or `async def` writes `path` at its own top
+ * level, unconditionally. One hop: what the callee itself calls is not
+ * followed. A parameter of the callee's own that is spelled like the path's
+ * root, or a binding it declares before the write, means the write is not of
+ * the watched place and the answer is no.
+ */
+function writerWritesPath(writer, path, root, mutating) {
+    if (writer.parameters.includes(root))
+        return false;
+    for (const statement of writer.body) {
+        if (statementBindsName(statement, root))
+            return false;
+        if (reactiveWriteOf(statement, path, mutating))
+            return true;
+    }
+    return false;
+}
+function collectReactiveWriters(program) {
+    const writers = new Map();
+    const claim = (name, declaration) => {
+        writers.set(name, writers.has(name) ? null : declaration);
+    };
+    const record = (statements) => {
+        for (const statement of statements) {
+            if (statement.kind === "FunctionDeclaration") {
+                claim(statement.name, statement.asynchronous
+                    ? { spelling: "async def", parameters: statement.parameters.map((parameter) => parameter.name), body: statement.body }
+                    : null);
+                record(statement.body);
+                continue;
+            }
+            if (!isWebStatement(statement))
+                continue;
+            if (statement.kind === "ExtensionStatement:web:action") {
+                claim(statement.name, {
+                    spelling: "action",
+                    parameters: statement.parameters.map((parameter) => parameter.name),
+                    body: statement.body,
+                });
+                record(statement.body);
+                continue;
+            }
+            if (statement.kind === "ExtensionStatement:web:component")
+                record(statement.body);
+        }
+    };
+    record(program.body);
+    return writers;
+}
 /** The escapes a text literal carries back into source (`scanStringEscape`). */
 const WATCH_SUBJECT_TEXT_ESCAPES = {
     "\\": "\\\\",
@@ -1640,6 +1945,15 @@ export class VelarWebAnalyzer extends Analyzer {
      * name resolves to even where a narrowed copy answers the lookup.
      */
     computedBindingSpans = new Set();
+    /**
+     * D114 W: the declaration spans of every `resource` in scope, kept the way
+     * `computedBindingSpans` keeps derived values — the question is asked of the
+     * binding a name resolves to, so a local shadow of a resource's name is not
+     * one.
+     */
+    resourceBindingSpans = new Set();
+    /** D114 W A2(b): this module's `action` and `async def` bodies by name. */
+    reactiveWriters = new Map();
     /** Local names bound to an imported `export computed`, from the Web interface. */
     importedComputedNames;
     /** The resolved spans of those imports, so a local shadow of the name is not one. */
@@ -1678,6 +1992,7 @@ export class VelarWebAnalyzer extends Analyzer {
         this.keyedListSources.clear();
         this.keyedListRebuilds.length = 0;
         this.moduleFunctions = collectModuleFunctions(program);
+        this.reactiveWriters = collectReactiveWriters(program);
         super.analyze(program);
         this.reportStaticJsxKeys();
         this.reportRetiredComputedFunction();
@@ -1714,6 +2029,11 @@ export class VelarWebAnalyzer extends Analyzer {
      * to `WEB_OWNED_TYPE_NAMES` extends this protection with it. The last time
      * this family was repaired by listing names instead of deriving them, the
      * list drifted; D57 rule 135 is the same repair on the Core roster.
+     *
+     * Core now says the same sentence about its own built-in type names —
+     * `builtinTypeNameDeclarationMessage` in packages/compiler/src/analyzer.ts,
+     * reported as VEL3007. The rosters differ; the wording is meant to read
+     * alike, so a change to either sentence belongs in both.
      */
     rejectWebOwnedTypeNames(program) {
         const reject = (name, errorSpan, noun) => {
@@ -1850,7 +2170,9 @@ 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, statement.currentName, statement.previousName);
+                    if (this.rejectFrozenWatchSubject(statement.expression, watched, statement.currentName, statement.previousName)) {
+                        this.rejectWatchCycle(statement.expression, watched, statement.body);
+                    }
                     this.enterScope();
                     if (statement.currentName)
                         this.declareBinding(statement.currentName, false, watched, statement.span);
@@ -1985,6 +2307,15 @@ export class VelarWebAnalyzer extends Analyzer {
         const binding = this.lookup(name);
         return binding !== null && this.computedBindingSpans.has(spanIdentity(binding.span));
     }
+    /**
+     * True when `name` resolves to a `resource` declaration. Asked of the binding
+     * rather than of the spelling, for the reason `isComputedBinding` is: a local
+     * `state` may shadow a resource's name, and the shadow is not a resource.
+     */
+    isResourceBinding(name) {
+        const binding = this.lookup(name);
+        return binding !== null && this.resourceBindingSpans.has(spanIdentity(binding.span));
+    }
     isImportedComputedBinding(name) {
         const binding = this.lookup(name);
         return binding !== null && this.importedComputedSpans.has(spanIdentity(binding.span));
@@ -2273,14 +2604,14 @@ export class VelarWebAnalyzer extends Analyzer {
         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; declare the derived value — 'computed name = ${name}()' — then 'watch name:'`, expression.span));
-            return;
+            return false;
         }
         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;
+            return false;
         }
         if (watchSubjectPath(expression))
-            return;
+            return true;
         // 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
@@ -2288,7 +2619,7 @@ export class VelarWebAnalyzer extends Analyzer {
         // 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;
+            return false;
         const derived = currentName ?? "value";
         const watchLine = currentName === null
             ? `watch ${derived}:`
@@ -2297,6 +2628,82 @@ export class VelarWebAnalyzer extends Analyzer {
         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));
+        return false;
+    }
+    /**
+     * D114 W: the three watch shapes a compile can prove re-trigger the watch
+     * itself. D90 R21 removed the analysis of *who writes what* across calls, and
+     * nothing here brings it back: two watches writing one state are still an
+     * ordinary program, a write reached through an ordinary helper is still
+     * silent, and a write under `if`, `match`, a loop, `try`, a nested `def` or an
+     * arrow is still the author's converging correction to make.
+     *
+     * What is refused is only what is decided at the top of the body, with no
+     * condition to end it:
+     *
+     *  - **B** the body writes the watched place itself (`watch count: count =
+     *    count + 1`), assignment, compound assignment, or a mutating collection
+     *    call on the watched collection;
+     *  - **A2(a)** the subject is a `resource` field and the body reloads that
+     *    same resource — a reload writes exactly those fields, so every completed
+     *    load re-triggers the watch;
+     *  - **A2(b)** the body starts an `action` or an `async def` of this module
+     *    whose own top level writes the watched place. One hop, one module, no
+     *    condition on either end; anything further is the runtime budget's.
+     *
+     * One diagnostic per watch, at the first statement that earns it. A watch with
+     * two of these has two mistakes, and the second is read after the first is
+     * fixed, exactly as two errors on one line are.
+     */
+    rejectWatchCycle(subject, watched, body) {
+        const root = reactivePathRoot(subject);
+        if (root === null)
+            return;
+        const path = reactiveWritePath(subject);
+        const collection = nonOptional(this.expandAliases(watched));
+        const mutating = collection.kind === "list" || collection.kind === "map"
+            || collection.kind === "set" || collection.kind === "record"
+            ? mutatingCollectionMethods(collection.kind)
+            : null;
+        // A resource publishes `value`, `loading`, `ready` and `error`, and
+        // `reload` is the one member of the five that is not one of them. Asking it
+        // that way keeps `analyzeResourceDeclaration`'s field map the only roster:
+        // a field added there is a field this recognises, with nothing to update.
+        const resource = subject.kind === "MemberExpression" && !subject.optional
+            && subject.object.kind === "IdentifierExpression" && subject.property !== "reload"
+            && this.isResourceBinding(subject.object.name)
+            ? subject.object.name
+            : null;
+        for (const statement of body) {
+            if (statementBindsName(statement, root))
+                return;
+            if (path !== null && reactiveWriteOf(statement, path, mutating)) {
+                // A derived value is offered only where it could be declared. A field
+                // or an element has no `computed` spelling of its own, so naming one
+                // would hand the author a line that does not compile.
+                const derived = subject.kind === "IdentifierExpression"
+                    ? `declare 'computed ${path} = ...' instead`
+                    : "write this value where it is produced instead";
+                this.diagnostics.push(diagnostic("VEL5077", `This watch writes its own subject '${path}' at the top of its body, so every run re-triggers it and the runtime stops the loop after 100 rounds; write the condition that ends it, or watch the input this value follows and ${derived}`, statement.span));
+                return;
+            }
+            const call = topLevelCall(statement);
+            if (call === null)
+                continue;
+            if (resource !== null && call.callee.kind === "MemberExpression" && !call.callee.optional
+                && call.callee.property === "reload" && call.callee.object.kind === "IdentifierExpression"
+                && call.callee.object.name === resource) {
+                this.diagnostics.push(diagnostic("VEL5078", `This watch reloads '${resource}' — the resource it watches — so every completed load re-triggers it; watch the input the load reads instead, as 'watch userId:' with 'detach ${resource}.reload()' in its body`, call.span));
+                return;
+            }
+            if (path === null || call.callee.kind !== "IdentifierExpression")
+                continue;
+            const writer = this.reactiveWriters.get(call.callee.name) ?? null;
+            if (writer === null || !writerWritesPath(writer, path, root, mutating))
+                continue;
+            this.diagnostics.push(diagnostic("VEL5079", `This watch starts '${call.callee.name}', which writes '${path}' — the reactive value this watch is on — so each completed run re-triggers the watch; make the write conditional, or watch the input '${call.callee.name}' reads`, call.span));
+            return;
+        }
     }
     /**
      * D89 A4: records `list = list.map(item => {…})`, React's immutable update,
@@ -2695,6 +3102,7 @@ export class VelarWebAnalyzer extends Analyzer {
             ["reload", { kind: "function", parameters: [], requiredParameters: 0, result: { kind: "promise", value: nullType } }],
         ]);
         this.declareBinding(statement.name, false, { kind: "object", fields }, statement.span);
+        this.resourceBindingSpans.add(spanIdentity(statement.span));
     }
     actionType(statement) {
         const declaredResult = this.resolvedAsyncResult(this.inferredFunctionResult(statement));
@@ -2783,7 +3191,9 @@ export class VelarWebAnalyzer extends Analyzer {
                 this.flowFrameDepth += 1;
                 this.synchronousReactiveDepth += 1;
                 const watched = this.inferExpression(item.expression);
-                this.rejectFrozenWatchSubject(item.expression, watched, item.currentName, item.previousName);
+                if (this.rejectFrozenWatchSubject(item.expression, watched, item.currentName, item.previousName)) {
+                    this.rejectWatchCycle(item.expression, watched, item.body);
+                }
                 this.enterScope();
                 if (item.currentName)
                     this.declareBinding(item.currentName, false, watched, item.span);
@@ -3090,10 +3500,15 @@ export class VelarWebAnalyzer extends Analyzer {
             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));
             }
+            const nonNegativeBlur = (builder === "blur" && position === 0) || (builder === "dropShadow" && position === 2);
+            if (nonNegativeBlur && folded?.kind === "unit" && folded.value < 0) {
+                this.diagnostics.push(diagnostic("VEL5042", `${builder} blur cannot be negative`, argument.span));
+            }
             // LOK-D3, builder half: a unitless number in a length position is dead
             // CSS exactly as it is on a property. Zero is the one unitless length.
             if (LOOK_LENGTH_BUILDERS.has(builder) && literal !== null && literal !== 0
-                && !(builder === "border" && position !== 0) && !(builder === "shadow" && position === 5)) {
+                && !(builder === "border" && position !== 0) && !(builder === "shadow" && position === 5)
+                && !(builder === "dropShadow" && position === 3)) {
                 this.diagnostics.push(diagnostic("VEL5042", `${builder} composes CSS lengths, so ${literal} requires a unit; write a unit value such as ${literal}px or ${literal}rem (only 0 is unitless)`, argument.span));
             }
             if (builder === "border" && position === 2 && argument.kind === "LiteralExpression" && typeof argument.value === "string"
@@ -3118,6 +3533,9 @@ export class VelarWebAnalyzer extends Analyzer {
         if (builder === "tracks" && expression.arguments.length > 1024) {
             this.diagnostics.push(diagnostic("VEL5042", "tracks cannot contain more than 1024 values", expression.span));
         }
+        if (builder === "filters" && expression.arguments.length > 64) {
+            this.diagnostics.push(diagnostic("VEL5042", "filters cannot compose more than 64 values", expression.span));
+        }
     }
     /**
      * D103 rules 1 and 5 — what a checked token reference has to be at the site
@@ -3196,15 +3614,7 @@ export class VelarWebAnalyzer extends Analyzer {
     }
     /** The one edit that gives this module a `token` import, in the shape D103's migration needs. */
     lookTokenImportEdit() {
-        const site = this.lookImport ?? { declaration: null, insertAt: 0, leadingBlankLine: true };
-        const specifiers = [...(site.declaration?.specifiers ?? []), { imported: "token", local: "token" }];
-        const line = `import {${[...specifiers]
-            .sort((left, right) => byCodeUnit(left.imported, right.imported))
-            .map((specifier) => specifier.imported === specifier.local ? specifier.imported : `${specifier.imported} as ${specifier.local}`)
-            .join(", ")}} from "velar/look"`;
-        if (site.declaration)
-            return { span: site.declaration.span, text: line };
-        return { span: { start: site.insertAt, end: site.insertAt }, text: site.leadingBlankLine ? `${line}\n\n` : `\n${line}` };
+        return this.lookBuilderImportEdit(["token"]);
     }
     checkAnimateBuilderCall(expression) {
         const argument = (name, position) => {
@@ -3401,6 +3811,7 @@ export class VelarWebAnalyzer extends Analyzer {
             return false;
         }
         const site = { property: name, entrySpan, directive };
+        this.adviseLookFilterSpelling(name, value, site);
         this.adviseLookTokenSpelling(name, value, site);
         if (!this.validateLookStringVocabulary(name, value, undefined, site))
             return false;
@@ -3411,6 +3822,63 @@ export class VelarWebAnalyzer extends Analyzer {
         return value.kind === "CallExpression" && value.callee.kind === "IdentifierExpression"
             && this.lookBuilderNames.get(value.callee.name) === "token";
     }
+    /**
+     * A complete CSS filter function whose arguments fit the checked Look
+     * builders has one equivalent source spelling. The parser deliberately
+     * stops at the first function or argument grammar it cannot prove, leaving
+     * arbitrary CSS and externally defined filter functions as ordinary text.
+     */
+    adviseLookFilterSpelling(name, value, site) {
+        if (LOOK_PROPERTY_VALUE_KINDS.get(name) !== "filter")
+            return;
+        if (value.kind !== "LiteralExpression" || typeof value.value !== "string")
+            return;
+        const rewrite = lookFilterRewrite(value.value);
+        if (!rewrite)
+            return;
+        const localized = this.localizeLookBuilderCall(rewrite);
+        this.advise("A16", `Look property '${name}' accepts CSS filter text, but this complete filter list has the checked equivalent ${localized.call}`, value.span, mechanicalEdits(this.lookBuilderRewrite(value, localized.call, site, localized.missingImports), `Use ${localized.call}`));
+    }
+    /** Uses an existing alias when present and lists only builders the fix must import. */
+    localizeLookBuilderCall(rewrite) {
+        let call = rewrite.call;
+        const missingImports = [];
+        for (const builder of rewrite.builders) {
+            const imported = [...this.lookBuilderNames].find(([, candidate]) => candidate === builder);
+            const local = imported?.[0] ?? builder;
+            if (!imported)
+                missingImports.push(builder);
+            call = call.replace(new RegExp(`\\b${builder}(?=\\()`, "gu"), local);
+        }
+        return { call, missingImports };
+    }
+    /** Rewrites either a Look entry expression or the synthetic value of a JSX Look directive. */
+    lookBuilderRewrite(value, call, site, missingImports) {
+        const wholeAttribute = site.directive !== null
+            && value.span.start === site.entrySpan.start && value.span.end === site.entrySpan.end;
+        const edit = {
+            span: value.span,
+            text: wholeAttribute ? `${site.directive}:${site.property}={${call}}` : call,
+        };
+        return missingImports.length === 0 ? [edit] : [this.lookBuilderImportEdit(missingImports), edit];
+    }
+    /** Adds missing builders to the module's one velar/look import in stable order. */
+    lookBuilderImportEdit(builders) {
+        const site = this.lookImport ?? { declaration: null, insertAt: 0, leadingBlankLine: true };
+        const existing = site.declaration?.specifiers ?? [];
+        const imported = new Set(existing.map((specifier) => specifier.imported));
+        const specifiers = [
+            ...existing,
+            ...builders.filter((builder) => !imported.has(builder)).map((builder) => ({ imported: builder, local: builder })),
+        ];
+        const line = `import {${specifiers
+            .sort((left, right) => byCodeUnit(left.imported, right.imported))
+            .map((specifier) => specifier.imported === specifier.local ? specifier.imported : `${specifier.imported} as ${specifier.local}`)
+            .join(", ")}} from "velar/look"`;
+        if (site.declaration)
+            return { span: site.declaration.span, text: line };
+        return { span: { start: site.insertAt, end: site.insertAt }, text: site.leadingBlankLine ? `${line}\n\n` : `\n${line}` };
+    }
     /** How this module spells a call to the token builder, honouring an aliased import. */
     lookTokenCallText(referenced) {
         const local = [...this.lookBuilderNames].find(([, builder]) => builder === "token")?.[0] ?? null;