rimecms 0.33.0 → 1.0.1

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { beforeNavigate, goto, invalidateAll } from '$app/navigation';
   import { page } from '$app/state';
-  import { untrack } from 'svelte';
   import type { ResolvedPathname } from '$app/types';
   import { isAuthConfig } from '../../../../core/auth/util';
   import { PARAMS } from '../../../../core/constants.js';
@@ -12,7 +11,10 @@
   import { isLockHeldByOther } from '../../../../core/prototype/shared/metas/lock.js';
   import type { GenericDoc } from '../../../../core/prototype/types';
   import { apiUrl } from '../../../../core/routes/util.js';
+  import BlocksFocus from '../../../../fields/blocks/component/focus/BlocksFocus.svelte';
+  import { setBlocksFocusContext } from '../../../../fields/blocks/component/focus/focus.svelte.js';
   import * as Dialog from '../../ui/dialog/index.js';
+  import { useCommands } from '../../../context/commands.svelte.js';
   import { getConfigContext } from '../../../context/config.svelte.js';
   import {
     setDocumentFormContext,
@@ -21,12 +23,15 @@
   import { getLocaleContext } from '../../../context/locale.svelte.js';
   import { getUserContext } from '../../../context/user.svelte.js';
   import { getVersionsContext } from '../../../context/versions.svelte.js';
+  import { Save } from '@lucide/svelte';
+  import { untrack } from 'svelte';
   import RenderFields from '../../fields/RenderFields.svelte';
   import Button from '../../ui/button/button.svelte';
   import AuthApiKeyDialog from './AuthAPIKeyDialog.svelte';
   import AuthFooter from './AuthFooter.svelte';
   import AutoSaveBanner from './AutoSaveBanner.svelte';
   import CurrentlyEdited from './CurrentlyEdited.svelte';
+  import DocumentChildren from './DocumentChildren.svelte';
   import Header from './Header.svelte';
   import UploadHeader from './upload-header/UploadHeader.svelte';
 
@@ -134,6 +139,10 @@
     beforeRedirect: beforeRedirect
   });
 
+  /** The blocks focus mode, on the document itself: a nested create has none. */
+  // svelte-ignore state_referenced_locally
+  const focus = nestedLevel === 0 ? setBlocksFocusContext(form) : null;
+
   /**
    * Somebody else has this document open, recently enough to still mean it.
    *
@@ -271,19 +280,25 @@
     return () => window.removeEventListener('pagehide', release);
   });
 
-  function handleKeyDown(event: KeyboardEvent) {
-    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 from anywhere in the document, a field included. */
+  useCommands(() => [
+    {
+      id: 'document.save',
+      label: t__('common.save'),
+      group: t__('common.document'),
+      icon: Save,
+      keys: 'mod+s',
+      inField: true,
+      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();
   }
 
   async function beforeRedirect(data?: FormSuccessData) {
@@ -306,24 +321,9 @@
   }
 </script>
 
-<svelte:window onkeydown={handleKeyDown} />
-
-{#snippet meta(label: string, value: string)}
-  <p class="rz-document__metas">
-    <span>{label} : </span>
-    {value}
-  </p>
-{/snippet}
-
-{#snippet metaUser(label: string, name: string)}
-  <p class="rz-document__metas">
-    <span>{label} : </span>
-    {name || '—'}
-  </p>
-{/snippet}
-
 <form
   class="rz-document {className}"
+  data-nested={nestedLevel > 0 ? '' : undefined}
   bind:this={formElement}
   use:form.enhance
   enctype="multipart/form-data"
@@ -342,30 +342,40 @@
     {#if config.type === 'collection' && isUploadConfig(config)}
       <UploadHeader accept={config.upload.accept} create={operation === 'create'} {form} />
     {/if}
-    <RenderFields fields={config.fields} {form} />
+    {#if focus?.path}
+      <BlocksFocus {form} />
+    {:else}
+      <RenderFields fields={config.fields} {form} />
+    {/if}
     <!--  -->
     {#if config.type === 'collection' && isAuthConfig(config) && config.auth.type === 'password'}
       <AuthFooter collection={config} {operation} {form} />
     {/if}
   </div>
 
-  <div class="rz-document__infos">
-    {#if form.values.createdAt}
-      {@render meta(t__('common.created_at'), locale.dateFormat(form.values.createdAt))}
-    {/if}
-    {#if form.values.createdBy}
-      {@render metaUser(t__('common.created_by'), form.values.createdBy?.name)}
-    {/if}
-    {#if form.values.updatedAt}
-      {@render meta(t__('common.last_update'), locale.dateFormat(form.values.updatedAt))}
-    {/if}
-    {#if form.values.updatedBy}
-      {@render metaUser(t__('common.updated_by'), form.values.updatedBy?.name)}
-    {/if}
-    {#if form.values.id}
-      {@render meta('id', form.values.id)}
-    {/if}
-  </div>
+  <!-- A pre-footer: the pages under this one, outside the form's tabs. -->
+  {#if nestedLevel === 0 && operation === 'update' && config.type === 'collection' && config.nested && form.values.id}
+    <DocumentChildren {config} id={String(form.values.id)} />
+  {/if}
+
+  <!-- Quiet lines at the bottom: created, updated, the id. -->
+  {#if form.values.id}
+    <div class="rz-document__infos">
+      {#if form.values.createdAt}
+        <p class="rz-document__metas">
+          {t__('common.created_on', locale.dateFormat(form.values.createdAt))}
+          {#if form.values.createdBy?.name}{t__('common.by_user', form.values.createdBy.name)}{/if}
+        </p>
+      {/if}
+      {#if form.values.updatedAt}
+        <p class="rz-document__metas">
+          {t__('common.updated_on', locale.dateFormat(form.values.updatedAt))}
+          {#if form.values.updatedBy?.name}{t__('common.by_user', form.values.updatedBy.name)}{/if}
+        </p>
+      {/if}
+      <p class="rz-document__metas">{t__('common.id')} {form.values.id}</p>
+    </div>
+  {/if}
 
   <!-- Last in the flow, so its sticky bottom holds it at the viewport's edge until the end. -->
   {#if nestedLevel === 0 && operation === 'update' && page.data.autoSaves}
@@ -391,11 +401,11 @@
       </Dialog.Header>
       <p>{t__('common.leave_confirm_text')}</p>
       <!--  -->
-      <Dialog.Footer --rz-justify-content="space-between">
-        <Button onclick={confirmLeave}>
+      <Dialog.Footer>
+        <Button onclick={confirmLeave} kbd="enter">
           {t__('common.confirm')}
         </Button>
-        <Button onclick={() => (interceptedLeave = null)} variant="secondary">
+        <Button onclick={() => (interceptedLeave = null)} variant="secondary" kbd="escape">
           {t__('common.cancel')}
         </Button>
       </Dialog.Footer>
@@ -403,34 +413,55 @@
   </Dialog.Root>
 </form>
 
-<style>.rz-document {
+<style>
+  /**
+   * The document: a centred column, its heading lined up with its fields.
+   *
+   *   --rz-document-width: the column, 40rem
+   */
+  .rz-document {
+    --rz-page-width: var(--rz-document-width, 40rem);
     container: rz-document / inline-size;
-    /* min-height: 100vh; */
     position: relative;
-    background-image: var(--thumbnail);
-    background-size: cover;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* A page of its own is at least the window's height, so the metas sit at its bottom. Its top
+     edge glows, as tall as the window whatever the page's length. */
+  .rz-document:not([data-nested]) {
+    min-height: 100svh;
+    background-image: var(--rz-glow);
+    background-repeat: no-repeat;
+    background-size: 100% 100svh;
+  }
+
+  /* The column stops growing and centres itself; the gutter is the floor. */
+  .rz-document__fields,
+  .rz-document__infos {
+    padding-inline: max(var(--rz-page-gutter), calc((100% - var(--rz-page-width)) / 2));
   }
 
   .rz-document__fields {
     display: grid;
-    gap: var(--rz-size-4);
-    /* min-height: calc(100vh - var(--rz-size-14)); */
+    gap: var(--rz-size-6);
     align-content: flex-start;
     margin-left: calc(-1 * var(--rz-fields-padding));
     margin-right: calc(-1 * var(--rz-fields-padding));
-    padding: var(--rz-size-5) var(--rz-page-gutter);
-    padding-bottom: var(--rz-size-24);
+    padding-block: var(--rz-size-6) var(--rz-size-24);
   }
+
   .rz-document__infos {
-    border-top: var(--rz-border);
-    padding-inline: var(--rz-page-gutter);
-    padding-block: var(--rz-size-6);
+    display: grid;
+    gap: var(--rz-size-1);
+    margin-top: auto;
+    border-top: 1px solid var(--rz-border);
+    padding-block: var(--rz-size-5) var(--rz-size-6);
   }
+
   .rz-document__metas {
+    color: var(--rz-fg-subtle);
     font-size: var(--rz-text-xs);
-  }
-  .rz-document__metas span {
-    font-variation-settings: 'wght' 600;
-    font-weight: 600;
+    font-variant-numeric: tabular-nums;
   }
 </style>

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

@@ -0,0 +1,175 @@
+<script lang="ts">
+  import type { BuiltCollection } from '../../../../core/config/types';
+  import { PARAMS } from '../../../../core/constants.js';
+  import { t__ } from '../../../../core/i18n/index.js';
+  import type { GenericDoc } from '../../../../core/prototype/types';
+  import { apiUrl, panelUrl } from '../../../../core/routes/util.js';
+  import { getLocaleContext } from '../../../context/locale.svelte.js';
+
+  type Props = { config: BuiltCollection; id: string };
+  const { config, id }: Props = $props();
+
+  const locale = getLocaleContext();
+
+  /** The first ones: past that, the collection's list. */
+  const LIMIT = 20;
+
+  let children = $state<GenericDoc[]>([]);
+  let more = $state(false);
+
+  // One query: the pages whose parent this is, with their addresses.
+  $effect(() => {
+    const params = new URLSearchParams({
+      'where[_parent][equals]': id,
+      sort: '_position',
+      limit: String(LIMIT + 1)
+    });
+    if (locale.code) params.set(PARAMS.LOCALE, locale.code);
+
+    let cancelled = false;
+    fetch(`${apiUrl(config.kebab)}?${params}`)
+      .then((response) => (response.ok ? response.json() : { docs: [] }))
+      .then(({ docs }: { docs: GenericDoc[] }) => {
+        if (cancelled) return;
+        more = docs.length > LIMIT;
+        children = docs.slice(0, LIMIT);
+      })
+      .catch(() => {});
+    return () => (cancelled = true);
+  });
+
+  /** The path part of a child's url, or its path when it has no url. */
+  const pathOf = (doc: GenericDoc) => {
+    try {
+      return new URL(String(doc.url)).pathname;
+    } catch {
+      return doc._urlPath ? `/${doc._urlPath}` : '';
+    }
+  };
+</script>
+
+{#if children.length}
+  <section class="rz-document-children" aria-labelledby="rz-document-children-title">
+    <header class="rz-document-children__head">
+      <h2 class="rz-document-children__title" id="rz-document-children-title">
+        {t__('common.under_this_page')}
+        <span class="rz-document-children__count">{more ? `${LIMIT}+` : children.length}</span>
+      </h2>
+      {#if more}
+        <a class="rz-document-children__all" href={panelUrl(config.kebab)}
+          >{t__('common.view_all')}</a
+        >
+      {/if}
+    </header>
+
+    <div class="rz-document-children__list">
+      {#each children as child (child.id)}
+        <a class="rz-document-children__row" href={panelUrl(config.kebab, child.id)}>
+          <span class="rz-document-children__name">{child.title || t__('common.untitled')}</span>
+          <span class="rz-document-children__path">{pathOf(child)}</span>
+        </a>
+      {/each}
+    </div>
+  </section>
+{/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. */
+/* After the form and its tabs, the pages under this one, in the document's column. */
+  .rz-document-children {
+    display: grid;
+    gap: var(--rz-size-3);
+    padding-block: var(--rz-size-6) var(--rz-size-10);
+    padding-inline: max(var(--rz-page-gutter), calc((100% - var(--rz-page-width)) / 2));
+    border-top: 1px solid var(--rz-border);
+  }
+
+  .rz-document-children__head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--rz-size-2);
+  }
+
+  .rz-document-children__title {
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+    display: flex;
+    align-items: baseline;
+    gap: var(--rz-size-2);
+    font-size: var(--rz-text-sm);
+  }
+
+  .rz-document-children__count {
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .rz-document-children__all {
+    color: var(--rz-accent-text);
+    font-size: var(--rz-text-xs);
+    text-decoration: none;
+  }
+
+  .rz-document-children__list {
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
+    display: grid;
+    overflow: hidden;
+    border-radius: var(--rz-radius-lg);
+  }
+
+  .rz-document-children__row {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-3);
+    height: var(--rz-size-10);
+    padding-inline: var(--rz-size-3-5);
+    color: var(--rz-fg);
+    text-decoration: none;
+
+    & + & {
+      box-shadow: inset 0 1px 0 var(--rz-border);
+    }
+
+    &:hover {
+      background: var(--rz-bg-hover);
+    }
+  }
+
+  .rz-document-children__name {
+    flex: none;
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .rz-document-children__path {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--rz-fg-subtle);
+    font-family: var(--rz-font-mono);
+    font-size: var(--rz-text-xs);
+    text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { BuiltCollection } from '../../../../core/config/types';
+type Props = {
+    config: BuiltCollection;
+    id: string;
+};
+declare const DocumentChildren: import("svelte").Component<Props, {}, "">;
+type DocumentChildren = ReturnType<typeof DocumentChildren>;
+export default DocumentChildren;

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

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import type { BuiltArea, BuiltCollection } from '../../../../core/config/types';
+  import { t__ } from '../../../../core/i18n/index.js';
+  import { VERSIONS_STATUS } from '../../../../core/prototype/shared/versions/constant.js';
+  import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
+  import { Check, Copy, Globe } from '@lucide/svelte';
+  import { toast } from 'svelte-sonner';
+  import Button from '../../ui/button/button.svelte';
+  import ChangeSlugDialog from './ChangeSlugDialog.svelte';
+
+  type Props = { form: DocumentFormContext; config: BuiltArea | BuiltCollection };
+  const { form, config }: Props = $props();
+
+  const url = $derived(form.values.url as string | null | undefined);
+  /** The address as a reader writes it, without its scheme. */
+  const shown = $derived(url ? url.replace(/^https?:\/\//, '') : '');
+
+  /** The slug changes on the published version, or on any when the config has no drafts. */
+  const isPublished = $derived(
+    !config.versions?.draft || form.values.status === VERSIONS_STATUS.PUBLISHED
+  );
+  // An area has a url and no slug.
+  const canChange = $derived(
+    config.type === 'collection' && isPublished && !form.readOnly && !!form.values._slug
+  );
+
+  let copied = $state(false);
+  let dialogOpen = $state(false);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(url!);
+      copied = true;
+      setTimeout(() => (copied = false), 1400);
+    } catch {
+      toast.error(t__('error.generic'));
+    }
+  }
+</script>
+
+{#if url}
+  <span class="rz-document-url">
+    <a class="rz-document-url__link" href={url} target="_blank" rel="noreferrer">
+      <Globe size={14} />
+      <span class="rz-document-url__text">{shown}</span>
+    </a>
+    <Button
+      size="icon-sm"
+      variant="ghost"
+      icon={copied ? Check : Copy}
+      onclick={copy}
+      aria-label={copied ? t__('common.url_copied') : t__('common.copy_url')}
+    />
+    {#if canChange}
+      <Button size="sm" variant="ghost" onclick={() => (dialogOpen = true)}>
+        {t__('common.change_url')}
+      </Button>
+    {:else if !isPublished}
+      <span class="rz-document-url__note">{t__('common.url_on_published')}</span>
+    {/if}
+  </span>
+
+  {#if canChange && config.type === 'collection'}
+    <ChangeSlugDialog bind:open={dialogOpen} {form} {config} />
+  {/if}
+{/if}
+
+<style>
+  /* The page's address under its title: the link, copy, and "Change url" on the published page. */
+  .rz-document-url {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--rz-size-1) var(--rz-size-2);
+    min-width: 0;
+  }
+
+  .rz-document-url__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+    min-width: 0;
+    max-width: 100%;
+    height: var(--rz-size-7);
+    padding-inline: var(--rz-size-2) var(--rz-size-2-5);
+    border-radius: var(--rz-radius-md);
+    background-color: var(--rz-bg-well);
+    border: 1px solid transparent;
+    color: var(--rz-fg-muted);
+    font-family: var(--rz-font-mono);
+    font-size: var(--rz-text-xs);
+    text-decoration: none;
+    transition:
+      border-color 0.15s,
+      color 0.15s;
+
+    :global(svg) {
+      flex: none;
+      color: var(--rz-fg-subtle);
+    }
+
+    &:hover {
+      border-color: var(--rz-border);
+      color: var(--rz-fg);
+    }
+  }
+
+  .rz-document-url__text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .rz-document-url__note {
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-xs);
+  }
+</style>

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

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