rimecms 0.33.0 → 1.0.0

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

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import { t__ } from '../../../../core/i18n/index.js';
+  import { Button } from '../../../../panel/components/ui/button/index.js';
+  import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
+  import { LayoutList } from '@lucide/svelte';
+  import { getBlocksFocusContext } from './focus.svelte.js';
+  import LayersList from './LayersList.svelte';
+
+  /** `heading` off where a tab names it already. */
+  type Props = { form: DocumentFormContext; heading?: boolean };
+  const { form, heading = true }: Props = $props();
+  const focus = getBlocksFocusContext()!;
+  /** Folding means something once a block holds a list of its own. */
+  const nested = $derived(focus.allRows().some((row) => row.children.length > 0));
+</script>
+
+<div class="rz-layers">
+  {#if heading || nested}
+    <header class="rz-layers__header">
+      {#if heading}
+        <h3>{t__('fields.layers')}</h3>
+      {/if}
+      {#if nested}
+        <div class="rz-layers__actions">
+          <Button size="xs" variant="ghost" onclick={focus.collapseAll}>
+            {t__('fields.collapse_all')}
+          </Button>
+          <Button size="xs" variant="ghost" onclick={focus.expandAll}>
+            {t__('fields.expand_all')}
+          </Button>
+        </div>
+      {/if}
+    </header>
+  {/if}
+  {#if focus.path}
+    <!-- The root node: the list itself. Selected, the stage shows every block of it. -->
+    <button
+      type="button"
+      class="rz-layers__root"
+      class:rz-layers__root--selected={focus.rootSelected}
+      onclick={focus.selectRoot}
+    >
+      <span class="rz-layers__root-icon"><LayoutList size={13} /></span>
+      <span class="rz-layers__root-title">{focus.rootLabel()}</span>
+    </button>
+    <LayersList {form} list={focus.path} depth={1} />
+  {/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-layers__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--rz-size-2);
+    padding: 0 var(--rz-size-0-5) 0 var(--rz-size-2);
+    margin-bottom: var(--rz-size-1);
+    h3 {
+      font-variation-settings: 'wght' 500;
+      font-weight: 500;
+      font-size: var(--rz-text-xs);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: var(--rz-fg-subtle);
+    }
+  }
+
+  /* Small ghost text on the right, quiet until hovered. */
+  .rz-layers__actions {
+    display: flex;
+    gap: var(--rz-size-0-5);
+    margin-left: auto;
+
+    :global(.rz-button) {
+      font-size: var(--rz-text-xs);
+      color: var(--rz-fg-subtle);
+    }
+    :global(.rz-button:hover:not(:disabled)) {
+      color: var(--rz-fg);
+    }
+  }
+
+  /* The list's own row, like a layer's: muted, lit on hover, shaded when selected. */
+  .rz-layers__root {
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+    width: 100%;
+    height: calc(8.5 * var(--rz-unit));
+    padding-inline: var(--rz-size-2);
+    margin-bottom: 1px;
+    border-radius: var(--rz-radius-lg);
+    font-size: var(--rz-text-md);
+    color: var(--rz-fg-muted);
+    text-align: left;
+    &:hover {
+      background-color: var(--rz-bg-hover);
+      color: var(--rz-fg);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
+  }
+
+  .rz-layers__root--selected,
+  .rz-layers__root--selected:hover {
+    background-color: var(--rz-bg-active);
+    color: var(--rz-fg);
+  }
+
+  .rz-layers__root-icon {
+    display: grid;
+    place-items: center;
+    width: calc(5.5 * var(--rz-unit));
+    height: calc(5.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-layers__root-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
+/** `heading` off where a tab names it already. */
+type Props = {
+    form: DocumentFormContext;
+    heading?: boolean;
+};
+declare const Layers: import("svelte").Component<Props, {}, "">;
+type Layers = ReturnType<typeof Layers>;
+export default Layers;

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

@@ -0,0 +1,304 @@
+<script lang="ts">
+  import { t__ } from '../../../../core/i18n/index.js';
+  import { shiftListPath } from '../../../../panel/context/blocks-ops.js';
+  import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
+  import { useSortable } from '../../../../panel/util/Sortable.js';
+  import { ChevronDown, ChevronRight, GripVertical, Pencil, ToyBrick } from '@lucide/svelte';
+  import type Sortable from 'sortablejs';
+  import { getBlocksFocusContext } from './focus.svelte.js';
+  import LayersList from './LayersList.svelte';
+
+  type Props = { form: DocumentFormContext; list: string; depth: number };
+  const { form, list, depth }: Props = $props();
+
+  const focus = getBlocksFocusContext()!;
+  const rows = $derived(focus.rowsOf(list, depth));
+
+  const hasError = (rowPath: string) =>
+    Object.keys(form.errors.value).some((key) => key === rowPath || key.startsWith(`${rowPath}.`));
+
+  /**
+   * Every list of the layers is in one sortable group, so a row drags from any list to any list
+   * whose block set has its type. The DOM is put back before the form moves the block; the
+   * re-render is what shows the move.
+   */
+  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 ?? '')
+    },
+    animation: 150,
+    fallbackOnBody: true,
+    swapThreshold: 0.65,
+    disabled: focus.locked,
+    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}`);
+    },
+    /** 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 });
+    }
+  });
+
+  function sortableList(node: HTMLElement) {
+    const instance = sortable(node);
+    return { destroy: () => instance.destroy() };
+  }
+</script>
+
+<ul
+  class="rz-layers__list"
+  data-list={list}
+  data-empty={rows.length ? null : ''}
+  style:--rz-layers-depth={depth}
+  use:sortableList
+>
+  {#each rows as row (row.block.id)}
+    {@const Icon = row.config?.icon ?? ToyBrick}
+    {@const folded = focus.isCollapsed(row.path)}
+    <li class="rz-layers__item" data-type={row.block.type} data-path={row.path}>
+      <div
+        class="rz-layers__row"
+        class:rz-layers__row--selected={focus.isSelected(row.path)}
+        style:--rz-layers-depth={depth}
+        role="button"
+        tabindex="0"
+        onclick={(event) => focus.select(row.path, { extend: event.shiftKey })}
+        onkeydown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            focus.select(row.path);
+          }
+        }}
+      >
+        <span class="rz-layers__grip" aria-hidden="true"><GripVertical size={12} /></span>
+        {#if row.children.length}
+          <button
+            type="button"
+            class="rz-layers__toggle"
+            aria-label={folded ? 'expand' : 'collapse'}
+            onclick={(event) => {
+              event.stopPropagation();
+              focus.toggleCollapsed(row.path);
+            }}
+          >
+            {#if folded}<ChevronRight size={12} />{:else}<ChevronDown size={12} />{/if}
+          </button>
+        {/if}
+        <span class="rz-layers__icon"><Icon size={13} /></span>
+        <span class="rz-layers__title">{row.title}</span>
+        {#if hasError(row.path)}
+          <span class="rz-layers__error" aria-label="error"></span>
+        {/if}
+        {#if focus.hasRenders && !focus.locked && focus.isSelected(row.path)}
+          <!-- Beside the renders, the fields are a tab away: this opens it. -->
+          <button
+            type="button"
+            class="rz-layers__edit"
+            title={t__('fields.edit')}
+            aria-label={t__('fields.edit')}
+            onclick={(event) => {
+              event.stopPropagation();
+              focus.inspect();
+            }}
+          >
+            <Pencil size={12} />
+          </button>
+        {/if}
+      </div>
+
+      {#if row.children.length && !folded}
+        {#each row.children as child (child.builder.name)}
+          <div class="rz-layers__child">
+            {#if row.children.length > 1}
+              <span class="rz-layers__child-label" style:--rz-layers-depth={depth + 1}>
+                {child.label}
+              </span>
+            {/if}
+            <LayersList {form} list={child.list} depth={depth + 1} />
+          </div>
+        {/each}
+      {/if}
+    </li>
+  {/each}
+</ul>
+
+<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-layers__list {
+    display: grid;
+    gap: 1px;
+    min-height: var(--rz-size-2);
+  }
+
+  /*
+   * A row at depth 1, 2, … starts one icon further in. Left of its icon, in that order: the grip,
+   * then the chevron when it has children, both out of the flow.
+   *
+   *   icon    = 1.375rem
+   *   gutter  = 0.5rem, the root row's own padding, + icon × (depth − 1)
+   *   padding = gutter + grip 0.75rem + chevron 0.75rem + 0.25rem, gutter + 1.75rem
+   */
+  .rz-layers__list,
+  .rz-layers__row,
+  .rz-layers__child-label {
+    --rz-layers-icon: calc(5.5 * var(--rz-unit));
+    --rz-layers-gutter: calc(
+      var(--rz-size-2) + var(--rz-layers-icon) * (var(--rz-layers-depth, 1) - 1)
+    );
+    --rz-layers-start: calc(var(--rz-layers-gutter) + calc(7 * var(--rz-unit)));
+  }
+
+  .rz-layers__list[data-empty] {
+    min-height: var(--rz-size-7);
+    margin-left: var(--rz-layers-start);
+    border: 1px dashed var(--rz-border-strong);
+    border-radius: var(--rz-radius-sm);
+  }
+
+  .rz-layers__row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+    height: calc(8.5 * var(--rz-unit));
+    padding-right: var(--rz-size-2);
+    padding-left: var(--rz-layers-start);
+    border-radius: var(--rz-radius-lg);
+    font-size: var(--rz-text-md);
+    color: var(--rz-fg-muted);
+    cursor: grab;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+
+    &:hover {
+      background-color: var(--rz-bg-hover);
+      color: var(--rz-fg);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
+  }
+
+  /* The selected row: shaded, its title in full weight. */
+  .rz-layers__row--selected,
+  .rz-layers__row--selected:hover {
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+    background-color: var(--rz-bg-active);
+    color: var(--rz-fg);
+  }
+
+  /* Says the row drags; the whole row does. */
+  .rz-layers__grip {
+    position: absolute;
+    top: 50%;
+    left: var(--rz-layers-gutter);
+    display: flex;
+    justify-content: center;
+    width: var(--rz-size-3);
+    transform: translateY(-50%);
+    opacity: 0;
+    color: var(--rz-fg-subtle);
+  }
+
+  .rz-layers__row:hover .rz-layers__grip {
+    opacity: 1;
+  }
+
+  .rz-layers__edit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--rz-size-6);
+    height: var(--rz-size-6);
+    flex-shrink: 0;
+    border-radius: var(--rz-radius-sm);
+    color: var(--rz-fg-subtle);
+    &:hover {
+      color: var(--rz-fg);
+      background-color: var(--rz-bg-hover);
+    }
+  }
+
+  .rz-layers__toggle {
+    position: absolute;
+    top: 50%;
+    left: calc(var(--rz-layers-gutter) + var(--rz-size-3));
+    transform: translateY(-50%);
+    display: flex;
+    width: var(--rz-size-3);
+    height: var(--rz-size-4);
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border-radius: var(--rz-radius-sm);
+  }
+
+  .rz-layers__icon {
+    display: grid;
+    place-items: center;
+    width: var(--rz-layers-icon);
+    height: var(--rz-layers-icon);
+    flex-shrink: 0;
+    border-radius: var(--rz-radius-sm);
+    background-color: var(--rz-bg-well);
+    color: var(--rz-fg-muted);
+  }
+
+  .rz-layers__title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .rz-layers__error {
+    width: var(--rz-size-2);
+    height: var(--rz-size-2);
+    border-radius: var(--rz-radius-full);
+    background-color: var(--rz-danger);
+  }
+
+  .rz-layers__child-label {
+    display: block;
+    padding-left: var(--rz-layers-start);
+    padding-block: var(--rz-size-1);
+    font-size: var(--rz-text-2xs);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--rz-fg-subtle);
+  }
+
+  :global(.rz-layers__item.sortable-ghost > .rz-layers__row) {
+    opacity: 0.4;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
+import LayersList from './LayersList.svelte';
+type Props = {
+    form: DocumentFormContext;
+    list: string;
+    depth: number;
+};
+declare const LayersList: import("svelte").Component<Props, {}, "">;
+type LayersList = ReturnType<typeof LayersList>;
+export default LayersList;

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

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import { t__ } from '../../../../core/i18n/index.js';
+  import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
+  import Input from '../../../../panel/components/ui/input/input.svelte';
+  import { useSortable } from '../../../../panel/util/Sortable.js';
+  import { capitalize } from '../../../../util/string.js';
+  import { Search } from '@lucide/svelte';
+  import { computeCommandScore } from 'bits-ui';
+  import BlockTile from '../picker/BlockTile.svelte';
+  import { getBlocksFocusContext } from './focus.svelte.js';
+
+  /** `heading` off where a tab names it already. */
+  type Props = { form: DocumentFormContext; heading?: boolean };
+  const { form, heading = true }: Props = $props();
+
+  const focus = getBlocksFocusContext()!;
+  /** The block types of the list the next insert goes to: the current block's, else the open one. */
+  const list = $derived(focus.current?.list ?? focus.path ?? '');
+  const types = $derived(list ? (form.blocks.builder(list)?.get.blocks ?? []) : []);
+
+  /** Past this many types, a search sits above them. */
+  const SEARCH_FROM = 10;
+  let query = $state('');
+  const searchable = $derived(types.length > SEARCH_FROM);
+  /** The types the query names, by label, name or description, in their own order. */
+  const shown = $derived.by(() => {
+    const words = query.trim();
+    if (!searchable || !words) return types;
+    return types.filter((builder) => {
+      const { block } = builder;
+      const label = block.label || capitalize(block.name);
+      return computeCommandScore(label, words, [block.name, block.description ?? '']) > 0;
+    });
+  });
+
+  /**
+   * A type drags into the layers and the stage. The row stays here: it is cloned for the drag,
+   * and the clone is dropped once the list it landed in has inserted the block.
+   */
+  const { sortable } = useSortable({
+    group: { name: 'rz-blocks-layers', pull: 'clone', put: false },
+    sort: false,
+    animation: 150,
+    disabled: focus.locked,
+    onEnd: (event) => event.clone?.remove()
+  });
+
+  function dragSource(node: HTMLElement) {
+    const instance = sortable(node);
+    return { destroy: () => instance.destroy() };
+  }
+</script>
+
+<div class="rz-palette">
+  {#if heading}
+    <h3 class="rz-palette__heading">{t__('fields.add_block')}</h3>
+  {/if}
+  {#if searchable}
+    <div class="rz-palette__search">
+      <Input
+        name="palette-search"
+        type="search"
+        icon={Search}
+        placeholder={t__('fields.search_blocks')}
+        bind:value={query}
+      />
+    </div>
+  {/if}
+  <!-- Two tiles a row, as in the picker. A click adds the type, a drag drops it in place. -->
+  <div class="rz-palette__list" use:dragSource>
+    {#each shown as blockBuilder (blockBuilder.name)}
+      {@const block = blockBuilder.block}
+      <button
+        type="button"
+        class="rz-palette__item rz-block-tile"
+        data-type={block.name}
+        title={block.description || null}
+        onclick={() => focus.insertType(block.name)}
+      >
+        <BlockTile {block} />
+      </button>
+    {:else}
+      <p class="rz-palette__empty">{t__('common.nothing_found')}</p>
+    {/each}
+  </div>
+</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-palette__heading {
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+    margin-bottom: var(--rz-size-3);
+    font-size: var(--rz-text-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--rz-fg-subtle);
+  }
+
+  .rz-palette__search {
+    margin-bottom: var(--rz-size-3);
+  }
+
+  .rz-palette__empty {
+    grid-column: 1 / -1;
+    padding: var(--rz-size-4) 0;
+    text-align: center;
+    font-size: var(--rz-text-sm);
+    color: var(--rz-fg-subtle);
+  }
+
+  .rz-palette__list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--rz-size-2);
+  }
+
+  /* A tile drags. */
+  .rz-palette__item {
+    cursor: grab;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
+/** `heading` off where a tab names it already. */
+type Props = {
+    form: DocumentFormContext;
+    heading?: boolean;
+};
+declare const Palette: import("svelte").Component<Props, {}, "">;
+type Palette = ReturnType<typeof Palette>;
+export default Palette;

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

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { t__ } from '../../../../core/i18n/index.js';
+  import { ToyBrick } from '@lucide/svelte';
+  import type { Snippet } from 'svelte';
+  import type { LayerRow } from './focus.svelte.js';
+
+  type Props = { row: LayerRow; error?: unknown; children?: Snippet<[name?: string]> };
+  const { row, error, children }: Props = $props();
+
+  const Icon = $derived(row.config?.icon ?? ToyBrick);
+
+  $effect(() => {
+    if (error) console.error(`Render of block ${row.path} failed`, error);
+  });
+</script>
+
+<!-- A block without a render, or one whose render threw: its icon, its title, its nested lists. -->
+<div class="rz-render-placeholder" data-error={error ? '' : undefined}>
+  <p class="rz-render-placeholder__title">
+    <span class="rz-render-placeholder__icon"><Icon size={14} /></span>
+    <span>{row.title}</span>
+    {#if error}
+      <span class="rz-render-placeholder__error">{t__('fields.render_failed')}</span>
+    {/if}
+  </p>
+  {@render children?.()}
+</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-render-placeholder {
+    display: grid;
+    gap: var(--rz-size-3);
+    padding: var(--rz-size-3) var(--rz-size-4);
+    border: 1px dashed var(--rz-border-strong);
+    border-radius: var(--rz-radius-md);
+  }
+
+  .rz-render-placeholder__title {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+    font-size: var(--rz-text-sm);
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+  }
+
+  .rz-render-placeholder__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-render-placeholder__error {
+    font-variation-settings: 'wght' 400;
+    font-weight: 400;
+    color: var(--rz-danger);
+  }
+</style>