rimecms 0.27.5 → 0.28.0

package/dist/panel/pages/live/Live.svelte

@@ -2,19 +2,58 @@
   import { goto } from '$app/navigation';
   import type { BuiltConfigClient } from '../../../core/config/types';
   import { t__ } from '../../../core/i18n';
-  import type { GenericDoc } from '../../../core/types/doc';
-  import LiveSidePanel from '../../components/sections/live/SidePanel.svelte';
-  import Button from '../../components/ui/button/button.svelte';
+  import LiveEditPanel from '../../components/sections/live/LiveEditPanel.svelte';
+  import LiveFloatingUI from '../../components/sections/live/LiveFloatingUI.svelte';
   import { Pane, PaneGroup, PaneResizer } from '../../components/ui/pane/index.js';
+  import { Toaster } from '../../components/ui/sonner';
   import SpinLoader from '../../components/ui/spin-loader/SpinLoader.svelte';
+  import { setAPIProxyContext } from '../../context/api-proxy.svelte';
+  import { setConfigContext } from '../../context/config.svelte';
+  import type { DocumentFormContext } from '../../context/documentForm.svelte.js';
+  import { setLivePanelContext, type ActivePanel } from '../../context/livePanel.svelte.js';
+  import { setLocaleContext } from '../../context/locale.svelte';
+  import { setTitleContext } from '../../context/title';
+  import { setUserContext } from '../../context/user.svelte';
+  import type { GenericDoc, User } from '../../../types';
+  import { trycatchFetch } from '../../../util/function';
   import { snapshot } from '../../../util/state';
-  import { Laptop, Smartphone } from '@lucide/svelte';
+  import { toKebabCase } from '../../../util/string';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
 
-  type Props = { data: any; config: BuiltConfigClient };
+  type Data = {
+    doc: GenericDoc;
+    user: User;
+    src: string;
+    slug: string;
+    locale: string | undefined;
+  };
+
+  type Props = { data: Data; config: BuiltConfigClient };
   const { data, config }: Props = $props();
 
+  setAPIProxyContext();
+  // svelte-ignore state_referenced_locally
+  setConfigContext(config);
+  // svelte-ignore state_referenced_locally
+  setUserContext(data.user);
+  // svelte-ignore state_referenced_locally
+  setLocaleContext(data.locale);
+  setTitleContext('[untitled]');
+
+  // One entry per unique `update` key — never removed once added
+  let panelContexts = $state<Record<string, { doc: any }>>({});
+  // Collected from LivePanelContext children after mount
+  let panelForms = $state<Record<string, DocumentFormContext>>({});
+  // Stack-based navigation: last entry is the active panel, Escape pops one level
+  let panelStack = $state<ActivePanel[]>([]);
+  // The active panel is the last entry in the stack, or null if the stack is empty
+  const activePanel = $derived(panelStack.at(-1) ?? null);
+  // The root document panel is the first panel activated with fieldPath === ''
+  let rootDocumentPanel = $state<ActivePanel>();
+
+  let paneLeft: ReturnType<typeof Pane>;
+  const VALID_UPDATE = /^\/[a-z][a-z0-9-]*(?:\/[a-zA-Z0-9_-]+)?(?:\?[a-zA-Z0-9_=&%.-]*)?$/;
   let iframe: HTMLIFrameElement;
   let iframeSrc = $state('');
 
@@ -28,20 +67,32 @@
   // Compare URLs regardless of trailing slash
   let sync = $derived(normalizeUrl(iframeSrc) === normalizeUrl(data.src));
 
-  const onDataChange = (args: Partial<GenericDoc>) => {
-    /** Send message to iframe */
-    if (iframe?.contentWindow) {
-      // Use snapshot to ensure we're sending a plain object without reactive proxies
-      iframe.contentWindow.postMessage(snapshot(args));
-    }
-  };
+  // Send a snapshot of the current state to the iframe
+  function makePanelOnDataChange(update: string) {
+    return ({ path, value }: { path: string; value: any }) => {
+      if (!iframe?.contentWindow) return;
+      iframe.contentWindow.postMessage(snapshot({ update, path, value }));
+    };
+  }
 
-  const onFieldFocus = (path: string) => {
-    /** Send message to iframe */
-    if (iframe?.contentWindow) {
-      iframe.contentWindow.postMessage({ focus: path });
-    }
-  };
+  // Send a snapshot of the current state to the iframe after a successful save
+  function makeAfterSuccess(update: string) {
+    return (savedDoc: any) => {
+      // Update the cached doc so future re-activations seed the correct base
+      if (panelContexts[update]) panelContexts[update] = { doc: savedDoc };
+      // Re-seed the iframe with server-confirmed data
+      if (iframe?.contentWindow) {
+        iframe.contentWindow.postMessage(snapshot({ update, path: '', value: savedDoc }));
+      }
+    };
+  }
+
+  // Validate the update URI format and extract slug and id
+  function parseUpdate(update: string): { slug: string; id?: string } | null {
+    if (!VALID_UPDATE.test(update)) return null;
+    const [, slug, id] = update.split('/');
+    return { slug, id };
+  }
 
   // Wrapper tells the iframe it's live - using requestAnimationFrame for better performance
   function handshake() {
@@ -53,12 +104,49 @@
         }
         // Continue handshake attempts until synced
         // Use setTimeout outside to ensure we don't create a tight animation frame loop
-        setTimeout(handshake, 1000);
+        setTimeout(handshake, 300);
       });
     }
   }
 
-  const onIframeMessage = async (e: any) => {
+  const iframeOrigin = $derived.by(() => {
+    try {
+      return new URL(data.src).origin;
+    } catch {
+      return null;
+    }
+  });
+
+  async function activatePanel(key: string, update: string, fieldPath: string) {
+    const parsed = parseUpdate(update);
+    if (!parsed) return console.warn(`Invalid update key: ${update}`);
+
+    if (!panelContexts[update]) {
+      const url = parsed.id ? `/api/${parsed.slug}/${parsed.id}` : `/api/${parsed.slug}`;
+      const res = await fetch(url);
+      if (!res.ok) return;
+      panelContexts[update] = { doc: (await res.json()).doc };
+
+      // Seed liveStore only on FIRST activation — never overwrite live edits on re-click
+      if (iframe?.contentWindow) {
+        iframe.contentWindow.postMessage(
+          snapshot({ update, path: '', value: panelContexts[update].doc })
+        );
+      }
+    }
+
+    if (!rootDocumentPanel && fieldPath === '') {
+      rootDocumentPanel = { key, update, fieldPath };
+    }
+
+    // Push onto the stack — each nested LivePanel click adds a level
+    panelStack = [...panelStack.filter((item) => item.key !== key), { key, update, fieldPath }];
+  }
+
+  const onIframeMessage = async (e: MessageEvent) => {
+    // Only accept messages from the expected iframe origin
+    if (!iframeOrigin || e.origin !== iframeOrigin) return;
+
     // Handle handshake response from iframe - process in next microtask
     if (e.data.handshake) {
       // Use Promise.resolve().then to defer state update to next microtask
@@ -66,10 +154,25 @@
         iframeSrc = e.data.handshake;
       });
     }
+
     // Handle navigation request from iframe
     if (e.data.location) {
       goto(e.data.location);
     }
+
+    // Handle custom panel activation
+    if (e.data.activatePanel) {
+      const { key, update, fieldPath } = e.data.activatePanel;
+      activatePanel(key, update, fieldPath);
+    }
+
+    if (e.data.deactivatePanel) {
+      // Pop the top level — Escape returns to the previous panel in the stack
+      const { key } = e.data.deactivatePanel;
+      if (panelStack.at(-1)?.key === key) {
+        panelStack = panelStack.slice(0, -1);
+      }
+    }
   };
 
   onMount(() => {
@@ -78,10 +181,17 @@
   });
 
   $effect(() => {
-    // Start handshake process when not synced
-    if (!sync) {
-      handshake();
-    }
+    // Check wether the iframe src has a 200 status code and is reachable
+    trycatchFetch(data.src, { method: 'HEAD' }).then(([error, response]) => {
+      if (error || !response?.ok) {
+        console.error(`Error loading iframe, check your routes for ${data.src}`);
+      } else {
+        // Start handshake process when not synced
+        if (!sync) {
+          handshake();
+        }
+      }
+    });
   });
 
   $effect(() => {
@@ -91,47 +201,112 @@
     }
   });
 
+  $effect(() => {
+    if (!paneLeft) return;
+    if (activePanel) {
+      paneLeft.expand();
+    } else {
+      paneLeft.collapse();
+    }
+  });
+
+  // Notify the iframe whenever the active panel changes so LivePanel knows its state
+  $effect(() => {
+    if (!iframe?.contentWindow) return;
+    iframe.contentWindow.postMessage({ activePanel: activePanel?.key ?? null });
+  });
+
   let currentDevice = $state<'mobile' | 'desktop'>('mobile');
+
+  // Expose active panel state to all child components (LiveEditPanel etc.)
+  setLivePanelContext({
+    get activePanel() {
+      return activePanel;
+    },
+    get panelStack() {
+      return panelStack;
+    }
+  });
+
+  function closeActivePanel() {
+    if (activePanel) {
+      panelStack = panelStack.slice(0, -1);
+    } else {
+      backToDocumentPanel();
+    }
+  }
+
+  function backToDocumentPanel() {
+    const slug = data.slug;
+    const id = data.doc.id;
+
+    // Start with the base URI for the panel
+    let panelUri = `/panel/${toKebabCase(slug)}`;
+
+    // Add the item ID to the URI if we're updating a collection doc
+    if (id) {
+      panelUri += `/${id}`;
+    }
+    return goto(panelUri);
+  }
+
+  function toggleRootPanel() {
+    if (rootDocumentPanel) {
+      if (activePanel?.key === rootDocumentPanel.key) {
+        closeActivePanel();
+      } else {
+        activatePanel(rootDocumentPanel.key, rootDocumentPanel.update, rootDocumentPanel.fieldPath);
+      }
+    }
+  }
+
+  function handleIFrameError() {
+    console.error('Error loading iframe:', data.src);
+  }
 </script>
 
 <div class="rz-live-container">
   {#if !sync}
-    <div out:fade={{ duration: 350 }} class="rz-live-container__overlay">
+    <div out:fade={{ duration: 150 }} class="rz-live-container__overlay">
       <div><SpinLoader /> {t__('common.live_in_sync')}</div>
     </div>
   {/if}
-  <PaneGroup autoSaveId="rz-live:panel-state" direction="horizontal">
-    <Pane defaultSize={40}>
-      <div class="rz-live-container__side-panel">
-        {#key data.src + data.doc.id + data.locale + data.slug}
-          <LiveSidePanel
-            {config}
-            {onDataChange}
-            {onFieldFocus}
-            doc={data.doc}
-            user={data.user}
-            locale={data.locale}
+
+  <Toaster />
+
+  <LiveFloatingUI
+    bind:currentDevice
+    forms={panelForms}
+    onClose={closeActivePanel}
+    {activePanel}
+    toggleRootPanel={rootDocumentPanel ? toggleRootPanel : null}
+  />
+
+  <PaneGroup direction="horizontal">
+    <Pane bind:this={paneLeft} collapsedSize={0} collapsible={true} defaultSize={30}>
+      {#if activePanel && panelContexts[activePanel.update]}
+        {#key activePanel.update}
+          <LiveEditPanel
+            doc={panelContexts[activePanel.update].doc}
+            onDataChange={makePanelOnDataChange(activePanel.update)}
+            afterSuccess={makeAfterSuccess(activePanel.update)}
+            onFormReady={(form) => {
+              panelForms[activePanel.update] = form;
+            }}
           />
         {/key}
-      </div>
+      {/if}
     </Pane>
+
     <PaneResizer />
     <Pane class="rz-live-container__pane-right" defaultSize={70}>
-      <div class="rz-live-container__devices">
-        <Button
-          onclick={() => (currentDevice = 'mobile')}
-          variant={currentDevice === 'mobile' ? 'secondary' : 'ghost'}
-          size="icon"
-          icon={Smartphone}
-        />
-        <Button
-          onclick={() => (currentDevice = 'desktop')}
-          variant={currentDevice === 'desktop' ? 'secondary' : 'ghost'}
-          size="icon"
-          icon={Laptop}
-        />
-      </div>
-      <iframe class={currentDevice} bind:this={iframe} title="edit" src={data.src}></iframe>
+      <iframe
+        class={currentDevice}
+        bind:this={iframe}
+        title="edit"
+        src={data.src}
+        onerror={handleIFrameError}
+      ></iframe>
     </Pane>
   </PaneGroup>
 </div>
@@ -147,7 +322,6 @@
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-    padding: var(--rz-size-3);
     height: 100vh;
     background-color: hsl(var(--rz-gray-3));
   }
@@ -159,8 +333,11 @@
     border-right: var(--rz-border);
   }
 
+  :global(.rz-live-hidden) {
+    display: none;
+  }
+
   .rz-live-container iframe {
-    border: var(--rz-border);
     transform-origin: center 0;
   }
 
@@ -168,17 +345,25 @@
     width: 320px;
     aspect-ratio: 2 / 3.3;
     scale: 1.25;
+    transform: translateY(-6.25vh);
+  }
+
+  :global(.rz-live-container__pane-right):has(iframe.mobile) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   .rz-live-container iframe.desktop {
-    width: 133%;
-    aspect-ratio: 16 / 11;
-    scale: 0.75;
+    width: 100%;
+    height: 100%;
+    padding: var(--rz-size-6);
   }
 
   .rz-live-container__overlay {
-    background-color: hsl(var(--rz-gray-10));
-    opacity: 0.8;
+    background-color: light-dark(hsl(var(--rz-gray-18)), hsl(var(--rz-gray-2)));
+    color: light-dark(hsl(var(--rz-gray-2)), hsl(var(--rz-gray-18)));
+    opacity: 0.93;
     position: absolute;
     inset: 0;
     display: flex;
@@ -192,12 +377,4 @@
       justify-content: center;
     }
   }
-
-  .rz-live-container__devices {
-    display: inline-flex;
-    gap: var(--rz-size-3);
-    padding: var(--rz-size-2);
-    border-radius: var(--rz-radius-md);
-    background-color: hsl(var(--rz-gray-2));
-  }
 </style>

package/dist/panel/pages/live/Live.svelte.d.ts

@@ -1,6 +1,14 @@
 import type { BuiltConfigClient } from '../../../core/config/types';
+import type { GenericDoc, User } from '../../../types';
+type Data = {
+    doc: GenericDoc;
+    user: User;
+    src: string;
+    slug: string;
+    locale: string | undefined;
+};
 type Props = {
-    data: any;
+    data: Data;
     config: BuiltConfigClient;
 };
 declare const Live: import("svelte").Component<Props, {}, "">;

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

@@ -1,5 +1,6 @@
-import { error, redirect } from '@sveltejs/kit';
+import { env } from '$env/dynamic/public';
 import { PARAMS } from '../../../core/constant.js';
+import { error, redirect } from '@sveltejs/kit';
 export async function liveLoad(event) {
     const { user, rime } = event.locals;
     event.depends('data:src');
@@ -12,6 +13,18 @@ export async function liveLoad(event) {
     if (!user) {
         error(404, 'Not found');
     }
+    // Validate src is from the trusted frontend origin to prevent iframe injection
+    if (src) {
+        try {
+            const trustedOrigin = new URL(env.PUBLIC_RIME_URL).origin;
+            if (new URL(src).origin !== trustedOrigin) {
+                error(400, 'Invalid src');
+            }
+        }
+        catch {
+            error(400, 'Invalid src');
+        }
+    }
     if (user && src && slug && id) {
         const output = { user, src: src, slug, locale };
         if (rime.config.isCollection(slug)) {