unplugin-react-fine-grained-signals 0.1.0 → 0.2.0

package/dist/{unplugin-B2_q8KNi.js → unplugin-CPDTNSYq.js}

@@ -4,8 +4,8 @@ import { declare } from "@babel/helper-plugin-utils";
 import { transformSync } from "@babel/core";
 import * as t from "@babel/types";
 //#region src/internal/transform.ts
-const useSignalsComment = /(^|\s)@useSignals(\s|$)/;
-const noUseSignalsComment = /(^|\s)@noUseSignals(\s|$)/;
+const useSignalTrackingComment = /(^|\s)@signalTracking(\s|$)/;
+const noSignalTrackingComment = /(^|\s)@noSignalTracking(\s|$)/;
 const transformedMetadataKey = "reactFineGrainedSignalsTransformed";
 const noMemoDirective = "use no memo";
 const memoizationDirectives = /* @__PURE__ */ new Set([
@@ -46,7 +46,7 @@ function isReactSource(source, reactImportSource) {
 *
 * Every import-recognition predicate in this file -- React's `memo`/
 * `forwardRef` wrappers, a default-or-namespace React import, a named or
-* namespace `useSignals` import -- reduces to "does this resolved binding
+* namespace `useSignalTracking` import -- reduces to "does this resolved binding
 * have the right specifier kind and source", so they all build on this one
 * binding walk instead of each repeating
 * `getBinding` -> specifier-kind -> `importKind` -> parent-declaration.
@@ -88,7 +88,7 @@ function isKnownComponentWrapper(path, reactImportSource) {
 	return object.isIdentifier() && isReactDefaultOrNamespaceImport(path, object.node.name, reactImportSource);
 }
 /**
-* The static name of an object property's or class field's key. A computed key
+* The static name of an object property's key. A computed key
 * is only readable when it is a string literal (`{ ["Home"]: ... }`), exactly as
 * `getReadPropertyName` reads `items["map"]`; anything else is decided at
 * runtime and stays unnamed, which leaves the function untransformed.
@@ -100,15 +100,39 @@ function getPropertyKeyName(node) {
 	return t.isStringLiteral(key) ? key.value : void 0;
 }
 /**
+* The identity an object-literal method takes from its key -- the shorthand
+* twin of a keyed `ObjectProperty`:
+*
+* ```js
+* export const ns = { Home() { return <p>{count.value}</p>; } };   // this
+* export const ns = { Home: () => <p>{count.value}</p> };          // == this
+* ```
+*
+* The two spellings put the same function at the same `ns.Home` slot, and the
+* rest of the module reaches both through `<ns.Home />`, so they have to resolve
+* to the same identity -- while only the property form did, the method form was
+* passed over in silence. Unlike a property, the method *is* the function node,
+* so there is no enclosing slot to climb to: its own key is read directly.
+*
+* Only a plain `kind: "method"` qualifies. A getter or setter is an accessor
+* React never calls as a component, and an async or generator method can never
+* carry a boundary (`decideTransform` refuses them anyway), so all four resolve
+* to no identity at all rather than to a name that could only ever be rejected
+* later or, under an annotation, turned into a build error.
+*/
+function getObjectMethodIdentityName(node) {
+	if (node.kind !== "method" || node.async || node.generator) return void 0;
+	return getPropertyKeyName(node);
+}
+/**
 * The component/hook name a function held in a *keyed slot* takes from its key:
 *
 * ```js
 * Card.Header = () => <h1>{count.value}</h1>;          // a compound component
 * export const ns = { Home: () => <p>{count.value}</p> };  // an object namespace
-* class Holder { Row = () => <li>{count.value}</li>; }     // a class field
 * ```
 *
-* All three are ordinary ways to hold a component that no *binding* names, so
+* Both are ordinary ways to hold a component that no *binding* names, so
 * without this they resolved to no identity at all and `auto` mode passed over
 * them in silence. The key is the name the rest of the module reaches them by
 * (`<ns.Home />`, `<Card.Header />`), which is precisely what the PascalCase /
@@ -135,8 +159,10 @@ function getPropertyKeyName(node) {
 * disqualifies every other keyed slot (`isKeyedRenderCallback`) cannot see those
 * uses at all -- there would be no way to take the boundary back once given. So
 * the ambiguous case resolves the way this file always resolves one: name
-* nothing, transform nothing. Class components stay a manual `useSignals()` /
-* `@useSignals` opt-in.
+* nothing, transform nothing. Class fields (`Row = () => ...`) are excluded the
+* same way. Such a renderer is left to its author: one rendered as an element
+* (`<this.Row />`) can call `useSignalTracking()` itself; one called as a
+* function or passed per item cannot hold a hook at all.
 */
 function getKeyedIdentityName(parent) {
 	if (parent.isAssignmentExpression()) {
@@ -144,7 +170,7 @@ function getKeyedIdentityName(parent) {
 		if (!t.isMemberExpression(left)) return void 0;
 		return getStaticMemberPath(left)?.keys.at(-1);
 	}
-	if (parent.isObjectProperty() || parent.isClassProperty()) return getPropertyKeyName(parent.node);
+	if (parent.isObjectProperty()) return getPropertyKeyName(parent.node);
 }
 /**
 * A member expression read as a root binding plus the chain of static keys
@@ -157,22 +183,34 @@ function getKeyedIdentityName(parent) {
 * match a use site against the definition site: a one-level walk saw
 * `const a = { b: { Row } }` handed to `items.map(a.b.Row)` as an unrelated
 * reference and let the per-item callback keep a hook boundary of its own.
+*
+* An optional link reads the same key: `ns?.group.Home`, `ns.group?.Home` and
+* `ns.group.Home` all name one slot, so each link may be either member form.
 */
 function getStaticMemberPath(node) {
+	const chain = getStaticMemberChain(node);
+	return chain !== void 0 && t.isIdentifier(chain.root) ? {
+		root: chain.root.name,
+		keys: chain.keys
+	} : void 0;
+}
+/** `getStaticMemberPath` without the root restriction: the innermost object node and the static keys. */
+function getStaticMemberChain(node) {
 	const keys = [];
 	let current = node;
-	while (t.isMemberExpression(current)) {
+	while (t.isMemberExpression(current) || t.isOptionalMemberExpression(current)) {
 		const key = getReadPropertyName(current);
 		if (key === void 0) return void 0;
 		keys.unshift(key);
 		current = current.object;
 	}
-	return t.isIdentifier(current) ? {
-		root: current.name,
+	return {
+		root: current,
 		keys
-	} : void 0;
+	};
 }
 function getBindingIdentityName(path, reactImportSource, climbedParent = climbComponentWrappers(path, reactImportSource).parentPath) {
+	if (path.isObjectMethod()) return getObjectMethodIdentityName(path.node);
 	const parent = climbedParent;
 	if (parent !== null) {
 		if (parent.isVariableDeclarator() && t.isIdentifier(parent.node.id)) return parent.node.id.name;
@@ -254,7 +292,7 @@ function rendersJsx(path) {
 * the returned component's JSX and `.value` reads credited to the factory's own
 * body. `auto` mode injected the boundary into the factory, `all` mode did so
 * with no `.value` read needed at all, and since `WithCount(Foo)` is normally
-* called at module scope the injected `useSignals()` ran with no React
+* called at module scope the injected `useSignalTracking()` ran with no React
 * dispatcher and threw at import time -- the unrecoverable direction this file
 * steers away from everywhere else.
 */
@@ -291,7 +329,7 @@ function getSimpleParameterName(param) {
 * The inner function is the real component in both, but it has no name of its
 * own: its only identity comes from being what `withCount` returns. Left
 * unresolved it is not a component to `auto` mode and not an annotatable
-* function to `@useSignals`, so a signal write silently stops re-rendering it
+* function to `@signalTracking`, so a signal write silently stops re-rendering it
 * -- no error, just a stale UI.
 *
 * Three things have to hold, tested cheapest-first:
@@ -326,8 +364,8 @@ function getSimpleParameterName(param) {
 * is always a real module binding. A factory that returns a factory
 * (`(a) => (b) => (props) => <p />`) deliberately leaves the innermost
 * function unresolved rather than inventing a name for a middle function that
-* has none -- an `@useSignals` annotation there still warns
-* (`warnUnnamedUseSignalsAnnotation`) instead of silently doing nothing.
+* has none -- an `@signalTracking` annotation there still warns
+* (`warnUnnamedSignalTrackingAnnotation`) instead of silently doing nothing.
 */
 function getIdentityFactory(path, reactImportSource, climbedParent) {
 	if (climbedParent === null) return void 0;
@@ -408,24 +446,32 @@ function getDefaultExportIdentity(climbedParent, filename) {
 		name
 	};
 }
-function isVerifiedUseSignalsSource(source, importSource) {
-	return source === importSource || source === `${importSource}/runtime`;
+function isVerifiedSignalTrackingSource(source, importSource) {
+	return source === importSource;
+}
+function isNamedUseManagedSignalsImport(functionPath, name, runtimeSource) {
+	const resolved = resolveImportedBinding(functionPath, name);
+	return resolved !== void 0 && resolved.specifier.isImportSpecifier() && resolved.source === runtimeSource && t.isIdentifier(resolved.specifier.node.imported, { name: "useManagedSignals" });
+}
+function isNamespaceUseManagedSignalsImport(functionPath, name, runtimeSource) {
+	const resolved = resolveImportedBinding(functionPath, name);
+	return resolved !== void 0 && resolved.specifier.isImportNamespaceSpecifier() && resolved.source === runtimeSource;
 }
-function isNamedUseSignalsImport(functionPath, name, importSource) {
+function isNamedSignalTrackingImport(functionPath, name, importSource) {
 	const resolved = resolveImportedBinding(functionPath, name);
 	if (resolved === void 0 || !resolved.specifier.isImportSpecifier()) return false;
-	return t.isIdentifier(resolved.specifier.node.imported, { name: "useSignals" }) && (importSource === void 0 || isVerifiedUseSignalsSource(resolved.source, importSource));
+	return t.isIdentifier(resolved.specifier.node.imported, { name: "useSignalTracking" }) && (importSource === void 0 || isVerifiedSignalTrackingSource(resolved.source, importSource));
 }
-function isNamespaceUseSignalsImport(functionPath, name, importSource) {
+function isNamespaceSignalTrackingImport(functionPath, name, importSource) {
 	const resolved = resolveImportedBinding(functionPath, name);
-	return resolved !== void 0 && resolved.specifier.isImportNamespaceSpecifier() && (importSource === void 0 || isVerifiedUseSignalsSource(resolved.source, importSource));
+	return resolved !== void 0 && resolved.specifier.isImportNamespaceSpecifier() && (importSource === void 0 || isVerifiedSignalTrackingSource(resolved.source, importSource));
 }
-function isUseSignalsCallee(functionPath, callee, importSource, allowBarrel = true) {
-	if (callee.isIdentifier()) return isNamedUseSignalsImport(functionPath, callee.node.name, allowBarrel ? void 0 : importSource);
+function isSignalTrackingCallee(functionPath, callee, importSource, allowBarrel = true) {
+	if (callee.isIdentifier()) return isNamedSignalTrackingImport(functionPath, callee.node.name, allowBarrel ? void 0 : importSource);
 	if (!callee.isMemberExpression()) return false;
 	const object = callee.get("object");
 	if (!object.isIdentifier()) return false;
-	return getReadPropertyName(callee.node) === "useSignals" && isNamespaceUseSignalsImport(functionPath, object.node.name, allowBarrel ? void 0 : importSource);
+	return getReadPropertyName(callee.node) === "useSignalTracking" && isNamespaceSignalTrackingImport(functionPath, object.node.name, allowBarrel ? void 0 : importSource);
 }
 const renderCallbackMethods = /* @__PURE__ */ new Set([
 	"map",
@@ -527,9 +573,24 @@ function isRenderCallbackCallee(callee) {
 * reach the former from the latter.
 */
 function isRenderCallbackInvocation(call, callback) {
+	const argument = getRenderCallbackArgument(call);
+	return argument !== void 0 && argument === callback;
+}
+/**
+* The argument slot of `call` that a known iteration method invokes once per
+* item: argument 0 of `items.map` / `flatMap` / `forEach`, and argument 1 --
+* the `mapFn` -- of `Array.from(arrayLike, mapFn)`, which builds an element per
+* item exactly as `map` does (`Array.from({ length: 5 }, Star)`). Only a
+* plain `Array` identifier counts as the callee's object; a shadowing local
+* `Array` with its own `from` is not worth a scope lookup here, and matching it
+* errs toward the crash-safe side (no hook in the callback).
+*/
+function getRenderCallbackArgument(call) {
 	const parts = getCallParts(call);
-	if (parts === void 0 || !isRenderCallbackCallee(parts.callee)) return false;
-	return parts.arguments[0] === callback;
+	if (parts === void 0) return void 0;
+	if (isRenderCallbackCallee(parts.callee)) return parts.arguments[0];
+	const callee = unwrapTransparent(parts.callee);
+	if (t.isMemberExpression(callee) && t.isIdentifier(callee.object, { name: "Array" }) && getReadPropertyName(callee) === "from") return parts.arguments[1];
 }
 /**
 * The name other statements can reach this function's own binding by. The
@@ -567,6 +628,10 @@ function getOwnBindingName(path) {
 *
 * A class field is deliberately absent -- it is reached through an instance
 * (`new Holder().Row`), which no binding walk can follow.
+*
+* An object *method* (`{ Row() {...} }`) is passed in as its own `parent`: it is
+* the function and the slot at once, and it sits in its object literal exactly
+* where the equivalent `{ Row: ... }` property would, so the same climb applies.
 */
 function getKeyedAccessPath(parent) {
 	if (parent.isAssignmentExpression()) {
@@ -578,7 +643,7 @@ function getKeyedAccessPath(parent) {
 			...path
 		};
 	}
-	if (!parent.isObjectProperty()) return void 0;
+	if (!parent.isObjectProperty() && !parent.isObjectMethod()) return void 0;
 	const key = getPropertyKeyName(parent.node);
 	if (key === void 0) return void 0;
 	const keys = [key];
@@ -625,20 +690,293 @@ function getKeyedAccessPath(parent) {
 * genuine compound component keeps its boundary.
 */
 function isKeyedRenderCallback(parent) {
-	const access = getKeyedAccessPath(parent);
-	if (access === void 0) return false;
+	return getKeyedSafetyUses(parent).some((slot) => slot.parentPath !== null && isRenderCallbackInvocation(slot.parentPath.node, slot.node));
+}
+/**
+* Every place the module reads the exact keyed slot `access` describes, as the
+* path of the syntactic slot that read occupies (past transparent TypeScript
+* wrappers, so `ns.Row!` hands back the wrapper that actually sits in an
+* argument list or callee position).
+*
+* The walk goes through the *root* binding, then follows the same chain of keys
+* back down from each reference; a reference that turns off the chain anywhere
+* (`ns.Other`, `ns` passed whole -- or `ns[k]` unless `includeDynamic` is set)
+* is not a use of this slot. Both
+* by-key exclusions -- the render-callback one above and the plain-call one in
+* `isPlainCalledComponent` -- ask their question of this list (joined with the
+* `this` uses in `getKeyedSafetyUses`), so they cannot disagree about which
+* reads count as reaching the slot.
+*/
+function getKeyedSlotUses(access, includeDynamic = false) {
 	const binding = access.origin.scope.getBinding(access.root);
-	if (binding === void 0) return false;
-	return binding.referencePaths.some((rootPath) => {
-		let current = rootPath;
-		for (const key of access.keys) {
-			const member = current.parentPath;
-			if (member === null || !member.isMemberExpression() || member.node.object !== current.node || getReadPropertyName(member.node) !== key) return false;
-			current = member;
+	if (binding === void 0) return [];
+	const uses = [];
+	for (const rootPath of binding.referencePaths) followKeyedChain(rootPath, access.keys, includeDynamic, uses);
+	return uses;
+}
+/**
+* Follows `keys` down from `start` -- a reference to the root binding, or a
+* `this` that stands for the object holding the slot -- and records the use it
+* reaches in `uses`. A chain that turns off the path records nothing.
+*/
+function followKeyedChain(start, keys, includeDynamic, uses) {
+	let current = start;
+	for (const [index, key] of keys.entries()) {
+		const member = current.parentPath;
+		if (member === null || !matchesKeyedLink(member, current, key, includeDynamic)) {
+			if (index === keys.length - 1) uses.push(...getDestructuredSlotUses(current, key));
+			return;
+		}
+		current = member;
+	}
+	uses.push(climbTransparentWrappers(current));
+}
+/**
+* Every place a sibling reaches the object-literal slot `holder` through
+* `this`:
+*
+* ```jsx
+* const renderers = {
+*   Leaf(i) { return <li>{suffix.value}</li>; },
+*   Tree(count) { return <ul>{Array.from({ length: count }, (_, i) => this.Leaf(i))}</ul>; },
+* };
+* ```
+*
+* `this.Leaf(i)` runs `Leaf` once per item inside whatever render called
+* `Tree`, exactly as `renderers.Leaf(i)` would, but `this` is not a binding,
+* so the root-reference walk in `getKeyedSlotUses` never sees it -- and a
+* boundary in `Leaf` was then a variable number of hooks in the caller.
+*
+* `this` is only followed where its identity is syntactic: inside a function
+* that is itself a non-arrow member of the object literal (a method, accessor,
+* or `function` property value), and inside arrows nested in it, which inherit
+* that `this`. A nested `function` or class rebinds `this` and is skipped. Each
+* enclosing object literal is its own level, so `this.Leaf` in a method of the
+* object holding `Leaf` reaches it, `this.group.Leaf` in a method of the outer
+* object reaches it through `group`, and a same-named slot in another object
+* literal is never touched. A computed `this[key]` reaches every slot at its
+* depth, like `renderers[key]` does.
+*
+* Only the object literals around this one slot are walked, never the
+* program, so the cost stays with the object that holds the slot.
+*/
+function getThisSlotUses(holder) {
+	if (!holder.isObjectProperty() && !holder.isObjectMethod()) return [];
+	const key = getPropertyKeyName(holder.node);
+	if (key === void 0) return [];
+	const keys = [key];
+	const uses = [];
+	for (let container = holder.parentPath; container?.isObjectExpression();) {
+		for (const reference of getObjectThisReferences(container)) followKeyedChain(reference, keys, true, uses);
+		const outer = container.parentPath;
+		if (outer === null || !outer.isObjectProperty() || outer.node.value !== container.node) break;
+		const outerKey = getPropertyKeyName(outer.node);
+		if (outerKey === void 0) break;
+		keys.unshift(outerKey);
+		container = outer.parentPath;
+	}
+	return uses;
+}
+/**
+* `getObjectThisReferences` results, per object literal. One function's
+* decision asks for the same object's references many times over -- every
+* candidacy check of every nested function lands here -- so they are collected
+* once. Keyed by node, so nothing outlives the file being transformed.
+*
+* A rewrite moves the rewritten function's statements under new parents, and a
+* cached path inside it would then describe a tree that no longer exists, so
+* `invalidateThisReferences` drops every entry whose references could lie
+* inside that function: the object literals within it, and -- only when it
+* contains a `this` at all -- the object literals around it. Every other entry
+* stays valid, which matters in a module where most object members are
+* transformed one after another and only a few of them use `this`.
+*/
+const thisReferenceCache = /* @__PURE__ */ new WeakMap();
+function invalidateThisReferences(rewritten) {
+	let containsThis = false;
+	rewritten.traverse({
+		ObjectExpression(object) {
+			thisReferenceCache.delete(object.node);
+		},
+		ThisExpression() {
+			containsThis = true;
 		}
-		const slot = climbTransparentWrappers(current);
-		return slot.parentPath !== null && isRenderCallbackInvocation(slot.parentPath.node, slot.node);
 	});
+	if (!containsThis) return;
+	for (let parent = rewritten.parentPath; parent !== null; parent = parent.parentPath) if (parent.isObjectExpression()) thisReferenceCache.delete(parent.node);
+}
+/** The `this` expressions that stand for `object` itself, inside its own non-arrow members. */
+function getObjectThisReferences(object) {
+	const cached = thisReferenceCache.get(object.node);
+	if (cached !== void 0) return cached;
+	const references = [];
+	thisReferenceCache.set(object.node, references);
+	for (const property of object.get("properties")) {
+		let member;
+		if (property.isObjectMethod()) member = property;
+		else if (property.isObjectProperty()) {
+			const value = unwrapTransparentPath(property.get("value"));
+			if (value.isFunctionExpression()) member = value;
+		}
+		member?.traverse({
+			Function(nested) {
+				if (!nested.isArrowFunctionExpression()) nested.skip();
+			},
+			Class(nested) {
+				nested.skip();
+			},
+			ThisExpression(reference) {
+				references.push(reference);
+			}
+		});
+	}
+	return references;
+}
+/**
+* Every use that can run the keyed slot `holder` inline: reads through its root
+* binding, computed keys included (`getKeyedSlotUses`), and reads through
+* `this` from a sibling member of the same object literal (`getThisSlotUses`).
+* Both safety exclusions -- per-item callback and plain call -- ask this list.
+*/
+function getKeyedSafetyUses(holder, access = getKeyedAccessPath(holder)) {
+	const uses = access === void 0 ? [] : getKeyedSlotUses(access, true);
+	uses.push(...getThisSlotUses(holder));
+	return uses;
+}
+/**
+* Does `member` read `key` off `object` -- one link of a keyed-slot path?
+*
+* A static link has to name the key exactly. With `includeDynamic`, a computed
+* link whose key is decided at runtime (`renderers[node.type]`,
+* `renderers?.[key]`) matches too, because nothing rules out that it names this
+* slot. That is what keeps an object-literal component off a boundary of its
+* own when the module dispatches to it dynamically:
+*
+* ```jsx
+* const renderers = { User(node) { return <li>{suffix.value}</li>; } };
+* nodes.map((node) => renderers[node.__typename](node));
+* ```
+*
+* `User` is called once per item inside the caller's render, exactly like
+* `renderers.User(node)` would be, so a boundary in it is a variable number of
+* hooks in the caller -- "Rendered more hooks than during the previous render"
+* as soon as the list grows. The static spelling of that call was already
+* excluded; the dynamic one could not be named, so the slot kept its boundary.
+*
+* Only a link at the right depth counts, so `renderers[key](node)` reaches
+* `renderers.User` but not `renderers.group.User`, and `registry.users[key]`
+* reaches only the slots under `registry.users`.
+*
+* An optional link (`ns?.Home`, `renderers?.[key]`) is matched exactly like
+* the plain one, static or dynamic: it reaches the very same slot, and missing
+* it costs a crash -- `{show && ns?.Home()}` is as much a conditional call
+* inside the caller as `{show && ns.Home()}` is.
+*/
+function matchesKeyedLink(member, object, key, includeDynamic) {
+	if (!member.isMemberExpression() && !member.isOptionalMemberExpression()) return false;
+	if (member.node.object !== object.node) return false;
+	const name = getReadPropertyName(member.node);
+	return name === key || includeDynamic && name === void 0;
+}
+/**
+* The references of the binding that `const { key } = object` or
+* `const { key: Alias } = object` creates, when `object` is the node that
+* initializes that declarator; nothing otherwise.
+*/
+function getDestructuredSlotUses(object, key) {
+	const declarator = object.parentPath;
+	if (declarator === null || !declarator.isVariableDeclarator() || declarator.node.init !== object.node || !t.isObjectPattern(declarator.node.id)) return [];
+	for (const property of declarator.node.id.properties) {
+		if (!t.isObjectProperty(property) || !t.isIdentifier(property.value)) continue;
+		if (getPropertyKeyName(property) !== key) continue;
+		const alias = declarator.scope.getBinding(property.value.name);
+		return alias === void 0 ? [] : alias.referencePaths.map((reference) => climbTransparentWrappers(reference));
+	}
+	return [];
+}
+/** Is `slot` the callee of a plain or optional-chained call -- `Row()`, `Row?.()`, `ns.Row!()`? */
+function isPlainCallee(slot) {
+	const call = slot.parentPath;
+	if (call === null) return false;
+	const parts = getCallParts(call.node);
+	return parts !== void 0 && parts.callee === slot.node;
+}
+/**
+* Is `path` a component-named function that the module invokes as a plain
+* function -- `Title()`, `Title?.()`, `Title!()`, `ns.Home()` -- rather than
+* (only) mounting it through JSX?
+*
+* ```jsx
+* function Title() { return <h1>{count.value}</h1>; }
+* function Outer({ show }) { return <div>{show && Title()}</div>; }
+* ```
+*
+* `Title` reads exactly like a component, but a plain call never mounts a
+* fiber: React sees only `Outer`, and `Title`'s body simply runs inside
+* `Outer`'s render. A boundary injected into it is therefore three more hooks
+* *in `Outer`*, and here they run only when `show` is true -- the conditional
+* hook call the Rules of Hooks forbid, which React reports as "Rendered more
+* hooks than during the previous render" (or "Expected static flag was
+* missing") the first time `show` flips. The render-callback exclusion
+* (`isRenderCallback`) already handled the looped variant of this -- `Row`
+* called once per item from inside `items.map(...)` -- and this is the same
+* fact stated for every call site, not just the ones inside a loop: a function
+* that is called is not a component, whatever it is named.
+*
+* The exclusion is decided from the module as a whole -- *any* plain call of the
+* function's own binding (or of its exact keyed slot) disqualifies it -- because
+* a boundary is a property of the function, not of one call site: once one
+* caller runs the body inline, a boundary inside it is wrong for that caller no
+* matter what the others do. The reads are not lost; `inspectFunction` folds
+* them into the function that makes the call (`foldDirectlyCalledRenderCallbacks`),
+* so `Outer` is the one that gets transformed and subscribes -- which is right,
+* since `Outer` is the fiber that re-renders and re-runs `Title()`.
+*
+* Deliberately narrow, in both directions:
+*
+* - Only a *component* name is affected. A `useX` hook is called as a function
+*   by definition, and its boundary is valid precisely because React runs it
+*   inside a render already in progress; hooks keep their handling unchanged.
+* - Only the function's *own* binding counts, as in `isRenderCallback`: a
+*   same-named binding in another scope cannot disqualify it, and an alias
+*   (`const T = Title; T()`) is not followed. Neither is `Title.call(...)` or
+*   `new Title()`, which are not plain calls of the binding.
+*/
+function isPlainCalledComponent(path) {
+	const slot = climbTransparentWrappers(path);
+	const holder = path.isObjectMethod() ? path : slot.parentPath;
+	if (holder === null) return false;
+	const access = getKeyedAccessPath(holder);
+	const key = access?.keys.at(-1) ?? (holder.isObjectProperty() || holder.isObjectMethod() ? getPropertyKeyName(holder.node) : void 0);
+	if (key !== void 0) return isComponentName(key) && getKeyedSafetyUses(holder, access).some(isPlainCallee);
+	return getOwnBindingReferences(path, holder)?.some((reference) => isPlainCallee(climbTransparentWrappers(reference))) ?? false;
+}
+/**
+* The reference paths of `path`'s own component-named binding, or `undefined`
+* when it has none -- no own binding, a non-component name, or a same-named
+* binding that belongs to some other function. `holder` is the climbed parent
+* the binding is looked up from, matching `isRenderCallback`'s own lookup.
+*/
+function getOwnBindingReferences(path, holder) {
+	const name = getOwnBindingName(path);
+	if (name === void 0 || !isComponentName(name)) return void 0;
+	const binding = holder.scope.getBinding(name);
+	if (binding === void 0) return void 0;
+	if (binding.path.node !== path.node && binding.path.node !== holder.node) return void 0;
+	return binding.referencePaths;
+}
+/**
+* Is `path` -- already known to be plain-called -- *also* mounted through JSX
+* by its own binding (`<Title />`)? That instance loses its own boundary along
+* with the plain-called one, so `decideTransform` reports the mix rather than
+* leaving the `<Title />` instance to go stale in silence. Babel records a JSX
+* tag as an ordinary reference to the binding it names, which is what makes
+* this a plain reference walk.
+*/
+function isAlsoMountedThroughJsx(path) {
+	const holder = climbTransparentWrappers(path).parentPath;
+	if (holder === null || path.isObjectMethod()) return false;
+	return getOwnBindingReferences(path, holder)?.some((reference) => reference.isJSXIdentifier()) ?? false;
 }
 function isRenderCallback(path, visited = /* @__PURE__ */ new Set()) {
 	if (visited.has(path.node)) return false;
@@ -646,7 +984,8 @@ function isRenderCallback(path, visited = /* @__PURE__ */ new Set()) {
 	const argument = climbTransparentWrappers(path);
 	const enclosing = argument.parentPath;
 	if (enclosing !== null && isRenderCallbackInvocation(enclosing.node, argument.node)) return true;
-	if (enclosing !== null && isKeyedRenderCallback(enclosing)) return true;
+	const keyedHolder = path.isObjectMethod() ? path : enclosing;
+	if (keyedHolder !== null && isKeyedRenderCallback(keyedHolder)) return true;
 	const name = getOwnBindingName(path);
 	if (name === void 0 || enclosing === null) return false;
 	const binding = enclosing.scope.getBinding(name);
@@ -692,6 +1031,87 @@ function resolveReferencedFunction(origin, name) {
 	}
 }
 /**
+* The keyed-slot twin of `resolveReferencedFunction`: the function a static
+* member callee such as `ns.Home` / `deep.a.Home` / `Card.Header` reaches, when
+* this module defines it in one of the keyed shapes `getKeyedAccessPath`
+* names -- an object literal bound to the root (`const ns = { Home() {} }`,
+* `{ Home: () => ... }`, nested to any depth) or a member assignment
+* (`Card.Header = () => ...`).
+*
+* Needed because `isPlainCalledComponent` takes the boundary away from such a
+* slot the moment it is called (`ns.Home()`), and without resolving it here its
+* reads would reach nobody: the slot no longer subscribes, and the caller never
+* learns what it read. Anything this cannot resolve unambiguously -- a spread,
+* a computed runtime key, an import -- resolves to nothing, which leaves the
+* caller exactly as it would otherwise have been.
+*/
+function resolveKeyedFunction(origin, callee) {
+	const chain = getStaticMemberChain(callee);
+	if (chain !== void 0 && t.isThisExpression(chain.root)) {
+		const object = getThisObject(origin);
+		return object === void 0 ? void 0 : resolveObjectLiteralSlot(object, chain.keys);
+	}
+	const access = getStaticMemberPath(callee);
+	if (access === void 0) return void 0;
+	const binding = origin.scope.getBinding(access.root);
+	if (binding === void 0) return void 0;
+	if (binding.path.isVariableDeclarator()) {
+		const found = resolveObjectLiteralSlot(unwrapTransparentPath(binding.path.get("init")), access.keys);
+		if (found !== void 0) return found;
+	}
+	const assigned = [];
+	for (const slot of getKeyedSlotUses({
+		origin,
+		...access
+	})) {
+		const parent = slot.parentPath;
+		if (parent !== null && parent.isAssignmentExpression({ operator: "=" }) && parent.node.left === slot.node) assigned.push(parent);
+	}
+	const only = assigned.length === 1 ? assigned[0] : void 0;
+	if (only === void 0) return void 0;
+	const value = unwrapTransparentPath(only.get("right"));
+	return value.isArrowFunctionExpression() || value.isFunctionExpression() ? value : void 0;
+}
+/**
+* The function at `keys` inside the object literal `object`, walking down
+* through nested literals. The *last* matching property wins, as it does at
+* runtime; anything that is not a literal or not a function resolves to nothing.
+*/
+function resolveObjectLiteralSlot(object, keys) {
+	let container = object;
+	for (const key of keys) {
+		if (container === void 0 || !container.isObjectExpression()) return void 0;
+		const match = container.get("properties").filter((property) => (property.isObjectProperty() || property.isObjectMethod()) && getPropertyKeyName(property.node) === key).at(-1);
+		container = match?.isObjectProperty() ? unwrapTransparentPath(match.get("value")) : match;
+	}
+	if (container === void 0) return void 0;
+	if (container.isObjectMethod()) return container;
+	if (container.isArrowFunctionExpression() || container.isFunctionExpression()) return container;
+}
+/**
+* The object literal a `this` written at `origin` stands for, when that is
+* syntactic: the nearest non-arrow function is a member of an object literal
+* (a method, accessor, or `function` property value) and no class sits in
+* between. The inverse of the walk `getObjectThisReferences` does.
+*/
+function getThisObject(origin) {
+	let owner = origin.getFunctionParent();
+	while (owner !== null && owner.isArrowFunctionExpression()) owner = owner.getFunctionParent();
+	if (owner === null) return void 0;
+	const blocker = origin.findParent((parent) => parent.node === owner.node || parent.isClass());
+	if (blocker === null || blocker.node !== owner.node) return void 0;
+	if (owner.isObjectMethod()) {
+		const object = owner.parentPath;
+		return object.isObjectExpression() ? object : void 0;
+	}
+	if (!owner.isFunctionExpression()) return void 0;
+	const property = climbTransparentWrappers(owner);
+	const holder = property.parentPath;
+	if (holder === null || !holder.isObjectProperty() || holder.node.value !== property.node) return void 0;
+	const object = holder.parentPath;
+	return object.isObjectExpression() ? object : void 0;
+}
+/**
 * Is `path` a component defined inline as a call argument --
 * `observer(function App() { return <p>{count.value}</p>; })`?
 *
@@ -731,9 +1151,10 @@ function isInlineNamedComponentArgument(path, call, reactImportSource) {
 }
 function isAutomaticTransformCandidate(path, reactImportSource, climbedParent) {
 	if (isRenderCallback(path)) return false;
-	if (path.isFunctionDeclaration()) return true;
+	if (isPlainCalledComponent(path)) return false;
+	if (path.isFunctionDeclaration() || path.isObjectMethod()) return true;
 	const parent = climbedParent === void 0 ? climbComponentWrappers(path, reactImportSource).parentPath : climbedParent;
-	return parent !== null && (parent.isVariableDeclarator() || parent.isReturnStatement() || parent.isArrowFunctionExpression() || parent.isExportDefaultDeclaration() || parent.isObjectProperty() || parent.isClassProperty() || parent.isAssignmentExpression() && t.isMemberExpression(parent.node.left) && getStaticMemberPath(parent.node.left) !== void 0 || parent.isCallExpression() && isInlineNamedComponentArgument(path, parent, reactImportSource));
+	return parent !== null && (parent.isVariableDeclarator() || parent.isReturnStatement() || parent.isArrowFunctionExpression() || parent.isExportDefaultDeclaration() || parent.isObjectProperty() || parent.isAssignmentExpression() && t.isMemberExpression(parent.node.left) && getStaticMemberPath(parent.node.left) !== void 0 || parent.isCallExpression() && isInlineNamedComponentArgument(path, parent, reactImportSource));
 }
 function isNestedTrackingBoundary(path, reactImportSource) {
 	const climbedParent = climbComponentWrappers(path, reactImportSource).parentPath;
@@ -818,14 +1239,27 @@ function isDeferredReadContext(path, functionPath) {
 	}
 	return false;
 }
-function inspectFunction(functionPath, importSource, reactImportSource, visited = /* @__PURE__ */ new Set([functionPath.node])) {
+/**
+* Is `node` (at `path`) a `.value` read that counts as part of `functionPath`'s
+* render -- the one rule both `inspectFunction` (does this function subscribe
+* at all?) and `relocateTrackedParameters` (does this parameter have to move
+* behind the boundary?) apply, so the two can never disagree about what a
+* tracked read is.
+*/
+function isTrackedValueRead(node, path, functionPath) {
+	if (getReadPropertyName(node) !== "value") return false;
+	if (isNonSignalValueReceiver(node.object)) return false;
+	return !isDeferredReadContext(path, functionPath);
+}
+function inspectFunction(functionPath, importSource, managedRuntimeSource, reactImportSource, visited = /* @__PURE__ */ new Set([functionPath.node])) {
 	const inspection = {
 		containsJSX: false,
 		readsValue: false,
-		hasUseSignalsCall: false
+		hasSignalTrackingCall: false,
+		hasUseManagedSignalsCall: false
 	};
 	const foldReferencedRenderCallbacks = (call) => {
-		const argument = call.node.arguments[0];
+		const argument = getRenderCallbackArgument(call.node);
 		if (argument === void 0) return;
 		const reference = unwrapTransparent(argument);
 		if (!t.isIdentifier(reference)) return;
@@ -834,28 +1268,33 @@ function inspectFunction(functionPath, importSource, reactImportSource, visited
 		if (target === void 0 || target.isDescendant(functionPath)) return;
 		if (visited.has(target.node)) return;
 		visited.add(target.node);
-		const nested = inspectFunction(target, importSource, reactImportSource, visited);
+		const nested = inspectFunction(target, importSource, managedRuntimeSource, reactImportSource, visited);
 		if (nested.containsJSX) inspection.containsJSX = true;
 		if (nested.readsValue) inspection.readsValue = true;
 	};
 	const foldDirectlyCalledRenderCallbacks = (call) => {
 		const callee = unwrapTransparent(call.node.callee);
-		if (!t.isIdentifier(callee) || !isComponentName(callee.name) && !isHookName(callee.name)) return;
+		const member = t.isMemberExpression(callee) || t.isOptionalMemberExpression(callee) ? callee : void 0;
+		const chain = member === void 0 ? void 0 : getStaticMemberChain(member);
+		const name = t.isIdentifier(callee) ? callee.name : chain !== void 0 && (t.isIdentifier(chain.root) || t.isThisExpression(chain.root)) ? chain.keys.at(-1) : void 0;
+		if (name === void 0 || !isComponentName(name) && !isHookName(name)) return;
+		if (!t.isIdentifier(callee) && !isComponentName(name)) return;
 		const owner = call.getFunctionParent();
-		if (owner === null || owner.node === functionPath.node || !isRenderCallback(owner)) return;
-		const target = resolveReferencedFunction(call, callee.name);
+		if (owner === null) return;
+		if (owner.node === functionPath.node || !isRenderCallback(owner)) {
+			if (!isComponentName(name)) return;
+			if (isDeferredReadContext(call, functionPath)) return;
+		}
+		const target = t.isIdentifier(callee) ? resolveReferencedFunction(call, callee.name) : member !== void 0 ? resolveKeyedFunction(call, member) : void 0;
 		if (target === void 0 || target.isDescendant(functionPath)) return;
 		if (visited.has(target.node)) return;
 		visited.add(target.node);
-		const nested = inspectFunction(target, importSource, reactImportSource, visited);
+		const nested = inspectFunction(target, importSource, managedRuntimeSource, reactImportSource, visited);
 		if (nested.containsJSX) inspection.containsJSX = true;
 		if (nested.readsValue) inspection.readsValue = true;
 	};
 	const recordValueRead = (node, path) => {
-		if (getReadPropertyName(node) !== "value") return;
-		if (isNonSignalValueReceiver(node.object)) return;
-		if (isDeferredReadContext(path, functionPath)) return;
-		inspection.readsValue = true;
+		if (isTrackedValueRead(node, path, functionPath)) inspection.readsValue = true;
 	};
 	functionPath.traverse({
 		Function(path) {
@@ -877,7 +1316,9 @@ function inspectFunction(functionPath, importSource, reactImportSource, visited
 			foldReferencedRenderCallbacks(path);
 			foldDirectlyCalledRenderCallbacks(path);
 			if (path.getFunctionParent()?.node !== functionPath.node) return;
-			if (isUseSignalsCallee(functionPath, path.get("callee"), importSource)) inspection.hasUseSignalsCall = true;
+			const callee = path.get("callee");
+			if (isSignalTrackingCallee(functionPath, callee, importSource)) inspection.hasSignalTrackingCall = true;
+			if (callee.isIdentifier() && isNamedUseManagedSignalsImport(functionPath, callee.node.name, managedRuntimeSource) || callee.isMemberExpression() && getReadPropertyName(callee.node) === "useManagedSignals" && callee.get("object").isIdentifier() && isNamespaceUseManagedSignalsImport(functionPath, callee.get("object").node.name, managedRuntimeSource)) inspection.hasUseManagedSignalsCall = true;
 		},
 		OptionalCallExpression(path) {
 			foldReferencedRenderCallbacks(path);
@@ -886,26 +1327,26 @@ function inspectFunction(functionPath, importSource, reactImportSource, visited
 	});
 	return inspection;
 }
-function findRuntimeImports(programPath, runtimeSource) {
+function findRuntimeImports(programPath, runtimeSource, importedName) {
 	const imports = [];
 	for (const statement of programPath.get("body")) {
 		if (!statement.isImportDeclaration() || statement.node.importKind === "type" || statement.node.source.value !== runtimeSource) continue;
-		for (const specifier of statement.get("specifiers")) if (specifier.isImportSpecifier() && specifier.node.importKind !== "type" && t.isIdentifier(specifier.node.imported, { name: "useSignals" })) imports.push({
+		for (const specifier of statement.get("specifiers")) if (specifier.isImportSpecifier() && specifier.node.importKind !== "type" && t.isIdentifier(specifier.node.imported, { name: importedName })) imports.push({
 			identifier: t.cloneNode(specifier.node.local),
 			bindingPath: specifier
 		});
 	}
 	return imports;
 }
-function addRuntimeImport(programPath, runtimeSource, functionPath) {
-	const local = functionPath.scope.generateUidIdentifier("useSignals");
-	const declaration = t.importDeclaration([t.importSpecifier(t.cloneNode(local), t.identifier("useSignals"))], t.stringLiteral(runtimeSource));
+function addRuntimeImport(programPath, runtimeSource, importedName, functionPath) {
+	const local = functionPath.scope.generateUidIdentifier(importedName);
+	const declaration = t.importDeclaration([t.importSpecifier(t.cloneNode(local), t.identifier(importedName))], t.stringLiteral(runtimeSource));
 	const imports = programPath.get("body").filter((path) => path.isImportDeclaration());
 	const inserted = (imports.length === 0 ? programPath.unshiftContainer("body", declaration) : imports.at(-1).insertAfter(declaration))[0];
-	if (inserted === void 0 || !inserted.isImportDeclaration()) throw new Error("Failed to insert the useSignals import");
+	if (inserted === void 0 || !inserted.isImportDeclaration()) throw new Error(`Failed to insert the ${importedName} import`);
 	programPath.scope.registerDeclaration(inserted);
 	const specifier = inserted.get("specifiers")[0];
-	if (specifier === void 0 || !specifier.isImportSpecifier()) throw new Error("Failed to register the useSignals import");
+	if (specifier === void 0 || !specifier.isImportSpecifier()) throw new Error(`Failed to register the ${importedName} import`);
 	return {
 		identifier: local,
 		bindingPath: specifier
@@ -913,31 +1354,31 @@ function addRuntimeImport(programPath, runtimeSource, functionPath) {
 }
 /**
 * Is `statements`' first entry a bare zero-argument call whose callee resolves
-* to `useSignals`, with `allowBarrel` controlling whether a barrel/re-export
-* chain counts (see `isUseSignalsCallee`)? Shared by `isExplicitUseSignals`
+* to `useSignalTracking`, with `allowBarrel` controlling whether a barrel/re-export
+* chain counts (see `isSignalTrackingCallee`)? Shared by `isExplicitSignalTracking`
 * (`allowBarrel: false`, the verified boundary) and
-* `isUnverifiableBarrelUseSignals` (`allowBarrel: true`, to detect the exact
+* `isUnverifiableBarrelSignalTracking` (`allowBarrel: true`, to detect the exact
 * call the former rejects).
 */
-function isFirstStatementUseSignalsCall(functionPath, statements, importSource, allowBarrel) {
+function isFirstStatementSignalTrackingCall(functionPath, statements, importSource, allowBarrel) {
 	const first = statements[0];
 	if (first === void 0 || !first.isExpressionStatement()) return false;
 	const expression = first.get("expression");
 	if (!expression.isCallExpression() || expression.node.arguments.length !== 0) return false;
-	return isUseSignalsCallee(functionPath, expression.get("callee"), importSource, allowBarrel);
+	return isSignalTrackingCallee(functionPath, expression.get("callee"), importSource, allowBarrel);
 }
-function isExplicitUseSignals(functionPath, statements, importSource) {
-	return isFirstStatementUseSignalsCall(functionPath, statements, importSource, false);
+function isExplicitSignalTracking(functionPath, statements, importSource) {
+	return isFirstStatementSignalTrackingCall(functionPath, statements, importSource, false);
 }
 /**
-* The named import specifier the absorbed explicit `useSignals()` call resolves
+* The named import specifier the absorbed explicit `useSignalTracking()` call resolves
 * to, when the call is a bare identifier bound by one. `applyManaged` replaces
 * that call with its own store declaration, which can leave the import behind
 * with nothing referencing it -- so `Program.exit` needs the specifier to check
 * and drop. A namespace import is deliberately not returned: the namespace
 * object may be used for other exports of the same module.
 */
-function getAbsorbedUseSignalsImport(functionPath, statements) {
+function getAbsorbedSignalTrackingImport(functionPath, statements) {
 	const first = statements[0];
 	if (first === void 0 || !first.isExpressionStatement()) return void 0;
 	const expression = first.get("expression");
@@ -948,22 +1389,26 @@ function getAbsorbedUseSignalsImport(functionPath, statements) {
 	if (resolved === void 0 || !resolved.specifier.isImportSpecifier()) return void 0;
 	return resolved.specifier;
 }
-function isUnverifiableBarrelUseSignals(functionPath, statements, importSource, explicit) {
+function isUnverifiableBarrelSignalTracking(functionPath, statements, importSource, explicit) {
 	if (explicit) return false;
-	return isFirstStatementUseSignalsCall(functionPath, statements, importSource, true);
+	return isFirstStatementSignalTrackingCall(functionPath, statements, importSource, true);
 }
-function warnUnverifiableBarrelUseSignals(path, importSource) {
-	const warning = path.buildCodeFrameError(`This useSignals() call cannot be verified as "${importSource}"'s own export: it resolves only through a barrel/re-export module, and a single-file transform cannot follow that chain to confirm the target. The component stays on the bare, best-effort useSignals() boundary. Import useSignals directly from "${importSource}" or "${importSource}/runtime" instead to get the verified boundary.`);
+function warnUnverifiableBarrelSignalTracking(path, importSource) {
+	const warning = path.buildCodeFrameError(`This useSignalTracking() call cannot be verified as "${importSource}"'s own export: it resolves only through a barrel/re-export module, and a single-file transform cannot follow that chain to confirm the target. The component stays on the bare, best-effort useSignalTracking() boundary. Import useSignalTracking directly from "${importSource}" instead to get the verified boundary.`);
 	console.warn(warning.message);
 }
-function warnUnnamedUseSignalsAnnotation(path) {
-	const warning = path.buildCodeFrameError("This @useSignals annotation is ignored: the transform could not resolve a component or hook identity for the annotated function, and the boundary is attached to that identity. Give it a PascalCase (component) or useX (hook) name -- a binding, a named function declaration, or an object/class property key -- to opt it in.");
+function warnUnnamedSignalTrackingAnnotation(path) {
+	const warning = path.buildCodeFrameError("This @signalTracking annotation is ignored: the transform could not resolve a component or hook identity for the annotated function, and the boundary is attached to that identity. Give it a PascalCase (component) or useX (hook) name -- a binding, a named function declaration, or an object property key -- to opt it in.");
 	console.warn(warning.message);
 }
 function warnUnnamedDefaultExport(path) {
 	const warning = path.buildCodeFrameError("This anonymous default export is left untransformed: its component identity is derived from the module's file name, and this module's name does not yield a PascalCase identifier. Name the function (`export default function App() { ... }`), or assign it to a PascalCase binding and export that binding, to opt it in.");
 	console.warn(warning.message);
 }
+function warnPlainCalledComponentAlsoMounted(path, name) {
+	const warning = path.buildCodeFrameError(`${name} is called as a plain function (${name}()) and also rendered as <${name} />. A plain call runs its body inside the caller's render, so it gets no tracking boundary of its own (its signal reads are tracked by the calling component instead), and the <${name} /> instance therefore only updates when its parent re-renders. Use one form consistently -- render it only as <${name} />, or only call it -- to remove the ambiguity.`);
+	console.warn(warning.message);
+}
 function shouldAutomaticallyTransform(mode, inspection, identity) {
 	if (isHookIdentity(identity)) return mode !== "manual" && inspection.readsValue;
 	if (!isComponentIdentity(identity) || !inspection.containsJSX) return false;
@@ -975,10 +1420,10 @@ function markTransformed(state) {
 }
 /**
 * Resolves what, if anything, `path` needs done to it: the opt-out check,
-* explicit/annotated/automatic eligibility (plus the barrel-useSignals
+* explicit/annotated/automatic eligibility (plus the barrel-useSignalTracking
 * warning that eligibility check surfaces along the way), the
 * async/generator guard, and -- once a function is confirmed eligible for
-* real codegen -- acquiring the runtime `useSignals` import it will call.
+* real codegen -- acquiring the corresponding runtime hook import it will call.
 * Pure decision-making: no AST mutation happens here, so every early return is
 * just a `return`, not a `return` guarding mutations already made.
 */
@@ -987,38 +1432,39 @@ function decideTransform(path, state, options, reactImportSource) {
 	const identity = resolveComponentIdentity(path, reactImportSource, climbedParent) ?? getDefaultExportIdentity(climbedParent, state.filename);
 	const factory = identity?.kind === "hoc-return" ? identity.factory : void 0;
 	const ownsLeadingComment = (pattern) => hasOwnedLeadingComment(path, pattern) || factory !== void 0 && hasOwnedLeadingComment(factory, pattern);
-	if (ownsLeadingComment(noUseSignalsComment)) return { kind: "skip" };
+	if (ownsLeadingComment(noSignalTrackingComment)) return { kind: "skip" };
 	const body = path.get("body");
 	const statements = body.isBlockStatement() ? body.get("body") : [];
-	const explicit = isExplicitUseSignals(path, statements, options.importSource);
-	if (isUnverifiableBarrelUseSignals(path, statements, options.importSource, explicit)) warnUnverifiableBarrelUseSignals(path, options.importSource);
-	const inspection = inspectFunction(path, options.importSource, reactImportSource);
-	const annotation = ownsLeadingComment(useSignalsComment);
+	const explicit = isExplicitSignalTracking(path, statements, options.importSource);
+	if (isUnverifiableBarrelSignalTracking(path, statements, options.importSource, explicit)) warnUnverifiableBarrelSignalTracking(path, options.importSource);
+	const managedRuntimeSource = `${options.importSource}/runtime`;
+	const inspection = inspectFunction(path, options.importSource, managedRuntimeSource, reactImportSource);
+	const annotation = ownsLeadingComment(useSignalTrackingComment);
 	const isFactory = isHigherOrderComponentFactory(path) && !isHookIdentity(identity);
 	const annotated = annotation && !isFactory && (isComponentIdentity(identity) || isHookIdentity(identity));
 	const candidate = isAutomaticTransformCandidate(path, reactImportSource, climbedParent);
 	if (annotation && !annotated && rendersJsx(path)) {
 		const enclosing = path.getFunctionParent();
-		if (enclosing === null || !hasOwnedLeadingComment(enclosing, useSignalsComment)) warnUnnamedUseSignalsAnnotation(path);
+		if (enclosing === null || !hasOwnedLeadingComment(enclosing, useSignalTrackingComment)) warnUnnamedSignalTrackingAnnotation(path);
 	}
 	if (options.mode !== "manual" && identity === void 0 && climbedParent !== null && climbedParent.isExportDefaultDeclaration() && rendersJsx(path)) warnUnnamedDefaultExport(path);
+	if (!candidate && !explicit && !annotated && !isFactory && shouldAutomaticallyTransform(options.mode, inspection, identity) && isComponentIdentity(identity) && isPlainCalledComponent(path) && isAlsoMountedThroughJsx(path)) warnPlainCalledComponentAlsoMounted(path, identity?.name ?? "component");
 	const automatic = !isFactory && candidate && shouldAutomaticallyTransform(options.mode, inspection, identity);
 	if (!explicit && !annotated && !automatic) return { kind: "skip" };
-	if (!explicit && inspection.hasUseSignalsCall) return { kind: "skip" };
+	if (!explicit && (inspection.hasSignalTrackingCall || inspection.hasUseManagedSignalsCall)) return { kind: "skip" };
 	if (options.transform === "inject" && explicit) return {
 		kind: "directive-only",
 		body
 	};
 	if (path.node.async || path.node.generator) {
 		if (!explicit && !annotated) return { kind: "skip" };
-		throw path.buildCodeFrameError("useSignals transform only supports synchronous, non-generator functions");
+		throw path.buildCodeFrameError("useSignalTracking transform only supports synchronous, non-generator functions");
 	}
-	const managedRuntimeSource = `${options.importSource}/runtime`;
 	const importSource = options.transform === "managed" ? managedRuntimeSource : options.importSource;
 	const imports = options.transform === "managed" ? state.managedRuntimeImports : state.directImports;
 	let runtimeImport = imports.find(({ identifier, bindingPath }) => path.scope.getBinding(identifier.name)?.path === bindingPath);
 	if (runtimeImport === void 0) {
-		runtimeImport = addRuntimeImport(state.programPath, importSource, path);
+		runtimeImport = addRuntimeImport(state.programPath, importSource, options.transform === "managed" ? "useManagedSignals" : "useSignalTracking", path);
 		imports.push(runtimeImport);
 	}
 	return {
@@ -1027,17 +1473,186 @@ function decideTransform(path, state, options, reactImportSource) {
 		statements,
 		explicit,
 		runtimeImport,
-		absorbedImport: explicit ? getAbsorbedUseSignalsImport(path, statements) : void 0
+		absorbedImport: explicit ? getAbsorbedSignalTrackingImport(path, statements) : void 0
 	};
 }
-/** Codegen: inject a bare `useSignals()` call at the top of the function body. */
+/**
+* Does `param` itself evaluate a tracked `.value` read when the function is
+* called -- i.e. in a default value (`{ v = count.value }`, `n = count.value`)?
+*
+* Reads inside a nested function are skipped: a closure created by a default
+* (`format = () => count.value`) does not run during parameter binding, and if
+* the body calls it during render, it runs after the boundary is open anyway.
+*/
+function parameterReadsTrackedValue(param, functionPath) {
+	if (param.isIdentifier()) return false;
+	let found = false;
+	const visit = (path) => {
+		if (isTrackedValueRead(path.node, path, functionPath)) {
+			found = true;
+			path.stop();
+		}
+	};
+	param.traverse({
+		Function(nested) {
+			nested.skip();
+		},
+		MemberExpression: visit,
+		OptionalMemberExpression: visit
+	});
+	return found;
+}
+/**
+* Would moving `moved` from the parameter list into the body change what any
+* name in them means? Two shapes do, and both are rare enough that the honest
+* answer is to leave the parameters exactly where they were:
+*
+* - A default refers to a name the body itself declares
+*   (`({ v = count.value }) => { const count = ...; }`). In the parameter list
+*   that name is the *outer* binding, because parameters get a scope of their
+*   own; moved into the body it would hit the body's declaration instead (and
+*   its temporal dead zone). Babel models parameters and body-level
+*   declarations as one function scope, which is precisely what makes this
+*   detectable: such a name resolves to an own binding that is not a parameter.
+* - A moved parameter is re-declared in the body (`var v;`, `function v() {}`),
+*   which is legal next to a parameter but a redeclaration error next to the
+*   `let` the move would emit. Babel records those as constant violations of
+*   the parameter binding.
+*/
+function hasRelocationConflict(path, moved) {
+	for (const param of moved) {
+		for (const name of Object.keys(t.getBindingIdentifiers(param.node))) if (path.scope.getOwnBinding(name)?.constantViolations.some((violation) => violation.isVariableDeclarator() || violation.isFunctionDeclaration() || violation.isClassDeclaration())) return true;
+		let conflict = false;
+		param.traverse({ ReferencedIdentifier(reference) {
+			if (!reference.isIdentifier()) return;
+			const binding = path.scope.getOwnBinding(reference.node.name);
+			if (binding !== void 0 && binding.kind !== "param") {
+				conflict = true;
+				reference.stop();
+			}
+		} });
+		if (conflict) return true;
+	}
+	return false;
+}
+/**
+* Moves the parameters whose defaults read a signal behind the boundary,
+* returning the statements that bind them again, for the caller to place as
+* the first statements *after* the hook call.
+*
+* Parameter defaults are evaluated before the first statement of the body runs,
+* so in `function C({ v = count.value })` the read happens before the injected
+* `useManagedSignals()` / `useSignalTracking()` call has opened the render
+* collection -- the read is real, `inspectFunction` rightly counts it and
+* transforms the component, and yet the boundary never sees it, so the
+* component does not re-render when `count` changes. Moving the pattern into
+* the body is the only placement that runs it after the hook:
+*
+* ```js
+* function C(_param) {
+*   const _signals = _useManagedSignals();
+*   try {
+*     let { v = count.value } = _param;
+*     ...
+* ```
+*
+* The rewrite is kept as small as it can be while staying faithful:
+*
+* - Nothing happens unless a parameter actually reads a signal; every other
+*   function keeps its parameter list untouched.
+* - From the first such parameter *onward*, every parameter moves, in order. A
+*   later default may refer to an earlier parameter (`(a = count.value, b =
+*   a)`), and it may have side effects whose order matters, so moving one
+*   parameter alone could change what the others see.
+* - Each moved parameter is replaced one-for-one by a generated identifier
+*   rather than removed, so the parameter *count* is unchanged and a
+*   `forwardRef` render function keeps its two-parameter `(props, ref)` shape
+*   (`length` can change where a default used to end the count, which React
+*   only inspects to warn about a `forwardRef` arity other than 0 or 2).
+* - A default still applies only on `undefined`: `v = count.value` becomes
+*   `let v = _param === undefined ? count.value : _param`, which is the exact
+*   rule a parameter default follows; a destructuring pattern's own nested
+*   defaults keep their meaning by moving verbatim.
+* - A type annotation travels to the generated parameter, so the signature
+*   still says what it accepts; `?` optional markers have no meaning on a
+*   `let` and are dropped from the moved pattern. In TypeScript the generated
+*   parameter is marked `?` wherever the original was optional.
+*
+* When the move cannot be done without changing meaning
+* (`hasRelocationConflict`), or a parameter is a TypeScript parameter property
+* (constructor-only, never a component), nothing moves and the read stays
+* untracked exactly as before -- an edge this declines rather than miscompiles.
+*/
+function relocateTrackedParameters(path, typeScript) {
+	const params = path.get("params");
+	const first = params.findIndex((param) => parameterReadsTrackedValue(param, path));
+	if (first === -1) return [];
+	const moved = params.slice(first);
+	const plan = [];
+	for (const param of moved) {
+		const node = param.node;
+		if (t.isRestElement(node)) {
+			if (!isBindablePattern(node.argument)) return [];
+			plan.push({
+				param,
+				pattern: node.argument,
+				rest: node
+			});
+		} else if (t.isAssignmentPattern(node)) {
+			if (!isBindablePattern(node.left)) return [];
+			plan.push({
+				param,
+				pattern: node.left,
+				fallback: node.right
+			});
+		} else if (isBindablePattern(node)) plan.push({
+			param,
+			pattern: node
+		});
+		else return [];
+	}
+	if (hasRelocationConflict(path, moved)) return [];
+	const optional = [];
+	let laterOptional = true;
+	for (let index = plan.length - 1; index >= 0; index -= 1) {
+		const { pattern, fallback, rest } = plan[index];
+		optional[index] = typeScript && rest === void 0 && (pattern.optional === true || fallback !== void 0 && laterOptional);
+		laterOptional &&= rest !== void 0 || optional[index];
+	}
+	const declarations = [];
+	for (const [index, { param, pattern, fallback, rest }] of plan.entries()) {
+		const local = path.scope.generateUidIdentifier("param");
+		const init = fallback === void 0 ? t.cloneNode(local) : t.conditionalExpression(t.binaryExpression("===", t.cloneNode(local), t.identifier("undefined")), fallback, t.cloneNode(local));
+		let replacement = local;
+		if (rest !== void 0) {
+			replacement = t.restElement(t.cloneNode(local));
+			replacement.typeAnnotation = rest.typeAnnotation ?? null;
+		} else if (pattern.typeAnnotation !== null && pattern.typeAnnotation !== void 0) local.typeAnnotation = pattern.typeAnnotation;
+		if (optional[index]) local.optional = true;
+		pattern.typeAnnotation = null;
+		pattern.optional = null;
+		declarations.push(t.variableDeclaration("let", [t.variableDeclarator(pattern, init)]));
+		param.replaceWith(replacement);
+	}
+	return declarations;
+}
+function isBindablePattern(node) {
+	return t.isIdentifier(node) || t.isObjectPattern(node) || t.isArrayPattern(node);
+}
+/** Codegen: inject a bare `useSignalTracking()` call at the top of the function body. */
 function applyInject(path, { body, runtimeImport }, options, state) {
 	const call = t.expressionStatement(t.callExpression(t.cloneNode(runtimeImport.identifier), []));
-	if (body.isBlockStatement()) body.unshiftContainer("body", call);
-	else body.replaceWith(t.blockStatement([call, t.returnStatement(body.node)]));
+	const relocated = relocateTrackedParameters(path, state.typeScript);
+	if (body.isBlockStatement()) body.unshiftContainer("body", [call, ...relocated]);
+	else body.replaceWith(t.blockStatement([
+		call,
+		...relocated,
+		t.returnStatement(body.node)
+	]));
 	const injectedBody = path.node.body;
 	if (options.reactCompiler === "auto" && t.isBlockStatement(injectedBody)) addNoMemoDirective(injectedBody);
 	path.scope.crawl();
+	invalidateThisReferences(path);
 	markTransformed(state);
 }
 /** Codegen: wrap the function body in the managed try/finally render-tracking scope. */
@@ -1047,16 +1662,18 @@ function applyManaged(path, { body, statements, explicit, runtimeImport, absorbe
 	const first = statements[0];
 	if (explicit && first !== void 0) t.inheritsComments(declaration, first.node);
 	const originalStatements = body.isBlockStatement() ? statements.slice(explicit ? 1 : 0).map((statement) => statement.node) : [t.returnStatement(body.node)];
-	const transformedBody = t.blockStatement([declaration, t.tryStatement(t.blockStatement(originalStatements), null, t.blockStatement([t.expressionStatement(t.callExpression(t.memberExpression(t.cloneNode(store), t.identifier("f")), []))]))]);
+	const relocated = relocateTrackedParameters(path, state.typeScript);
+	const transformedBody = t.blockStatement([declaration, t.tryStatement(t.blockStatement([...relocated, ...originalStatements]), null, t.blockStatement([t.expressionStatement(t.callExpression(t.memberExpression(t.cloneNode(store), t.identifier("finish")), []))]))]);
 	if (body.isBlockStatement()) transformedBody.directives = body.node.directives;
 	if (options.reactCompiler === "auto") addNoMemoDirective(transformedBody);
 	body.replaceWith(transformedBody);
 	path.scope.crawl();
+	invalidateThisReferences(path);
 	if (absorbedImport !== void 0) state.absorbedImports.push(absorbedImport);
 	markTransformed(state);
 }
 /**
-* Drops an `import { useSignals } from "<importSource>"` the managed transform
+* Drops an `import { useSignalTracking } from "<importSource>"` the managed transform
 * absorbed and nothing else refers to any more, along with the whole
 * declaration once its last specifier goes. A reused `/runtime` import survives
 * this untouched: the emitted store declaration still calls it, so the binding
@@ -1075,6 +1692,45 @@ function removeAbsorbedImports(programPath, state) {
 	}
 	state.absorbedImports = [];
 }
+const jsxPragmaComment = /@jsx(?:ImportSource|Runtime|Frag)?(?![\w$])/;
+/**
+* Puts a per-file JSX pragma back in front of the code once a generated import
+* has been placed ahead of it.
+*
+* In a file with no import of its own, `addRuntimeImport` has to put the
+* runtime import first, and Babel keeps the author's leading comments attached
+* to the statement they were written above -- so a first-line
+* `/** @jsxImportSource react-fine-grained-signals *\/` ends up printed after
+* that import. Oxc (and so Vite) only honors a JSX pragma that comes before the
+* first statement, so the pragma was silently ignored: the file compiled against
+* `react/jsx-runtime`, and a signal child then reached React as an object and
+* threw on mount.
+*
+* Every leading comment up to and including the last pragma moves onto the
+* first generated import, in order, so a license header above the pragma stays
+* above it; comments after the last pragma -- typically the first statement's
+* own doc comment -- stay where they were. A file without a pragma is left
+* exactly as it was. This runs at `Program.exit`, after every function has been
+* decided, because `@signalTracking` / `@noSignalTracking` are read from those
+* same leading comments.
+*/
+function keepJsxPragmasFirst(programPath, state) {
+	if (!state.importFree) return;
+	const body = programPath.node.body;
+	const authored = body.findIndex((statement) => !t.isImportDeclaration(statement));
+	if (authored <= 0) return;
+	const comments = body[authored].leadingComments;
+	if (comments === null || comments === void 0) return;
+	let lastPragma = -1;
+	for (const [index, comment] of comments.entries()) if (jsxPragmaComment.test(comment.value)) lastPragma = index;
+	if (lastPragma === -1) return;
+	const generated = body[0];
+	const staying = comments.slice(lastPragma + 1);
+	generated.leadingComments = [...generated.leadingComments ?? [], ...comments.slice(0, lastPragma + 1)];
+	body[authored].leadingComments = staying;
+	const interpreter = programPath.node.interpreter;
+	if (interpreter?.trailingComments) interpreter.trailingComments = interpreter.trailingComments.filter((comment) => !staying.includes(comment));
+}
 const babelTransform = declare((api, options) => {
 	api.assertVersion(8);
 	const managedRuntimeSource = `${options.importSource}/runtime`;
@@ -1085,13 +1741,16 @@ const babelTransform = declare((api, options) => {
 			Program: {
 				enter(path, state) {
 					state.programPath = path;
-					state.managedRuntimeImports = findRuntimeImports(path, managedRuntimeSource);
-					state.directImports = findRuntimeImports(path, options.importSource);
+					state.managedRuntimeImports = findRuntimeImports(path, managedRuntimeSource, "useManagedSignals");
+					state.directImports = findRuntimeImports(path, options.importSource, "useSignalTracking");
 					state.absorbedImports = [];
+					state.typeScript = state.file.opts.parserOpts?.plugins?.includes("typescript") === true;
+					state.importFree = !path.node.body.some((statement) => t.isImportDeclaration(statement));
 					state.file.metadata[transformedMetadataKey] = false;
 				},
 				exit(path, state) {
 					removeAbsorbedImports(path, state);
+					keepJsxPragmasFirst(path, state);
 				}
 			},
 			Function(path, state) {
@@ -1118,9 +1777,8 @@ const babelTransform = declare((api, options) => {
 * it is discarded outright for every file none of the three opt-in routes can
 * possibly apply to:
 *
-* - explicit and annotated opt-in both need the text `useSignals` (an aliased
-*   import, a namespace call and the `@useSignals` comment all still contain
-*   it);
+* - explicit opt-in needs `useSignalTracking`; annotation opt-in and opt-out
+*   need `@signalTracking` or `@noSignalTracking`;
 * - `auto` needs a `.value` read, so it needs the text `value`;
 * - `all` additionally wraps JSX components, so it needs a `<` -- but its
 *   custom-hook rule still needs a `.value` read.
@@ -1130,7 +1788,7 @@ const babelTransform = declare((api, options) => {
 * would have rejected anyway.
 */
 function mightTransform(code, mode) {
-	if (code.includes("useSignals")) return true;
+	if (code.includes("useSignalTracking") || code.includes("@signalTracking") || code.includes("@noSignalTracking")) return true;
 	if (mode === "manual") return false;
 	if (code.includes("value")) return true;
 	return mode === "all" && code.includes("<");
@@ -1168,7 +1826,7 @@ function transformReactFineGrainedSignals(code, id, options) {
 }
 //#endregion
 //#region src/unplugin.ts
-const SCRIPT_MODULE = /\.m?[jt]sx?$/;
+const SCRIPT_MODULE = /\.m?[jt]sx?$/i;
 const pluginName = "unplugin-react-fine-grained-signals";
 /**
 * `id` with the `?query`/`#fragment` a bundler appends taken off, which is
@@ -1300,21 +1958,26 @@ function useOwnTransformLoader(compiler) {
 }
 const reactFineGrainedSignals = createUnplugin((options = {}) => {
 	let configuredLoaders;
+	const transform = (code, id) => transformReactFineGrainedSignals(code, id, {
+		importSource: options.importSource ?? "react-fine-grained-signals",
+		reactImportSource: options.reactImportSource ?? "react",
+		mode: options.mode ?? "auto",
+		transform: options.transform ?? "managed",
+		reactCompiler: options.reactCompiler ?? "auto"
+	});
 	return {
 		name: pluginName,
 		enforce: "pre",
 		transformInclude(id) {
 			return canTransform(id, options);
 		},
-		transform(code, id) {
-			return transformReactFineGrainedSignals(code, id, {
-				importSource: options.importSource ?? "react-fine-grained-signals",
-				reactImportSource: options.reactImportSource ?? "react",
-				mode: options.mode ?? "auto",
-				transform: options.transform ?? "managed",
-				reactCompiler: options.reactCompiler ?? "auto"
-			});
-		},
+		transform,
+		vite: { transform: {
+			order: "pre",
+			handler(code, id) {
+				return canTransform(id, options) ? transform(code, id) : null;
+			}
+		} },
 		esbuild: {
 			config(buildOptions) {
 				configuredLoaders = buildOptions.loader;