@meekojs/meeko 0.0.2 → 0.0.3

package/README.md

@@ -17,6 +17,7 @@ El proyecto está en etapa temprana. Ya funciona el recorrido completo de un con
 - [Plan de desarrollo y criterios de aceptación](docs/roadmap.md)
 - [Comparativa reproducible con Vue](docs/benchmarks.md)
 - [DevTools para depurar componentes](docs/devtools.md)
+- [Aplicación piloto SSR](examples/pilot/README.md)
 - [Publicación y verificaciones](docs/releasing.md)
 - [Historial de cambios](CHANGELOG.md)
 - [Guía para contribuir](CONTRIBUTING.md)
@@ -45,6 +46,21 @@ export default defineConfig({ plugins: [meeko()] });
 
 El paquete incluye TypeScript 7 y la CLI `meeko`. Puedes comprobar un componente con `pnpm exec meeko check ruta/Componente.meeko`. Vite es opcional si sólo usas el compilador y SSR.
 
+### Crear una aplicación SSR
+
+Con el paquete instalado, `meeko init` crea un proyecto independiente. El servidor renderiza el componente `.meeko` y transfiere props y señales para que el navegador hidrate el HTML existente.
+
+```powershell
+pnpm exec meeko init mi-app
+cd mi-app
+npm install
+npm run dev
+```
+
+Abre `http://127.0.0.1:4173`. `npm run check` genera los tipos del componente y ejecuta TypeScript 7. `npm run build` compila cliente y servidor; `npm start` sirve la versión compilada con SSR. La CLI no sobrescribe archivos de aplicación existentes.
+
+Desde `0.0.3`, si ya ejecutaste `pnpm add @meekojs/meeko` en una carpeta sin código, puedes inicializarla directamente con `pnpm exec meeko init .`. Se conservan el manifiesto, los lockfiles, el workspace y `node_modules`; la CLI rechaza archivos de aplicación o scripts que entrarían en conflicto. Después ejecuta `pnpm install` y `pnpm run dev`. Para actualizar desde `0.0.2`, usa `pnpm add @meekojs/meeko@0.0.3` antes de `init .`.
+
 ## Estructura
 
 | Ruta | Responsabilidad |
@@ -73,11 +89,12 @@ El paquete incluye TypeScript 7 y la CLI `meeko`. Puedes comprobar un componente
 pnpm install
 pnpm run verify
 pnpm run e2e
+pnpm run pilot:e2e
 pnpm run package:smoke
 pnpm run example:serve
 ```
 
-`e2e` usa Chrome instalado localmente; `MEEKO_CHROME_PATH` permite indicar otro ejecutable compatible. Prueba Vite en desarrollo y producción, además de una página SSR con navegación. `package:smoke` instala el tarball en un proyecto temporal externo y prueba CLI, SSR, tipos y Vite. La última orden sirve el ejemplo en `http://127.0.0.1:4173`. El servidor envía HTML y las props iniciales como JSON escapado; el navegador hidrata el botón sin reemplazarlo.
+`e2e` usa Chrome instalado localmente; `MEEKO_CHROME_PATH` permite indicar otro ejecutable compatible. Prueba Vite en desarrollo y producción, además de una página SSR con navegación. `pilot:e2e` prueba la aplicación piloto en Chromium, Firefox y WebKit instalados por Playwright, tanto en desarrollo como en producción. `package:smoke` instala el tarball en un proyecto temporal externo y prueba CLI, SSR, tipos, Vite y `meeko init`. La última orden sirve el contador en `http://127.0.0.1:4173`.
 
 Para probar la compilación automática con Vite:
 
@@ -108,6 +125,10 @@ node dist/cli.js types ruta/Componente.meeko
 
 La aplicación debe pasar **las mismas props** al render y a `hydrate`. `renderWithState(props)` entrega HTML y señales editables serializables; el ejemplo SSR transfiere ambos junto con las props mediante `serializeJson` y llama `hydrate(root, props, state)`. Meeko comprueba que el texto existente coincida durante la hidratación y devuelve una función que desconecta eventos y observadores. El HTML dinámico se escapa en el servidor.
 
+## Aplicación piloto
+
+[`examples/pilot`](examples/pilot/README.md) reúne SSR, hidratación, componentes anidados, listas, formularios, rutas y una API asíncrona. Se ejecuta con `pnpm run pilot:dev`; `pnpm run pilot:build` y `pnpm run pilot:serve` prueban los artefactos de producción sin middleware de Vite. La prueba `pnpm run pilot:e2e` recorre ambos modos en Chromium, Firefox y WebKit. WebKit de Playwright no equivale a una prueba en Safari real.
+
 ## Sintaxis inicial
 
 Un archivo tiene `<script lang="ts">`, `<template>` y un `<style>` opcional; `scoped` limita las reglas CSS al componente. `defineProps<Props>()` declara las props. La plantilla acepta expresiones de texto `{expression}`, eventos `on:click="handler"` y atributos dinámicos `bind:title="expression"`. Los atributos booleanos, como `bind:disabled`, se agregan o eliminan según el valor.

package/dist/cli.js

@@ -1,40 +1,51 @@
 #!/usr/bin/env node
 import { readFile, writeFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { join, resolve } from "node:path";
 import { checkSource } from "./check.js";
 import { compile } from "./compiler.js";
 import { generateTypes } from "./types.js";
+import { initProject } from "./init.js";
 const [command, input, output] = process.argv.slice(2);
-if ((command !== "compile" && command !== "check" && command !== "types") || !input || (command === "compile" && !output) || (command === "check" && output !== undefined && output !== "--json") || (command === "types" && output !== undefined)) {
-    process.stderr.write("Usage: meeko check <component.meeko> [--json]\n       meeko compile <component.meeko> <output.ts>\n       meeko types <component.meeko>\n");
+if ((command !== "compile" && command !== "check" && command !== "types" && command !== "init") || !input || (command === "compile" && !output) || (command === "check" && output !== undefined && output !== "--json") || ((command === "types" || command === "init") && output !== undefined)) {
+    process.stderr.write("Usage: meeko check <component.meeko> [--json]\n       meeko compile <component.meeko> <output.ts>\n       meeko types <component.meeko>\n       meeko init <directory>\n");
     process.exitCode = 1;
 }
 else {
     try {
-        const source = await readFile(input, "utf8");
-        const diagnostics = await checkSource(source, input);
-        if (command === "check" && output === "--json") {
-            process.stdout.write(`${JSON.stringify(diagnostics)}\n`);
-        }
-        else if (diagnostics.length > 0) {
-            for (const diagnostic of diagnostics) {
-                const { line, column } = diagnostic.location;
-                process.stderr.write(`${diagnostic.filename}:${line}:${column} ${diagnostic.code}: ${diagnostic.message}\n`);
-            }
-        }
-        else if (command === "compile") {
-            const result = compile(source, input);
-            await writeFile(output, result.code, "utf8");
-            process.stdout.write(`${output}\n`);
-        }
-        else if (command === "types") {
-            for (const generated of await generateTypes(source, input))
-                process.stdout.write(`${generated}\n`);
+        if (command === "init") {
+            const target = await initProject(input);
+            const manager = existsSync(join(target, "pnpm-lock.yaml")) ? "pnpm" : "npm";
+            const prefix = target === resolve(".") ? "" : `cd ${target} && `;
+            process.stdout.write(`Created ${target}\nNext: ${prefix}${manager} install && ${manager} run dev\n`);
         }
         else {
-            process.stdout.write(`${input}: OK\n`);
+            const source = await readFile(input, "utf8");
+            const diagnostics = await checkSource(source, input);
+            if (command === "check" && output === "--json") {
+                process.stdout.write(`${JSON.stringify(diagnostics)}\n`);
+            }
+            else if (diagnostics.length > 0) {
+                for (const diagnostic of diagnostics) {
+                    const { line, column } = diagnostic.location;
+                    process.stderr.write(`${diagnostic.filename}:${line}:${column} ${diagnostic.code}: ${diagnostic.message}\n`);
+                }
+            }
+            else if (command === "compile") {
+                const result = compile(source, input);
+                await writeFile(output, result.code, "utf8");
+                process.stdout.write(`${output}\n`);
+            }
+            else if (command === "types") {
+                for (const generated of await generateTypes(source, input))
+                    process.stdout.write(`${generated}\n`);
+            }
+            else {
+                process.stdout.write(`${input}: OK\n`);
+            }
+            if (diagnostics.length > 0)
+                process.exitCode = 1;
         }
-        if (diagnostics.length > 0)
-            process.exitCode = 1;
     }
     catch (error) {
         process.stderr.write(`${error instanceof Error ? error.message : String(error)}\n`);

package/dist/compiler.js

@@ -311,18 +311,20 @@ function compileScript(section, source, filename) {
     }
     return { imports, types, setup, names, propsType: propsType ?? "Record<string, never>", propsTypeOffset };
 }
-function hydrationBody(bindings, context, locals = new Map()) {
+function hydrationBody(bindings, context, hot, locals = new Map()) {
     const statements = [];
     const mappedExpression = (expression, offset, expressionLocals = locals) => markSource(rewriteLocals(expression, expressionLocals), offset, expression.length);
     for (const { id, expression, offset } of bindings.texts) {
         const point = locate(context.source, offset);
         const location = `${basename(context.filename)}:${point.line}:${point.column} (text ${id})`;
-        statements.push(`cleanups.push(__meeko.bindText(__scope, ${id}, () => ${mappedExpression(expression, offset)}, ${quote(location)}));`);
+        const source = hot ? `, { file: ${quote(context.filename)}, line: ${point.line}, column: ${point.column}, expression: ${quote(expression)}, kind: "text" }` : "";
+        statements.push(`cleanups.push(__meeko.bindText(__scope, ${id}, () => ${mappedExpression(expression, offset)}, ${quote(location)}${source}));`);
     }
     for (const { id, name, expression, offset } of bindings.attributes) {
         const point = locate(context.source, offset);
         const location = `${basename(context.filename)}:${point.line}:${point.column} (attribute ${name})`;
-        statements.push(`cleanups.push(__meeko.bindAttribute(__scope, ${id}, ${quote(name)}, () => ${mappedExpression(expression, offset)}, ${quote(location)}));`);
+        const source = hot ? `, { file: ${quote(context.filename)}, line: ${point.line}, column: ${point.column}, expression: ${quote(expression)}, kind: "attribute" }` : "";
+        statements.push(`cleanups.push(__meeko.bindAttribute(__scope, ${id}, ${quote(name)}, () => ${mappedExpression(expression, offset)}, ${quote(location)}${source}));`);
     }
     for (const { id, name, expression, offset } of bindings.events) {
         const eventType = ["click", "input", "change", "submit", "keydown", "keyup", "focus", "blur"].includes(name)
@@ -345,7 +347,7 @@ function hydrationBody(bindings, context, locals = new Map()) {
     statements.unshift(...componentStatements);
     for (const entry of bindings.regions) {
         if (entry.kind === "condition") {
-            statements.push(`cleanups.push(__meeko.bindIf(__scope, ${entry.id}, () => ${mappedExpression(entry.expression, entry.offset)}, () => ${rewriteLocals(entry.render, locals)}, (__scope) => { ${hydrationBody(entry.bindings, context, locals)} }));`);
+            statements.push(`cleanups.push(__meeko.bindIf(__scope, ${entry.id}, () => ${mappedExpression(entry.expression, entry.offset)}, () => ${rewriteLocals(entry.render, locals)}, (__scope) => { ${hydrationBody(entry.bindings, context, hot, locals)} }));`);
         }
         else {
             const outerLocals = new Map(locals);
@@ -354,7 +356,10 @@ function hydrationBody(bindings, context, locals = new Map()) {
             const innerLocals = new Map(locals);
             innerLocals.set(entry.itemName, "__meeko_item.value");
             innerLocals.set(entry.indexName, "__meeko_index.value");
-            statements.push(`cleanups.push(__meeko.bindFor(__scope, ${entry.id}, () => ${mappedExpression(entry.expression, entry.offset)}, (${entry.itemName}, ${entry.indexName}) => ${mappedExpression(entry.key, entry.keyOffset, outerLocals)}, (${entry.itemName}, ${entry.indexName}) => ${rewriteLocals(entry.render, outerLocals)}, (__meeko_item, __meeko_index, __scope) => { ${hydrationBody(entry.bindings, context, innerLocals)} }));`);
+            const innerHydration = hydrationBody(entry.bindings, context, hot, innerLocals);
+            // El callback generado sólo usa la señal de índice si aparece en su hidratación.
+            const trackIndex = innerHydration.includes("__meeko_index.value");
+            statements.push(`cleanups.push(__meeko.bindFor(__scope, ${entry.id}, () => ${mappedExpression(entry.expression, entry.offset)}, (${entry.itemName}, ${entry.indexName}) => ${mappedExpression(entry.key, entry.keyOffset, outerLocals)}, (${entry.itemName}, ${entry.indexName}) => ${rewriteLocals(entry.render, outerLocals)}, (__meeko_item, __meeko_index, __scope) => { ${innerHydration} }, ${trackIndex}));`);
         }
     }
     return `const cleanups: Array<() => void> = [];
@@ -398,7 +403,7 @@ export function compile(source, filename = "anonymous.meeko", options = {}) {
     const scopeHotRootParam = hot ? ", __hotRoot?: Element" : "";
     const scopeForward = hot ? "__scope, __inputProps, __state, root" : "__scope, __inputProps, __state";
     const propsType = scriptParts.propsTypeOffset === undefined ? scriptParts.propsType : markSource(scriptParts.propsType, scriptParts.propsTypeOffset);
-    const markedCode = `// Generated by Meeko. Edit the .meeko source instead.\nimport * as __meeko from "@meekojs/meeko/internal";\n${scriptParts.imports.join("\n")}\n${scriptParts.types.join("\n")}\nfunction __setup(__props: ${propsType}) {\n${scriptParts.setup.join("\n")}\nreturn { ${bindings} };\n}\nexport type ComponentProps = ${propsType};\nexport const css = ${quote(css)};\n${hotIdExport}export function renderWithState(__inputProps: ComponentProps): { html: string; state: __meeko.HotState } {\nreturn __meeko.createRoot((dispose) => {\nconst __meeko_transfer = true;\nconst __bindings = __setup(__inputProps);\nconst { ${bindings} } = __bindings;\ntry {\nconst html = ${html};\nconst state = __meeko.snapshotSignals(__bindings);\n__meeko.serializeJson(state);\nreturn { html, state };\n} finally { dispose(); }\n});\n}\nexport function renderToString(__inputProps: ComponentProps${stateParam}): string {\nreturn __meeko.createRoot((dispose) => {\nconst __meeko_transfer = false;\n${setupCode}\ntry { return ${html}; } finally { dispose(); }\n});\n}\nexport function hydrate(root: Element, __inputProps: ComponentProps${stateParam}): () => void {\nconst __scope: __meeko.DomScope = { root };\nreturn hydrateScope(${scopeForward});\n}\nexport function hydrateScope(__scope: __meeko.DomScope, __inputProps: ComponentProps${stateParam}${scopeHotRootParam}): () => void {\nreturn __meeko.createRoot((dispose) => {\nconst __meeko_transfer = false;\n${setupCode}\nconst __release = (() => { ${hydrationBody(bindingsForTemplate, context)} })();\n${releaseCode}\n});\n}\n`;
+    const markedCode = `// Generated by Meeko. Edit the .meeko source instead.\nimport * as __meeko from "@meekojs/meeko/internal";\n${scriptParts.imports.join("\n")}\n${scriptParts.types.join("\n")}\nfunction __setup(__props: ${propsType}) {\n${scriptParts.setup.join("\n")}\nreturn { ${bindings} };\n}\nexport type ComponentProps = ${propsType};\nexport const css = ${quote(css)};\n${hotIdExport}export function renderWithState(__inputProps: ComponentProps): { html: string; state: __meeko.HotState } {\nreturn __meeko.createRoot((dispose) => {\nconst __meeko_transfer = true;\nconst __bindings = __setup(__inputProps);\nconst { ${bindings} } = __bindings;\ntry {\nconst html = ${html};\nconst state = __meeko.snapshotSignals(__bindings);\n__meeko.serializeJson(state);\nreturn { html, state };\n} finally { dispose(); }\n});\n}\nexport function renderToString(__inputProps: ComponentProps${stateParam}): string {\nreturn __meeko.createRoot((dispose) => {\nconst __meeko_transfer = false;\n${setupCode}\ntry { return ${html}; } finally { dispose(); }\n});\n}\nexport function hydrate(root: Element, __inputProps: ComponentProps${stateParam}): () => void {\nconst __scope: __meeko.DomScope = { root };\nreturn hydrateScope(${scopeForward});\n}\nexport function hydrateScope(__scope: __meeko.DomScope, __inputProps: ComponentProps${stateParam}${scopeHotRootParam}): () => void {\nreturn __meeko.createRoot((dispose) => {\nconst __meeko_transfer = false;\n${setupCode}\nconst __release = (() => { ${hydrationBody(bindingsForTemplate, context, hot)} })();\n${releaseCode}\n});\n}\n`;
     const { code, mappings } = extractSourceMappings(markedCode);
     return { code, css, mappings };
 }

package/dist/devtools-ui/index.js

@@ -25,7 +25,14 @@ button[aria-pressed="true"] { border-color: #79b8ff; background: #25476c; }
 .muted { color: #aab7ca; }
 .path { overflow-wrap: anywhere; }
 pre { margin: 4px 0 0; padding: 8px; max-height: 130px; overflow: auto; border-radius: 6px; background: #0a111e; color: #dbeafe; font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
-.events { border-top: 1px solid #334155; padding: 10px 12px; max-height: 130px; overflow: auto; }
+.events { border-top: 1px solid #334155; padding: 10px 12px; max-height: 160px; overflow: auto; }
+.events-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
+.events-head label { color: #aab7ca; }
+.event-button { width: 100%; text-align: left; }
+.event-reads { margin: 4px 0 8px; color: #aab7ca; }
+.event-reads summary { cursor: pointer; }
+.event-reads li { overflow-wrap: anywhere; }
+.event-reads code { color: #dbeafe; }
 .events li { overflow-wrap: anywhere; }
 .status { padding: 7px 12px; border-top: 1px solid #334155; color: #aab7ca; }
 @media (max-width: 540px) {
@@ -81,7 +88,10 @@ function eventLabel(event) {
     };
     const time = Number.isFinite(event.at) ? new Date(event.at).toLocaleTimeString("es", { hour12: false }) : "hora desconocida";
     const detail = event.detail ? ` · ${event.detail}` : "";
-    return `${time} · ${kinds[event.kind]} · ${event.instanceId}${detail}`;
+    const source = event.componentName ? ` · ${event.componentName}` : "";
+    const file = event.file ? ` · ${event.file}` : "";
+    const value = event.kind === "signal" && "value" in event ? ` → ${formatValue(event.value).replace(/\s+/g, " ").slice(0, 240)}` : "";
+    return `${time} · ${kinds[event.kind]} · ${event.instanceId}${source}${file}${detail}${value}`;
 }
 /** Exige un documento conectado a una ventana para registrar eventos del hook. */
 function requireView(document) {
@@ -131,9 +141,16 @@ export function mountDevtoolsPanel(options = {}) {
     main.append(instancesSection, detailSection);
     const eventsSection = element(ownerDocument, "section", undefined, "events");
     const eventsTitle = element(ownerDocument, "h2", "Eventos recientes");
+    const eventsHead = element(ownerDocument, "div", undefined, "events-head");
+    const signalFilterLabel = element(ownerDocument, "label", " Sólo señales");
+    const signalFilter = element(ownerDocument, "input");
+    signalFilter.type = "checkbox";
+    signalFilter.setAttribute("aria-label", "Mostrar sólo eventos de señales");
+    signalFilterLabel.prepend(signalFilter);
+    eventsHead.append(eventsTitle, signalFilterLabel);
     const eventsList = element(ownerDocument, "ol");
     eventsList.setAttribute("aria-label", "Eventos recientes de Meeko");
-    eventsSection.append(eventsTitle, eventsList);
+    eventsSection.append(eventsHead, eventsList);
     const status = element(ownerDocument, "div", undefined, "status");
     status.setAttribute("role", "status");
     status.setAttribute("aria-live", "polite");
@@ -262,11 +279,42 @@ export function mountDevtoolsPanel(options = {}) {
         else {
             detailSection.append(element(ownerDocument, "p", "Selecciona una instancia para ver props y señales."));
         }
-        const recent = snapshot.events.slice(-30).reverse();
+        const recent = snapshot.events.filter((event) => !signalFilter.checked || event.kind === "signal").slice(-30).reverse();
         if (recent.length === 0)
             eventsList.append(element(ownerDocument, "li", "Sin eventos.", "muted"));
-        for (const event of recent)
-            eventsList.append(element(ownerDocument, "li", eventLabel(event)));
+        for (const event of recent) {
+            const row = element(ownerDocument, "li");
+            const instance = byId.get(event.instanceId);
+            const label = eventLabel(event);
+            if (instance) {
+                const button = element(ownerDocument, "button", label, "event-button");
+                button.type = "button";
+                button.dataset.instanceId = instance.id;
+                button.dataset.action = "event";
+                button.addEventListener("click", () => {
+                    hook?.select(instance.id);
+                    showMobileView("detail");
+                    render();
+                });
+                row.append(button);
+            }
+            else {
+                row.textContent = label;
+            }
+            if (event.kind === "signal" && event.reads?.length) {
+                const sites = element(ownerDocument, "details", undefined, "event-reads");
+                sites.append(element(ownerDocument, "summary", `${event.reads.length} expresión(es) que dependen de la señal`));
+                const list = element(ownerDocument, "ul");
+                for (const read of event.reads) {
+                    const usage = element(ownerDocument, "li");
+                    usage.append(element(ownerDocument, "code", `${read.file}:${read.line}:${read.column}`), element(ownerDocument, "span", ` ${read.kind}: `), element(ownerDocument, "code", read.expression));
+                    list.append(usage);
+                }
+                sites.append(list);
+                row.append(sites);
+            }
+            eventsList.append(row);
+        }
         restoreFocus(focusId, focusAction);
     }
     /** Descubre el hook al inicio, al recibir el evento de disponibilidad o al pulsar Actualizar. */
@@ -295,6 +343,7 @@ export function mountDevtoolsPanel(options = {}) {
         hook = undefined;
     }
     view.addEventListener("meeko:devtools-ready", connect);
+    signalFilter.addEventListener("change", render);
     refreshButton.addEventListener("click", connect);
     closeButton.addEventListener("click", unmount);
     connect();

package/dist/devtools.d.ts

@@ -1,4 +1,5 @@
 import type { DomScope } from "./dom.js";
+import type { EffectSource } from "./reactivity.js";
 /** Valores seguros para transportar una captura al panel de desarrollo. */
 export type DevtoolsValue = null | boolean | number | string | DevtoolsValue[] | {
     [key: string]: DevtoolsValue;
@@ -23,6 +24,14 @@ export interface DevtoolsEvent {
     kind: "mount" | "unmount" | "signal" | "breakpoint" | "select" | "hmr";
     instanceId: string;
     detail?: string;
+    /** Identidad del componente conservada incluso después del desmontaje. */
+    componentName?: string;
+    /** Archivo fuente `.meeko` proporcionado por la compilación de desarrollo. */
+    file?: string;
+    /** Valor posterior de una señal, copiado con los mismos límites que una captura. */
+    value?: DevtoolsValue;
+    /** Expresiones de plantilla que dependían de la señal en esta instancia. No son el origen de la escritura. */
+    reads?: EffectSource[];
 }
 /** Captura independiente de referencias DOM y de valores no serializables. */
 export interface DevtoolsSnapshot {

package/dist/devtools.js

@@ -1,4 +1,4 @@
-import { effect, isWritableSignal, untrack } from "./reactivity.js";
+import { currentEffectOwner, effect, isWritableSignal, signalReadSites, untrack } from "./reactivity.js";
 const active = new Map();
 const identities = new WeakMap();
 const listeners = new Set();
@@ -82,10 +82,19 @@ function notify() {
         catch { /* Un panel externo no debe romper la aplicación. */ }
     }
 }
-function record(kind, instanceId, detail) {
+function record(kind, instanceId, detail, value, source, reads) {
     const event = { id: nextEvent++, at: Date.now(), kind, instanceId };
     if (detail !== undefined)
         event.detail = detail;
+    const entry = source ?? active.get(instanceId);
+    if (entry) {
+        event.componentName = entry.name;
+        event.file = entry.file;
+    }
+    if (value !== undefined)
+        event.value = value;
+    if (reads?.length)
+        event.reads = reads;
     recent.push(event);
     if (recent.length > 100)
         recent.shift();
@@ -246,7 +255,7 @@ function unregister(entry) {
         selectedId = null;
     if (highlightedId === entry.id)
         removeHighlight();
-    record("unmount", entry.id);
+    record("unmount", entry.id, undefined, undefined, entry);
 }
 /** Registra señales y ámbito de una instancia hidratada en Vite desarrollo. */
 export function registerDevtoolsInstance(input) {
@@ -263,7 +272,7 @@ export function registerDevtoolsInstance(input) {
     const existing = active.get(identity.id);
     if (existing)
         unregister(existing);
-    const entry = { ...input, id: identity.id, key, breakpoint: identity.breakpoint, stopSignals: [] };
+    const entry = { ...input, id: identity.id, key, owner: currentEffectOwner(), breakpoint: identity.breakpoint, stopSignals: [] };
     active.set(entry.id, entry);
     for (const [name, value] of Object.entries(input.bindings)) {
         if (!isWritableSignal(value))
@@ -271,12 +280,12 @@ export function registerDevtoolsInstance(input) {
         const signal = value;
         let initial = true;
         entry.stopSignals.push(effect(() => {
-            void signal.value;
+            const current = signal.value;
             if (initial) {
                 initial = false;
                 return;
             }
-            record("signal", entry.id, name);
+            record("signal", entry.id, name, safeValue(current), entry, signalReadSites(signal, entry.owner));
             if (entry.breakpoint) {
                 debugger;
             }

package/dist/dom.d.ts

@@ -1,4 +1,4 @@
-import type { Signal } from "./reactivity.js";
+import type { EffectSource, Signal } from "./reactivity.js";
 /** Fragmento de DOM que pertenece a una instancia o a una región dinámica. */
 export interface DomScope {
     root: Element;
@@ -26,9 +26,9 @@ export declare function renderComponent<Props extends object>(id: number, compon
 /** Hidrata un hijo dentro de su rango y actualiza props reactivas con limpieza previa. */
 export declare function bindComponent<Props extends object>(scope: DomScope, id: number, component: ComponentModule<Props>, read: () => Props, location: string): () => void;
 /** Conecta un texto reactivo al marcador SSR y comprueba su valor inicial. */
-export declare function bindText(scope: DomScope, id: number, read: () => unknown, location: string): () => void;
+export declare function bindText(scope: DomScope, id: number, read: () => unknown, location: string, source?: EffectSource): () => void;
 /** Conecta un atributo dinámico al elemento SSR y comprueba su valor inicial. */
-export declare function bindAttribute(scope: DomScope, id: number, name: string, read: () => unknown, location: string): () => void;
+export declare function bindAttribute(scope: DomScope, id: number, name: string, read: () => unknown, location: string, source?: EffectSource): () => void;
 /** Conecta un evento al elemento SSR y entrega su función de limpieza. */
 export declare function bindEvent(scope: DomScope, id: number, name: string, handler: (event: Event) => void): () => void;
 /** Genera los límites estables de una condición en SSR. */
@@ -39,5 +39,9 @@ export declare function bindIf(scope: DomScope, id: number, read: () => unknown,
 export declare function keyToken(key: unknown): string;
 /** Renderiza una lista con límites identificados por claves únicas. */
 export declare function renderFor<T>(id: number, items: Iterable<T>, keyOf: (item: T, index: number) => string | number, render: (item: T, index: number) => string): string;
-/** Hidrata una lista y reordena regiones por clave sin reemplazar nodos conservados. */
-export declare function bindFor<T>(scope: DomScope, id: number, read: () => Iterable<T>, keyOf: (item: T, index: number) => string | number, render: (item: T, index: number) => string, hydrate: (item: Signal<T>, index: Signal<number>, inner: DomScope) => () => void): () => void;
+/**
+ * Hidrata una lista y reordena regiones por clave sin reemplazar nodos conservados.
+ * El compilador desactiva `trackIndex` sólo cuando el cuerpo de hidratación no lee
+ * la señal de índice; las llamadas directas conservan la señal por defecto.
+ */
+export declare function bindFor<T>(scope: DomScope, id: number, read: () => Iterable<T>, keyOf: (item: T, index: number) => string | number, render: (item: T, index: number) => string, hydrate: (item: Signal<T>, index: Signal<number>, inner: DomScope) => () => void, trackIndex?: boolean): () => void;

package/dist/dom.js

@@ -133,27 +133,44 @@ export function bindComponent(scope, id, component, read, location) {
     return () => { stop(); release(); };
 }
 /** Conecta un texto reactivo al marcador SSR y comprueba su valor inicial. */
-export function bindText(scope, id, read, location) {
+export function bindText(scope, id, read, location, source) {
     const marker = findComment(scope, `meeko:text:${id}`);
     const text = marker.nextSibling;
     if (!text || text.nodeType !== 3)
         throw new Error(`Missing text node in ${location}`);
-    if (text.textContent !== String(read()))
+    const initial = String(read());
+    if (text.textContent !== initial)
         throw new Error(`Hydration mismatch in ${location}`);
-    return effect(() => { text.textContent = String(read()); });
+    let first = true;
+    return effect(() => {
+        const next = String(read());
+        if (first) {
+            first = false;
+            if (text.textContent === next)
+                return;
+        }
+        text.textContent = next;
+    }, source);
 }
 /** Conecta un atributo dinámico al elemento SSR y comprueba su valor inicial. */
-export function bindAttribute(scope, id, name, read, location) {
+export function bindAttribute(scope, id, name, read, location, source) {
     const target = findElement(scope, `data-meeko-a-${id}`);
-    if (target.getAttribute(name) !== attributeValue(name, read()))
+    const initial = attributeValue(name, read());
+    if (target.getAttribute(name) !== initial)
         throw new Error(`Hydration mismatch in ${location}`);
+    let first = true;
     return effect(() => {
         const next = attributeValue(name, read());
+        if (first) {
+            first = false;
+            if (target.getAttribute(name) === next)
+                return;
+        }
         if (next === null)
             target.removeAttribute(name);
         else
             target.setAttribute(name, next);
-    });
+    }, source);
 }
 /** Conecta un evento al elemento SSR y entrega su función de limpieza. */
 export function bindEvent(scope, id, name, handler) {
@@ -227,11 +244,42 @@ function moveRange(start, end, before) {
     }
     parent.insertBefore(fragment, before);
 }
-/** Hidrata una lista y reordena regiones por clave sin reemplazar nodos conservados. */
-export function bindFor(scope, id, read, keyOf, render, hydrate) {
+/** Encuentra las posiciones que ya mantienen el orden relativo de la lista anterior. */
+function stableListPositions(indices) {
+    const tails = [];
+    const previous = new Int32Array(indices.length).fill(-1);
+    for (let index = 0; index < indices.length; index++) {
+        const oldIndex = indices[index];
+        if (oldIndex < 0)
+            continue;
+        let low = 0;
+        let high = tails.length;
+        while (low < high) {
+            const middle = (low + high) >>> 1;
+            if (indices[tails[middle]] < oldIndex)
+                low = middle + 1;
+            else
+                high = middle;
+        }
+        if (low > 0)
+            previous[index] = tails[low - 1];
+        tails[low] = index;
+    }
+    const stable = new Set();
+    for (let index = tails.at(-1) ?? -1; index >= 0; index = previous[index])
+        stable.add(index);
+    return stable;
+}
+/**
+ * Hidrata una lista y reordena regiones por clave sin reemplazar nodos conservados.
+ * El compilador desactiva `trackIndex` sólo cuando el cuerpo de hidratación no lee
+ * la señal de índice; las llamadas directas conservan la señal por defecto.
+ */
+export function bindFor(scope, id, read, keyOf, render, hydrate, trackIndex = true) {
     const outer = region(scope, "for", id);
     const entries = new Map();
     const initial = [...read()];
+    let currentKeys = [];
     let cursor = outer.start.nextSibling;
     for (let index = 0; index < initial.length; index++) {
         const item = initial[index];
@@ -249,23 +297,35 @@ export function bindFor(scope, id, read, keyOf, render, hydrate) {
         if (!end)
             throw new Error(`Missing end marker for list key ${key}`);
         const value = signal(item);
-        const position = signal(index);
+        const position = trackIndex ? signal(index) : undefined;
         const release = createRoot((dispose) => {
             const cleanup = hydrate(value, position, { root: scope.root, start, end: end });
             return () => { cleanup(); dispose(); };
         });
         entries.set(key, { key, start, end: end, value, index: position, release });
+        currentKeys.push(key);
         cursor = end.nextSibling;
     }
     if (cursor !== outer.end)
         throw new Error(`Hydration mismatch in list ${id}: extra nodes`);
+    let initialItems = initial;
     const stop = effect(() => {
         const items = [...read()];
+        if (initialItems) {
+            const previous = initialItems;
+            initialItems = undefined;
+            if (items.length === previous.length && items.every((item, index) => Object.is(item, previous[index]) && keyToken(keyOf(item, index)) === currentKeys[index]))
+                return;
+        }
         const nextKeys = items.map((item, index) => keyToken(keyOf(item, index)));
-        if (new Set(nextKeys).size !== nextKeys.length)
+        const nextKeySet = new Set(nextKeys);
+        if (nextKeySet.size !== nextKeys.length)
             throw new Error(`Duplicate Meeko list key in region ${id}`);
+        const oldPositions = new Map(currentKeys.map((key, index) => [key, index]));
+        const oldIndices = nextKeys.map((key) => oldPositions.get(key) ?? -1);
+        const stable = stableListPositions(oldIndices);
         for (const [key, entry] of entries) {
-            if (nextKeys.includes(key))
+            if (nextKeySet.has(key))
                 continue;
             entry.release();
             let node = entry.start;
@@ -293,7 +353,7 @@ export function bindFor(scope, id, read, keyOf, render, hydrate) {
                 if (!start)
                     throw new Error(`Missing new list marker for ${key}`);
                 const value = signal(item);
-                const position = signal(index);
+                const position = trackIndex ? signal(index) : undefined;
                 const release = createRoot((dispose) => {
                     const cleanup = hydrate(value, position, { root: scope.root, start: start, end });
                     return () => { cleanup(); dispose(); };
@@ -303,12 +363,14 @@ export function bindFor(scope, id, read, keyOf, render, hydrate) {
             }
             else {
                 entry.value.value = item;
-                entry.index.value = index;
+                if (entry.index)
+                    entry.index.value = index;
             }
-            if (entry.end.nextSibling !== before)
+            if (oldIndices[index] !== -1 && !stable.has(index) && entry.end.nextSibling !== before)
                 moveRange(entry.start, entry.end, before);
             before = entry.start;
         }
+        currentKeys = nextKeys;
     });
     return () => { stop(); for (const entry of entries.values())
         entry.release(); entries.clear(); };

package/dist/init.d.ts

@@ -0,0 +1,2 @@
+/** Crea un proyecto SSR independiente sin sobrescribir archivos del usuario. */
+export declare function initProject(directory: string): Promise<string>;

package/dist/init.js

@@ -0,0 +1,207 @@
+import { mkdir, readFile, readdir, stat, writeFile } from "node:fs/promises";
+import { basename, dirname, join, resolve } from "node:path";
+/** Entradas que puede dejar un gestor de paquetes antes de generar el proyecto. */
+const packageScaffoldEntries = new Set(["package.json", "package-lock.json", "pnpm-lock.yaml", "pnpm-workspace.yaml", "yarn.lock", "bun.lock", "bun.lockb", "node_modules", ".npmrc", ".git"]);
+/** Comprueba que un valor JSON sea un objeto de configuración. */
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/** Archivos autocontenidos del proyecto inicial, incluidos en la CLI publicada. */
+const starterFiles = {
+    ".gitignore": "node_modules/\ndist/\n*.d.meeko.ts\n",
+    "index.html": `<!doctype html>
+<html lang="es">
+  <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Meeko SSR</title></head>
+  <body><div id="app"></div><script type="module" src="/src/entry-client.ts"></script></body>
+</html>
+`,
+    "vite.config.ts": `import { defineConfig } from "vite";
+import { meeko } from "@meekojs/meeko/vite";
+
+export default defineConfig({ plugins: [meeko()] });
+`,
+    "tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2022", "module": "NodeNext", "moduleResolution": "NodeNext",
+    "lib": ["ES2022", "DOM"], "types": ["node", "vite/client"],
+    "strict": true, "noEmit": true, "allowArbitraryExtensions": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "vite.config.ts"]
+}
+`,
+    "src/App.meeko": `<script lang="ts">
+import { signal } from "@meekojs/meeko";
+
+/** Propiedades transferidas desde el servidor. */
+export interface Props { initial: number }
+
+const props = defineProps<Props>();
+const count = signal(props.initial);
+</script>
+
+<template>
+  <main>
+    <h1>Meeko SSR</h1>
+    <button type="button" on:click="() => count.value++">Contador: {count.value}</button>
+  </main>
+</template>
+
+<style scoped>
+main { max-width: 40rem; margin: 4rem auto; font: 1.2rem system-ui; }
+button { cursor: pointer; padding: .65rem 1rem; }
+</style>
+`,
+    "src/entry-server.ts": `import { serializeJson } from "@meekojs/meeko";
+import { css, renderWithState } from "./App.meeko";
+
+/** Genera HTML y estado inicial desde el mismo componente que hidrata el cliente. */
+export function renderPage(clientSource: string, initial = 1): string {
+  const props = { initial };
+  const rendered = renderWithState(props);
+  return '<!doctype html><html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Meeko SSR</title><style>'
+    + css + '</style></head><body><div id="app">' + rendered.html + '</div><script id="meeko-payload" type="application/json">'
+    + serializeJson({ props, state: rendered.state }) + '</script><script type="module" src="' + clientSource + '"></script></body></html>';
+}
+`,
+    "src/entry-client.ts": `import { hydrate } from "./App.meeko";
+import type { HotState } from "@meekojs/meeko";
+
+const root = document.getElementById("app");
+const payloadNode = document.getElementById("meeko-payload");
+if (!root || !payloadNode?.textContent) throw new Error("Missing SSR root or payload");
+const payload: unknown = JSON.parse(payloadNode.textContent);
+if (typeof payload !== "object" || payload === null || !("props" in payload) || !("state" in payload)) throw new TypeError("Invalid SSR payload");
+const { props, state } = payload;
+if (typeof props !== "object" || props === null || !("initial" in props) || typeof props.initial !== "number" || !Number.isFinite(props.initial)) throw new TypeError("Invalid SSR props");
+if (typeof state !== "object" || state === null || !("count" in state) || typeof state.count !== "number" || !Number.isFinite(state.count)) throw new TypeError("Invalid SSR state");
+hydrate(root, { initial: props.initial }, { count: state.count } satisfies HotState);
+`,
+    "server.mjs": `import { createServer } from "node:http";
+import { readFile } from "node:fs/promises";
+import { dirname, extname, resolve, sep } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { createServer as createViteServer } from "vite";
+
+const root = dirname(fileURLToPath(import.meta.url));
+const production = process.argv.includes("--production");
+const vite = production ? undefined : await createViteServer({ root, server: { middlewareMode: true }, appType: "custom" });
+const clientRoot = resolve(root, "dist/client");
+let clientSource = "/src/entry-client.ts";
+if (production) {
+  const manifest = JSON.parse(await readFile(resolve(clientRoot, ".vite/manifest.json"), "utf8"));
+  const entry = manifest["index.html"];
+  if (!entry?.file) throw new Error("Missing Vite client entry");
+  clientSource = "/" + entry.file;
+}
+
+const contentTypes = { ".js": "text/javascript", ".css": "text/css", ".png": "image/png", ".svg": "image/svg+xml", ".ico": "image/x-icon" };
+const server = createServer(async (request, response) => {
+  try {
+    const path = new URL(request.url ?? "/", "http://localhost").pathname;
+    if (path === "/") {
+      const module = vite ? await vite.ssrLoadModule("/src/entry-server.ts") : await import(pathToFileURL(resolve(root, "dist/server/entry-server.js")).href);
+      const html = module.renderPage(clientSource);
+      response.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+      response.end(vite ? await vite.transformIndexHtml(path, html) : html);
+      return;
+    }
+    if (vite) {
+      vite.middlewares(request, response, () => { response.writeHead(404); response.end(); });
+      return;
+    }
+    const file = resolve(clientRoot, "." + path);
+    if (!file.startsWith(clientRoot + sep)) { response.writeHead(403); response.end(); return; }
+    const body = await readFile(file);
+    response.writeHead(200, { "content-type": contentTypes[extname(file)] ?? "application/octet-stream" });
+    response.end(body);
+  } catch (error) {
+    console.error(error);
+    response.writeHead(500);
+    response.end("Internal server error");
+  }
+});
+
+const port = Number(process.env.PORT ?? 4173);
+server.listen(port, "127.0.0.1", () => console.log("http://127.0.0.1:" + port));
+process.on("SIGINT", () => { server.close(); void vite?.close(); });
+`,
+    "README.md": `# Meeko SSR starter
+
+Proyecto inicial con renderizado en servidor e hidratación del mismo componente \`.meeko\`.
+
+\`\`\`sh
+npm install
+npm run dev
+\`\`\`
+
+Abre http://127.0.0.1:4173. El servidor produce HTML y transfiere las props y señales al navegador.
+
+\`npm run check\` genera los tipos del componente y comprueba TypeScript. \`npm run build\` compila cliente y servidor; \`npm start\` sirve ambas compilaciones con SSR.
+`,
+};
+/** Crea un proyecto SSR independiente sin sobrescribir archivos del usuario. */
+export async function initProject(directory) {
+    const target = resolve(directory);
+    const name = basename(target).toLowerCase().replace(/[^a-z0-9._-]+/g, "-").replace(/^[._-]+|[._-]+$/g, "") || "meeko-app";
+    const packageMetadata = JSON.parse(await readFile(new URL("../package.json", import.meta.url), "utf8"));
+    if (typeof packageMetadata !== "object" || packageMetadata === null || !("version" in packageMetadata) || typeof packageMetadata.version !== "string") {
+        throw new Error("Meeko package version is unavailable");
+    }
+    let existingEntries = [];
+    try {
+        if (!(await stat(target)).isDirectory())
+            throw new Error(`Destination is not a directory: ${target}`);
+        existingEntries = await readdir(target);
+    }
+    catch (error) {
+        if (!(error instanceof Error && "code" in error && error.code === "ENOENT"))
+            throw error;
+    }
+    const unexpected = existingEntries.filter((entry) => !packageScaffoldEntries.has(entry));
+    if (unexpected.length > 0 || (existingEntries.length > 0 && !existingEntries.includes("package.json"))) {
+        throw new Error(`Destination is not empty: ${target}${unexpected.length > 0 ? ` (${unexpected.join(", ")})` : ""}`);
+    }
+    const existing = existingEntries.includes("package.json") ? JSON.parse(await readFile(join(target, "package.json"), "utf8")) : {};
+    if (!isRecord(existing))
+        throw new Error(`Invalid package.json in ${target}`);
+    const existingScripts = existing.scripts ?? {};
+    const existingDependencies = existing.dependencies ?? {};
+    const existingDevDependencies = existing.devDependencies ?? {};
+    const existingEngines = existing.engines ?? {};
+    if (!isRecord(existingScripts) || !isRecord(existingDependencies) || !isRecord(existingDevDependencies) || !isRecord(existingEngines)) {
+        throw new Error(`Invalid package.json in ${target}`);
+    }
+    const scripts = {
+        dev: "node server.mjs",
+        check: "meeko types src/App.meeko && tsc --noEmit",
+        build: "npm run check && vite build --outDir dist/client --manifest && vite build --ssr src/entry-server.ts --outDir dist/server",
+        start: "node server.mjs --production",
+    };
+    const devDependencies = { "@types/node": "^24.0.0", typescript: "^7.0.2", vite: "^8.3.5" };
+    for (const command of Object.keys(scripts)) {
+        if (command in existingScripts)
+            throw new Error(`Destination already defines the ${command} script: ${target}`);
+    }
+    if (Object.keys(existingDependencies).some((dependency) => dependency !== "@meekojs/meeko") || Object.keys(existingDevDependencies).some((dependency) => !(dependency in devDependencies))) {
+        throw new Error(`Destination contains other dependencies: ${target}`);
+    }
+    const packageFile = JSON.stringify({
+        ...existing,
+        name: typeof existing.name === "string" ? existing.name : name,
+        private: true,
+        type: "module",
+        engines: { ...existingEngines, node: ">=24" },
+        scripts: { ...existingScripts, ...scripts },
+        dependencies: { ...existingDependencies, "@meekojs/meeko": packageMetadata.version },
+        devDependencies: { ...existingDevDependencies, ...devDependencies },
+    }, null, 2) + "\n";
+    await mkdir(target, { recursive: true });
+    for (const [filename, content] of Object.entries(starterFiles)) {
+        const path = join(target, filename);
+        await mkdir(dirname(path), { recursive: true });
+        await writeFile(path, content, { encoding: "utf8", flag: "wx" });
+    }
+    await writeFile(join(target, "package.json"), packageFile, { encoding: "utf8", flag: existingEntries.includes("package.json") ? "w" : "wx" });
+    return target;
+}

package/dist/reactivity.d.ts

@@ -6,12 +6,24 @@ export interface ReadonlySignal<T> {
 export interface Signal<T> extends ReadonlySignal<T> {
     value: T;
 }
+/** Ubicación de una expresión de plantilla que lee una señal durante desarrollo. */
+export interface EffectSource {
+    file: string;
+    line: number;
+    column: number;
+    expression: string;
+    kind: "text" | "attribute";
+}
 /** Identifica señales editables creadas por Meeko para conservarlas durante HMR. */
 export declare function isWritableSignal(value: unknown): value is Signal<unknown>;
 /** Crea un valor observable. Las escrituras iguales no notifican cambios. */
 export declare function signal<T>(initial: T): Signal<T>;
 /** Ejecuta una función cuando cambian las señales leídas por ella. */
-export declare function effect(fn: () => void): () => void;
+export declare function effect(fn: () => void, source?: EffectSource): () => void;
+/** Identidad opaca de la raíz reactiva activa; permite aislar instancias anidadas. */
+export declare function currentEffectOwner(): object | undefined;
+/** Devuelve expresiones de plantilla actualmente dependientes de una señal en una raíz. */
+export declare function signalReadSites(value: Signal<unknown>, owner: object | undefined): EffectSource[];
 /** Deriva un valor de otras señales y lo actualiza cuando cambian. */
 export declare function computed<T>(fn: () => T): ReadonlySignal<T>;
 /** Agrupa varias escrituras en una sola ronda de notificaciones. */

package/dist/reactivity.js

@@ -1,5 +1,6 @@
 const writableSignals = new WeakSet();
 const derivedSignals = new WeakSet();
+const effectSources = new WeakMap();
 /** Identifica señales editables creadas por Meeko para conservarlas durante HMR. */
 export function isWritableSignal(value) {
     return typeof value === "object" && value !== null && writableSignals.has(value) && !derivedSignals.has(value);
@@ -11,7 +12,7 @@ let flushing = false;
 const pending = new Set();
 function detach(observer) {
     for (const dependency of observer.dependencies)
-        dependency.subscribers.delete(observer);
+        dependency.subscribers?.delete(observer);
     observer.dependencies.clear();
 }
 function flush() {
@@ -37,12 +38,11 @@ function flush() {
 /** Crea un valor observable. Las escrituras iguales no notifican cambios. */
 export function signal(initial) {
     let current = initial;
-    const subscribers = new Set();
     const result = {
-        subscribers,
+        subscribers: undefined,
         get value() {
             if (activeObserver) {
-                subscribers.add(activeObserver);
+                (result.subscribers ??= new Set()).add(activeObserver);
                 activeObserver.dependencies.add(result);
             }
             return current;
@@ -51,8 +51,9 @@ export function signal(initial) {
             if (Object.is(current, next))
                 return;
             current = next;
-            for (const observer of subscribers)
-                pending.add(observer);
+            if (result.subscribers)
+                for (const observer of result.subscribers)
+                    pending.add(observer);
             flush();
         },
     };
@@ -60,7 +61,7 @@ export function signal(initial) {
     return result;
 }
 /** Ejecuta una función cuando cambian las señales leídas por ella. */
-export function effect(fn) {
+export function effect(fn, source) {
     const owner = activeOwner;
     const observer = {
         dependencies: new Set(),
@@ -80,6 +81,8 @@ export function effect(fn) {
             }
         },
     };
+    if (source)
+        effectSources.set(observer, { owner, source });
     owner?.observers.add(observer);
     observer.run();
     return () => {
@@ -89,6 +92,25 @@ export function effect(fn) {
         owner?.observers.delete(observer);
     };
 }
+/** Identidad opaca de la raíz reactiva activa; permite aislar instancias anidadas. */
+export function currentEffectOwner() {
+    return activeOwner;
+}
+/** Devuelve expresiones de plantilla actualmente dependientes de una señal en una raíz. */
+export function signalReadSites(value, owner) {
+    if (!owner || !isWritableSignal(value))
+        return [];
+    const sites = new Map();
+    for (const observer of value.subscribers ?? []) {
+        const metadata = effectSources.get(observer);
+        if (observer.disposed || metadata?.owner !== owner || !metadata)
+            continue;
+        const source = metadata.source;
+        const key = `${source.file}\u0000${source.line}\u0000${source.column}\u0000${source.kind}\u0000${source.expression}`;
+        sites.set(key, source);
+    }
+    return [...sites.values()];
+}
 /** Deriva un valor de otras señales y lo actualiza cuando cambian. */
 export function computed(fn) {
     const result = signal(undefined);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meekojs/meeko",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "packageManager": "pnpm@12.14.0",
   "description": "Typed .meeko component engine with SSR, hydration, signals, Vite, and DevTools.",
   "license": "MIT",
@@ -45,13 +45,18 @@
     "vite:dev": "vite examples/vite --config examples/vite/vite.config.ts",
     "vite:types": "pnpm run build && node dist/cli.js types examples/counter/Counter.meeko && node dist/cli.js types examples/regions/Regions.meeko && node dist/cli.js types examples/vite/Hot.meeko && node dist/cli.js types examples/nested/Parent.meeko && tsc -p examples/vite/tsconfig.json --noEmit",
     "vite:build": "vite build examples/vite --config examples/vite/vite.config.ts",
+    "pilot:dev": "tsx examples/pilot/server.ts",
+    "pilot:check": "pnpm run build && node dist/cli.js check examples/pilot/App.meeko && node dist/cli.js types examples/pilot/App.meeko && tsc -p examples/pilot/tsconfig.json --noEmit",
+    "pilot:build": "tsx examples/pilot/build.ts",
+    "pilot:serve": "node examples/pilot/.output/server/http.js",
+    "pilot:e2e": "tsx --test tests/pilot.e2e.ts",
     "e2e": "pnpm run example:bundle && pnpm run vite:build && tsx --test tests/browser.e2e.ts",
     "benchmark:check": "pnpm run example:compile && node dist/cli.js compile benchmarks/cases/TreeLeaf.meeko benchmarks/cases/TreeLeaf.generated.ts && node dist/cli.js compile benchmarks/cases/TreeBranch.meeko benchmarks/cases/TreeBranch.generated.ts && node dist/cli.js compile benchmarks/cases/Tree.meeko benchmarks/cases/Tree.generated.ts && node dist/cli.js compile benchmarks/cases/List.meeko benchmarks/cases/List.generated.ts && node dist/cli.js compile benchmarks/cases/Navigation.meeko benchmarks/cases/Navigation.generated.ts && tsc -p tsconfig.benchmark.json --noEmit",
     "benchmark": "pnpm run build && pnpm run benchmark:check && node --expose-gc --import tsx benchmarks/run.ts",
     "benchmark:scenarios": "pnpm run build && pnpm run benchmark:check && node --expose-gc --import tsx benchmarks/scenarios.ts",
     "package:smoke": "pwsh -NoProfile -File tests/package-consumer.ps1",
     "devtools:check": "node --test tools/devtools-extension/tests/*.test.js && tsc -p tools/devtools-extension/tsconfig.json --noEmit",
-    "verify": "pnpm run check && pnpm run test && pnpm run devtools:check && pnpm run example:check && tsc -p tsconfig.test.json --noEmit && pnpm run vite:types && pnpm run benchmark:check && pnpm run vite:build"
+    "verify": "pnpm run check && pnpm run test && pnpm run devtools:check && pnpm run example:check && tsc -p tsconfig.test.json --noEmit && pnpm run vite:types && pnpm run benchmark:check && pnpm run vite:build && pnpm run pilot:check"
   },
   "dependencies": {
     "@typescript/typescript6": "6.0.2",