rimecms 1.0.0 → 1.1.0

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

@@ -6,40 +6,55 @@ import { capitalize } from '../../../../util/string.js';
 import { getContext, setContext } from 'svelte';
 import { SvelteSet } from 'svelte/reactivity';
 const KEY = 'rime.blocks-focus';
-/** 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 const FOCUS_PARAM = 'focus';
+/** `sections.1` ends on a block, `sections` does not. */
+const endsOnBlock = (target) => /\.\d+$/.test(target);
 /**
  * The focus mode of one blocks field: which list it is open on, which blocks are selected, which
  * 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 function setBlocksFocusContext(form) {
-    let fromUrl = $state(page.url.searchParams.get(FOCUS_PARAM));
+    const initial = page.url.searchParams.get(FOCUS_PARAM);
+    let fromUrl = $state(initial);
     const path = $derived((page.state.blocksFocus ?? fromUrl) || null);
-    let selection = $state([]);
+    /** Narrowed by the address, the block is selected and its fields show. */
+    const narrowedFromUrl = !!initial && endsOnBlock(initial);
+    let selection = $state(narrowedFromUrl ? [initial] : []);
     /** The panel's tab: the tree of blocks, the selected block's fields, the types to add. */
-    let tab = $state('layers');
+    let tab = $state(narrowedFromUrl ? 'inspector' : 'layers');
     /** Counts the asks to show a block's fields, so a closed panel knows to open. */
     let inspected = $state(0);
     /** The picker of types to add is open. */
     let picking = $state(false);
     /** The folded rows, by block id: a fold stays on its block when the block moves. */
     const collapsed = new SvelteSet();
-    let openedHere = false;
+    /** The entries focus pushed, up to the one on screen. */
+    const depth = $derived(page.state.blocksFocusDepth ?? 0);
     $effect(() => {
         if (path)
             return;
         selection = [];
         collapsed.clear();
+        // Closed back onto the entry the address opened: the address drops its focus too.
+        if (page.url.searchParams.has(FOCUS_PARAM))
+            replaceState(urlWith(null), {});
     });
     const locked = $derived(form.isDisabled || form.readOnly);
+    /** The block the path ends on, the one the stage is narrowed to. */
+    const narrowed = $derived(path && endsOnBlock(path) ? parseBlockPath(path) : null);
     const urlWith = (list) => {
         const url = new URL(page.url);
         if (list)
@@ -48,22 +63,44 @@ export function setBlocksFocusContext(form) {
             url.searchParams.delete(FOCUS_PARAM);
         return url;
     };
-    function open(list, selected) {
-        openedHere = true;
-        fromUrl = null;
-        pushState(urlWith(list), { blocksFocus: list });
-        selection = selected ? [selected] : [];
+    /**
+     * Opens focus on a list, `sections`, with `selected` selected. Or narrows it to a block,
+     * `sections.1`: that block selected, its fields in the panel.
+     */
+    function open(target, selected) {
+        if (endsOnBlock(target)) {
+            selection = [target];
+            tab = 'inspector';
+        }
+        else {
+            selection = selected ? [selected] : [];
+        }
+        const state = { blocksFocus: target, blocksFocusDepth: depth + 1 };
+        pushState(urlWith(target), state);
     }
+    /** Leaves focus mode, back past every entry it pushed, the one the address opened included. */
     function close() {
-        if (openedHere) {
-            openedHere = false;
-            history.back();
+        fromUrl = null;
+        if (depth) {
+            history.go(-depth);
         }
         else {
-            fromUrl = null;
             replaceState(urlWith(null), {});
         }
     }
+    /** One level up: the entry before, the list of the narrowed block, or out of focus mode. */
+    function up() {
+        if (depth) {
+            history.back();
+        }
+        else if (narrowed) {
+            fromUrl = narrowed.list;
+            replaceState(urlWith(narrowed.list), { blocksFocus: narrowed.list });
+        }
+        else {
+            close();
+        }
+    }
     /* ---------------------------------------------------------------- rows */
     const builderOf = (list) => form.blocks.builder(list);
     const configOf = (list, block) => builderOf(list)?.get.blocks.find((candidate) => candidate.name === block.type)?.get;
@@ -103,37 +140,36 @@ export function setBlocksFocusContext(form) {
             };
         });
     }
-    /** Every row, folded ones included, in layers order. */
-    function allRows() {
+    /** The rows the stage starts from: the open list's, or the one block the path ends on. */
+    function rootRows() {
         if (!path)
             return [];
-        const out = [];
-        const walk = (list, depth) => {
-            for (const row of rowsOf(list, depth)) {
-                out.push(row);
-                for (const child of row.children)
-                    walk(child.list, depth + 1);
-            }
-        };
-        walk(path, 0);
+        if (!narrowed)
+            return rowsOf(path);
+        return rowsOf(narrowed.list).filter((row) => row.index === narrowed.index);
+    }
+    /** The rows from the root down, each followed by the rows of its lists. */
+    function walk(rows, skipFolded, out = []) {
+        for (const row of rows) {
+            out.push(row);
+            if (skipFolded && collapsed.has(row.block.id))
+                continue;
+            for (const child of row.children)
+                walk(rowsOf(child.list, row.depth + 1), skipFolded, out);
+        }
         return out;
     }
+    /** Every row, folded ones included, in layers order. */
+    const allRows = () => walk(rootRows(), false);
     /** The rows on screen: what the arrow keys walk. */
-    function visibleRows() {
+    const visibleRows = () => walk(rootRows(), true);
+    /** Where a block goes with nothing selected: the open list, or the narrowed block's first list. */
+    function homeList() {
         if (!path)
-            return [];
-        const out = [];
-        const walk = (list, depth) => {
-            for (const row of rowsOf(list, depth)) {
-                out.push(row);
-                if (collapsed.has(row.block.id))
-                    continue;
-                for (const child of row.children)
-                    walk(child.list, depth + 1);
-            }
-        };
-        walk(path, 0);
-        return out;
+            return null;
+        if (!narrowed)
+            return path;
+        return rootRows()[0]?.children[0]?.list ?? null;
     }
     /**
      * The root node of the layers: the blocks field's label, or the block the open list hangs off,
@@ -142,6 +178,8 @@ export function setBlocksFocusContext(form) {
     function rootLabel() {
         if (!path)
             return '';
+        if (narrowed)
+            return rootRows()[0]?.title ?? '';
         const builder = builderOf(path);
         const fieldLabel = builder?.get.label || capitalize(builder?.name || '');
         const crumbs = breadcrumb();
@@ -185,7 +223,7 @@ export function setBlocksFocusContext(form) {
     }
     /** The lists a block of `type` may go to, the one it is in and its own subtree left out. */
     function moveTargets() {
-        const current = currentAt();
+        const current = movableAt();
         if (!path || !current)
             return [];
         const currentPath = blockPath(current);
@@ -194,7 +232,7 @@ export function setBlocksFocusContext(form) {
             return [];
         const rootBuilder = builderOf(path);
         const targets = [];
-        if (form.blocks.accepts(path, type) && current.list !== path) {
+        if (!narrowed && form.blocks.accepts(path, type) && current.list !== path) {
             targets.push({
                 list: path,
                 label: rootBuilder?.get.label || capitalize(rootBuilder?.name || '')
@@ -242,14 +280,24 @@ export function setBlocksFocusContext(form) {
         selection = [];
     };
     /* ---------------------------------------------------------- operations */
-    /** Where the palette inserts: after the current block, else at the end of the open list. */
-    function insertionPoint() {
+    /** The narrowed block itself: it stays where it is, and what is added goes inside it. */
+    const isNarrowedBlock = (rowPath) => !!narrowed && rowPath === path;
+    /** The block the operations act on: the selected one, unless it is the narrowed block. */
+    function movableAt() {
         const current = currentAt();
+        return current && !isNarrowedBlock(blockPath(current)) ? current : null;
+    }
+    /** The list the next insert goes to: the selected block's, else the home list. */
+    const insertList = () => movableAt()?.list ?? homeList();
+    /** Where the palette inserts: after the selected block, else at the end of the home list. */
+    function insertionPoint() {
+        const current = movableAt();
         if (current)
             return { list: current.list, index: current.index + 1 };
-        if (!path)
+        const list = homeList();
+        if (!list)
             return null;
-        return { list: path, index: form.blocks.list(path).length };
+        return { list, index: form.blocks.list(list).length };
     }
     function insertType(type, at = insertionPoint()) {
         if (locked || !at)
@@ -263,7 +311,7 @@ export function setBlocksFocusContext(form) {
         return id;
     }
     function duplicateSelection() {
-        const current = currentAt();
+        const current = movableAt();
         if (locked || !current)
             return;
         form.blocks.duplicate(blockPath(current));
@@ -274,7 +322,11 @@ export function setBlocksFocusContext(form) {
         if (locked || !selection.length)
             return;
         const order = visibleRows().map((row) => row.path);
-        const targets = [...selection].sort((a, b) => order.indexOf(b) - order.indexOf(a));
+        const targets = selection
+            .filter((rowPath) => !isNarrowedBlock(rowPath))
+            .sort((a, b) => order.indexOf(b) - order.indexOf(a));
+        if (!targets.length)
+            return;
         for (const target of targets)
             form.blocks.remove(target);
         const first = parseBlockPath(targets[targets.length - 1]);
@@ -286,7 +338,7 @@ export function setBlocksFocusContext(form) {
         select(blockPath({ list: first.list, index: Math.min(first.index, remaining.length - 1) }));
     }
     function moveSelection(delta) {
-        const current = currentAt();
+        const current = movableAt();
         if (locked || !current)
             return;
         const index = current.index + delta;
@@ -296,7 +348,7 @@ export function setBlocksFocusContext(form) {
         select(blockPath({ list: current.list, index }));
     }
     function moveSelectionInto(list) {
-        const current = currentAt();
+        const current = movableAt();
         if (locked || !current)
             return;
         const index = form.blocks.list(list).length;
@@ -384,9 +436,9 @@ export function setBlocksFocusContext(form) {
             if (!locked)
                 picking = true;
         },
-        /** The open list's block set has at least one render: the stage is the stack of renders. */
-        get hasRenders() {
-            return !!path && !!builderOf(path)?.get.blocks.some((block) => block.get.render);
+        /** The block the stage is narrowed to, when the path ends on one. */
+        get narrowedRow() {
+            return narrowed ? (rootRows()[0] ?? null) : null;
         },
         /** Nothing selected: the root node, and the whole list on the stage. */
         get rootSelected() {
@@ -396,10 +448,15 @@ export function setBlocksFocusContext(form) {
         selectRoot,
         breadcrumb,
         isSelected: (rowPath) => selection.includes(rowPath),
+        isNarrowedBlock,
+        insertList,
         isCollapsed,
         open,
         close,
+        up,
         rowsOf,
+        rootRows,
+        homeList,
         allRows,
         visibleRows,
         moveTargets,

package/dist/fields/blocks/component/picker/BlockTile.svelte

@@ -27,7 +27,7 @@
   <span class="rz-block-tile__description">{block.description}</span>
 {/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. */
 
@@ -52,7 +52,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);
     color: var(--rz-fg-muted);
     font-size: var(--rz-text-sm);
@@ -68,9 +68,7 @@
   }
 
   :global(.rz-block-tile[data-selected]) {
-    box-shadow:
-      0 0 0 1px var(--rz-accent-border),
-      var(--rz-shadow-raised);
+    box-shadow: 0 0 0 1px var(--rz-accent-border);
   }
 
   :global(.rz-block-tile:focus-visible) {

package/dist/fields/combobox/component/ComboBox.svelte

@@ -90,7 +90,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. */
 

package/dist/fields/combobox/component/combobox.css

@@ -14,7 +14,7 @@
   background-color: var(--rz-bg-float);
   box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-float);
+    var(--rz-shadow-float, 0 0 transparent);
   padding: var(--rz-size-1);
   .rz-command-input {
     padding-top: 0;

package/dist/fields/date/component/Date.svelte

@@ -78,7 +78,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. */
 

package/dist/fields/group/component/Group.svelte

@@ -87,7 +87,7 @@
   {/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. */
 
@@ -106,15 +106,15 @@
     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);
   }
 
-  /* Inside a group, a block, a tree item or a stage card: a hairline, no second fill. */
+  /* Inside a group, a block, a tree item or the inspector: a hairline, no second fill. */
   :global(.rz-group-field__content) .rz-group-field__wrapper,
   :global(.rz-block__fields) .rz-group-field__wrapper,
   :global(.rz-tree-item__fields) .rz-group-field__wrapper,
-  :global(.rz-stage__fields) .rz-group-field__wrapper {
+  :global(.rz-inspector__fields) .rz-group-field__wrapper {
     background-color: transparent;
     box-shadow: 0 0 0 1px var(--rz-border);
   }

package/dist/fields/link/component/Link.svelte

@@ -181,7 +181,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. */
 

package/dist/fields/link/component/RessourceInput.svelte

@@ -127,7 +127,7 @@
   </Command.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. */
 
@@ -158,7 +158,7 @@
         background-color: var(--rz-bg-float);
         box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-float);
+    var(--rz-shadow-float, 0 0 transparent);
         border-radius: var(--rz-radius-md);
         position: absolute;
         left: 0;

package/dist/fields/link/index.d.ts

@@ -56,7 +56,7 @@ export declare class LinkFieldBuilder extends FormFieldBuilder<LinkField> {
         root?: boolean | undefined;
         index?: boolean | undefined;
         layout: "compact" | "default";
-        types: "tel"[] | "email"[] | "url"[] | "anchor"[];
+        types: "url"[] | "email"[] | "tel"[] | "anchor"[];
     } & {
         component: import("svelte").Component<any>;
         cell?: import("svelte").Component<{

package/dist/fields/number/component/Number.svelte

@@ -45,7 +45,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. */
 

package/dist/fields/relation/component/Cell.svelte

@@ -42,7 +42,7 @@
         mimeType={ressource.data.doc.mimeType}
         url="{env.PUBLIC_RIME_URL}{ressource.data.doc._thumbnail}"
       />
-      {ressource.data.doc.title}
+      <span class="rz-relation-cell__title">{ressource.data.doc.title}</span>
     {:else}
       <span class="rz-relation-cell__title">{ressource.data.doc.title}</span>
     {/if}
@@ -51,6 +51,8 @@
 
 <style>
   .rz-relation-cell {
+    --rz-upload-preview-cell-size: var(--rz-size-7);
+    --rz-upload-preview-cell-fit: cover;
     display: flex;
     gap: var(--rz-size-2);
     align-items: center;

package/dist/fields/relation/component/RelationInline.svelte

@@ -9,9 +9,9 @@
   import { getConfigContext } from '../../../panel/context/config.svelte.js';
   import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
   import { getLocaleContext } from '../../../panel/context/locale.svelte.js';
-  import { populate } from '../../../panel/util/populate.js';
+  import { populate } from '../populate.js';
   import { uploadFiles, type UploadProgress } from '../../../panel/util/upload-file.js';
-  import { Image as ImageIcon } from '@lucide/svelte';
+  import { Image as ImageIcon, Trash2 } from '@lucide/svelte';
   import type { Snippet } from 'svelte';
   import { SvelteMap } from 'svelte/reactivity';
   import type { Relation, RelationFieldBuilder } from '../index.js';
@@ -122,17 +122,21 @@
     {#if !field.editable}
       <!-- Read-only: drawn, never picked. -->
     {:else}
+      <!-- One bar, bottom right: replace or edit the selection, then remove. -->
       <div class="rz-relation-inline__controls">
-        {#if many}
-          <button type="button" onclick={(event) => control(event, open)}>
-            {t__('fields.edit_selection')}
-          </button>
-        {:else}
-          <button type="button" onclick={(event) => control(event, open)}>
-            {t__('fields.replace')}
-          </button>
-          <button type="button" onclick={(event) => control(event, () => onChange([], []))}>
-            {t__('fields.remove')}
+        <button type="button" onclick={(event) => control(event, open)}>
+          {many ? t__('fields.edit_selection') : t__('fields.replace')}
+        </button>
+        {#if !many}
+          <span class="rz-relation-inline__separator" aria-hidden="true"></span>
+          <button
+            type="button"
+            class="rz-relation-inline__icon"
+            title={t__('fields.remove')}
+            aria-label={t__('fields.remove')}
+            onclick={(event) => control(event, () => onChange([], []))}
+          >
+            <Trash2 size={14} />
           </button>
         {/if}
       </div>
@@ -195,7 +199,7 @@
   />
 {/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. */
 
@@ -214,28 +218,55 @@
     position: relative;
   }
 
-  /* Over the drawn docs, top right: on a selected block, or under the pointer. */
+  /*
+   * Over the drawn docs, bottom right, clear of the block's own bar on top: on a selected block,
+   * or under the pointer.
+   */
   .rz-relation-inline__controls {
+    background-color: var(--rz-bg-float);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float, 0 0 transparent);
     position: absolute;
-    top: var(--rz-size-2);
     right: var(--rz-size-2);
+    bottom: var(--rz-size-2);
     z-index: 2;
     display: none;
-    gap: var(--rz-size-1);
+    align-items: center;
+    gap: var(--rz-size-0-5);
+    padding: var(--rz-size-0-5);
+    border-radius: var(--rz-radius-lg);
 
     button {
       height: var(--rz-size-7);
-      padding-inline: var(--rz-size-3);
+      padding-inline: var(--rz-size-2-5);
       border-radius: var(--rz-radius-md);
-      background-color: var(--rz-bg-inverse);
-      color: var(--rz-fg-inverse);
+      color: var(--rz-fg-muted);
       font-size: var(--rz-text-xs);
       &:hover {
-        filter: brightness(1.12);
+        background-image: linear-gradient(var(--rz-bg-hover) 0 0);
+        color: var(--rz-fg);
+      }
+      &:focus-visible {
+        outline: 2px solid var(--rz-accent-border);
+        outline-offset: 2px;
       }
     }
   }
 
+  .rz-relation-inline__icon {
+    display: grid;
+    place-items: center;
+    width: var(--rz-size-7);
+    padding: 0;
+  }
+
+  .rz-relation-inline__separator {
+    width: 1px;
+    height: var(--rz-size-4);
+    background-color: var(--rz-border);
+  }
+
   .rz-relation-inline:hover .rz-relation-inline__controls,
   :global(.rz-renders__item[data-selected]) .rz-relation-inline__controls {
     display: flex;

package/dist/fields/relation/component/default/Default.svelte

@@ -171,7 +171,7 @@
   {/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. */
 
@@ -199,7 +199,7 @@
         background-color: var(--rz-bg-float);
         box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-float);
+    var(--rz-shadow-float, 0 0 transparent);
         position: absolute;
         left: 0;
         right: 0;
@@ -272,7 +272,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);
     display: inline-flex;
     align-items: center;
     gap: var(--rz-size-0-5);

package/dist/fields/relation/component/upload/Browse.svelte

@@ -472,7 +472,7 @@
   onCancel={() => onCreating?.(false)}
 />
 
-<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. */
 
@@ -576,7 +576,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);
     display: flex;
     align-items: center;
     gap: var(--rz-size-2-5);

package/dist/fields/relation/component/upload/Upload.svelte

@@ -180,7 +180,7 @@
   onCreating={(creating) => (creating ? onRelationCreation() : onRelationCreationCanceled())}
 />
 
-<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. */
 
@@ -293,7 +293,7 @@
     background-color: var(--rz-bg-float);
     box-shadow:
     0 0 0 1px var(--rz-border),
-    var(--rz-shadow-float);
+    var(--rz-shadow-float, 0 0 transparent);
     position: absolute;
     z-index: 1;
     top: var(--rz-size-1);