@ketvietlab/ketsuite 0.1.25 → 0.1.30

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

@@ -38,8 +38,11 @@ const issuesOf = (source) => {
  * permission refusal (`ok: false` on the envelope) come back in one shape, so a
  * view never has to know which layer said no.
  */
-export const callRecordFunction = async (name, input, options = {}) => {
-    const response = await fetch(`/_ket/fn/${encodeURIComponent(name)}`, {
+export const callRecordRoute = async (route, input, options = {}) => {
+    const target = new URL(route, 'https://record.invalid');
+    if (target.origin !== 'https://record.invalid' || !route.startsWith('/') || route.startsWith('//'))
+        throw new Error('Record commands require a same-origin route');
+    const response = await fetch(target.pathname + target.search, {
         method: 'POST',
         credentials: 'same-origin',
         headers: {
@@ -54,7 +57,9 @@ export const callRecordFunction = async (name, input, options = {}) => {
         return {
             ok: false,
             issues: issuesOf(payload.error ?? payload),
-            message: payload.error?.message ?? payload.message ?? null,
+            // A server failure is not the user's to read: its text is for the log, and
+            // the modal falls back to its own words.
+            message: response.status >= 500 ? null : (payload.error?.message ?? payload.message ?? null),
             status: response.status,
         };
     const value = payload.value;
@@ -62,6 +67,22 @@ export const callRecordFunction = async (name, input, options = {}) => {
         return { ok: false, issues: issuesOf(value), message: null, status: response.status };
     return { ok: true, value: payload.value };
 };
+/** Call a declared function through the same response and refusal contract. */
+export const callRecordFunction = (name, input, options = {}) => callRecordRoute(`/_ket/fn/${encodeURIComponent(name)}`, input, options);
+/** Read-only context routes compose permission-checked function calls on the server. */
+export const readRecordContextRoute = async (href, signal) => {
+    const url = new URL(href, location.href);
+    if (url.origin !== location.origin)
+        throw new Error('Record context must stay same-origin');
+    const response = await fetch(url.href, {
+        credentials: 'same-origin',
+        signal,
+        headers: { accept: 'application/json' },
+    });
+    if (!response.ok)
+        return { ok: false, issues: [], message: null, status: response.status };
+    return { ok: true, value: (await response.json()) };
+};
 /** How many record contexts one island keeps for instant reopening. */
 export const RECORD_MODAL_CACHE_SIZE = 30;
 /**
@@ -84,13 +105,21 @@ export const RECORD_MODAL_LABELS = Object.freeze({
 /**
  * The text for a key: the loaded context's messages, then the messages of the
  * last record this modal opened, then the module's labels, then the defaults.
- * Only an unknown key falls through to itself.
+ * Unknown refusal codes use a friendly fallback; other unknown keys fall through to themselves.
  */
 export const resolveRecordModalLabel = (key, sources) => sources.messages?.[key] ??
     sources.previous?.[key] ??
     sources.labels?.[key] ??
     RECORD_MODAL_LABELS[key] ??
-    key;
+    (/^E_[A-Z_]+$/u.test(key) ? resolveRecordModalLabel('recordModal.saveFailed', sources) : key);
+/**
+ * The text for a refusal code. A server may refuse with any code; one no source
+ * translates reads as the save failure rather than as the code itself.
+ */
+export const resolveRecordModalIssue = (code, sources) => {
+    const text = resolveRecordModalLabel(code, sources);
+    return text === code ? resolveRecordModalLabel('recordModal.saveFailed', sources) : text;
+};
 /** Field a form (or its submitter) uses to name the command it runs. */
 export const RECORD_COMMAND_FIELD = '__command';
 /** Field a link or button uses to open a dialog of the same record. */
@@ -110,6 +139,8 @@ const focusablesIn = (element) => [...element.querySelectorAll(focusable)].filte
     !item.matches('[data-ui="modal-backdrop"]'));
 /** Whether anything in a layer was typed into since it rendered. Same rule as route modals. */
 export const recordLayerHasDraft = (layer) => {
+    if (layer.querySelector('[data-record-dirty="true"]'))
+        return true;
     for (const field of layer.querySelectorAll('input:not([type="hidden"])')) {
         if (field.disabled)
             continue;
@@ -155,8 +186,13 @@ 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: {} });
+/** Compare against the first render, including fields on tabs no longer mounted. */
+export const recordDraftHasChanges = (draft) => Object.entries(draft.values).some(([key, value]) => value !== draft.initialValues[key]) ||
+    Object.entries(draft.checks).some(([key, value]) => value !== draft.initialChecks[key]);
+const emptyDraftState = () => ({ values: {}, checks: {}, initialValues: {}, initialChecks: {} });
 const draftCheckKey = (name, value) => `${name}\u0000${value}`;
+/** Name prefix of a checkbox that ticks every checkbox of its form sharing the rest of its name. */
+export const CHECK_ALL = '__all:';
 const after_ = (command) => command.after ?? 'close';
 /**
  * How long a command may run before its button says so. Below this the answer
@@ -241,6 +277,10 @@ export const createRecordModal = (definition) => () => {
     const dialog = signal(null);
     const version = signal(0);
     const viewState = signal({});
+    // What the last preview command answered. One at a time: a second preview
+    // replaces the first, and anything that moves the layer clears it, so a
+    // consequence is never read beside a selection it was not computed from.
+    const outcome = signal(null);
     // 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.
@@ -261,11 +301,9 @@ export const createRecordModal = (definition) => () => {
     // the envelope, and its loading state still needs words rather than keys.
     let previousMessages = null;
     const labels = () => typeof definition.labels === 'function' ? definition.labels() : (definition.labels ?? {});
-    const t = (key, params) => interpolate(resolveRecordModalLabel(key, {
-        messages: envelope()?.messages,
-        previous: previousMessages,
-        labels: labels(),
-    }), params);
+    const sources = () => ({ messages: envelope()?.messages, previous: previousMessages, labels: labels() });
+    const t = (key, params) => interpolate(resolveRecordModalLabel(key, sources()), params);
+    const issueText = (issue) => issue.message ?? interpolate(resolveRecordModalIssue(issue.code, sources()), issue.params);
     const visibleTabs = (context) => [...(definition.tabs ?? []), ...(definition.extensionTabs?.(context) ?? [])].filter((tab) => tab.visible?.(context) ?? true);
     const contextFor = (current, data, scope = 'record') => {
         const draftState = () => (scope === 'dialog' ? dialogDrafts() : recordDrafts());
@@ -278,10 +316,23 @@ export const createRecordModal = (definition) => () => {
             t,
             fieldError: (name) => {
                 const hit = issues().find((issue) => issue.field === name);
-                return hit ? (hit.message ?? t(hit.code, hit.params)) : null;
+                return hit ? issueText(hit) : null;
+            },
+            draft: (name, fallback = '') => {
+                const draft = draftState();
+                draft.initialValues[name] ??= fallback;
+                return draft.values[name] ?? fallback;
+            },
+            draftChecked: (name, value = '1', fallback = false) => {
+                const draft = draftState();
+                const key = draftCheckKey(name, value);
+                draft.initialChecks[key] ??= fallback;
+                return draft.checks[key] ?? fallback;
+            },
+            outcome: (command) => {
+                const held = outcome();
+                return held?.command === command ? held.value : null;
             },
-            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 }),
@@ -310,14 +361,9 @@ export const createRecordModal = (definition) => () => {
         failure.set(null);
         try {
             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,
-            });
+            const result = 'route' in definition.context
+                ? await readRecordContextRoute(definition.context.route(id, creating), controller.signal)
+                : await callRecordFunction(definition.context.fn, definition.context.input ? definition.context.input(id, creating) : creating ? {} : { id }, { signal: controller.signal });
             if (controller.signal.aborted)
                 return;
             if (!result.ok || !result.value) {
@@ -341,6 +387,36 @@ export const createRecordModal = (definition) => () => {
     const layers = () => root ? [...root.querySelectorAll('[data-ui="modal-layer"][data-client-modal="true"]')] : [];
     const recordLayer = () => layers()[0] ?? null;
     const topLayer = () => layers().at(-1) ?? null;
+    // Hold only the height actually seen for this record, never the viewport height.
+    let tallestRecordHeight = 0;
+    const fitRecordHeight = () => {
+        if (definition.fixedHeight || status() !== 'ready')
+            return;
+        const sheet = recordLayer()?.querySelector('[data-ui="modal-sheet"][data-height="fixed"]');
+        if (!sheet)
+            return;
+        // Match ModalSheet's compact contract: mobile dialogs occupy the screen.
+        // Do not retain that viewport height as a desktop content measurement.
+        if (window.matchMedia('(max-width: 47.9375rem)').matches) {
+            sheet.style.setProperty('height', '100dvh', 'important');
+            sheet.style.removeProperty('min-height');
+            return;
+        }
+        const tabs = sheet.querySelector('[data-ui="tabbed-view"]');
+        if (!tabs)
+            return;
+        const panel = tabs.querySelector('[data-ui="tab-panel"]');
+        const scrollTop = panel?.scrollTop ?? 0;
+        sheet.style.setProperty('height', 'auto', 'important');
+        sheet.style.setProperty('min-height', '0');
+        tabs.style.setProperty('height', 'auto');
+        tallestRecordHeight = Math.max(tallestRecordHeight, Math.ceil(sheet.getBoundingClientRect().height));
+        tabs.style.removeProperty('height');
+        const cap = getComputedStyle(sheet).maxHeight;
+        sheet.style.setProperty('min-height', cap === 'none' ? `${tallestRecordHeight}px` : `min(${tallestRecordHeight}px, ${cap})`);
+        if (panel)
+            panel.scrollTop = scrollTop;
+    };
     const keepDrafts = (current, scope) => {
         if (!current)
             return;
@@ -348,6 +424,8 @@ export const createRecordModal = (definition) => () => {
         const kept = {
             values: { ...previous.values },
             checks: { ...previous.checks },
+            initialValues: { ...previous.initialValues },
+            initialChecks: { ...previous.initialChecks },
         };
         for (const control of current.querySelectorAll('input[name], select[name], textarea[name]')) {
             if (control.disabled || control.name === RECORD_COMMAND_FIELD)
@@ -356,14 +434,25 @@ export const createRecordModal = (definition) => () => {
                 if (control.type === 'file' || control.type === 'hidden')
                     continue;
                 if (control.type === 'checkbox' || control.type === 'radio') {
-                    kept.checks[draftCheckKey(control.name, control.value)] = control.checked;
+                    const key = draftCheckKey(control.name, control.value);
+                    kept.initialChecks[key] ??= control.defaultChecked;
+                    kept.checks[key] = control.checked;
+                    // Keep checkbox/radio values available to draft(), but compare these
+                    // groups by checked state: several controls may share one name.
                     if (control.type === 'checkbox')
                         kept.values[control.name] = control.checked ? control.value : '';
                     else if (control.checked)
                         kept.values[control.name] = control.value;
+                    kept.initialValues[control.name] = kept.values[control.name] ?? '';
                     continue;
                 }
             }
+            kept.initialValues[control.name] ??=
+                control instanceof HTMLSelectElement
+                    ? ([...control.options].find((option) => option.defaultSelected)?.value ??
+                        control.options[0]?.value ??
+                        '')
+                    : control.defaultValue;
             kept.values[control.name] = control.value;
         }
         if (scope === 'dialog')
@@ -378,7 +467,13 @@ export const createRecordModal = (definition) => () => {
             keepDrafts(currentLayers.at(-1) ?? null, 'dialog');
     };
     const mayDiscard = (current) => {
-        if (!current || !recordLayerHasDraft(current))
+        if (!current)
+            return true;
+        const scope = dialog() && current === topLayer() ? 'dialog' : 'record';
+        keepDrafts(current, scope);
+        const draft = scope === 'dialog' ? dialogDrafts() : recordDrafts();
+        const hasFile = [...current.querySelectorAll('input[type="file"]')].some((field) => !field.disabled && Boolean(field.files?.length));
+        if (!recordDraftHasChanges(draft) && !hasFile)
             return true;
         return globalThis.confirm(t('recordModal.unsaved'));
     };
@@ -408,12 +503,14 @@ export const createRecordModal = (definition) => () => {
         const sameRecord = current?.id === id;
         const nextTab = tab ?? (sameRecord ? current.tab : '');
         if (!sameRecord) {
+            tallestRecordHeight = 0;
             returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
             issues.set([]);
             saved.set(false);
             recordDrafts.set(emptyDraftState());
             dialogDrafts.set(emptyDraftState());
             viewState.set({});
+            outcome.set(null);
             dialog.set(null);
             dialogReturnFocus = null;
             envelope.set(null);
@@ -439,12 +536,14 @@ export const createRecordModal = (definition) => () => {
     const hide = (how) => {
         request?.abort();
         open.set(null);
+        tallestRecordHeight = 0;
         dialog.set(null);
         issues.set([]);
         saved.set(false);
         recordDrafts.set(emptyDraftState());
         dialogDrafts.set(emptyDraftState());
         viewState.set({});
+        outcome.set(null);
         status.set('idle');
         envelope.set(null);
         releaseInert?.();
@@ -472,6 +571,7 @@ export const createRecordModal = (definition) => () => {
             dialog.set(null);
             dialogDrafts.set(emptyDraftState());
             issues.set([]);
+            outcome.set(null);
             afterRender(() => (target?.isConnected ? target : null));
             return;
         }
@@ -526,7 +626,11 @@ export const createRecordModal = (definition) => () => {
                 };
             }
             const invoke = (fn, input) => callRecordFunction(fn, input, { idempotencyKey: uuid() });
-            let result = await invoke(command.fn, command.input(formData, context, uploads));
+            let result = command.route
+                ? await callRecordRoute(command.route, command.input(formData, context, uploads), {
+                    idempotencyKey: uuid(),
+                })
+                : 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.
@@ -539,8 +643,15 @@ export const createRecordModal = (definition) => () => {
             }
             if (!result.ok) {
                 // The layer was snapshotted before the busy state rendered, including unchecked controls.
+                // A refused submit leaves an answer that was computed from something else.
+                outcome.set(null);
                 issues.set(result.issues.length
-                    ? result.issues
+                    ? result.issues.map((issue) => ({
+                        ...issue,
+                        field: issue.field && command.issueField
+                            ? command.issueField(issue.field, formData, context)
+                            : issue.field,
+                    }))
                     : [
                         {
                             field: null,
@@ -551,10 +662,22 @@ export const createRecordModal = (definition) => () => {
                     ]);
                 return;
             }
+            if (command.preview) {
+                // Nothing changed, so nothing is dropped, re-read or announced — and the
+                // drafts snapshotted before this submit stay, so the selection is still on
+                // screen beside the answer it produced.
+                outcome.set({ command: name, value: result.value });
+                version.set(version() + 1);
+                return;
+            }
             if (scope === 'dialog')
                 dialogDrafts.set(emptyDraftState());
             else
                 recordDrafts.set(emptyDraftState());
+            // A command that stays in its layer leaves its answer for the view, which is
+            // how something the server can only say once — a one-time credential — reaches
+            // the reader. Every other `after` replaces the layer, so the answer goes.
+            outcome.set(after_(command) === 'stay' ? { command: name, value: result.value } : null);
             form.reset();
             const value = result.value;
             const createdId = after_(command) === 'open'
@@ -570,6 +693,14 @@ export const createRecordModal = (definition) => () => {
                     detail: { kind: definition.kind, ids: [createdId ?? current.id] },
                 }));
             };
+            if (command.navigate) {
+                const destination = new URL(command.navigate(result.value, context), location.href);
+                if (destination.origin !== location.origin)
+                    throw new Error('Record navigation must stay same-origin');
+                hide('none');
+                location.assign(destination.href);
+                return;
+            }
             const after = after_(command);
             // A modal that closes says so by closing; one that stays owes an answer.
             if (after !== 'close')
@@ -638,7 +769,7 @@ export const createRecordModal = (definition) => () => {
                 : '';
         return Notice({
             title: context.t('recordModal.errorTitle'),
-            message: all.map((issue) => issue.message ?? context.t(issue.code, issue.params)).join(' · '),
+            message: all.map(issueText).join(' · '),
             tone: 'danger',
         });
     };
@@ -692,6 +823,7 @@ export const createRecordModal = (definition) => () => {
             presentation: 'dialog',
             size: spec.size ?? 'default',
             title: spec.title(context),
+            actions: spec.actions?.(context),
             closeLabel: t('recordModal.close'),
             body: (_jsxs(_Fragment, { children: [formIssues(context), spec.view(context)] })),
         });
@@ -709,12 +841,10 @@ 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.
-                        // A definition that takes extension tabs may gain one at any time, so it
-                        // keeps the fixed height its declared tabs would otherwise earn.
+                        // The runtime measures rendered tabs and holds their largest height.
+                        // Start at natural height so loading/short records never fill the viewport.
                         height: (definition.tabs?.length ?? 0) + (definition.extensionTabs ? 1 : 0) > 1 ? 'fixed' : 'content',
-                        fixedHeight: definition.fixedHeight,
+                        fixedHeight: definition.fixedHeight ?? 'auto',
                         title: context ? definition.title(context) : t('recordModal.loading'),
                         description: context ? (definition.description?.(context) ?? null) : null,
                         status: context ? definition.status?.(context) : undefined,
@@ -760,6 +890,7 @@ export const createRecordModal = (definition) => () => {
                     const opener = element?.closest(`[${RECORD_DIALOG_ATTRIBUTE}]`);
                     if (opener) {
                         event.preventDefault();
+                        keepDrafts(recordLayer(), 'record');
                         const focused = document.activeElement;
                         dialogReturnFocus =
                             focused instanceof HTMLElement && opener.contains(focused)
@@ -771,6 +902,7 @@ export const createRecordModal = (definition) => () => {
                             if (key.startsWith('recordParam') && value !== undefined)
                                 params[key.slice('recordParam'.length).replace(/^./u, (c) => c.toLowerCase())] = value;
                         issues.set([]);
+                        outcome.set(null);
                         dialog.set({ name: opener.getAttribute(RECORD_DIALOG_ATTRIBUTE) ?? '', params });
                         afterRender();
                         return;
@@ -794,6 +926,24 @@ export const createRecordModal = (definition) => () => {
                     return;
                 event.preventDefault();
                 const current = open();
+                const contextQuery = 'route' in definition.context ? (definition.context.query ?? []) : [];
+                const previousUrl = new URL(location.href);
+                const changedContext = contextQuery.some((key) => previousUrl.searchParams.get(key) !== url.searchParams.get(key));
+                if (changedContext) {
+                    // These keys belong to the context reader (for example item pagination).
+                    // Preserve collection filters and record drafts while replacing this slice.
+                    keepDrafts(recordLayer(), 'record');
+                    for (const key of contextQuery) {
+                        const value = url.searchParams.get(key);
+                        if (value === null)
+                            previousUrl.searchParams.delete(key);
+                        else
+                            previousUrl.searchParams.set(key, value);
+                    }
+                    history.replaceState(history.state ?? {}, '', previousUrl.href);
+                    if (current?.id === target.id)
+                        void load(current.id);
+                }
                 if (current?.id === target.id) {
                     if ((target.tab ?? '') === current.tab)
                         return;
@@ -801,6 +951,8 @@ export const createRecordModal = (definition) => () => {
                     // which the views read back, so no prompt stands between two tabs.
                     keepDrafts(recordLayer(), 'record');
                     issues.set([]);
+                    // The answer belonged to the tab that asked for it.
+                    outcome.set(null);
                     show(target.id, target.tab ?? null, 'replace', () => recordLayer()?.querySelector('[data-ui="tab"][data-active="true"]') ?? null);
                     return;
                 }
@@ -873,17 +1025,40 @@ export const createRecordModal = (definition) => () => {
             }, { signal: lifetime });
             // An input or select carrying `data-record-state` feeds view state as it
             // changes; a file chosen in a `data-record-submit` input submits its form.
+            // A design-system `RelationSelect`'s own hidden native select carries no
+            // such marker (the package knows nothing of this runtime), but it fires a
+            // real `change` too — keyed by its `name`, which every field in this kit
+            // already sets to the same key `state()` reads it back under.
             document.addEventListener('change', (event) => {
                 const control = event.target instanceof Element ? event.target : null;
                 if (!control || !root?.contains(control))
                     return;
-                if ((control instanceof HTMLSelectElement || control instanceof HTMLInputElement) &&
-                    control.hasAttribute('data-record-state')) {
+                // A checkbox named `__all:<prefix>` ticks or clears every checkbox of its
+                // form whose name starts with that prefix, so one control stands for a
+                // row or a whole section. Any tick in such a form is kept as a draft, so
+                // the view re-renders and each "all" box reads whether it is now full.
+                if (control instanceof HTMLInputElement && control.type === 'checkbox' && control.form) {
+                    const form = control.form;
+                    if (form.querySelector(`input[type="checkbox"][name^="${CHECK_ALL}"]`)) {
+                        if (control.name.startsWith(CHECK_ALL)) {
+                            const prefix = control.name.slice(CHECK_ALL.length);
+                            for (const target of form.querySelectorAll('input[type="checkbox"]'))
+                                if (!target.disabled &&
+                                    !target.name.startsWith(CHECK_ALL) &&
+                                    target.name.startsWith(prefix))
+                                    target.checked = control.checked;
+                        }
+                        keepAllDrafts();
+                        return;
+                    }
+                }
+                const stateKey = control.getAttribute('data-record-state') ??
+                    (['relation-native', 'reorder-list-value'].includes(control.getAttribute('data-ui') ?? '')
+                        ? control.getAttribute('name')
+                        : null);
+                if ((control instanceof HTMLSelectElement || control instanceof HTMLInputElement) && stateKey) {
                     keepAllDrafts();
-                    viewState.set({
-                        ...viewState(),
-                        [control.getAttribute('data-record-state') ?? '']: control.value,
-                    });
+                    viewState.set({ ...viewState(), [stateKey]: control.value });
                     return;
                 }
                 if (control instanceof HTMLInputElement &&
@@ -936,6 +1111,7 @@ export const createRecordModal = (definition) => () => {
             const holdsIsland = (node) => node instanceof Element &&
                 (node.matches(islandSelector) || node.querySelector(islandSelector) !== null);
             const observer = new MutationObserver((records) => {
+                fitRecordHeight();
                 for (const record of records) {
                     for (const node of record.removedNodes)
                         if (holdsIsland(node))
@@ -945,8 +1121,18 @@ export const createRecordModal = (definition) => () => {
                             document.dispatchEvent(new CustomEvent('ket:islands-attach', { detail: { root: node } }));
                 }
             });
-            observer.observe(root, { childList: true, subtree: true });
+            observer.observe(root, { childList: true, subtree: true, characterData: true });
             lifetime.addEventListener('abort', () => observer.disconnect());
+            window.addEventListener('resize', fitRecordHeight, { signal: lifetime });
+            // Images and native disclosures change layout without adding text nodes.
+            root.addEventListener('load', fitRecordHeight, { capture: true, signal: lifetime });
+            root.addEventListener('toggle', fitRecordHeight, { capture: true, signal: lifetime });
+            // Web fonts can arrive after the first record measurement.
+            void document.fonts?.ready.then(() => {
+                if (!lifetime.aborted)
+                    fitRecordHeight();
+            });
+            fitRecordHeight();
             // 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) => {
@@ -971,6 +1157,15 @@ export const createRecordModal = (definition) => () => {
                 else
                     hide('none');
             }, { signal: lifetime });
+            // Cross-collection links (for example global search results) use the
+            // shell navigation first. This persistent island is not remounted when
+            // those slots change, so open the destination record after URL commit.
+            // A refresh of an already open record must not reset its draft or tab.
+            document.addEventListener('ket:navigation-complete', () => {
+                const target = readRecordModalTarget(location.href);
+                if (target?.kind === definition.kind && !open())
+                    show(target.id, target.tab ?? null, 'none');
+            }, { signal: lifetime });
             const initial = readRecordModalTarget(location.href);
             if (initial?.kind === definition.kind)
                 show(initial.id, initial.tab ?? null, 'none');
@@ -990,4 +1185,5 @@ export const createRecordModal = (definition) => () => {
  */
 export const recordIsland = (name, props) => (_jsx("ket-island", { "data-island": name, "data-props": JSON.stringify(props) }));
 export { RECORD_NEW_ID, RECORD_PARAM, RECORD_TAB_PARAM, recordModalHref, recordModalCreateHref, recordModalClosedHref, readRecordModalTarget, };
+export { RecordModalForm, RecordActionForm, RecordCloseTrigger, RecordDialogTrigger, RecordCommandForm, recordStateSelectControl, } from './record-modal-form.js';
 //# sourceMappingURL=record-modal.js.map