rimecms 0.33.0 → 1.0.1

package/dist/core/prototype/shared/url/refresh.server.js

@@ -0,0 +1,58 @@
+import { formatUrl } from './format.server.js';
+/**
+ * The documents of these pages in `locale`: the published ones, and the newest version of those
+ * never published. A url is built from them.
+ */
+export const readForUrls = async (args) => {
+    const { event, config, locale, ids } = args;
+    const collection = event.locals.rime.collection(config.slug).system();
+    const query = (list) => ({ where: { id: { in_array: list } } });
+    const docs = new Map();
+    for (const doc of await collection.find({ query: query(ids), locale: locale || undefined })) {
+        docs.set(doc.id, doc);
+    }
+    const missing = ids.filter((id) => !docs.has(id));
+    if (missing.length && config.versions?.draft) {
+        const newest = await collection.find({
+            query: query(missing),
+            locale: locale || undefined,
+            latest: true
+        });
+        for (const doc of newest)
+            docs.set(doc.id, doc);
+    }
+    return docs;
+};
+/**
+ * Formats the urls of these rows, one locale, and writes those that changed in one go. `docs` are
+ * the pages' documents when the caller has them already.
+ */
+export const formatRows = async (args) => {
+    const { event, config, locale, rows } = args;
+    if (!rows.length)
+        return;
+    const docs = args.docs ??
+        (await readForUrls({ event, config, locale, ids: rows.map((row) => row.ownerId) }));
+    const changed = rows.flatMap((row) => {
+        const doc = docs.get(row.ownerId);
+        if (!doc)
+            return [];
+        const url = formatUrl({ config, doc, path: row.path, locale });
+        return url === row.url ? [] : [{ ownerId: row.ownerId, locale, url }];
+    });
+    await event.locals.rime.adapter.paths.setUrls({ slug: config.slug, rows: changed });
+};
+/**
+ * The urls of the page at `path` and, unless told otherwise, of every page under it, in one
+ * locale: their documents in one `find`, the changed urls in one write.
+ */
+export const refreshUrls = async (args) => {
+    const { event, config, locale, path, withDescendants } = args;
+    const rows = await event.locals.rime.adapter.paths.under({
+        slug: config.slug,
+        locale,
+        path,
+        withDescendants
+    });
+    await formatRows({ event, config, locale, rows });
+};

package/dist/core/prototype/shared/versions/configure.server.js

@@ -1,4 +1,5 @@
 import { withVersionsSuffix } from './naming.js';
+import { blank } from '../../blank.js';
 import { prototypeKebab } from '../../naming.js';
 import { isStaff } from '../../../auth/access.js';
 /**
@@ -29,6 +30,7 @@ export function configureVersions(config) {
                 slug: withVersionsSuffix(collection.slug),
                 kebab: prototypeKebab(withVersionsSuffix(collection.slug)),
                 versions: undefined,
+                blank,
                 access: versionsAccess(collection.access),
                 $hooks: collection.$hooks,
                 fields: contentFields(collection),
@@ -56,6 +58,7 @@ export function configureVersions(config) {
                 kebab: prototypeKebab(withVersionsSuffix(area.slug)),
                 icon: area.icon,
                 versions: undefined,
+                blank,
                 access: versionsAccess(area.access),
                 asTitle: area.asTitle,
                 asThumbnail: null,

package/dist/core/routes/context.server.d.ts

@@ -1,3 +1,4 @@
+import type { ResolvedPathname } from '$app/types';
 import type { RequestEvent } from '@sveltejs/kit';
 import * as routes from './util.js';
 /**
@@ -11,7 +12,7 @@ export declare function createRoutesContext(event: RequestEvent): {
     readonly isPublicAuthRoute: boolean;
     readonly isPanel: boolean;
     readonly panel: string;
-    panelUrl(...args: string[]): string;
+    panelUrl(...args: string[]): ResolvedPathname;
     apiUrl: typeof routes.apiUrl;
     absolute: typeof routes.absolute;
 };

package/dist/fields/blocks/component/AddBlockButton.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-  import { env } from '$env/dynamic/public';
-  import { emptyValuesFromFieldConfig, isFormField } from '../../../core/fields/util.js';
+  import { emptyValuesFromFieldConfig } from '../../../core/fields/util.js';
   import { t__ } from '../../../core/i18n/index.js';
   import type { GenericBlock } from '../../../core/prototype/types.js';
   import Button from '../../../panel/components/ui/button/button.svelte';
-  import * as Command from '../../../panel/components/ui/command/index.js';
-  import { capitalize } from '../../../util/string.js';
-  import { CirclePlus, ToyBrick } from '@lucide/svelte';
+  import { Plus } from '@lucide/svelte';
   import type { BlocksBuilder, BlocksFieldBlock } from '../index.js';
+  import BlockPicker from './picker/BlockPicker.svelte';
 
   type AddBlock = (options: Omit<GenericBlock, 'id' | 'path'>) => void;
   type Props = {
@@ -17,154 +15,67 @@
   const { config, addBlock }: Props = $props();
 
   let open = $state(false);
-  let ariaSelected = $state('');
+
+  /** The one type of a list that has one: the button adds it without a menu. */
+  const single = $derived(config.get.blocks.length === 1 ? config.get.blocks[0].block : null);
 
   const add = (block: BlocksFieldBlock) => {
     open = false;
     const empty = {
-      ...emptyValuesFromFieldConfig(block.fields.filter(isFormField)),
+      ...emptyValuesFromFieldConfig(block.fields),
       type: block.name
     };
     addBlock(empty);
   };
 </script>
 
-{#if config.get.blocks.length === 1}
-  <Button
-    onclick={() => add(config.get.blocks[0].block)}
-    variant="ghost"
-    icon={CirclePlus}
-    size="icon"
-  />
-{:else}
-  <Button onclick={() => (open = true)} variant="ghost" icon={CirclePlus} size="icon" />
-
-  <Command.Dialog
-    onStateChange={(state) => {
-      ariaSelected = state.value;
-    }}
-    bind:open
-  >
-    <Command.Input class="rz-add-block-button__search" placeholder={t__('common.search')} />
-
-    <div class="rz-add-block-button__command-content">
-      <Command.List class="rz-add-block-button__list">
-        <Command.Empty>No results found.</Command.Empty>
-        <Command.Group heading="Component">
-          {#each config.get.blocks as blockBuilder, index (index)}
-            {@const blockConfig = blockBuilder.block}
-            {@const BlockIcon = blockConfig.icon || ToyBrick}
-            <Command.Item
-              class="rz-add-block-button__item"
-              value={blockConfig.name}
-              onSelect={() => {
-                add(blockConfig);
-                open = false;
-              }}
-            >
-              <div class="rz-add-block-button__icon-wrapper">
-                <BlockIcon size={17} />
-              </div>
-
-              <div class="rz-add-block-button__info">
-                <p class="rz-add-block-button__title">
-                  {blockConfig.label || capitalize(blockConfig.name)}
-                </p>
-                {#if blockConfig.description}
-                  <p class="rz-add-block-button__description">
-                    {blockConfig.description}
-                  </p>
-                {/if}
-              </div>
-            </Command.Item>
-          {/each}
-        </Command.Group>
-      </Command.List>
-
-      <div class="rz-add-block-button__preview-wrap">
-        {#each config.get.blocks as blockFieldBuilder, index (index)}
-          <div
-            class:rz-add-block-button__preview--active={ariaSelected === blockFieldBuilder.name}
-            class="rz-add-block-button__preview"
-          >
-            {#if blockFieldBuilder.block.image}
-              <img src="{env.PUBLIC_RIME_URL}{blockFieldBuilder.block.image}" alt="preview" />
-            {:else}
-              no preview
-            {/if}
-          </div>
-        {/each}
-      </div>
-    </div>
-  </Command.Dialog>
+<!-- A ghost "+ Add a block" under the list: one type adds it, several open the picker. -->
+<Button
+  class="rz-add-block"
+  variant="ghost"
+  icon={Plus}
+  onclick={() => (single ? add(single) : (open = true))}
+>
+  {t__('fields.add_a_block')}
+</Button>
+
+{#if !single}
+  <BlockPicker bind:open types={config.get.blocks} onpick={add} />
 {/if}
 
-<style>
-  :global {
-    .rz-add-block-button {
-      gap: var(--rz-size-2);
-    }
-
-    .rz-command-dialog-content {
-      width: 60vw;
-    }
-
-    .rz-add-block-button__command-content {
-      display: grid;
-      position: relative;
-      grid-template-columns: 3fr 2fr;
-    }
-    .rz-add-block-button__search {
-      border-radius: var(--rz-radius-xl);
-    }
-
-    .rz-add-block-button__list {
-      padding: var(--rz-size-2);
-      max-height: var(--rz-size-72);
-      border-right: var(--rz-border);
-    }
-
-    .rz-add-block-button__item {
-      display: flex;
-      gap: var(--rz-size-3);
-      border-radius: var(--rz-radius-md);
-    }
-
-    .rz-add-block-button__preview-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      img {
-        width: 200px;
-        height: auto;
-      }
-    }
-    .rz-add-block-button__preview.rz-add-block-button__preview--active {
-      display: block;
-    }
-    .rz-add-block-button__preview {
-      display: none;
-    }
-  }
+<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. */
 
-  .rz-add-block-button__icon-wrapper {
-    display: flex;
-    width: var(--rz-size-12);
-    height: var(--rz-size-12);
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--rz-radius-xl);
+/* An input with an error. */
+/* Muted text and a plus, lit on hover. */
+  :global(.rz-button.rz-add-block) {
+    gap: var(--rz-size-1-5);
+    height: var(--rz-size-7);
+    padding: 0 var(--rz-size-2) 0 var(--rz-size-1-5);
+    border-radius: var(--rz-radius-lg);
+    color: var(--rz-fg-muted);
+    font-size: var(--rz-text-md);
   }
 
-  .rz-add-block-button__title {
-    font-size: var(--rz-text-lg);
-    font-variation-settings: 'wght' 500;
-    font-weight: 500;
+  :global(.rz-button.rz-add-block .rz-button__icon) {
+    width: auto;
+    height: auto;
+    color: var(--rz-fg-subtle);
   }
 
-  .rz-add-block-button__description {
-    color: hsl(var(--rz-color-fg) / 0.5);
-    margin-top: var(--rz-size-1);
-    font-size: var(--rz-text-sm);
+  :global(.rz-button.rz-add-block:hover:not(:disabled)),
+  :global(.rz-button.rz-add-block:hover:not(:disabled) .rz-button__icon) {
+    color: var(--rz-fg);
   }
 </style>

package/dist/fields/blocks/component/Block.svelte

@@ -3,7 +3,6 @@
   import type { BlocksFieldBlock } from '../../types';
   import RenderFields from '../../../panel/components/fields/RenderFields.svelte';
   import { type DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
-  import { useOnce } from '../../../panel/util/once.svelte.js';
   import { capitalize } from '../../../util/string.js';
   import { GripVertical, ToyBrick } from '@lucide/svelte';
   import BlockActions from './BlockActions.svelte';
@@ -11,179 +10,216 @@
   type Props = {
     config: BlocksFieldBlock;
     path: string;
+    form: DocumentFormContext;
+    /** Its fields on show under its row. */
+    open: boolean;
     sorting: boolean;
+    toggle: () => void;
     deleteBlock: () => void;
     duplicateBlock: () => void;
-    form: DocumentFormContext;
+    /** Absent on the first block. */
+    moveUp?: () => void;
+    /** Absent on the last block. */
+    moveDown?: () => void;
+    /** Opens the document's focus mode on this block; absent in a nested form. */
+    focusBlock?: () => void;
   };
 
-  const { config, path, deleteBlock, duplicateBlock, form, sorting = false }: Props = $props();
+  const {
+    config,
+    path,
+    form,
+    open,
+    sorting = false,
+    toggle,
+    deleteBlock,
+    duplicateBlock,
+    moveUp,
+    moveDown,
+    focusBlock
+  }: Props = $props();
 
-  let isOpen = $state(true);
   const position = $derived(parseInt(path.split('.').pop() || '0'));
   const blockValue = $derived(form.getValue<GenericBlock>(path));
 
-  const { once } = useOnce();
-
-  once(() => {
-    if (blockValue) {
-      isOpen = (localStorage.getItem(`${blockValue.id}:open`) || 'true') === 'true';
-    }
-  });
-
-  export const setCollapse = (bool: boolean) => {
-    isOpen = !bool;
-  };
-
-  export const toggleBlock = (e: MouseEvent) => {
-    if (e && e.stopPropagation) {
-      e.stopPropagation();
-    }
-    isOpen = !isOpen;
-  };
-
-  const renderBlockTitle = () => {
+  const title = $derived.by(() => {
     if (config.renderTitle) {
       try {
-        const title = config.renderTitle({ values: blockValue || {}, position });
-        if (title) return title;
+        const rendered = config.renderTitle({ values: blockValue || {}, position });
+        if (rendered) return rendered;
       } catch (err) {
         console.error(`Can't render title in block`, err);
       }
     }
-    const title = config.label ? config.label : capitalize(config.name);
-    return title;
-  };
-
-  $effect(() => {
-    if (blockValue) {
-      localStorage.setItem(`${blockValue.id}:open`, isOpen.toString());
-    }
+    return config.label ? config.label : capitalize(config.name);
   });
 
+  const fieldsId = $derived(`rz-block-fields-${blockValue?.id ?? path}`);
   const BlockIcon = $derived(config.icon || ToyBrick);
 </script>
 
-<div data-sorting={sorting} class="rz-block">
-  <div class="rz-block__content" class:rz-block__content--closed={!isOpen}>
-    <header class="rz-block__header">
-      <button type="button" onclick={toggleBlock} class="rz-block__title-button">
-        <div class="rz-block__title">
-          <div class="rz-block__icon">
-            <BlockIcon size={12} />
-          </div>
-          <h3 class="rz-block__heading">
-            {renderBlockTitle()}
-          </h3>
-        </div>
-      </button>
-
-      <BlockActions {duplicateBlock} {deleteBlock} />
-
-      <div class="rz-block__grip">
-        <GripVertical size={15} />
-      </div>
-    </header>
-
-    <div class="rz-block__fields" class:rz-block__fields--hidden={!isOpen}>
-      <RenderFields fields={config.fields} {path} {form} />
-    </div>
+<!-- A row: grip, icon, name, actions. A click on it shows its fields under it. -->
+<div class="rz-block" data-open={open ? '' : null} data-sorting={sorting}>
+  <div class="rz-block__header">
+    <span class="rz-block__grip" aria-hidden="true">
+      <GripVertical size={15} />
+    </span>
+
+    <button
+      type="button"
+      class="rz-block__title-button"
+      aria-expanded={open}
+      aria-controls={fieldsId}
+      onclick={toggle}
+    >
+      <span class="rz-block__icon"><BlockIcon size={14} /></span>
+      <span class="rz-block__heading">{title}</span>
+    </button>
+
+    <BlockActions {duplicateBlock} {deleteBlock} {moveUp} {moveDown} {focusBlock} />
+  </div>
+
+  <div class="rz-block__fields" id={fieldsId} hidden={!open}>
+    <RenderFields fields={config.fields} {path} {form} />
   </div>
 </div>
 
-<style>.rz-block {
+<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. */
+/*
+   * One row of the list's card. The list's radius, `--rz-blocks-radius`, rounds the first and the
+   * last row so their tint stays inside the card.
+   */
+  .rz-block {
     --rz-fields-padding: var(--rz-size-5);
     position: relative;
-    border: var(--rz-border);
-    border-radius: var(--rz-radius-sm);
-  }
 
-  .rz-block__grip {
-    cursor: grab;
+    &:first-child,
+    &:first-child > .rz-block__header {
+      border-top-left-radius: var(--rz-blocks-radius, 0);
+      border-top-right-radius: var(--rz-blocks-radius, 0);
+    }
+    &:last-child,
+    &:last-child:not([data-open]) > .rz-block__header {
+      border-bottom-left-radius: var(--rz-blocks-radius, 0);
+      border-bottom-right-radius: var(--rz-blocks-radius, 0);
+    }
   }
 
-  .rz-block:hover > :global(.rz-block__content > .rz-block__header > .rz-block-actions) {
-    opacity: 1;
-    pointer-events: all;
+  /* Open, the row and its fields read as one: a hairline around both, another between them. */
+  .rz-block[data-open] {
+    outline: 1px solid var(--rz-border-strong);
+    outline-offset: -1px;
+
+    > .rz-block__header {
+      border-bottom: 1px solid var(--rz-border);
+    }
   }
 
-  .rz-block__content {
-    background-color: var(--rz-collapse-fields-content-bg);
+  /* Closed on a field with an error: a red edge, since the field itself is out of sight. */
+  .rz-block:not([data-open]):has(:global(.rz-field-error)) {
+    outline: 1px solid var(--rz-danger);
+    outline-offset: -1px;
   }
 
   .rz-block__header {
     display: flex;
-    position: relative;
     align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    border-bottom: var(--rz-border);
-    padding-right: var(--rz-size-2);
-    height: var(--rz-row-height);
-    background-color: hsl(var(--rz-row-bg));
+    gap: var(--rz-size-2);
+    min-height: var(--rz-size-11);
+    padding: 0 var(--rz-size-1-5) 0 var(--rz-size-1);
+    transition: background-color 0.15s;
+
+    &:hover {
+      background-color: var(--rz-bg-hover);
+    }
   }
 
-  .rz-block__title-button {
-    flex: 1;
-    justify-content: flex-start;
-    flex-direction: row;
-    padding: var(--rz-size-3);
+  /* The handle the list drags by, shown with the row's hover. */
+  .rz-block__grip {
+    display: flex;
+    flex-shrink: 0;
+    color: var(--rz-fg-subtle);
+    cursor: grab;
+    opacity: 0;
+    transition: opacity 0.15s;
   }
 
-  .rz-block__content--closed {
-    border-radius: var(--rz-radius-md);
-    .rz-block__header {
-      border-color: transparent;
-      width: 100%;
-    }
+  .rz-block__header:is(:hover, :focus-within) .rz-block__grip {
+    opacity: 1;
+  }
 
-    :global(.rz-block-actions) {
-      position: absolute;
-      opacity: 0;
-      pointer-events: none;
-      top: var(--rz-size-3);
-      right: var(--rz-size-11);
-    }
-    &:global(:has(.rz-field-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));
+  @media (hover: none) {
+    .rz-block__grip {
+      opacity: 1;
     }
   }
 
-  .rz-block__title {
+  .rz-block__title-button {
     display: flex;
-    height: var(--rz-size-6);
+    flex: 1;
     align-items: center;
-    justify-content: flex-start;
-    gap: var(--rz-size-2);
-    padding: var(--rz-size-1);
-    font-size: var(--rz-text-xs);
+    gap: var(--rz-size-2-5);
+    min-width: 0;
+    align-self: stretch;
+    font-size: var(--rz-text-md);
+    text-align: left;
+
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+      outline-offset: -2px;
+    }
+  }
+
+  .rz-block__icon {
+    display: grid;
+    place-items: center;
+    width: calc(6.5 * var(--rz-unit));
+    height: calc(6.5 * var(--rz-unit));
+    flex-shrink: 0;
+    border-radius: var(--rz-radius-sm);
+    background-color: var(--rz-bg-well);
+    color: var(--rz-fg-muted);
   }
 
   .rz-block__heading {
     font-variation-settings: 'wght' 500;
     font-weight: 500;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--rz-fg);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .rz-block__fields {
-    flex: 1;
-    padding: var(--rz-size-6) 0;
-  }
+    padding: var(--rz-size-5) 0;
 
-  .rz-block__fields--hidden {
-    display: none;
+    &[hidden] {
+      display: none;
+    }
   }
 
-  .rz-block[data-sorting='true'] .rz-block__grip {
-    display: none;
+  /* While the list sorts, the rows show their name and nothing to click. */
+  .rz-block[data-sorting='true'] :global(.rz-block-actions) {
+    visibility: hidden;
   }
 
-  :global(.rz-block-actions) {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-    /*top: var(--rz-size-1);*/
-    right: var(--rz-size-11);
+  .rz-block:global(.sortable-ghost) > .rz-block__header {
+    opacity: 0.4;
   }
 </style>

package/dist/fields/blocks/component/Block.svelte.d.ts

@@ -3,14 +3,20 @@ import { type DocumentFormContext } from '../../../panel/context/documentForm.sv
 type Props = {
     config: BlocksFieldBlock;
     path: string;
+    form: DocumentFormContext;
+    /** Its fields on show under its row. */
+    open: boolean;
     sorting: boolean;
+    toggle: () => void;
     deleteBlock: () => void;
     duplicateBlock: () => void;
-    form: DocumentFormContext;
+    /** Absent on the first block. */
+    moveUp?: () => void;
+    /** Absent on the last block. */
+    moveDown?: () => void;
+    /** Opens the document's focus mode on this block; absent in a nested form. */
+    focusBlock?: () => void;
 };
-declare const Block: import("svelte").Component<Props, {
-    setCollapse: (bool: boolean) => void;
-    toggleBlock: (e: MouseEvent) => void;
-}, "">;
+declare const Block: import("svelte").Component<Props, {}, "">;
 type Block = ReturnType<typeof Block>;
 export default Block;