rimecms 0.32.1 → 1.0.0

package/dist/panel/components/sections/auth/AuthForm.svelte

@@ -25,8 +25,22 @@
   </div>
 </div>
 
-<style>
-  .rz-auth {
+<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-auth {
     display: grid;
     grid-template-columns: 1fr;
     height: 100vh;
@@ -37,19 +51,12 @@
       0px 0px,
       0px 0px,
       0px 0px;
+    background-color: var(--rz-bg-base);
     background-image:
-      url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='10.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.88'/%3E%3C/svg%3E"),
-      radial-gradient(113% 91% at 17% -2%, oklch(0.21 0.03 290) 1%, oklch(0 0 0 / 0) 99%),
-      radial-gradient(142% 91% at 83% 7%, oklch(0.21 0.12 80) 1%, oklch(0.85 0.23 155 / 0) 99%),
-      radial-gradient(142% 91% at 111% 84%, oklch(0.13 0.08 300) 0%, oklch(0.05 0.1 250) 100%);
-
-    @media (prefers-color-scheme: light) {
-      background-image:
-        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='10.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.12'/%3E%3C/svg%3E"),
-        radial-gradient(113% 91% at 17% -2%, oklch(0.95 0 310) 1%, oklch(1 0 0 / 0) 99%),
-        radial-gradient(142% 91% at 83% 7%, oklch(0.92 0 90) 1%, oklch(1 0 0 / 0) 99%),
-        radial-gradient(142% 91% at 111% 84%, oklch(0.88 0 40) 0%, oklch(0.96 0 40) 100%);
-    }
+      url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='10.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.12'/%3E%3C/svg%3E"),
+      radial-gradient(113% 91% at 17% -2%, var(--rz-accent-tint) 1%, transparent 99%),
+      radial-gradient(142% 91% at 83% 7%, var(--rz-bg-page) 1%, transparent 99%),
+      radial-gradient(142% 91% at 111% 84%, var(--rz-bg-active) 0%, transparent 100%);
 
     @media (min-width: 1024px) {
       grid-template-columns: 0.8fr 1.2fr;
@@ -57,19 +64,14 @@
 
     .rz-auth__right {
       --rz-input-height: var(--rz-size-14);
-      --rz-input-bg: 68deg 0 0 / 0;
-      --border-color: light-dark(hsl(68deg 100 100 / 0.6), hsl(68deg 100 100 / 0.1));
       border-radius: var(--rz-radius-xl);
-      background-color: hsl(var(--rz-color-bg) / 0.4);
-      backdrop-filter: blur(10px) brightness(180%);
-      @media (prefers-color-scheme: light) {
-        background-color: hsl(var(--rz-color-bg) / 0.1);
-        backdrop-filter: blur(4px) brightness(105%);
-      }
+      background-color: var(--rz-bg-raised);
+      box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
 
       @media (min-width: 1024px) {
         margin: 1rem;
-        border: 1px solid var(--border-color);
       }
 
       > div {
@@ -115,8 +117,5 @@
 
   .rz-auth.rz-auth--image {
     background-size: cover;
-    .rz-auth__right {
-      background-color: hsl(var(--rz-color-bg) / 0.9);
-    }
   }
 </style>

package/dist/panel/components/sections/collection/Avatar.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  type Props = {
+    /** The person's name; the avatar shows its initials. */
+    name: string;
+    /** `xs` sits in a list row, `sm` in a card row. */
+    size?: 'xs' | 'sm';
+  };
+  const { name, size = 'sm' }: Props = $props();
+
+  // "Anthony Ivol" -> "AI", "anthony@site.com" -> "A"
+  const initials = $derived(
+    name
+      .split(/\s+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((word) => word.charAt(0))
+      .join('')
+  );
+</script>
+
+<span class="rz-avatar rz-avatar--{size}" aria-hidden="true">{initials}</span>
+
+<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-avatar {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    border-radius: var(--rz-radius-full);
+    background-color: var(--rz-bg-active);
+    color: var(--rz-fg-muted);
+    text-transform: uppercase;
+    font-variation-settings: 'wght' 600;
+    font-weight: 600;
+  }
+
+  .rz-avatar--sm {
+    width: calc(5.5 * var(--rz-unit));
+    height: calc(5.5 * var(--rz-unit));
+    font-size: var(--rz-text-2xs);
+  }
+
+  .rz-avatar--xs {
+    width: calc(4.5 * var(--rz-unit));
+    height: calc(4.5 * var(--rz-unit));
+    font-size: calc(var(--rz-text-2xs) * 0.85);
+  }
+</style>

package/dist/panel/components/sections/collection/Avatar.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    /** The person's name; the avatar shows its initials. */
+    name: string;
+    /** `xs` sits in a list row, `sm` in a card row. */
+    size?: 'xs' | 'sm';
+};
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/panel/components/sections/collection/DocStatus.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { t__ } from '../../../../core/i18n/index.js';
+  import {
+    VERSIONS_STATUS,
+    type VersionsStatus
+  } from '../../../../core/prototype/shared/versions/constant.js';
+  import StatusDot from './StatusDot.svelte';
+
+  type Props = { status: VersionsStatus };
+  const { status }: Props = $props();
+</script>
+
+<!-- A dot, then Draft or Published. -->
+<span class="rz-doc-status">
+  <StatusDot --rz-dot-size="var(--rz-size-1-5)" {status} />
+  {status === VERSIONS_STATUS.DRAFT ? t__('common.draft') : t__('common.published')}
+</span>
+
+<style>
+  .rz-doc-status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--rz-size-1-5);
+    color: var(--rz-fg-muted);
+    font-size: var(--rz-text-sm);
+    white-space: nowrap;
+  }
+</style>

package/dist/panel/components/sections/collection/DocStatus.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type VersionsStatus } from '../../../../core/prototype/shared/versions/constant.js';
+type Props = {
+    status: VersionsStatus;
+};
+declare const DocStatus: import("svelte").Component<Props, {}, "">;
+type DocStatus = ReturnType<typeof DocStatus>;
+export default DocStatus;

package/dist/panel/components/sections/collection/Empty.svelte

@@ -17,12 +17,12 @@
 <style>
   .rz-no-document {
     height: var(--rz-input-height);
-    background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
-    color: hsl(var(--rz-gray-10));
+    background-color: var(--rz-bg-well);
+    color: var(--rz-fg-subtle);
     display: flex;
     align-items: center;
     border-radius: var(--rz-radius-md);
     padding: var(--rz-size-3);
-    border: var(--rz-border);
+    border: 1px solid var(--rz-border);
   }
 </style>

package/dist/panel/components/sections/collection/StatusDot.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-  import { type VersionsStatus } from '../../../../core/prototype/shared/versions/constant.js';
-  import { VERSIONS_STATUS } from '../../../../core/prototype/shared/versions/constant.js';
+  import {
+    VERSIONS_STATUS,
+    type VersionsStatus
+  } from '../../../../core/prototype/shared/versions/constant.js';
 
   type Props = { status: VersionsStatus };
 
   const { status }: Props = $props();
-  const colorDraft = 'var(--rz-color-warn)';
-  const colorPublished = 'var(--rz-color-success)';
+  const colorDraft = 'var(--rz-warn)';
+  const colorPublished = 'var(--rz-success)';
   const color = $derived(status === VERSIONS_STATUS.DRAFT ? colorDraft : colorPublished);
 </script>
 
@@ -17,7 +19,7 @@
     flex-shrink: 0;
     width: var(--rz-dot-size, 0.7rem);
     height: var(--rz-dot-size, 0.7rem);
-    background-color: hsl(var(--rz-status-color));
+    background-color: var(--rz-status-color);
     border-radius: 0.7rem;
   }
 </style>

package/dist/panel/components/sections/collection/When.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { getConfigContext } from '../../../context/config.svelte.js';
+  import { formatWhen } from '../../../util/time.js';
+
+  type Props = {
+    date: Date | string;
+    /** The moment "ago" counts from; the render's by default. */
+    now?: Date;
+  };
+  const { date, now = new Date() }: Props = $props();
+
+  const config = getConfigContext();
+  const iso = $derived(new Date(date).toISOString());
+  const label = $derived(formatWhen(date, now, config.raw.panel.language));
+</script>
+
+<!-- 2 h ago, Yesterday, Sep 12: the full date shows on hover. -->
+<time
+  class="rz-when"
+  datetime={iso}
+  title={new Date(date).toLocaleString(config.raw.panel.language)}
+>
+  {label}
+</time>
+
+<style>
+  .rz-when {
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+</style>

package/dist/panel/components/sections/collection/When.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    date: Date | string;
+    /** The moment "ago" counts from; the render's by default. */
+    now?: Date;
+};
+declare const When: import("svelte").Component<Props, {}, "">;
+type When = ReturnType<typeof When>;
+export default When;

package/dist/panel/components/sections/collection/bulk-upload/BulkUploadDialog.svelte

@@ -3,37 +3,81 @@
   import { t__ } from '../../../../../core/i18n/index.js';
   import Button from '../../../ui/button/button.svelte';
   import * as Dialog from '../../../ui/dialog/index.js';
-  import type { CollectionContext } from '../../../../context/collection.svelte';
+  import type { UploadTarget } from '../../../../util/upload-file.js';
+  import { X } from '@lucide/svelte';
   import DropZone from './DropZone.svelte';
 
-  type Props = { open: boolean; collection: CollectionContext };
-  let { open = $bindable(), collection }: Props = $props();
+  type Props = {
+    open: boolean;
+    /** Where the files go: the collection's API, the folder, the types it takes. */
+    target: UploadTarget;
+  };
+  let { open = $bindable(), target }: Props = $props();
 
-  let btnLabel = $state('Cancel');
-  let btnDisabled = $state(true);
+  /** While files go up, the dialog stays open. */
+  let busy = $state(false);
 
+  function onStart() {
+    busy = true;
+  }
+
+  /** Closes on success; on an error, stays open on the report. */
   function onFinish(hasErrors: boolean) {
-    btnDisabled = false;
-    btnLabel = 'Close';
-    if (!hasErrors) {
-      open = false;
-    }
+    busy = false;
+    if (!hasErrors) open = false;
     invalidateAll();
   }
 
-  function onStart() {
-    btnDisabled = true;
-  }
+  const stay = $derived(busy ? 'ignore' : 'close');
 </script>
 
 <Dialog.Root bind:open>
-  <Dialog.Content size="lg" class="rz-status-dialog">
-    <Dialog.Header>{t__('common.bulk_upload_dialog_title')}</Dialog.Header>
-    <DropZone {collection} {onFinish} {onStart} />
-    <Dialog.Footer --rz-justify-content="space-between">
-      <Button disabled={!btnDisabled} variant="secondary" onclick={() => (open = false)}
-        >{btnLabel}</Button
-      >
-    </Dialog.Footer>
+  <Dialog.Content
+    size="lg"
+    class="rz-bulk-upload"
+    escapeKeydownBehavior={stay}
+    interactOutsideBehavior={stay}
+  >
+    <header class="rz-bulk-upload__head">
+      <Dialog.Title level={3}>{t__('fields.upload')}</Dialog.Title>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        icon={X}
+        disabled={busy}
+        aria-label={t__('common.close')}
+        onclick={() => (open = false)}
+      />
+    </header>
+    <div class="rz-bulk-upload__body">
+      <DropZone {target} {onFinish} {onStart} />
+    </div>
   </Dialog.Content>
 </Dialog.Root>
+
+<style>
+  :global(.rz-dialog-content.rz-bulk-upload) {
+    gap: 0;
+    padding: 0;
+    overflow: hidden;
+    border-radius: var(--rz-radius-xl);
+  }
+
+  .rz-bulk-upload__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--rz-size-3);
+    height: var(--rz-size-12);
+    padding: 0 var(--rz-size-2-5) 0 var(--rz-size-4);
+
+    :global(.rz-dialog-title) {
+      margin: 0;
+      font-size: var(--rz-text-lg);
+    }
+  }
+
+  .rz-bulk-upload__body {
+    padding: 0 var(--rz-size-4) var(--rz-size-4);
+  }
+</style>

package/dist/panel/components/sections/collection/bulk-upload/BulkUploadDialog.svelte.d.ts

@@ -1,7 +1,8 @@
-import type { CollectionContext } from '../../../../context/collection.svelte';
+import type { UploadTarget } from '../../../../util/upload-file.js';
 type Props = {
     open: boolean;
-    collection: CollectionContext;
+    /** Where the files go: the collection's API, the folder, the types it takes. */
+    target: UploadTarget;
 };
 declare const BulkUploadDialog: import("svelte").Component<Props, {}, "open">;
 type BulkUploadDialog = ReturnType<typeof BulkUploadDialog>;

package/dist/panel/components/sections/collection/bulk-upload/DropZone.svelte

@@ -1,185 +1,68 @@
 <script lang="ts">
-  import { PARAMS } from '../../../../../core/constants';
   import { t__ } from '../../../../../core/i18n/index.js';
-  import SpinLoader from '../../../ui/spin-loader/SpinLoader.svelte';
-  import type { CollectionContext } from '../../../../context/collection.svelte';
-  import { trycatch, trycatchFetch } from '../../../../../util/function.js';
+  import {
+    acceptLabel,
+    uploadFiles,
+    type UploadProgress as Progress,
+    type UploadTarget
+  } from '../../../../util/upload-file.js';
+  import { Upload } from '@lucide/svelte';
+  import FileDrop from './FileDrop.svelte';
+  import UploadProgress from './UploadProgress.svelte';
 
   type Props = {
-    collection: CollectionContext;
+    /** Where the files go: the collection's API, the folder, the types it takes. */
+    target: UploadTarget;
     onStart: () => void;
     onFinish: (hasError: boolean) => void;
   };
 
-  let { collection, onFinish, onStart }: Props = $props();
+  let { target, onFinish, onStart }: Props = $props();
 
-  let input = $state<HTMLInputElement>();
-  let dragOver = $state(false);
-  let processingFile = $state(false);
-  let files = $state<File[]>([]);
-  let currentlyProcessing = $state('');
-  let processed = $state(0);
-  let errors = $state<string[]>([]);
+  let progress = $state<Progress | null>(null);
 
-  const handleDragOver = (event: DragEvent) => {
-    dragOver = true;
-    event.preventDefault();
-  };
-
-  const handleDragLeave = (event: DragEvent) => {
-    dragOver = false;
-    event.preventDefault();
-  };
-
-  const handleDrop = (event: DragEvent) => {
-    dragOver = false;
-    event.preventDefault();
+  // JPG, PNG or WEBP
+  const accepted = $derived(
+    target.accept?.length ? acceptLabel(target.accept, t__('common.or')) : ''
+  );
 
-    if ('dataTransfer' in event && event.dataTransfer && event.dataTransfer.files) {
-      files = Array.from(event.dataTransfer.files);
-      processFiles(files);
-    }
-  };
-
-  async function processFiles(files: File[]) {
+  /** Each file becomes a document in the target's folder. */
+  async function upload(files: File[]) {
     onStart();
-    for (const file of files) {
-      currentlyProcessing = file.name;
-      const [conversionError, base64] = await trycatch(getBase64(file));
-
-      if (conversionError) {
-        errors.push(file.name);
-        continue;
-      }
-
-      const createUploadURL = `${collection.apiUrl}?${PARAMS.SKIP_VALIDATION}=true`;
-      const [error, success] = await trycatchFetch(createUploadURL, {
-        method: 'POST',
-        body: JSON.stringify({
-          _path: collection.upload.currentPath,
-          file: {
-            base64,
-            filename: file.name
-          }
-        })
-      });
-      if (error) {
-        errors.push(file.name);
-      } else if (success) {
-        processed++;
-      }
-    }
-
-    onFinish(!!errors.length);
-  }
-
-  async function getBase64(file: File): Promise<string> {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = () => {
-        const result = reader.result;
-        if (typeof result === 'string') {
-          resolve(result);
-        } else {
-          reject(new Error('Failed to read file as string'));
-        }
-      };
-      reader.readAsDataURL(file);
-    });
+    const { failed } = await uploadFiles(files, target, (state) => (progress = state));
+    onFinish(failed.length > 0);
   }
-
-  const dragOverClassModifier = $derived(dragOver ? 'rz-bulk-dropzone--dragover' : '');
 </script>
 
-{#if files.length}
-  <div class="rz-bulk-infos">
-    <div class="rz-bulk-infos__current"><SpinLoader />{currentlyProcessing}</div>
-    <div class="rz-bulk-infos__processed">
-      {processed} / {files.length} created<br />
-    </div>
-    {#if errors.length}
-      <div class="rz-bulk-infos__errors">
-        {errors.length} errors.
-      </div>
-    {/if}
-  </div>
+{#if progress}
+  <UploadProgress {progress} class="rz-bulk-progress" />
 {:else}
-  <label
-    for="file"
-    class="rz-bulk-dropzone {dragOverClassModifier}"
-    ondragover={handleDragOver}
-    ondragleave={handleDragLeave}
-    ondrop={handleDrop}
-  >
-    <p>{t__('common.drop_files')} {t__('common.or')} <strong>{t__('common.browse')}</strong></p>
-    {#if collection.config.upload?.accept}
-      <p class="rz-bulk-dropzone__accept">{collection.config.upload.accept.join(', ')} accepted</p>
-    {/if}
-
-    <input
-      disabled={processingFile}
-      bind:this={input}
-      id="file"
-      name="file"
-      type="file"
-      placeholder="upload"
-    />
-  </label>
+  <FileDrop class="rz-bulk-dropzone" multiple accept={target.accept} onfiles={upload}>
+    {#snippet children({ browse })}
+      <Upload size={18} />
+      <span>
+        {t__('common.drop_files')}
+        {t__('common.or')}
+        <button type="button" class="rz-file-drop__link" onclick={browse}>
+          {t__('common.browse')}
+        </button>
+      </span>
+      {#if accepted}
+        <small class="rz-bulk-dropzone__accept">{accepted}</small>
+      {/if}
+    {/snippet}
+  </FileDrop>
 {/if}
 
 <style>
-  .rz-bulk-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);
-  }
-
-  .rz-bulk-dropzone__processing {
-    display: flex;
-    align-items: center;
-    gap: var(--rz-size-2);
-  }
-
-  .rz-bulk-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));
-  }
-
-  .rz-bulk-dropzone--dragover {
-    border-color: hsl(var(--rz-color-ring) / 1);
-  }
-
-  .rz-bulk-dropzone input {
-    display: none;
-  }
-
-  .rz-bulk-dropzone__accept {
-    opacity: 0.5;
-    font-size: var(--rz-text-xs);
-  }
-
-  .rz-bulk-infos__current {
-    display: flex;
-    align-items: center;
-    gap: var(--rz-size-2);
-    margin-bottom: var(--rz-size-2);
-  }
-
-  .rz-bulk-infos__errors {
-    color: hsl(var(--rz-color-error));
+  :global(.rz-bulk-dropzone) {
+    min-height: var(--rz-size-40);
   }
 
-  .rz-bulk-infos__processed {
-    font-variation-settings: 'wght' 500;
-    font-weight: 500;
+  :global(.rz-bulk-infos.rz-bulk-progress) {
+    min-height: var(--rz-size-40);
+    padding: var(--rz-size-5) var(--rz-size-4);
+    border-radius: var(--rz-radius-md);
+    background-color: var(--rz-bg-well);
   }
 </style>

package/dist/panel/components/sections/collection/bulk-upload/DropZone.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { CollectionContext } from '../../../../context/collection.svelte';
+import { type UploadTarget } from '../../../../util/upload-file.js';
 type Props = {
-    collection: CollectionContext;
+    /** Where the files go: the collection's API, the folder, the types it takes. */
+    target: UploadTarget;
     onStart: () => void;
     onFinish: (hasError: boolean) => void;
 };