rimecms 0.32.1 → 1.0.0

package/dist/fields/blocks/component/focus/RenderPlaceholder.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { LayerRow } from './focus.svelte.js';
+type Props = {
+    row: LayerRow;
+    error?: unknown;
+    children?: Snippet<[name?: string]>;
+};
+declare const RenderPlaceholder: import("svelte").Component<Props, {}, "">;
+type RenderPlaceholder = ReturnType<typeof RenderPlaceholder>;
+export default RenderPlaceholder;

package/dist/fields/blocks/component/focus/Renders.svelte

@@ -0,0 +1,302 @@
+<script lang="ts">
+  import { t__ } from '../../../../core/i18n/index.js';
+  import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
+  import { shiftListPath } from '../../../../panel/context/blocks-ops.js';
+  import { useSortable } from '../../../../panel/util/Sortable.js';
+  import { ArrowDown, ArrowUp, CopyPlus, Trash2 } from '@lucide/svelte';
+  import type Sortable from 'sortablejs';
+  import { getBlocksFocusContext } from './focus.svelte.js';
+  import RenderPlaceholder from './RenderPlaceholder.svelte';
+  import Renders from './Renders.svelte';
+
+  /** `onRemove` asks first when the block holds blocks of its own. */
+  type Props = { form: DocumentFormContext; list: string; onRemove: () => void };
+  const { form, list, onRemove }: Props = $props();
+
+  const focus = getBlocksFocusContext()!;
+  const rows = $derived(focus.rowsOf(list));
+
+  /**
+   * A click selects the block, shows its fields, and stops there; a link inside a render does not
+   * navigate.
+   */
+  function select(event: MouseEvent, rowPath: string) {
+    event.stopPropagation();
+    if ((event.target as Element).closest('a[href]')) event.preventDefault();
+    focus.select(rowPath, { extend: event.shiftKey });
+    focus.inspect();
+  }
+
+  /** The one block the controls act on: selected alone, and the form open to changes. */
+  const controlled = (rowPath: string) =>
+    !focus.locked && focus.selection.length === 1 && focus.selection[0] === rowPath;
+
+  /** A control does its job and stops there, before the block's own click selects it again. */
+  function control(event: MouseEvent, action: () => unknown) {
+    event.stopPropagation();
+    action();
+  }
+
+  /**
+   * An editable spot inside a render keeps the mouse, and so does a rich text's own drag handle;
+   * the rest of the block drags.
+   */
+  const EDITABLE =
+    'input, textarea, select, button, a[href], [contenteditable], .ProseMirror, .rz-rich-text-drag-handle';
+
+  /**
+   * The stage is in the same group as the layers: a block drags from one to the other, a type
+   * drags in from the palette, and a nested list is a target like any other.
+   */
+  const { sortable } = useSortable({
+    group: {
+      name: 'rz-blocks-layers',
+      pull: true,
+      put: (to, _from, dragged) =>
+        form.blocks.accepts(to.el.dataset.list ?? '', (dragged as HTMLElement).dataset.type ?? '')
+    },
+    draggable: '.rz-renders__item',
+    filter: EDITABLE,
+    preventOnFilter: false,
+    animation: 150,
+    fallbackOnBody: true,
+    swapThreshold: 0.65,
+    disabled: focus.locked,
+    /** A type dropped from the palette: a new block at the drop index. */
+    onAdd: (event: Sortable.SortableEvent) => {
+      if (!event.from.classList.contains('rz-palette__list')) return;
+      const type = event.item.dataset.type;
+      if (type === undefined || event.newIndex === undefined) return;
+      focus.insertType(type, { list, index: event.newIndex });
+    },
+    onEnd: (event: Sortable.SortableEvent) => {
+      const fromList = event.from.dataset.list;
+      const toList = event.to.dataset.list;
+      const { oldIndex, newIndex } = event;
+      if (fromList === undefined || toList === undefined) return;
+      if (oldIndex === undefined || newIndex === undefined) return;
+      form.blocks.move(`${fromList}.${oldIndex}`, { list: toList, index: newIndex });
+      const landed =
+        fromList === toList ? toList : shiftListPath(toList, { list: fromList, index: oldIndex });
+      focus.select(`${landed}.${newIndex}`);
+    }
+  });
+
+  function sortableList(node: HTMLElement) {
+    const instance = sortable(node);
+    return { destroy: () => instance.destroy() };
+  }
+</script>
+
+<!--
+  One list of blocks, one wrapper per block. A block's nested lists are the `nested` snippet its
+  render puts where they go; a block without a render is a placeholder card with them below.
+-->
+<div class="rz-renders" data-list={list} data-empty={rows.length ? undefined : ''} use:sortableList>
+  {#each rows as row (row.block.id)}
+    {@const config = row.config}
+    {@const Render = config?.render}
+    {#snippet nested(name?: string)}
+      {#each row.children.filter((child) => !name || child.builder.name === name) as child (child.builder.name)}
+        <Renders {form} list={child.list} {onRemove} />
+      {/each}
+    {/snippet}
+    <div
+      class="rz-renders__item"
+      data-placeholder={config?.render ? null : ''}
+      data-path={row.path}
+      data-type={row.block.type}
+      data-selected={focus.isSelected(row.path) ? '' : undefined}
+      role="button"
+      tabindex="0"
+      onclick={(event) => select(event, row.path)}
+      onkeydown={(event) => {
+        if (event.key === 'Enter' && event.target === event.currentTarget) {
+          event.preventDefault();
+          focus.select(row.path);
+        }
+      }}
+    >
+      {#if controlled(row.path)}
+        <!-- Above it: move, duplicate, remove. A click on the block already opens its fields. -->
+        <div class="rz-renders__toolbar">
+          <button
+            type="button"
+            title={t__('fields.move_up')}
+            aria-label={t__('fields.move_up')}
+            disabled={row.index === 0}
+            onclick={(event) => control(event, () => focus.moveSelection(-1))}
+          >
+            <ArrowUp size={14} />
+          </button>
+          <button
+            type="button"
+            title={t__('fields.move_down')}
+            aria-label={t__('fields.move_down')}
+            disabled={row.index === rows.length - 1}
+            onclick={(event) => control(event, () => focus.moveSelection(1))}
+          >
+            <ArrowDown size={14} />
+          </button>
+          <span class="rz-renders__toolbar-separator" aria-hidden="true"></span>
+          <button
+            type="button"
+            title={t__('common.duplicate')}
+            aria-label={t__('common.duplicate')}
+            onclick={(event) => control(event, focus.duplicateSelection)}
+          >
+            <CopyPlus size={14} />
+          </button>
+          <button
+            type="button"
+            title={t__('fields.delete_block')}
+            aria-label={t__('fields.delete_block')}
+            onclick={(event) => control(event, onRemove)}
+          >
+            <Trash2 size={14} />
+          </button>
+        </div>
+      {/if}
+      {#if config?.render}
+        <svelte:boundary>
+          <Render
+            block={row.block}
+            path={row.path}
+            fields={config.fields}
+            {form}
+            children={nested}
+          />
+          {#snippet failed(error)}
+            <RenderPlaceholder {row} {error} children={nested} />
+          {/snippet}
+        </svelte:boundary>
+      {:else}
+        <RenderPlaceholder {row} children={nested} />
+      {/if}
+    </div>
+  {:else}
+    {#if list === focus.path}
+      <p class="rz-renders__empty">{t__('fields.no_blocks_yet_render')}</p>
+    {/if}
+  {/each}
+</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-renders {
+    display: grid;
+    gap: var(--rz-size-3);
+    min-height: var(--rz-size-8);
+  }
+
+  /* An empty nested list: somewhere to drop a type. */
+  .rz-renders[data-empty]:not([data-list='']) {
+    border: 1px dashed var(--rz-border-strong);
+    border-radius: var(--rz-radius-md);
+  }
+
+  /* A block under the pointer: a dashed frame, on the innermost block only. */
+  .rz-renders__item {
+    position: relative;
+    border-radius: var(--rz-radius-md);
+    outline: 1px dashed transparent;
+    outline-offset: 3px;
+    cursor: pointer;
+
+    &:not([data-selected]):hover:not(:has(:global(.rz-renders__item:hover))) {
+      outline-color: var(--rz-border-strong);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+      outline-offset: 3px;
+    }
+  }
+
+  /* The selected block: an accent frame around it. */
+  .rz-renders__item[data-selected] {
+    outline: 1.5px solid var(--rz-accent);
+    outline-offset: 3px;
+  }
+
+  :global(.rz-renders__item.sortable-ghost) {
+    opacity: 0.4;
+  }
+
+  /*
+   * The selected block's bar: dark, on its top edge at the right, half over the gap above, so it
+   * covers little of the block before.
+   */
+  .rz-renders__toolbar {
+    position: absolute;
+    top: 0;
+    right: var(--rz-size-3);
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-0-5);
+    padding: var(--rz-size-1);
+    border-radius: var(--rz-radius-lg);
+    background-color: var(--rz-bg-inverse);
+    color: var(--rz-fg-inverse);
+    box-shadow: var(--rz-shadow-float);
+    transform: translateY(-50%);
+    cursor: default;
+
+    button {
+      display: grid;
+      place-items: center;
+      width: calc(6.5 * var(--rz-unit));
+      height: calc(6.5 * var(--rz-unit));
+      border-radius: var(--rz-radius-sm);
+      opacity: 0.75;
+      transition: opacity 0.15s;
+      &:hover:not(:disabled) {
+        opacity: 1;
+        background-color: oklch(from var(--rz-fg-inverse) l c h / 0.12);
+      }
+      &:focus-visible {
+        opacity: 1;
+        outline: 2px solid var(--rz-accent-border);
+        outline-offset: 2px;
+      }
+      &:disabled {
+        opacity: 0.3;
+        cursor: default;
+      }
+    }
+  }
+
+  /* Moving on the left, the block's own actions on the right. */
+  .rz-renders__toolbar-separator {
+    width: 1px;
+    height: var(--rz-size-4);
+    margin-inline: var(--rz-size-1);
+    background-color: oklch(from var(--rz-fg-inverse) l c h / 0.2);
+  }
+
+  /* A type dragged over an empty list takes the place of its message. */
+  :global(.rz-renders:has(> :not(.rz-renders__empty)) > .rz-renders__empty) {
+    display: none;
+  }
+
+  .rz-renders__empty {
+    padding: var(--rz-size-16) var(--rz-size-6);
+    text-align: center;
+    font-size: var(--rz-text-sm);
+    color: var(--rz-fg-subtle);
+  }
+</style>

package/dist/fields/blocks/component/focus/Renders.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
+import Renders from './Renders.svelte';
+/** `onRemove` asks first when the block holds blocks of its own. */
+type Props = {
+    form: DocumentFormContext;
+    list: string;
+    onRemove: () => void;
+};
+declare const Renders: import("svelte").Component<Props, {}, "">;
+type Renders = ReturnType<typeof Renders>;
+export default Renders;

package/dist/fields/blocks/component/focus/Stage.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+  import { getFieldListAtPath } from '../../../../core/fields/util.js';
+  import { t__ } from '../../../../core/i18n/index.js';
+  import RenderFields from '../../../../panel/components/fields/RenderFields.svelte';
+  import { Button } from '../../../../panel/components/ui/button/index.js';
+  import { withBlockTypes } from '../../../../panel/context/blocks-ops.js';
+  import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
+  import { CopyPlus, ToyBrick, Trash2 } from '@lucide/svelte';
+  import { getBlocksFocusContext, type LayerRow } from './focus.svelte.js';
+  import StagePlaceholder from './StagePlaceholder.svelte';
+
+  type Props = { form: DocumentFormContext; onRemove: () => void };
+  const { form, onRemove }: Props = $props();
+
+  const focus = getBlocksFocusContext()!;
+  const current = $derived(focus.currentRow);
+  /** A block selected: that block alone. The root node: every block of the open list. */
+  const rows = $derived(current ? [current] : focus.path ? focus.rowsOf(focus.path) : []);
+
+  const fieldsOf = (row: LayerRow) =>
+    getFieldListAtPath(withBlockTypes(row.path, form.values), form.config.fields);
+</script>
+
+<div class="rz-stage" data-mode={current ? 'block' : 'all'}>
+  {#each rows as row (row.block.id)}
+    {@const Icon = row.config?.icon ?? ToyBrick}
+    {@const rendered = fieldsOf(row)}
+    <article class="rz-stage__card" data-block-path={row.path}>
+      <header class="rz-stage__header">
+        <button
+          type="button"
+          class="rz-stage__title"
+          onclick={() => focus.select(row.path)}
+          disabled={!!current}
+        >
+          <span class="rz-stage__icon"><Icon size={14} /></span>
+          <h3>{row.title}</h3>
+          <span class="rz-stage__path">{row.path}</span>
+        </button>
+        {#if current && !focus.locked}
+          <div class="rz-stage__actions">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              icon={CopyPlus}
+              title={t__('common.duplicate')}
+              aria-label={t__('common.duplicate')}
+              onclick={focus.duplicateSelection}
+            />
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              icon={Trash2}
+              title={t__('fields.delete_block')}
+              aria-label={t__('fields.delete_block')}
+              onclick={onRemove}
+            />
+          </div>
+        {/if}
+      </header>
+      <div class="rz-stage__fields">
+        <RenderFields fields={rendered.fields} path={rendered.path} {form} />
+      </div>
+    </article>
+  {:else}
+    <p class="rz-stage__empty">{t__('fields.no_blocks_yet')}</p>
+  {/each}
+  {#if !current && rows.length && !focus.locked}
+    <StagePlaceholder />
+  {/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-stage {
+    display: grid;
+    align-content: start;
+    gap: var(--rz-size-6);
+    min-height: 100%;
+    padding-bottom: var(--rz-size-16);
+  }
+
+  .rz-stage[data-mode='all'] {
+    padding: var(--rz-size-6) var(--rz-size-6) var(--rz-size-16);
+  }
+
+  .rz-stage[data-mode='all'] .rz-stage__card {
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
+    border-radius: var(--rz-radius-md);
+    overflow: hidden;
+  }
+
+  /* A block's head: its icon, its title, its path, and on the right what it can do. */
+  .rz-stage__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--rz-size-2);
+    height: calc(11.5 * var(--rz-unit));
+    padding-inline: var(--rz-size-3) var(--rz-size-1-5);
+    border-bottom: 1px solid var(--rz-border);
+    background-color: var(--rz-bg-raised);
+  }
+
+  /* Alone, the head stays on top of the fields, on the page's own fill. */
+  .rz-stage[data-mode='block'] .rz-stage__header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: var(--rz-bg-page);
+  }
+
+  .rz-stage__title {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+    min-width: 0;
+    h3 {
+      font-variation-settings: 'wght' 500;
+      font-weight: 500;
+      font-size: var(--rz-text-md);
+      white-space: nowrap;
+    }
+    &:not(:disabled):hover h3 {
+      text-decoration: underline;
+    }
+  }
+
+  .rz-stage__icon {
+    display: grid;
+    place-items: center;
+    width: var(--rz-size-6);
+    height: var(--rz-size-6);
+    flex-shrink: 0;
+    border-radius: var(--rz-radius-sm);
+    background-color: var(--rz-bg-well);
+    color: var(--rz-fg-muted);
+  }
+
+  .rz-stage__path {
+    font-family: var(--rz-font-mono);
+    font-size: var(--rz-text-xs);
+    color: var(--rz-fg-subtle);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Ghost icon buttons, quiet until hovered. */
+  .rz-stage__actions {
+    --rz-button-ghost-fg: var(--rz-fg-muted);
+    display: flex;
+    gap: var(--rz-size-0-5);
+    flex-shrink: 0;
+    :global(.rz-button) {
+      width: var(--rz-size-7);
+      height: var(--rz-size-7);
+    }
+    :global(.rz-button:hover) {
+      color: var(--rz-fg);
+    }
+  }
+
+  .rz-stage__fields {
+    padding-block: var(--rz-size-6);
+  }
+
+  .rz-stage__empty {
+    padding: var(--rz-size-16) var(--rz-size-6);
+    text-align: center;
+    font-size: var(--rz-text-sm);
+    color: var(--rz-fg-subtle);
+  }
+</style>

package/dist/fields/blocks/component/focus/Stage.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
+type Props = {
+    form: DocumentFormContext;
+    onRemove: () => void;
+};
+declare const Stage: import("svelte").Component<Props, {}, "">;
+type Stage = ReturnType<typeof Stage>;
+export default Stage;

package/dist/fields/blocks/component/focus/StagePlaceholder.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { t__ } from '../../../../core/i18n/index.js';
+  import Kbd from '../../../../panel/components/ui/kbd/Kbd.svelte';
+  import { getBlocksFocusContext } from './focus.svelte.js';
+
+  const focus = getBlocksFocusContext()!;
+
+  /** "Type $1 to add a block", cut around the key. */
+  const KEY = '\u0000';
+  const [before, after] = $derived(t__('fields.type_to_add_block', KEY).split(KEY));
+
+  /** Adds at the end of the open list: the root selected, then the picker, as `/` opens. */
+  function add(event: MouseEvent) {
+    event.stopPropagation();
+    focus.selectRoot();
+    focus.pick();
+  }
+</script>
+
+<!-- Under the blocks: the key that adds one, and a click that does the same. -->
+<button type="button" class="rz-stage-placeholder" onclick={add}>
+  {before}<Kbd keys="/" />{after}
+</button>
+
+<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-stage-placeholder {
+    display: block;
+    width: 100%;
+    padding: var(--rz-size-1) var(--rz-size-1-5);
+    border-radius: var(--rz-radius-lg);
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-xl);
+    text-align: left;
+    cursor: text;
+    transition: color 0.15s;
+
+    &:hover {
+      color: var(--rz-fg-muted);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
+
+    :global(.rz-kbd) {
+      margin-inline: var(--rz-size-0-5);
+      color: var(--rz-fg-muted);
+      font-size: var(--rz-text-sm);
+      vertical-align: text-bottom;
+    }
+    :global(.rz-kbd__key) {
+      background-color: var(--rz-bg-raised);
+    }
+  }
+</style>

package/dist/fields/blocks/component/focus/StagePlaceholder.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const StagePlaceholder: import("svelte").Component<Record<string, never>, {}, "">;
+type StagePlaceholder = ReturnType<typeof StagePlaceholder>;
+export default StagePlaceholder;