rimecms 0.27.5 → 0.28.0

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

@@ -1,20 +1,26 @@
+import { page } from '$app/state';
+import { env } from '$env/dynamic/public';
 import { apiUrl } from '../../core/api/index.js';
+import { PARAMS } from '../../core/constant.js';
 import { toKebabCase } from '../../util/string.js';
 import { getContext, setContext } from 'svelte';
-import { isObjectLiteral, setValueAtPath } from '../../util/object.js';
+import { getValueAtPath, isObjectLiteral, setValueAtPath } from '../../util/object.js';
 const LIVE_KEY = Symbol('rime.live');
 function createStore(href) {
     let enabled = $state(false);
     let doc = $state();
-    const callbacks = [];
-    let currentFocusedElement = $state();
+    const liveStore = $state({});
+    let activePanelKey = $state(null);
+    const origin = new URL(env.PUBLIC_RIME_URL).origin;
     /**
      * Handles navigation within iframe to maintain live editing mode
      */
     const beforeNavigate = (params) => {
-        if (window && window.top && params.to?.url.href && enabled) {
-            // Send navigation message to parent with live=1 param
-            window.top.postMessage({ location: params.to.url.href + '?live=1' });
+        if (params.type === 'leave')
+            return;
+        const url = params.to?.url.href;
+        if (window && window.top && url && enabled) {
+            window.top.postMessage({ location: url + '?live=1' });
             params.cancel();
         }
     };
@@ -22,6 +28,9 @@ function createStore(href) {
      * Processes messages from parent window
      */
     const onMessage = async (e) => {
+        // Only accept messages from the trusted panel origin
+        if (e.origin !== origin)
+            return;
         // Handle handshake request
         if (e.data.handshake) {
             enabled = true;
@@ -30,14 +39,20 @@ function createStore(href) {
                 window.top.postMessage({ handshake: href });
             }
         }
-        // Handle field updates
+        // Handle panel store updates (new protocol — has `update` key)
+        else if (e.data.update !== undefined &&
+            e.data.path !== undefined &&
+            e.data.value !== undefined) {
+            await handlePanelUpdate(e.data);
+        }
+        // Handle active panel notification from parent
+        else if ('activePanel' in e.data) {
+            activePanelKey = e.data.activePanel ?? null;
+        }
+        // Handle field updates (legacy single-doc protocol)
         else if (e.data.path && e.data.value !== undefined) {
             await handleFieldUpdate(e.data);
         }
-        // Handle focus requests
-        else if (e.data.focus && typeof e.data.focus === 'string' && typeof document !== 'undefined') {
-            handleFocusField(e.data.focus);
-        }
     };
     /**
      * Recursively processes relation objects in any data structure
@@ -109,6 +124,19 @@ function createStore(href) {
         // Return primitives as is
         return value;
     };
+    /**
+     * Handles panel store updates (new multi-panel protocol)
+     */
+    const handlePanelUpdate = async (data) => {
+        const processedValue = await populate(data.value);
+        if (!data.path) {
+            // Empty path = full doc seed (sent on panel activation)
+            liveStore[data.update] = processedValue;
+            return;
+        }
+        const current = liveStore[data.update] ?? {};
+        liveStore[data.update] = setValueAtPath(data.path, current, processedValue);
+    };
     /**
      * Handles field value updates
      */
@@ -120,34 +148,36 @@ function createStore(href) {
         // Update the document
         doc = setValueAtPath(data.path, doc, processedValue);
     };
-    /**
-     * Handles focusing a specific field in the UI
-     */
-    const handleFocusField = (focusPath) => {
-        const element = document.querySelector(`[data-field="${focusPath}"]`);
-        if (element) {
-            const ringStyle = '0px 0px 0px 1px red';
-            // Scroll to the element
-            element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
-            // Add highlight style
-            element.style.boxShadow = ringStyle;
-            if (currentFocusedElement) {
-                currentFocusedElement.style.boxShadow = '';
-            }
-            currentFocusedElement = element;
-        }
-    };
-    /**
-     * Registers a callback for data changes
-     */
-    const onData = (callback) => {
-        callbacks.push(callback);
-    };
     // Return public facade
     return {
         beforeNavigate,
         onMessage,
-        onData,
+        get documentUpdateURI() {
+            const doc = page.data.doc;
+            if (!doc)
+                throw new Error('live.doc has not been set before accessing documentAPIUpdateURL');
+            let uri = `/${doc._type}`;
+            if (doc._prototype === 'collection')
+                uri += `/${doc.id}`;
+            const params = [];
+            if (doc.versionId)
+                params.push(`${PARAMS.VERSION_ID}=${doc.versionId}`);
+            if (doc.locale)
+                params.push(`${PARAMS.LOCALE}=${doc.locale}`);
+            if (params.length)
+                uri += `?${params.join('&')}`;
+            return uri;
+        },
+        getPanelValue: (update, path) => {
+            const entry = liveStore[update];
+            if (!entry) {
+                return undefined;
+            }
+            return getValueAtPath(path, entry);
+        },
+        get activePanelKey() {
+            return activePanelKey;
+        },
         get data() {
             return { doc };
         },

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

@@ -0,0 +1,11 @@
+export type ActivePanel = {
+    key: string;
+    update: string;
+    fieldPath: string;
+};
+export type LivePanelStore = {
+    readonly activePanel: ActivePanel | null;
+    readonly panelStack: ActivePanel[];
+};
+export declare function setLivePanelContext(store: LivePanelStore): LivePanelStore;
+export declare function getLivePanelContext(): LivePanelStore;

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

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('rime.live-panel');
+export function setLivePanelContext(store) {
+    return setContext(KEY, store);
+}
+export function getLivePanelContext() {
+    return getContext(KEY);
+}

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

@@ -51,13 +51,7 @@
   {/if}
 </AuthForm>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-p {
+<style>p {
     font-size: var(--rz-text-lg);
     font-variation-settings: 'wght' 600;
     font-weight: 600;

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

@@ -76,7 +76,9 @@
         {/snippet}
 
         {#snippet bottomLeft()}
-          <ButtonCreate size="sm" />
+          {#if collection.canCreate}
+            <ButtonCreate config={collection.config} size="sm" />
+          {/if}
           {#if collection.isUpload}
             <Separator />
             <Button

package/dist/panel/pages/dashboard/Dashboard.svelte

@@ -8,6 +8,7 @@
   import PageHeader from '../../components/ui/page-header/PageHeader.svelte';
   import { getConfigContext } from '../../context/config.svelte.js';
   import { Eye } from '@lucide/svelte';
+  import DashboardCollection from './DashboardCollection.svelte';
   import type { DashboardEntry } from './types.js';
 
   type Props = { entries: DashboardEntry[]; user?: User };
@@ -43,30 +44,36 @@
         <CustomDashBoard {entries} />
       {:else}
         <div class="rz-dashboard__content">
-          {#each entries as entry, index (index)}
-            {@const Icon = config.raw.icons[entry.slug]}
-            <a class="rz-dashboard__entry" href={entry.link}>
-              <div class="rz-dashboard__entry-icon">
-                <Icon size="16" strokeWidth="1" />
-              </div>
-              <div>
-                <header>
-                  <h2>{entry.title}</h2>
-                </header>
-                {#if entry.description}
-                  <p class="rz-dashboard__entry-description">{entry.description}</p>
-                {/if}
-              </div>
-            </a>
-          {/each}
+          <div class="rz-dashboard__collections">
+            {#each entries.filter((e) => e.prototype === 'collection') as entry, index (index)}
+              <DashboardCollection {entry} />
+            {/each}
+          </div>
+          <div class="rz-dashboard__areas">
+            {#each entries.filter((e) => e.prototype === 'area') as entry, index (index)}
+              {@const Icon = config.raw.icons[entry.slug]}
+              <a class="rz-dashboard__area" href={entry.link}>
+                <div class="rz-dashboard__area-icon">
+                  <Icon size="16" strokeWidth="1" />
+                </div>
+                <div>
+                  <header>
+                    <h2>{entry.title}</h2>
+                  </header>
+                  {#if entry.description}
+                    <p class="rz-dashboard__area-description">{entry.description}</p>
+                  {/if}
+                </div>
+              </a>
+            {/each}
+          </div>
         </div>
       {/if}
     </div>
   {/snippet}
 </Page>
 
-<style>
-  .rz-dashboard {
+<style>.rz-dashboard {
     background-color: hsl(var(--rz-color-bg));
     min-height: 100vh;
 
@@ -76,10 +83,24 @@
       font-weight: 500;
     }
   }
-  .rz-dashboard__entry {
-    height: 100%;
-    background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
-    border-radius: var(--rz-radius-md);
+
+  .rz-dashboard__collections {
+    grid-column: span 2;
+    display: grid;
+    gap: var(--rz-size-6);
+  }
+
+  .rz-dashboard__areas {
+    grid-column: span 1;
+    gap: var(--rz-size-4);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rz-dashboard__area {
+    background-color: light-dark(hsl(var(--rz-gray-18)), hsl(var(--rz-gray-3)));
+    border: var(--rz-border);
+    border-radius: var(--rz-radius-xl);
     padding: var(--rz-size-4);
     position: relative;
     min-height: 130px;
@@ -89,7 +110,7 @@
     transition: background-color 0.3s ease-out;
 
     &:hover {
-      background-color: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-4)));
+      background-color: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-4)));
     }
 
     :global(svg) {
@@ -103,26 +124,29 @@
       gap: var(--rz-size-2);
     }
   }
-  .rz-dashboard__entry-icon {
+  .rz-dashboard__area-icon {
     width: var(--rz-size-8);
     height: var(--rz-size-8);
-    background-color: light-dark(hsl(var(--rz-gray-13)), hsl(var(--rz-gray-0)));
+    background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-0)));
     border-radius: var(--rz-size-10);
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .rz-dashboard__entry-description {
+  .rz-dashboard__area-description {
     opacity: 0.5;
     margin-top: var(--rz-size-1);
   }
 
   .rz-dashboard__content {
     display: grid;
-    gap: var(--rz-size-4);
+    gap: var(--rz-size-16);
     padding: var(--rz-size-8) var(--rz-page-gutter);
     height: 100%;
-    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    @media (min-width: 1024px) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
   }
 </style>

package/dist/panel/pages/dashboard/DashboardCollection.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { t__ } from '../../../core/i18n/index.js';
+  import Empty from '../../components/sections/collection/Empty.svelte';
+  import GridItem from '../../components/sections/collection/grid/grid-item/GridItem.svelte';
+  import ButtonCreate from '../../components/sections/collection/header/ButtonCreate.svelte';
+  import Row from '../../components/sections/collection/list/row/Row.svelte';
+  import Button from '../../components/ui/button/button.svelte';
+  import { getConfigContext } from '../../context/config.svelte.js';
+  import { ChevronRight } from '@lucide/svelte';
+
+  import type { DashboardEntry } from './types.js';
+
+  type Props = { entry: DashboardEntry & { prototype: 'collection' } };
+  const { entry }: Props = $props();
+
+  const config = getConfigContext();
+  const collectionConfig = $derived(config.getCollection(entry.slug));
+</script>
+
+<section>
+  <header>
+    <div>
+      <h2>{entry.title}</h2>
+      {#if entry.canCreate}
+        <ButtonCreate config={collectionConfig} size="sm" />
+      {/if}
+      <p>{entry.description}</p>
+    </div>
+    <Button variant="text" href={entry.link}>
+      {t__('common.view_all')}
+      <ChevronRight size={12} />
+    </Button>
+  </header>
+  {#if entry.lastEdited?.length === 0}
+    <Empty config={collectionConfig} />
+  {:else}
+    <div class="rz-dashboard-collection__list rz-dashboard-collection__list--{entry.layout}">
+      {#each entry.lastEdited as doc, index (index)}
+        {#if entry.layout === 'grid'}
+          <GridItem isSelectMode={false} config={collectionConfig} {doc} checked={false} />
+        {:else}
+          <Row isSelectMode={false} config={collectionConfig} {doc} checked={false} />
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</section>
+
+<style>header {
+    display: flex;
+    gap: var(--rz-size-2);
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--rz-size-2);
+    > div {
+      display: flex;
+      gap: var(--rz-size-2);
+      align-items: center;
+    }
+    p {
+      opacity: 0.5;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+    }
+  }
+  h2 {
+    font-weight: 600;
+    font-size: var(--rz-size-4);
+  }
+
+  .rz-dashboard-collection__list {
+    display: grid;
+    gap: var(--rz-size-2);
+  }
+
+  .rz-dashboard-collection__list--grid {
+    --columns: 1;
+    grid-template-columns: repeat(var(--columns), minmax(150px, 1fr));
+    @media (min-width: 640px) {
+      --columns: 2;
+    }
+    @media (min-width: 1024px) {
+      --columns: 3;
+    }
+    @media (min-width: 1280px) {
+      --columns: 4;
+    }
+  }
+</style>

package/dist/panel/pages/dashboard/DashboardCollection.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { DashboardEntry } from './types.js';
+type Props = {
+    entry: DashboardEntry & {
+        prototype: 'collection';
+    };
+};
+declare const DashboardCollection: import("svelte").Component<Props, {}, "">;
+type DashboardCollection = ReturnType<typeof DashboardCollection>;
+export default DashboardCollection;

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

@@ -3,20 +3,36 @@ import { capitalize } from '../../../util/string.js';
 export const dashboardLoad = async (event) => {
     const { locale, user, rime } = event.locals;
     const entries = [];
-    const buildBaseEntry = (c) => ({
-        prototype: 'collection',
-        description: c.panel && c.panel?.description ? c.panel.description : null,
-        slug: c.slug,
-        canCreate: user && c.access.create(user, {}),
-        link: panelUrl(c.kebab),
-        titleSingular: c.label.singular,
-        title: c.label.plural
-    });
-    const getLastEdited = async (c) => {
+    const normalizedPanelConfig = (c) => {
+        const incomingConfig = c.panel || {};
+        const incomingDashboardConfig = incomingConfig.dashboard || {};
+        return {
+            ...incomingConfig,
+            dashboard: {
+                layout: incomingDashboardConfig.layout ? incomingDashboardConfig.layout : 'rows',
+                maxEntries: incomingDashboardConfig.maxEntries || 8
+            }
+        };
+    };
+    const buildBaseEntry = (c) => {
+        const panelConfig = normalizedPanelConfig(c);
+        return {
+            prototype: 'collection',
+            description: panelConfig.description || null,
+            slug: c.slug,
+            canCreate: user && c.access.create(user, {}),
+            link: panelUrl(c.kebab),
+            titleSingular: c.label.singular,
+            title: c.label.plural,
+            layout: panelConfig.dashboard.layout
+        };
+    };
+    const getLastEdited = async (c, limit = 8) => {
         try {
             return await rime.collection(c.slug).find({
-                limit: 6,
-                locale
+                limit,
+                locale,
+                draft: true
             });
         }
         catch (err) {
@@ -27,10 +43,10 @@ export const dashboardLoad = async (event) => {
     };
     const promiseEntries = rime.config.raw.collections
         .filter((collection) => user && collection.access.read(user, {}))
-        .filter((collection) => collection.panel !== false)
+        .filter((collection) => collection.panel !== false && collection.panel?.dashboard !== false)
         .map(async (collection) => {
         if (collection.panel) {
-            return getLastEdited(collection).then((docs) => ({
+            return getLastEdited(collection, normalizedPanelConfig(collection).dashboard?.maxEntries).then((docs) => ({
                 ...buildBaseEntry(collection),
                 lastEdited: docs
             }));

package/dist/panel/pages/dashboard/types.d.ts

@@ -5,6 +5,7 @@ export type DashboardEntry = {
     titleSingular: string;
     link: string;
     canCreate?: boolean;
+    layout?: 'rows' | 'grid';
     prototype: 'collection';
     description: string | null;
     lastEdited?: GenericDoc[];