@ketvietlab/ketsuite 0.1.20 → 0.1.24

package/dist/ui/client/record-modal.js

@@ -11,8 +11,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/k
 // Views are render-pure: they read the context and return design-system markup.
 // They never fetch, never touch history and never query the document.
 import { signal } from '@ketvietlab/ketjs-view';
-import { LoadingState, ModalSheet, Notice, Tabs, Button } from '@ketvietlab/design-system';
-import { RECORD_PARAM, RECORD_TAB_PARAM, readRecordModalTarget, recordModalClosedHref, recordModalHost, recordModalHref, } from '../record-modal.js';
+import { Button, LoadingState, ModalSheet, Notice, TabbedView } from '@ketvietlab/design-system';
+import { RECORD_NEW_ID, RECORD_PARAM, RECORD_TAB_PARAM, readRecordModalTarget, recordModalClosedHref, recordModalCreateHref, recordModalHost, recordModalHref, } from '../record-modal.js';
 const issuesOf = (source) => {
     const holder = (source ?? {});
     const list = Array.isArray(holder.errors)
@@ -62,6 +62,8 @@ export const callRecordFunction = async (name, input, options = {}) => {
         return { ok: false, issues: issuesOf(value), message: null, status: response.status };
     return { ok: true, value: payload.value };
 };
+/** How many record contexts one island keeps for instant reopening. */
+export const RECORD_MODAL_CACHE_SIZE = 30;
 /**
  * English defaults for every label the runtime itself shows. A module passes its
  * own language through `labels`; these only guarantee a reader never sees a key.
@@ -74,6 +76,8 @@ export const RECORD_MODAL_LABELS = Object.freeze({
     'recordModal.retry': 'Retry',
     'recordModal.errorTitle': 'Not saved',
     'recordModal.saveFailed': 'That did not work. Try again.',
+    'recordModal.savedTitle': 'Saved',
+    'recordModal.saved': 'The change is in.',
     'recordModal.unsaved': 'Discard what you typed?',
     'recordModal.uploadFailed': 'The file could not be uploaded. Try again.',
 });
@@ -151,6 +155,56 @@ const inertOutside = (keep) => {
 const uuid = () => typeof crypto !== 'undefined' && 'randomUUID' in crypto
     ? crypto.randomUUID()
     : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+const emptyDraftState = () => ({ values: {}, checks: {} });
+const draftCheckKey = (name, value) => `${name}\u0000${value}`;
+const after_ = (command) => command.after ?? 'close';
+/**
+ * How long a command may run before its button says so. Below this the answer
+ * arrives while the reader is still lifting their finger, and a spinner shown
+ * and withdrawn inside that window is noise; above it, silence would read as a
+ * click that did nothing.
+ */
+export const BUSY_AFTER_MS = 400;
+/**
+ * A flag that turns on late and off at once. Work that finishes inside the
+ * window never raises it, so a progress indicator bound to it appears only when
+ * there is progress to report, and never flashes on its way back out.
+ */
+export const delayedFlag = (show, after = BUSY_AFTER_MS) => {
+    let timer;
+    const stop = () => {
+        clearTimeout(timer);
+        timer = undefined;
+    };
+    return {
+        set: (running) => {
+            stop();
+            if (!running) {
+                show(false);
+                return;
+            }
+            timer = setTimeout(() => show(true), after);
+        },
+        stop,
+    };
+};
+/** Controls inside a row do their own thing; the row's destination is for the rest of it. */
+const rowControl = 'a, button, input, select, textarea, label, summary, details, [data-ui="select-cell"]';
+/**
+ * Where a click is asking to go: the link it landed on, or the row it landed
+ * in. A table row carries its destination on the row itself (`rowLink: false`),
+ * so the whole row is one target rather than a link around the first cell. The
+ * shell would navigate such a row through the navigation layer, which fetches
+ * the collection again and leaves the modal unopened, so this reads it first.
+ */
+export const openerHref = (element) => {
+    const anchor = element?.closest('a[href]');
+    if (anchor)
+        return anchor.target && anchor.target !== '_self' ? null : anchor.href;
+    if (element?.closest(rowControl))
+        return null;
+    return element?.closest('[data-row-href]')?.getAttribute('data-row-href') ?? null;
+};
 /**
  * Create the island controller for one record kind.
  *
@@ -163,15 +217,45 @@ export const createRecordModal = (definition) => () => {
     const envelope = signal(null);
     const failure = signal(null);
     const issues = signal([]);
-    const drafts = signal({});
+    const recordDrafts = signal(emptyDraftState());
+    const dialogDrafts = signal(emptyDraftState());
+    // `running` is the guard — one command at a time — and `busy` is what the
+    // views show. They are not the same thing: a save the server answers in
+    // twenty milliseconds would otherwise flash the button through its spinner
+    // and back, which reads as a glitch rather than as progress. The spinner
+    // waits; the guard does not.
+    const running = signal(false);
     const busy = signal(false);
+    const showBusy = delayedFlag((value) => busy.set(value));
+    // A command that succeeded while the modal stayed open. Saving is usually
+    // answered before the button could say anything, and a record that looks
+    // the same afterwards leaves the reader unsure anything happened, so the
+    // form says so where it would have said the opposite.
+    const saved = signal(false);
+    const setRunning = (value) => {
+        running.set(value);
+        showBusy.set(value);
+        if (value)
+            saved.set(false);
+    };
     const dialog = signal(null);
     const version = signal(0);
     const viewState = signal({});
+    // Contexts this island has read, newest last: reopening a record (or the create
+    // form) renders immediately and revalidates in place. Bounded and page-scoped;
+    // a successful command or `ket:records-changed` for this kind drops the entries.
+    const cache = new Map();
+    const remember = (id, value) => {
+        cache.delete(id);
+        cache.set(id, value);
+        while (cache.size > RECORD_MODAL_CACHE_SIZE)
+            cache.delete(cache.keys().next().value);
+    };
     let root = null;
     let request = null;
     let pushed = false;
     let returnFocus = null;
+    let dialogReturnFocus = null;
     let releaseInert = null;
     // Messages of the last record this modal loaded: opening the next record clears
     // the envelope, and its loading state still needs words rather than keys.
@@ -183,10 +267,12 @@ export const createRecordModal = (definition) => () => {
         labels: labels(),
     }), params);
     const visibleTabs = (context) => (definition.tabs ?? []).filter((tab) => tab.visible?.(context) ?? true);
-    const contextFor = (current, data) => {
+    const contextFor = (current, data, scope = 'record') => {
+        const draftState = () => (scope === 'dialog' ? dialogDrafts() : recordDrafts());
         const base = {
             kind: definition.kind,
             id: current.id,
+            creating: current.id === RECORD_NEW_ID,
             tab: current.tab,
             data,
             t,
@@ -194,7 +280,8 @@ export const createRecordModal = (definition) => () => {
                 const hit = issues().find((issue) => issue.field === name);
                 return hit ? (hit.message ?? t(hit.code, hit.params)) : null;
             },
-            draft: (name, fallback = '') => drafts()[name] ?? fallback,
+            draft: (name, fallback = '') => draftState().values[name] ?? fallback,
+            draftChecked: (name, value = '1', fallback = false) => draftState().checks[draftCheckKey(name, value)] ?? fallback,
             busy: busy(),
             dialog: dialog(),
             href: (tab) => recordModalHref(location.href, { kind: definition.kind, id: current.id, tab }),
@@ -209,11 +296,25 @@ export const createRecordModal = (definition) => () => {
         request?.abort();
         const controller = new AbortController();
         request = controller;
+        // A record opened before shows at once from the in-memory cache and is read
+        // again quietly behind it; the reader never waits on a frame they have seen.
+        const cached = definition.cache === false ? undefined : cache.get(id);
+        if (cached) {
+            previousMessages = cached.messages ?? previousMessages;
+            envelope.set(cached);
+            status.set('ready');
+            quiet = true;
+        }
         if (!quiet)
             status.set('loading');
         failure.set(null);
         try {
-            const input = definition.context.input ? definition.context.input(id) : { id };
+            const creating = id === RECORD_NEW_ID;
+            const input = definition.context.input
+                ? definition.context.input(id, creating)
+                : creating
+                    ? {}
+                    : { id };
             const result = await callRecordFunction(definition.context.fn, input, {
                 signal: controller.signal,
             });
@@ -225,6 +326,8 @@ export const createRecordModal = (definition) => () => {
                 return;
             }
             previousMessages = result.value.messages ?? previousMessages;
+            if (definition.cache !== false)
+                remember(id, result.value);
             envelope.set(result.value);
             status.set('ready');
         }
@@ -235,30 +338,64 @@ export const createRecordModal = (definition) => () => {
             status.set('error');
         }
     };
-    const layer = () => root?.querySelector('[data-ui="modal-layer"][data-client-modal="true"]') ?? null;
-    const keepDrafts = () => {
-        const current = layer();
-        if (!current || !recordLayerHasDraft(current))
+    const layers = () => root ? [...root.querySelectorAll('[data-ui="modal-layer"][data-client-modal="true"]')] : [];
+    const recordLayer = () => layers()[0] ?? null;
+    const topLayer = () => layers().at(-1) ?? null;
+    const keepDrafts = (current, scope) => {
+        if (!current)
             return;
-        const kept = {};
-        for (const form of current.querySelectorAll('form'))
-            for (const [key, value] of new FormData(form))
-                if (typeof value === 'string' && key !== RECORD_COMMAND_FIELD)
-                    kept[key] = value;
-        drafts.set({ ...drafts(), ...kept });
+        const previous = scope === 'dialog' ? dialogDrafts() : recordDrafts();
+        const kept = {
+            values: { ...previous.values },
+            checks: { ...previous.checks },
+        };
+        for (const control of current.querySelectorAll('input[name], select[name], textarea[name]')) {
+            if (control.disabled || control.name === RECORD_COMMAND_FIELD)
+                continue;
+            if (control instanceof HTMLInputElement) {
+                if (control.type === 'file' || control.type === 'hidden')
+                    continue;
+                if (control.type === 'checkbox' || control.type === 'radio') {
+                    kept.checks[draftCheckKey(control.name, control.value)] = control.checked;
+                    if (control.type === 'checkbox')
+                        kept.values[control.name] = control.checked ? control.value : '';
+                    else if (control.checked)
+                        kept.values[control.name] = control.value;
+                    continue;
+                }
+            }
+            kept.values[control.name] = control.value;
+        }
+        if (scope === 'dialog')
+            dialogDrafts.set(kept);
+        else
+            recordDrafts.set(kept);
+    };
+    const keepAllDrafts = () => {
+        const currentLayers = layers();
+        keepDrafts(currentLayers[0] ?? null, 'record');
+        if (currentLayers.length > 1)
+            keepDrafts(currentLayers.at(-1) ?? null, 'dialog');
     };
-    const mayDiscard = () => {
-        const current = layer();
+    const mayDiscard = (current) => {
         if (!current || !recordLayerHasDraft(current))
             return true;
         return globalThis.confirm(t('recordModal.unsaved'));
     };
-    const afterRender = () => {
+    const afterRender = (preferred) => {
         requestAnimationFrame(() => {
-            const layers = root?.querySelectorAll('[data-ui="modal-layer"][data-client-modal="true"]');
-            const top = layers?.[layers.length - 1];
+            const currentLayers = layers();
+            const record = currentLayers[0];
+            const top = currentLayers.at(-1);
             if (!top)
                 return;
+            if (record)
+                record.inert = currentLayers.length > 1;
+            const target = preferred?.();
+            if (target?.isConnected && top.contains(target)) {
+                target.focus();
+                return;
+            }
             if (top.contains(document.activeElement))
                 return;
             const sheet = top.querySelector('[data-ui="modal-sheet"]');
@@ -266,22 +403,30 @@ export const createRecordModal = (definition) => () => {
             (first ?? sheet)?.focus();
         });
     };
-    const show = (id, tab, how) => {
+    const show = (id, tab, how, preferredFocus) => {
         const current = open();
         const sameRecord = current?.id === id;
         const nextTab = tab ?? (sameRecord ? current.tab : '');
         if (!sameRecord) {
             returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
             issues.set([]);
-            drafts.set({});
+            saved.set(false);
+            recordDrafts.set(emptyDraftState());
+            dialogDrafts.set(emptyDraftState());
             viewState.set({});
             dialog.set(null);
+            dialogReturnFocus = null;
             envelope.set(null);
             void load(id);
         }
         open.set({ id, tab: nextTab });
         const href = recordModalHref(location.href, { kind: definition.kind, id, tab: nextTab || null });
         if (how === 'push') {
+            // The shell's own navigation snapshots scroll onto the entry it leaves
+            // before pushing (`saveScroll` in packages/ketjs/src/server/http.ts) so
+            // going back restores it; this push must do the same, or closing the
+            // modal later restores no scroll and the page it sits over jumps to top.
+            history.replaceState({ ...(history.state ?? {}), __ketScroll: [window.scrollX, window.scrollY] }, '', location.href);
             history.pushState({ ...(history.state ?? {}), __ketRecordModal: definition.kind }, '', href);
             pushed = true;
         }
@@ -289,14 +434,16 @@ export const createRecordModal = (definition) => () => {
             history.replaceState(history.state ?? {}, '', href);
         if (root && !releaseInert)
             releaseInert = inertOutside(root);
-        afterRender();
+        afterRender(preferredFocus);
     };
     const hide = (how) => {
         request?.abort();
         open.set(null);
         dialog.set(null);
         issues.set([]);
-        drafts.set({});
+        saved.set(false);
+        recordDrafts.set(emptyDraftState());
+        dialogDrafts.set(emptyDraftState());
         viewState.set({});
         status.set('idle');
         envelope.set(null);
@@ -312,19 +459,23 @@ export const createRecordModal = (definition) => () => {
         }
         const target = returnFocus;
         returnFocus = null;
+        dialogReturnFocus = null;
         if (target?.isConnected)
             requestAnimationFrame(() => target.focus());
     };
     const close = () => {
         if (dialog()) {
-            if (!mayDiscard())
+            if (!mayDiscard(topLayer()))
                 return;
+            const target = dialogReturnFocus;
+            dialogReturnFocus = null;
             dialog.set(null);
+            dialogDrafts.set(emptyDraftState());
             issues.set([]);
-            afterRender();
+            afterRender(() => (target?.isConnected ? target : null));
             return;
         }
-        if (!mayDiscard())
+        if (!mayDiscard(recordLayer()))
             return;
         hide('history');
     };
@@ -332,11 +483,19 @@ export const createRecordModal = (definition) => () => {
         const command = definition.commands?.[name];
         const current = open();
         const data = envelope()?.data;
-        if (!command || !current || data === undefined || busy())
+        if (!command || !current || data === undefined || running())
             return;
         const formData = new FormData(form, submitter instanceof HTMLButtonElement ? submitter : null);
-        const context = contextFor(current, data);
-        busy.set(true);
+        const currentLayer = form.closest('[data-ui="modal-layer"][data-client-modal="true"]');
+        const scope = dialog() && currentLayer === topLayer() ? 'dialog' : 'record';
+        keepDrafts(currentLayer, scope);
+        const context = contextFor(current, data, scope);
+        if (command.confirm) {
+            const message = command.confirm(context);
+            if (message && !globalThis.confirm(message))
+                return;
+        }
+        setRunning(true);
         issues.set([]);
         try {
             const uploads = {};
@@ -366,16 +525,20 @@ export const createRecordModal = (definition) => () => {
                     name: typeof stored.name === 'string' ? stored.name : null,
                 };
             }
-            const result = await callRecordFunction(command.fn, command.input(formData, context, uploads), {
-                idempotencyKey: uuid(),
-            });
+            const invoke = (fn, input) => callRecordFunction(fn, input, { idempotencyKey: uuid() });
+            let result = await invoke(command.fn, command.input(formData, context, uploads));
+            // Further calls run only once the first succeeds, and stop at the first
+            // one that does not — a later step's success never papers over an
+            // earlier failure.
+            for (const step of result.ok ? (command.also ?? []) : []) {
+                if (step.when && !step.when(context))
+                    continue;
+                result = await invoke(step.fn, step.input(formData, context, uploads));
+                if (!result.ok)
+                    break;
+            }
             if (!result.ok) {
-                // Keep what was typed: the view reads it back through `draft`.
-                const kept = {};
-                for (const [key, value] of formData)
-                    if (typeof value === 'string')
-                        kept[key] = value;
-                drafts.set({ ...drafts(), ...kept });
+                // The layer was snapshotted before the busy state rendered, including unchecked controls.
                 issues.set(result.issues.length
                     ? result.issues
                     : [
@@ -388,35 +551,77 @@ export const createRecordModal = (definition) => () => {
                     ]);
                 return;
             }
-            drafts.set({});
+            if (scope === 'dialog')
+                dialogDrafts.set(emptyDraftState());
+            else
+                recordDrafts.set(emptyDraftState());
             form.reset();
-            document.dispatchEvent(new CustomEvent('ket:records-changed', { detail: { kind: definition.kind, ids: [current.id] } }));
-            const after = command.after ?? 'close';
+            const value = result.value;
+            const createdId = after_(command) === 'open'
+                ? (command.created?.(result.value) ??
+                    (value && typeof value === 'object' && value.id != null ? String(value.id) : null))
+                : null;
+            // What the command changed is no longer what the cache holds.
+            cache.delete(current.id);
+            if (createdId)
+                cache.delete(createdId);
+            const announce = () => {
+                document.dispatchEvent(new CustomEvent('ket:records-changed', {
+                    detail: { kind: definition.kind, ids: [createdId ?? current.id] },
+                }));
+            };
+            const after = after_(command);
+            // A modal that closes says so by closing; one that stays owes an answer.
+            if (after !== 'close')
+                saved.set(true);
+            if (after === 'open') {
+                dialog.set(null);
+                dialogDrafts.set(emptyDraftState());
+                // Replace `:new` in the address bar before the collection refreshes: the
+                // shell re-fetches `location.href`, which must already name the new record.
+                if (createdId)
+                    show(createdId, command.openTab ?? null, 'replace');
+                else
+                    hide('history');
+                announce();
+                return;
+            }
+            announce();
             if (after === 'close')
                 hide('history');
             else if (after === 'reload') {
+                const target = dialogReturnFocus;
+                dialogReturnFocus = null;
                 dialog.set(null);
+                dialogDrafts.set(emptyDraftState());
                 await load(current.id);
+                afterRender(() => (target?.isConnected ? target : null));
             }
             else if (after === 'refresh')
                 await load(current.id, true);
             else if (after === 'stay')
                 version.set(version() + 1);
             else if ('tab' in after) {
+                dialogReturnFocus = null;
                 dialog.set(null);
+                dialogDrafts.set(emptyDraftState());
                 show(current.id, after.tab, 'replace');
                 await load(current.id);
             }
             else {
+                const target = after.dialog ? null : dialogReturnFocus;
+                dialogReturnFocus = after.dialog && submitter instanceof HTMLElement ? submitter : null;
                 dialog.set(after.dialog ? { name: after.dialog, params: {} } : null);
+                dialogDrafts.set(emptyDraftState());
                 await load(current.id, true);
+                afterRender(() => (target?.isConnected ? target : null));
             }
         }
         catch {
             issues.set([{ field: null, code: 'recordModal.saveFailed', message: null, params: {} }]);
         }
         finally {
-            busy.set(false);
+            setRunning(false);
         }
     };
     const formIssues = (context) => {
@@ -424,7 +629,13 @@ export const createRecordModal = (definition) => () => {
         const fieldless = issues().filter((issue) => issue.field && !root?.querySelector(`[name="${CSS.escape(issue.field)}"]`));
         const all = [...general, ...fieldless];
         if (!all.length)
-            return '';
+            return saved()
+                ? Notice({
+                    title: context.t('recordModal.savedTitle'),
+                    message: context.t('recordModal.saved'),
+                    tone: 'positive',
+                })
+                : '';
         return Notice({
             title: context.t('recordModal.errorTitle'),
             message: all.map((issue) => issue.message ?? context.t(issue.code, issue.params)).join(' · '),
@@ -447,17 +658,23 @@ export const createRecordModal = (definition) => () => {
         const context = contextFor(current, data);
         const tabs = visibleTabs(context);
         const active = tabs.find((tab) => tab.id === context.tab);
-        return (_jsxs(_Fragment, { children: [definition.header?.(context) ?? '', formIssues(context), tabs.length
-                    ? Tabs({
-                        label: definition.title(context),
-                        items: tabs.map((tab) => ({
-                            id: tab.id,
-                            label: tab.label(context),
-                            href: context.href(tab.id),
-                            active: tab.id === context.tab,
-                        })),
-                    })
-                    : '', active ? active.view(context) : (definition.body?.(context) ?? '')] }));
+        const header = definition.header?.(context) ?? '';
+        const issueNotice = formIssues(context);
+        const body = active ? active.view(context) : (definition.body?.(context) ?? '');
+        if (tabs.length)
+            return TabbedView({
+                id: `record-view-${definition.kind.replaceAll('.', '-')}`,
+                label: definition.title(context),
+                items: tabs.map((tab) => ({
+                    id: tab.id,
+                    label: tab.label(context),
+                    href: context.href(tab.id),
+                    active: tab.id === context.tab,
+                })),
+                context: header !== '' || issueNotice !== '' ? (_jsxs(_Fragment, { children: [header, issueNotice] })) : undefined,
+                body,
+            });
+        return (_jsxs(_Fragment, { children: [header, issueNotice, body] }));
     };
     const dialogLayer = () => {
         const current = open();
@@ -468,7 +685,7 @@ export const createRecordModal = (definition) => () => {
         const spec = definition.dialogs?.[opened.name];
         if (!spec)
             return '';
-        const context = contextFor(current, data);
+        const context = contextFor(current, data, 'dialog');
         return ModalSheet({
             id: `record-dialog-${definition.kind.replaceAll('.', '-')}-${opened.name}`,
             mode: 'client',
@@ -492,8 +709,14 @@ export const createRecordModal = (definition) => () => {
                         mode: 'client',
                         presentation: 'dialog',
                         size: definition.size ?? 'default',
+                        // Tabs have different heights; a fixed dialog does not jump when the reader switches
+                        // tabs, nor when the loading state gives way to the record.
+                        height: (definition.tabs?.length ?? 0) > 1 ? 'fixed' : 'content',
+                        fixedHeight: definition.fixedHeight,
                         title: context ? definition.title(context) : t('recordModal.loading'),
                         description: context ? (definition.description?.(context) ?? null) : null,
+                        status: context ? definition.status?.(context) : undefined,
+                        actions: context ? definition.actions?.(context) : undefined,
                         closeLabel: t('recordModal.close'),
                         body: recordBody(),
                     }), dialogLayer()] }));
@@ -513,7 +736,11 @@ export const createRecordModal = (definition) => () => {
                 const element = event.target instanceof Element ? event.target : null;
                 const inModal = element?.closest('[data-ui="modal-layer"][data-client-modal="true"]');
                 if (inModal && root?.contains(inModal)) {
-                    if (element?.closest('[data-ui="modal-close"], [data-ui="modal-backdrop"]')) {
+                    // `data-ui="modal-close"` is the chrome's own × control; `data-record-close`
+                    // marks a module's own labeled close button placed elsewhere in the body
+                    // (the two can't share one attribute — a labeled button needs `data-ui="action"`
+                    // for its styling, not the icon-only close control's).
+                    if (element?.closest('[data-ui="modal-close"], [data-ui="modal-backdrop"], [data-record-close]')) {
                         event.preventDefault();
                         close();
                         return;
@@ -521,6 +748,7 @@ export const createRecordModal = (definition) => () => {
                     const stateControl = element?.closest('button[data-record-state], a[data-record-state]');
                     if (stateControl) {
                         event.preventDefault();
+                        keepAllDrafts();
                         viewState.set({
                             ...viewState(),
                             [stateControl.getAttribute('data-record-state') ?? '']: stateControl.getAttribute('data-record-value') ?? '',
@@ -530,6 +758,12 @@ export const createRecordModal = (definition) => () => {
                     const opener = element?.closest(`[${RECORD_DIALOG_ATTRIBUTE}]`);
                     if (opener) {
                         event.preventDefault();
+                        const focused = document.activeElement;
+                        dialogReturnFocus =
+                            focused instanceof HTMLElement && opener.contains(focused)
+                                ? focused
+                                : opener.querySelector(focusable);
+                        dialogDrafts.set(emptyDraftState());
                         const params = {};
                         for (const [key, value] of Object.entries(opener.dataset))
                             if (key.startsWith('recordParam') && value !== undefined)
@@ -547,10 +781,10 @@ export const createRecordModal = (definition) => () => {
                         return;
                     }
                 }
-                const anchor = element?.closest('a[href]');
-                if (!anchor || (anchor.target && anchor.target !== '_self'))
+                const href = openerHref(element);
+                if (!href)
                     return;
-                const url = new URL(anchor.href, location.href);
+                const url = new URL(href, location.href);
                 if (url.origin !== location.origin || url.pathname !== location.pathname)
                     return;
                 const target = readRecordModalTarget(url);
@@ -563,9 +797,9 @@ export const createRecordModal = (definition) => () => {
                         return;
                     // Switching tab is not discarding: what was typed rides along as drafts,
                     // which the views read back, so no prompt stands between two tabs.
-                    keepDrafts();
+                    keepDrafts(recordLayer(), 'record');
                     issues.set([]);
-                    show(target.id, target.tab ?? null, 'replace');
+                    show(target.id, target.tab ?? null, 'replace', () => recordLayer()?.querySelector('[data-ui="tab"][data-active="true"]') ?? null);
                     return;
                 }
                 show(target.id, target.tab ?? null, 'push');
@@ -573,6 +807,24 @@ export const createRecordModal = (definition) => () => {
             // Capture: the navigation layer listens on the document too, and was
             // installed first, so a bubbling listener would see the page fetched.
             { signal: lifetime, capture: true });
+            // A row is reached by keyboard, not by pointer alone: Enter and Space on
+            // the focused row open what clicking it opens.
+            document.addEventListener('keydown', (event) => {
+                if (event.defaultPrevented || (event.key !== 'Enter' && event.key !== ' '))
+                    return;
+                const element = event.target instanceof Element ? event.target : null;
+                if (!element?.matches('[data-row-href][tabindex="0"]'))
+                    return;
+                const href = element.getAttribute('data-row-href');
+                const url = href ? new URL(href, location.href) : null;
+                if (!url || url.origin !== location.origin || url.pathname !== location.pathname)
+                    return;
+                const target = readRecordModalTarget(url);
+                if (!target || target.kind !== definition.kind)
+                    return;
+                event.preventDefault();
+                show(target.id, target.tab ?? null, 'push');
+            }, { signal: lifetime, capture: true });
             document.addEventListener('submit', (event) => {
                 const form = event.target instanceof HTMLFormElement ? event.target : null;
                 if (!form || !root?.contains(form))
@@ -625,6 +877,7 @@ export const createRecordModal = (definition) => () => {
                     return;
                 if ((control instanceof HTMLSelectElement || control instanceof HTMLInputElement) &&
                     control.hasAttribute('data-record-state')) {
+                    keepAllDrafts();
                     viewState.set({
                         ...viewState(),
                         [control.getAttribute('data-record-state') ?? '']: control.value,
@@ -692,6 +945,18 @@ export const createRecordModal = (definition) => () => {
             });
             observer.observe(root, { childList: true, subtree: true });
             lifetime.addEventListener('abort', () => observer.disconnect());
+            // Another island (or this one) changed records of this kind: drop them so the
+            // next opening reads fresh data first.
+            document.addEventListener('ket:records-changed', (event) => {
+                const detail = event.detail;
+                if (detail?.kind !== definition.kind)
+                    return;
+                if (!Array.isArray(detail.ids) || !detail.ids.length)
+                    cache.clear();
+                else
+                    for (const id of detail.ids)
+                        cache.delete(String(id));
+            }, { signal: lifetime });
             // Back and forward over entries this modal created change only the modal.
             document.addEventListener('ket:popstate', (event) => {
                 const target = readRecordModalTarget(location.href);
@@ -709,6 +974,7 @@ export const createRecordModal = (definition) => () => {
                 show(initial.id, initial.tab ?? null, 'none');
             lifetime.addEventListener('abort', () => {
                 request?.abort();
+                showBusy.stop();
                 releaseInert?.();
                 releaseInert = null;
                 root = null;
@@ -721,5 +987,5 @@ export const createRecordModal = (definition) => () => {
  * appears and disposes it when the host leaves; props must be JSON.
  */
 export const recordIsland = (name, props) => (_jsx("ket-island", { "data-island": name, "data-props": JSON.stringify(props) }));
-export { RECORD_PARAM, RECORD_TAB_PARAM, recordModalHref, recordModalClosedHref, readRecordModalTarget };
+export { RECORD_NEW_ID, RECORD_PARAM, RECORD_TAB_PARAM, recordModalHref, recordModalCreateHref, recordModalClosedHref, readRecordModalTarget, };
 //# sourceMappingURL=record-modal.js.map