rimecms 0.33.0 → 1.0.0

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

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import type { WithUpload } from '../../../../../core/prototype/collection/upload/util/config';
-  import type { BuiltCollection } from '../../../../../core/config/types';
+  import type { BuiltCollection } from '../../../../../core/config/types.js';
+  import { t__ } from '../../../../../core/i18n/index.js';
+  import type { WithUpload } from '../../../../../core/prototype/collection/upload/util/config.js';
   import Button from '../../../ui/button/button.svelte';
   import { type DocumentFormContext } from '../../../../context/documentForm.svelte.js';
   import { mimeTypeToIcon } from '../../../../util/upload.js';
   import * as util from '../../../../../util/file.js';
-  import { capitalize } from '../../../../../util/string.js';
+  import { fileSizeLabel } from '../../../../util/upload-file.js';
   import { toast } from 'svelte-sonner';
   import DropZone from './drop-zone/DropZone.svelte';
 
@@ -35,6 +36,13 @@
     form.setValue(`_thumbnail`, null);
   };
 
+  /** The file's facts, each with its name. */
+  const facts = $derived([
+    { key: 'filename', label: t__('fields.file_name') },
+    { key: 'filesize', label: t__('fields.file_size') },
+    { key: 'mimeType', label: t__('fields.file_type') }
+  ]);
+
   const onGeneratingPreviewStart = () => (form.isDisabled = true);
   const onGeneratingPreviewEnd = () => (form.isDisabled = false);
 
@@ -65,6 +73,7 @@
   });
 </script>
 
+<!-- The file: a preview beside its name, size and type; before one is picked, a drop zone. -->
 <div class="rz-doc-upload-header">
   {#if form.values.mimeType}
     <div class="rz-doc-upload-header__file">
@@ -78,23 +87,29 @@
         {:else}
           {@const FileIcon = mimeTypeToIcon(form.values.mimeType)}
           <div class="rz-doc-upload-header__prewiew-file">
-            <FileIcon size="40" />
+            <FileIcon size="32" />
             <span>{form.values.mimeType}</span>
           </div>
         {/if}
       </div>
       <div class="rz-doc-upload-header__info">
-        {#each ['filename', 'filesize', 'mimeType'] as key, index (index)}
-          <h4>{capitalize(key)}</h4>
-          {#if !create && key === 'filename'}
-            <a target="_blank" rel="external" href="/medias/{form.values[key]}">
-              {form.values[key]}
-            </a>
-          {:else}
-            <p>{form.values[key]}</p>
-          {/if}
+        {#each facts as { key, label } (key)}
+          <div class="rz-doc-upload-header__fact">
+            <span class="rz-doc-upload-header__label">{label}</span>
+            {#if !create && key === 'filename'}
+              <a target="_blank" rel="external" href="/medias/{form.values[key]}">
+                {form.values[key]}
+              </a>
+            {:else if key === 'filesize'}
+              <p>{fileSizeLabel(form.values[key])}</p>
+            {:else}
+              <p>{form.values[key]}</p>
+            {/if}
+          </div>
         {/each}
-        <Button onclick={deleteFile} size="sm" variant="outline">Delete</Button>
+        <div class="rz-doc-upload-header__actions">
+          <Button onclick={deleteFile} size="sm" variant="secondary">{t__('fields.remove')}</Button>
+        </div>
       </div>
     </div>
   {:else}
@@ -102,51 +117,63 @@
   {/if}
 </div>
 
-<style>.rz-doc-upload-header {
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+.rz-doc-upload-header {
     container: inline-size;
     padding: 0 var(--rz-fields-padding);
   }
 
+  /* A card: the preview on a well, then the facts; side by side when there is room. */
   .rz-doc-upload-header__file {
-    min-height: 250px;
-    border: var(--rz-border);
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
     overflow: hidden;
-    border-radius: var(--radius-md);
+    border-radius: var(--rz-radius-xl);
   }
 
   .rz-doc-upload-header__preview {
-    width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    overflow: hidden;
-    width: clamp(var(--rz-size-60), 40vw, 80%);
+    width: 100%;
+    min-height: var(--rz-size-48);
     max-height: 400px;
-    background-color: light-dark(hsl(var(--rz-gray-12)), hsl(var(--rz-gray-3)));
-    border-top-right-radius: var(--rz-radius-md);
-    border-top-left-radius: var(--rz-radius-md);
+    overflow: hidden;
+    background-color: var(--rz-bg-well);
   }
 
-  @container (min-width:28rem) {
+  @container (min-width: 28rem) {
     .rz-doc-upload-header__file {
       display: flex;
     }
     .rz-doc-upload-header__preview {
-      border-top-right-radius: var(--rz-radius-none);
-      border-top-left-radius: var(--rz-radius-none);
-      border-top-left-radius: var(--rz-radius-md);
-      border-bottom-left-radius: var(--rz-radius-md);
-    }
-    .rz-doc-upload-header__info {
-      padding-inline: var(--rz-size-8);
+      width: clamp(var(--rz-size-60), 50%, var(--rz-size-80));
+      flex-shrink: 0;
     }
   }
 
+  /* A checkerboard under the image, so a transparent one shows its edges. */
   .rz-doc-upload-header__prewiew-grid {
     width: 100%;
     height: 100%;
-    --dark: hsl(var(--rz-gray-11) / 1);
-    --light: hsl(var(--rz-gray-14) / 1);
+    --dark: var(--rz-bg-active);
+    --light: var(--rz-bg-well);
     --size: 16px;
     --half-size: calc(var(--size) / 2);
     background-size: var(--size) var(--size);
@@ -197,30 +224,62 @@
        object-fit: contain;
   }
 
-  .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 {
-    opacity: 0.4;
-    margin-bottom: var(--rz-size-1);
-    font-size: var(--rz-text-xs);
-  }
-  .rz-doc-upload-header__info a {
-    margin-bottom: var(--rz-size-3);
-    display: block;
-    text-decoration: underline;
-  }
-  .rz-doc-upload-header__info p {
-    margin-bottom: var(--rz-size-3);
-  }
   .rz-doc-upload-header__prewiew-file {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: var(--rz-size-2);
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+  }
+
+  /* The facts: a quiet list, the names subtle, the values plain, hairlines between. */
+  .rz-doc-upload-header__info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    padding: var(--rz-size-1) var(--rz-size-3-5) var(--rz-size-3-5);
+  }
+
+  .rz-doc-upload-header__fact {
+    display: grid;
+    gap: var(--rz-size-0-5);
+    padding-block: var(--rz-size-2-5);
+  }
+
+  .rz-doc-upload-header__fact + .rz-doc-upload-header__fact {
+    box-shadow: inset 0 1px 0 var(--rz-border);
+  }
+
+  .rz-doc-upload-header__label {
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+  }
+
+  .rz-doc-upload-header__fact :is(p, a) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .rz-doc-upload-header__fact a {
+    color: var(--rz-accent-text);
+    border-radius: var(--rz-radius-sm);
+
+    &:hover {
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
+  }
+
+  .rz-doc-upload-header__actions {
+    margin-top: auto;
+    padding-top: var(--rz-size-3);
   }
 </style>

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

@@ -1,5 +1,5 @@
-import type { WithUpload } from '../../../../../core/prototype/collection/upload/util/config';
-import type { BuiltCollection } from '../../../../../core/config/types';
+import type { BuiltCollection } from '../../../../../core/config/types.js';
+import type { WithUpload } from '../../../../../core/prototype/collection/upload/util/config.js';
 import { type DocumentFormContext } from '../../../../context/documentForm.svelte.js';
 type Props = {
     form: DocumentFormContext;

package/dist/panel/components/sections/document/upload-header/drop-zone/DropZone.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { t__ } from '../../../../../../core/i18n/index.js';
   import SpinLoader from '../../../../ui/spin-loader/SpinLoader.svelte';
+  import { acceptLabel } from '../../../../../util/upload-file.js';
   import type { BuiltCollection } from '../../../../../../types.js';
+  import { Upload } from '@lucide/svelte';
   import { toast } from 'svelte-sonner';
 
   import type { WithUpload } from '../../../../../../core/prototype/collection/upload/util/config';
@@ -32,9 +34,11 @@
     event.preventDefault();
   };
 
+  /** Leaving the zone, not one of its children. */
   const handleDragLeave = (event: DragEvent) => {
-    dragOver = false;
     event.preventDefault();
+    const zone = event.currentTarget as HTMLElement;
+    if (!zone.contains(event.relatedTarget as Node | null)) dragOver = false;
   };
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = () => {
@@ -75,76 +79,105 @@
 
     reader.readAsDataURL(value);
   };
-
-  const dragOverClassModifier = $derived(dragOver ? 'rz-doc-upload-dropzone--dragover' : '');
 </script>
 
+<!-- A dashed well: an icon, "Drop your file here or browse", the accepted types. -->
 <label
   for="file"
-  class="rz-doc-upload-dropzone {dragOverClassModifier}"
+  class="rz-doc-upload-dropzone"
+  class:rz-doc-upload-dropzone--dragover={dragOver}
   ondragover={handleDragOver}
   ondragleave={handleDragLeave}
   ondrop={handleDrop}
 >
   {#if processingFile}
-    <div class="rz-doc-upload-dropzone__processing">
-      <SpinLoader />
-      <p>{t__('common.generatingPreview')}</p>
-    </div>
+    <SpinLoader />
+    <span>{t__('common.generatingPreview')}</span>
   {:else}
-    <p>{t__('common.drop_file')} {t__('common.or')} <strong>{t__('common.browse')}</strong></p>
-    {#if accept}
-      <p class="rz-doc-upload-dropzone__accept">{accept.join(', ')} accepted</p>
+    <Upload size={18} />
+    <span>
+      {t__('common.drop_file')}
+      {t__('common.or')}
+      <span class="rz-doc-upload-dropzone__browse">{t__('common.browse')}</span>
+    </span>
+    {#if accept?.length}
+      <small>{acceptLabel(accept, t__('common.or'))}</small>
     {/if}
   {/if}
 
   <input
+    class="rz-sr-only"
     disabled={processingFile}
     bind:this={input}
     onchange={handleChange}
     id="file"
     name="file"
     type="file"
-    placeholder="upload"
   />
 </label>
 
-<style>
-  .rz-doc-upload-dropzone {
-    display: grid;
-    cursor: pointer;
-    height: var(--rz-size-32);
-    place-content: center;
-    border-radius: var(--rz-radius-lg);
-    border: 2px dashed light-dark(hsl(var(--rz-gray-12)), hsl(var(--rz-gray-6)));
-    background: transparent;
-    text-align: center;
-    font-size: var(--rz-text-sm);
-  }
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
-  .rz-doc-upload-dropzone__processing {
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+.rz-doc-upload-dropzone {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: var(--rz-size-2);
-  }
+    justify-content: center;
+    gap: var(--rz-size-0-5);
+    min-height: var(--rz-size-40);
+    padding: var(--rz-size-8) var(--rz-size-4);
+    border: 1px dashed var(--rz-border-strong);
+    border-radius: var(--rz-radius-lg);
+    background-color: var(--rz-bg-well);
+    color: var(--rz-fg-muted);
+    text-align: center;
+    cursor: pointer;
+    transition:
+      border-color 0.15s,
+      background-color 0.15s;
 
-  .rz-doc-upload-dropzone:focus-visible {
-    outline: none;
-    --ring-offset: 1px;
-    box-shadow:
-    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
-  }
+    > :global(svg) {
+      margin-bottom: var(--rz-size-1-5);
+      color: var(--rz-fg-subtle);
+    }
 
-  .rz-doc-upload-dropzone--dragover {
-    border-color: hsl(var(--rz-color-ring) / 1);
+    small {
+      color: var(--rz-fg-subtle);
+      font-size: var(--rz-text-sm);
+    }
+
+    &:hover .rz-doc-upload-dropzone__browse {
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    /* The file input is hidden but focusable: the zone shows its keyboard focus. */
+    &:has(input:focus-visible) {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
   }
 
-  .rz-doc-upload-dropzone input {
-    display: none;
+  .rz-doc-upload-dropzone__browse {
+    color: var(--rz-accent-text);
   }
-  .rz-doc-upload-dropzone__accept {
-    opacity: 0.5;
-    font-size: var(--rz-text-xs);
+
+  /* Files over the zone: an accent edge, the tint over the well. */
+  .rz-doc-upload-dropzone--dragover {
+    border-color: var(--rz-accent-border);
+    background-image: linear-gradient(var(--rz-accent-tint) 0 0);
   }
 </style>

package/dist/panel/components/sections/document/upload-header/drop-zone/DropZone.svelte.d.ts

@@ -7,6 +7,6 @@ type Props = {
     onGeneratingPreviewStart: () => void;
     onGeneratingPreviewEnd: () => void;
 };
-declare const DropZone: import("svelte").Component<Props, {}, "preview" | "file">;
+declare const DropZone: import("svelte").Component<Props, {}, "file" | "preview">;
 type DropZone = ReturnType<typeof DropZone>;
 export default DropZone;

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

@@ -2,7 +2,7 @@
   import { browser } from '$app/environment';
   import { page } from '$app/state';
   import { getLiveContext } from '../../../context/live.svelte.js';
-  import { normalizeFieldPath } from '../../../../util/path.js';
+  import { normalizeFieldPath } from '../../../../util/string.js';
   import { onDestroy, type Snippet } from 'svelte';
 
   type Props = {
@@ -108,7 +108,7 @@
   }
 
   :global([data-live-panel-trigger][data-is-active]) {
-    outline-offset: 5px;
+    outline-offset: -2px;
     outline: 2px solid var(--rz-color-live-panel-spot);
   }
 </style>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { t__ } from '../../../../core/i18n/index.js';
+  import { useCommands } from '../../../context/commands.svelte.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';
@@ -34,12 +35,17 @@
     }
   }
 
-  function handleKeyDown(event: KeyboardEvent) {
-    if ((event.ctrlKey || event.metaKey) && event.key === 's') {
-      event.preventDefault();
-      saveAll();
+  /** ⌘S saves every pane with changes. */
+  useCommands(() => [
+    {
+      id: 'live.save',
+      label: t__('common.save'),
+      keys: 'mod+s',
+      inField: true,
+      hidden: true,
+      run: saveAll
     }
-  }
+  ]);
 </script>
 
 <div class="rz-live-floating-ui">
@@ -81,24 +87,37 @@
   </Button>
 </div>
 
-<svelte:window onkeydown={handleKeyDown} />
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
 
-<style>
-  .rz-live-floating-ui {
+/* An input with an error. */
+.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));
+    background-color: var(--rz-bg-float);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
     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;
     }

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

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

package/dist/panel/components/sections/page-layout/Page.svelte

@@ -23,11 +23,23 @@
 <style>
   main {
     container: main / inline-size;
-    --rz-page-gutter: var(--rz-size-20);
+    --rz-page-gutter: var(--rz-size-4);
   }
 
   .rz-page-with-aside {
     display: grid;
     grid-template-columns: 1fr var(--rz-size-xs);
   }
+
+  @media (min-width: 640px) {
+    main {
+      --rz-page-gutter: var(--rz-size-8);
+    }
+  }
+
+  @media (min-width: 960px) {
+    main {
+      --rz-page-gutter: var(--rz-size-20);
+    }
+  }
 </style>

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

@@ -1,49 +1,77 @@
 <script lang="ts">
   import { page } from '$app/state';
-  import { getConfigContext } from '../../../context/config.svelte.js';
   import { getTitleContext } from '../../../context/title';
   import type { Route } from '../../../../types';
-  import Button from '../button/button.svelte';
+  import { ChevronRight } from '@lucide/svelte';
 
-  const config = getConfigContext();
   const titleContext = getTitleContext();
 
-  const aria = $derived<Route[]>(page.data.aria);
+  const aria = $derived<Route[]>(page.data.aria ?? []);
+
+  // The sidebar already leads to the dashboard: its crumb shows on the dashboard alone.
+  const crumbs = $derived(aria.length > 1 && aria[0].icon === 'dashboard' ? aria.slice(1) : aria);
 </script>
 
-<div class="rz-aria">
-  {#each aria as route, index (index)}
-    {@const Icon = config.raw.icons[route.icon]}
-    {#if route.url}
-      <Button variant="text" icon={Icon} href={route.url}>
-        {route.title}
-      </Button>
-      <span>/</span>
+<nav class="rz-aria" aria-label="Breadcrumb">
+  {#each crumbs as route, index (index)}
+    {#if index < crumbs.length - 1 && route.url}
+      <a class="rz-aria__link" href={route.url}>{route.title}</a>
+      <ChevronRight class="rz-aria__separator" size={13} aria-hidden="true" />
     {:else}
-      <span class="rz-aria__last">{route.title || titleContext.value}</span>
+      <span class="rz-aria__last" aria-current="page">{route.title || titleContext.value}</span>
     {/if}
   {/each}
-</div>
+</nav>
+
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
 
-<style>.rz-aria {
+/* An input with an error. */
+.rz-aria {
     display: flex;
     align-items: center;
-    gap: var(--rz-size-3);
-    > *,
-    > :global(.rz-button) {
-      opacity: 0.5;
-      transition: opacity 0.3s ease;
+    gap: var(--rz-size-1-5);
+    min-width: 0;
+    color: var(--rz-fg-subtle);
+    white-space: nowrap;
+
+    :global(.rz-aria__separator) {
+      flex-shrink: 0;
     }
-    > *:hover,
-    > :global(.rz-button:hover) {
-      opacity: 1;
+  }
+
+  .rz-aria__link {
+    max-width: var(--rz-size-40);
+    overflow: hidden;
+    border-radius: var(--rz-radius-sm);
+    text-overflow: ellipsis;
+    transition: color 0.15s;
+
+    &:hover {
+      color: var(--rz-fg);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
     }
   }
+
   .rz-aria__last {
     overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    opacity: 1;
+    color: var(--rz-fg);
+    text-overflow: ellipsis;
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
   }
 </style>