@tiaforge-ui/sinter 0.1.0 → 0.3.0

package/dist/compiler/diagnostics.d.ts

@@ -28,6 +28,7 @@ export declare const CODES: {
     readonly SN206: 'unknown-namespace-member';
     readonly SN207: 'unsafe-sink';
     readonly SN208: 'type-error';
+    readonly SN209: 'name-conflict';
     readonly SN301: 'unknown-resource';
     readonly SN302: 'duplicate-resource';
     readonly SN303: 'unknown-meta-field';
@@ -36,6 +37,8 @@ export declare const CODES: {
     readonly SN306: 'include-cycle';
     readonly SN307: 'openapi-invalid';
     readonly SN308: 'unknown-schema-field';
+    readonly SN309: 'unknown-dialog';
+    readonly SN310: 'unknown-action';
     readonly SN401: 'parse-error';
     readonly SN501: 'unused-resource';
     readonly SN502: 'non-reactive-value';

package/dist/compiler/diagnostics.js

@@ -11,6 +11,7 @@ export const CODES = {
     SN206: 'unknown-namespace-member',
     SN207: 'unsafe-sink',
     SN208: 'type-error',
+    SN209: 'name-conflict',
     SN301: 'unknown-resource',
     SN302: 'duplicate-resource',
     SN303: 'unknown-meta-field',
@@ -19,6 +20,8 @@ export const CODES = {
     SN306: 'include-cycle',
     SN307: 'openapi-invalid',
     SN308: 'unknown-schema-field',
+    SN309: 'unknown-dialog',
+    SN310: 'unknown-action',
     SN401: 'parse-error',
     SN501: 'unused-resource',
     SN502: 'non-reactive-value',

package/dist/compiler/expr.d.ts

@@ -19,19 +19,35 @@ export interface StateEntry {
     sid: number;
     names: Set<string>;
 }
+/** A `data-sn-let` name: a value expression inlined wherever the name is read. */
+export interface LetEntry {
+    name: string;
+    /** the compiled expression (without the `($) =>` wrapper) */
+    code: string;
+    deps: string[];
+    usesEl: boolean;
+    usesIndex: boolean;
+    resource: string | null;
+}
 export interface ResourceInfo {
     name: string;
     key: string[] | null;
     paginate: string | null;
     used: boolean;
+    /** keyset with `offset-param`: `page(name, n)` and `$meta.<name>.page` are available */
+    jumps?: boolean;
 }
 export interface Scope {
     loops: LoopEntry[];
     states: StateEntry[];
+    /** `data-sn-let` names, outer to inner */
+    lets?: LetEntry[];
 }
 export interface PageInfo {
     resources: Map<string, ResourceInfo>;
     helpers: Set<string>;
+    /** action functions and namespaces: only `data-sn-call` and `<sn-resource call>` may name them */
+    actions?: Set<string>;
     namespaces: Map<string, Set<string>>;
     /** imports used by emitted code */
     usedHelpers: Set<string>;
@@ -39,6 +55,8 @@ export interface PageInfo {
     usesNow: boolean;
     /** `:name` segments of the page's `data-sn-path` patterns */
     pathParams: Set<string>;
+    /** literal `id`s of the page's `<dialog>` elements, for `showModal()` and `close()` */
+    dialogs: Set<string>;
 }
 export interface ExprOptions {
     mode: Mode;
@@ -46,6 +64,8 @@ export interface ExprOptions {
     magic?: string[];
     /** free identifiers resolve to fields of `$.$p` (sn-event, cursor) */
     payload?: boolean;
+    /** with `payload`: state names in scope resolve to the state first (`<sn-event>`) */
+    payloadState?: boolean;
     /** parse as `{...}` object literal; returns its entries */
     object?: 'literal-keys' | 'any-keys' | 'state';
     report: (code: Code, message: string, offset: number, hint?: string) => void;
@@ -60,6 +80,8 @@ export interface ObjectEntry {
 export interface ExprResult {
     ok: boolean;
     code: string;
+    /** `code` without its `($) =>` wrapper (value expressions) */
+    inner: string;
     deps: string[];
     writes: string[];
     usesEl: boolean;
@@ -73,6 +95,8 @@ export interface ExprResult {
     ast: Node | null;
     /** names resolved to payload fields (`payload` mode) */
     payloadNames?: string[];
+    /** state names read where the payload is the scope (they shadow payload fields of the same name) */
+    payloadStates?: string[];
 }
 export declare const ALL_MAGIC: string[];
 export declare const STORE_FNS: string[];

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'];
@@ -50,6 +50,7 @@ export function analyze(src, scope, page, opts) {
     let usesIndex = false;
     let ok = true;
     const payloadNames = new Set();
+    const payloadStates = new Set();
     const mode = opts.mode;
     const magicAllowed = new Set([...EVERYWHERE_MAGIC, ...(opts.magic ?? [])]);
     const report = (code, message, offset, hint) => {
@@ -95,7 +96,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) {
@@ -117,7 +118,21 @@ export function analyze(src, scope, page, opts) {
             report('SN201', `\`${name}\` is not defined.${didYouMean(name, ALL_MAGIC)}`, offset);
             return null;
         }
+        if (opts.payload && opts.payloadState) {
+            for (let i = scope.states.length - 1; i >= 0; i--) {
+                if (scope.states[i].names.has(name)) {
+                    payloadStates.add(name);
+                    return { kind: 'state', sid: scope.states[i].sid };
+                }
+            }
+        }
         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] };
@@ -148,6 +163,10 @@ export function analyze(src, scope, page, opts) {
             payloadNames.add(name);
             return { kind: 'payload' };
         }
+        if (page.actions?.has(name)) {
+            report('SN203', `\`${name}\` is an action: actions run through \`data-sn-call\` or \`<sn-resource call>\`, not inside expressions`, offset);
+            return null;
+        }
         if (BROWSER.has(name)) {
             report('SN202', `\`${name}\` is a browser API; expressions may use JavaScript, not the browser. Use an island`, offset);
             return null;
@@ -157,7 +176,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);
@@ -170,6 +189,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}`;
@@ -189,6 +209,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 };
         }
     }
@@ -278,8 +299,8 @@ export function analyze(src, scope, page, opts) {
                 else if (PAGE_FIELDS.includes(field) && !r.paginate) {
                     report('SN303', `\`$meta.${rname}.${field}\` is a pagination field, but \`${rname}\` has no \`paginate\``, n.start);
                 }
-                else if (field === 'page' && r.paginate !== 'offset') {
-                    report('SN303', `\`$meta.${rname}.page\` exists only with \`paginate="offset"\``, n.start);
+                else if (field === 'page' && r.paginate !== 'offset' && !r.jumps) {
+                    report('SN303', `\`$meta.${rname}.page\` exists only with \`paginate="offset"\`, or \`paginate="keyset"\` with \`offset-param\``, n.start);
                 }
             }
         }
@@ -302,6 +323,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 });
@@ -459,6 +489,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;
@@ -557,6 +591,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);
@@ -572,8 +615,10 @@ export function analyze(src, scope, page, opts) {
                     report('SN303', `\`${first.value}\` has no \`paginate\`; \`page()\` needs a paginated resource`, n.start);
                 const target = n.arguments[1];
                 const named = target?.type === 'Literal' && typeof target.value === 'string' ? target.value : null;
-                if (r.paginate && r.paginate !== 'offset' && (!named)) {
-                    report('SN304', 'keyset pagination cannot jump to a page number. Use `paginate="offset"`', target?.start ?? n.start);
+                if (r.paginate && r.paginate !== 'offset' && !named && !(r.paginate === 'keyset' && r.jumps)) {
+                    report('SN304', r.paginate === 'keyset'
+                        ? 'keyset pagination cannot jump to a page number. Add `offset-param` if the server also accepts an offset, or use `paginate="offset"`'
+                        : 'keyset pagination cannot jump to a page number. Use `paginate="offset"`', target?.start ?? n.start);
                 }
                 else if (r.paginate === 'append' && named && named !== 'next') {
                     report('SN304', '`append` pagination only supports `page(…, \'next\')`', target.start);
@@ -827,7 +872,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() } : {}) };
+    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/index.d.ts

@@ -8,10 +8,11 @@ export { compileParts };
 export declare const PACKAGE = "@tiaforge-ui/sinter";
 /** Compiles annotated HTML into a rewritten page and its page module. Pure and deterministic. */
 export declare function compile(html: string, options: CompileOptions): CompileResult;
-export declare function pageModule(parts: CompiledParts, options: Pick<CompileOptions, 'helpers' | 'dev' | 'config'>): string;
+export declare function pageModule(parts: CompiledParts, options: Pick<CompileOptions, 'helpers' | 'dev' | 'config' | 'actions'>): string;
 /**
  * Reads a helpers module's export names statically. `export * as m from './x.js'`
- * becomes a namespace whose members are read from `x.js` the same way.
+ * becomes a namespace whose members are read from `x.js` the same way. `export * from './y.js'`
+ * re-exports (e.g. paraglide's message index) are followed, relative paths only.
  */
 export declare function readHelperManifest(source: string, options: {
     module: string;

package/dist/compiler/index.js

@@ -1,4 +1,5 @@
 import * as acorn from 'acorn';
+import { tsPlugin } from '@sveltejs/acorn-typescript';
 import { compileParts } from './compile.js';
 export { formatDiagnostic, docsUrl, CODES } from './diagnostics.js';
 export { DIAGNOSTIC_DOCS } from './diagnostic-docs.js';
@@ -25,6 +26,21 @@ export function pageModule(parts, options) {
         const mod = options.helpers.namespaces[ns].module;
         lines.push(`import { ${members.map((m) => `${m} as ${ns}$${m}`).join(', ')} } from ${JSON.stringify(mod)};`);
     }
+    // actions (`data-sn-call`): imported as `$a$name` / `$a$ns$member`, only those the page calls
+    const acts = options.actions;
+    if (acts?.module) {
+        const direct = parts.calls.filter((c) => !c.includes('.'));
+        if (direct.length)
+            lines.push(`import { ${direct.map((c) => `${c} as $a$${c}`).join(', ')} } from ${JSON.stringify(acts.module)};`);
+        const byNs = new Map();
+        for (const c of parts.calls.filter((x) => x.includes('.'))) {
+            const [ns, member] = c.split('.');
+            byNs.set(ns, [...(byNs.get(ns) ?? []), member]);
+        }
+        for (const [ns, members] of byNs) {
+            lines.push(`import { ${members.map((x) => `${x} as $a$${ns}$${x}`).join(', ')} } from ${JSON.stringify(acts.namespaces[ns].module)};`);
+        }
+    }
     if (options.config)
         lines.push(`import ${JSON.stringify(options.config)};`);
     lines.push('');
@@ -39,46 +55,81 @@ export function pageModule(parts, options) {
 }
 /**
  * Reads a helpers module's export names statically. `export * as m from './x.js'`
- * becomes a namespace whose members are read from `x.js` the same way.
+ * becomes a namespace whose members are read from `x.js` the same way. `export * from './y.js'`
+ * re-exports (e.g. paraglide's message index) are followed, relative paths only.
  */
 export function readHelperManifest(source, options) {
     const manifest = { module: options.module, names: [], namespaces: {} };
     const resolve = options.resolve ?? ((spec, from) => (spec.startsWith('.') ? joinPath(from, spec) : null));
-    const { names, namespaces } = exportsOf(source);
-    manifest.names = names;
-    for (const [ns, spec] of namespaces) {
-        const path = resolve(spec, options.file);
-        let members = [];
-        if (path) {
-            try {
-                members = exportsOf(options.readFile(path)).names;
-            }
-            catch {
-                members = [];
-            }
+    const read = (file) => {
+        try {
+            return exportsOf(options.readFile(file), file);
+        }
+        catch {
+            return null;
         }
+    };
+    /** the module's own value exports plus those of its `export *` re-exports, transitively */
+    const valueNames = (file, exports, seen) => {
+        const names = new Set(exports.names);
+        for (const spec of exports.reexports) {
+            const path = spec.startsWith('.') ? resolve(spec, file) : null;
+            if (!path || seen.has(path))
+                continue;
+            seen.add(path);
+            const sub = read(path);
+            if (sub)
+                for (const n of valueNames(path, sub, seen))
+                    names.add(n);
+        }
+        return [...names].sort();
+    };
+    const top = exportsOf(source, options.file);
+    manifest.names = valueNames(options.file, top, new Set([options.file]));
+    for (const [ns, spec] of top.namespaces) {
+        const path = resolve(spec, options.file);
+        const exports = path ? read(path) : null;
+        const members = path && exports ? valueNames(path, exports, new Set([path])) : [];
         const modSpec = spec.startsWith('.') ? joinPath(options.module, spec) : spec;
         manifest.namespaces[ns] = { module: modSpec, members };
     }
     return manifest;
 }
-function exportsOf(source) {
-    const ast = acorn.parse(source, { ecmaVersion: 'latest', sourceType: 'module' });
+/** acorn extended with TypeScript syntax, for `.ts` helper and namespace modules */
+let tsParser = null;
+function parseModule(source, file) {
+    const options = { ecmaVersion: 'latest', sourceType: 'module' };
+    if (!/\.[cm]?tsx?$/.test(file))
+        return acorn.parse(source, options);
+    tsParser ??= acorn.Parser.extend(tsPlugin());
+    return tsParser.parse(source, options);
+}
+/** Value exports only: type-only exports (`export type`, `export interface`, `export { type X }`) are skipped. */
+function exportsOf(source, file) {
+    const ast = parseModule(source, file);
     const names = [];
     const namespaces = [];
+    const reexports = [];
+    const typeOnly = (n) => n.exportKind === 'type';
     for (const st of ast.body) {
+        if (typeOnly(st))
+            continue;
         if (st.type === 'ExportNamedDeclaration') {
             const d = st.declaration;
             if (d?.type === 'FunctionDeclaration' && d.id)
                 names.push(d.id.name);
             else if (d?.type === 'ClassDeclaration' && d.id)
                 names.push(d.id.name);
+            else if (d?.type === 'TSEnumDeclaration')
+                names.push(d.id.name);
             else if (d?.type === 'VariableDeclaration') {
                 for (const v of d.declarations)
                     if (v.id.type === 'Identifier')
                         names.push(v.id.name);
             }
             for (const s of st.specifiers) {
+                if (typeOnly(s))
+                    continue;
                 const exported = s.exported.type === 'Identifier' ? s.exported.name : String(s.exported.value);
                 if (exported !== 'default')
                     names.push(exported);
@@ -88,8 +139,11 @@ function exportsOf(source) {
             const ns = st.exported.type === 'Identifier' ? st.exported.name : String(st.exported.value);
             namespaces.push([ns, String(st.source.value)]);
         }
+        else if (st.type === 'ExportAllDeclaration') {
+            reexports.push(String(st.source.value));
+        }
     }
-    return { names: [...new Set(names)].sort(), namespaces };
+    return { names: [...new Set(names)].sort(), namespaces, reexports };
 }
 function joinPath(from, spec) {
     const dir = from.slice(0, from.lastIndexOf('/') + 1);

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,25 +14,30 @@ 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' },
     { name: 'put', value: 'URL template', doc: 'PUT action' },
     { name: 'patch', value: 'URL template', doc: 'PATCH action' },
     { name: 'delete', value: 'URL template', doc: 'DELETE action' },
+    { name: 'call', value: 'action call', doc: 'local action: calls a function from the actions module, e.g. pgp.decrypt(msg)' },
     { name: 'body', value: 'value expression', doc: 'JSON request body; overrides form serialization' },
     { name: 'trigger', value: 'DOM event name', doc: 'overrides the default trigger' },
-    { name: 'debounce', value: 'milliseconds', doc: 'delays the trigger, resets on each event' },
+    { name: 'debounce', value: 'milliseconds', doc: 'delays the trigger, resets on each event; without a method, delays the element\'s data-sn-on-* handlers' },
     { 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', 'key', 'items', 'total', 'order', 'when', 'paginate', 'page-size', 'size-param', 'cursor', 'direction-param', 'page-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-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' },
     { name: 'sn-event', attrs: ['name', 'resource', 'op', 'item', 'set', 'when', 'fallback', 'type'], doc: 'maps one server event to a change message; child of <sn-sync>' },
     { name: 'sn-include', attrs: ['src'], doc: 'inlines a partial at build time' },

package/dist/each.d.ts

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

package/dist/each.js

@@ -0,0 +1,121 @@
+const isAbort = (e) => e instanceof DOMException && e.name == 'AbortError';
+/**
+ * Sources are keyed by their resolved URL. An item belongs to a source when it came in that
+ * source's last response, or when `src` resolves to the source's URL with the item itself in
+ * place of the list item, so an item a server event added is replaced by the next response.
+ */
+function fanOut(l, app) {
+    const { def, res: r } = l;
+    const each = def.each;
+    const sources = new Map();
+    const queued = new Set();
+    let pending = 0, again = null;
+    const urlOf = (item) => {
+        if (!item || typeof item != 'object')
+            return null;
+        try {
+            return app.url(def.src, Object.assign(Object.create(l.scope()), { [each.item]: item }));
+        }
+        catch {
+            return null;
+        }
+    };
+    /** the confirmed items minus those of source `u`, plus `items` */
+    const swap = (u, s, items) => {
+        const mine = (x) => s.keys.has(r.keyOf(x)) || urlOf(x) === u;
+        r.replace([...r.base().items.filter((x) => !mine(x)), ...items]);
+    };
+    async function load(u) {
+        const s = sources.get(u);
+        if (!s)
+            return;
+        s.c?.abort();
+        const ctl = (s.c = new AbortController()), n = ++s.seq, mark = r.startLoad();
+        let loaded = false;
+        pending++;
+        l.loading(true);
+        try {
+            const body = await l.get(u, ctl.signal);
+            if (n != s.seq || sources.get(u) != s)
+                return;
+            const items = l.items(body);
+            swap(u, s, items);
+            s.keys = new Set(items.map((x) => r.keyOf(x)));
+            s.answered = loaded = true;
+            r.meta.error = null;
+            // loadedAt: every current source has answered once
+            if ([...sources.values()].every((x) => x.answered))
+                r.meta.loadedAt = app.env.now();
+        }
+        catch (e) {
+            if (n != s.seq || isAbort(e))
+                return;
+            s.answered = true;
+            l.failed(e);
+        }
+        finally {
+            r.endLoad(mark, loaded);
+            if (n == s.seq)
+                s.c = null;
+            l.loading(--pending > 0);
+        }
+    }
+    l.changed = () => {
+        const scope = l.scope();
+        let list = [];
+        try {
+            if (def.when == null || app.fns[def.when](scope))
+                list = app.fns[each.list](scope) ?? [];
+        }
+        catch (e) {
+            app.warn(17, def.name, e.message);
+        }
+        const want = new Set();
+        for (const item of Array.isArray(list) ? list : [...list]) {
+            const u = urlOf(item);
+            if (u != null)
+                want.add(u);
+        }
+        for (const [u, s] of sources) {
+            if (want.has(u))
+                continue;
+            s.seq++;
+            s.c?.abort();
+            sources.delete(u);
+            swap(u, s, []);
+        }
+        for (const u of want) {
+            if (sources.has(u))
+                continue;
+            sources.set(u, { c: null, seq: 0, keys: new Set(), answered: false });
+            void load(u);
+        }
+        // nothing to load: loaded once the list itself is (an empty list is an answer, a pending one is not)
+        if (!sources.size && r.meta.loadedAt == null && (!each.of || app.resource(each.of).meta.loadedAt != null)) {
+            r.meta.loadedAt = app.env.now();
+            r.onDirty('meta');
+        }
+        l.loading(pending > 0);
+    };
+    l.start = () => l.changed();
+    l.load = () => Promise.all([...sources.keys()].map(load)).then(() => { });
+    // a hint (an event's payload) that resolves to one source's URL reloads only that source;
+    // several refetches in one task share one round of requests
+    l.refetch = (hint) => {
+        const u = hint ? urlOf(hint) : null;
+        queued.add(u != null && sources.has(u) ? u : '*');
+        return (again ??= Promise.resolve().then(() => {
+            again = null;
+            const urls = queued.has('*') ? [...sources.keys()] : [...queued];
+            queued.clear();
+            return Promise.all(urls.map(load)).then(() => { });
+        }));
+    };
+}
+const each = {
+    name: 'each',
+    install(app) {
+        app.ext.each = { fanOut: (loader) => fanOut(loader, app) };
+    },
+};
+export default each;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { mount, instance, type App, type Feature, type MountOptions, type StateHandle, type Transport } from './runtime/app.js';
+export { mount, instance, type App, type CallContext, type Feature, type MountOptions, type StateHandle, type Transport } from './runtime/app.js';
 export { configure, credentials, header, onUnauthorized, loginRedirect, takeReturnUrl, clearPersisted, SinterError, type Config, type Middleware, type LoginRedirectOptions, } from './runtime/config.js';
 export type { Resource, Change, Meta } from './runtime/store.js';
 export { $k } from './runtime/security.js';