@tiaforge-ui/sinter 0.2.0 → 0.3.1

package/dist/compiler/expr.js

@@ -5,7 +5,7 @@ import * as acorn from 'acorn';
 import { didYouMean } from './diagnostics.js';
 const EVERYWHERE_MAGIC = ['$el', '$url', '$now', '$locale', '$meta'];
 export const ALL_MAGIC = ['$event', '$el', '$url', '$now', '$locale', '$result', '$error', '$meta'];
-export const STORE_FNS = ['refresh', 'upsert', 'patch', 'remove', 'page', 'close', 'reset', 'emit'];
+export const STORE_FNS = ['refresh', 'upsert', 'patch', 'remove', 'page', 'showModal', 'close', 'reset', 'emit'];
 export const BUILTIN_HELPERS = ['date', 'time', 'datetime', 'relative', 'number', 'bytes'];
 export const META_FIELDS = ['loading', 'error', 'loadedAt', 'pending', 'total', 'page', 'pages', 'from', 'to', 'hasPrev', 'hasNext'];
 const PAGE_FIELDS = ['page', 'pages', 'from', 'to', 'hasPrev', 'hasNext'];
@@ -40,6 +40,8 @@ const READ_ONLY = new Set([
     'getMinutes', 'getSeconds', 'test', 'exec',
 ]);
 const MUTATORS = new Set(['push', 'pop', 'splice', 'sort', 'reverse', 'shift', 'unshift', 'fill', 'copyWithin', 'add', 'delete', 'clear', 'set']);
+/** `Object.<static>(target, …)` calls that change their first argument */
+const OBJECT_MUTATORS = new Set(['assign', 'defineProperty', 'defineProperties', 'setPrototypeOf']);
 /** callbacks of these methods receive elements of the receiver as first parameter */
 const ELEMENT_CALLBACKS = new Set(['forEach', 'map', 'filter', 'find', 'findIndex', 'findLast', 'findLastIndex', 'some', 'every', 'flatMap', 'toSorted', 'sort']);
 export function analyze(src, scope, page, opts) {
@@ -96,7 +98,7 @@ export function analyze(src, scope, page, opts) {
         return fail();
     }
     function fail() {
-        return { ok: false, code: '() => undefined', deps: [], writes: [], usesEl: false, usesIndex: false, path: null, resource: null, ast: null };
+        return { ok: false, code: '() => undefined', inner: 'undefined', deps: [], writes: [], usesEl: false, usesIndex: false, path: null, resource: null, ast: null };
     }
     // ---- resolution
     function resolve(name, locals, offset, member) {
@@ -127,6 +129,12 @@ export function analyze(src, scope, page, opts) {
             }
         }
         if (!opts.payload) {
+            // a let cannot share a name with a loop or state in its scope (SN209), so lets resolve first
+            const lets = scope.lets ?? [];
+            for (let i = lets.length - 1; i >= 0; i--) {
+                if (lets[i].name === name)
+                    return { kind: 'let', entry: lets[i] };
+            }
             for (let i = scope.loops.length - 1; i >= 0; i--) {
                 if (scope.loops[i].name === name)
                     return { kind: 'loop', entry: scope.loops[i] };
@@ -170,7 +178,7 @@ export function analyze(src, scope, page, opts) {
             return { kind: 'payload' };
         }
         const candidates = [
-            ...scope.loops.map((l) => l.name), ...scope.states.flatMap((s) => [...s.names]),
+            ...(scope.lets ?? []).map((l) => l.name), ...scope.loops.map((l) => l.name), ...scope.states.flatMap((s) => [...s.names]),
             ...page.resources.keys(), ...page.helpers, ...page.namespaces.keys(), ...STORE_FNS, ...BUILTIN_HELPERS,
         ];
         report('SN201', `\`${name}\` is not defined here.${didYouMean(name, candidates)}`, offset);
@@ -183,6 +191,7 @@ export function analyze(src, scope, page, opts) {
             case 'global':
             case 'helper': return name;
             case 'loop': return `$.${name}`;
+            case 'let': return `(${res.entry.code})`;
             case 'state': return `$.$s${sid}.${name}`;
             case 'resource': return `$.$r.${name}`;
             case 'magic': return `$.${name}`;
@@ -202,6 +211,7 @@ export function analyze(src, scope, page, opts) {
                 return { segs: res.entry.alias ? [...res.entry.alias] : null, resource: res.entry.resource };
             case 'local':
                 return { segs: res.info.alias ? [...res.info.alias] : null, resource: res.info.resource };
+            case 'let': return { segs: null, resource: res.entry.resource };
             default: return { segs: null, resource: null };
         }
     }
@@ -315,6 +325,15 @@ export function analyze(src, scope, page, opts) {
             sid = res.sid;
         if (res.kind === 'loop' && res.entry.kind === 'index')
             usesIndex = true;
+        if (res.kind === 'let') {
+            // the inlined expression reads what the let reads
+            for (const d of res.entry.deps)
+                deps.add(d);
+            if (res.entry.usesEl)
+                usesEl = true;
+            if (res.entry.usesIndex)
+                usesIndex = true;
+        }
         const text = emitName(n.name, res, sid);
         if (text !== n.name || shorthand)
             edits.push({ start: n.start, end: n.end, text: shorthand ? `${n.name}: ${text}` : text });
@@ -472,6 +491,10 @@ export function analyze(src, scope, page, opts) {
             report('SN203', 'only state variables and their properties can be assigned', at);
             return;
         }
+        if (cp.res.kind === 'let') {
+            report('SN203', `\`${cp.root}\` is derived (\`data-sn-let\`) and cannot be assigned; assign the state it is computed from`, at);
+            return;
+        }
         if (cp.resource) {
             report('SN205', `\`${src.slice(target.start, target.end)}\` mutates a resource. Use \`patch('${cp.resource}', …, {…})\``, at, 'resources are read-only in expressions; copy with structuredClone() to edit');
             return;
@@ -527,6 +550,26 @@ export function analyze(src, scope, page, opts) {
                         }
                     }
                 }
+                // `Object.assign(target, …)` and friends write to their first argument like `target.x = …` would;
+                // a forbidden key named literally in an `Object.*` call reaches what `.constructor` is refused for
+                if (m.object.type === 'Identifier' && m.object.name === 'Object' && !locals.has('Object') && method) {
+                    for (const a of n.arguments) {
+                        if (a.type === 'Literal' && FORBIDDEN_KEYS.has(String(a.value)))
+                            report('SN207', `\`${a.raw}\` is not allowed as an argument of \`Object.${method}()\``, a.start);
+                    }
+                    const target = n.arguments[0];
+                    const cp = OBJECT_MUTATORS.has(method) && target && (target.type === 'Identifier' || target.type === 'MemberExpression') ? chainPath(target, locals) : null;
+                    if (cp) {
+                        if (cp.resource)
+                            report('SN205', `\`Object.${method}(${src.slice(target.start, target.end)}, …)\` mutates a resource. Use \`patch('${cp.resource}', …)\` or copy with structuredClone()`, n.start);
+                        else if (cp.segs && cp.res.kind === 'state') {
+                            if (mode === 'value')
+                                report('SN203', `value expressions cannot change state; move \`Object.${method}()\` to \`data-sn-on-*\``, n.start);
+                            else if (mode === 'handler')
+                                writes.add(track(cp, cp.segs, n).join('.'));
+                        }
+                    }
+                }
                 // time and randomness
                 if (mode === 'value' && m.object.type === 'Identifier' && !m.computed) {
                     const o = m.object.name, p = m.property.name;
@@ -570,6 +613,15 @@ export function analyze(src, scope, page, opts) {
             return;
         }
         const first = n.arguments[0];
+        if (name === 'showModal' || (name === 'close' && first)) {
+            if (!first || first.type !== 'Literal' || typeof first.value !== 'string') {
+                report('SN309', `\`${name}()\` takes the dialog's \`id\` as a string literal`, n.start);
+            }
+            else if (!page.dialogs.has(first.value)) {
+                report('SN309', `no \`<dialog id="${first.value}">\` on this page.${didYouMean(first.value, page.dialogs)}`, first.start);
+            }
+            return;
+        }
         if (['refresh', 'upsert', 'patch', 'remove', 'page'].includes(name)) {
             if (!first || first.type !== 'Literal' || typeof first.value !== 'string') {
                 report('SN301', `\`${name}()\` takes the resource name as a string literal`, n.start);
@@ -842,7 +894,7 @@ export function analyze(src, scope, page, opts) {
             }
         }
     }
-    return { ok, code, deps: [...deps].sort(), writes: [...writes].sort(), usesEl, usesIndex, entries, path, resource, ast, ...(opts.payload ? { payloadNames: [...payloadNames].sort(), payloadStates: [...payloadStates].sort() } : {}) };
+    return { ok, code, inner: out, deps: [...deps].sort(), writes: [...writes].sort(), usesEl, usesIndex, entries, path, resource, ast, ...(opts.payload ? { payloadNames: [...payloadNames].sort(), payloadStates: [...payloadStates].sort() } : {}) };
 }
 export function applyEdits(src, edits) {
     const sorted = [...edits].sort((a, b) => b.start - a.start || (b.end - b.start) - (a.end - a.start));

package/dist/compiler/vocabulary.d.ts

@@ -5,6 +5,7 @@ export interface AttrDoc {
 }
 export declare const ATTRIBUTES: AttrDoc[];
 export declare const ON_DOC: AttrDoc;
+export declare const DEBOUNCE_ON_DOC: AttrDoc;
 export declare const ELEMENTS: Array<{
     name: string;
     attrs: string[];

package/dist/compiler/vocabulary.js

@@ -2,6 +2,7 @@
 // The compiler, llms.txt and html-custom-data.json are all built from it.
 export const ATTRIBUTES = [
     { name: 'state', value: 'object literal', doc: 'declares local reactive state for the element and its subtree' },
+    { name: 'let', value: 'object literal {name: expression}', doc: 'derived names for the element and its subtree, computed where they are read; later names may use earlier ones' },
     { name: 'text', value: 'value expression', doc: 'sets textContent; never HTML' },
     { name: 'attr', value: 'object literal {href: …}', doc: 'literal keys; null/false removes, true sets empty; URL values are checked' },
     { name: 'class', value: 'object literal {unread: …}', doc: 'toggles each class' },
@@ -13,6 +14,7 @@ export const ATTRIBUTES = [
     { name: 'key', value: 'value expression', doc: 'row identity; defaults to the resource key or object identity' },
     { name: 'if', value: 'value expression', doc: 'renders a <template> while truthy' },
     { name: 'else', value: '', doc: 'on a <template> directly after an if template' },
+    { name: 'listbox', value: 'id of the suggestion list, or empty', doc: 'on a text input: arrow keys mark a [role=option] of that list (empty: the nearest [role=listbox] around the input), Enter or Tab clicks it, Escape fires `dismiss`' },
     { name: 'persist', value: 'storage key', doc: 'persists the model or state in localStorage under sn:' },
     { name: 'get', value: 'URL template', doc: 'GET action; latest wins' },
     { name: 'post', value: 'URL template', doc: 'POST action' },
@@ -26,11 +28,14 @@ export const ATTRIBUTES = [
     { name: 'concurrency', value: 'block | queue | latest', doc: 'mutations only; default block for forms, queue otherwise' },
     { name: 'optimistic', value: 'handler expression', doc: 'patch/upsert/remove calls applied before the request, rolled back on failure' },
     { name: 'then', value: 'handler expression', doc: 'runs after a 2xx response; $result = parsed body' },
-    { name: 'catch', value: 'handler expression', doc: 'runs after an error; $error = {status, body, message}' },
+    { name: 'catch', value: 'handler expression', doc: 'runs after an error; $error = {status, body, message, detail}' },
+    { name: 'confirm', value: 'value expression', doc: 'asks this question before the action runs (configure({ confirm }), window.confirm by default); no question when falsy' },
+    { name: 'encoding', value: 'json | form', doc: 'form: the body (data-sn-body, arrays as repeated keys, or the form) goes as application/x-www-form-urlencoded' },
     { name: 'path', value: 'URL patterns /a/:b …', doc: 'on <html>: the path shapes this page is served for; `:name` segments appear read-only in $url' },
     { name: 'data', value: 'resource name', doc: 'on <script type="application/json"> in <head>: initial data for a resource' },
 ];
 export const ON_DOC = { name: 'on-<event>', value: 'handler expression', doc: 'plain event handler, no request; e.g. data-sn-on-click' };
+export const DEBOUNCE_ON_DOC = { name: 'debounce-<event>', value: 'milliseconds', doc: 'delays only that event\'s data-sn-on-<event> handler (it runs with the last event); e.g. data-sn-debounce-input' };
 export const ELEMENTS = [
     { name: 'sn-resource', attrs: ['name', 'src', 'call', 'each', 'key', 'items', 'total', 'order', 'when', 'paginate', 'page-size', 'size-param', 'cursor', 'direction-param', 'direction-values', 'page-param', 'offset-param', 'type', 'cache'], doc: 'a named, page-wide cache of server data; `cache` (or `cache="10m"`) shows the data from the last page load at once, then revalidates' },
     { name: 'sn-sync', attrs: ['src'], doc: 'one server event stream' },

package/dist/ir.d.ts

@@ -134,6 +134,10 @@ export interface ActionDef {
     w: string[];
     /** element is a form (serialize, disable in block mode) */
     form: boolean;
+    /** `data-sn-confirm`: the question asked before the action runs (none when it is falsy) */
+    confirm?: number;
+    /** `data-sn-encoding="form"`: the body goes as application/x-www-form-urlencoded */
+    enc?: 'form';
 }
 export interface IR {
     v: 1;

package/dist/ir.js

@@ -35,7 +35,14 @@ export function validateIR(ir, fnCount) {
         if (names.has(r.name))
             errs.push(`${at}: duplicate name ${r.name}`);
         names.add(r.name);
-        url(r.src, `${at}.src`);
+        if (r.call) {
+            fn(r.call.args, `${at}.call.args`, false);
+            fn(r.call.run, `${at}.call.run`, false);
+            if (r.src.length)
+                errs.push(`${at}: a call resource has no src`);
+        }
+        else
+            url(r.src, `${at}.src`);
         fn(r.when, `${at}.when`);
         if (r.paginate) {
             if (!['keyset', 'offset', 'append'].includes(r.paginate.mode))
@@ -109,11 +116,22 @@ export function validateIR(ir, fnCount) {
     });
     o.actions.forEach((a, i) => {
         const at = `actions[${i}]`;
-        if (!['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].includes(a.method))
+        if (!['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'CALL'].includes(a.method))
             errs.push(`${at}: bad method`);
         if (!['block', 'queue', 'latest'].includes(a.concurrency))
             errs.push(`${at}: bad concurrency`);
-        url(a.url, `${at}.url`);
+        if (a.method === 'CALL') {
+            if (!a.call)
+                errs.push(`${at}: CALL needs call`);
+            else {
+                fn(a.call.args, `${at}.call.args`, false);
+                fn(a.call.run, `${at}.call.run`, false);
+            }
+            if (a.url.length)
+                errs.push(`${at}: a call action has no url`);
+        }
+        else
+            url(a.url, `${at}.url`);
         for (const k of ['body', 'optimistic', 'then', 'catch'])
             fn(a[k], `${at}.${k}`);
     });

package/dist/listbox.d.ts

@@ -0,0 +1,3 @@
+import type { Feature } from './runtime/app.js';
+declare const listbox: Feature;
+export default listbox;

package/dist/listbox.js

@@ -0,0 +1,66 @@
+/** the input's list: `aria-controls`, else the nearest listbox around it */
+const listOf = (input) => {
+    const id = input.getAttribute('aria-controls');
+    if (id)
+        return input.ownerDocument.getElementById(id);
+    for (let p = input.parentElement; p; p = p.parentElement) {
+        const list = p.querySelector('[role="listbox"]');
+        if (list)
+            return list;
+    }
+    return null;
+};
+const options = (input) => {
+    const list = listOf(input);
+    if (!list || list.closest('[hidden]'))
+        return [];
+    return [...list.querySelectorAll('[role="option"]')].filter((o) => !o.closest('[hidden]'));
+};
+const mark = (all, next) => {
+    for (const o of all)
+        o.setAttribute('aria-selected', String(o == next));
+    next?.scrollIntoView?.({ block: 'nearest' });
+};
+const listbox = {
+    name: 'listbox',
+    install(app) {
+        const root = app.root;
+        root.addEventListener('keydown', (e) => {
+            const input = e.target.closest?.('[role="combobox"]');
+            if (!input || e.isComposing)
+                return;
+            const all = options(input);
+            if (!all.length)
+                return;
+            const at = all.findIndex((o) => o.getAttribute('aria-selected') == 'true');
+            const key = e.key;
+            if (key == 'ArrowDown' || key == 'ArrowUp') {
+                e.preventDefault();
+                mark(all, key == 'ArrowDown' ? all[Math.min(at + 1, all.length - 1)] : at > 0 ? all[at - 1] : null);
+            }
+            else if ((key == 'Enter' && at >= 0) || (key == 'Tab' && (at >= 0 || all.length == 1))) {
+                e.preventDefault();
+                mark(all, null);
+                all[Math.max(at, 0)].click();
+            }
+            else if (key == 'Escape') {
+                e.preventDefault();
+                mark(all, null);
+                input.dispatchEvent(new CustomEvent('dismiss', { bubbles: true }));
+            }
+        });
+        root.addEventListener('input', (e) => {
+            const input = e.target.closest?.('[role="combobox"]');
+            if (input)
+                mark(options(input), null);
+        });
+        root.addEventListener('mousedown', (e) => {
+            // only in lists that belong to a combobox: keep the focus in the input
+            const option = e.target.closest?.('[role="option"]');
+            const list = option?.closest('[role="listbox"]');
+            if (list && [...root.querySelectorAll('[role="combobox"]')].some((c) => listOf(c) == list))
+                e.preventDefault();
+        });
+    },
+};
+export default listbox;

package/dist/paginate.js

@@ -64,10 +64,16 @@ class PagerImpl {
                 n = target;
             else if (target === 'first')
                 n = 1;
-            else if (target === 'prev')
+            else if (target === 'prev') {
+                if (page <= 1)
+                    return;
                 n = page - 1;
-            else if (target === 'next')
+            }
+            else if (target === 'next') {
+                if (meta.pages != null && page >= meta.pages)
+                    return;
                 n = page + 1;
+            }
             else if (target === 'last') {
                 if (meta.pages == null) {
                     this.loader.app.warn(`page('${this.loader.def.name}', 'last') needs a known total`);
@@ -141,8 +147,9 @@ class PagerImpl {
                     hasNext = full;
                     break;
                 }
-                from = move.to != null ? move.to + 1 : null;
-                to = from != null ? from + n - 1 : null;
+                // past the end: nothing to count (`to` would come before `from`)
+                from = n && move.to != null ? move.to + 1 : n ? null : 0;
+                to = n ? (from != null ? from + n - 1 : null) : 0;
                 hasPrev = true;
                 hasNext = full;
                 break;

package/dist/persist.js

@@ -47,9 +47,12 @@ const persist = {
 };
 function overlaps(a, b) {
     const n = Math.min(a.length, b.length);
-    for (let i = 0; i < n; i++)
+    for (let i = 0; i < n; i++) {
+        if (b[i] === '**')
+            return true;
         if (a[i] !== b[i] && a[i] !== '*' && b[i] !== '*')
             return false;
+    }
     return true;
 }
 export default persist;

package/dist/runtime/app.d.ts

@@ -81,6 +81,8 @@ export interface App {
     readonly ir: IR;
     readonly fns: Fn[];
     readonly env: Env;
+    /** the element or document this instance is mounted on */
+    readonly root: Document | Element;
     readonly req: RequestLayer;
     /** the base scope: resources, status, magic names */
     readonly page: any;
@@ -110,6 +112,8 @@ export interface App {
             } | null;
             /** a load (or embedded data) stored `items`: cache them, and the resource's later changes */
             loaded(def: ResourceDef, r: Resource, url: string, items: unknown, total: number | null, appended: boolean): void;
+            /** the resource was emptied (`when` is false): nothing to write until the next load */
+            cleared(def: ResourceDef): void;
         };
     };
     readonly beforeFlush: Array<(dirty: string[][]) => void>;
@@ -149,4 +153,9 @@ export declare function withParams(url: string, params: Record<string, string> |
 /** Indexes (into `seq`) of a longest increasing subsequence, ignoring -1 entries. */
 export declare function lis(seq: number[]): Set<number>;
 /** Serializes a form's named controls to nested JSON, or FormData if it has a file input. */
+/**
+ * A body as form fields (`data-sn-encoding="form"`): a form's own fields, or an object's keys with
+ * arrays as repeated keys; null and undefined values are left out. Files stay multipart.
+ */
+export declare function formBody(body: unknown): URLSearchParams | FormData | null;
 export declare function serialize(form: HTMLFormElement): unknown;

package/dist/runtime/app.js

@@ -55,8 +55,10 @@ export function mount(root, o) {
     const types = new Set(), selects = new Set(), deferred = new Set();
     const listeners = new Map(), cleanups = [];
     const shared = new Map();
+    /** `showModal(id)`, `close(id)`: the dialog of this mount root with that id */
+    const dialog = (id) => [...root.querySelectorAll('dialog')].find((d) => d.id === id);
     const rootRbs = [], rootScopes = [], found = new Map();
-    let dirty = [], cur = [], scheduled = false, flushing = false, round = 0;
+    let dirty = [], cur = [], scheduled = false, flushing = false, round = 0, destroyed = false;
     const res = (name) => {
         const r = resources.get(name);
         if (!r)
@@ -90,7 +92,12 @@ export function mount(root, o) {
         }
     }
     /** 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)));
+    const callError = (e) => {
+        if (e instanceof SinterError)
+            return e;
+        const detail = (e instanceof Error ? e.message : typeof e == 'string' ? e : '') || null;
+        return new SinterError(null, e, detail ?? String(e), detail);
+    };
     /** Per flush round: how dirty paths reach a template's rows (0 not, 1 only marked elements, 2 any row). */
     let rowHits = new Map();
     /**
@@ -98,16 +105,19 @@ export function mount(root, o) {
      * absent) and dirty path `d` are prefixes of each other; `*` matches any segment. A change
      * that ends above a row's own element, or only changes the list structure (`#`), does not
      * reach it: reconcile re-evaluates rows whose item or index changed. `~` reaches only rows
-     * whose element was marked.
+     * whose element was marked. A path ending in `**` (an island's `update()`) reaches everything
+     * under its prefix, at any depth.
      */
     const overlaps = (dep, d, s) => reach(dep, d, s) > 0;
     /** 0: no overlap; 1: only through a marked element (`~`) of the row; 2: overlap. */
     function reach({ p, n, a, t }, d, s) {
-        if (a >= 0 && d.length <= a)
+        if (a >= 0 && d.length <= a && d[d.length - 1] != '**')
             return 0;
         let via = 2;
         for (let i = 0, len = Math.min(p.length, d.length); i < len; i++) {
             const y = d[i];
+            if (y == '**')
+                return 2;
             // a list's structure dependency: reached by changes to the list itself or a whole element, not element fields
             if (p[i] == '#')
                 return d.length <= i + 1 ? 2 : 0;
@@ -142,7 +152,7 @@ export function mount(root, o) {
         return false;
     };
     const app = {
-        ir, fns, env, req, transport: o.transport ?? (() => undefined), ext: {},
+        ir, fns, env, req, root, transport: o.transport ?? (() => undefined), ext: {},
         beforeFlush: [], afterFlush: [], onListen: [], states: [], busy: 0,
         get isDirty() { return dirty.length > 0 || scheduled; },
         dev: false,
@@ -151,7 +161,14 @@ export function mount(root, o) {
             $r: {}, $meta: {}, $url: readUrl(), $now: new Date(env.now()),
             $m: (el, v) => (marked.add(el), v),
             get $locale() { return config.locale?.get(); },
-            set $locale(v) { config.locale?.set(v); app.mark('$locale'); },
+            set $locale(v) {
+                config.locale?.set(v);
+                app.mark('$locale');
+                // ordered lists sort strings by locale
+                for (const def of ir.resources)
+                    if (def.order)
+                        app.mark('$r.' + def.name);
+            },
         },
         resource: res,
         request: (url, init) => req.send(url, init),
@@ -175,12 +192,14 @@ export function mount(root, o) {
         state(el) {
             for (let e = el; e; e = e.parentElement) {
                 const s = e[STATE];
+                // `**`: the island may have changed anything under the state, rows included
                 if (s)
-                    return { get: () => s[1], update: (fn) => { fn(s[1]); app.mark('$s' + s[0]); } };
+                    return { get: () => s[1], update: (fn) => { fn(s[1]); app.mark('$s' + s[0] + '.**'); } };
             }
             throw Error('sinter: no data-sn-state scope');
         },
         destroy() {
+            destroyed = true;
             for (const c of cleanups.splice(0))
                 c();
             instances.delete(root);
@@ -267,12 +286,14 @@ export function mount(root, o) {
             } };
         },
         storeFns: (el) => ({
+            showModal: (id) => { const d = dialog(id); if (d && !d.open)
+                d.showModal(); },
             refresh: (n) => res(n).refetch(),
             upsert: forward('upsert'),
             patch: forward('patch'),
             remove: forward('remove'),
             page: (n, t) => app.ext.paginate.page(n, t),
-            close: () => el?.closest('dialog')?.close(),
+            close: (id) => (id ? dialog(id) : el?.closest('dialog'))?.close(),
             reset: () => {
                 const form = el?.closest('form');
                 if (!form)
@@ -295,7 +316,8 @@ export function mount(root, o) {
                     console.error(e);
                 }
         },
-        addCleanup: (fn) => void cleanups.push(fn),
+        // after destroy(), nothing waits for the next one: run it now
+        addCleanup: (fn) => void (destroyed ? fn() : cleanups.push(fn)),
     };
     app.page.$f = app.storeFns(null);
     instances.set(root, app);
@@ -892,7 +914,9 @@ export function mount(root, o) {
             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'));
+        // the element may have left the page (its row removed) while the handler waited
+        timers.set(rb, env.setTimeout(() => { timers.delete(rb); app.busy--; if (rb.el.isConnected)
+            handle(rb, rb.b.f, e, rb.b.w); }, rb.b.ms, 'debounce'));
     }
     // ---- actions
     function trigger(rb, e) {
@@ -926,27 +950,43 @@ export function mount(root, o) {
                 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;
+                const fields = a.form && !get && a.method != 'DELETE';
+                // form encoding: the fields as the browser would submit them (FormData), then as one of its bodies
+                body = a.body != null ? fns[a.body](s) : fields ? (a.enc == 'form' ? new FormData(rb.el) : serialize(rb.el)) : undefined;
+                if (a.enc == 'form')
+                    body = formBody(body);
             }
         }
         catch (err) {
             return unhandled(toError(err), rb.el);
         }
-        const drop = a.optimistic != null ? app.ext.optimistic.begin(a.optimistic, s) : () => { };
-        if (get) {
-            st.c?.abort();
-            return void send(rb, a, st, url, body, drop, (st.c = new AbortController()));
-        }
-        const run = () => void send(rb, a, st, url, body, drop);
-        if (!st.n)
-            run();
-        else if (a.concurrency == 'latest') {
-            st.w ? st.w.drop() : app.busy++;
-            st.w = { run, drop };
+        // a question first: the action runs only when the user agrees
+        const question = a.confirm != null ? fns[a.confirm](s) : null;
+        if (question) {
+            const yes = config.confirm(String(question));
+            if (yes instanceof Promise)
+                return void yes.then((y) => y && go());
+            if (!yes)
+                return;
         }
-        else {
-            app.busy++;
-            st.q.push(run);
+        go();
+        function go() {
+            const drop = a.optimistic != null ? app.ext.optimistic.begin(a.optimistic, s) : () => { };
+            if (get) {
+                st.c?.abort();
+                return void send(rb, a, st, url, body, drop, (st.c = new AbortController()));
+            }
+            const run = () => void send(rb, a, st, url, body, drop);
+            if (!st.n)
+                run();
+            else if (a.concurrency == 'latest') {
+                st.w ? st.w.drop() : app.busy++;
+                st.w = { run, drop };
+            }
+            else {
+                app.busy++;
+                st.q.push(run);
+            }
         }
     }
     async function send(rb, a, st, url, body, drop, c) {
@@ -1127,6 +1167,8 @@ export function mount(root, o) {
                     return void l.load();
                 c?.abort();
                 r.replace(r.isCollection ? [] : null);
+                if (def.cache != null)
+                    app.ext.cache?.cleared(def);
                 loading(false);
             },
             /** Repeats the current request; several calls in one task share one request. */
@@ -1204,7 +1246,7 @@ export function mount(root, o) {
 export function withParams(url, params) {
     if (!params)
         return url;
-    const [path, hash] = url.split('#'), [base, query] = path.split('?'), q = new URLSearchParams(query);
+    const [path, hash] = url.split('#'), i = path.indexOf('?'), base = i < 0 ? path : path.slice(0, i), q = new URLSearchParams(i < 0 ? '' : path.slice(i + 1));
     for (const k in params)
         q.set(k, params[k]);
     return `${base}?${q}${hash ? '#' + hash : ''}`;
@@ -1229,6 +1271,32 @@ export function lis(seq) {
     return keep;
 }
 /** Serializes a form's named controls to nested JSON, or FormData if it has a file input. */
+/**
+ * A body as form fields (`data-sn-encoding="form"`): a form's own fields, or an object's keys with
+ * arrays as repeated keys; null and undefined values are left out. Files stay multipart.
+ */
+export function formBody(body) {
+    if (body == null)
+        return null;
+    if (body instanceof FormData) {
+        const out = new URLSearchParams();
+        for (const [k, v] of body) {
+            if (typeof v != 'string')
+                return body;
+            out.append(k, v);
+        }
+        return out;
+    }
+    if (body instanceof URLSearchParams)
+        return body;
+    const out = new URLSearchParams();
+    for (const [k, v] of Object.entries(body)) {
+        for (const x of Array.isArray(v) ? v : [v])
+            if (x != null)
+                out.append(k, typeof x == 'object' ? JSON.stringify(x) : String(x));
+    }
+    return out;
+}
 export function serialize(form) {
     const controls = [...form.elements];
     if (controls.some((c) => c.type == 'file'))
@@ -1243,7 +1311,8 @@ export function serialize(form) {
             continue;
         const k = segs.pop();
         let o = out;
-        segs.forEach((s, i) => (o = o[s] ??= /^\d+$/.test(segs[i + 1] ?? k) ? [] : Object.create(null)));
+        // a container at each step; a scalar written there earlier (`a`, then `a.b`) is replaced
+        segs.forEach((s, i) => (o = typeof o[s] == 'object' && o[s] ? o[s] : (o[s] = /^\d+$/.test(segs[i + 1] ?? k) ? [] : Object.create(null))));
         if (type == 'checkbox' && boxes[name] > 1)
             (o[k] ??= []).push(...(c.checked ? [c.value] : []));
         else

package/dist/runtime/config.d.ts

@@ -13,6 +13,8 @@ export interface Config {
     origins: string[];
     /** the transport for a `<sn-sync>` stream URL; `undefined` (or no function) means EventSource */
     transport: ((url: string) => Transport | undefined) | null;
+    /** `data-sn-confirm`: asks the question; the action runs on true (window.confirm by default) */
+    confirm: (question: string) => boolean | Promise<boolean>;
     env: Env;
 }
 export declare const config: Config;
@@ -23,7 +25,12 @@ export declare function configure(options: Partial<Omit<Config, 'env'>> & {
 export declare class SinterError extends Error {
     readonly status: number | null;
     readonly body: unknown;
-    constructor(status: number | null, body: unknown, message: string);
+    readonly detail: string | null;
+    /**
+     * @param detail what went wrong in words: the server's message or text, or a thrown error's
+     *   message; null when there is none (`message` then falls back to the HTTP status)
+     */
+    constructor(status: number | null, body: unknown, message: string, detail?: string | null);
 }
 /** page-load cache entries (`cache` on `<sn-resource>`), in sessionStorage */
 export declare const CACHE_PREFIX = "sn:c:";