rimecms 0.27.5 → 0.28.0

package/dist/panel/components/sections/collection/list/header/Header.svelte

@@ -54,13 +54,7 @@
   {@render sortableColumnHeader({ name: 'updatedAt' })}
 </div>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-list-header {
+<style>.rz-list-header {
     display: grid;
     height: var(--rz-size-14);
     /* width: calc(100% - var(--rz-size-10)); */
@@ -70,14 +64,14 @@
     font-size: var(--rz-text-sm);
   }
 
-.rz-list-header__column {
+  .rz-list-header__column {
     color: hsl(var(--rz-ground-2) / 1);
     display: flex;
     align-items: center;
     gap: var(--rz-size-1);
   }
 
-.rz-list-header__sort-button {
+  .rz-list-header__sort-button {
     color: hsl(var(--rz-ground-2) / 1);
     display: flex;
     align-items: center;

package/dist/panel/components/sections/collection/list/row/Row.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import type { BuiltCollection } from '../../../../../../core/config/types.js';
   import type { GenericDoc } from '../../../../../../core/types/doc.js';
   import Checkbox from '../../../../ui/checkbox/checkbox.svelte';
-  import { getCollectionContext } from '../../../../../context/collection.svelte.js';
   import { getLocaleContext } from '../../../../../context/locale.svelte';
   import { getValueAtPath } from '../../../../../../util/object';
   import StatusDot from '../../StatusDot.svelte';
@@ -10,57 +10,72 @@
   type Props = {
     checked: boolean;
     doc: GenericDoc;
+    isSelectMode?: boolean;
+    config: BuiltCollection;
+    toggleSelectOf?: (id: string) => void;
+    columns?: Array<{ path: string; cell?: any }>;
+    draggable?: 'true';
   };
 
-  const { checked, doc }: Props = $props();
+  const { checked, doc, config, isSelectMode, toggleSelectOf, columns, draggable }: Props =
+    $props();
 
-  const collection = getCollectionContext('list');
   const locale = getLocaleContext();
 
   let gridTemplateColumn = $state('grid-template-columns: 2fr repeat(1, minmax(0, 1fr));');
 
   $effect(() => {
-    const columnLength = collection.columns.length + 2;
+    const columnLength = (columns?.length ?? 0) + 2;
     gridTemplateColumn = `grid-template-columns: 2fr repeat(${columnLength - 1}, minmax(0, 1fr));`;
   });
 
   const formattedDate = $derived(
     doc.updatedAt ? locale.dateFormat(doc.updatedAt, { short: true }) : ''
   );
+
+  function handleDragStart(e: DragEvent) {
+    e.dataTransfer?.setData('text/plain', doc.id);
+  }
 </script>
 
-<div style={gridTemplateColumn} class="rz-list-row">
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  style={gridTemplateColumn}
+  class="rz-list-row"
+  draggable={draggable || null}
+  ondragstart={draggable ? handleDragStart : null}
+>
   <div class="rz-list-row__main">
-    {#if collection.selectMode}
+    {#if isSelectMode}
       <!-- On select mode show the checkbox  -->
       <Checkbox
         id="checkbox-{doc.id}"
         class="rz-list-row__checkbox"
         {checked}
-        onCheckedChange={() => collection.toggleSelectOf(doc.id)}
+        onCheckedChange={() => toggleSelectOf?.(doc.id)}
       />
       {#if doc._thumbnail}
         <UploadThumbCell url={doc._thumbnail} mimeType={doc.mimeType} />
       {/if}
       <label for="checkbox-{doc.id}" class="rz-list-row__title">{doc.title || '[untitled]'}</label>
     {:else}
-      <a class="rz-list-row__link" href="/panel/{collection.config.kebab}/{doc.id}">
+      <a class="rz-list-row__link" href="/panel/{config.kebab}/{doc.id}">
         {#if doc._thumbnail}
           <UploadThumbCell url={doc._thumbnail} mimeType={doc.mimeType} />
         {:else}
-          {@const Icon = collection.config.icon}
+          {@const Icon = config.icon}
           <div class="rz-list-row__icon"><Icon size="13" /></div>
         {/if}
 
         <span class="rz-list-row__title">{doc.title || '[untitled]'}</span>
-        {#if collection.hasDraft}
+        {#if config.versions && config.versions.draft}
           <StatusDot --rz-dot-size="0.28rem" status={doc.status} />
         {/if}
       </a>
     {/if}
   </div>
 
-  {#each collection.columns as column, index (index)}
+  {#each columns as column, index (index)}
     <div class="rz-list-row__cell">
       {#if column.cell}
         {@const ColumnTableCell = column.cell}
@@ -76,38 +91,38 @@
   </div>
 </div>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
+<style>.rz-list-row {
+    --rz-upload-preview-cell-fit: cover;
 
-.rz-list-row {
     display: grid;
     height: var(--rz-row-height);
     align-items: center;
     border: var(--rz-border);
     border-radius: var(--rz-radius-md);
     background-color: hsl(var(--rz-row-bg));
+
     .rz-list-row__icon {
-      height: var(--rz-size-10);
-      width: var(--rz-size-10);
-      border-radius: var(--rz-radius-md);
+      height: var(--rz-size-9);
+      width: var(--rz-size-9);
+      border-radius: var(--rz-radius-sm);
       display: flex;
       flex-shrink: 0;
       flex-grow: 0;
       align-items: center;
       justify-content: center;
-      background-color: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-1)));
+      background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-1)));
     }
+
     :global {
       .rz-list-row__checkbox {
         margin-left: var(--rz-size-2);
+        background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-0)));
+        border: var(--rz-border);
       }
     }
   }
 
-.rz-list-row__main {
+  .rz-list-row__main {
     display: flex;
     align-items: center;
     gap: var(--rz-size-3);
@@ -115,25 +130,24 @@
     padding-right: var(--rz-size-5);
   }
 
-.rz-list-row__link {
+  .rz-list-row__link {
     display: flex;
     align-items: center;
     gap: var(--rz-size-4);
   }
 
-.rz-list-row__title {
+  .rz-list-row__title {
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     overflow: hidden;
     word-break: break-all;
   }
-
-label.rz-list-row__title {
+  label.rz-list-row__title {
     cursor: pointer;
   }
 
-.rz-list-row__cell {
+  .rz-list-row__cell {
     color: hsl(var(--rz-foreground) / 0.6);
   }
 </style>

package/dist/panel/components/sections/collection/list/row/Row.svelte.d.ts

@@ -1,7 +1,16 @@
+import type { BuiltCollection } from '../../../../../../core/config/types.js';
 import type { GenericDoc } from '../../../../../../core/types/doc.js';
 type Props = {
     checked: boolean;
     doc: GenericDoc;
+    isSelectMode?: boolean;
+    config: BuiltCollection;
+    toggleSelectOf?: (id: string) => void;
+    columns?: Array<{
+        path: string;
+        cell?: any;
+    }>;
+    draggable?: 'true';
 };
 declare const Row: import("svelte").Component<Props, {}, "">;
 type Row = ReturnType<typeof Row>;

package/dist/panel/components/sections/collection/tree/CollectionTree.svelte

@@ -110,7 +110,7 @@
 
 <style>
   .rz-collection-sortable {
-    --gap: var(--rz-size-4);
+    --gap: var(--rz-size-2);
     --h: var(--rz-row-height);
     --half-h: calc(var(--rz-row-height) / 2);
 

package/dist/panel/components/sections/collection/upload-thumb-cell/UploadThumbCell.svelte

@@ -15,9 +15,15 @@
     if (url) return getMimeTypeFromExtension(url.split('.').pop() || '') || '';
     return '';
   });
+
+  const mimeClass = $derived.by(() => {
+    if (!mimeTypeResolved) return '';
+    const [type, subType] = mimeTypeResolved.split('/');
+    return `rz-upload-preview-cell--${type}-${subType}`;
+  });
 </script>
 
-<div class="rz-upload-preview-cell {className}">
+<div class="rz-upload-preview-cell {mimeClass} {className}">
   <div>
     {#if url && mimeTypeResolved.includes('image')}
       <img class="rz-upload-preview-cell__image" src={url} alt="preview" />
@@ -62,6 +68,10 @@
     }
   }
 
+  .rz-upload-preview-cell--image-jpeg {
+    --rz-upload-preview-cell-fit: cover;
+  }
+
   .rz-upload-preview-cell__image {
     height: 100%;
     width: 100%;

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

@@ -75,26 +75,18 @@
   </Dialog.Content>
 </Dialog.Root>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-radio__option {
+<style>.rz-radio__option {
     display: flex;
     gap: var(--rz-size-3);
     padding: var(--rz-size-3);
     border: var(--rz-border);
   }
-
-:global {
+  :global {
     .rz-dialog-footer button {
       flex: 1;
     }
   }
-
-p {
+  p {
     font-variation-settings: 'wght' 400;
     font-weight: 400;
   }

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

@@ -42,7 +42,6 @@
     inset: 0;
     z-index: 100;
     background: hsl(var(--rz-gray-11) / 0.8);
-    -webkit-backdrop-filter: blur(2px);
-            backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
   }
 </style>

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,19 +201,15 @@
   </Dialog.Root>
 </form>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-document {
+<style>.rz-document {
     container: rz-document / inline-size;
     min-height: 100vh;
     position: relative;
+    background-image: var(--thumbnail);
+    background-size: cover;
   }
 
-.rz-document__fields {
+  .rz-document__fields {
     display: grid;
     gap: var(--rz-size-4);
     min-height: calc(100vh - var(--rz-size-14));
@@ -233,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/Versions.svelte

@@ -45,7 +45,7 @@
     </div>
 
     <div class="rz-document-versions__list">
-      {#each versions as version}
+      {#each versions as version (version.id)}
         <a
           class="rz-document-versions__list-item"
           class:rz-document-versions__list--active={doc.versionId === version.id}
@@ -97,7 +97,6 @@
     padding: var(--rz-size-5) var(--rz-size-5) 0 var(--rz-size-5);
     margin-left: calc(-1 * var(--rz-size-2));
     align-items: center;
-    /* justify-content: space-between; */
   }
   h2 {
     font-variation-settings: 'wght' 700;

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>