rimecms 0.31.5 → 0.32.0

package/dist/panel/components/sections/collection/tree/CollectionTreeNode.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { GenericDoc } from '../../../../../core/types/doc.js';
+  import type { GenericDoc } from '../../../../../core/prototype/types.js';
+  import { panelUrl } from '../../../../../core/routes/util.js';
   import type { CollectionContext } from '../../../../context/collection.svelte.js';
-  import { panelUrl } from '../../../../util/url.js';
   import { GripVertical } from '@lucide/svelte';
   import StatusDot from '../StatusDot.svelte';
   import CollectionTreeNode from './CollectionTreeNode.svelte';

package/dist/panel/components/sections/collection/tree/CollectionTreeNode.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { GenericDoc } from '../../../../../core/types/doc.js';
+import type { GenericDoc } from '../../../../../core/prototype/types.js';
 import type { CollectionContext } from '../../../../context/collection.svelte.js';
 import CollectionTreeNode from './CollectionTreeNode.svelte';
 type Props = {

package/dist/panel/components/sections/collection/upload-thumb-cell/UploadThumbCell.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getMimeTypeFromExtension } from '../../../../../core/collections/upload/util/mime';
+  import { getMimeTypeFromExtension } from '../../../../../core/prototype/collection/upload/util/mime';
   import { mimeTypeToIcon } from '../../../../util/upload.js';
   import { FileText } from '@lucide/svelte';
 

package/dist/panel/components/sections/document/AuthFooter.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { page } from '$app/state';
-  import { isAuthConfig } from '../../../../core/collections/auth/util';
+  import { isAuthConfig } from '../../../../core/auth/util';
   import type { BuiltCollection } from '../../../../core/config/types.js';
+  import validate from '../../../../core/fields/validate';
   import { t__ } from '../../../../core/i18n';
+  import { panelUrl } from '../../../../core/routes/util.js';
   import { text } from '../../../../fields';
   import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
   import { getUserContext } from '../../../context/user.svelte.js';
   import { authClient } from '../../../util/auth';
-  import { panelUrl } from '../../../util/url.js';
-  import validate from '../../../../util/validate';
   import { toast } from 'svelte-sonner';
   import Button from '../../ui/button/button.svelte';
 

package/dist/panel/components/sections/document/AutoSaveBanner.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { PARAMS } from '../../../../core/constants.js';
+  import type { AutoSave, AutoSaves } from '../../../../core/prototype/shared/versions/types.js';
+  import { panelUrl } from '../../../../core/routes/util.js';
+  import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
+  import { getLocaleContext } from '../../../context/locale.svelte.js';
+  import { getUserContext } from '../../../context/user.svelte.js';
+  import { X } from '@lucide/svelte';
+  import { SvelteSet } from 'svelte/reactivity';
+  import { fade } from 'svelte/transition';
+  import { t__ } from '../../../../core/i18n/index.js';
+  import Button from '../../ui/button/button.svelte';
+
+  /**
+   * The auto-saves written after the row on screen, each with a way to open it.
+   *
+   * The user's own hides once they type: their typing replaces it. The X closes a banner for this
+   * visit and touches nothing — the row stays, listed in the version history, and the banner is
+   * back on the next load.
+   */
+
+  type Props = { autoSaves: AutoSaves; form: DocumentFormContext };
+  const { autoSaves, form }: Props = $props();
+
+  const locale = getLocaleContext();
+  const user = getUserContext();
+
+  const doc = $derived(form.values);
+  const hasChanges = $derived(Object.keys(form.changes).length > 0);
+  const closed = new SvelteSet<string>();
+
+  const time = (date: Date | string | undefined) => (date ? new Date(date).getTime() : 0);
+  const isOwn = (autoSave: AutoSave) => autoSave.updatedBy?.id === user.attributes.id;
+
+  const shown = $derived(
+    autoSaves.filter(
+      (autoSave) =>
+        autoSave.id !== doc.versionId &&
+        time(autoSave.updatedAt) > time(doc.updatedAt) &&
+        !closed.has(autoSave.id) &&
+        !(isOwn(autoSave) && hasChanges)
+    )
+  );
+
+  const documentUrl = (versionId: string) => {
+    const kebab = form.config.kebab;
+    const base = doc._prototype === 'collection' ? panelUrl(kebab, doc.id ?? '') : panelUrl(kebab);
+    return `${base}?${PARAMS.VERSION_ID}=${versionId}`;
+  };
+
+  const when = (date: Date | string) => locale.dateFormat(date, { short: true, withTime: true });
+  const nameOf = (user: { name?: string; email?: string } | null | undefined) =>
+    user?.name || user?.email || t__('common.someone');
+</script>
+
+{#if shown.length}
+  <!-- Stuck to the bottom of the viewport while the document is on screen: nothing to scroll to. -->
+  <div transition:fade class="rz-auto-save-banners">
+    {#each shown as autoSave (autoSave.id)}
+      <div class="rz-auto-save-banner" data-auto-save={isOwn(autoSave) ? 'own' : 'other'}>
+        <p>
+          {#if isOwn(autoSave)}
+            {t__('common.auto_save_banner_own', when(autoSave.updatedAt))}
+          {:else}
+            {t__(
+              'common.auto_save_banner_other',
+              nameOf(autoSave.updatedBy),
+              when(autoSave.updatedAt)
+            )}
+          {/if}
+        </p>
+        <div class="rz-auto-save-banner__actions">
+          <Button size="sm" href={documentUrl(autoSave.id)}>
+            {isOwn(autoSave) ? t__('common.auto_save_resume') : t__('common.auto_save_open')}
+          </Button>
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            icon={X}
+            aria-label={t__('common.close')}
+            onclick={() => closed.add(autoSave.id)}
+          />
+        </div>
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .rz-auto-save-banners {
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    display: grid;
+    gap: var(--rz-size-2);
+    padding: var(--rz-size-3) var(--rz-page-gutter);
+    background-color: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-4)));
+  }
+  .rz-auto-save-banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--rz-size-4);
+    padding: var(--rz-size-3) var(--rz-size-4);
+    border: 1px solid hsl(var(--rz-color-warn) / 0.5);
+    border-radius: var(--rz-radius-lg);
+    font-size: var(--rz-text-sm);
+    background-color: hsl(var(--rz-color-warn) / 0.12);
+  }
+  .rz-auto-save-banner__actions {
+    display: flex;
+    gap: var(--rz-size-2);
+    flex-shrink: 0;
+  }
+</style>

package/dist/panel/components/sections/document/AutoSaveBanner.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { AutoSaves } from '../../../../core/prototype/shared/versions/types.js';
+import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
+/**
+ * The auto-saves written after the row on screen, each with a way to open it.
+ *
+ * The user's own hides once they type: their typing replaces it. The X closes a banner for this
+ * visit and touches nothing — the row stays, listed in the version history, and the banner is
+ * back on the next load.
+ */
+type Props = {
+    autoSaves: AutoSaves;
+    form: DocumentFormContext;
+};
+declare const AutoSaveBanner: import("svelte").Component<Props, {}, "">;
+type AutoSaveBanner = ReturnType<typeof AutoSaveBanner>;
+export default AutoSaveBanner;

package/dist/panel/components/sections/document/ButtonStatus.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import { invalidateAll } from '$app/navigation';
-  import { PARAMS, VERSIONS_STATUS } from '../../../../core/constant.js';
+  import { PARAMS } from '../../../../core/constants.js';
+  import { VERSIONS_STATUS } from '../../../../core/prototype/shared/versions/constant.js';
+  import { apiUrl } from '../../../../core/routes/util.js';
   import * as Dialog from '../../ui/dialog/index.js';
   import * as Radio from '../../ui/radio-group/index.js';
+  import { getAPIProxyContext } from '../../../context/api-proxy.svelte.js';
   import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
-  import { apiUrl } from '../../../../util/index.js';
   import { toKebabCase } from '../../../../util/string';
   import { toast } from 'svelte-sonner';
   import { t__ } from '../../../../core/i18n/index.js';
@@ -14,6 +16,7 @@
   type Props = { form: DocumentFormContext };
   const { form }: Props = $props();
 
+  const APIProxy = getAPIProxyContext();
   const statusList = Object.values(VERSIONS_STATUS);
 
   let dialogOpen = $state(false);
@@ -21,7 +24,7 @@
   async function handleValidateStatus() {
     const urlId = form.values._prototype === 'collection' ? `/${form.values.id}` : '/';
     await fetch(
-      `${apiUrl(toKebabCase(form.values._type))}${urlId}?draft=true&${PARAMS.VERSION_ID}=${form.values.versionId}`,
+      `${apiUrl(toKebabCase(form.values._type))}${urlId}?${PARAMS.VERSION_ID}=${form.values.versionId}`,
       {
         method: 'PATCH',
         body: JSON.stringify({
@@ -32,14 +35,18 @@
       .then((r) => {
         if (r.status === 200) {
           toast.success(t__('common.doc_updated'));
-          form.setValue('status', status);
+          // The server holds the new status already: the form takes it without getting dirty,
+          // so no auto-save follows a publish.
+          form.sync('status', status);
           dialogOpen = false;
           invalidateAll();
+          // The write went around the form: the version history re-reads its statuses.
+          APIProxy.invalidate(form.config.slug);
         } else {
           toast.error(t__('error.generic'));
         }
       })
-      .catch((err) => {
+      .catch(() => {
         toast.error(t__('error.generic'));
       });
   }

package/dist/panel/components/sections/document/CurrentlyEdited.svelte

@@ -1,35 +1,18 @@
 <script lang="ts">
-  import type { User } from '../../../../core/collections/auth/types.js';
-  import type { GenericDoc } from '../../../../core/types/doc.js';
-  import { apiUrl } from '../../../../util/index.js';
-  import { toKebabCase } from '../../../../util/string.js';
-  import { onMount } from 'svelte';
   import { Button } from '../../ui/button/index.js';
-  type Props = { by: string; user: User; doc: GenericDoc };
-  const { by, user, doc }: Props = $props();
 
-  async function takeControl() {
-    const fetchURl = `${apiUrl(toKebabCase(doc._type))}/${doc._prototype === 'collection' ? doc.id : ''}`;
+  type Props = {
+    /** The staff member holding the lock, as the read joined them. */
+    holder?: { name?: string | null; email?: string | null } | null;
+    takeControl: () => void;
+  };
+  const { holder, takeControl }: Props = $props();
 
-    await fetch(fetchURl, {
-      method: 'PATCH',
-      body: JSON.stringify({
-        editedBy: user.id
-      })
-    });
-    window.location.reload();
-  }
-
-  let email = $state();
-
-  onMount(async () => {
-    const { doc } = await fetch(apiUrl('staff', by)).then((r) => r.json());
-    email = doc.email;
-  });
+  const label = $derived(holder?.email ?? holder?.name ?? 'Someone');
 </script>
 
 <div class="rz-document-read-only">
-  <p><strong>{email}</strong> is editing the document</p>
+  <p>{label} is editing the document</p>
   <Button variant="outline" onclick={takeControl}>Take control</Button>
 </div>
 
@@ -38,10 +21,10 @@
     display: grid;
     gap: 1rem;
     place-content: center;
-    position: absolute;
+    position: fixed;
     inset: 0;
     z-index: 100;
-    background: hsl(var(--rz-gray-11) / 0.8);
+    background: light-dark(hsl(var(--rz-gray-12) / 0.8), hsl(var(--rz-gray-3) / 0.8));
     backdrop-filter: blur(2px);
   }
 </style>

package/dist/panel/components/sections/document/CurrentlyEdited.svelte.d.ts

@@ -1,9 +1,10 @@
-import type { User } from '../../../../core/collections/auth/types.js';
-import type { GenericDoc } from '../../../../core/types/doc.js';
 type Props = {
-    by: string;
-    user: User;
-    doc: GenericDoc;
+    /** The staff member holding the lock, as the read joined them. */
+    holder?: {
+        name?: string | null;
+        email?: string | null;
+    } | null;
+    takeControl: () => void;
 };
 declare const CurrentlyEdited: import("svelte").Component<Props, {}, "">;
 type CurrentlyEdited = ReturnType<typeof CurrentlyEdited>;

package/dist/panel/components/sections/document/Document.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
-  import { beforeNavigate, goto } from '$app/navigation';
-  import { isAuthConfig } from '../../../../core/collections/auth/util';
-  import { isUploadConfig } from '../../../../core/collections/upload/util/config';
+  import { beforeNavigate, goto, invalidateAll } from '$app/navigation';
+  import { page } from '$app/state';
+  import { untrack } from 'svelte';
+  import type { ResolvedPathname } from '$app/types';
+  import { isAuthConfig } from '../../../../core/auth/util';
+  import { PARAMS } from '../../../../core/constants.js';
   import { t__ } from '../../../../core/i18n/index.js';
-  import type { GenericDoc } from '../../../../core/types/doc';
+  import { openSse } from '../../../../core/plugins/sse/index.js';
+  import { isUploadConfig } from '../../../../core/prototype/collection/upload/util/config';
+  import { EDIT_LOCK_TTL_MS } from '../../../../core/prototype/shared/metas/constant.js';
+  import { isLockHeldByOther } from '../../../../core/prototype/shared/metas/lock.js';
+  import type { GenericDoc } from '../../../../core/prototype/types';
+  import { apiUrl } from '../../../../core/routes/util.js';
   import * as Dialog from '../../ui/dialog/index.js';
   import { getConfigContext } from '../../../context/config.svelte.js';
   import {
@@ -12,10 +20,12 @@
   } from '../../../context/documentForm.svelte.js';
   import { getLocaleContext } from '../../../context/locale.svelte.js';
   import { getUserContext } from '../../../context/user.svelte.js';
+  import { getVersionsContext } from '../../../context/versions.svelte.js';
   import RenderFields from '../../fields/RenderFields.svelte';
   import Button from '../../ui/button/button.svelte';
   import AuthApiKeyDialog from './AuthAPIKeyDialog.svelte';
   import AuthFooter from './AuthFooter.svelte';
+  import AutoSaveBanner from './AutoSaveBanner.svelte';
   import CurrentlyEdited from './CurrentlyEdited.svelte';
   import Header from './Header.svelte';
   import UploadHeader from './upload-header/UploadHeader.svelte';
@@ -53,9 +63,9 @@
   );
 
   let formElement = $state<HTMLFormElement>();
-  // This is used to intercept navigation when there are unsaved changes in the form
-  // It stores the URL the user is trying to navigate to, so we can redirect them there after they confirm they want to leave
-  let interceptedLeave = $state<{ url: string } | null>(null);
+  // A leave held back by unsaved changes: what to do once the user confirms. A navigation goes
+  // on to its URL; a locale switch reloads in place.
+  let interceptedLeave = $state<{ proceed: () => unknown } | null>(null);
   // This is used to prevent the beforeNavigate from triggering when we programmatically navigate
   let isRedirect = $state(false);
   // Dialog for unsaved changes confirmation
@@ -65,17 +75,54 @@
   // This is used to show the API key after creating a document in a collection with API key auth
   let apiKey = $state<string | null>('');
 
-  // Intercept navigation when there are unsaved changes in the form
-  beforeNavigate(async ({ cancel, to }) => {
+  /**
+   * Intercept navigation when there are unsaved changes in the form.
+   *
+   * With auto-save on, what is pending is written first and the navigation goes through; the
+   * dialog only appears if that write fails. A closing tab gets no chance to await anything, so
+   * its pending changes go by beacon from the `pagehide` handler below instead.
+   */
+  beforeNavigate(async ({ cancel, to, willUnload }) => {
+    // Leaving the document releases it, whether or not the form is dirty — the confirm dialog
+    // below can still cancel the navigation, and the next beat re-claims it.
+    if (!readOnly && operation === 'update') editLock('release');
+
     const hasCHanges = Object.keys(form.changes).length > 0;
     if (!hasCHanges) return;
     if (isRedirect) return;
     if (interceptedLeave) return;
     if (!to) return;
+    if (willUnload && form.isAutoSave) return;
     cancel();
-    interceptedLeave = { url: to.url.href };
+
+    if (form.isAutoSave) {
+      const landed = await form.flushAutoSave();
+      if (landed) {
+        isRedirect = true;
+        goto(to.url.href as ResolvedPathname);
+        return;
+      }
+    }
+
+    interceptedLeave = { proceed: () => goto(to.url.href as ResolvedPathname) };
   });
 
+  function confirmLeave() {
+    interceptedLeave?.proceed();
+  }
+
+  /**
+   * The language switcher reloads the page in place rather than navigating, so `beforeNavigate`
+   * never sees it. The same rules run from here: pending changes are auto-saved first when the
+   * config auto-saves, and asked about otherwise.
+   */
+  async function switchLocale() {
+    const hasChanges = Object.keys(form.changes).length > 0;
+    if (!hasChanges) return invalidateAll();
+    if (form.isAutoSave && (await form.flushAutoSave())) return invalidateAll();
+    interceptedLeave = { proceed: () => invalidateAll() };
+  }
+
   // svelte-ignore state_referenced_locally
   const form = setDocumentFormContext({
     initial,
@@ -87,6 +134,143 @@
     beforeRedirect: beforeRedirect
   });
 
+  /**
+   * Somebody else has this document open, recently enough to still mean it.
+   *
+   * Read off `initial`, which the reload below refreshes — `form.values` is seeded from it once
+   * and then belongs to whoever is typing.
+   *
+   * A claim carrying no timestamp cannot be aged, and counts as expired. The same test runs
+   * server-side in `isLockHeldByOther`, which is where the claim is actually refused.
+   */
+  const isLockedByOther = $derived(isLockHeldByOther(initial, user.attributes.id));
+
+  /** The version history marks the row the form is on, which an auto-save moves without a load. */
+  const history = getVersionsContext();
+  $effect(() => {
+    if (history && nestedLevel === 0) history.versionId = form.values.versionId;
+  });
+
+  /**
+   * Reload when this document's lock changes hands.
+   *
+   * The lock and the content move together: whoever was holding it was editing, and by the time
+   * they hand it back the document on screen is a version behind. Taking the claim and the fresh
+   * content in one reload is what stops the next editor saving over the last one's work.
+   *
+   * The page keys this component on `id + versionId + locale`, so a reload that brings a new
+   * version remounts the form rather than leaving stale values in it.
+   *
+   * `lockKey` is a string so this re-runs only when it names a different document — `config` and
+   * `initial` are both new objects after every load, and depending on them would drop the
+   * connection and rebuild it each time, losing whatever was sent in between.
+   */
+  const lockKey = $derived(`rime:${config.slug}:${initial.id}`);
+
+  $effect(() => {
+    if (operation === 'create') return;
+
+    return openSse(lockKey, ({ event }) => {
+      if (event === 'rime:lock') invalidateAll();
+    });
+  });
+
+  /** Nobody saves through the overlay: `canSubmit` is what the save buttons and ctrl-s read. */
+  $effect(() => {
+    form.isDisabled = isLockedByOther;
+  });
+
+  /**
+   * This document's lock: POST takes it (claim), DELETE gives it back (release).
+   *
+   * A REST route, not a panel form action. Form actions live in the generated `+page.server.ts`
+   * and each one has to be listed there by name. A `?/lock` action left off that list answers
+   * 404, the claims fail quietly, and nothing but the TTL ever frees a document. A route declared
+   * in the prototype's `rest` is written by codegen and cannot be left out.
+   *
+   * The claim names the row the form is on: an auto-save moves the form onto a new row without
+   * a load, and the lock moves with it. `lockVersionId` is a string, so the claim effect below
+   * re-runs when the row changes and not on every keystroke.
+   */
+  const lockVersionId = $derived(form.values.versionId as string | undefined);
+
+  const lockUrl = (params: Record<string, string> = {}, versionId = lockVersionId) => {
+    const base =
+      initial._prototype === 'collection'
+        ? `${apiUrl(config.kebab, initial.id)}/lock`
+        : `${apiUrl(config.kebab)}/lock`;
+    const search = new URLSearchParams({
+      ...(versionId ? { [PARAMS.VERSION_ID]: versionId } : {}),
+      ...params
+    }).toString();
+    return search ? `${base}?${search}` : base;
+  };
+
+  /**
+   * Claim or release, the row the form is on unless another is named.
+   *
+   * The failure is logged rather than swallowed: a lock that silently does nothing looks exactly
+   * like one that works and then ages out.
+   */
+  async function editLock(
+    intent: 'claim' | 'release',
+    options: { force?: boolean; versionId?: string } = {}
+  ) {
+    try {
+      const response = await fetch(
+        lockUrl(options.force ? { force: 'true' } : {}, options.versionId ?? lockVersionId),
+        { method: intent === 'claim' ? 'POST' : 'DELETE' }
+      );
+      if (!response.ok) console.error(`edit lock: ${intent} answered ${response.status}`);
+    } catch (error) {
+      console.error(`edit lock: ${intent} failed`, error);
+    }
+  }
+
+  /**
+   * Hold the document for as long as it is open.
+   *
+   * Claimed on mount and renewed at half the TTL. The load does not claim: opening a document is
+   * a read, and a read that writes is a read that has to explain itself in every caller. Here it
+   * is one effect — take it when the editor arrives, keep it while they stay, and the renewal is
+   * the same call as the claim. Half the TTL leaves room for one missed beat.
+   *
+   * Not while the document is read-only, being created (there is no row to lock yet), or already
+   * held by somebody else.
+   *
+   * When an auto-save or a fork moves the form onto a new row, the server has already carried the
+   * claim onto it (`moveEditLock`): the renewal reads the row the form is on when it fires, and
+   * this runs once per mount. The release on leaving is `beforeNavigate`'s or `pagehide`'s.
+   */
+  $effect(() => {
+    if (readOnly || operation === 'create' || isLockedByOther) return;
+
+    untrack(() => editLock('claim'));
+    const interval = setInterval(() => editLock('claim'), EDIT_LOCK_TTL_MS / 2);
+    return () => clearInterval(interval);
+  });
+
+  /**
+   * Hand the document back when the tab goes away.
+   *
+   * `pagehide` rather than `beforeunload`, and `sendBeacon` rather than `fetch`: a close is the
+   * one exit that gets no chance to await anything, and a beacon is handed to the browser to
+   * deliver after the page is gone. A beacon can only POST, so the release it sends carries the
+   * intent in the query rather than in the method. A release that does not make it is not a
+   * failure — the claim ages out instead, just more slowly.
+   */
+  $effect(() => {
+    if (readOnly || operation === 'create') return;
+
+    const release = () => {
+      form.beaconAutoSave();
+      navigator.sendBeacon(lockUrl({ release: 'true' }));
+    };
+
+    window.addEventListener('pagehide', release);
+    return () => window.removeEventListener('pagehide', release);
+  });
+
   function handleKeyDown(event: KeyboardEvent) {
     if (!formElement) throw Error('formElement is not defined');
     if ((event.ctrlKey || event.metaKey) && event.key === 's') {
@@ -131,6 +315,13 @@
   </p>
 {/snippet}
 
+{#snippet metaUser(label: string, name: string)}
+  <p class="rz-document__metas">
+    <span>{label} : </span>
+    {name || '—'}
+  </p>
+{/snippet}
+
 <form
   class="rz-document {className}"
   bind:this={formElement}
@@ -138,10 +329,13 @@
   enctype="multipart/form-data"
   method="post"
 >
-  <Header {form} {config} {onClose}></Header>
+  <Header {form} {config} {onClose} onLocaleSwitch={switchLocale}></Header>
 
-  {#if form.values.editedBy && form.values.editedBy !== user.attributes.id}
-    <CurrentlyEdited by={form.values.editedBy} doc={form.values} user={user.attributes} />
+  {#if isLockedByOther}
+    <CurrentlyEdited
+      holder={initial.currentlyEditedBy}
+      takeControl={() => editLock('claim', { force: true }).then(() => window.location.reload())}
+    />
   {/if}
 
   <div class="rz-document__fields">
@@ -159,17 +353,25 @@
     {#if form.values.createdAt}
       {@render meta(t__('common.created_at'), locale.dateFormat(form.values.createdAt))}
     {/if}
+    {#if form.values.createdBy}
+      {@render metaUser(t__('common.created_by'), form.values.createdBy?.name)}
+    {/if}
     {#if form.values.updatedAt}
       {@render meta(t__('common.last_update'), locale.dateFormat(form.values.updatedAt))}
     {/if}
-    {#if form.values.editedBy}
-      {@render meta(t__('common.edited_by'), locale.dateFormat(form.values.editedBy))}
+    {#if form.values.updatedBy}
+      {@render metaUser(t__('common.updated_by'), form.values.updatedBy?.name)}
     {/if}
     {#if form.values.id}
       {@render meta('id', form.values.id)}
     {/if}
   </div>
 
+  <!-- Last in the flow, so its sticky bottom holds it at the viewport's edge until the end. -->
+  {#if nestedLevel === 0 && operation === 'update' && page.data.autoSaves}
+    <AutoSaveBanner autoSaves={page.data.autoSaves} {form} />
+  {/if}
+
   <!-- This shows the create API Key after creation, for apiKey auth type collection -->
   {#if apiKey}
     <AuthApiKeyDialog bind:apiKey />
@@ -190,7 +392,7 @@
       <p>{t__('common.leave_confirm_text')}</p>
       <!--  -->
       <Dialog.Footer --rz-justify-content="space-between">
-        <Button onclick={() => interceptedLeave && goto(interceptedLeave.url)}>
+        <Button onclick={confirmLeave}>
           {t__('common.confirm')}
         </Button>
         <Button onclick={() => (interceptedLeave = null)} variant="secondary">
@@ -203,7 +405,7 @@
 
 <style>.rz-document {
     container: rz-document / inline-size;
-    min-height: 100vh;
+    /* min-height: 100vh; */
     position: relative;
     background-image: var(--thumbnail);
     background-size: cover;
@@ -212,7 +414,7 @@
   .rz-document__fields {
     display: grid;
     gap: var(--rz-size-4);
-    min-height: calc(100vh - var(--rz-size-14));
+    /* min-height: calc(100vh - var(--rz-size-14)); */
     align-content: flex-start;
     margin-left: calc(-1 * var(--rz-fields-padding));
     margin-right: calc(-1 * var(--rz-fields-padding));

package/dist/panel/components/sections/document/Document.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { GenericDoc } from '../../../../core/types/doc';
+import type { GenericDoc } from '../../../../core/prototype/types';
 type Props = {
     doc: GenericDoc;
     operation: 'update' | 'create';