@tiaforge-ui/sinter 0.1.0 → 0.2.0

package/dist/runtime/app.js

@@ -30,11 +30,10 @@ const after = (el) => {
 const ET = EventTarget.prototype;
 /** Per-element registries, kept on the element (cheaper than WeakMaps on the row creation path). */
 const HANDLERS = Symbol('sinter.on'), MODEL = Symbol('sinter.model'), STATE = Symbol('sinter.state');
-const dialogsIn = new WeakMap(), indexReaders = new WeakMap();
+const indexReaders = new WeakMap();
 /** row templates: whether each holds one element (see oneElement()) */
 const prepared = new WeakMap();
 const simple = new WeakMap(), SIMPLE = new Set(['text', 'attr', 'class', 'style', 'show', 'prop', 'on']);
-const hasDialog = (tpl) => dialogsIn.get(tpl) ?? (dialogsIn.set(tpl, !!tpl.content.querySelector('dialog')), dialogsIn.get(tpl));
 /** The instance mount() created on `root`; throws if none. */
 export function instance(root) {
     const app = instances.get(root);
@@ -76,6 +75,22 @@ export function mount(root, o) {
     };
     /** Elements written through callbacks (`$.$m(row, …)`) since the last flush. */
     const marked = new Set();
+    /** debounced handlers' pending timers */
+    const timers = new WeakMap();
+    /** action calls' signal: aborts when the page is hidden */
+    let hide = new AbortController();
+    /** runs an action function; it counts as busy (for the testing module's settle) while it runs */
+    async function invoke(run, args, ctx) {
+        app.busy++;
+        try {
+            return await fns[run](args, ctx);
+        }
+        finally {
+            app.busy--;
+        }
+    }
+    /** a failed call: SinterErrors as they are, anything else with status null */
+    const callError = (e) => (e instanceof SinterError ? e : new SinterError(null, e, e?.message || String(e)));
     /** Per flush round: how dirty paths reach a template's rows (0 not, 1 only marked elements, 2 any row). */
     let rowHits = new Map();
     /**
@@ -170,6 +185,7 @@ export function mount(root, o) {
                 c();
             instances.delete(root);
         },
+        scopeOf: (i) => (i < 0 ? app.page : rootScopes[i] ?? app.page),
         url(tpl, s) {
             let out = '', query = false, dropped = false;
             tpl.forEach((p, i) => {
@@ -298,6 +314,10 @@ export function mount(root, o) {
     }
     for (const def of ir.resources)
         createLoader(def);
+    // action calls see the page leave through ctx.signal
+    if (ir.actions.some((x) => x.call) || ir.resources.some((x) => x.call)) {
+        app.addCleanup(env.listen('pagehide', () => { hide.abort(); hide = new AbortController(); }));
+    }
     // listeners for every event type the page binds, rows included
     listen('toggle');
     for (const nd of [...ir.roots, ...ir.templates.flatMap((t) => t.nodes)])
@@ -390,10 +410,10 @@ export function mount(root, o) {
         cleanups.push(() => ET.removeEventListener.call(root, type, dispatch, true));
     }
     /**
-     * `dialogs`: whether these elements can sit in a closed dialog of their own block. Rows only
-     * need the check when their template contains a dialog; outer dialogs defer the whole list.
+     * Only elements the compiler marked as in a dialog of their own block (`dl`) are checked for a
+     * closed dialog; dialogs outside a template defer the whole list.
      */
-    function bindNodes(defs, els, base, rbs, dialogs = true) {
+    function bindNodes(defs, els, base, rbs) {
         // scopes of elements that declare state (and their descendants); most rows have none
         let scopes = null;
         for (let i = 0; i < defs.length; i++) {
@@ -416,7 +436,7 @@ export function mount(root, o) {
                 rootScopes[i] = s;
             if (el)
                 for (const b of nd.b) {
-                    const rb = { b, el, s, v: UNSET, c: dialogs };
+                    const rb = { b, el, s, v: UNSET, c: !!nd.dl };
                     if (b.k == 'on') {
                         const h = el[HANDLERS];
                         el[HANDLERS] = h == null ? rb : Array.isArray(h) ? (h.push(rb), h) : [h, rb];
@@ -484,7 +504,7 @@ export function mount(root, o) {
     /** Evaluates and writes one binding if needed; false while it waits in a closed dialog. */
     function process(rb, level) {
         const force = level == 2 || (level == 1 && !!rb.b.i);
-        if (!force && !deferred.has(rb) && !(rb.b.d && hit(depsOf(rb.b, rb.b.d), rb.s)))
+        if (!force && !(deferred.size && deferred.has(rb)) && !(rb.b.d && hit(rb.d ??= depsOf(rb.b, rb.b.d), rb.s)))
             return true;
         if (rb.c && rb.el.closest('dialog:not([open])')) {
             deferred.add(rb);
@@ -762,7 +782,7 @@ export function mount(root, o) {
                 els[k] = node && node.localName == defs[k].tag ? node : null;
             }
         }
-        if (isSimple(tpl, t)) {
+        if (isSimple(t)) {
             // only value bindings and handlers: bind and write each once, as walk(rbs, 2) would
             for (let k = 0; k < defs.length; k++) {
                 const el = els[k];
@@ -782,7 +802,7 @@ export function mount(root, o) {
             }
         }
         else {
-            bindNodes(defs, els, s, rbs, hasDialog(tpl));
+            bindNodes(defs, els, s, rbs);
             walk(rbs, 2);
         }
         const nodes = [];
@@ -804,10 +824,10 @@ export function mount(root, o) {
         return one;
     }
     /** A row template whose elements only have value bindings and handlers (no state, model, nested template or dialog). */
-    function isSimple(tpl, t) {
+    function isSimple(t) {
         let v = simple.get(t);
         if (v == null) {
-            v = !hasDialog(tpl) && t.nodes.every((nd) => nd.state == null && nd.b.every((b) => SIMPLE.has(b.k)));
+            v = t.nodes.every((nd) => !nd.dl && nd.state == null && nd.b.every((b) => SIMPLE.has(b.k)));
             simple.set(t, v);
         }
         return v;
@@ -843,7 +863,7 @@ export function mount(root, o) {
             const h = el[HANDLERS], hs = h && (Array.isArray(h) ? h : [h]).filter((x) => x.b.n == e.type);
             if (hs?.length) {
                 for (const h of hs)
-                    h.b.x != null ? trigger(h, e) : handle(h, h.b.f, e, h.b.w);
+                    h.b.x != null ? trigger(h, e) : h.b.ms ? later(h, e) : handle(h, h.b.f, e, h.b.w);
                 return;
             }
             if (el == root)
@@ -864,6 +884,16 @@ export function mount(root, o) {
         if (writes?.some((w) => w.startsWith('$url')))
             writeUrl();
     }
+    /** A debounced handler: runs once `ms` after the last event, with that event. */
+    function later(rb, e) {
+        const t = timers.get(rb);
+        if (t) {
+            env.clearTimeout(t);
+            app.busy--;
+        }
+        app.busy++;
+        timers.set(rb, env.setTimeout(() => { timers.delete(rb); app.busy--; handle(rb, rb.b.f, e, rb.b.w); }, rb.b.ms, 'debounce'));
+    }
     // ---- actions
     function trigger(rb, e) {
         const a = ir.actions[rb.b.x], el = rb.el;
@@ -889,10 +919,15 @@ export function mount(root, o) {
         if (!get && a.concurrency == 'block' && st.n)
             return;
         const s = child(rb.s, { $el: rb.el, $event: e });
-        let url, body;
+        let url = '', body;
         try {
-            url = app.url(a.url, s);
-            body = a.body != null ? fns[a.body](s) : a.form && !get && a.method != 'DELETE' ? serialize(rb.el) : undefined;
+            // a call's arguments are taken when it is triggered, like a request's URL and body
+            if (a.call)
+                body = fns[a.call.args](s);
+            else {
+                url = app.url(a.url, s);
+                body = a.body != null ? fns[a.body](s) : a.form && !get && a.method != 'DELETE' ? serialize(rb.el) : undefined;
+            }
         }
         catch (err) {
             return unhandled(toError(err), rb.el);
@@ -924,7 +959,9 @@ export function mount(root, o) {
                 x.disabled = true;
         }
         try {
-            const result = await req.send(url, { method: a.method, body, signal: c?.signal });
+            const result = a.call
+                ? await invoke(a.call.run, body, { signal: hide.signal, request: (u, i) => req.send(u, i), el })
+                : await req.send(url, { method: a.method, body, signal: c?.signal });
             if (c && st.c != c)
                 return;
             drop();
@@ -935,7 +972,7 @@ export function mount(root, o) {
             drop();
             if (isAbort(err) || (c && st.c != c))
                 return;
-            const error = toError(err);
+            const error = a.call ? callError(err) : toError(err);
             a.catch != null ? handle(rb, a.catch, null, a.w, { $error: error }) : unhandled(error, el);
         }
         finally {
@@ -968,14 +1005,34 @@ export function mount(root, o) {
     }
     // ---- resources
     function createLoader(def) {
-        const r = createResource(def.name, { key: def.key, order: def.order, locale: () => config.locale?.get(), warn, prep: (x) => (app.prep ? app.prep(x) : x) });
+        const r = createResource(def.name, { key: def.key, order: def.order, locale: () => config.locale?.get(), warn, prep: (x) => (app.prep ? app.prep(x) : x), freeze: app.dev });
         r.onDirty = (what) => app.mark((what == 'data' ? '$r.' : '$meta.') + def.name);
         resources.set(def.name, r);
         Object.defineProperty(app.page.$r, def.name, { get: r.value, enumerable: true });
         app.page.$meta[def.name] = r.meta;
         let url = null, c = null, seq = 0, again = null;
+        const scope = () => app.scopeOf(def.scope);
+        /** `call`: the arguments of the current load; the identity of a load is its arguments' JSON */
+        let args = [], calls = 0;
         const resolve = () => {
-            const s = def.scope < 0 ? app.page : rootScopes[def.scope] ?? app.page;
+            const s = scope();
+            if (def.call) {
+                try {
+                    if (def.when != null && !fns[def.when](s))
+                        return null;
+                    args = fns[def.call.args](s);
+                    try {
+                        return 'call:' + JSON.stringify(args);
+                    }
+                    catch {
+                        return `call:#${++calls}`;
+                    }
+                }
+                catch (e) {
+                    warn(17, def.name, e.message);
+                    return null;
+                }
+            }
             try {
                 return def.when != null && !fns[def.when](s) ? null : app.url(def.src, s);
             }
@@ -1010,8 +1067,23 @@ export function mount(root, o) {
         };
         /** the request URL for the current page of `u` */
         const request = (u, m = l.pager?.current()) => withParams(u, m ? l.pager.params(m) : null);
+        const fail = (e) => {
+            const error = toError(e);
+            r.meta.error = error;
+            r.onDirty('meta');
+            unhandled(error, null, def.name);
+        };
         const l = {
             def, res: r, app, pager: null,
+            scope, get: loadShared, failed: fail, loading,
+            items(body) {
+                let items = pick(def.items, body);
+                if (!Array.isArray(items)) {
+                    warn(12, def.name, def.items ?? '(response)');
+                    items = [];
+                }
+                return items.map(clean);
+            },
             start() {
                 const el = def.data != null ? found.get(def.data) : null;
                 let data;
@@ -1069,7 +1141,9 @@ export function mount(root, o) {
                 loading(true);
                 try {
                     const req = withParams(url, m ? l.pager.params(m) : null);
-                    const body = await loadShared(req, ctl.signal);
+                    const body = def.call
+                        ? await invoke(def.call.run, args, { signal: ctl.signal, request: (u, i) => app.req.send(u, i), el: null })
+                        : await loadShared(req, ctl.signal);
                     if (n != seq)
                         return;
                     store(body, req, m);
@@ -1080,10 +1154,7 @@ export function mount(root, o) {
                 catch (e) {
                     if (n != seq || isAbort(e))
                         return;
-                    const error = toError(e);
-                    r.meta.error = error;
-                    r.onDirty('meta');
-                    unhandled(error, null, def.name);
+                    fail(def.call ? callError(e) : e);
                 }
                 finally {
                     // writes made while this load ran win over its (older) response
@@ -1095,6 +1166,8 @@ export function mount(root, o) {
                 }
             },
         };
+        if (def.each)
+            app.ext.each.fanOut(l);
         if (def.paginate)
             l.pager = app.ext.paginate.pager(l);
         r.loader = l;

package/dist/runtime/config.d.ts

@@ -19,11 +19,11 @@ export declare const config: Config;
 export declare function configure(options: Partial<Omit<Config, 'env'>> & {
     env?: Partial<Env>;
 }): void;
-/** `$error`: a non-2xx response, a network error (status 0) or a refused request. */
+/** `$error`: a non-2xx response, a network error (status 0), a refused request, or a failed action call (status null). */
 export declare class SinterError extends Error {
-    readonly status: number;
+    readonly status: number | null;
     readonly body: unknown;
-    constructor(status: number, body: unknown, message: string);
+    constructor(status: number | null, body: unknown, message: string);
 }
 /** page-load cache entries (`cache` on `<sn-resource>`), in sessionStorage */
 export declare const CACHE_PREFIX = "sn:c:";

package/dist/runtime/config.js

@@ -10,7 +10,7 @@ export function configure(options) {
     if (env)
         config.env = { ...config.env, ...env };
 }
-/** `$error`: a non-2xx response, a network error (status 0) or a refused request. */
+/** `$error`: a non-2xx response, a network error (status 0), a refused request, or a failed action call (status null). */
 export class SinterError extends Error {
     status;
     body;

package/dist/runtime/store.d.ts

@@ -29,14 +29,14 @@ export type Op = {
 export interface Meta {
     loading: boolean;
     error: {
-        status: number;
+        status: number | null;
         body: unknown;
         message: string;
     } | null;
     loadedAt: number | null;
     pending: number;
     total: number | null;
-    page?: number;
+    page?: number | null;
     pages?: number | null;
     from?: number | null;
     to?: number | null;
@@ -50,6 +50,8 @@ export interface ResourceOptions {
     warn?: (code: number, ...args: unknown[]) => void;
     /** applied to every stored item (dev builds freeze them) */
     prep?: <T>(item: T) => T;
+    /** hand out frozen lists (dev builds) */
+    freeze?: boolean;
 }
 /** The public store handle (`app.resource(name)`), plus the hooks loaders and features use. */
 export interface Resource<T extends object = any> {
@@ -66,7 +68,8 @@ export interface Resource<T extends object = any> {
     upsert(item: T): void;
     patch(key: string | T, fields: Partial<T>): void;
     remove(key: string | T): void;
-    refetch(): Promise<void>;
+    /** `hint`: a server event's payload; an `each` resource reloads only the source it names */
+    refetch(hint?: object): Promise<void>;
     subscribe(fn: (change: Change<T>) => void): () => void;
     keyOf(item: string | T): string;
     /**
@@ -86,7 +89,7 @@ export interface Resource<T extends object = any> {
     /** while set, upsert/patch/remove are recorded instead of applied */
     recording: Op[] | null;
     loader: {
-        refetch(): Promise<void>;
+        refetch(hint?: object): Promise<void>;
     } | null;
     onDirty(what: 'data' | 'meta'): void;
 }

package/dist/runtime/store.js

@@ -12,13 +12,27 @@ export function clean(obj) {
             out[k] = obj[k];
     return out;
 }
+/** One collator per locale: constructing one is costly in some engines. */
+const collators = new Map();
+const collator = (l = '') => collators.get(l) ?? (collators.set(l, new Intl.Collator(l || undefined, { numeric: true })), collators.get(l));
 export function createResource(name, o) {
     const meta = { loading: false, error: null, loadedAt: null, pending: 0, total: null };
     const coll = !!o.key, field = o.order?.replace(/^-/, ''), dir = o.order?.[0] == '-' ? -1 : 1;
     const subs = new Set();
     const prep = (x) => (o.prep ? o.prep(x) : x);
-    let base = new Map(), single = null, total = null;
+    /** base items in arrival order, and each key's arrival number (ties in `order` keep arrival order) */
+    let base = new Map(), seq = new Map(), next = 0;
+    let single = null, total = null;
     let layers = [], lastLayer = 0;
+    /**
+     * The base in display order, the locale it was sorted for, and the keys written since, with
+     * their value before the first write. Reads patch it instead of sorting
+     * again. Arrays handed out are never changed afterwards.
+     */
+    let sorted = null, sortedFor, touched = new Map();
+    /** Optimistic layers applied over the base: changed keys (null: removed), keys they add (arrival numbers), removals counted for `total`. */
+    let over = null;
+    /** what readers see; rebuilt on the first read after a change */
     let view = null;
     let journal = null, loads = 0;
     const keyOf = (x) => typeof x == 'string' ? x : (o.key ?? []).map((f) => {
@@ -29,71 +43,171 @@ export function createResource(name, o) {
     const merge = (cur, op) => op.op == 'upsert' ? prep(op.item)
         : op.op == 'remove' ? null
             : cur && prep({ ...cur, ...clean(op.fields) });
-    /** Applies one op to a keyed map; counts removals of present items. */
-    const applyTo = (m, op, removed) => {
-        const k = op.op == 'upsert' ? keyOf(op.item) : op.key, v = merge(m.get(k), op);
-        if (v)
-            m.set(k, v);
-        else if (m.delete(k) && removed)
-            removed.n++;
+    /** Applies one op to the base. */
+    const apply = (op) => {
+        if (!coll)
+            return void (single = merge(single, op));
+        const k = op.op == 'upsert' ? keyOf(op.item) : op.key, cur = base.get(k), v = merge(cur, op);
+        if (sorted && !touched.has(k))
+            touched.set(k, cur);
+        if (v) {
+            if (!cur)
+                seq.set(k, next++);
+            base.set(k, v);
+        }
+        else if (cur) {
+            base.delete(k);
+            seq.delete(k);
+        }
     };
-    const changed = (what = 'data') => {
+    /** By `order` (none: all equal, so arrival order decides). */
+    const compare = (a, b) => {
+        if (!field)
+            return 0;
+        const x = a[field], y = b[field];
+        if (x == null || y == null)
+            return +(x == null) - +(y == null);
+        return dir * (typeof x == 'string' && typeof y == 'string' ? collator(sortedFor).compare(x, y) : +(x > y) - +(x < y));
+    };
+    /** A sorted copy of `list` without the `drop` items and with the `add` items (each with its arrival number). */
+    function patch(list, drop, add, arrival) {
+        const out = list.slice();
+        /** the first index whose item does not sort before `v` (with arrival number `n`, after its ties) */
+        const find = (v, n) => {
+            let lo = 0, hi = out.length;
+            while (lo < hi) {
+                const mid = (lo + hi) >> 1, c = compare(out[mid], v) || (n == null ? 0 : arrival(keyOf(out[mid])) - n);
+                c < 0 ? (lo = mid + 1) : (hi = mid);
+            }
+            return lo;
+        };
+        for (const v of drop) {
+            // among its ties, by identity; an item whose order field was changed in place is found by a scan
+            let i = find(v);
+            while (out[i] !== v && i < out.length && !compare(out[i], v))
+                i++;
+            out.splice(out[i] === v ? i : out.indexOf(v), 1);
+        }
+        for (const [v, n] of add)
+            out.splice(find(v, n), 0, v);
+        return out;
+    }
+    /** The base in display order. */
+    function baseList() {
+        const locale = o.locale?.();
+        if (sorted && locale === sortedFor && touched.size <= 64) {
+            if (touched.size) {
+                const drop = [], add = [];
+                for (const [k, old] of touched) {
+                    if (old)
+                        drop.push(old);
+                    const v = base.get(k);
+                    if (v)
+                        add.push([v, seq.get(k)]);
+                }
+                sorted = patch(sorted, drop, add, (k) => seq.get(k));
+            }
+        }
+        else {
+            sortedFor = locale;
+            // a stable sort of the Map's arrival order
+            sorted = [...base.values()].sort(compare);
+        }
+        touched = new Map();
+        return sorted;
+    }
+    /** Recomputes the layers' effect and `meta.total` after any change; marks `meta` if the total changed. */
+    function sync() {
+        over = null;
+        if (layers.length) {
+            const m = new Map(), add = new Map();
+            let removed = 0, n = next, s = single;
+            for (const l of layers)
+                for (const op of l.ops) {
+                    if (!coll) {
+                        s = merge(s, op);
+                        continue;
+                    }
+                    const k = op.op == 'upsert' ? keyOf(op.item) : op.key, cur = m.has(k) ? m.get(k) : base.get(k), v = merge(cur, op);
+                    if (v) {
+                        if (!cur)
+                            add.set(k, n++);
+                        m.set(k, v);
+                    }
+                    else {
+                        if (cur)
+                            removed++;
+                        m.set(k, null);
+                        add.delete(k);
+                    }
+                }
+            over = { m, add, removed, s };
+        }
+        const t = total == null ? null : Math.max(0, total - (over?.removed ?? 0));
+        if (meta.total !== t) {
+            meta.total = t;
+            r.onDirty('meta');
+        }
+    }
+    /** A data change: readers rebuild their view; `meta` too when the pending count changed. */
+    const changed = (pending) => {
         view = null;
+        sync();
         r.onDirty('data');
-        if (what == 'meta')
+        if (pending) {
+            meta.pending = layers.length;
             r.onDirty('meta');
+        }
     };
     function visible() {
         if (view)
             return view;
-        let t = total, m = base, s = single;
-        const removed = { n: 0 };
-        for (const l of layers)
-            for (const op of l.ops)
-                coll ? (m == base && (m = new Map(base)), applyTo(m, op, removed)) : (s = merge(s, op));
-        if (t != null)
-            t = Math.max(0, t - removed.n);
-        const l = [...m.values()];
-        if (field) {
-            const c = new Intl.Collator(o.locale?.(), { numeric: true });
-            l.sort((a, b) => {
-                const x = a[field], y = b[field];
-                if (x == null || y == null)
-                    return +(x == null) - +(y == null);
-                return dir * (typeof x == 'string' && typeof y == 'string' ? c.compare(x, y) : +(x > y) - +(x < y));
-            });
-        }
-        view = { l: Object.freeze(l), m, s };
-        if (meta.total !== t) {
-            meta.total = t;
-            r.onDirty('meta');
+        if (!coll)
+            return (view = { l: [], get: () => undefined, s: over ? over.s : single });
+        let l = baseList(), get = (k) => base.get(k);
+        if (over) {
+            const { m, add } = over, drop = [], put = [], at = (k) => add.get(k) ?? seq.get(k);
+            for (const [k, v] of m) {
+                const b = base.get(k);
+                if (b)
+                    drop.push(b);
+                if (v)
+                    put.push([v, at(k)]);
+            }
+            l = patch(l, drop, put, at);
+            get = (k) => (m.has(k) ? m.get(k) ?? undefined : base.get(k));
         }
-        return view;
+        // dev builds freeze what expressions see; the compiler refuses writes to resources (SN205)
+        return (view = { l: o.freeze ? Object.freeze(l.slice()) : l, get, s: null });
     }
     function write(op) {
         if (r.recording)
             return void r.recording.push(op);
         journal?.push(op);
-        coll ? applyTo(base, op) : (single = merge(single, op));
+        apply(op);
         changed();
         for (const f of subs)
             f({ resource: name, ...op });
     }
     const r = {
         name, meta, key: o.key, isCollection: coll, keyOf, recording: null, loader: null, onDirty() { },
-        get: (k) => (coll ? visible().m.get(keyOf(k)) : visible().s ?? undefined),
+        get: (k) => (coll ? visible().get(keyOf(k)) : visible().s ?? undefined),
         has: (k) => r.get(k) !== undefined,
         all: () => visible().l,
         value: () => (coll ? visible().l : visible().s),
         replace(items) {
             if (coll) {
                 base = new Map();
+                seq = new Map();
+                sorted = null;
+                touched = new Map();
                 for (const x of Array.isArray(items) ? items : []) {
                     const k = keyOf(x);
                     if (base.has(k))
                         o.warn?.(13, name, k);
                     base.delete(k);
                     base.set(k, prep(x));
+                    seq.set(k, next++);
                 }
             }
             else
@@ -105,7 +219,7 @@ export function createResource(name, o) {
         upsert: (item) => write({ op: 'upsert', item }),
         patch: (k, fields) => write({ op: 'patch', key: keyOf(k), fields }),
         remove: (k) => write({ op: 'remove', key: keyOf(k) }),
-        refetch: () => r.loader?.refetch() ?? Promise.resolve(),
+        refetch: (hint) => r.loader?.refetch(hint) ?? Promise.resolve(),
         subscribe: (fn) => (subs.add(fn), () => subs.delete(fn)),
         startLoad() {
             loads++;
@@ -119,23 +233,22 @@ export function createResource(name, o) {
             if (!loaded || !ops.length)
                 return;
             for (const op of ops)
-                coll ? applyTo(base, op) : (single = merge(single, op));
+                apply(op);
             changed();
         },
         addLayer(ops) {
             layers.push({ id: ++lastLayer, ops });
-            meta.pending = layers.length;
-            changed('meta');
+            changed(true);
             return lastLayer;
         },
         dropLayer(id) {
             const n = layers.length;
             layers = layers.filter((l) => l.id != id);
-            meta.pending = layers.length;
             if (n != layers.length)
-                changed('meta');
+                changed(true);
         },
-        setTotal(t) { total = t; changed(); },
+        /** the total changes `meta` only: bindings that read the items do not re-run */
+        setTotal(t) { total = t; sync(); },
         base: () => ({ items: coll ? [...base.values()] : single, total }),
     };
     return r;

package/dist/sse.js

@@ -45,10 +45,13 @@ class Connection {
     everOpen = false;
     url;
     fed;
+    /** where `src` and the events' expressions are evaluated: the enclosing state's scope, or the page */
+    base;
     constructor(app, def) {
         this.app = app;
         this.def = def;
-        this.url = app.url(def.src, app.page);
+        this.base = app.scopeOf(def.scope ?? -1);
+        this.url = app.url(def.src, this.base);
         this.fed = [...new Set(def.events.map((e) => e.resource))];
     }
     start() {
@@ -116,7 +119,7 @@ class Connection {
             status = (await this.app.req.raw(config.sessionProbe)).status;
         }
         catch (e) {
-            status = e instanceof SinterError ? e.status : 0;
+            status = e instanceof SinterError ? e.status ?? 0 : 0;
         }
         if (this.closed || this.hidden)
             return;
@@ -139,7 +142,7 @@ class Connection {
     }
     apply(def, payload) {
         const app = this.app;
-        const scope = Object.create(app.page);
+        const scope = Object.create(this.base);
         scope.$p = payload && typeof payload === 'object' ? payload : {};
         const r = app.resource(def.resource);
         try {
@@ -148,13 +151,13 @@ class Connection {
             const paginated = !!app.ir.resources.find((x) => x.name === def.resource)?.paginate;
             switch (def.op) {
                 case 'refetch':
-                    void r.refetch();
+                    void r.refetch(scope.$p);
                     return;
                 case 'upsert': {
                     const item = def.item != null ? app.fns[def.item](scope) : payload;
                     if (item == null || typeof item !== 'object') {
                         if (def.fallback === 'refetch')
-                            void r.refetch();
+                            void r.refetch(scope.$p);
                         return;
                     }
                     if (paginated && !r.has(item)) {

package/dist/testing/index.d.ts

@@ -44,6 +44,8 @@ export interface RenderOptions {
     now?: number | Date;
     /** helper functions, and namespaces as objects of functions */
     helpers?: Record<string, unknown>;
+    /** action functions for `data-sn-call` and `<sn-resource call>`, and namespaces as objects of functions */
+    actions?: Record<string, unknown>;
     /** partials for `<sn-include>`, by path relative to the page */
     files?: Record<string, string>;
     /** localStorage and sessionStorage (default: empty ones); pass the previous page's to test what carries over */