rimecms 1.0.0 → 1.1.0

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

@@ -21,6 +21,16 @@
   /** The document's focus mode, absent in a nested form. */
   const focus = getBlocksFocusContext();
   const list = $derived(normalizeFieldPath(path));
+  /**
+   * Where focus opens: a list inside a block on that block, `sections.1.items` on `sections.1`;
+   * any other on itself.
+   */
+  const focusTarget = $derived.by(() => {
+    const parts = list.split('.');
+    const last = parts.findLastIndex((part) => /^\d+$/.test(part));
+    if (last === -1 || !form.blocks.builder(parts.slice(0, last).join('.'))) return list;
+    return parts.slice(0, last + 1).join('.');
+  });
   const summary = $derived(config.get.layout === 'summary' && !!focus);
 
   const field = $derived(form.useField(path, config));
@@ -119,7 +129,7 @@
           variant="ghost"
           size="sm"
           icon={Maximize2}
-          onclick={() => focus.open(list)}
+          onclick={() => focus.open(focusTarget)}
           data-focus-open={list}
         >
           {t__('fields.open_editor')}
@@ -138,7 +148,7 @@
           : t__('fields.blocks_count|m|p', String(count))}
       </span>
       <Button
-        onclick={() => focus.open(list)}
+        onclick={() => focus.open(focusTarget)}
         size="sm"
         variant="ghost"
         icon={Maximize2}
@@ -182,7 +192,7 @@
   <Field.Error error={field.error} />
 </fieldset>
 
-<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. */
 
@@ -257,7 +267,7 @@
     background-color: var(--rz-bg-raised);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
     border-radius: var(--rz-radius-xl);
 
     :global(.rz-button) {
@@ -286,24 +296,18 @@
       background-color: var(--rz-bg-raised);
       box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
+    var(--rz-shadow-raised, 0 0 transparent);
     }
 
     > :global(.rz-block + .rz-block) {
       border-top: 1px solid var(--rz-border);
     }
-
-    /* An open block draws its own edge. */
-    > :global(.rz-block[data-open] + .rz-block) {
-      border-top-color: transparent;
-    }
   }
 
-  /* Inside a group, a block, a tree item or a stage card: a hairline, no second fill. */
+  /* Inside a group, a block or a tree item: a hairline, no second fill. */
   :global(.rz-group-field__content) :is(.rz-blocks__list:not([data-empty]), .rz-blocks__summary),
   :global(.rz-block__fields) :is(.rz-blocks__list:not([data-empty]), .rz-blocks__summary),
-  :global(.rz-tree-item__fields) :is(.rz-blocks__list:not([data-empty]), .rz-blocks__summary),
-  :global(.rz-stage__fields) :is(.rz-blocks__list:not([data-empty]), .rz-blocks__summary) {
+  :global(.rz-tree-item__fields) :is(.rz-blocks__list:not([data-empty]), .rz-blocks__summary) {
     background-color: transparent;
     box-shadow: 0 0 0 1px var(--rz-border);
   }

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

@@ -10,7 +10,7 @@
   import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
   import { getLocaleContext } from '../../../../panel/context/locale.svelte.js';
   import { getNavContext } from '../../../../panel/context/nav.svelte.js';
-  import { populate } from '../../../../panel/util/populate.js';
+  import { populate } from '../../../relation/populate.js';
   import { capitalize } from '../../../../util/string.js';
   import { ChevronRight, PanelRight, ToyBrick, X } from '@lucide/svelte';
   import { untrack } from 'svelte';
@@ -19,8 +19,8 @@
   import { getBlocksFocusContext, type SidebarTab } from './focus.svelte.js';
   import Layers from './Layers.svelte';
   import Palette from './Palette.svelte';
+  import Inspector from './Inspector.svelte';
   import Renders from './Renders.svelte';
-  import Stage from './Stage.svelte';
   import StagePlaceholder from './StagePlaceholder.svelte';
 
   const { form }: { form: DocumentFormContext } = $props();
@@ -30,14 +30,26 @@
   /** The overlay starts where the navigation ends, folded or not. */
   const nav = getNavContext();
 
-  const builder = $derived(focus.path ? form.blocks.builder(focus.path) : undefined);
-  /** The types of the list the next insert goes to: the selected block's, else the open one. */
+  /** The list on screen: the open one, or the one the narrowed block sits in. */
+  const stageList = $derived(focus.narrowedRow?.list ?? focus.path ?? '');
+  const builder = $derived(stageList ? form.blocks.builder(stageList) : undefined);
+  /** The types of the list the next insert goes to. */
   const addable = $derived.by(() => {
-    const list = focus.current?.list ?? focus.path;
+    const list = focus.insertList();
     return list ? (form.blocks.builder(list)?.get.blocks ?? []) : [];
   });
   const crumbs = $derived(focus.breadcrumb());
-  const count = $derived(focus.path ? form.blocks.list(focus.path).length : 0);
+  /** The open list's blocks, or those the narrowed block holds. */
+  const count = $derived(
+    focus.narrowedRow
+      ? focus.narrowedRow.children.reduce(
+          (sum, child) => sum + form.blocks.list(child.list).length,
+          0
+        )
+      : focus.path
+        ? form.blocks.list(focus.path).length
+        : 0
+  );
   const countLabel = $derived(
     count === 1 ? t__('fields.blocks_count', '1') : t__('fields.blocks_count|m|p', String(count))
   );
@@ -57,24 +69,21 @@
     return parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
   }
 
-  /** Fields to show: a render with nothing but fields of its own, beside the stack of renders. */
-  const inspectable = $derived(focus.hasRenders);
-
   // The selection moved. Nothing left to inspect: the types to add. Picked from the layers in the
   // sheet: put it away, to see the block.
   $effect(() => {
     const picked = !!focus.current;
     untrack(() => {
-      if (focus.tab === 'inspector' && (!picked || !inspectable)) focus.tab = 'add';
+      if (focus.tab === 'inspector' && !picked) focus.tab = 'add';
       if (focus.tab === 'layers') panelOpen = false;
     });
   });
 
   // Arriving on an empty list: the types to add.
   $effect(() => {
-    const list = focus.path;
+    const opened = focus.path;
     untrack(() => {
-      if (list && !focus.locked && !form.blocks.list(list).length) focus.tab = 'add';
+      if (opened && !focus.locked && !count) focus.tab = 'add';
     });
   });
 
@@ -82,7 +91,7 @@
   $effect(() => {
     if (!focus.inspected) return;
     untrack(() => {
-      if (narrow && inspectable) panelOpen = true;
+      if (narrow) panelOpen = true;
     });
   });
 
@@ -109,10 +118,10 @@
     else focus.removeSelection();
   }
 
-  /** Escape goes back one step: the selection, then focus mode. The sheet closes itself. */
+  /** Escape goes back one step: the selection, then one level up. The sheet closes itself. */
   function back() {
     if (!focus.rootSelected) focus.selectRoot();
-    else focus.close();
+    else focus.up();
   }
 
   async function paste() {
@@ -130,8 +139,7 @@
    */
   useCommands(() => {
     if (!focus.path) return [];
-    const list = focus.current?.list ?? focus.path;
-    const types = form.blocks.builder(list)?.get.blocks ?? [];
+    const types = addable;
     const row = focus.currentRow;
     const editing = !focus.locked;
     const free = () => !dialogOpen();
@@ -145,7 +153,7 @@
             run: () => focus.insertType(builder.name)
           }))
         : []),
-      ...(editing && row
+      ...(editing && row && !focus.isNarrowedBlock(row.path)
         ? [
             {
               id: 'blocks.duplicate',
@@ -302,7 +310,6 @@
 <div
   class="rz-blocks-focus"
   data-focus={focus.path}
-  data-layout={focus.hasRenders ? 'renders' : 'fields'}
   style:left={nav?.width ?? '0'}
   bind:clientWidth={width}
 >
@@ -370,11 +377,9 @@
         <Tabs.Trigger value="layers" data-label={t__('fields.layers')}>
           {t__('fields.layers')}
         </Tabs.Trigger>
-        {#if inspectable}
-          <Tabs.Trigger value="inspector" data-label={t__('fields.inspector')}>
-            {t__('fields.inspector')}
-          </Tabs.Trigger>
-        {/if}
+        <Tabs.Trigger value="inspector" data-label={t__('fields.inspector')}>
+          {t__('fields.inspector')}
+        </Tabs.Trigger>
         {#if !focus.locked}
           <Tabs.Trigger value="add" data-label={t__('fields.blocks')}>
             {t__('fields.blocks')}
@@ -386,15 +391,13 @@
           <Layers {form} heading={false} />
         </div>
       </Tabs.Content>
-      {#if inspectable}
-        <Tabs.Content value="inspector" class="rz-blocks-focus__panel-content">
-          {#if focus.current}
-            <Stage {form} onRemove={requestRemove} />
-          {:else}
-            <p class="rz-blocks-focus__panel-hint">{t__('fields.pick_a_block')}</p>
-          {/if}
-        </Tabs.Content>
-      {/if}
+      <Tabs.Content value="inspector" class="rz-blocks-focus__panel-content">
+        {#if focus.current}
+          <Inspector {form} />
+        {:else}
+          <p class="rz-blocks-focus__panel-hint">{t__('fields.pick_a_block')}</p>
+        {/if}
+      </Tabs.Content>
       {#if !focus.locked}
         <Tabs.Content value="add" class="rz-blocks-focus__panel-content">
           <div class="rz-blocks-focus__panel-pad"><Palette {form} heading={false} /></div>
@@ -404,19 +407,18 @@
   {/snippet}
 
   <div class="rz-blocks-focus__body">
-    {#if focus.hasRenders}
-      <!-- A click beside the blocks selects the root; the blocks stop their own clicks. -->
-      <section class="rz-blocks-focus__renders" role="presentation" onclick={focus.selectRoot}>
-        <Renders {form} list={focus.path ?? ''} onRemove={requestRemove} />
-        {#if count && !focus.locked}
-          <StagePlaceholder />
-        {/if}
-      </section>
-    {:else}
-      <section class="rz-blocks-focus__stage">
-        <Stage {form} onRemove={requestRemove} />
-      </section>
-    {/if}
+    <!--
+      The stage: the open list, or the narrowed block alone with what it holds. A click beside the
+      blocks selects the root; the blocks stop their own clicks.
+    -->
+    <section class="rz-blocks-focus__renders" role="presentation" onclick={focus.selectRoot}>
+      {#key focus.path}
+        <Renders {form} list={stageList} only={focus.narrowedRow?.index} onRemove={requestRemove} />
+      {/key}
+      {#if count && !focus.locked}
+        <StagePlaceholder />
+      {/if}
+    </section>
 
     {#if narrow}
       <Sheet.Root bind:open={panelOpen}>
@@ -462,7 +464,7 @@
   </Dialog.Root>
 </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. */
 
@@ -562,12 +564,11 @@
    * The stage, a canvas with the blocks centred on it as wide as the document's column at most,
    * and the panel on the right.
    *
-   *   --rz-focus-side: the panel, growing with the room; wider beside renders, where it holds a
-   *                    block's fields
+   *   --rz-focus-side: the panel, growing with the room, where a block's fields want some
    *   --rz-document-width: the blocks' column, 60rem
    */
   .rz-blocks-focus__body {
-    --rz-focus-side: clamp(20rem, 22cqi, 26rem);
+    --rz-focus-side: clamp(26rem, 32cqi, 40rem);
     position: relative;
     display: grid;
     grid-template-columns: minmax(0, 1fr) var(--rz-focus-side);
@@ -575,8 +576,7 @@
   }
 
   .rz-blocks-focus__renders > :global(.rz-renders),
-  .rz-blocks-focus__renders > :global(.rz-stage-placeholder),
-  .rz-blocks-focus__stage > :global(.rz-stage) {
+  .rz-blocks-focus__renders > :global(.rz-stage-placeholder) {
     max-width: var(--rz-document-width, 60rem);
     margin-inline: auto;
   }
@@ -587,13 +587,7 @@
     margin-top: var(--rz-size-3);
   }
 
-  /* With renders the panel holds a block's fields, which want room. */
-  .rz-blocks-focus[data-layout='renders'] .rz-blocks-focus__body {
-    --rz-focus-side: clamp(24rem, 30cqi, 36rem);
-  }
-
   .rz-blocks-focus__panel,
-  .rz-blocks-focus__stage,
   .rz-blocks-focus__renders {
     min-width: 0;
     min-height: 0;
@@ -605,7 +599,6 @@
     border-left: 1px solid var(--rz-border);
   }
 
-  .rz-blocks-focus__stage,
   .rz-blocks-focus__renders {
     background-color: var(--rz-bg-well);
   }
@@ -618,10 +611,6 @@
     padding: var(--rz-size-14) var(--rz-size-8) var(--rz-size-32);
   }
 
-  .rz-blocks-focus__stage {
-    padding-bottom: var(--rz-size-16);
-  }
-
   /* The tabs on the panel's top edge, the content scrolling under them; in a column or a sheet. */
   /* In a column or in a sheet, which sits outside the overlay: the padding its fields read. */
   :global(.rz-blocks-focus__panel-tabs.rz-tabs[data-tabs-root]) {
@@ -672,8 +661,7 @@
 
   /* Narrow: the stage alone, the panel in a sheet from the right, behind the header's button. */
   @container rz-focus (max-width: 52rem) {
-    .rz-blocks-focus__body,
-    .rz-blocks-focus[data-layout='renders'] .rz-blocks-focus__body {
+    .rz-blocks-focus__body {
       grid-template-columns: minmax(0, 1fr);
     }
   }

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

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { t__ } from '../../../../core/i18n/index.js';
+  import { capitalize } from '../../../../util/string.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);
+  const label = $derived(row.config?.label || capitalize(row.block.type));
+
+  $effect(() => {
+    if (error) console.error(`Render of block ${row.path} failed`, error);
+  });
+</script>
+
+<!--
+  A block without a render, or one whose render threw: a row with its icon, its title and its
+  type, then its lists of blocks under it. Its fields are in the inspector.
+-->
+<div class="rz-default-render" data-error={error ? '' : undefined}>
+  <p class="rz-default-render__row">
+    <span class="rz-default-render__icon"><Icon size={14} /></span>
+    <span class="rz-default-render__title">{row.title}</span>
+    {#if row.title !== label}
+      <span class="rz-default-render__type">{label}</span>
+    {/if}
+    {#if error}
+      <span class="rz-default-render__error">{t__('fields.render_failed')}</span>
+    {/if}
+  </p>
+  {#if row.children.length}
+    <div class="rz-default-render__children">{@render children?.()}</div>
+  {/if}
+</div>
+
+<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. */
+.rz-default-render {
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised, 0 0 transparent);
+    border-radius: var(--rz-radius-md);
+  }
+
+  .rz-default-render__row {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+    min-width: 0;
+    height: calc(11 * var(--rz-unit));
+    padding-inline: var(--rz-size-3);
+    font-size: var(--rz-text-sm);
+  }
+
+  .rz-default-render__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-default-render__title {
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .rz-default-render__type {
+    flex-shrink: 0;
+    font-size: var(--rz-text-xs);
+    color: var(--rz-fg-subtle);
+  }
+
+  .rz-default-render__error {
+    color: var(--rz-danger);
+  }
+
+  /* The block's lists, indented under its row. */
+  .rz-default-render__children {
+    display: grid;
+    gap: var(--rz-size-3);
+    padding: 0 var(--rz-size-3) var(--rz-size-3) var(--rz-size-10);
+  }
+</style>

package/dist/fields/blocks/component/focus/{RenderPlaceholder.svelte.d.ts → DefaultRender.svelte.d.ts}

@@ -5,6 +5,6 @@ type Props = {
     error?: unknown;
     children?: Snippet<[name?: string]>;
 };
-declare const RenderPlaceholder: import("svelte").Component<Props, {}, "">;
-type RenderPlaceholder = ReturnType<typeof RenderPlaceholder>;
-export default RenderPlaceholder;
+declare const DefaultRender: import("svelte").Component<Props, {}, "">;
+type DefaultRender = ReturnType<typeof DefaultRender>;
+export default DefaultRender;

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. */