rimecms 0.32.1 → 1.0.0

package/dist/panel/components/sections/document/AuthAPIKeyDialog.svelte

@@ -49,18 +49,34 @@
         icon={copied ? Check : Copy}
       />
     </p>
-    <Dialog.Footer --rz-justify-content="space-between">
+    <Dialog.Footer>
       <Button onclick={() => (apiKey = null)}>{t__('common.close')}</Button>
     </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
 
-<style>
-  .rz-dialog-api__key {
-    --rz-button-ghost-bg-hover: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-5)));
+<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-dialog-api__key {
     position: relative;
-    border: var(--rz-border);
-    background-color: hsl(var(--rz-input-bg));
+    background-color: var(--rz-bg-well);
+    border: 1px solid var(--rz-border);
+    &:hover {
+    border-color: var(--rz-border-strong);
+  }
     min-height: var(--rz-input-height);
     align-items: center;
     display: flex;
@@ -73,7 +89,7 @@
         right: var(--rz-size-1);
       }
       .rz-dialog-api--copied {
-        color: hsl(var(--rz-color-success));
+        color: var(--rz-success);
       }
     }
   }

package/dist/panel/components/sections/document/AuthFooter.svelte

@@ -68,7 +68,7 @@
     {:else if user.attributes.isStaff && page.data?.hasMailer}
       {#if isAuthConfig(collection) && collection.auth.type === 'password'}
         <div>
-          <Button onclick={sendPasswordResetLink} variant="outline">
+          <Button onclick={sendPasswordResetLink} variant="secondary" size="sm">
             {t__('common.sendPasswordResetLink')}
           </Button>
         </div>
@@ -77,18 +77,37 @@
   </div>
 {/if}
 
-<style>
+<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. */
+/* A card like a group's body: the password fields, 20px apart, 14px from its sides. */
   .rz-document-auth {
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
     display: grid;
-    padding: var(--rz-size-5) var(--rz-size-5) var(--rz-size-6);
-    border-radius: var(--rz-radius-lg);
-    background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
-    border: var(--rz-border);
-    gap: var(--rz-size-8);
-    margin-top: var(--rz-size-4);
-
-    & > :global(*) {
-      padding: 0 var(--rz-fields-padding);
-    }
+    gap: var(--rz-size-5);
+    padding: var(--rz-size-4) var(--rz-size-3-5);
+    border-radius: var(--rz-radius-xl);
+  }
+
+  /* Updating: the reset link alone, no card. */
+  .rz-document-auth:not(:has(fieldset)) {
+    padding: 0;
+    background-color: transparent;
+    box-shadow: none;
   }
 </style>

package/dist/panel/components/sections/document/AutoSaveBanner.svelte

@@ -86,15 +86,30 @@
   </div>
 {/if}
 
-<style>
-  .rz-auto-save-banners {
+<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-auto-save-banners {
     position: sticky;
     bottom: 0;
     z-index: 10;
     display: grid;
     gap: var(--rz-size-2);
-    padding: var(--rz-size-3) var(--rz-page-gutter);
-    background-color: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-4)));
+    padding-block: var(--rz-size-3);
+    padding-inline: max(var(--rz-page-gutter), calc((100% - var(--rz-page-width, 40rem)) / 2));
+    background-color: var(--rz-bg-page);
   }
   .rz-auto-save-banner {
     display: flex;
@@ -102,10 +117,12 @@
     justify-content: space-between;
     gap: var(--rz-size-4);
     padding: var(--rz-size-3) var(--rz-size-4);
-    border: 1px solid hsl(var(--rz-color-warn) / 0.5);
-    border-radius: var(--rz-radius-lg);
+    border-radius: var(--rz-radius-xl);
     font-size: var(--rz-text-sm);
-    background-color: hsl(var(--rz-color-warn) / 0.12);
+    background-color: var(--rz-bg-float);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
   }
   .rz-auto-save-banner__actions {
     display: flex;

package/dist/panel/components/sections/document/ButtonSave.svelte

@@ -1,40 +1,51 @@
 <script lang="ts">
+  import { t__ } from '../../../../core/i18n/index.js';
+  import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
   import Button from '../../ui/button/button.svelte';
-  import type { ButtonProps, ButtonVariant } from '../../ui/button/index.js';
+  import type { ButtonSize, ButtonVariant } from '../../ui/button/index.js';
   import SpinLoader from '../../ui/spin-loader/SpinLoader.svelte';
-  import { Save } from '@lucide/svelte';
 
   type Props = {
+    form: DocumentFormContext;
     variant?: ButtonVariant;
-    disabled: boolean;
-    processing: boolean;
+    size?: ButtonSize;
     class?: string;
-    label: string;
-  } & ButtonProps;
+  };
+  const { form, variant = 'default', size = 'default', class: className }: Props = $props();
 
-  const {
-    formaction,
-    variant = 'default',
-    disabled,
-    processing,
-    label,
-    class: className,
-    ...restProps
-  }: Props = $props();
+  const label = $derived(form.values.id ? t__('common.save') : t__('common.create'));
+
+  /**
+   * What the save does, said on the button and read off the submitter by the form:
+   *
+   * ```
+   * no versions                       save in place
+   * versions, no draft                data-fork: a version per save
+   * versions and draft, published     data-status: the save keeps it published
+   * versions and draft, draft         save the draft
+   * ```
+   *
+   * `data-submit` is how ⌘S and the settings menu find the button.
+   */
+  const versions = $derived(form.config.versions);
+  const fork = $derived(!!versions && !versions.draft);
+  const status = $derived(
+    versions && versions.draft && form.values.status === 'published' ? 'published' : undefined
+  );
 </script>
 
 <Button
   {variant}
-  formaction={formaction || null}
+  {size}
   class={className || null}
   type="submit"
-  {disabled}
-  {...restProps}
+  disabled={!form.canSubmit}
+  data-submit
+  data-fork={fork ? '' : undefined}
+  data-status={status}
 >
-  {#if processing}
+  {#if form.processing}
     <SpinLoader />
-  {:else}
-    <Save size="13" />
   {/if}
   {label}
 </Button>

package/dist/panel/components/sections/document/ButtonSave.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { ButtonProps, ButtonVariant } from '../../ui/button/index.js';
+import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
+import type { ButtonSize, ButtonVariant } from '../../ui/button/index.js';
 type Props = {
+    form: DocumentFormContext;
     variant?: ButtonVariant;
-    disabled: boolean;
-    processing: boolean;
+    size?: ButtonSize;
     class?: string;
-    label: string;
-} & ButtonProps;
+};
 declare const ButtonSave: import("svelte").Component<Props, {}, "">;
 type ButtonSave = ReturnType<typeof ButtonSave>;
 export default ButtonSave;

package/dist/panel/components/sections/document/ButtonStatus.svelte

@@ -6,6 +6,7 @@
   import * as Dialog from '../../ui/dialog/index.js';
   import * as Radio from '../../ui/radio-group/index.js';
   import { getAPIProxyContext } from '../../../context/api-proxy.svelte.js';
+  import { useCommands } from '../../../context/commands.svelte.js';
   import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
   import { toKebabCase } from '../../../../util/string';
   import { toast } from 'svelte-sonner';
@@ -21,14 +22,14 @@
 
   let dialogOpen = $state(false);
 
-  async function handleValidateStatus() {
+  async function handleValidateStatus(next: string = status) {
     const urlId = form.values._prototype === 'collection' ? `/${form.values.id}` : '/';
     await fetch(
       `${apiUrl(toKebabCase(form.values._type))}${urlId}?${PARAMS.VERSION_ID}=${form.values.versionId}`,
       {
         method: 'PATCH',
         body: JSON.stringify({
-          status: status
+          status: next
         })
       }
     )
@@ -37,7 +38,7 @@
           toast.success(t__('common.doc_updated'));
           // The server holds the new status already: the form takes it without getting dirty,
           // so no auto-save follows a publish.
-          form.sync('status', status);
+          form.sync('status', next);
           dialogOpen = false;
           invalidateAll();
           // The write went around the form: the version history re-reads its statuses.
@@ -52,14 +53,32 @@
   }
 
   let status = $derived(form.values.status);
+
+  /** The other statuses, one line each. */
+  useCommands(() =>
+    statusList
+      .filter((candidate) => candidate !== form.values.status)
+      .map((candidate) => ({
+        id: `document.status.${candidate}`,
+        label: t__('common.mark_as', t__(`common.${candidate}`)),
+        group: t__('common.document'),
+        run: () => handleValidateStatus(candidate)
+      }))
+  );
 </script>
 
 <Dialog.Root bind:open={dialogOpen}>
   <Dialog.Trigger>
     {#snippet child(props)}
-      <Button size="sm" variant="secondary" onclick={() => (dialogOpen = true)} {...props}>
+      <Button
+        size="sm"
+        variant="ghost"
+        class="rz-status__button"
+        onclick={() => (dialogOpen = true)}
+        {...props}
+      >
         <StatusDot status={form.values.status} />
-        <p class="rz-status__text">{t__(`common.${form.values.status}`)}</p>
+        <span class="rz-status__text">{t__(`common.${form.values.status}`)}</span>
       </Button>
     {/snippet}
   </Dialog.Trigger>
@@ -69,32 +88,61 @@
         <div class="rz-radio__option">
           <Radio.Item id="document.{status}" value={status} />
           <Label for="document.{status}">
-            {t__(`common.${status}`)}<br />
+            {t__(`common.${status}`)}
             <p>{t__(`common.${status}_infos`)}</p>
           </Label>
         </div>
       {/each}
     </Radio.Root>
-    <Dialog.Footer --rz-justify-content="space-between">
-      <Button onclick={handleValidateStatus} variant="outline">Validate</Button>
-      <Button onclick={() => (dialogOpen = false)} variant="secondary">Cancel</Button>
+    <Dialog.Footer>
+      <Button onclick={() => handleValidateStatus()} variant="outline" kbd="enter">Validate</Button>
+      <Button onclick={() => (dialogOpen = false)} variant="secondary" kbd="escape">
+        {t__('common.cancel')}
+      </Button>
     </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
 
-<style>.rz-radio__option {
+<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. */
+/* The status as a ghost button: a small dot, draft or published, then its name. */
+  :global(.rz-status__button) {
+    --rz-dot-size: var(--rz-size-1-5);
+  }
+
+  /* Each status a row: the radio, its name, a line on what it means. */
+  .rz-radio__option {
     display: flex;
+    align-items: flex-start;
     gap: var(--rz-size-3);
-    padding: var(--rz-size-3);
-    border: var(--rz-border);
-  }
-  :global {
-    .rz-dialog-footer button {
-      flex: 1;
+    padding: var(--rz-size-3) var(--rz-size-3-5);
+    border-radius: var(--rz-radius-lg);
+    box-shadow: 0 0 0 1px var(--rz-border);
+
+    :global(.rz-label) {
+      color: var(--rz-fg);
+      font-size: var(--rz-text-md);
+    }
+
+    p {
+      margin-top: var(--rz-size-0-5);
+      color: var(--rz-fg-subtle);
+      font-size: var(--rz-text-sm);
+      font-variation-settings: 'wght' 400;
+      font-weight: 400;
     }
-  }
-  p {
-    font-variation-settings: 'wght' 400;
-    font-weight: 400;
   }
 </style>

package/dist/panel/components/sections/document/ChangeSlugDialog.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+  import { invalidateAll } from '$app/navigation';
+  import type { BuiltCollection } from '../../../../core/config/types';
+  import { PARAMS } from '../../../../core/constants.js';
+  import { t__ } from '../../../../core/i18n/index.js';
+  import { apiUrl } from '../../../../core/routes/util.js';
+  import * as Dialog from '../../ui/dialog/index.js';
+  import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
+  import { getLocaleContext } from '../../../context/locale.svelte.js';
+  import { slugify } from '../../../../util/string.js';
+  import { toast } from 'svelte-sonner';
+  import Button from '../../ui/button/button.svelte';
+  import Label from '../../ui/label/label.svelte';
+
+  type Props = { form: DocumentFormContext; config: BuiltCollection; open: boolean };
+  let { form, config, open = $bindable() }: Props = $props();
+
+  const locale = getLocaleContext();
+
+  const current = $derived(String(form.values._slug ?? ''));
+  const url = $derived(String(form.values.url ?? ''));
+
+  /** The address around the page's own slug: what the input sits between. */
+  const cut = $derived(url.lastIndexOf(current));
+  const before = $derived(cut >= 0 ? url.slice(0, cut).replace(/^https?:\/\//, '') : '');
+  const after = $derived(cut >= 0 ? url.slice(cut + current.length) : '');
+
+  let value = $state('');
+  let error = $state<string | null>(null);
+  let saving = $state(false);
+
+  $effect(() => {
+    if (!open) return;
+    value = current;
+    error = null;
+  });
+
+  /** What the server will keep: lowercase, dashes, no dash at either end. */
+  const next = $derived(slugify(value).replace(/^-+|-+$/g, ''));
+
+  async function save() {
+    if (!next) {
+      error = t__('common.url_slug_required');
+      return;
+    }
+    if (next === current) {
+      open = false;
+      return;
+    }
+
+    saving = true;
+    const search = locale.code ? `?${PARAMS.LOCALE}=${locale.code}` : '';
+    const response = await fetch(`${apiUrl(config.kebab, String(form.values.id))}/slug${search}`, {
+      method: 'PATCH',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ slug: next })
+    }).catch(() => null);
+    saving = false;
+
+    if (response?.ok) {
+      toast.success(t__('common.url_changed'));
+      open = false;
+      invalidateAll();
+      return;
+    }
+    // A slug the client already checked is refused for one reason: a sibling holds it.
+    error = response?.status === 400 ? t__('common.url_slug_taken') : t__('error.generic');
+  }
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Content size="sm">
+    <Dialog.Header>{t__('common.change_url')}</Dialog.Header>
+
+    <div class="rz-change-slug">
+      <Label for="rz-change-slug-input">{t__('common.url_address')}</Label>
+      <div class="rz-change-slug__field" data-invalid={error ? '' : null}>
+        <!-- Cut from the left when it is long: the end, next to the slug, is what matters. -->
+        {#if before}<span class="rz-change-slug__prefix"><bdi>{before}</bdi></span>{/if}
+        <input
+          id="rz-change-slug-input"
+          class="rz-change-slug__input"
+          bind:value
+          oninput={() => (error = null)}
+          autocomplete="off"
+          spellcheck="false"
+        />
+      </div>
+      {#if error}
+        <p class="rz-change-slug__error">{error}</p>
+      {:else}
+        <p class="rz-change-slug__preview">
+          {before}<mark>{next || '…'}</mark>{after}
+        </p>
+      {/if}
+    </div>
+
+    <Dialog.Footer>
+      <Button onclick={save} disabled={saving || !next || next === current} kbd="enter">
+        {t__('common.change_url')}
+      </Button>
+      <Button variant="secondary" onclick={() => (open = false)} kbd="escape">
+        {t__('common.cancel')}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
+
+<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-change-slug {
+    display: grid;
+    gap: var(--rz-size-2);
+  }
+
+  /* One well: the fixed start of the address, then the slug to type. */
+  .rz-change-slug__field {
+    background-color: var(--rz-bg-well);
+    border: 1px solid var(--rz-border);
+    &:hover {
+    border-color: var(--rz-border-strong);
+  }
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    height: var(--rz-input-height);
+    border-radius: var(--rz-radius-md);
+
+    &:focus-within {
+      outline: none;
+      border-color: var(--rz-accent-border);
+      box-shadow: 0 0 0 3px var(--rz-ring);
+    }
+
+    &[data-invalid] {
+      outline: none;
+      border-color: var(--rz-danger);
+      box-shadow: 0 0 0 3px oklch(from var(--rz-danger) l c h / 0.15);
+    }
+  }
+
+  .rz-change-slug__prefix {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    padding-left: var(--rz-size-3);
+    color: var(--rz-fg-subtle);
+    font-family: var(--rz-font-mono);
+    font-size: var(--rz-text-xs);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    direction: rtl;
+  }
+
+  .rz-change-slug__input {
+    flex: 1 0 8rem;
+    min-width: 0;
+    height: 100%;
+    padding-inline: 1px var(--rz-size-3);
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: var(--rz-fg);
+    font-family: var(--rz-font-mono);
+    font-size: var(--rz-text-xs);
+  }
+
+  .rz-change-slug__preview {
+    color: var(--rz-fg-muted);
+    font-family: var(--rz-font-mono);
+    font-size: var(--rz-text-xs);
+    overflow-wrap: anywhere;
+
+    mark {
+      padding-inline: 2px;
+      border-radius: 3px;
+      background: var(--rz-accent-tint);
+      color: var(--rz-accent-text);
+    }
+  }
+
+  .rz-change-slug__error {
+    color: var(--rz-danger);
+    font-size: var(--rz-text-xs);
+  }
+</style>

package/dist/panel/components/sections/document/ChangeSlugDialog.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { BuiltCollection } from '../../../../core/config/types';
+import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
+type Props = {
+    form: DocumentFormContext;
+    config: BuiltCollection;
+    open: boolean;
+};
+declare const ChangeSlugDialog: import("svelte").Component<Props, {}, "open">;
+type ChangeSlugDialog = ReturnType<typeof ChangeSlugDialog>;
+export default ChangeSlugDialog;

package/dist/panel/components/sections/document/CurrentlyEdited.svelte

@@ -24,7 +24,7 @@
     position: fixed;
     inset: 0;
     z-index: 100;
-    background: light-dark(hsl(var(--rz-gray-12) / 0.8), hsl(var(--rz-gray-3) / 0.8));
-    backdrop-filter: blur(2px);
+    background: oklch(from var(--rz-bg-page) l c h / 0.8);
+    backdrop-filter: blur(var(--rz-overlay-blur));
   }
 </style>