rimecms 0.31.4 → 0.32.0

package/dist/panel/components/ui/card-resource/card-resource.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { panelPath } from '../../../../core/routes/util.js';
   import { mimeTypeToIcon } from '../../../util/upload.js';
   import { Edit, FileIcon, X } from '@lucide/svelte';
 
@@ -40,7 +41,8 @@
 
   <div class="rz-card-resource__info">
     <p class="rz-card-resource__title">
-      {resource.title} <a href="/panel/{resource._type}/{resource.id}"><Edit size="12" /></a>
+      <span>{resource.title}</span>
+      <a href={panelPath(resource._type, resource.id)}><Edit size="12" /></a>
     </p>
     {#if isUpload}
       <p class="rz-card-resource__info-text">{resource.filesize}</p>
@@ -101,6 +103,16 @@
     font-weight: 600;
     display: flex;
     align-items: center;
+    margin-bottom: var(--rz-size-2);
+
+    span {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      word-break: break-all;
+    }
+
     a {
       display: inline-block;
       padding: 0.3rem;

package/dist/panel/components/ui/nav/Nav.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import { panelPath } from '../../../../core/routes/util.js';
   import { getConfigContext } from '../../../context/config.svelte.js';
   import type { Route } from '../../../types';
-  import { panelUrl } from '../../../util/url.js';
   import { PanelsTopLeft } from '@lucide/svelte';
   import ScrollArea from '../scroll-area/scroll-area.svelte';
   import NavGroup from './NavGroup.svelte';
@@ -29,7 +29,7 @@
 
   const dashBoardRoute: Route = {
     title: 'Dashboard',
-    url: panelUrl(),
+    url: panelPath(),
     icon: PanelsTopLeft
   };
 </script>
@@ -37,7 +37,7 @@
 <div class:rz-nav--collapsed={isCollapsed} class="rz-nav">
   <div class="rz-nav__content">
     <div class="rz-nav__header" class:rz-nav__header--collapsed={isCollapsed}>
-      <NavItem href="/panel" {isCollapsed} route={dashBoardRoute} />
+      <NavItem href={panelPath()} {isCollapsed} route={dashBoardRoute} />
     </div>
 
     <div class="rz-nav__body">

package/dist/panel/components/ui/nav/NavItem.svelte

@@ -22,9 +22,11 @@
   let pathname = $derived(page.url.pathname);
 
   let active = $derived.by(() => {
-    const routePathname = new URL(route.url).pathname;
-    if (routePathname === '/panel') {
-      return pathname === '/panel';
+    // Nav urls are same-origin paths — `/panel/pages`, not `http://host/panel/pages`.
+    const routePathname = route.url;
+    const panelRoot = `/${page.params.panel}`;
+    if (routePathname === panelRoot) {
+      return pathname === panelRoot;
     }
     const reg = new RegExp(`^${routePathname}(/.*)?$`);
     return reg.test(pathname);

package/dist/panel/components/ui/nav/UserButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { env } from '$env/dynamic/public';
+  import { panelUrl } from '../../../../core/routes/util.js';
   import * as Tooltip from '../tooltip';
   import { getUserContext } from '../../../context/user.svelte.js';
   import { authClient } from '../../../util/auth.js';
@@ -15,7 +15,7 @@
   async function signout() {
     const result = await authClient.signOut();
     if (result.data?.success) {
-      window.location.href = `${env.PUBLIC_RIME_URL}/panel/sign-in`;
+      window.location.href = panelUrl('sign-in');
     } else {
       toast.error(`Can't sign-out, please try again`);
     }
@@ -26,7 +26,7 @@
   {#if !navCollapsed}
     <div class="rz-user-button">
       <div class="rz-user-button__left">
-        <a href="/panel/staff/{user.attributes.id}">
+        <a href={panelUrl('staff', user.attributes.id)}>
           {user.attributes.name?.charAt(0) || ''}
         </a>
         <div class="rz-user-button__name">{user.attributes.name}</div>

package/dist/panel/context/collection.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Directory } from '../../core/collections/upload/upload.js';
 import type { BuiltCollection } from '../../core/config/types.js';
-import type { GenericDoc } from '../../core/types/doc.js';
+import type { Directory } from '../../core/prototype/collection/upload/types.js';
+import type { GenericDoc } from '../../core/prototype/types.js';
 import type { FormField } from '../../fields/types.js';
 type SortMode = 'asc' | 'dsc';
 export type DisplayMode = (typeof DISPLAY_MODE)[keyof typeof DISPLAY_MODE];

package/dist/panel/context/collection.svelte.js

@@ -1,14 +1,13 @@
 import { invalidateAll } from '$app/navigation';
-import { isUploadConfig } from '../../core/collections/upload/util/config.js';
-import { PARAMS } from '../../core/constant.js';
+import { PARAMS } from '../../core/constants.js';
 import { isFormField } from '../../core/fields/util.js';
-import { withDirectoriesSuffix } from '../../core/naming.js';
+import { directoriesKebab } from '../../core/prototype/collection/upload/naming.js';
+import { isUploadConfig } from '../../core/prototype/collection/upload/util/config.js';
+import { toNestedStructure } from '../../core/prototype/doc.js';
+import { apiUrl, panelUrl } from '../../core/routes/util.js';
 import { GroupFieldBuilder } from '../../fields/group/index.js';
 import { TabsBuilder } from '../../fields/tabs/index.js';
-import { panelUrl } from '../util/url.js';
-import { toNestedStructure } from '../../util/doc.js';
 import { trycatch, trycatchFetch } from '../../util/function.js';
-import { apiUrl } from '../../util/index.js';
 import { getValueAtPath, hasProp } from '../../util/object.js';
 import { getContext, onMount, setContext } from 'svelte';
 import { toast } from 'svelte-sonner';
@@ -325,7 +324,7 @@ function createCollectionStore(args) {
         get apiDirectoriesUrl() {
             if (!config.upload)
                 throw new Error(`${config.slug} is not an upload collection`);
-            return apiUrl(withDirectoriesSuffix(config.kebab));
+            return apiUrl(directoriesKebab(config.slug));
         },
         config,
         canCreate,

package/dist/panel/context/config.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { BuiltAreaClient, BuiltCollectionClient, BuiltConfigClient } from '../../core/config/types.js';
-import type { Prototype, PrototypeSlug } from '../../core/types/doc.js';
+import type { Prototype, PrototypeSlug } from '../../core/prototype/types.js';
 export declare const CONFIG_CTX: unique symbol;
 export declare function setConfigContext(initial: BuiltConfigClient): {
     readonly raw: BuiltConfigClient;

package/dist/panel/context/documentForm.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { BuiltAreaClient, BuiltCollectionClient } from '../../core/config/types.js';
 import type { FormFieldBuilder } from '../../core/fields/builders/index.js';
-import type { AreaSlug, GenericBlock, GenericDoc, TreeBlock } from '../../core/types/doc.js';
+import type { AreaSlug, GenericBlock, GenericDoc, TreeBlock } from '../../core/prototype/types.js';
 import type { FormField } from '../../types.js';
 import type { Dic, WithOptional } from '../../util/types.js';
 export declare function setDocumentFormContext<T extends WithOptional<GenericDoc, 'id'>>(args: Args<T>): {
     key: string;
     setValue: (path: string, value: any) => void;
+    sync: (path: string, value: unknown) => void;
     getRawValue: <T_1>(path: string) => NonNullable<T_1> | null;
     enhance: (node: HTMLFormElement) => {
         destroy(): void;
@@ -40,6 +41,12 @@ export declare function setDocumentFormContext<T extends WithOptional<GenericDoc
     buildPanelActionUrl: () => string;
     readOnly: boolean;
     importDataFromDefaultLocale: () => Promise<void>;
+    flushAutoSave: () => Promise<boolean>;
+    beaconAutoSave: () => void;
+    readonly isAutoSave: boolean;
+    readonly autoSaveState: AutoSaveState;
+    readonly lastAutoSavedAt: Date | null;
+    readonly autoSaveReason: string | null;
     isDisabled: boolean;
     readonly element: HTMLFormElement;
     readonly canSubmit: boolean;
@@ -61,7 +68,7 @@ export declare function setDocumentFormContext<T extends WithOptional<GenericDoc
         deleteAllThatStartWith(path: string): void;
     };
     readonly config: import("../../types.js").BuiltCollection;
-    readonly title: string | import("../../core/config/types.js").CollectionLabel;
+    readonly title: string | import("../../core/prototype/collection/types.js").CollectionLabel;
     readonly isLive: boolean;
     reset(): void;
     setFocusedField(path: string): void;
@@ -69,6 +76,7 @@ export declare function setDocumentFormContext<T extends WithOptional<GenericDoc
 export declare function getDocumentFormContext<T extends WithOptional<GenericDoc, 'id'> = WithOptional<GenericDoc, 'id'>>(key?: string): {
     key: string;
     setValue: (path: string, value: any) => void;
+    sync: (path: string, value: unknown) => void;
     getRawValue: <T_1>(path: string) => NonNullable<T_1> | null;
     enhance: (node: HTMLFormElement) => {
         destroy(): void;
@@ -103,6 +111,12 @@ export declare function getDocumentFormContext<T extends WithOptional<GenericDoc
     buildPanelActionUrl: () => string;
     readOnly: boolean;
     importDataFromDefaultLocale: () => Promise<void>;
+    flushAutoSave: () => Promise<boolean>;
+    beaconAutoSave: () => void;
+    readonly isAutoSave: boolean;
+    readonly autoSaveState: AutoSaveState;
+    readonly lastAutoSavedAt: Date | null;
+    readonly autoSaveReason: string | null;
     isDisabled: boolean;
     readonly element: HTMLFormElement;
     readonly canSubmit: boolean;
@@ -124,7 +138,7 @@ export declare function getDocumentFormContext<T extends WithOptional<GenericDoc
         deleteAllThatStartWith(path: string): void;
     };
     readonly config: import("../../types.js").BuiltCollection;
-    readonly title: string | import("../../core/config/types.js").CollectionLabel;
+    readonly title: string | import("../../core/prototype/collection/types.js").CollectionLabel;
     readonly isLive: boolean;
     reset(): void;
     setFocusedField(path: string): void;
@@ -137,6 +151,8 @@ export type FormSuccessData = {
     document?: GenericDoc;
     message?: string;
 };
+/** `paused` is a failed auto-save waiting for the changes to move again. */
+export type AutoSaveState = 'idle' | 'saving' | 'saved' | 'paused';
 type Args<T> = {
     beforeSubmit?: (data: Dic) => Promise<Dic>;
     beforeRedirect?: (data?: FormSuccessData) => Promise<boolean>;

package/dist/panel/context/documentForm.svelte.js

@@ -1,16 +1,21 @@
 import { applyAction, deserialize } from '$app/forms';
+import { replaceState } from '$app/navigation';
+import { resolve } from '$app/paths';
 import { page } from '$app/state';
-import { PARAMS, VERSIONS_STATUS } from '../../core/constant.js';
+import { PARAMS } from '../../core/constants.js';
 import { getFieldAtPath } from '../../core/fields/util.js';
-import { buildConfigMap } from '../../core/operations/configMap/index.js';
+import { buildConfigMap } from '../../core/pipeline/config-map/index.js';
+import { AUTO_SAVE_DELAY_MS, VERSIONS_STATUS } from '../../core/prototype/shared/versions/constant.js';
+import { apiUrl, panelUrl } from '../../core/routes/util.js';
 import { isJSONContent, richTextJSONToText } from '../../fields/rich-text/index.js';
-import { normalizeFieldPath } from '../../util/doc.js';
-import { apiUrl, random } from '../../util/index.js';
 import { isObjectLiteral, omit } from '../../util/object.js';
+import { normalizeFieldPath } from '../../util/path.js';
+import { randomId } from '../../util/random.js';
 import cloneDeep from 'clone-deep';
 import { diff } from 'deep-object-diff';
 import { flatten } from 'flat';
 import { getContext, setContext } from 'svelte';
+import { SvelteURLSearchParams } from 'svelte/reactivity';
 import { toast } from 'svelte-sonner';
 import { t__ } from '../../core/i18n/index.js';
 import { moveItem } from '../../util/array.js';
@@ -30,15 +35,34 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
     const changes = $derived(diff(initialDoc, doc));
     let isDisabled = $state(readOnly);
     let processing = $state(false);
-    const operation = $derived(doc.id ? 'update' : 'create');
+    /**
+     * Read off `initialDoc`, not the live `doc`: a create form may write `id` as a field before the
+     * row exists — an upload directory's id is its path, typed in as its name — and that does not
+     * make it an update. `initialDoc` gains an id when the server answers with the created row.
+     */
+    const operation = $derived(initialDoc.id ? 'update' : 'create');
     const user = getUserContext();
     const errors = setErrorsContext(key);
     const isCollection = documentConfig.type === 'collection';
     const hasError = $derived(errors.length);
-    const canSubmit = $derived(!isDisabled && !readOnly && Object.keys(changes).length > 0 && !hasError);
+    const hasChanges = $derived(Object.keys(changes).length > 0);
+    /** `status` is a save's business: an auto-save is always a draft, so it never carries one. */
+    const autoSavable = $derived(Object.keys(changes).some((key) => key !== 'status'));
     const nestedLevel = initLevel();
     /** onDataChange is only used to trigger action on live-edit so determine if this is a live-edit form */
     const isLiveEdit = !!onDataChange;
+    /**
+     * Whether typing here lands in the user's own auto-saved row: a config that opts in, an
+     * existing document, a writable form, and the root form — a relation's nested create is never
+     * auto-saved. Live edit is the same form and follows the same rule.
+     */
+    const isAutoSave = $derived(!!documentConfig.versions?.draft &&
+        !!documentConfig.versions?.autoSave &&
+        operation === 'update' &&
+        !readOnly &&
+        nestedLevel === 0);
+    /** After an auto-save `changes` is empty, and Save must still turn the row into a version. */
+    const canSubmit = $derived(!isDisabled && !readOnly && (hasChanges || !!doc.isAutoSave) && !hasError);
     const locale = getLocaleContext();
     const titleContext = getTitleContext();
     const initialTitle = initTitle();
@@ -104,6 +128,11 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
         if (onDataChange)
             onDataChange({ path, value });
     }
+    /** Takes a value the server already holds: sets it without making the form dirty. */
+    function sync(path, value) {
+        doc = setValueAtPath(path, doc, value);
+        initialDoc = setValueAtPath(path, initialDoc, value);
+    }
     /**
      * Function that return a possible reactive value given a path.
      *
@@ -314,7 +343,7 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
         if (typeof data === 'object' && data !== null) {
             // First omit the id and locale properties
             const withoutId = omit(['id', 'locale'], data);
-            const result = { ...withoutId, id: 'temp-' + random.randomId(8) };
+            const result = { ...withoutId, id: 'temp-' + randomId(8) };
             // Replace with the current locale if present
             if (locale.code && 'locale' in data) {
                 result.locale = locale.code;
@@ -359,8 +388,8 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
             const validated = config.use.validate(value, {
                 data: doc,
                 locale: locale.code,
-                id: doc.id ?? undefined,
-                operation: doc.id ? 'update' : 'create',
+                id: initialDoc.id ?? undefined,
+                operation,
                 user: user.attributes,
                 config: config.get
             });
@@ -384,7 +413,7 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
         const setValueFromDefaultLocale = async () => {
             const BASE_API_URL = apiUrl(documentConfig.kebab);
             let fetchURL = BASE_API_URL;
-            const draftParam = doc.status === VERSIONS_STATUS.DRAFT ? '&draft=true' : '';
+            const draftParam = doc.status === VERSIONS_STATUS.DRAFT ? `&${PARAMS.LATEST}=true` : '';
             if (isCollection) {
                 fetchURL += `?where[id][equals]=${doc.id}&locale=${locale.defaultCode}${draftParam}`;
             }
@@ -453,20 +482,17 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
             }
         };
     }
-    /**
-     * Prepare the form data for submission.
-     * This function collects the changed fields from the document,
-     * applies any beforeSubmit hooks, and constructs a FormData object
-     * to be sent in the request body.
-     */
-    const prepareData = async () => {
-        let data = {};
+    /** The changed top-level keys, as the document holds them now. */
+    const changedData = (except = []) => {
+        const data = {};
         for (const key of Object.keys(changes)) {
-            data[key] = doc[key];
-        }
-        if (beforeSubmit) {
-            data = await beforeSubmit(data);
+            if (!except.includes(key))
+                data[key] = doc[key];
         }
+        return data;
+    };
+    /** Flattened into form fields, one per leaf: `attributes.title`. */
+    const toFormData = (data) => {
         const flatData = flatten(data);
         const formData = new FormData();
         for (const key of Object.keys(flatData)) {
@@ -483,17 +509,33 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
         }
         return formData;
     };
+    /**
+     * Prepare the form data for submission.
+     * This function collects the changed fields from the document,
+     * applies any beforeSubmit hooks, and constructs a FormData object
+     * to be sent in the request body.
+     */
+    const prepareData = async (data = changedData()) => {
+        if (beforeSubmit) {
+            data = await beforeSubmit(data);
+        }
+        return toFormData(data);
+    };
+    /** One POST to a panel action, read back as the action's result. */
+    const send = (action, body) => fetch(action, { method: 'POST', body }).then(async (r) => deserialize(await r.text()));
     /**
      * Submit the form data to the server.
+     *
+     * An auto-save in flight is waited for rather than raced: both write the same row, and the
+     * save is the one whose answer replaces the document.
      */
     const submit = async (action) => {
         if (processing)
             return;
         processing = true;
-        const result = await fetch(action, {
-            method: 'POST',
-            body: await prepareData()
-        }).then(async (r) => deserialize(await r.text()));
+        if (autoSaveInFlight)
+            await autoSaveInFlight;
+        const result = await send(action, await prepareData());
         async function handleSuccess(data) {
             const redirect = data?.redirectUrl || false;
             const message = data?.message || t__('common.generic_success');
@@ -511,6 +553,9 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
             // Assign documents returned from the server to the form state
             doc = (data?.document || doc);
             initialDoc = doc;
+            // A save ends the auto-save story: the row is a version now, or the changes are in one.
+            autoSaveState = 'idle';
+            lastAutoSavedAt = null;
             toast.success(message);
             // Callbacks
             if (nestedLevel !== 0) {
@@ -539,9 +584,124 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
             case 'failure':
                 handleError(result.data);
                 break;
+            case 'redirect':
+                await applyAction(result);
+                break;
+            // A `RimeError` out of an action arrives here: `handleError` answers it with `error(status)`.
+            case 'error':
+                toast.error(result.error?.message || t__('error.generic'));
+                break;
         }
         processing = false;
     };
+    /****************************************************/
+    /* Auto-save
+    /****************************************************/
+    let autoSaveState = $state('idle');
+    let lastAutoSavedAt = $state(null);
+    let autoSaveReason = $state(null);
+    let autoSaveInFlight = null;
+    /** What the last failed auto-save carried, so nothing retries until the changes move again. */
+    let pausedFor = null;
+    const autoSaveAction = () => `${buildPanelActionUrl()}&${PARAMS.AUTO_SAVE}=true&${PARAMS.VERSION_ID}=${doc.versionId}`;
+    /**
+     * Fold the row the server wrote back into the form without losing what was typed meanwhile.
+     *
+     * `sent` is the document as it was when the request left. Whatever differs between `sent` and
+     * the document now was typed during the round trip, and goes back on top of the server's row —
+     * which brings `versionId`, `isAutoSave`, `updatedAt` and the children's ids.
+     */
+    const mergeServerDoc = (server, sent) => {
+        const typedSince = flatten(diff(sent, snapshot(doc)));
+        let next = server;
+        for (const path of Object.keys(typedSince)) {
+            next = setValueAtPath(path, next, getValueAtPath(path, doc));
+        }
+        initialDoc = server;
+        doc = next;
+    };
+    const failureReason = (result) => {
+        const data = result.type === 'failure' ? result.data : undefined;
+        if (data?.errors && isObjectLiteral(data.errors)) {
+            const [field, error] = Object.entries(data.errors)[0] ?? [];
+            if (field)
+                return `${field}: ${error}`;
+        }
+        if (data?.message)
+            return String(data.message);
+        return t__('error.generic');
+    };
+    /**
+     * Write what has changed into the user's auto-saved row, and answer whether it landed.
+     *
+     * On success the URL takes the row's `versionId` when it is a new one, with `replaceState`
+     * rather than a navigation: a reload would remount the form and drop the focus. On failure
+     * the state is `paused` with the reason, and nothing retries until the changes move again.
+     */
+    const runAutoSave = async () => {
+        if (autoSaveInFlight)
+            return autoSaveInFlight;
+        if (!autoSavable)
+            return true;
+        const sent = snapshot(doc);
+        const sentChanges = JSON.stringify(changes);
+        autoSaveState = 'saving';
+        autoSaveInFlight = (async () => {
+            const result = await send(autoSaveAction(), await prepareData(changedData(['status'])));
+            if (result.type !== 'success') {
+                autoSaveState = 'paused';
+                autoSaveReason = failureReason(result);
+                pausedFor = sentChanges;
+                return false;
+            }
+            const server = result.data?.document;
+            if (server) {
+                const isNewRow = server.versionId !== sent.versionId;
+                mergeServerDoc(server, sent);
+                if (isNewRow) {
+                    // The address follows the row without a load. `replaceState` leaves `page.url` and
+                    // `page.data` on the row that was loaded: whatever needs the row on screen reads the
+                    // form, never the URL.
+                    const params = new SvelteURLSearchParams(page.url.search);
+                    params.set(PARAMS.VERSION_ID, String(server.versionId));
+                    replaceState(resolve(`${page.url.pathname}?${params}`), page.state);
+                }
+            }
+            autoSaveState = 'saved';
+            lastAutoSavedAt = new Date();
+            autoSaveReason = null;
+            pausedFor = null;
+            // The versions history lists the row now; whoever shows it re-reads.
+            apiProxy.invalidate(documentConfig.slug);
+            return true;
+        })();
+        const landed = await autoSaveInFlight;
+        autoSaveInFlight = null;
+        return landed;
+    };
+    /** Send what is pending now, before leaving. Answers whether it landed. */
+    const flushAutoSave = async () => {
+        if (!isAutoSave || !autoSavable)
+            return true;
+        return runAutoSave();
+    };
+    /** The same write, handed to the browser to deliver after the tab is gone. */
+    const beaconAutoSave = () => {
+        if (!isAutoSave || !autoSavable || hasError)
+            return;
+        navigator.sendBeacon(autoSaveAction(), toFormData(changedData(['status'])));
+    };
+    // A quiet moment after the last change, then the write. Every dependency is read up front so
+    // the timer resets when any of them moves, and a manual save cancels it through `processing`.
+    $effect(() => {
+        const armed = isAutoSave && !isDisabled && !hasError && autoSavable && !processing;
+        const key = JSON.stringify(changes);
+        const paused = autoSaveState === 'paused' && key === pausedFor;
+        if (!armed || paused)
+            return;
+        const timer = setTimeout(() => void runAutoSave(), AUTO_SAVE_DELAY_MS);
+        return () => clearTimeout(timer);
+    });
     /**
      * Enhance the form element to handle submission.
      * This function attaches a submit event listener to the form element,
@@ -558,18 +718,18 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
                 setValue('status', submitter?.dataset.status);
             }
         };
-        // Build full action URL with query params based on submitter attributes (draft, versionId)
+        // The action names the row on screen, and says `fork` when the button asked for a new version.
+        // Not on an auto-saved row: saving that row promotes it into the version the button meant,
+        // and forking it would leave what it holds behind.
         const enhanceAction = (submitter) => {
             let actionUrl = buildPanelActionUrl();
-            const SUBMITER_HAS_DATA_DRAFT = !!submitter?.dataset.draft;
+            const SUBMITER_FORKS = !!submitter?.dataset.fork && !doc.isAutoSave;
             const DOC_HAS_VERSION = documentConfig.versions && !!doc.versionId;
-            const { DRAFT, VERSION_ID } = PARAMS;
-            if (SUBMITER_HAS_DATA_DRAFT) {
-                actionUrl += `&${DRAFT}=true`;
-            }
-            else if (DOC_HAS_VERSION) {
+            const { FORK, VERSION_ID } = PARAMS;
+            if (DOC_HAS_VERSION)
                 actionUrl += `&${VERSION_ID}=${doc.versionId}`;
-            }
+            if (SUBMITER_FORKS)
+                actionUrl += `&${FORK}=true`;
             return actionUrl;
         };
         const listener = async (event) => {
@@ -590,12 +750,10 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
      * This function constructs the appropriate URL to which the form data will be submitted.
      */
     const buildPanelActionUrl = () => {
-        // Start with the base URI for the panel
-        let panelUri = `/panel/${config.kebab}`;
-        // Add the item ID to the URI if we're updating a collection doc
-        if (operation === 'update' && initial._prototype === 'collection' && initial.id) {
-            panelUri += `/${initial.id}`;
-        }
+        // Start with the base URI for the panel, adding the item ID if we're updating a collection doc
+        const panelUri = operation === 'update' && initial._prototype === 'collection' && initial.id
+            ? panelUrl(config.kebab, initial.id)
+            : panelUrl(config.kebab);
         // Determine the appropriate action based on whether we're creating or updating
         const actionSuffix = operation === 'create' ? '/create?/create' : '?/update';
         // Add a redirect parameter if we're in a nested form ex: relation creation
@@ -612,7 +770,7 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
     const importDataFromDefaultLocale = async () => {
         const BASE_API_URL = `${apiUrl(documentConfig.kebab)}`;
         let fetchURL = BASE_API_URL;
-        const draftParam = doc.status === VERSIONS_STATUS.DRAFT ? '&draft=true' : '';
+        const draftParam = doc.status === VERSIONS_STATUS.DRAFT ? `&${PARAMS.LATEST}=true` : '';
         if (isCollection) {
             fetchURL += `?where[id][equals]=${doc.id}&locale=${locale.defaultCode}${draftParam}`;
         }
@@ -639,6 +797,7 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
     return {
         key,
         setValue,
+        sync,
         getRawValue,
         enhance,
         useField,
@@ -649,6 +808,20 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
         buildPanelActionUrl,
         readOnly,
         importDataFromDefaultLocale,
+        flushAutoSave,
+        beaconAutoSave,
+        get isAutoSave() {
+            return isAutoSave;
+        },
+        get autoSaveState() {
+            return autoSaveState;
+        },
+        get lastAutoSavedAt() {
+            return lastAutoSavedAt;
+        },
+        get autoSaveReason() {
+            return autoSaveReason;
+        },
         get isDisabled() {
             return isDisabled;
         },

package/dist/panel/context/live.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 { BeforeNavigate } from '@sveltejs/kit';
 export declare const LIVE_KEY: unique symbol;
 /**

package/dist/panel/context/live.svelte.js

@@ -1,7 +1,7 @@
 import { page } from '$app/state';
 import { env } from '$env/dynamic/public';
-import { PARAMS } from '../../core/constant.js';
-import { apiUrl } from '../../util/index.js';
+import { PARAMS } from '../../core/constants.js';
+import { apiUrl } from '../../core/routes/util.js';
 import { toKebabCase } from '../../util/string.js';
 import { getContext, setContext } from 'svelte';
 import { getValueAtPath, isObjectLiteral, setValueAtPath } from '../../util/object.js';

package/dist/panel/context/user.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { User } from '../../core/collections/auth/types.js';
+import type { User } from '../../core/auth/types.js';
 export declare const USER_CTX: unique symbol;
 export declare function setUserContext(initial: User): {
     readonly attributes: User;

package/dist/panel/context/versions.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare function setVersionsContext(): {
+    open: boolean;
+    versionId: string | undefined;
+};
+export declare function getVersionsContext(): {
+    open: boolean;
+    versionId: string | undefined;
+} | undefined;