rimecms 1.0.1 → 1.1.0

package/dist/core/i18n/en/fields.d.ts

@@ -27,7 +27,6 @@ declare namespace _default {
     let picker_add: string;
     let blocks_count: string;
     let no_blocks_yet: string;
-    let no_blocks_yet_render: string;
     let render_failed: string;
     let go_to: string;
     let move_up: string;
@@ -62,6 +61,7 @@ declare namespace _default {
     let remove_item: string;
     let open_editor: string;
     let open_in_editor: string;
+    let focus_block: string;
     let add_a_block: string;
     let block_actions: string;
     let fold: string;

package/dist/core/i18n/en/fields.js

@@ -27,7 +27,6 @@ export default {
   picker_add: 'to add',
   blocks_count: '$1 {block|block|blocks|blocks}',
   no_blocks_yet: 'No block yet. Add one from the right, or with ⌘K.',
-  no_blocks_yet_render: 'No block yet. Add one with ⌘K.',
   render_failed: 'The render of this block failed.',
   go_to: 'Go to',
   move_up: 'Move up',
@@ -62,6 +61,7 @@ export default {
   remove_item: 'Remove $1',
   open_editor: 'Open the editor',
   open_in_editor: 'Open in the editor',
+  focus_block: 'Focus on this block',
   add_a_block: 'Add a block',
   block_actions: 'Block actions',
   fold: 'Collapse',

package/dist/core/i18n/fr/fields.d.ts

@@ -27,7 +27,6 @@ declare namespace _default {
     let picker_add: string;
     let blocks_count: string;
     let no_blocks_yet: string;
-    let no_blocks_yet_render: string;
     let render_failed: string;
     let go_to: string;
     let move_up: string;
@@ -62,6 +61,7 @@ declare namespace _default {
     let remove_item: string;
     let open_editor: string;
     let open_in_editor: string;
+    let focus_block: string;
     let add_a_block: string;
     let block_actions: string;
     let fold: string;

package/dist/core/i18n/fr/fields.js

@@ -27,7 +27,6 @@ export default {
   picker_add: 'pour ajouter',
   blocks_count: '$1 {bloc|bloc|blocs|blocs}',
   no_blocks_yet: 'Aucun bloc pour l’instant. Ajoutez-en un à droite, ou avec ⌘K.',
-  no_blocks_yet_render: 'Aucun bloc pour l’instant. Ajoutez-en un avec ⌘K.',
   render_failed: 'Le rendu de ce bloc a échoué.',
   go_to: 'Aller à',
   move_up: 'Monter',
@@ -62,6 +61,7 @@ export default {
   remove_item: 'Retirer $1',
   open_editor: 'Ouvrir l’éditeur',
   open_in_editor: 'Ouvrir dans l’éditeur',
+  focus_block: 'Se concentrer sur ce bloc',
   add_a_block: 'Ajouter un bloc',
   block_actions: 'Actions du bloc',
   fold: 'Replier',

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

@@ -43,7 +43,7 @@
   <BlockPicker bind:open types={config.get.blocks} onpick={add} />
 {/if}
 
-<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/Block.svelte

@@ -84,7 +84,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. */
 
@@ -121,9 +121,6 @@
 
   /* 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);
     }
@@ -139,10 +136,12 @@
     display: flex;
     align-items: center;
     gap: var(--rz-size-2);
+    height: var(--rz-size-11);
     min-height: var(--rz-size-11);
     padding: 0 var(--rz-size-1-5) 0 var(--rz-size-1);
     transition: background-color 0.15s;
-
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
     &:hover {
       background-color: var(--rz-bg-hover);
     }

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

@@ -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;