rimecms 0.27.6 → 0.28.1

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;

package/dist/panel/components/ui/button/button.svelte

@@ -51,13 +51,7 @@
   </button>
 {/if}
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-:root {
+<style>:root {
     --rz-button-tl-radius: var(--rz-radius-md);
     --rz-button-tr-radius: var(--rz-radius-md);
     --rz-button-br-radius: var(--rz-radius-md);
@@ -111,7 +105,7 @@
     --rz-button-text-fg-disabled: hsl(var(--rz-color-fg) / 0.4);
   }
 
-.rz-button {
+  .rz-button {
     flex-shrink: var(--rz-flex-shrink, unset);
     display: inline-flex;
     align-items: center;
@@ -128,7 +122,7 @@
     fill: currentColor;
   }
 
-.rz-button:focus-visible {
+  .rz-button:focus-visible {
     /* --rz-ring-offset: 1px; */
     outline: none;
     box-shadow:
@@ -136,73 +130,68 @@
     0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
   }
 
-.rz-button:disabled,
+  .rz-button:disabled,
   .rz-button[disabled='true'] {
     opacity: 0.5;
     cursor: no-drop !important;
   }
 
-/**************************************/
-
-/* Sizes */
+  /**************************************/
+  /* Sizes */
+  /**************************************/
 
-/**************************************/
-
-.rz-button--size-default {
+  .rz-button--size-default {
     font-size: var(--rz-text-md);
     height: var(--rz-size-9);
     padding: var(--rz-size-2) var(--rz-size-4);
   }
 
-.rz-button--size-xs {
+  .rz-button--size-xs {
     height: var(--rz-size-6);
     padding: var(--rz-size-1) var(--rz-size-2);
     font-size: var(--rz-text-2xs);
     border-radius: var(--rz-radius-md);
   }
 
-.rz-button--size-sm {
+  .rz-button--size-sm {
     font-size: var(--rz-text-md);
     height: var(--rz-size-8);
     padding: var(--rz-size-2) var(--rz-size-3);
     border-radius: var(--rz-radius-md);
   }
 
-.rz-button--size-lg {
+  .rz-button--size-lg {
     font-size: var(--rz-text-md);
     height: var(--rz-size-12);
     padding: var(--rz-size-2) var(--rz-size-8);
     border-radius: var(--rz-radius-md);
   }
 
-.rz-button--size-xl {
+  .rz-button--size-xl {
     height: var(--rz-size-14);
     font-size: var(--rz-text-md);
     padding: var(--rz-size-2) var(--rz-size-8);
     border-radius: var(--rz-radius-md);
   }
 
-.rz-button--size-icon {
+  .rz-button--size-icon {
     border-radius: var(--rz-radius-lg);
     height: var(--rz-size-9);
     width: var(--rz-size-9);
     padding: var(--rz-size-1);
   }
 
-.rz-button--size-icon-sm {
+  .rz-button--size-icon-sm {
     height: var(--rz-size-8);
     width: var(--rz-size-8);
   }
 
-/**************************************/
-
-/* Variants */
-
-/**************************************/
-
-/** Default */
+  /**************************************/
+  /* Variants */
+  /**************************************/
 
-.rz-button--default {
+  /** Default */
+  .rz-button--default {
     background-color: var(--rz-button-default-bg);
     color: var(--rz-button-default-fg);
     &:hover:not(:disabled) {
@@ -213,9 +202,8 @@
     }
   }
 
-/** Success */
-
-.rz-button--success {
+  /** Success */
+  .rz-button--success {
     background-color: var(--rz-button-success-bg);
     color: var(--rz-button-success-fg);
     &:hover {
@@ -226,9 +214,8 @@
     }
   }
 
-/** Outline */
-
-.rz-button--outline {
+  /** Outline */
+  .rz-button--outline {
     border-style: solid;
     border-color: var(--rz-button-outline-border);
 
@@ -246,9 +233,8 @@
     }
   }
 
-/** Ghost */
-
-.rz-button--ghost {
+  /** Ghost */
+  .rz-button--ghost {
     background-color: var(--rz-button-ghost-bg);
     color: var(--rz-button-ghost-fg);
 
@@ -257,9 +243,8 @@
     }
   }
 
-/** Secondary */
-
-.rz-button--secondary {
+  /** Secondary */
+  .rz-button--secondary {
     background-color: var(--rz-button-secondary-bg);
     color: var(--rz-button-secondary-fg);
 
@@ -268,9 +253,8 @@
     }
   }
 
-/** Link */
-
-.rz-button--link {
+  /** Link */
+  .rz-button--link {
     background: var(--rz-button-link-bg);
     color: var(--rz-button-link-fg);
     text-underline-offset: 4px;
@@ -281,9 +265,8 @@
     }
   }
 
-/** Text */
-
-.rz-button--text {
+  /** Text */
+  .rz-button--text {
     padding-left: 0;
     padding-right: 0;
     background-color: var(--rz-button-text-bg);
@@ -301,13 +284,11 @@
     }
   }
 
-/**************************************/
-
-/* With Icon */
-
-/**************************************/
+  /**************************************/
+  /* With Icon */
+  /**************************************/
 
-.rz-button__icon,
+  .rz-button__icon,
   .rz-button--text__icon {
     display: grid;
     place-content: center;

package/dist/panel/components/ui/calendar/calendar.css

@@ -7,7 +7,9 @@
 .rz-date__popover-content {
   border-radius: var(--rz-radius-md);
 }
+
 /**************************************/
+
 /* Cell
 /**************************************/
 
@@ -31,6 +33,7 @@
 }
 
 /**************************************/
+
 /* Day
 /**************************************/
 
@@ -101,6 +104,7 @@
 }
 
 /**************************************/
+
 /* Grid
 /**************************************/
 
@@ -110,6 +114,7 @@
 }
 
 /**************************************/
+
 /* Grid-row
 /**************************************/
 
@@ -121,6 +126,7 @@
 }
 
 /**************************************/
+
 /* Head
 /**************************************/
 
@@ -134,6 +140,7 @@
 }
 
 /**************************************/
+
 /* Head-cell
 /**************************************/
 
@@ -146,6 +153,7 @@
 }
 
 /**************************************/
+
 /* Heading
 /**************************************/
 
@@ -156,10 +164,12 @@
 }
 
 /**************************************/
+
 /* Next / Prev
 /**************************************/
 
 /** Next */
+
 .rz-calendar-next-button {
   height: var(--rz-size-7);
   width: var(--rz-size-7);
@@ -174,6 +184,7 @@
 }
 
 /** Prev */
+
 .rz-calendar-prev-button {
   height: var(--rz-size-7);
   width: var(--rz-size-7);

package/dist/panel/components/ui/card-document/card-document.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { GenericDoc } from '../../../../types';
+  import StatusDot from '../../sections/collection/StatusDot.svelte';
   import UploadThumbCell from '../../sections/collection/upload-thumb-cell/UploadThumbCell.svelte';
 
   type Props = { doc: GenericDoc };
@@ -15,7 +16,7 @@
 
 <div class="rz-document-card">
   <div class="rz-document-card__preview">
-    <UploadThumbCell mimeType={doc.mimeType} url={thumbnailUrl} />
+    <UploadThumbCell mimeType={doc.mimeType} url={thumbnailUrl || doc._thumbnail} />
   </div>
 
   <div class="rz-document-card__body">
@@ -23,22 +24,27 @@
       {doc.title}
     </p>
 
-    <div class="rz-document-card__metadata">
-      {#each ['filesize', 'mimeType'] as key, index (index)}
-        <p>{doc[key]}</p>
-      {/each}
-    </div>
+    {#if doc.filesize || doc.mimeType}
+      <div class="rz-document-card__metadata">
+        {#each ['filesize', 'mimeType'] as key, index (index)}
+          <p>{doc[key]}</p>
+        {/each}
+      </div>
+    {/if}
+
+    {#if doc.status}
+      <StatusDot status={doc.status} />
+    {/if}
   </div>
 </div>
 
-<style>
-  /** */
-  :root {
-    --rz-card-hover-bg: light-dark(hsl(var(--rz-gray-18)), hsl(var(--rz-gray-4)));
-    --rz-card-bg: light-dark(hsl(var(--rz-gray-17)), hsl(var(--rz-gray-3)));
+<style>:root {
+    --rz-card-hover-bg: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-4)));
+    --rz-card-bg: light-dark(hsl(var(--rz-gray-18)), hsl(var(--rz-gray-3)));
   }
 
   .rz-document-card {
+    --rz-dot-size: var(--rz-size-2);
     border: var(--rz-border);
     background-color: var(--rz-card-bg);
     border-radius: var(--rz-radius-lg);
@@ -72,9 +78,10 @@
     overflow: hidden;
     word-break: break-all;
     text-align: left;
-    font-size: var(--rz-text-xs);
-    font-variation-settings: 'wght' 700;
-    font-weight: 700;
+
+    font-variation-settings: 'wght' 600;
+
+    font-weight: 600;
   }
 
   .rz-document-card__body {

package/dist/panel/components/ui/card-resource/card-resource.svelte

@@ -53,19 +53,13 @@
   </button>
 </div>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-:root {
+<style>:root {
     --rz-ressource-card-bg: light-dark(hsl(var(--rz-gray-18)), hsl(var(--rz-gray-4)));
     --rz-ressource-card-thumbnail-bg: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-2)));
     --rz-border-radius: var(--rz-radius-md);
   }
 
-.rz-card-resource {
+  .rz-card-resource {
     --padding: var(--rz-card-padding, var(--rz-size-2));
     --rz-size: var(--rz-thumbnail-size, var(--rz-size-20));
     background-color: var(--rz-ressource-card-bg);
@@ -78,7 +72,7 @@
     max-width: 400px;
   }
 
-.rz-card-resource__thumbnail {
+  .rz-card-resource__thumbnail {
     width: var(--rz-size);
     height: var(--rz-size);
     flex-shrink: 0;
@@ -90,19 +84,19 @@
     border-radius: var(--rz-radius-md);
   }
 
-.rz-card-resource__image {
+  .rz-card-resource__image {
     height: 100%;
     width: 100%;
     -o-object-fit: cover;
        object-fit: cover;
   }
 
-.rz-card-resource__info {
+  .rz-card-resource__info {
     margin-top: var(--rz-size-3);
     padding-right: 2rem;
   }
 
-.rz-card-resource__title {
+  .rz-card-resource__title {
     font-variation-settings: 'wght' 600;
     font-weight: 600;
     display: flex;
@@ -116,11 +110,11 @@
     }
   }
 
-.rz-card-resource__info-text {
+  .rz-card-resource__info-text {
     font-size: var(--rz-text-sm);
   }
 
-.rz-card-resource__remove {
+  .rz-card-resource__remove {
     position: absolute;
     color: hsl(var(--rz-color-fg));
     right: var(--rz-size-2);

package/dist/panel/components/ui/checkbox/checkbox.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
   import { Check } from '@lucide/svelte';
+  import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
   import './checkbox.css';
 
   let {

package/dist/panel/components/ui/command/command-group.css

@@ -15,6 +15,7 @@
   font-variation-settings: 'wght' 500;
   font-weight: 500;
 }
+
 .rz-command-group__heading {
   color: hsl(var(--rz-color-fg) / 0.7);
   padding-left: var(--rz-size-2);

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -35,13 +35,7 @@
   {/snippet}
 </DropdownMenuPrimitive.CheckboxItem>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-:global {
+<style>:global {
     .rz-dropdown-checkbox {
       position: relative;
       display: flex;