rimecms 0.32.1 → 1.0.0

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

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The files dropped or browsed, never none. One unless `multiple`. */
+    onfiles: (files: File[]) => void;
+    multiple?: boolean;
+    /** Mime types the file chooser offers. */
+    accept?: string[];
+    disabled?: boolean;
+    /** What the zone says; `browse` opens the file chooser. */
+    children: Snippet<[{ browse: () => void }]>;
+  };
+
+  const {
+    onfiles,
+    multiple = false,
+    accept,
+    disabled = false,
+    children,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  let input = $state<HTMLInputElement>();
+  let over = $state(false);
+
+  /** A drag of files from outside, not of an element of the page. */
+  const carriesFiles = (event: DragEvent) => !!event.dataTransfer?.types.includes('Files');
+
+  /** Files over a disabled zone are refused, not opened by the browser. */
+  function onDragOver(event: DragEvent) {
+    if (!carriesFiles(event)) return;
+    event.preventDefault();
+    if (disabled && event.dataTransfer) event.dataTransfer.dropEffect = 'none';
+    over = !disabled;
+  }
+
+  function onDragLeave(event: DragEvent) {
+    const zone = event.currentTarget as HTMLElement;
+    if (!zone.contains(event.relatedTarget as Node | null)) over = false;
+  }
+
+  function onDrop(event: DragEvent) {
+    over = false;
+    if (!carriesFiles(event)) return;
+    event.preventDefault();
+    if (!disabled) take(event.dataTransfer?.files);
+  }
+
+  function take(list?: FileList | null) {
+    const files = Array.from(list ?? []);
+    if (files.length) onfiles(multiple ? files : files.slice(0, 1));
+  }
+
+  const browse = () => input?.click();
+</script>
+
+<!-- Takes files dropped on it, or picked from the file chooser. -->
+<div
+  role="group"
+  class="rz-file-drop {className ?? ''}"
+  data-over={over ? '' : undefined}
+  data-disabled={disabled ? '' : undefined}
+  ondragover={onDragOver}
+  ondragleave={onDragLeave}
+  ondrop={onDrop}
+  {...rest}
+>
+  {@render children({ browse })}
+  <input
+    bind:this={input}
+    type="file"
+    hidden
+    {multiple}
+    {disabled}
+    accept={accept?.join(',')}
+    onchange={(event) => {
+      take(event.currentTarget.files);
+      event.currentTarget.value = '';
+    }}
+  />
+</div>
+
+<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-file-drop {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rz-size-0-5);
+    padding: var(--rz-size-5) var(--rz-size-4);
+    border: 1px dashed var(--rz-border-strong);
+    border-radius: var(--rz-radius-md);
+    background-color: var(--rz-bg-well);
+    color: var(--rz-fg-muted);
+    text-align: center;
+    transition:
+      border-color 0.15s,
+      background-color 0.15s;
+  }
+
+  .rz-file-drop > :global(svg) {
+    margin-bottom: var(--rz-size-1-5);
+    color: var(--rz-fg-subtle);
+  }
+
+  .rz-file-drop :global(small) {
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+  }
+
+  /* The tint lies over the zone's own fill, whatever it is. */
+  .rz-file-drop[data-over] {
+    border-color: var(--rz-accent-border);
+    background-image: linear-gradient(var(--rz-accent-tint) 0 0);
+  }
+
+  /* A link-like button inside the zone: "browse", "choose from the library". */
+  .rz-file-drop :global(.rz-file-drop__link) {
+    color: var(--rz-accent-text);
+    &:hover:not(:disabled) {
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+      border-radius: var(--rz-radius-sm);
+    }
+    &:disabled {
+      color: var(--rz-fg-subtle);
+      cursor: default;
+    }
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The files dropped or browsed, never none. One unless `multiple`. */
+    onfiles: (files: File[]) => void;
+    multiple?: boolean;
+    /** Mime types the file chooser offers. */
+    accept?: string[];
+    disabled?: boolean;
+    /** What the zone says; `browse` opens the file chooser. */
+    children: Snippet<[{
+        browse: () => void;
+    }]>;
+};
+declare const FileDrop: import("svelte").Component<Props, {}, "">;
+type FileDrop = ReturnType<typeof FileDrop>;
+export default FileDrop;

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

@@ -0,0 +1,177 @@
+<script lang="ts">
+  import { invalidateAll } from '$app/navigation';
+  import { t__ } from '../../../../../core/i18n/index.js';
+  import Button from '../../../ui/button/button.svelte';
+  import { getNavContext } from '../../../../context/nav.svelte.js';
+  import {
+    uploadFiles,
+    type UploadProgress as Progress,
+    type UploadTarget
+  } from '../../../../util/upload-file.js';
+  import { Upload, X } from '@lucide/svelte';
+  import UploadProgress from './UploadProgress.svelte';
+
+  type Props = {
+    /** Where the files go: the collection's API, the folder, the types it takes. */
+    target: UploadTarget;
+    /** The folder's name, as the veil says it. */
+    folder: string;
+    /** Off while another zone takes the files: a dialog's. */
+    disabled?: boolean;
+  };
+  const { target, folder, disabled = false }: Props = $props();
+
+  const nav = getNavContext();
+  let over = $state(false);
+  let progress = $state<Progress | null>(null);
+  const busy = $derived(progress !== null && progress.current !== null);
+
+  /** A drag of files from outside the browser, not of an element of the page. */
+  const carriesFiles = (event: DragEvent) => !!event.dataTransfer?.types.includes('Files');
+
+  /** Files entering the window raise the veil; the veil takes it from there. */
+  function onWindowDragEnter(event: DragEvent) {
+    if (disabled || busy || !carriesFiles(event)) return;
+    over = true;
+  }
+
+  /** Outside the veil, on the navigation, files are refused rather than opened by the browser. */
+  function onWindowDragOver(event: DragEvent) {
+    if (disabled || !carriesFiles(event) || event.defaultPrevented) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'none';
+  }
+
+  function onWindowDrop(event: DragEvent) {
+    if (disabled || !carriesFiles(event) || event.defaultPrevented) return;
+    event.preventDefault();
+    over = false;
+  }
+
+  function onDragOver(event: DragEvent) {
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+  }
+
+  /** Leaving the window, or onto the navigation, lowers the veil. */
+  function onDragLeave(event: DragEvent) {
+    const veil = event.currentTarget as HTMLElement;
+    if (!veil.contains(event.relatedTarget as Node | null)) over = false;
+  }
+
+  /** Each file becomes a document in the folder on screen, then the list reloads. */
+  async function onDrop(event: DragEvent) {
+    event.preventDefault();
+    over = false;
+    const files = Array.from(event.dataTransfer?.files ?? []);
+    if (!files.length) return;
+    const { failed } = await uploadFiles(files, target, (state) => (progress = state));
+    await invalidateAll();
+    if (!failed.length) progress = null;
+  }
+</script>
+
+<svelte:window
+  ondragenter={onWindowDragEnter}
+  ondragover={onWindowDragOver}
+  ondrop={onWindowDrop}
+/>
+
+{#if over}
+  <!-- An accent veil over the page while files hover it. -->
+  <div
+    class="rz-page-drop"
+    role="region"
+    aria-label={t__('common.drop_to_upload_into', folder)}
+    style:left={nav?.width ?? '0'}
+    ondragover={onDragOver}
+    ondragleave={onDragLeave}
+    ondrop={onDrop}
+  >
+    <p class="rz-page-drop__label">
+      <Upload size={16} />
+      {t__('common.drop_to_upload_into', folder)}
+    </p>
+  </div>
+{/if}
+
+{#if progress}
+  <!-- The batch on its way, in a corner; it stays on a failure until closed. -->
+  <div class="rz-page-drop__progress">
+    <UploadProgress {progress} />
+    {#if !busy}
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        icon={X}
+        aria-label={t__('common.close')}
+        onclick={() => (progress = null)}
+      />
+    {/if}
+  </div>
+{/if}
+
+<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-page-drop {
+    position: fixed;
+    inset: 0;
+    z-index: 200;
+    display: grid;
+    place-items: center;
+    padding: var(--rz-size-4);
+    background-color: var(--rz-accent-tint);
+    box-shadow: inset 0 0 0 2px var(--rz-accent-border);
+    backdrop-filter: blur(2px);
+  }
+
+  .rz-page-drop__label {
+    background-color: var(--rz-bg-float);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+    padding: var(--rz-size-2-5) var(--rz-size-4);
+    border-radius: var(--rz-radius-full);
+    color: var(--rz-accent-text);
+    pointer-events: none;
+  }
+
+  .rz-page-drop__progress {
+    background-color: var(--rz-bg-float);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
+    position: fixed;
+    right: var(--rz-size-4);
+    bottom: var(--rz-size-4);
+    z-index: 200;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--rz-size-2);
+    width: min(var(--rz-size-80), calc(100vw - var(--rz-size-8)));
+    padding: var(--rz-size-3) var(--rz-size-2) var(--rz-size-3) var(--rz-size-4);
+    border-radius: var(--rz-radius-lg);
+
+    :global(.rz-bulk-infos) {
+      flex: 1;
+    }
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import { type UploadTarget } from '../../../../util/upload-file.js';
+type Props = {
+    /** Where the files go: the collection's API, the folder, the types it takes. */
+    target: UploadTarget;
+    /** The folder's name, as the veil says it. */
+    folder: string;
+    /** Off while another zone takes the files: a dialog's. */
+    disabled?: boolean;
+};
+declare const PageDrop: import("svelte").Component<Props, {}, "">;
+type PageDrop = ReturnType<typeof PageDrop>;
+export default PageDrop;

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

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { t__ } from '../../../../../core/i18n/index.js';
+  import SpinLoader from '../../../ui/spin-loader/SpinLoader.svelte';
+  import type { UploadProgress } from '../../../../util/upload-file.js';
+
+  type Props = { progress: UploadProgress; class?: string };
+  const { progress, class: className }: Props = $props();
+</script>
+
+<!-- The file on its way, how many are up, and the ones that did not make it. -->
+<div class="rz-bulk-infos {className ?? ''}" aria-live="polite">
+  {#if progress.current}
+    <p class="rz-bulk-infos__current">
+      <SpinLoader />
+      <span>{progress.current}</span>
+    </p>
+  {/if}
+  <p class="rz-bulk-infos__processed">
+    {t__('fields.upload_progress', String(progress.uploaded), String(progress.total))}
+  </p>
+  {#if progress.failed.length}
+    <p class="rz-bulk-infos__errors">
+      {t__('fields.upload_failed', progress.failed.join(', '))}
+    </p>
+  {/if}
+</div>
+
+<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-bulk-infos {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--rz-size-2);
+    min-width: 0;
+    color: var(--rz-fg-muted);
+  }
+
+  .rz-bulk-infos__current {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+    min-width: 0;
+    span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .rz-bulk-infos__processed {
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+    color: var(--rz-fg);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .rz-bulk-infos__errors {
+    color: var(--rz-danger);
+    font-size: var(--rz-text-sm);
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { UploadProgress } from '../../../../util/upload-file.js';
+type Props = {
+    progress: UploadProgress;
+    class?: string;
+};
+declare const UploadProgress: import("svelte").Component<Props, {}, "">;
+type UploadProgress = ReturnType<typeof UploadProgress>;
+export default UploadProgress;

package/dist/panel/components/sections/collection/folder/Folder.svelte

@@ -29,9 +29,24 @@
   {@render children()}
 </h3>
 
-<style>:root {
-    --rz-folder-light: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-6)));
-    --rz-folder-dark: light-dark(hsl(var(--rz-gray-12)), hsl(var(--rz-gray-4)));
+<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. */
+:root {
+    --rz-folder-light: var(--rz-bg-active);
+    --rz-folder-dark: var(--rz-bg-well);
   }
 
   h3 {

package/dist/panel/components/sections/collection/folder/FolderEdit.svelte

@@ -6,6 +6,7 @@
   import RenderFields from '../../../fields/RenderFields.svelte';
   import Button from '../../../ui/button/button.svelte';
   import * as Dialog from '../../../ui/dialog/index.js';
+  import { useCommands } from '../../../../context/commands.svelte.js';
   import { getConfigContext } from '../../../../context/config.svelte.js';
   import { setDocumentFormContext } from '../../../../context/documentForm.svelte.js';
   import { getUserContext } from '../../../../context/user.svelte.js';
@@ -31,33 +32,40 @@
     afterSuccess: () => (open = false)
   });
 
-  function handleKeyDown(event: KeyboardEvent) {
-    if (!open) return;
-    if (!formElement) throw Error('formElement is not defined');
-    if ((event.ctrlKey || event.metaKey) && event.key === 's') {
-      event.preventDefault();
-      if (!form.canSubmit) return;
-      const saveButton = formElement.querySelector('button[data-submit]');
-      if (saveButton) {
-        formElement.requestSubmit(saveButton as HTMLButtonElement);
-      } else {
-        // Fallback to default submit if no specific button found
-        formElement.requestSubmit();
-      }
+  /** ⌘S while the dialog is up. */
+  useCommands(() => [
+    {
+      id: 'folder.save',
+      label: t__('common.save'),
+      keys: 'mod+s',
+      inField: true,
+      hidden: true,
+      when: () => open,
+      run: submit
     }
+  ]);
+
+  function submit() {
+    if (!formElement) throw Error('formElement is not defined');
+    if (!form.canSubmit) return;
+    const saveButton = formElement.querySelector('button[data-submit]');
+    if (saveButton) formElement.requestSubmit(saveButton as HTMLButtonElement);
+    else formElement.requestSubmit();
   }
 </script>
 
-<svelte:window onkeydown={handleKeyDown} />
-
 <Dialog.Root bind:open>
   <Dialog.Content>
     {#snippet child({ props })}
       <form use:form.enhance bind:this={formElement} {...props}>
         <RenderFields {form} fields={config.fields} />
-        <Dialog.Footer --rz-justify-content="space-between">
-          <Button data-submit disabled={!form.canSubmit} type="submit">{t__('common.save')}</Button>
-          <Button onclick={() => (open = false)} variant="secondary">{t__('common.cancel')}</Button>
+        <Dialog.Footer>
+          <Button data-submit disabled={!form.canSubmit} type="submit" kbd="enter">
+            {t__('common.save')}
+          </Button>
+          <Button onclick={() => (open = false)} variant="secondary" kbd="escape">
+            {t__('common.cancel')}
+          </Button>
         </Dialog.Footer>
       </form>
     {/snippet}