rimecms 0.31.4 → 0.32.0

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

@@ -0,0 +1,34 @@
+import { getContext, setContext } from 'svelte';
+/**
+ * The version history's state, shared between the document page that shows it, the settings
+ * menu that opens it, and the form that says which row it is on.
+ *
+ * The page sets it outside the block that remounts the document on every version, so picking a
+ * version keeps the history open. `versionId` follows the form rather than the page data: an
+ * auto-save moves the form onto a new row without a load.
+ */
+function createVersionsStore() {
+    let open = $state(false);
+    let versionId = $state();
+    return {
+        get open() {
+            return open;
+        },
+        set open(value) {
+            open = value;
+        },
+        get versionId() {
+            return versionId;
+        },
+        set versionId(value) {
+            versionId = value;
+        }
+    };
+}
+const VERSIONS_CTX = Symbol('rime.versions');
+export function setVersionsContext() {
+    return setContext(VERSIONS_CTX, createVersionsStore());
+}
+export function getVersionsContext() {
+    return getContext(VERSIONS_CTX);
+}

package/dist/panel/index.d.ts

@@ -1,5 +1,6 @@
-import type { VersionsStatus } from '../core/constant.js';
-import type { GenericDoc } from '../core/types/doc.js';
+import type { VersionsStatus } from '../core/prototype/shared/versions/constant.js';
+import type { AutoSaves } from '../core/prototype/shared/versions/types.js';
+import type { GenericDoc } from '../core/prototype/types.js';
 import type { Snippet } from 'svelte';
 import { Field } from './components/fields/index.js';
 import Panel from './components/Root.svelte';
@@ -8,17 +9,15 @@ import Button from './components/ui/button/button.svelte';
 import Input from './components/ui/input/input.svelte';
 import SpinLoader from './components/ui/spin-loader/SpinLoader.svelte';
 import Area from './pages/area/Area.svelte';
-import AreaVersionsDoc from './pages/area/AreaVersionsDoc.svelte';
 import ForgotPassword from './pages/auth/forgot-password/ForgotPassword.svelte';
 import ResetPassword from './pages/auth/reset-password/ResetPassword.svelte';
 import SignIn from './pages/auth/sign-in/SignIn.svelte';
 import CollectionDoc from './pages/collection-document/CollectionDocument.svelte';
-import CollectionDocVersions from './pages/collection-document/CollectionDocVersions.svelte';
 import Collection from './pages/collection/Collection.svelte';
 import Dashboard from './pages/dashboard/Dashboard.svelte';
 import Live from './pages/live/Live.svelte';
 import type { Route } from './types.js';
-export { Area, AreaVersionsDoc, Button, Collection, CollectionDoc, CollectionDocVersions, Dashboard, Doc, Field, ForgotPassword, Input, Live, Panel, ResetPassword, SignIn, SpinLoader };
+export { Area, Button, Collection, CollectionDoc, Dashboard, Doc, Field, ForgotPassword, Input, Live, Panel, ResetPassword, SignIn, SpinLoader };
 export declare const CONTEXT: {
     COLLECTION: symbol;
     LIVE: symbol;
@@ -40,27 +39,31 @@ export type DocVersion = {
     id: string;
     updatedAt: Date;
     status: VersionsStatus;
+    /** One user's typing, not a version yet. Only on a config that auto-saves. */
+    isAutoSave?: boolean;
+    updatedBy?: {
+        id: string;
+        name?: string;
+        email?: string;
+    } | null;
 };
 type BaseDocData = {
     aria: Partial<Route>[];
     doc: GenericDoc;
     status: 200;
     readOnly: boolean;
+    /** The document's auto-saved rows. Absent on a config that does not auto-save. */
+    autoSaves?: AutoSaves;
 } | {
     aria: Partial<Route>[];
     doc: {};
     status: 401;
     readOnly: true;
 };
-type DocVersions<V> = V extends true ? {
-    versions: DocVersion[];
-} : {};
-export type CollectionDocData<V extends boolean = boolean> = DocVersions<V> & BaseDocData & {
+export type CollectionDocData = BaseDocData & {
     operation: 'create' | 'update';
     hasMailer?: boolean;
 };
-export type AreaDocData<V extends boolean = boolean> = DocVersions<V> & BaseDocData & {
+export type AreaDocData = BaseDocData & {
     operation: 'update';
 };
-export type CollectionDocumentDataWithVersions = CollectionDocData<true>;
-export type AreaDataWithVersions = AreaDocData<true>;

package/dist/panel/index.js

@@ -11,18 +11,16 @@ import { LOCALE_CTX } from './context/locale.svelte.js';
 import { USER_CTX } from './context/user.svelte.js';
 import { TITLE_CTX } from './context/title.js';
 import Area from './pages/area/Area.svelte';
-import AreaVersionsDoc from './pages/area/AreaVersionsDoc.svelte';
 import ForgotPassword from './pages/auth/forgot-password/ForgotPassword.svelte';
 import ResetPassword from './pages/auth/reset-password/ResetPassword.svelte';
 import SignIn from './pages/auth/sign-in/SignIn.svelte';
 import CollectionDoc from './pages/collection-document/CollectionDocument.svelte';
-import CollectionDocVersions from './pages/collection-document/CollectionDocVersions.svelte';
 import Collection from './pages/collection/Collection.svelte';
 import Dashboard from './pages/dashboard/Dashboard.svelte';
 import Live from './pages/live/Live.svelte';
 export { 
 // Components
-Area, AreaVersionsDoc, Button, Collection, CollectionDoc, CollectionDocVersions, Dashboard, Doc, Field, ForgotPassword, Input, Live, Panel, ResetPassword, SignIn, SpinLoader };
+Area, Button, Collection, CollectionDoc, Dashboard, Doc, Field, ForgotPassword, Input, Live, Panel, ResetPassword, SignIn, SpinLoader };
 // Context keys, for a plugin/field that needs to read a context rime's own panel sets
 export const CONTEXT = {
     COLLECTION: COLLECTION_CTX,

package/dist/panel/pages/area/Area.svelte

@@ -1,20 +1,25 @@
 <script lang="ts">
   import Document from '../../components/sections/document/Document.svelte';
+  import Versions from '../../components/sections/document/Versions.svelte';
   import Page from '../../components/sections/page-layout/Page.svelte';
   import Unauthorized from '../../components/sections/unauthorized/Unauthorized.svelte';
+  import { setVersionsContext } from '../../context/versions.svelte.js';
   import type { AreaDocData } from '../../index.js';
 
-  const { data }: { data: AreaDocData<false> } = $props();
+  const { data }: { data: AreaDocData } = $props();
+
+  const versions = setVersionsContext();
 </script>
 
 {#if data.status === 200}
   <Page>
     {#snippet main()}
-      {#key data.doc.id + data.doc.versionId || '' + data.doc.locale || ''}
+      {#key `${data.doc.id}|${data.doc.versionId ?? ''}|${data.doc.locale ?? ''}`}
         <Document doc={data.doc} readOnly={data.readOnly} operation="update" />
       {/key}
     {/snippet}
   </Page>
+  <Versions doc={data.doc} bind:open={versions.open} versionId={versions.versionId} />
 {:else}
   <Unauthorized />
 {/if}

package/dist/panel/pages/area/Area.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { AreaDocData } from '../../index.js';
 type $$ComponentProps = {
-    data: AreaDocData<false>;
+    data: AreaDocData;
 };
 declare const Area: import("svelte").Component<$$ComponentProps, {}, "">;
 type Area = ReturnType<typeof Area>;

package/dist/panel/pages/area/actions.server.js

@@ -1,38 +1,53 @@
-import { PARAMS } from '../../../core/constant.js';
+import { PARAMS } from '../../../core/constants.js';
 import { ERROR_CONTEXT, handleError } from '../../../core/errors/handler.server.js';
-import { extractData } from '../../../core/operations/extract-data.server.js';
-import { panelUrl } from '../../util/url.js';
+import { extractData } from '../../../core/pipeline/extract-data.server.js';
+import { retireAutoSaves } from '../../../core/prototype/shared/versions/retire-auto-saves.server.js';
 import { trycatch } from '../../../util/function.js';
 import { toKebabCase } from '../../../util/string.js';
-import { redirect } from '@sveltejs/kit';
+import {} from '@sveltejs/kit';
 import { t__ } from '../../../core/i18n/index.js';
 export const areaFormActions = {
     update: async (event) => {
-        const { rime, locale } = event.locals;
+        const { rime, locale, user } = event.locals;
         const slug = (event.params.slug || '');
         const versionId = event.url.searchParams.get(PARAMS.VERSION_ID) || undefined;
-        const draft = event.url.searchParams.get(PARAMS.DRAFT) === 'true';
+        const fork = event.url.searchParams.get(PARAMS.FORK) === 'true';
+        const autoSave = event.url.searchParams.get(PARAMS.AUTO_SAVE) === 'true';
         const [extractError, data] = await trycatch(() => extractData(event.request));
         if (extractError) {
             return handleError(extractError, { context: ERROR_CONTEXT.ACTION });
         }
-        const [error, document] = await trycatch(() => rime.area(slug).update({
+        const area = rime.area(slug);
+        const [error, document] = await trycatch(() => area.update({
             data,
             versionId,
-            draft,
+            fork,
+            autoSave,
             locale
         }));
         if (error) {
             return handleError(error, { context: ERROR_CONTEXT.ACTION });
         }
-        if (draft && 'versionId' in document) {
-            const referer = event.request.headers.get('referer');
-            if (referer && referer.includes('/versions')) {
-                return redirect(303, `${panelUrl(toKebabCase(slug))}/versions?versionId=${document.versionId}`);
-            }
-            else {
-                return redirect(303, `${panelUrl(toKebabCase(slug))}?versionId=${document.versionId}`);
-            }
+        // An auto-save is silent: the form merges the document back and nothing else moves.
+        if (autoSave) {
+            return { document };
+        }
+        // A save is where the saver's auto-saves end, except the row it landed on.
+        if (user) {
+            await retireAutoSaves({
+                event,
+                config: area.config,
+                docId: document.id,
+                userId: user.id,
+                keep: document.versionId
+            });
+        }
+        if (fork && 'versionId' in document) {
+            return {
+                document,
+                message: t__('common.version_created'),
+                redirectUrl: `${rime.routes.panelUrl(toKebabCase(slug))}?${PARAMS.VERSION_ID}=${document.versionId}`
+            };
         }
         return { document, message: t__('common.doc_updated') };
     }

package/dist/panel/pages/area/load.server.d.ts

@@ -1,3 +1,3 @@
 import type { AreaDocData } from '../../index.js';
 import type { ServerLoadEvent } from '@sveltejs/kit';
-export declare function areaLoad<V extends boolean = boolean>(event: ServerLoadEvent, withVersions?: V): Promise<AreaDocData<V>>;
+export declare function areaLoad(event: ServerLoadEvent): Promise<AreaDocData>;

package/dist/panel/pages/area/load.server.js

@@ -1,14 +1,10 @@
-import { PARAMS } from '../../../core/constant.js';
+import { PARAMS } from '../../../core/constants.js';
 import { ERROR_CONTEXT, handleError } from '../../../core/errors/handler.server.js';
 import { RimeError } from '../../../core/errors/index.js';
-import { withVersionsSuffix } from '../../../core/naming.js';
-import { panelUrl } from '../../util/url.js';
-import { trycatch } from '../../../util/function.js';
-import { apiUrl } from '../../../util/index.js';
-import { toKebabCase } from '../../../util/string.js';
-export async function areaLoad(event, withVersions) {
+import { autoSavesOf } from '../../../core/prototype/shared/versions/auto-saves.server.js';
+export async function areaLoad(event) {
     //
-    const { locals, url, fetch } = event;
+    const { locals, url } = event;
     const { rime, locale } = locals;
     const slug = (event.params.slug || '');
     const area = rime.area(slug);
@@ -18,29 +14,19 @@ export async function areaLoad(event, withVersions) {
         throw handleError(new RimeError(RimeError.UNAUTHORIZED), { context: ERROR_CONTEXT.LOAD });
     }
     const aria = [
-        { title: 'Dashboard', icon: 'dashboard', url: panelUrl() },
+        { title: 'Dashboard', icon: 'dashboard', url: rime.routes.panelUrl() },
         { title: area.config.label }
     ];
     const versionId = url.searchParams.get(PARAMS.VERSION_ID) || undefined;
-    const draft = url.searchParams.get(PARAMS.DRAFT)
-        ? url.searchParams.get(PARAMS.DRAFT) === 'true'
-        : undefined;
-    const doc = await area.find({ locale, versionId, draft });
-    let data = {
+    const latest = url.searchParams.get(PARAMS.LATEST) === 'true' || undefined;
+    const doc = await area.find({ locale, versionId, latest });
+    const data = {
         aria,
         doc,
         operation: 'update',
         status: 200,
-        readOnly: !authorizedUpdate
+        readOnly: !authorizedUpdate,
+        autoSaves: await autoSavesOf({ event, config: area.config, doc })
     };
-    if (withVersions) {
-        const url = `${apiUrl(withVersionsSuffix(toKebabCase(doc._type)))}?where[ownerId][equals]=${doc.id}&sort=-updatedAt&select=updatedAt,status`;
-        const promise = fetch(url).then((r) => r.json());
-        const [error, result] = await trycatch(promise);
-        if (error || !Array.isArray(result.docs)) {
-            throw new RimeError(RimeError.OPERATION_ERROR, 'while getting versions');
-        }
-        data = { ...data, versions: result.docs };
-    }
     return data;
 }

package/dist/panel/pages/auth/fields.js

@@ -1,6 +1,6 @@
 import { email } from '../../../fields/email/index.js';
 import { text } from '../../../fields/text/index.js';
-import { email as validateEmail } from '../../../util/validate.js';
+import { email as validateEmail } from '../../../core/fields/validate.js';
 export const passwordField = text('password').required();
 export const confirmPasswordField = text('confirmPassword').required();
 export const emailField = email('email').layout('compact').required().validate(validateEmail);

package/dist/panel/pages/auth/forgot-password/ForgotPassword.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { t__ } from '../../../../core/i18n/index.js';
+  import { panelUrl } from '../../../../core/routes/util.js';
   import Email from '../../../../fields/email/component/Email.svelte';
   import AuthForm from '../../../components/sections/auth/AuthForm.svelte';
   import Button from '../../../components/ui/button/button.svelte';
@@ -29,7 +30,7 @@
   async function sendResetPasswordMail() {
     const { data, error } = await authClient.requestPasswordReset({
       email: context.values.email,
-      redirectTo: `/reset-password`
+      redirectTo: panelUrl('reset-password')
     });
     if (error && error.message) {
       toast.error(error.message);

package/dist/panel/pages/auth/forgot-password/load.server.js

@@ -1,3 +1,4 @@
+import { PANEL_AUTH_IMAGE } from '../../../../core/constants.server.js';
 import { error, redirect } from '@sveltejs/kit';
 import { existsSync } from 'node:fs';
 import path from 'node:path';
@@ -10,10 +11,10 @@ export const forgotPasswordLoad = async ({ locals }) => {
         throw redirect(302, '/');
     }
     else {
-        const imageExist = existsSync(path.join(process.cwd(), 'static', 'panel.jpg'));
+        const imageExist = existsSync(path.join(process.cwd(), 'static', PANEL_AUTH_IMAGE));
         return {
             form: {},
-            image: imageExist ? '/panel/panel.jpg' : null
+            image: imageExist ? PANEL_AUTH_IMAGE : null
         };
     }
 };

package/dist/panel/pages/auth/reset-password/ResetPassword.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { t__ } from '../../../../core/i18n';
+  import { panelUrl } from '../../../../core/routes/util.js';
   import Text from '../../../../fields/text/component/Text.svelte';
   import AuthForm from '../../../components/sections/auth/AuthForm.svelte';
   import Button from '../../../components/ui/button/button.svelte';
@@ -42,7 +43,7 @@
 <AuthForm image={data.image} title={t__('common.resetPassword')}>
   {#if success}
     <p>{t__('common.reset_password_success')}</p>
-    <Button size="xl" href="/panel/sign-in">{t__('common.signin')}</Button>
+    <Button size="xl" href={panelUrl('sign-in')}>{t__('common.signin')}</Button>
   {:else}
     <Text type="password" config={passwordConfig} {form} />
     <Text type="password" config={confirmPasswordConfig} {form} />

package/dist/panel/pages/auth/reset-password/load.server.js

@@ -1,3 +1,4 @@
+import { PANEL_AUTH_IMAGE } from '../../../../core/constants.server.js';
 import { error, redirect } from '@sveltejs/kit';
 import { existsSync } from 'node:fs';
 import path from 'node:path';
@@ -9,13 +10,13 @@ export const resetPasswordLoad = async ({ locals, url }) => {
     if (!hasParams) {
         throw redirect(302, '/');
     }
-    const imageExist = existsSync(path.join(process.cwd(), 'static', 'panel.jpg'));
+    const imageExist = existsSync(path.join(process.cwd(), 'static', PANEL_AUTH_IMAGE));
     const token = url.searchParams.get('token');
     if (!token) {
         throw error(400, 'invalid link');
     }
     return {
-        image: imageExist ? '/panel/panel.jpg' : null,
+        image: imageExist ? PANEL_AUTH_IMAGE : null,
         token: token
     };
 };

package/dist/panel/pages/auth/sign-in/SignIn.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { enhance } from '$app/forms';
   import { t__ } from '../../../../core/i18n/index.js';
+  import { panelPath, panelUrl } from '../../../../core/routes/util.js';
   import Email from '../../../../fields/email/component/Email.svelte';
   import Text from '../../../../fields/text/component/Text.svelte';
   import AuthForm from '../../../components/sections/auth/AuthForm.svelte';
@@ -34,7 +35,7 @@
 
 <AuthForm image={data.image} title={t__('common.signin')}>
   {#if context.status !== 429}
-    <form method="POST" action="/panel/sign-in" use:enhance={context.enhance}>
+    <form method="POST" action={panelPath('sign-in')} use:enhance={context.enhance}>
       <Email config={emailField} form={context} />
       <Text
         type="password"
@@ -50,7 +51,7 @@
       </Button>
 
       {#if data.forgotPasswordEnabled}
-        <Button variant="link" href="/forgot-password">
+        <Button variant="link" href={panelUrl('forgot-password')}>
           {t__('common.forgotPassword')}
         </Button>
       {/if}

package/dist/panel/pages/auth/sign-in/actions.server.js

@@ -3,7 +3,7 @@ import { handleError } from '../../../../core/errors/handler.server.js';
 import { RimeFormError } from '../../../../core/errors/index.js';
 import { redirect } from '@sveltejs/kit';
 export const signInActions = {
-    default: async ({ cookies, request, locals }) => {
+    default: async ({ cookies, request, locals, params }) => {
         const { rime } = locals;
         const data = await request.formData();
         const email = data.get('email')?.toString() || '';
@@ -36,6 +36,6 @@ export const signInActions = {
                 secure: !dev
             });
         }
-        throw redirect(302, '/panel');
+        throw redirect(302, `/${params.panel}`);
     }
 };

package/dist/panel/pages/auth/sign-in/load.server.js

@@ -1,16 +1,17 @@
+import { PANEL_AUTH_IMAGE } from '../../../../core/constants.server.js';
 import { redirect } from '@sveltejs/kit';
 import { existsSync } from 'node:fs';
 import path from 'node:path';
 export const signInLoad = async ({ locals }) => {
     const { session, rime } = locals;
-    const imageExist = existsSync(path.join(process.cwd(), 'static', 'panel', 'panel.jpg'));
+    const imageExist = existsSync(path.join(process.cwd(), 'static', PANEL_AUTH_IMAGE));
     if (session) {
-        throw redirect(302, '/panel');
+        throw redirect(302, `/${rime.routes.panel}`);
     }
     else {
         return {
             forgotPasswordEnabled: 'mailer' in rime,
-            image: imageExist ? '/panel/panel.jpg' : null,
+            image: imageExist ? PANEL_AUTH_IMAGE : null,
             form: {}
         };
     }

package/dist/panel/pages/collection/Collection.svelte

@@ -1,145 +1,22 @@
 <script lang="ts">
-  import { invalidateAll } from '$app/navigation';
-  import type { Directory } from '../../../core/collections/upload/upload.js';
-  import type { GenericDoc } from '../../../core/types/doc';
-  import BulkUploadDialog from '../../components/sections/collection/bulk-upload/BulkUploadDialog.svelte';
-  import CollectionGrid from '../../components/sections/collection/grid/CollectionGrid.svelte';
-  import ButtonCreate from '../../components/sections/collection/header/ButtonCreate.svelte';
-  import CollectionHeader from '../../components/sections/collection/header/Header.svelte';
-  import SearchInput from '../../components/sections/collection/header/SearchInput.svelte';
-  import Separator from '../../components/sections/collection/header/Separator.svelte';
-  import CollectionList from '../../components/sections/collection/list/CollectionList.svelte';
-  import CollectionTree from '../../components/sections/collection/tree/CollectionTree.svelte';
-  import Page from '../../components/sections/page-layout/Page.svelte';
-  import Unauthorized from '../../components/sections/unauthorized/Unauthorized.svelte';
-  import Button from '../../components/ui/button/button.svelte';
-  import LanguageSwitcher from '../../components/ui/language-switcher/LanguageSwitcher.svelte';
-  import PageHeader from '../../components/ui/page-header/PageHeader.svelte';
-  import { setCollectionContext } from '../../context/collection.svelte.js';
-  import { getConfigContext } from '../../context/config.svelte.js';
-  import { getTitleContext } from '../../context/title';
-  import { CopyPlus } from '@lucide/svelte';
-
-  type Props = {
-    slug: string;
-    data: {
-      status: number;
-      docs: GenericDoc[];
-      canCreate: boolean;
-      upload?: {
-        directories: Directory[];
-        currentPath: `root${string}`;
-        parentDirectory: Directory;
-      };
-    };
-  };
+  import { getLocaleContext } from '../../context/locale.svelte.js';
+  import type { ComponentProps } from 'svelte';
+  import CollectionPage from './CollectionPage.svelte';
 
+  type Props = ComponentProps<typeof CollectionPage>;
   const { data, slug }: Props = $props();
-  const config = getConfigContext();
-  const collectionConfig = $derived(config.getCollection(slug));
-  let bulkDialogOpen = $state(false);
-
-  const collection = $derived(
-    setCollectionContext({
-      initial: data.docs,
-      config: collectionConfig,
-      canCreate: data.canCreate,
-      upload: data.upload
-    })
-  );
-
-  $effect(() => {
-    collection.upload = {
-      directories: data.upload?.directories || [],
-      currentPath: data.upload?.currentPath || 'root',
-      parentDirectory: data.upload?.parentDirectory || null
-    };
-  });
 
-  $effect(() => {
-    collection.docs = data.docs;
-  });
+  const locale = getLocaleContext();
 
-  const titleContext = getTitleContext();
-
-  $effect(() => {
-    titleContext.value = collection.config.label.plural;
-  });
+  /**
+   * One listing per collection, locale and upload folder.
+   *
+   * A new key drops the listing's own state — selection, sort, display mode — which belongs to
+   * the listing it was made in. A reload with the same three updates in place.
+   */
+  const key = $derived(`${slug}|${locale.code ?? ''}|${data.upload?.currentPath ?? ''}`);
 </script>
 
-{#if data.status === 200}
-  <Page>
-    {#snippet main()}
-      <PageHeader>
-        {#snippet title()}
-          {collection.title}
-        {/snippet}
-
-        {#snippet bottomLeft()}
-          {#if collection.canCreate}
-            <ButtonCreate config={collection.config} size="sm" />
-          {/if}
-          {#if collection.isUpload}
-            <Separator />
-            <Button
-              onclick={() => (bulkDialogOpen = true)}
-              icon={CopyPlus}
-              size="sm"
-              variant="text"
-            >
-              Bulk upload
-            </Button>
-          {/if}
-          <CollectionHeader />
-        {/snippet}
-
-        {#snippet topRight()}
-          {#each config.raw.panel.components.collectionHeader || [] as CustomHeaderComponent, index (index)}
-            <CustomHeaderComponent config={collectionConfig} />
-          {/each}
-
-          <LanguageSwitcher onLocalClick={() => invalidateAll()} />
-        {/snippet}
-
-        {#snippet bottomRight()}
-          <SearchInput />
-        {/snippet}
-      </PageHeader>
-
-      <div class="rz-collection__docs">
-        {#if collection.isNested()}
-          <CollectionTree {collection} />
-        {:else if collection.isGrid()}
-          <CollectionGrid {collection} />
-        {:else}
-          <CollectionList {collection} />
-        {/if}
-      </div>
-    {/snippet}
-  </Page>
-
-  <BulkUploadDialog {collection} bind:open={bulkDialogOpen} />
-{:else}
-  <Unauthorized />
-{/if}
-
-<style>
-  .rz-collection__docs {
-    container: collection-area / inline-size;
-    width: 100%;
-    text-align: left;
-    padding: var(--rz-size-6) var(--rz-page-gutter);
-    & :global(.rz-scroll-area) {
-      height: calc(100vh - 7.5rem);
-      width: 100%;
-    }
-    & :global(.rz-scroll-area--grid) {
-      height: calc(100vh - 3.5rem);
-      background-color: hsl(var(--rz-gray-10));
-    }
-    & :global(.rz-scroll-area--nested) {
-      height: calc(100vh - 3.5rem);
-      background-color: hsl(var(--rz-gray-10));
-    }
-  }
-</style>
+{#key key}
+  <CollectionPage {data} {slug} />
+{/key}

package/dist/panel/pages/collection/Collection.svelte.d.ts

@@ -1,18 +1,15 @@
-import type { Directory } from '../../../core/collections/upload/upload.js';
-import type { GenericDoc } from '../../../core/types/doc';
-type Props = {
+declare const Collection: import("svelte").Component<{
     slug: string;
     data: {
         status: number;
-        docs: GenericDoc[];
+        docs: import("../../../core/prototype/types.js").GenericDoc[];
         canCreate: boolean;
         upload?: {
-            directories: Directory[];
+            directories: import("../../../core/prototype/collection/upload/types").Directory[];
             currentPath: `root${string}`;
-            parentDirectory: Directory;
+            parentDirectory: import("../../../core/prototype/collection/upload/types").Directory;
         };
     };
-};
-declare const Collection: import("svelte").Component<Props, {}, "">;
+}, {}, "">;
 type Collection = ReturnType<typeof Collection>;
 export default Collection;