rimecms 1.0.1 → 1.1.0

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

@@ -0,0 +1,160 @@
+<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 { Focus, ToyBrick } from '@lucide/svelte';
+  import { getBlocksFocusContext } from './focus.svelte.js';
+
+  type Props = { form: DocumentFormContext };
+  const { form }: Props = $props();
+
+  const focus = getBlocksFocusContext()!;
+  const row = $derived(focus.currentRow);
+
+  /** The selected block's fields, but its lists of blocks: those are on the stage already. */
+  const rendered = $derived.by(() => {
+    if (!row) return null;
+    const { fields, path } = getFieldListAtPath(
+      withBlockTypes(row.path, form.values),
+      form.config.fields
+    );
+    return { fields: fields.filter((field) => field.type !== 'blocks'), path };
+  });
+
+  const countOf = (list: string) => {
+    const count = form.blocks.list(list).length;
+    return count === 1
+      ? t__('fields.blocks_count', '1')
+      : t__('fields.blocks_count|m|p', String(count));
+  };
+</script>
+
+{#if row && rendered}
+  {@const Icon = row.config?.icon ?? ToyBrick}
+  <!-- The selected block: its head, its fields, then how many blocks each of its lists holds. -->
+  <article class="rz-inspector" data-block-path={row.path}>
+    <header class="rz-inspector__header">
+      <span class="rz-inspector__icon"><Icon size={14} /></span>
+      <h3>{row.title}</h3>
+      <span class="rz-inspector__path">{row.path}</span>
+      {#if row.children.length && !focus.isNarrowedBlock(row.path)}
+        <Button
+          class="rz-inspector__focus"
+          variant="ghost"
+          size="sm"
+          icon={Focus}
+          title={t__('fields.focus_block')}
+          aria-label={t__('fields.focus_block')}
+          onclick={() => focus.open(row.path)}
+        >
+          {t__('fields.focus')}
+        </Button>
+      {/if}
+    </header>
+    <div class="rz-inspector__fields">
+      <RenderFields fields={rendered.fields} path={rendered.path} {form} />
+    </div>
+    {#if row.children.length}
+      <ul class="rz-inspector__lists">
+        {#each row.children as child (child.list)}
+          <li class="rz-inspector__list">
+            <span>{child.label}</span>
+            <span class="rz-inspector__count">{countOf(child.list)}</span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </article>
+{/if}
+
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
+
+/* 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 head stays on top of the fields, on the page's own fill. */
+  .rz-inspector__header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+    height: calc(11.5 * var(--rz-unit));
+    padding-inline: var(--rz-size-3);
+    border-bottom: 1px solid var(--rz-border);
+    background-color: var(--rz-bg-page);
+
+    h3 {
+      font-variation-settings: 'wght' 500;
+      font-weight: 500;
+      font-size: var(--rz-text-md);
+      white-space: nowrap;
+    }
+  }
+
+  .rz-inspector__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-inspector__path {
+    min-width: 0;
+    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;
+  }
+
+  /* On the right end of the head. */
+  .rz-inspector__header :global(.rz-inspector__focus) {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  .rz-inspector__fields {
+    padding-block: var(--rz-size-6);
+  }
+
+  /* Under the fields, past a hairline: each list and its count, in quiet text. */
+  .rz-inspector__lists {
+    display: grid;
+    gap: var(--rz-size-1-5);
+    margin: 0 var(--rz-fields-padding) var(--rz-size-16);
+    padding-top: var(--rz-size-4);
+    border-top: 1px solid var(--rz-border);
+    font-size: var(--rz-text-sm);
+    color: var(--rz-fg-muted);
+  }
+
+  .rz-inspector__list {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--rz-size-2);
+  }
+
+  .rz-inspector__count {
+    color: var(--rz-fg-subtle);
+  }
+</style>

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

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

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

@@ -33,7 +33,7 @@
     </header>
   {/if}
   {#if focus.path}
-    <!-- The root node: the list itself. Selected, the stage shows every block of it. -->
+    <!-- The root node: the open list, or the narrowed block. Selected, nothing is. -->
     <button
       type="button"
       class="rz-layers__root"
@@ -43,11 +43,24 @@
       <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 focus.narrowedRow}
+      <!-- Narrowed to a block: the lists it holds, each under its name when there are several. -->
+      {@const lists = focus.narrowedRow.children}
+      {#each lists as child (child.list)}
+        <LayersList
+          {form}
+          list={child.list}
+          depth={1}
+          label={lists.length > 1 ? child.label : undefined}
+        />
+      {/each}
+    {:else}
+      <LayersList {form} list={focus.path} depth={1} />
+    {/if}
   {/if}
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

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

@@ -8,8 +8,9 @@
   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();
+  /** `label` names the list above it, for a block that holds several. */
+  type Props = { form: DocumentFormContext; list: string; depth: number; label?: string };
+  const { form, list, depth, label }: Props = $props();
 
   const focus = getBlocksFocusContext()!;
   const rows = $derived(focus.rowsOf(list, depth));
@@ -59,6 +60,9 @@
   }
 </script>
 
+{#if label}
+  <span class="rz-layers__child-label" style:--rz-layers-depth={depth}>{label}</span>
+{/if}
 <ul
   class="rz-layers__list"
   data-list={list}
@@ -103,8 +107,8 @@
         {#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. -->
+        {#if !focus.locked && focus.isSelected(row.path)}
+          <!-- The fields are a tab away: this opens it. -->
           <button
             type="button"
             class="rz-layers__edit"
@@ -123,12 +127,12 @@
       {#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} />
+            <LayersList
+              {form}
+              list={child.list}
+              depth={depth + 1}
+              label={row.children.length > 1 ? child.label : undefined}
+            />
           </div>
         {/each}
       {/if}
@@ -136,7 +140,7 @@
   {/each}
 </ul>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -301,4 +305,17 @@
   :global(.rz-layers__item.sortable-ghost > .rz-layers__row) {
     opacity: 0.4;
   }
+
+  /* A type dragged in from the palette: a row of the layers, its name alone. */
+  :global(.rz-layers__list > .rz-palette__item.rz-block-tile) {
+    height: var(--rz-size-7);
+    padding: 0 0 0 var(--rz-layers-start);
+    border-radius: var(--rz-radius-sm);
+    justify-content: center;
+  }
+  :global(
+    .rz-layers__list > .rz-palette__item :is(.rz-block-tile__frame, .rz-block-tile__description)
+  ) {
+    display: none;
+  }
 </style>

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

@@ -1,9 +1,11 @@
 import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
 import LayersList from './LayersList.svelte';
+/** `label` names the list above it, for a block that holds several. */
 type Props = {
     form: DocumentFormContext;
     list: string;
     depth: number;
+    label?: string;
 };
 declare const LayersList: import("svelte").Component<Props, {}, "">;
 type LayersList = ReturnType<typeof LayersList>;

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

@@ -14,8 +14,8 @@
   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 ?? '');
+  /** The block types of the list the next insert goes to. */
+  const list = $derived(focus.insertList() ?? '');
   const types = $derived(list ? (form.blocks.builder(list)?.get.blocks ?? []) : []);
 
   /** Past this many types, a search sits above them. */
@@ -85,7 +85,7 @@
   </div>
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 

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

@@ -3,18 +3,23 @@
   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 { ArrowDown, ArrowUp, CopyPlus, Focus, Trash2 } from '@lucide/svelte';
   import type Sortable from 'sortablejs';
+  import DefaultRender from './DefaultRender.svelte';
   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();
+  /**
+   * `only` narrows the list to the block at that index, focus on one block: it does not move
+   * then, its own lists do. `onRemove` asks first when the block holds blocks of its own.
+   */
+  type Props = { form: DocumentFormContext; list: string; only?: number; onRemove: () => void };
+  const { form, list, only, onRemove }: Props = $props();
 
   const focus = getBlocksFocusContext()!;
-  const rows = $derived(focus.rowsOf(list));
+  const rows = $derived(
+    only === undefined ? focus.rowsOf(list) : focus.rowsOf(list).filter((row) => row.index === only)
+  );
 
   /**
    * A click selects the block, shows its fields, and stops there; a link inside a render does not
@@ -46,8 +51,10 @@
 
   /**
    * 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.
+   * drags in from the palette, and a nested list is a target like any other. The stage mounts a
+   * list anew when focus moves, so `only` is read once.
    */
+  // svelte-ignore state_referenced_locally
   const { sortable } = useSortable({
     group: {
       name: 'rz-blocks-layers',
@@ -61,7 +68,7 @@
     animation: 150,
     fallbackOnBody: true,
     swapThreshold: 0.65,
-    disabled: focus.locked,
+    disabled: focus.locked || only !== undefined,
     /** 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;
@@ -90,7 +97,7 @@
 
 <!--
   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.
+  render puts where they go; a block without a render is a row with them under it.
 -->
 <div class="rz-renders" data-list={list} data-empty={rows.length ? undefined : ''} use:sortableList>
   {#each rows as row (row.block.id)}
@@ -98,12 +105,15 @@
     {@const Render = config?.render}
     {#snippet nested(name?: string)}
       {#each row.children.filter((child) => !name || child.builder.name === name) as child (child.builder.name)}
+        <!-- All of them at once, and more than one: each under its name. -->
+        {#if !name && row.children.length > 1}
+          <p class="rz-renders__list-label">{child.label}</p>
+        {/if}
         <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}
@@ -117,7 +127,7 @@
         }
       }}
     >
-      {#if controlled(row.path)}
+      {#if controlled(row.path) && !focus.isNarrowedBlock(row.path)}
         <!-- Above it: move, duplicate, remove. A click on the block already opens its fields. -->
         <div class="rz-renders__toolbar">
           <button
@@ -139,6 +149,17 @@
             <ArrowDown size={14} />
           </button>
           <span class="rz-renders__toolbar-separator" aria-hidden="true"></span>
+          {#if row.children.length && focus.path !== row.path}
+            <!-- The stage narrowed to this block and what it holds. -->
+            <button
+              type="button"
+              title={t__('fields.focus_block')}
+              aria-label={t__('fields.focus_block')}
+              onclick={(event) => control(event, () => focus.open(row.path))}
+            >
+              <Focus size={14} />
+            </button>
+          {/if}
           <button
             type="button"
             title={t__('common.duplicate')}
@@ -167,21 +188,21 @@
             children={nested}
           />
           {#snippet failed(error)}
-            <RenderPlaceholder {row} {error} children={nested} />
+            <DefaultRender {row} {error} children={nested} />
           {/snippet}
         </svelte:boundary>
       {:else}
-        <RenderPlaceholder {row} children={nested} />
+        <DefaultRender {row} children={nested} />
       {/if}
     </div>
   {:else}
     {#if list === focus.path}
-      <p class="rz-renders__empty">{t__('fields.no_blocks_yet_render')}</p>
+      <p class="rz-renders__empty">{t__('fields.no_blocks_yet')}</p>
     {/if}
   {/each}
 </div>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -236,6 +257,36 @@
     opacity: 0.4;
   }
 
+  /* A type dragged in from the palette: the row the block will be, not the palette's tile. */
+  :global(.rz-renders > .rz-palette__item.rz-block-tile) {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--rz-size-2);
+    height: calc(11 * var(--rz-unit));
+    padding: 0 var(--rz-size-3);
+    border-radius: var(--rz-radius-md);
+    color: var(--rz-fg);
+  }
+  :global(.rz-renders > .rz-palette__item .rz-block-tile__frame) {
+    width: var(--rz-size-6);
+    flex-shrink: 0;
+    aspect-ratio: 1;
+    border-radius: var(--rz-radius-sm);
+  }
+  :global(.rz-renders > .rz-palette__item .rz-block-tile__title) {
+    padding-inline: 0;
+  }
+  :global(.rz-renders > .rz-palette__item .rz-block-tile__description) {
+    display: none;
+  }
+
+  /* The name of a nested list, when a block holds several. */
+  .rz-renders__list-label {
+    margin-bottom: calc(-1.5 * var(--rz-unit));
+    font-size: var(--rz-text-xs);
+    color: var(--rz-fg-subtle);
+  }
+
   /*
    * 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.

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

@@ -1,9 +1,13 @@
 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. */
+/**
+ * `only` narrows the list to the block at that index, focus on one block: it does not move
+ * then, its own lists do. `onRemove` asks first when the block holds blocks of its own.
+ */
 type Props = {
     form: DocumentFormContext;
     list: string;
+    only?: number;
     onRemove: () => void;
 };
 declare const Renders: import("svelte").Component<Props, {}, "">;

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

@@ -22,7 +22,7 @@
   {before}<Kbd keys="/" />{after}
 </button>
 
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+<style>/* A level: its fill, a hairline, and its shadow when it has one. raised has none, float does. */
 
 /* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
@@ -62,8 +62,5 @@
       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/focus.svelte.d.ts

@@ -2,7 +2,10 @@ import type { GenericBlock } from '../../../../core/prototype/types.js';
 import type { BlocksBuilder, BlocksFieldBlock } from '../../index.js';
 import { type BlockAt } from '../../../../panel/context/blocks-ops.js';
 import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
-/** The query parameter that names the list focus is open on: `?focus=layout.sections`. */
+/**
+ * The query parameter that names what focus is open on: a list, `?focus=layout.sections`, or one
+ * block and what it holds, `?focus=layout.sections.1`.
+ */
 export declare const FOCUS_PARAM = "focus";
 export type SidebarTab = 'layers' | 'inspector' | 'add';
 /** One step of the way down to the open list: a blocks field, or the block an index names. */
@@ -33,12 +36,13 @@ export type LayerRow = {
  * rows are folded. The document form is the only state it writes to; a page reload with
  * `?focus=` in the address reopens it.
  *
- * The selection drives the stage: a block, or nothing, which is the root node of the layers and
- * shows the whole list.
+ * The stage shows the open list, or the one block the path ends on and the lists it holds. The
+ * selection is a block, or nothing, which is the root node of the layers.
  *
- * A focus opened from the field rides in `page.state`, so Escape, the close button and the back
- * button all do the same thing. One opened by the address has no history entry of its own: the
- * router is not ready for one while the page mounts, and closing it rewrites the address instead.
+ * A focus opened from the field rides in `page.state`, one history entry per `open`, so Escape
+ * and the back button go up the same levels. One opened by the address has no history entry of
+ * its own: the router is not ready for one while the page mounts, and going up rewrites the
+ * address instead.
  */
 export declare function setBlocksFocusContext(form: DocumentFormContext): {
     readonly path: string | null;
@@ -53,18 +57,23 @@ export declare function setBlocksFocusContext(form: DocumentFormContext): {
     picking: boolean;
     /** Opens the picker of types to add; the one picked goes after the selection. */
     pick(): void;
-    /** The open list's block set has at least one render: the stage is the stack of renders. */
-    readonly hasRenders: boolean;
+    /** The block the stage is narrowed to, when the path ends on one. */
+    readonly narrowedRow: LayerRow | null;
     /** Nothing selected: the root node, and the whole list on the stage. */
     readonly rootSelected: boolean;
     rootLabel: () => string;
     selectRoot: () => void;
     breadcrumb: () => Crumb[];
     isSelected: (rowPath: string) => boolean;
+    isNarrowedBlock: (rowPath: string) => boolean;
+    insertList: () => string | null;
     isCollapsed: (rowPath: string) => boolean;
-    open: (list: string, selected?: string) => void;
+    open: (target: string, selected?: string) => void;
     close: () => void;
+    up: () => void;
     rowsOf: (list: string, depth?: number) => LayerRow[];
+    rootRows: () => LayerRow[];
+    homeList: () => string | null;
     allRows: () => LayerRow[];
     visibleRows: () => LayerRow[];
     moveTargets: () => {
@@ -103,18 +112,23 @@ export declare const getBlocksFocusContext: () => {
     picking: boolean;
     /** Opens the picker of types to add; the one picked goes after the selection. */
     pick(): void;
-    /** The open list's block set has at least one render: the stage is the stack of renders. */
-    readonly hasRenders: boolean;
+    /** The block the stage is narrowed to, when the path ends on one. */
+    readonly narrowedRow: LayerRow | null;
     /** Nothing selected: the root node, and the whole list on the stage. */
     readonly rootSelected: boolean;
     rootLabel: () => string;
     selectRoot: () => void;
     breadcrumb: () => Crumb[];
     isSelected: (rowPath: string) => boolean;
+    isNarrowedBlock: (rowPath: string) => boolean;
+    insertList: () => string | null;
     isCollapsed: (rowPath: string) => boolean;
-    open: (list: string, selected?: string) => void;
+    open: (target: string, selected?: string) => void;
     close: () => void;
+    up: () => void;
     rowsOf: (list: string, depth?: number) => LayerRow[];
+    rootRows: () => LayerRow[];
+    homeList: () => string | null;
     allRows: () => LayerRow[];
     visibleRows: () => LayerRow[];
     moveTargets: () => {