rimecms 0.33.0 → 1.0.0

package/dist/fields/rich-text/core/features/fields/fields.css

@@ -3,9 +3,8 @@
 }
 
 .ProseMirror-focused .ProseMirror-selectednode .rz-fields-preview__trigger {
-  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-spot) / var(--rz-ring-opacity, 1));
+  outline: 2px solid var(--rz-accent-border);
+  outline-offset: 2px;
 }
 
 .rz-rich-text-sheet {

package/dist/fields/rich-text/core/features/hr/hr.css

@@ -2,7 +2,7 @@
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 0;
-  background-color: hsl(var(--rz-input-bg));
+  background-color: var(--rz-bg-well);
   padding-bottom: 0;
   /*border-top-color: none;*/
   border-left-color: none;
@@ -10,10 +10,10 @@
   min-height: var(--rz-size-6);
 
   box-shadow:
-    inset 0 0 0px calc(var(--rz-size-3) - 1px) hsl(var(--rz-color-bg)),
-    0 2px 0px 0 hsl(var(--rz-color-bg));
+    inset 0 0 0px calc(var(--rz-size-3) - 1px) var(--rz-bg-page),
+    0 2px 0px 0 var(--rz-bg-page);
 
   &.ProseMirror-selectednode {
-    background-color: hsl(var(--rz-color-spot));
+    background-color: var(--rz-accent);
   }
 }

package/dist/fields/rich-text/core/features/link/component/link-selector.css

@@ -1,4 +0,0 @@
-.rz-rich-text__editor a {
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}

package/dist/fields/rich-text/core/features/link/component/link-selector.svelte

@@ -146,7 +146,7 @@
     open = false;
   }
 
-  /** Whenever the target change, update editor content */
+  /** The target changed: the link takes it. Not on mount, which would focus the editor. */
   watch(
     () => isTargetBlank,
     (current, previous) => {
@@ -157,7 +157,8 @@
           .setLink({ href: urlState.url, target: isTargetBlank ? '_blank' : '_self' })
           .run();
       }
-    }
+    },
+    { lazy: true }
   );
 
   function onDelete() {
@@ -198,9 +199,7 @@
       <div class="rz-link-selector__button">
         {#if editor.getAttributes('link').href}
           <Button
-            --rz-button-ghost-fg={isTargetBlank
-              ? 'hsl(var(--rz-color-spot))'
-              : 'hsl(var(--rz-color-fg))'}
+            --rz-button-ghost-fg={isTargetBlank ? 'var(--rz-accent-text)' : 'var(--rz-fg)'}
             onclick={() => (isTargetBlank = !isTargetBlank)}
             variant="ghost"
             size="icon-sm"
@@ -252,8 +251,22 @@
   </Command.List>
 </Command.Dialog>
 
-<style>
-  .rz-link-selector {
+<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-link-selector {
     position: relative;
 
     :global(.rz-input) {
@@ -278,7 +291,10 @@
     margin-top: var(--rz-size-1);
     display: flex;
     width: 18rem;
-    box-shadow: var(--rz-shadow-xl);
+    background-color: var(--rz-bg-float);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
     animation: fadeInSlideFromTop 0.2s ease-out;
     border-radius: var(--rz-radius-lg);
   }

package/dist/fields/rich-text/core/features/resource/resource.svelte

@@ -127,18 +127,32 @@
   </Command.List>
 </Command.Dialog>
 
-<style>:global(.ProseMirror-focused .ProseMirror-selectednode .rz-richtext-resource) {
+<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. */
+:global(.ProseMirror-focused .ProseMirror-selectednode .rz-richtext-resource) {
     :global(.rz-card-resource),
     :global(button.rz-richtext-resource__add) {
-      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-spot) / var(--rz-ring-opacity, 1));
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
     }
   }
   .rz-richtext-resource {
     position: relative;
     --rz-border-radius: var(--rz-radius-xl);
-    --rz-ressource-card-thumbnail-bg: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-3)));
-    --rz-ressource-card-bg: light-dark(hsl(var(--rz-gray-18)), hsl(var(--rz-gray-2)));
+    --rz-ressource-card-thumbnail-bg: var(--rz-bg-well);
+    --rz-ressource-card-bg: var(--rz-bg-raised);
   }
 </style>

package/dist/fields/rich-text/core/features/upload/upload.svelte

@@ -2,6 +2,7 @@
   import type { UploadDoc } from '../../../../../core/prototype/collection/upload/types.js';
   import { apiUrl } from '../../../../../core/routes/util.js';
   import UploadThumbCell from '../../../../../panel/components/sections/collection/upload-thumb-cell/UploadThumbCell.svelte';
+  import { mediaMeta } from '../../../../../panel/util/upload-file.js';
   import Button from '../../../../../panel/components/ui/button/button.svelte';
   import * as Command from '../../../../../panel/components/ui/command/index.js';
   import * as Dialog from '../../../../../panel/components/ui/dialog/index.js';
@@ -166,8 +167,7 @@
     </div>
     <div class="rz-relation-upload__grid-info">
       <p class="rz-relation-upload__grid-filename">{item.filename}</p>
-      <p class="rz-relation-upload__grid-filesize">{item.filesize}</p>
-      <p class="rz-relation-upload__grid-mimetype">{item.mimeType}</p>
+      <p class="rz-relation-upload__grid-filesize">{mediaMeta(item)}</p>
     </div>
   </div>
 {/snippet}
@@ -207,12 +207,26 @@
   </Dialog.Content>
 </Dialog.Root>
 
-<style>:global(.ProseMirror-selectednode .rz-richtext-media) {
+<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. */
+:global(.ProseMirror-selectednode .rz-richtext-media) {
     .rz-richtext-media__media,
     :global(button.rz-richtext-media__add) {
-      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-spot) / var(--rz-ring-opacity, 1));
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
     }
     .rz-richtext-media__actions {
       display: flex;
@@ -241,8 +255,6 @@
         padding: 0;
       }
       .rz-richtext-media__button {
-        /*--foreground: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-8))) padding: 0 var(--rz-size-2);*/
-        /*--rz-button-default-bg: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-4)));*/
         border: 1px solid var(--foreground);
         /*color: var(--foreground);*/
         border-radius: 1rem;

package/dist/fields/rich-text/core/rich-text-editor-core.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import * as random from '../../../util/random.js';
+  import { Editor, type JSONContent } from '@tiptap/core';
+  import { onMount } from 'svelte';
+  import EditorBubbleMenu from '../component/bubble-menu/bubble-menu.svelte';
+  import { setRichTextContext } from '../component/context.svelte.js';
+  import DragHandler from '../component/drag-handle/drag-handle.svelte';
+  import '../component/styles/editor.css';
+  import Suggestion from '../component/suggestion/suggestion.svelte';
+  import { hasSuggestion } from '../util.js';
+  import { buildEditorConfig } from './build-editor-config.js';
+  import { defaultFeatures } from './features/index.js';
+  import type { RichTextFeature } from './types.js';
+
+  type Props = {
+    path: string;
+    features?: RichTextFeature[];
+    value?: JSONContent | null;
+    editable?: boolean;
+    error?: boolean;
+    class?: string;
+    onUpdate?: (json: JSONContent) => void;
+  };
+
+  const {
+    path,
+    features: wanted = defaultFeatures,
+    value,
+    editable = true,
+    error = false,
+    class: className,
+    onUpdate
+  }: Props = $props();
+
+  let element: HTMLElement;
+
+  let editor = $state<Editor>();
+  let features = $state<RichTextFeature[]>([]);
+  const instanceId = random.randomId(8);
+
+  const ctx = setRichTextContext(instanceId);
+
+  const withSuggestion = $derived(hasSuggestion(wanted));
+
+  // The editor starts with its content, and goes with the component.
+  onMount(() => {
+    const richTextEditorConfig = buildEditorConfig({ features: wanted });
+    features = richTextEditorConfig.features;
+    const options = { ...richTextEditorConfig.tiptap, element, editable };
+
+    try {
+      editor = new Editor({ ...options, content: value?.content ? value : undefined });
+    } catch (err) {
+      console.log(err);
+      editor = new Editor(options);
+    }
+
+    editor.on('update', ({ editor }) => {
+      onUpdate?.(editor.getJSON());
+    });
+
+    return () => editor?.destroy();
+  });
+
+  // The value changed outside this editor: another editor on the same path, a pasted block.
+  // The editor's own updates land here equal to its content and change nothing.
+  $effect(() => {
+    if (!editor) return;
+    if (JSON.stringify(value ?? null) === JSON.stringify(editor.getJSON())) return;
+    editor.commands.setContent(value?.content ? value : '', { emitUpdate: false });
+  });
+</script>
+
+<!-- The editor and its controls, over a value: what a field and an in-place text share. -->
+<div class="rz-rich-text__editor-wrapper">
+  <div
+    bind:this={element}
+    data-error={error ? 'true' : null}
+    class="rz-rich-text__editor {className ?? ''}"
+  ></div>
+
+  {#if editor && editor.isEditable}
+    <DragHandler {editor} />
+
+    {#if withSuggestion}
+      <Suggestion {editor} {features} />
+    {/if}
+
+    <EditorBubbleMenu {features} {editor} {path} context={ctx} />
+  {/if}
+</div>
+
+<style>
+  .rz-rich-text__editor-wrapper {
+    position: relative;
+
+    :global {
+      .ProseMirror-gapcursor:after {
+        border-top: 1px solid var(--rz-fg);
+      }
+    }
+  }
+</style>

package/dist/fields/rich-text/core/rich-text-editor-core.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type JSONContent } from '@tiptap/core';
+import '../component/styles/editor.css';
+import type { RichTextFeature } from './types.js';
+type Props = {
+    path: string;
+    features?: RichTextFeature[];
+    value?: JSONContent | null;
+    editable?: boolean;
+    error?: boolean;
+    class?: string;
+    onUpdate?: (json: JSONContent) => void;
+};
+declare const RichTextEditorCore: import("svelte").Component<Props, {}, "">;
+type RichTextEditorCore = ReturnType<typeof RichTextEditorCore>;
+export default RichTextEditorCore;

package/dist/fields/select/component/Select.svelte

@@ -10,7 +10,7 @@
 
   const { path, config, form }: SelectFieldProps = $props();
 
-  let listHTMLElement: HTMLElement;
+  let listHTMLElement = $state<HTMLElement>();
   let initialized = false;
   let options = $derived(config.get.options);
   const validValues = $derived(config.get.options.map((o) => o.value));
@@ -36,10 +36,11 @@
     }
   });
 
+  /** The picked options reorder by drag; the instance goes with the list. */
   $effect(() => {
-    if (config.get.many) {
-      sortable(listHTMLElement);
-    }
+    if (!config.get.many || !listHTMLElement) return;
+    const instance = sortable(listHTMLElement);
+    return () => instance.destroy();
   });
 
   $effect(() => {
@@ -106,9 +107,11 @@
           {#each field.value || [] as val (val)}
             {@const option = config.get.options.find((o) => o.value === val)}
             {#if option}
-              <Tag onRemove={() => removeValue(option.value)} readOnly={form.readOnly}>
-                {option.label}
-              </Tag>
+              <div class="rz-select__option">
+                <Tag onRemove={() => removeValue(option.value)} readOnly={form.readOnly}>
+                  {option.label}
+                </Tag>
+              </div>
             {/if}
           {/each}
         {:else if field.value}
@@ -142,6 +145,7 @@
                   <span>{option.label}</span>
                 </Command.Item>
               {/each}
+              <Command.Empty>{t__('common.nothing_found')}</Command.Empty>
             </Command.List>
           {/if}
         {/if}
@@ -151,57 +155,92 @@
   <Field.Hint {config} />
 </fieldset>
 
-<style>.rz-select {
-    margin-bottom: var(--rz-size-2);
+<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-select {
     position: relative;
 
     :global(.rz-command) {
       width: 100%;
-      border-radius: var(--rz-radius-md);
+      border-radius: var(--rz-radius-lg);
     }
 
     :global(.rz-command-input-select) {
+      min-width: var(--rz-size-24);
+      padding-inline: var(--rz-size-2);
       cursor: text;
     }
 
     :global(.rz-command-list) {
-      background-color: hsl(var(--rz-input-bg));
-      border: var(--rz-border);
-      border-radius: var(--rz-radius-md);
+      background-color: var(--rz-bg-float);
+      box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
       position: absolute;
       left: 0;
       right: 0;
-      top: var(--rz-size-12);
+      top: calc(100% + var(--rz-size-1-5));
       z-index: 20;
-      box-shadow: var(--rz-shadow-md);
+      border-radius: var(--rz-radius-xl);
     }
 
     :global(.rz-command-item) {
-      height: var(--rz-size-10);
+      min-height: var(--rz-size-7);
+      border-radius: var(--rz-radius-md);
+      font-size: var(--rz-text-md);
+    }
+
+    :global(.rz-command-item[aria-selected='true']) {
+      background-color: var(--rz-bg-hover);
+    }
+
+    /* Nothing matches: one quiet line. */
+    :global(.rz-command-empty) {
+      padding: var(--rz-size-2) var(--rz-size-2-5);
+      color: var(--rz-fg-subtle);
+      font-size: var(--rz-text-sm);
     }
   }
 
+  /* One well: the picked options, then the search. */
   .rz-select__list {
-    background-color: hsl(var(--rz-input-bg));
-    border: var(--rz-border);
-    border-radius: var(--rz-radius-md);
+    background-color: var(--rz-bg-well);
+    border: 1px solid var(--rz-border);
+    &:hover {
+    border-color: var(--rz-border-strong);
+  }
     display: flex;
     flex-wrap: wrap;
-    gap: var(--rz-size-2);
-    min-height: var(--rz-size-10);
-    padding: var(--rz-size-2) var(--rz-size-3);
+    align-items: center;
+    gap: var(--rz-size-1);
+    min-height: var(--rz-input-height);
+    padding: var(--rz-size-1);
+    border-radius: var(--rz-radius-lg);
   }
 
   .rz-select__list[data-focused] {
-    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));
+    outline: none;
+    border-color: var(--rz-accent-border);
+    box-shadow: 0 0 0 3px var(--rz-ring);
   }
 
   .rz-select__list[data-error] {
-    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-alert) / var(--rz-ring-opacity, 1));
+    outline: none;
+    border-color: var(--rz-danger);
+    box-shadow: 0 0 0 3px oklch(from var(--rz-danger) l c h / 0.15);
   }
 
   .rz-select__list--readonly {

package/dist/fields/slug/component/Slug.svelte

@@ -2,7 +2,6 @@
   import { t__ } from '../../../core/i18n/index.js';
   import { fieldset } from '../../../panel/components/fields/fieldset.svelte.js';
   import { Field } from '../../../panel/components/fields/index.js';
-  import Button from '../../../panel/components/ui/button/button.svelte';
   import { Input } from '../../../panel/components/ui/input/index.js';
   import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
   import { slugify } from '../../../util/string.js';
@@ -44,6 +43,9 @@
     field.value = inputElement.value;
   };
 
+  /** The field the slug is built from, by its last name: `attributes.title` → `title`. */
+  const sourceName = $derived(config.get.slugify?.split('.').at(-1) ?? '');
+
   const classNameCompact = $derived(
     config.get.layout === 'compact' ? 'rz-slug-field--compact' : ''
   );
@@ -53,71 +55,42 @@
 <fieldset class={classNames} use:fieldset={field}>
   <Field.Label {config} for={path || config.name} />
 
-  <div class="rz-slug">
-    <Input
-      id={path || config.name}
-      placeholder={config.get.placeholder}
-      data-error={field.error ? '' : null}
-      type="text"
-      icon={Hash}
-      value={field.value}
-      name={path || config.name}
-      oninput={onInput}
-      onfocus={() => (isFocused = true)}
-      onblur={() => (isFocused = false)}
-    />
+  <Input
+    id={path || config.name}
+    icon={Hash}
+    placeholder={config.get.placeholder}
+    data-error={field.error ? '' : null}
+    type="text"
+    value={field.value}
+    name={path || config.name}
+    oninput={onInput}
+    onfocus={() => (isFocused = true)}
+    onblur={() => (isFocused = false)}
+  />
 
+  <Field.Hint {config}>
+    {#if !config.get.hint}{t__('fields.slug_hint')}{/if}
     {#if config.get.slugify}
-      <Button
-        disabled={!field.editable}
-        onclick={() => (field.value = slugifiedValue)}
+      <button
         type="button"
-        size="sm"
-        variant="secondary"
+        disabled={!field.editable || !slugifiedValue}
+        onclick={() => (field.value = slugifiedValue)}
       >
-        {t__('fields.generate_from', config.get.slugify)}
-      </Button>
+        {t__('fields.build_from', sourceName)}
+      </button>
     {/if}
-  </div>
-  <Field.Hint {config} />
+  </Field.Hint>
   <Field.Error error={field.error} />
 </fieldset>
 
 <style>
-  .rz-slug {
-    position: relative;
-
-    :global(.rz-input) {
-      font-family: var(--rz-font-mono);
-    }
-
-    :global(.rz-button) {
-      position: absolute;
-      right: var(--rz-size-1-5);
-      top: var(--rz-size-1-5);
-    }
-
-    :global(.rz-slug__icon) {
-      opacity: 0.37;
-      position: absolute;
-      left: 0.75rem;
-      top: 1rem;
-    }
-  }
-
   .rz-slug-field--compact {
-    :global(label) {
+    :global(.rz-field-label) {
       display: none;
     }
     :global(.rz-field-error) {
-      position: absolute;
-      top: var(--rz-size-3);
-      right: calc(var(--rz-fields-padding) + var(--rz-size-40));
-    }
-    :global(.rz-input) {
-      font-size: var(--rz-text-md);
-      padding: var(--rz-size-5) 0 var(--rz-size-5) var(--rz-size-8);
-      height: var(--rz-size-11);
+      top: var(--rz-size-1);
+      right: var(--rz-size-1);
     }
   }
 </style>

package/dist/fields/slug/index.d.ts

@@ -55,6 +55,7 @@ export declare class SlugFieldBuilder extends FormFieldBuilder<SlugField> {
         defaultValue?: string | DefaultValueFn<string> | undefined;
         isEmpty: (value: unknown) => boolean;
         root?: boolean | undefined;
+        index?: boolean | undefined;
         slugify?: string | undefined;
         unique?: boolean | undefined;
         isTitle?: true | undefined;

package/dist/fields/slug/index.js

@@ -1,5 +1,5 @@
 import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
-import { validate } from '../../util/index.js';
+import * as validate from '../../core/fields/validate.js';
 import { sanitize, slugify } from '../../util/string.js';
 import Cell from './component/Cell.svelte';
 import Slug from './component/Slug.svelte';