rimecms 0.27.6 → 0.28.0

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

@@ -17,7 +17,6 @@
   import AuthApiKeyDialog from './AuthAPIKeyDialog.svelte';
   import AuthFooter from './AuthFooter.svelte';
   import CurrentlyEdited from './CurrentlyEdited.svelte';
-  import FloatingUI from './FloatingUI.svelte';
   import Header from './Header.svelte';
   import UploadHeader from './upload-header/UploadHeader.svelte';
 
@@ -25,7 +24,6 @@
     doc: GenericDoc;
     operation: 'update' | 'create';
     class?: string;
-    onDataChange?: any;
     onFieldFocus?: any;
     readOnly: boolean;
     onClose?: any;
@@ -40,7 +38,6 @@
     onClose,
     onNestedDocumentCreated,
     nestedLevel = 0,
-    onDataChange = null,
     onFieldFocus = null,
     class: className
   }: Props = $props();
@@ -64,7 +61,7 @@
   // Dialog for unsaved changes confirmation
   const isConfirmLeaveOpen = $derived(!!interceptedLeave);
   const locale = getLocaleContext();
-  const liveEditing = $derived(!!onDataChange);
+
   // This is used to show the API key after creating a document in a collection with API key auth
   let apiKey = $state<string | null>('');
 
@@ -85,7 +82,6 @@
     config,
     readOnly,
     onNestedDocumentCreated,
-    onDataChange,
     onFieldFocus,
     key: `${initial._type}_${nestedLevel}`,
     beforeRedirect: beforeRedirect
@@ -142,9 +138,7 @@
   enctype="multipart/form-data"
   method="post"
 >
-  {#if !liveEditing}
-    <Header {form} {config} {onClose}></Header>
-  {/if}
+  <Header {form} {config} {onClose}></Header>
 
   {#if form.values.editedBy && form.values.editedBy !== user.attributes.id}
     <CurrentlyEdited by={form.values.editedBy} doc={form.values} user={user.attributes} />
@@ -161,27 +155,23 @@
     {/if}
   </div>
 
-  {#if !form.isLive}
-    <div class="rz-document__infos">
-      {#if form.values.createdAt}
-        {@render meta(t__('common.created_at'), locale.dateFormat(form.values.createdAt))}
-      {/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}
-      {#if form.values.id}
-        {@render meta('id', form.values.id)}
-      {/if}
-    </div>
-  {:else}
-    <FloatingUI {form} {onClose} />
-  {/if}
+  <div class="rz-document__infos">
+    {#if form.values.createdAt}
+      {@render meta(t__('common.created_at'), locale.dateFormat(form.values.createdAt))}
+    {/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}
+    {#if form.values.id}
+      {@render meta('id', form.values.id)}
+    {/if}
+  </div>
 
   <!-- This shows the create API Key after creation, for apiKey auth type collection -->
-  {#if !form.isLive && apiKey}
+  {#if apiKey}
     <AuthApiKeyDialog bind:apiKey />
   {/if}
 
@@ -211,13 +201,7 @@
   </Dialog.Root>
 </form>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-document {
+<style>.rz-document {
     container: rz-document / inline-size;
     min-height: 100vh;
     position: relative;
@@ -225,7 +209,7 @@
     background-size: cover;
   }
 
-.rz-document__fields {
+  .rz-document__fields {
     display: grid;
     gap: var(--rz-size-4);
     min-height: calc(100vh - var(--rz-size-14));
@@ -235,18 +219,15 @@
     padding: var(--rz-size-5) var(--rz-page-gutter);
     padding-bottom: var(--rz-size-24);
   }
-
-.rz-document__infos {
+  .rz-document__infos {
     border-top: var(--rz-border);
     padding-inline: var(--rz-page-gutter);
     padding-block: var(--rz-size-6);
   }
-
-.rz-document__metas {
+  .rz-document__metas {
     font-size: var(--rz-text-xs);
   }
-
-.rz-document__metas span {
+  .rz-document__metas span {
     font-variation-settings: 'wght' 600;
     font-weight: 600;
   }

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

@@ -3,7 +3,6 @@ type Props = {
     doc: GenericDoc;
     operation: 'update' | 'create';
     class?: string;
-    onDataChange?: any;
     onFieldFocus?: any;
     readOnly: boolean;
     onClose?: any;

package/dist/panel/components/sections/document/upload-header/UploadHeader.svelte

@@ -100,25 +100,19 @@
   {/if}
 </div>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-doc-upload-header {
+<style>.rz-doc-upload-header {
     container: inline-size;
     padding: 0 var(--rz-fields-padding);
   }
 
-.rz-doc-upload-header__file {
+  .rz-doc-upload-header__file {
     min-height: 250px;
     border: var(--rz-border);
     overflow: hidden;
     border-radius: var(--radius-md);
   }
 
-.rz-doc-upload-header__preview {
+  .rz-doc-upload-header__preview {
     width: 100%;
     display: flex;
     align-items: center;
@@ -131,7 +125,7 @@
     border-top-left-radius: var(--rz-radius-md);
   }
 
-@container (min-width:28rem) {
+  @container (min-width:28rem) {
     .rz-doc-upload-header__file {
       display: flex;
     }
@@ -146,7 +140,7 @@
     }
   }
 
-.rz-doc-upload-header__prewiew-grid {
+  .rz-doc-upload-header__prewiew-grid {
     width: 100%;
     height: 100%;
     --dark: hsl(var(--rz-gray-11) / 1);
@@ -194,37 +188,33 @@
       0 var(--half-size);
   }
 
-.rz-doc-upload-header__prewiew-grid img {
+  .rz-doc-upload-header__prewiew-grid img {
     height: 100%;
     width: 100%;
     -o-object-fit: contain;
        object-fit: contain;
   }
 
-.rz-doc-upload-header__info {
+  .rz-doc-upload-header__info {
     flex: 1;
     font-size: var(--rz-text-sm);
     padding-inline: var(--rz-size-4);
     padding-block: var(--rz-size-4);
   }
-
-.rz-doc-upload-header__info h4 {
+  .rz-doc-upload-header__info h4 {
     opacity: 0.4;
     margin-bottom: var(--rz-size-1);
     font-size: var(--rz-text-xs);
   }
-
-.rz-doc-upload-header__info a {
+  .rz-doc-upload-header__info a {
     margin-bottom: var(--rz-size-3);
     display: block;
     text-decoration: underline;
   }
-
-.rz-doc-upload-header__info p {
+  .rz-doc-upload-header__info p {
     margin-bottom: var(--rz-size-3);
   }
-
-.rz-doc-upload-header__prewiew-file {
+  .rz-doc-upload-header__prewiew-file {
     display: flex;
     flex-direction: column;
     align-items: center;

package/dist/panel/components/sections/live/LiveEdit.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" generics="T">
+  import { browser } from '$app/environment';
+  import { page } from '$app/state';
+  import { getLiveContext } from '../../../context/live.svelte.js';
+  import { normalizeFieldPath } from '../../../../util/doc.js';
+  import { onDestroy, type Snippet } from 'svelte';
+
+  type Props = {
+    /** Initial value */
+    data?: T;
+    /** Full path to the field being edited from the root of the document, e.g. `attributes.title` or `layout.sections.2:paragraph.text` */
+    path?: string;
+    /** Update URI of the API ex: `/pages/123` */
+    update?: string;
+    child: Snippet<[value: T, props: PanelProps]>;
+  };
+
+  type PanelProps = {
+    onclick?: null | ((e: MouseEvent) => void);
+    role?: 'button' | null;
+    tabindex?: 0 | null;
+    'data-live-panel-trigger'?: '' | null;
+    'data-is-active'?: '' | null;
+  };
+
+  const { data: incomingData, path = '', update: incomingUpdate, child }: Props = $props();
+
+  const data = $derived(incomingData ?? page.data.doc);
+  const live = getLiveContext();
+
+  // Fallback to doc api url if prop not present
+  const update = $derived(incomingUpdate ? incomingUpdate : live.documentUpdateURI);
+
+  $effect(() => {
+    if (path === '') {
+      window.top?.postMessage({
+        activatePanel: { key, path, update, fieldPath: path }
+      });
+    }
+  });
+
+  // Unique key for this panel instance — discriminates panels with same update but different path
+  const key = $derived(`${path}-${update}`);
+
+  // Strip :blockType suffix from path segments for store lookup
+  // e.g. 'layout.sections.2:paragraph' → reads liveStore at 'layout.sections.2'
+  const lookupPath = $derived(normalizeFieldPath(path));
+
+  // Read from live store, fall back to data prop
+  const liveValue = $derived(live?.getPanelValue(update, lookupPath));
+  const value = $derived(liveValue ?? data);
+  const isActive = $derived(live?.activePanelKey === key);
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      window.top?.postMessage({
+        deactivatePanel: { key }
+      });
+    }
+  }
+
+  function activate() {
+    if (!live?.enabled) return;
+    window.top?.postMessage({
+      activatePanel: { key, path, update, fieldPath: path }
+    });
+    window.addEventListener('keydown', onKeyDown);
+  }
+
+  onDestroy(() => {
+    if (browser) window.removeEventListener('keydown', onKeyDown);
+  });
+
+  function makeChildProps(): PanelProps {
+    if (!page.data.user || !live?.enabled) return {};
+
+    return {
+      onclick: !isActive
+        ? (e: MouseEvent) => {
+            e.stopPropagation();
+            e.preventDefault();
+            activate();
+          }
+        : null,
+      role: isActive ? null : 'button',
+      tabindex: isActive ? null : 0,
+      'data-live-panel-trigger': '',
+      'data-is-active': isActive ? '' : null
+    };
+  }
+</script>
+
+{@render child(value, makeChildProps())}
+
+<style>
+  :root {
+    --rz-color-live-panel-spot: hsl(240deg 89% 60%);
+  }
+
+  :global([data-live-panel-trigger]) {
+    outline: none;
+  }
+
+  :global([data-live-panel-trigger]:not([data-is-active]):hover) {
+    outline: 1px dashed hsl(from var(--rz-color-live-panel-spot) h s l / 0.6);
+    outline-offset: 5px;
+    cursor: pointer;
+  }
+
+  :global([data-live-panel-trigger][data-is-active]) {
+    outline-offset: 5px;
+    outline: 2px solid var(--rz-color-live-panel-spot);
+  }
+</style>

package/dist/panel/components/sections/live/LiveEdit.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type Snippet } from 'svelte';
+declare class __sveltets_Render<T> {
+    props(): {
+        /** Initial value */
+        data?: T | undefined;
+        /** Full path to the field being edited from the root of the document, e.g. `attributes.title` or `layout.sections.2:paragraph.text` */
+        path?: string;
+        /** Update URI of the API ex: `/pages/123` */
+        update?: string;
+        child: Snippet<[value: T, props: {
+            onclick?: ((e: MouseEvent) => void) | null | undefined;
+            role?: "button" | null;
+            tabindex?: 0 | null;
+            'data-live-panel-trigger'?: "" | null;
+            'data-is-active'?: "" | null;
+        }]>;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const LiveEdit: $$IsomorphicComponent;
+type LiveEdit<T> = InstanceType<typeof LiveEdit<T>>;
+export default LiveEdit;

package/dist/panel/components/sections/live/LiveEditPanel.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { getFieldBuildersAtPath } from '../../../../core/fields/util.js';
+  import RenderFields from '../../fields/RenderFields.svelte';
+  import { getConfigContext } from '../../../context/config.svelte.js';
+  import { setDocumentFormContext } from '../../../context/documentForm.svelte.js';
+  import { getLivePanelContext } from '../../../context/livePanel.svelte.js';
+  import type { GenericDoc } from '../../../../types';
+  import { onMount } from 'svelte';
+  import ScrollArea from '../../ui/scroll-area/scroll-area.svelte';
+  import './live-edit-panel.css';
+
+  type Props = {
+    doc: GenericDoc;
+    onDataChange: any;
+    afterSuccess: (savedDoc: any) => void;
+    onFormReady: (form: any) => void;
+  };
+
+  const { doc, onDataChange, afterSuccess, onFormReady }: Props = $props();
+
+  // fieldPath comes from the centralized panel context — reactive when user navigates the stack
+  const livePanelCtx = getLivePanelContext();
+  const fieldPath = $derived(livePanelCtx.activePanel?.fieldPath ?? '');
+
+  const { getDocumentConfig } = getConfigContext();
+  // svelte-ignore state_referenced_locally
+  const docConfig = getDocumentConfig({ prototype: doc._prototype, slug: doc._type });
+
+  // Form context is created once and kept alive — switching fieldPath only changes what's rendered
+  // svelte-ignore state_referenced_locally
+  const form = setDocumentFormContext({
+    initial: doc,
+    config: docConfig,
+    readOnly: false,
+    onDataChange,
+    afterSuccess,
+    key: `${doc._type}_0`
+  });
+
+  // Register form with parent after mount so parent can drive save/revert
+  onMount(() => onFormReady(form));
+
+  // Reactive: re-derives when fieldPath changes (no remount needed)
+  const { fields, path } = $derived(getFieldBuildersAtPath(fieldPath, docConfig.fields));
+</script>
+
+<form class="rz-live-edit-panel" use:form.enhance enctype="multipart/form-data" method="post">
+  <ScrollArea class="rz-live-edit-panel__fields">
+    {#key doc.id + (doc.versionId || '') + (doc.locale || '')}
+      <RenderFields {fields} {path} {form} />
+    {/key}
+  </ScrollArea>
+</form>

package/dist/panel/components/sections/live/LiveEditPanel.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { GenericDoc } from '../../../../types';
+import './live-edit-panel.css';
+type Props = {
+    doc: GenericDoc;
+    onDataChange: any;
+    afterSuccess: (savedDoc: any) => void;
+    onFormReady: (form: any) => void;
+};
+declare const LiveEditPanel: import("svelte").Component<Props, {}, "">;
+type LiveEditPanel = ReturnType<typeof LiveEditPanel>;
+export default LiveEditPanel;

package/dist/panel/components/sections/live/LiveFloatingUI.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { t__ } from '../../../../core/i18n/index.js';
+  import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
+  import type { ActivePanel } from '../../../context/livePanel.svelte';
+  import { ChevronLeft, Form, Laptop, Save, Smartphone, X } from '@lucide/svelte';
+  import Button from '../../ui/button/button.svelte';
+  import SpinLoader from '../../ui/spin-loader/SpinLoader.svelte';
+
+  type Props = {
+    forms: Record<string, DocumentFormContext>;
+    onClose: () => void;
+    toggleRootPanel: (() => void) | null;
+    activePanel: ActivePanel | null;
+    currentDevice: 'desktop' | 'mobile';
+  };
+  let {
+    forms,
+    onClose,
+    toggleRootPanel,
+    activePanel,
+    currentDevice = $bindable('desktop')
+  }: Props = $props();
+
+  const formsWithChanges = $derived(Object.values(forms).filter((form) => form.canSubmit));
+  const isProcessing = $derived(Object.values(forms).some((form) => form.processing));
+
+  function saveAll() {
+    for (const form of formsWithChanges) {
+      try {
+        form.element.requestSubmit();
+      } catch {
+        // form element not yet mounted — skip
+      }
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+      event.preventDefault();
+      saveAll();
+    }
+  }
+</script>
+
+<div class="rz-live-floating-ui">
+  <Button icon={activePanel ? ChevronLeft : X} onclick={onClose} variant="secondary" size="icon" />
+
+  {#if toggleRootPanel}
+    <Button
+      onclick={toggleRootPanel}
+      variant={activePanel && activePanel.fieldPath === '' ? 'secondary' : 'ghost'}
+      size="icon"
+      icon={Form}
+    />
+  {/if}
+
+  <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}
+  />
+
+  <Button
+    onclick={saveAll}
+    disabled={formsWithChanges.length === 0}
+    class="rz-live-floating-ui__save"
+  >
+    {#if isProcessing}
+      <SpinLoader />
+    {:else}
+      <Save size="13" />
+    {/if}
+    {t__('common.save')}
+  </Button>
+</div>
+
+<svelte:window onkeydown={handleKeyDown} />
+
+<style>
+  .rz-live-floating-ui {
+    position: fixed;
+    bottom: var(--rz-size-2);
+    left: var(--rz-size-2);
+    margin-left: var(--rz-size-2);
+    margin-right: var(--rz-size-2);
+    height: var(--rz-size-14);
+    background-color: hsl(var(--rz-color-bg));
+    padding: var(--rz-size-2);
+    border-radius: var(--rz-radius-md);
+    z-index: 1000;
+    display: flex;
+    gap: var(--rz-size-2);
+    box-shadow: var(--rz-shadow-xl);
+    border: var(--rz-border);
+    :global(.rz-live-floating-ui__save) {
+      flex: 1;
+    }
+  }
+</style>

package/dist/panel/components/sections/live/LiveFloatingUI.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
+import type { ActivePanel } from '../../../context/livePanel.svelte';
+type Props = {
+    forms: Record<string, DocumentFormContext>;
+    onClose: () => void;
+    toggleRootPanel: (() => void) | null;
+    activePanel: ActivePanel | null;
+    currentDevice: 'desktop' | 'mobile';
+};
+declare const LiveFloatingUi: import("svelte").Component<Props, {}, "currentDevice">;
+type LiveFloatingUi = ReturnType<typeof LiveFloatingUi>;
+export default LiveFloatingUi;

package/dist/panel/components/sections/live/Provider.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
+  import { beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
   import { setLiveContext } from '../../../context/live.svelte.js';
-  import { beforeNavigate } from '$app/navigation';
-  import { onMount } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
+
+  const { children }: { children: Snippet } = $props();
 
   let live = setLiveContext(page.url.href);
   beforeNavigate(live.beforeNavigate);
 
-  const { children } = $props();
-
   onMount(() => {
     window.addEventListener('message', live.onMessage);
   });

package/dist/panel/components/sections/live/Provider.svelte.d.ts

@@ -1,5 +1,7 @@
-declare const Provider: import("svelte").Component<{
-    children: any;
-}, {}, "">;
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const Provider: import("svelte").Component<$$ComponentProps, {}, "">;
 type Provider = ReturnType<typeof Provider>;
 export default Provider;

package/dist/panel/components/sections/live/live-edit-panel.css

@@ -0,0 +1,12 @@
+.rz-live-edit-panel {
+  --rz-page-gutter: var(--rz-size-4);
+  --rz-tabs-list-top: 0;
+  height: 100vh;
+  background-color: hsl(var(--rz-color-bg));
+}
+.rz-live-edit-panel__fields {
+  height: 100vh;
+  padding: var(--rz-size-4);
+  padding-bottom: var(--rz-size-20);
+  border-right: var(--rz-border);
+}

package/dist/panel/components/ui/breadcrumb/BreadCrumb.svelte

@@ -25,13 +25,7 @@
   {/each}
 </div>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-aria {
+<style>.rz-aria {
     display: flex;
     align-items: center;
     gap: var(--rz-size-3);
@@ -45,8 +39,7 @@
       opacity: 1;
     }
   }
-
-.rz-aria__last {
+  .rz-aria__last {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;