@frontiers-labs/argon 0.4.0 → 0.5.1

package/dist/annotations.d.ts

@@ -3,6 +3,8 @@ export type Component = string & {
 };
 export declare function css(strings: TemplateStringsArray, ...values: any[]): string;
 export declare function state<T>(initial: T): T;
+export declare function store<T>(initial: T): T;
+export declare function derived<T>(compute: () => T): T;
 export declare function unsafeHtml(html: string): string;
 export interface Ref<T extends Element = Element> {
     readonly current: T | null;
@@ -10,6 +12,7 @@ export interface Ref<T extends Element = Element> {
 export declare function ref<T extends Element = Element>(): Ref<T>;
 export declare function onMount(callback: () => void | (() => void)): void;
 export declare function effect(callback: () => void | (() => void)): void;
+export declare function emit(target: EventTarget, name: string, detail?: unknown): void;
 declare global {
     namespace JSX {
         type Element = string;

package/dist/annotations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"annotations.d.ts","sourceRoot":"","sources":["../src/annotations.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG;IAAE,aAAa,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAE1D,wBAAgB,GAAG,CAAC,OAAO,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,CAE3E;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,GAAG,CAAC,CAEtC;AAMD,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/C;AAKD,MAAM,WAAW,GAAG,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO;IAC9C,QAAQ,CAAC,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC;CAC5B;AAED,wBAAgB,GAAG,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,CAEzD;AAED,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAEjE;AAED,wBAAgB,MAAM,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAEhE;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,KAAK,OAAO,GAAG,MAAM,CAAC;QACtB,UAAU,iBAAiB;YACzB,CAAC,OAAO,EAAE,MAAM,GAAG;gBAAE,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAA;aAAE,CAAC;SACrD;KACF;CACF"}
+{"version":3,"file":"annotations.d.ts","sourceRoot":"","sources":["../src/annotations.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG;IAAE,aAAa,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAE1D,wBAAgB,GAAG,CAAC,OAAO,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,CAE3E;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,GAAG,CAAC,CAEtC;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,GAAG,CAAC,CAEtC;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,CAE9C;AAMD,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/C;AAKD,MAAM,WAAW,GAAG,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO;IAC9C,QAAQ,CAAC,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC;CAC5B;AAED,wBAAgB,GAAG,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,CAEzD;AAED,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAEjE;AAED,wBAAgB,MAAM,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAEhE;AAED,wBAAgB,IAAI,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAE9E;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,KAAK,OAAO,GAAG,MAAM,CAAC;QACtB,UAAU,iBAAiB;YACzB,CAAC,OAAO,EAAE,MAAM,GAAG;gBAAE,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAA;aAAE,CAAC;SACrD;KACF;CACF"}

package/dist/annotations.js

@@ -4,6 +4,12 @@ export function css(strings, ...values) {
 export function state(initial) {
     return initial;
 }
+export function store(initial) {
+    return initial;
+}
+export function derived(compute) {
+    return compute();
+}
 // Compile-time marker: interpolate the string as raw HTML instead of escaping
 // it. Identity at runtime — the name carries the audit burden (grep for it the
 // way you would `dangerouslySetInnerHTML`). Only feed it markup you trust or
@@ -20,4 +26,7 @@ export function onMount(callback) {
 export function effect(callback) {
     void callback;
 }
+export function emit(target, name, detail) {
+    target.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }));
+}
 //# sourceMappingURL=annotations.js.map

package/dist/annotations.js.map

@@ -1 +1 @@
-{"version":3,"file":"annotations.js","sourceRoot":"","sources":["../src/annotations.ts"],"names":[],"mappings":"AAKA,MAAM,UAAU,GAAG,CAAC,OAA6B,EAAE,GAAG,MAAa;IACjE,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;AACxF,CAAC;AAED,MAAM,UAAU,KAAK,CAAI,OAAU;IACjC,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,8EAA8E;AAC9E,+EAA+E;AAC/E,6EAA6E;AAC7E,gFAAgF;AAChF,MAAM,UAAU,UAAU,CAAC,IAAY;IACrC,OAAO,IAAI,CAAC;AACd,CAAC;AASD,MAAM,UAAU,GAAG;IACjB,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC3B,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,QAAmC;IACzD,KAAK,QAAQ,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,QAAmC;IACxD,KAAK,QAAQ,CAAC;AAChB,CAAC"}
+{"version":3,"file":"annotations.js","sourceRoot":"","sources":["../src/annotations.ts"],"names":[],"mappings":"AAKA,MAAM,UAAU,GAAG,CAAC,OAA6B,EAAE,GAAG,MAAa;IACjE,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;AACxF,CAAC;AAED,MAAM,UAAU,KAAK,CAAI,OAAU;IACjC,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,KAAK,CAAI,OAAU;IACjC,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,OAAO,CAAI,OAAgB;IACzC,OAAO,OAAO,EAAE,CAAC;AACnB,CAAC;AAED,8EAA8E;AAC9E,+EAA+E;AAC/E,6EAA6E;AAC7E,gFAAgF;AAChF,MAAM,UAAU,UAAU,CAAC,IAAY;IACrC,OAAO,IAAI,CAAC;AACd,CAAC;AASD,MAAM,UAAU,GAAG;IACjB,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC3B,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,QAAmC;IACzD,KAAK,QAAQ,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,QAAmC;IACxD,KAAK,QAAQ,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,IAAI,CAAC,MAAmB,EAAE,IAAY,EAAE,MAAgB;IACtE,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AACzF,CAAC"}

package/dist/codegen/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/codegen/client.ts"],"names":[],"mappings":"AAQA,OAAO,EAWL,KAAK,QAAQ,EAKd,MAAM,UAAU,CAAC;AAUlB,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEtD,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,QAAQ,CAAC;IAElB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAQD,wBAAgB,aAAa,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,GAAE,aAAkB,GAAG,MAAM,CAEhF;AAGD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,GAAE,aAAkB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAqD5G"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/codegen/client.ts"],"names":[],"mappings":"AAQA,OAAO,EAWL,KAAK,QAAQ,EAMd,MAAM,UAAU,CAAC;AAUlB,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEtD,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,QAAQ,CAAC;IAElB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAQD,wBAAgB,aAAa,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,GAAE,aAAkB,GAAG,MAAM,CAEhF;AAGD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,GAAE,aAAkB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CA2D5G"}

package/dist/codegen/client.js

@@ -20,6 +20,9 @@ export function compileClient(module, opts = {}) {
 }
 // Full result including the source map (used by the CLI to write .js.map).
 export function compileClientCore(module, opts = {}) {
+    if (module.components.length === 0 && module.stores.length > 0) {
+        return { code: generateStoreModule(module.stores) };
+    }
     if (module.components.length === 0) {
         throw new ArgonCompileError([{
                 code: "ARGON001",
@@ -44,7 +47,7 @@ export function compileClientCore(module, opts = {}) {
         }
     }
     for (const component of module.components) {
-        edits.push({ start: component.span.start, end: component.span.end, text: generateClass(component, !!opts.compat03) });
+        edits.push({ start: component.span.start, end: component.span.end, text: generateClass(component, !!opts.compat03, storeAliases(module)) });
     }
     edits.sort((a, b) => b.start - a.start);
     let out = module.sourceText;
@@ -61,14 +64,95 @@ export function compileClientCore(module, opts = {}) {
         transformers: { before: [stripTags] },
     });
     const composedImports = module.composedImports.map(spec => `import ${JSON.stringify(spec)};\n`).join("");
+    const storeImports = [...storeAliases(module)].map(([spec, alias]) => `import { argonSubscribe as ${alias} } from ${JSON.stringify(spec)};\n`).join("");
     // Drop tsc's sourceMappingURL (it derives the wrong extension from the .tsx
     // input); the caller appends the correct `<name>.js.map` reference.
     const body = transpiled.outputText.replace(/\n?\/\/# sourceMappingURL=[^\n]*\n?$/, "");
     const code = "// Generated by Argon compiler — do not edit by hand.\n// CSR output: browser-only hydration and reactive updates. SSR data evaluation stays out of this file.\n\n" +
         composedImports +
+        storeImports +
         body.trimStart();
     return { code, map: transpiled.sourceMapText };
 }
+function storeAliases(module) {
+    const specs = new Set();
+    const note = (expr) => {
+        visitExpr(expr, e => {
+            if (e.kind === "store")
+                specs.add(e.module);
+        });
+    };
+    for (const component of module.components) {
+        for (const stmt of component.setup) {
+            if (stmt.kind === "let")
+                note(stmt.init);
+        }
+        for (const expr of component.template.exprs)
+            note(expr);
+    }
+    return new Map([...specs].map((spec, i) => [spec, `__argonStoreSubscribe${i}`]));
+}
+function generateStoreModule(stores) {
+    const printInitial = (expr) => printExpr(expr, text => text);
+    const lines = [
+        "// Generated by Argon compiler — do not edit by hand.",
+        "// CSR store output: reactive shared state with no runtime dependency.",
+        "",
+        "const __argonSubs = new Map();",
+        "",
+        "function __argonNotify(key) {",
+        "  for (const fn of __argonSubs.get(key) ?? []) fn();",
+        "}",
+        "",
+        "export function argonSubscribe(key, fn) {",
+        "  let set = __argonSubs.get(key);",
+        "  if (!set) __argonSubs.set(key, set = new Set());",
+        "  set.add(fn);",
+        "  return () => {",
+        "    set.delete(fn);",
+        "    if (set.size === 0) __argonSubs.delete(key);",
+        "  };",
+        "}",
+        "",
+    ];
+    for (const store of stores) {
+        if (store.derived) {
+            const slot = `__argon_${store.name}`;
+            const deps = [...referencedNames(store.derived)]
+                .filter(name => name.startsWith("store::"))
+                .map(name => name.slice("store::".length));
+            lines.push(`function __argonCompute_${store.name}() {`, `  return ${printInitial(store.derived)};`, `}`, `let ${slot} = __argonCompute_${store.name}();`, `export const ${store.name} = {`, `  get value() { return ${slot}; },`, `};`, `function __argonUpdate_${store.name}() {`, `  const value = __argonCompute_${store.name}();`, `  if (Object.is(${slot}, value)) return;`, `  ${slot} = value;`, `  __argonNotify(${JSON.stringify(store.name)});`, `}`, ...deps.map(dep => `argonSubscribe(${JSON.stringify(dep)}, __argonUpdate_${store.name});`), "");
+        }
+        else if (store.fields) {
+            lines.push(`export const ${store.name} = {};`);
+            for (const field of store.fields) {
+                const slot = `__argon_${store.name}_${field.name}`;
+                const key = `${store.name}.${field.name}`;
+                lines.push(`let ${slot} = ${printInitial(field.initial)};`, `Object.defineProperty(${store.name}, ${JSON.stringify(field.name)}, {`, `  enumerable: true,`, `  get() { return ${slot}; },`, `  set(value) {`, `    if (Object.is(${slot}, value)) return;`, `    ${slot} = value;`, `    __argonNotify(${JSON.stringify(key)});`, `  },`, `});`, "");
+            }
+        }
+        else if (store.initial) {
+            const slot = `__argon_${store.name}`;
+            lines.push(`let ${slot} = ${printInitial(store.initial)};`, `export const ${store.name} = {`, `  get value() { return ${slot}; },`, `  set value(value) {`, `    if (Object.is(${slot}, value)) return;`, `    ${slot} = value;`, `    __argonNotify(${JSON.stringify(store.name)});`, `  },`, `};`, "");
+        }
+    }
+    lines.push("export function argonSnapshot() {", "  return {", stores.map(store => store.fields
+        ? `    ${store.name}: { ${store.fields.map(f => `${f.name}: ${store.name}.${f.name}`).join(", ")} },`
+        : `    ${store.name}: ${store.name}.value,`).join("\n"), "  };", "}", "", "export function argonHydrate(snapshot) {", "  if (!snapshot) return;");
+    for (const store of stores) {
+        if (store.fields) {
+            lines.push(`  if (snapshot.${store.name}) {`);
+            for (const field of store.fields)
+                lines.push(`    if (${JSON.stringify(field.name)} in snapshot.${store.name}) ${store.name}.${field.name} = snapshot.${store.name}.${field.name};`);
+            lines.push("  }");
+        }
+        else if (!store.derived) {
+            lines.push(`  if (${JSON.stringify(store.name)} in snapshot) ${store.name}.value = snapshot.${store.name};`);
+        }
+    }
+    lines.push("}", "", "const __argonPayload = globalThis.document?.querySelector?.('script[type=\"application/json\"][data-argon-stores]');", "if (__argonPayload?.textContent) argonHydrate(JSON.parse(__argonPayload.textContent));", "");
+    return lines.join("\n");
+}
 // JSX compiles only in template value positions, where lowering turns it into
 // string templates. Opaque code containing JSX (event handlers, module
 // helpers, untyped consts) would pass through verbatim and break the emitted
@@ -88,6 +172,12 @@ function collectJsxOpaque(module) {
         visitExpr(expr, e => {
             if (e.kind === "opaque" && e.hasJsx)
                 flag(e.diagnostic.span);
+            if (e.kind === "template") {
+                for (const event of e.events ?? []) {
+                    if (event.handler.kind === "opaque" && event.handler.hasJsx)
+                        flag(event.handler.diagnostic.span);
+                }
+            }
         });
     };
     for (const decl of module.decls) {
@@ -142,11 +232,25 @@ function kebab(name) {
 // untouched. `kind` controls printing: statements keep trailing semicolons,
 // expressions must not have one (they land inside `${...}` and call sites).
 function rewriteRefs(text, refs, states, kind) {
-    if (refs.size === 0 && states.size === 0)
-        return text.trim();
     const sf = ts.createSourceFile("_.ts", text, ts.ScriptTarget.Latest, true);
     const transformer = ctx => {
         const visit = (node) => {
+            if (ts.isCallExpression(node) &&
+                ts.isIdentifier(node.expression) &&
+                node.expression.text === "emit" &&
+                node.arguments.length >= 2) {
+                const [target, name, detail] = node.arguments;
+                return ctx.factory.createCallExpression(ctx.factory.createPropertyAccessExpression(ts.visitNode(target, visit), "dispatchEvent"), undefined, [
+                    ctx.factory.createNewExpression(ctx.factory.createIdentifier("CustomEvent"), undefined, [
+                        ts.visitNode(name, visit),
+                        ctx.factory.createObjectLiteralExpression([
+                            ctx.factory.createPropertyAssignment("bubbles", ctx.factory.createTrue()),
+                            ctx.factory.createPropertyAssignment("composed", ctx.factory.createTrue()),
+                            ctx.factory.createPropertyAssignment("detail", detail ? ts.visitNode(detail, visit) : ctx.factory.createVoidZero()),
+                        ]),
+                    ]),
+                ]);
+            }
             if (ts.isBinaryExpression(node) &&
                 ts.isIdentifier(node.left) &&
                 states.has(node.left.text)) {
@@ -203,6 +307,7 @@ function printExpr(e, opaque, attrEnc = "esc") {
         case "num": return e.text;
         case "bool": return String(e.value);
         case "ref": return e.space === "prop" || e.space === "state" ? `this.#${e.name}` : e.name;
+        case "store": return e.field ? `${e.local}.${e.field}` : `${e.local}.value`;
         case "member": return `${po(e.object)}.${e.name}`;
         case "length": return `${po(e.object)}.length`;
         case "index": return `${po(e.object)}[${p(e.index)}]`;
@@ -301,7 +406,7 @@ function coerce(type, value) {
     }
 }
 // ── Class generation ─────────────────────────────────────────────────────────
-function generateClass(component, compat03 = false) {
+function generateClass(component, compat03 = false, storeAliases = new Map()) {
     const props = new Set(component.props.map(p => p.name));
     const states = new Set(component.states.map(s => s.name));
     const refs = new Set([...props, ...states, ...component.refs]);
@@ -309,6 +414,40 @@ function generateClass(component, compat03 = false) {
     const opaqueExpr = text => rewriteRefs(text, refs, states, "expr");
     const opaqueStmt = text => rewriteRefs(text, refs, states, "stmts");
     const print = (e) => printExpr(e, opaqueExpr);
+    const templateEventsIn = (expr) => {
+        const events = [];
+        visitExpr(expr, e => {
+            if (e.kind === "template") {
+                for (const event of e.events ?? [])
+                    events.push(event);
+            }
+        });
+        return events;
+    };
+    const nestedEvents = [];
+    const noteNestedEvents = (expr) => {
+        nestedEvents.push(...templateEventsIn(expr));
+    };
+    for (const stmt of component.setup)
+        if (stmt.kind === "let")
+            noteNestedEvents(stmt.init);
+    for (const expr of template.exprs)
+        noteNestedEvents(expr);
+    const storeDeps = new Map();
+    const noteStoreDeps = (expr) => {
+        visitExpr(expr, e => {
+            if (e.kind !== "store")
+                return;
+            const deps = storeDeps.get(e.module) ?? new Set();
+            deps.add(e.key);
+            storeDeps.set(e.module, deps);
+        });
+    };
+    for (const stmt of component.setup)
+        if (stmt.kind === "let")
+            noteStoreDeps(stmt.init);
+    for (const expr of template.exprs)
+        noteStoreDeps(expr);
     // ── Escape-by-default text rendering (mirrors the Rust backend) ──
     //
     // Setup locals whose value is markup (a JSX string) read raw; every other
@@ -376,11 +515,30 @@ function generateClass(component, compat03 = false) {
     };
     // A map whose items are markup: render each item's result through textExpr so
     // interpolated scalar parts are escaped while the markup passes through.
-    const printMapText = (m, result = textExpr) => {
+    const mapEventItem = (html, ctx, events) => {
+        if (events.length === 0)
+            return html;
+        const handlers = `{ ${events.map(event => `${JSON.stringify(event.id)}: ${print(event.handler)}`).join(", ")} }`;
+        const ids = `[${[...new Set(events.map(event => event.id))].map(id => JSON.stringify(String(id))).join(", ")}]`;
+        return `this.#mapEventItem(${html}, ${ctx}, ${handlers}, ${ids})`;
+    };
+    const printMapText = (m, result = textExpr, eventContext) => {
+        const events = templateEventsIn(m.body.result);
+        const needsIndex = events.length > 0 && !eventContext?.key && !m.indexVar;
         const item = typeof m.item === "string" ? m.item : `[${m.item.join(", ")}]`;
-        const params = m.indexVar ? `(${item}, ${m.indexVar})` : `(${item})`;
+        const indexVar = m.indexVar ?? (needsIndex ? "__argonIndex" : undefined);
+        const params = indexVar ? `(${item}, ${indexVar})` : `(${item})`;
         const pre = m.body.stmts.map(s => printStmt(s, opaqueExpr, undefined, "esc")).join(" ");
-        const body = m.body.stmts.length > 0 ? `{ ${pre} return ${result(m.body.result)}; }` : result(m.body.result);
+        const rendered = (() => {
+            const html = result(m.body.result);
+            if (events.length === 0 || !eventContext || eventContext.key)
+                return html;
+            const ctx = eventContext.key
+                ? `${JSON.stringify(`${eventContext.bindingId}:`)} + ${print(eventContext.key)}`
+                : `${JSON.stringify(`${eventContext.bindingId}:`)} + ${indexVar}`;
+            return mapEventItem(html, ctx, events);
+        })();
+        const body = m.body.stmts.length > 0 ? `{ ${pre} return ${rendered}; }` : rendered;
         return `${po(m.array)}.map(${params} => ${body})`;
     };
     const attrExpr = (e) => {
@@ -417,7 +575,7 @@ function generateClass(component, compat03 = false) {
         .join("\n    ");
     // Reactive dependencies per binding, flowing through setup locals. Refs are
     // rewritten like props/states but never change, so they are not tracked.
-    const tracked = new Set([...props, ...states]);
+    const tracked = new Set([...props, ...states, ...[...storeDeps.entries()].flatMap(([module, keys]) => [...keys].map(key => `store:${module}:${key}`))]);
     const locals = localDependencies(component, tracked);
     const condition = (exprIndices) => {
         const deps = bindingDependencies(component, exprIndices, tracked, locals);
@@ -537,6 +695,10 @@ function generateClass(component, compat03 = false) {
         const info = listInfoOf(b);
         return info !== undefined && info.key === undefined;
     });
+    const hasMapEventBindings = template.textBindings.some(b => {
+        const info = listInfoOf(b);
+        return info !== undefined && templateEventsIn(info.map.body.result).length > 0;
+    });
     // `__argonNext` holds the freshly rendered string so unchanged bindings can
     // skip DOM work; the name is reserved and must not collide with user locals.
     const updateStatements = [
@@ -545,14 +707,19 @@ function generateClass(component, compat03 = false) {
             if (info && info.key) {
                 // Each item renders to a [key, html] pair; the reconciler matches by
                 // key so reordered items move their existing nodes.
-                const pair = (r) => `[${print(info.key)}, ${textExpr(r)}]`;
+                const events = templateEventsIn(info.map.body.result);
+                const pair = (r) => {
+                    const key = print(info.key);
+                    const html = mapEventItem(textExpr(r), `${JSON.stringify(`${b.id}:`)} + ${key}`, events);
+                    return `[${key}, ${html}]`;
+                };
                 return `    if (${condition(b.exprIndices)}) {
-      this.#reconcileKeyedList(${b.id}, this.#textStart${b.id}, this.#textEnd${b.id}, ${printMapText(info.map, pair)});
+      this.#reconcileKeyedList(${b.id}, this.#textStart${b.id}, this.#textEnd${b.id}, ${printMapText(info.map, pair, { bindingId: b.id, key: info.key })});
     }`;
             }
             if (info) {
                 return `    if (${condition(b.exprIndices)}) {
-      this.#reconcileList(${b.id}, this.#textStart${b.id}, this.#textEnd${b.id}, ${printMapText(info.map)});
+      this.#reconcileList(${b.id}, this.#textStart${b.id}, this.#textEnd${b.id}, ${printMapText(info.map, textExpr, { bindingId: b.id })});
     }`;
             }
             return `    if (${condition(b.exprIndices)}) {
@@ -633,18 +800,57 @@ ${textCases}
     const attrQueries = attrIds
         .map(id => `    this.#attr${id} = root.querySelector('[data-argon-bind="${id}"]');`)
         .join("\n");
-    const wiring = template.events
+    const eventBindings = [
+        ...template.events.map(b => ({ id: b.id, event: b.event, handler: template.exprs[b.exprIndex] })),
+        ...nestedEvents,
+    ];
+    const wiring = eventBindings
         .map(b => {
-        const handler = print(template.exprs[b.exprIndex]);
-        return `    scope.querySelectorAll('[data-argon="${b.id}"]').forEach(el => el.addEventListener('${b.event}', ${handler}));`;
+        const handler = print(b.handler);
+        return `    this.#eventTargets(scope, '${b.id}').forEach(el => this.#listen(el, '${b.id}', '${b.event}', ${handler}));`;
     })
         .join("\n");
+    const mapEventHelpers = hasMapEventBindings ? `
+  #mapEventItem(html, ctx, handlers, ids) {
+    const key = String(ctx);
+    this.#eventContexts[key] = handlers;
+    const attr = key.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+    let out = String(html);
+    for (const id of ids) out = out.replaceAll(\`data-argon="\${id}"\`, \`data-argon="\${id}" data-argon-c="\${attr}"\`);
+    return out;
+  }
+
+  #eventHandler(el, id, fallback) {
+    const ctx = el.getAttribute('data-argon-c');
+    return ctx && this.#eventContexts[ctx]?.[id] ? this.#eventContexts[ctx][id] : fallback;
+  }
+
+` : "";
+    const eventHelpers = eventBindings.length === 0 ? "" : `
+  #eventTargets(scope, id) {
+    const selector = \`[data-argon="\${id}"]\`;
+    const targets = [...scope.querySelectorAll(selector)];
+    if (scope.nodeType === 1 && scope.matches(selector)) targets.unshift(scope);
+    return targets;
+  }
+
+  #listen(el, id, event, handler) {
+    const key = id + ':' + event;
+    if (!el.__argonListeners) Object.defineProperty(el, '__argonListeners', { value: {} });
+    const prev = el.__argonListeners[key];
+    if (prev) el.removeEventListener(event, prev);
+    const next = ${hasMapEventBindings ? "this.#eventHandler(el, id, handler)" : "handler"};
+    el.__argonListeners[key] = next;
+    el.addEventListener(event, next);
+  }
+${mapEventHelpers}`;
     const textFields = template.textBindings.map(b => `  #textStart${b.id};
   #textEnd${b.id};${listBindings.has(b.id) ? "" : `
   #textLast${b.id};`}`).join("\n");
     const attrFields = attrIds.map(id => `  #attr${id};`).join("\n");
     const attrMemoFields = template.attrBindings.map((_b, i) => `  #attrLast${i};`).join("\n");
     const listsField = listBindings.size > 0 ? "  #lists = {};" : "";
+    const eventContextField = hasMapEventBindings ? "  #eventContexts = {};" : "";
     // ── Refs and lifecycle hooks ──
     //
     // A ref resolves lazily against the live shadow DOM, so it stays correct
@@ -696,6 +902,7 @@ ${textCases}
     const mounts = hooksOf("mount");
     const effects = hooksOf("effect");
     const hasHooks = mounts.length > 0 || effects.length > 0;
+    const storeField = storeDeps.size > 0 ? "  #storeCleanups = [];" : "";
     const hookFields = hasHooks
         ? `  #hooksLive = false;${mounts.length > 0 ? "\n  #cleanups = [];" : ""}`
         : "";
@@ -733,13 +940,28 @@ ${[mountRuns, effectRuns].filter(Boolean).join("\n")}`
     const effectCleanups = effects
         .map((_e, i) => `    if (this.#effect${i}Cleanup) { this.#effect${i}Cleanup(); this.#effect${i}Cleanup = undefined; }`)
         .join("\n");
-    const disconnected = !hasHooks ? "" : `
+    const storeConnect = storeDeps.size === 0 ? "" : `
+  #connectStores() {
+    if (this.#storeCleanups.length > 0) return;
+${[...storeDeps.entries()].flatMap(([module, keys]) => [...keys].map(key => `    this.#storeCleanups.push(${storeAliases.get(module)}(${JSON.stringify(key)}, () => this.#updateBindings(${JSON.stringify(`store:${module}:${key}`)})));`)).join("\n")}
+  }
+
+  #disconnectStores() {
+    for (const cleanup of this.#storeCleanups.splice(0)) cleanup();
+  }
+`;
+    const disconnectBody = [
+        storeDeps.size > 0 ? "    this.#disconnectStores();" : "",
+        hasHooks ? "    this.#hooksLive = false;" : "",
+        hasHooks && mounts.length > 0 ? "    for (const cleanup of this.#cleanups.splice(0)) cleanup();" : "",
+        effectCleanups,
+    ].filter(Boolean).join("\n");
+    const disconnectedCombined = storeDeps.size === 0 && !hasHooks ? "" : `
 
   disconnectedCallback() {
-    this.#hooksLive = false;
-${[mounts.length > 0 ? "    for (const cleanup of this.#cleanups.splice(0)) cleanup();" : "", effectCleanups].filter(Boolean).join("\n")}
+${disconnectBody}
   }`;
-    const bindingFields = [textFields, attrFields, attrMemoFields, listsField, refFields, hookFields].filter(Boolean).join("\n");
+    const bindingFields = [textFields, attrFields, attrMemoFields, listsField, eventContextField, refFields, storeField, hookFields].filter(Boolean).join("\n");
     // Keyed list patching: items are matched by key, so reordered or spliced
     // items move their existing DOM nodes; only items whose rendered HTML
     // changed (or that are genuinely new) are re-parsed.
@@ -782,25 +1004,38 @@ ${[mounts.length > 0 ? "    for (const cleanup of this.#cleanups.splice(0)) clea
         if (i === p) p++;
         else anchor.before(...oldNodes[i]);
         if (oldHtmls[i] !== html) {
-          for (let k = 1; k < oldNodes[i].length; k++) oldNodes[i][k].remove();
           const content = parse(html);
           const fresh = [oldNodes[i][0], ...content.childNodes];
-          oldNodes[i][0].after(content);
-          nodes.push(fresh);
+          if (this.#patchItem(oldNodes[i], fresh)) {
+            nodes.push(oldNodes[i]);
+          } else {
+            for (let k = 1; k < oldNodes[i].length; k++) oldNodes[i][k].remove();
+            oldNodes[i][0].after(content);
+            nodes.push(fresh);
+          }
         } else {
-          nodes.push(oldNodes[i]);
+${hasMapEventBindings ? `          for (let k = 1; k < oldNodes[i].length; k++) this.#wireEvents(oldNodes[i][k]);
+` : ""}          nodes.push(oldNodes[i]);
         }
       }
       keys.push(key);
       htmls.push(html);
     }
     for (let i = 0; i < oldNodes.length; i++) {
-      if (!used[i]) for (const n of oldNodes[i]) n.remove();
+      if (!used[i]) {
+${hasMapEventBindings ? `        delete this.#eventContexts[id + ':' + oldKeys[i]];
+` : ""}        for (const n of oldNodes[i]) n.remove();
+      }
     }
     list.keys = keys;
     list.htmls = htmls;
     list.nodes = nodes;
   }
+
+  #patchItem(current, fresh) {
+    if (current.length !== 2 || fresh.length !== 2) return false;
+    return this.#patchElement(current[1], fresh[1]);
+  }
 `;
     // Per-item list patching: each item's rendered HTML is cached, and a
     // comment marker delimits its DOM nodes. Only items whose HTML changed are
@@ -816,7 +1051,8 @@ ${[mounts.length > 0 ? "    for (const cleanup of this.#cleanups.splice(0)) clea
     }
     const { htmls, marks } = list;
     if (items.length < htmls.length) {
-      let node = marks[items.length];
+${hasMapEventBindings ? `      for (let i = items.length; i < htmls.length; i++) delete this.#eventContexts[id + ':' + i];
+` : ""}      let node = marks[items.length];
       while (node && node !== end) { const next = node.nextSibling; node.remove(); node = next; }
       htmls.length = items.length;
       marks.length = items.length;
@@ -824,8 +1060,12 @@ ${[mounts.length > 0 ? "    for (const cleanup of this.#cleanups.splice(0)) clea
     for (let i = 0; i < items.length; i++) {
       const html = String(items[i]);
       if (i < htmls.length) {
-        if (htmls[i] === html) continue;
         const stop = i + 1 < marks.length ? marks[i + 1] : end;
+        if (htmls[i] === html) {
+${hasMapEventBindings ? `          let current = marks[i].nextSibling;
+          while (current && current !== stop) { this.#wireEvents(current); current = current.nextSibling; }
+` : ""}          continue;
+        }
         let node = marks[i].nextSibling;
         while (node && node !== stop) { const next = node.nextSibling; node.remove(); node = next; }
         const template = document.createElement('template');
@@ -850,12 +1090,13 @@ ${[mounts.length > 0 ? "    for (const cleanup of this.#cleanups.splice(0)) clea
     const root = shadow ?? this.attachShadow({ mode: 'open' });
     if (!shadow) root.innerHTML = this.#render();
     this.#mount(root);`;
-    const connected = hasHooks
+    const connectStores = storeDeps.size > 0 ? "\n    this.#connectStores();" : "";
+    const connected = hasHooks || storeDeps.size > 0
         ? `  connectedCallback() {
     if (!this.#isCSR && !this.#bindingsMounted) {
 ${hydrate}
-    }${hookConnect}
-  }${disconnected}`
+    }${connectStores}${hookConnect}
+  }${disconnectedCombined}`
         : `  connectedCallback() {
     if (this.#isCSR || this.#bindingsMounted) return;
 ${hydrate}
@@ -908,21 +1149,39 @@ ${walker}${attrQueries}${attrQueries ? "\n" : ""}    this.#bindingsMounted = tru
     const html = String(value);
     const sole = start.nextSibling;
     if (sole && sole !== end && sole.nextSibling === end && sole.nodeType === 3 && !/[<&]/.test(html)) {
-      sole.data = html;
+      if (html.startsWith(sole.data)) sole.appendData(html.slice(sole.data.length));
+      else sole.data = html;
       return;
     }
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    if (sole && sole !== end && sole.nextSibling === end && template.content.childNodes.length === 1 && this.#patchElement(sole, template.content.firstChild)) return;
     let node = start.nextSibling;
     while (node && node !== end) {
       const next = node.nextSibling;
       node.remove();
       node = next;
     }
-    const template = document.createElement('template');
-    template.innerHTML = html;
     this.#wireEvents(template.content);
     end.before(template.content);
   }
-${reconcileList}${reconcileKeyedList}${attrHelpers}${escHelpers ? escHelpers + "\n\n" : ""}${effectMethods ? effectMethods + "\n\n" : ""}
+
+  #patchElement(oldEl, newEl) {
+    if (!oldEl || !newEl || oldEl.nodeType !== 1 || newEl.nodeType !== 1 || oldEl.localName !== newEl.localName) return false;
+    for (const attr of [...oldEl.attributes]) {
+      if (!newEl.hasAttribute(attr.name)) oldEl.removeAttribute(attr.name);
+    }
+    for (const attr of [...newEl.attributes]) {
+      if (oldEl.getAttribute(attr.name) !== attr.value) oldEl.setAttribute(attr.name, attr.value);
+    }
+    if (oldEl.childNodes.length > 0 || newEl.childNodes.length > 0) {
+      while (oldEl.firstChild) oldEl.firstChild.remove();
+      oldEl.append(...newEl.childNodes);
+      this.#wireEvents(oldEl);
+    }
+    return true;
+  }
+${reconcileList}${reconcileKeyedList}${attrHelpers}${escHelpers ? escHelpers + "\n\n" : ""}${effectMethods ? effectMethods + "\n\n" : ""}${storeConnect}${eventHelpers}
   #updateBindings(prop) {
     if (!this.#bindingsMounted) return;
     ${updatePrelude}