[Fix] ui/runtime: unwrap single reactive values before passing to component processors

When a component processor (e.g. `out="symbol|SymbolDetails"`) receives a
single reactive cell as its input, the reactive wrapper was previously passed
through unchanged to the component. This was inconsistent with starred (`*`)
component processors, which already unwrap the reactive wrapper before
iterating, and with function processors, which fully expand values before
calling the function. The mismatch meant a component receiving a bare
reactive cell could not reliably access named keys from its template data
because `resolveSourceValue(data, key)` directly accesses `data[key]`, and
reactive cells do not expose user properties on themselves.

The fix unwraps the top-level reactive cell before handing the value to the
component, matching the existing behaviour of the starred-component path.
Multi-valued sourceMap bindings (`out="a:b,c:d|SymbolDetails"`) are
unaffected because the top-level value is a plain object, not a reactive.

This is a **breaking change** for any component that relied on receiving the
reactive cell directly rather than its unwrapped inner value. Such components
must either add an explicit `unwrap` processor (`out="key|unwrap|SymbolDetails"`)
or extract `.value` from the reactive inside their behaviour functions.

Changed:
- src/js/select/ui/components/runtime.js: unwrap single reactive values in
  `applyNamedProcessor` before passing to component processors, consistent
  with the existing starred-component and function-processor paths.

Added:
- tests/ui-processor-reactives.test.js: three new tests covering unwrapping
  of single reactive values, preservation of non-reactive values, and
  regression guard confirming sourceMap bindings still pass reactive
  internals inside the mapped object.

Updated:
- tests/ui-reactive-props.tests.js: "passes reactive values through component
  processors" now expects the unwrapped value instead of the reactive cell.
- docs/ref-ui.md: added note that single reactive values are unwrapped before
  reaching the component, matching the documented starred-component behaviour.

No breaking changes for: sourceMap bindings (`out="a:b,c:d|Component"`),
starred component processors (`out="items|*Component"`), function processors,
event payloads (`on:click=...`), or template-mode out bindings.

Author: sebastien

docs/ref-ui.md

@@ -555,6 +555,7 @@ Unwrapping follows the usual processor rules:
 
 - function processors receive unwrapped/renderable mapped values
 - component/template processors receive raw/reactive mapped values
+  (single reactive values are unwrapped before reaching the component)
 
 Use `*` to apply a processor to each item of a collection:
 

src/js/select/ui/components/runtime.js

@@ -248,7 +248,7 @@ function applyNamedProcessor(
 ) {
 	if (processor.type === "component") {
 		const component = processor.value;
-		const value = current;
+		const value = current?.isReactive === true ? unwrap(current) : current;
 		if (value === undefined || value === null) return value;
 		if (
 			component?.isTemplate &&

tests/ui-processor-reactives.test.js

@@ -455,4 +455,106 @@ describe("ui processor reactive handling", () => {
 		document.body.innerHTML = "";
 		window.close?.();
 	});
+
+	test("unwraps single reactive values before passing to component processors", async () => {
+		const window = new Window({ url: "http://localhost:8000/repro" });
+		setupGlobals(window);
+		const { cell } = await import("../src/js/select/index.js");
+		const { ui, format } = await import("../src/js/select/ui.js");
+
+		document.body.innerHTML = `
+			<div id="app"></div>
+			<template id="ProcessorSingleUnwrapRepro">
+				<div out="symbol|ProbeComponent"></div>
+			</template>
+		`;
+
+		let seen = null;
+		const ProbeComponent = ui(`<span out="flag"></span>`).does({
+			flag: (_self, data) => {
+				seen = data;
+				return data?.isReactive === true ? "reactive" : "plain";
+			},
+		});
+		registerFormat(format, "ProbeComponent", ProbeComponent);
+
+		const instance = ui("ProcessorSingleUnwrapRepro")
+			.new()
+			.set({ symbol: cell("AAPL") })
+			.mount("#app");
+
+		expect(document.querySelector("#app span")?.textContent).toBe("plain");
+		expect(seen).toBe("AAPL");
+
+		instance.unmount();
+		document.body.innerHTML = "";
+		window.close?.();
+	});
+
+	test("preserves non-reactive values unchanged for component processors", async () => {
+		const window = new Window({ url: "http://localhost:8000/repro" });
+		setupGlobals(window);
+		const { ui, format } = await import("../src/js/select/ui.js");
+
+		document.body.innerHTML = `
+			<div id="app"></div>
+			<template id="ProcessorPlainValueRepro">
+				<div out="symbol|ProbeComponent"></div>
+			</template>
+		`;
+
+		let seen = null;
+		const ProbeComponent = ui(`<span out="flag"></span>`).does({
+			flag: (_self, data) => {
+				seen = data;
+				return typeof data === "string" ? `string:${data}` : "other";
+			},
+		});
+		registerFormat(format, "ProbeComponent", ProbeComponent);
+
+		const instance = ui("ProcessorPlainValueRepro")
+			.new()
+			.set({ symbol: "AAPL" })
+			.mount("#app");
+
+		expect(document.querySelector("#app span")?.textContent).toBe("string:AAPL");
+		expect(seen).toBe("AAPL");
+
+		instance.unmount();
+		document.body.innerHTML = "";
+		window.close?.();
+	});
+
+	test("preserves reactive values inside mapped objects for component processors", async () => {
+		const window = new Window({ url: "http://localhost:8000/repro" });
+		setupGlobals(window);
+		const { cell } = await import("../src/js/select/index.js");
+		const { ui, format } = await import("../src/js/select/ui.js");
+
+		document.body.innerHTML = `
+			<div id="app"></div>
+			<template id="ProcessorMappedPreserveRepro">
+				<div out="a:b,c:d|ProbeComponent"></div>
+			</template>
+		`;
+
+		const ProbeComponent = ui(`<span out="flag"></span>`).does({
+			flag: (_self, data) =>
+				data.a?.isReactive === true && data.c?.isReactive === true
+					? "reactive"
+					: "plain",
+		});
+		registerFormat(format, "ProbeComponent", ProbeComponent);
+
+		const instance = ui("ProcessorMappedPreserveRepro")
+			.new()
+			.set({ b: cell("alpha"), d: cell("beta") })
+			.mount("#app");
+
+		expect(document.querySelector("#app span")?.textContent).toBe("reactive");
+
+		instance.unmount();
+		document.body.innerHTML = "";
+		window.close?.();
+	});
 });

tests/ui-reactive-props.tests.js

@@ -57,7 +57,7 @@ describe("select ui reactive bindings", () => {
 
 		Parent.new().set({ payload: reactive }).mount(document.body);
 
-		expect(seen).toBe(reactive);
+		expect(seen).toEqual([{ id: "name" }]);
 	});
 
 	it("keeps expanding non-component processors during render", () => {