rimecms 0.33.0 → 1.0.0

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

@@ -0,0 +1,140 @@
+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`. */
+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. */
+export type Crumb = {
+    label: string;
+    list: string;
+    block?: string;
+};
+/** One row of the layers: a block, where it sits, and the lists it holds. */
+export type LayerRow = {
+    /** The block's path, `sections.0.items.2`. */
+    path: string;
+    list: string;
+    index: number;
+    depth: number;
+    block: GenericBlock;
+    config: BlocksFieldBlock | undefined;
+    title: string;
+    /** One entry per `blocks` field of the block. */
+    children: {
+        list: string;
+        builder: BlocksBuilder;
+        label: string;
+    }[];
+};
+/**
+ * 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.
+ *
+ * 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.
+ */
+export declare function setBlocksFocusContext(form: DocumentFormContext): {
+    readonly path: string | null;
+    readonly selection: string[];
+    readonly current: BlockAt | null;
+    readonly currentRow: LayerRow | null;
+    readonly locked: boolean;
+    tab: SidebarTab;
+    readonly inspected: number;
+    /** Turns the panel to the selected block's fields, and opens it where it is a sheet. */
+    inspect(): void;
+    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;
+    /** 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;
+    isCollapsed: (rowPath: string) => boolean;
+    open: (list: string, selected?: string) => void;
+    close: () => void;
+    rowsOf: (list: string, depth?: number) => LayerRow[];
+    allRows: () => LayerRow[];
+    visibleRows: () => LayerRow[];
+    moveTargets: () => {
+        list: string;
+        label: string;
+    }[];
+    select: (rowPath: string, options?: {
+        extend?: boolean;
+    }) => void;
+    selectRelative: (delta: number, extend?: boolean) => void;
+    insertionPoint: () => BlockAt | null;
+    insertType: (type: string, at?: BlockAt | null) => string | null;
+    duplicateSelection: () => void;
+    removeSelection: () => void;
+    moveSelection: (delta: number) => void;
+    moveSelectionInto: (list: string) => void;
+    copySelection: () => Promise<void>;
+    pasteAfterSelection: () => Promise<string | null>;
+    setCollapsed: (rowPath: string, value: boolean) => void;
+    toggleCollapsed: (rowPath: string) => void;
+    collapseAll: () => void;
+    expandAll: () => void;
+};
+export type BlocksFocus = ReturnType<typeof setBlocksFocusContext>;
+/** The focus of the document on screen, or nothing in a form that has none: a nested create. */
+export declare const getBlocksFocusContext: () => {
+    readonly path: string | null;
+    readonly selection: string[];
+    readonly current: BlockAt | null;
+    readonly currentRow: LayerRow | null;
+    readonly locked: boolean;
+    tab: SidebarTab;
+    readonly inspected: number;
+    /** Turns the panel to the selected block's fields, and opens it where it is a sheet. */
+    inspect(): void;
+    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;
+    /** 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;
+    isCollapsed: (rowPath: string) => boolean;
+    open: (list: string, selected?: string) => void;
+    close: () => void;
+    rowsOf: (list: string, depth?: number) => LayerRow[];
+    allRows: () => LayerRow[];
+    visibleRows: () => LayerRow[];
+    moveTargets: () => {
+        list: string;
+        label: string;
+    }[];
+    select: (rowPath: string, options?: {
+        extend?: boolean;
+    }) => void;
+    selectRelative: (delta: number, extend?: boolean) => void;
+    insertionPoint: () => BlockAt | null;
+    insertType: (type: string, at?: BlockAt | null) => string | null;
+    duplicateSelection: () => void;
+    removeSelection: () => void;
+    moveSelection: (delta: number) => void;
+    moveSelectionInto: (list: string) => void;
+    copySelection: () => Promise<void>;
+    pasteAfterSelection: () => Promise<string | null>;
+    setCollapsed: (rowPath: string, value: boolean) => void;
+    toggleCollapsed: (rowPath: string) => void;
+    collapseAll: () => void;
+    expandAll: () => void;
+} | undefined;

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

@@ -0,0 +1,424 @@
+import { pushState, replaceState } from '$app/navigation';
+import { page } from '$app/state';
+import { emptyValuesFromFieldConfig } from '../../../../core/fields/util.js';
+import { blockPath, parseBlockPath, shiftListPath } from '../../../../panel/context/blocks-ops.js';
+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`. */
+export const FOCUS_PARAM = 'focus';
+/**
+ * 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.
+ *
+ * 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.
+ */
+export function setBlocksFocusContext(form) {
+    let fromUrl = $state(page.url.searchParams.get(FOCUS_PARAM));
+    const path = $derived((page.state.blocksFocus ?? fromUrl) || null);
+    let selection = $state([]);
+    /** The panel's tab: the tree of blocks, the selected block's fields, the types to add. */
+    let tab = $state('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;
+    $effect(() => {
+        if (path)
+            return;
+        selection = [];
+        collapsed.clear();
+    });
+    const locked = $derived(form.isDisabled || form.readOnly);
+    const urlWith = (list) => {
+        const url = new URL(page.url);
+        if (list)
+            url.searchParams.set(FOCUS_PARAM, list);
+        else
+            url.searchParams.delete(FOCUS_PARAM);
+        return url;
+    };
+    function open(list, selected) {
+        openedHere = true;
+        fromUrl = null;
+        pushState(urlWith(list), { blocksFocus: list });
+        selection = selected ? [selected] : [];
+    }
+    function close() {
+        if (openedHere) {
+            openedHere = false;
+            history.back();
+        }
+        else {
+            fromUrl = null;
+            replaceState(urlWith(null), {});
+        }
+    }
+    /* ---------------------------------------------------------------- rows */
+    const builderOf = (list) => form.blocks.builder(list);
+    const configOf = (list, block) => builderOf(list)?.get.blocks.find((candidate) => candidate.name === block.type)?.get;
+    function titleOf(config, block, index) {
+        if (config?.renderTitle) {
+            try {
+                const title = config.renderTitle({ values: block, position: index });
+                if (title)
+                    return title;
+            }
+            catch (error) {
+                console.error(`Can't render title in block`, error);
+            }
+        }
+        return config?.label || capitalize(block.type);
+    }
+    function rowsOf(list, depth = 0) {
+        return form.blocks.list(list).map((block, index) => {
+            const config = configOf(list, block);
+            const rowPath = `${list}.${index}`;
+            const children = (config?.fields ?? [])
+                .filter((field) => field.type === 'blocks')
+                .map((field) => ({
+                list: `${rowPath}.${field.name}`,
+                builder: field,
+                label: field.get.label || capitalize(field.name)
+            }));
+            return {
+                path: rowPath,
+                list,
+                index,
+                depth,
+                block,
+                config,
+                title: titleOf(config, block, index),
+                children
+            };
+        });
+    }
+    /** Every row, folded ones included, in layers order. */
+    function allRows() {
+        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);
+        return out;
+    }
+    /** The rows on screen: what the arrow keys walk. */
+    function visibleRows() {
+        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;
+    }
+    /**
+     * The root node of the layers: the blocks field's label, or the block the open list hangs off,
+     * with the field's label after it when that block holds several lists.
+     */
+    function rootLabel() {
+        if (!path)
+            return '';
+        const builder = builderOf(path);
+        const fieldLabel = builder?.get.label || capitalize(builder?.name || '');
+        const crumbs = breadcrumb();
+        const parent = crumbs.length > 1 ? crumbs[crumbs.length - 2] : undefined;
+        if (!parent?.block)
+            return fieldLabel;
+        const block = form.blocks.list(parent.list)[parseBlockPath(parent.block).index];
+        const lists = block
+            ? (configOf(parent.list, block)?.fields ?? []).filter((f) => f.type === 'blocks')
+            : [];
+        return lists.length > 1 ? `${parent.label} › ${fieldLabel}` : parent.label;
+    }
+    /**
+     * The way down to the open list, blocks fields and blocks only: `sections.1.items` reads
+     * *Sections › Grid › Items*. A container segment, a tab or a group, adds nothing.
+     */
+    function breadcrumb() {
+        if (!path)
+            return [];
+        const crumbs = [];
+        let list = '';
+        for (const part of path.split('.')) {
+            if (/^\d+$/.test(part)) {
+                const index = parseInt(part);
+                const block = form.blocks.list(list)[index];
+                if (!block)
+                    continue;
+                crumbs.push({
+                    label: titleOf(configOf(list, block), block, index),
+                    list,
+                    block: `${list}.${index}`
+                });
+                continue;
+            }
+            list = list ? `${list}.${part}` : part;
+            const builder = builderOf(list);
+            if (builder)
+                crumbs.push({ label: builder.get.label || capitalize(part), list });
+        }
+        return crumbs;
+    }
+    /** 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();
+        if (!path || !current)
+            return [];
+        const currentPath = blockPath(current);
+        const type = form.blocks.list(current.list)[current.index]?.type;
+        if (!type)
+            return [];
+        const rootBuilder = builderOf(path);
+        const targets = [];
+        if (form.blocks.accepts(path, type) && current.list !== path) {
+            targets.push({
+                list: path,
+                label: rootBuilder?.get.label || capitalize(rootBuilder?.name || '')
+            });
+        }
+        for (const row of allRows()) {
+            if (row.path === currentPath || row.path.startsWith(`${currentPath}.`))
+                continue;
+            for (const child of row.children) {
+                if (child.list === current.list)
+                    continue;
+                if (!form.blocks.accepts(child.list, type))
+                    continue;
+                targets.push({ list: child.list, label: `${row.title} › ${child.label}` });
+            }
+        }
+        return targets;
+    }
+    /* ----------------------------------------------------------- selection */
+    const currentAt = () => (selection[0] ? parseBlockPath(selection[0]) : null);
+    function select(rowPath, options = {}) {
+        if (options.extend && selection.length) {
+            selection = selection.includes(rowPath)
+                ? selection.filter((item) => item !== rowPath)
+                : [rowPath, ...selection];
+        }
+        else {
+            selection = [rowPath];
+        }
+    }
+    /** Up from the first row lands on the root node; down from the root on the first row. */
+    function selectRelative(delta, extend = false) {
+        const rows = visibleRows();
+        if (!rows.length)
+            return;
+        const index = rows.findIndex((row) => row.path === selection[0]);
+        const target = index + delta;
+        if (target < 0)
+            return selectRoot();
+        const next = rows[Math.min(rows.length - 1, target)];
+        if (next)
+            select(next.path, { extend });
+    }
+    const selectRoot = () => {
+        selection = [];
+    };
+    /* ---------------------------------------------------------- operations */
+    /** Where the palette inserts: after the current block, else at the end of the open list. */
+    function insertionPoint() {
+        const current = currentAt();
+        if (current)
+            return { list: current.list, index: current.index + 1 };
+        if (!path)
+            return null;
+        return { list: path, index: form.blocks.list(path).length };
+    }
+    function insertType(type, at = insertionPoint()) {
+        if (locked || !at)
+            return null;
+        const config = builderOf(at.list)?.get.blocks.find((candidate) => candidate.name === type)?.get;
+        if (!config)
+            return null;
+        const empty = { ...emptyValuesFromFieldConfig(config.fields), type };
+        const id = form.blocks.insert(at, empty);
+        select(blockPath(at));
+        return id;
+    }
+    function duplicateSelection() {
+        const current = currentAt();
+        if (locked || !current)
+            return;
+        form.blocks.duplicate(blockPath(current));
+        select(blockPath({ list: current.list, index: current.index + 1 }));
+    }
+    /** Removes the selected blocks, last in layers order first, so earlier paths hold. */
+    function removeSelection() {
+        if (locked || !selection.length)
+            return;
+        const order = visibleRows().map((row) => row.path);
+        const targets = [...selection].sort((a, b) => order.indexOf(b) - order.indexOf(a));
+        for (const target of targets)
+            form.blocks.remove(target);
+        const first = parseBlockPath(targets[targets.length - 1]);
+        const remaining = form.blocks.list(first.list);
+        if (!remaining.length) {
+            selection = [];
+            return;
+        }
+        select(blockPath({ list: first.list, index: Math.min(first.index, remaining.length - 1) }));
+    }
+    function moveSelection(delta) {
+        const current = currentAt();
+        if (locked || !current)
+            return;
+        const index = current.index + delta;
+        if (index < 0 || index >= form.blocks.list(current.list).length)
+            return;
+        form.blocks.move(blockPath(current), { list: current.list, index });
+        select(blockPath({ list: current.list, index }));
+    }
+    function moveSelectionInto(list) {
+        const current = currentAt();
+        if (locked || !current)
+            return;
+        const index = form.blocks.list(list).length;
+        form.blocks.move(blockPath(current), { list, index });
+        const landed = shiftListPath(list, current);
+        select(blockPath({ list: landed, index }));
+    }
+    function copySelection() {
+        const current = currentAt();
+        if (!current)
+            return Promise.resolve();
+        return form.blocks.copy(blockPath(current));
+    }
+    async function pasteAfterSelection() {
+        const at = insertionPoint();
+        if (locked || !at)
+            return null;
+        const id = await form.blocks.paste(at);
+        if (id)
+            select(blockPath(at));
+        return id;
+    }
+    /* ------------------------------------------------------------ folding */
+    /** `sections.0.items.2` -> the id of the block there. */
+    const idAt = (rowPath) => {
+        const at = parseBlockPath(rowPath);
+        return form.blocks.list(at.list)[at.index]?.id;
+    };
+    const isCollapsed = (rowPath) => collapsed.has(idAt(rowPath) ?? '');
+    const setCollapsed = (rowPath, value) => {
+        const id = idAt(rowPath);
+        if (!id)
+            return;
+        if (value)
+            collapsed.add(id);
+        else
+            collapsed.delete(id);
+    };
+    const collapseAll = () => {
+        for (const row of allRows())
+            if (row.children.length)
+                collapsed.add(row.block.id);
+    };
+    const store = {
+        get path() {
+            return path;
+        },
+        get selection() {
+            return selection;
+        },
+        get current() {
+            return currentAt();
+        },
+        get currentRow() {
+            const current = currentAt();
+            return current
+                ? (rowsOf(current.list).find((row) => row.index === current.index) ?? null)
+                : null;
+        },
+        get locked() {
+            return locked;
+        },
+        get tab() {
+            return tab;
+        },
+        set tab(value) {
+            tab = value;
+        },
+        get inspected() {
+            return inspected;
+        },
+        /** Turns the panel to the selected block's fields, and opens it where it is a sheet. */
+        inspect() {
+            tab = 'inspector';
+            inspected++;
+        },
+        get picking() {
+            return picking;
+        },
+        set picking(value) {
+            picking = value;
+        },
+        /** Opens the picker of types to add; the one picked goes after the selection. */
+        pick() {
+            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);
+        },
+        /** Nothing selected: the root node, and the whole list on the stage. */
+        get rootSelected() {
+            return selection.length === 0;
+        },
+        rootLabel,
+        selectRoot,
+        breadcrumb,
+        isSelected: (rowPath) => selection.includes(rowPath),
+        isCollapsed,
+        open,
+        close,
+        rowsOf,
+        allRows,
+        visibleRows,
+        moveTargets,
+        select,
+        selectRelative,
+        insertionPoint,
+        insertType,
+        duplicateSelection,
+        removeSelection,
+        moveSelection,
+        moveSelectionInto,
+        copySelection,
+        pasteAfterSelection,
+        setCollapsed,
+        toggleCollapsed: (rowPath) => setCollapsed(rowPath, !isCollapsed(rowPath)),
+        collapseAll,
+        expandAll: () => collapsed.clear()
+    };
+    return setContext(KEY, store);
+}
+/** The focus of the document on screen, or nothing in a form that has none: a nested create. */
+export const getBlocksFocusContext = () => getContext(KEY);

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

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { t__ } from '../../../../core/i18n/index.js';
+  import * as Command from '../../../../panel/components/ui/command/index.js';
+  import Kbd from '../../../../panel/components/ui/kbd/Kbd.svelte';
+  import { capitalize } from '../../../../util/string.js';
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { BlockBuilder, BlocksFieldBlock } from '../../index.js';
+  import BlockTile from './BlockTile.svelte';
+
+  /** The types to add, as tiles in a dialog: a search above, the arrows walk the grid. */
+  type Props = {
+    open: boolean;
+    types: BlockBuilder[];
+    onpick: (block: BlocksFieldBlock) => void;
+  };
+  let { open = $bindable(false), types, onpick }: Props = $props();
+
+  const COLUMNS = 3;
+
+  function pick(block: BlocksFieldBlock) {
+    open = false;
+    onpick(block);
+  }
+</script>
+
+<Command.Dialog bind:open columns={COLUMNS}>
+  <Command.Input placeholder={t__('fields.search_blocks')}>
+    {#snippet end()}
+      <Kbd keys="escape" />
+    {/snippet}
+  </Command.Input>
+  <Command.List class="rz-block-picker">
+    <Command.Empty>{t__('common.nothing_found')}</Command.Empty>
+    <div class="rz-block-picker__grid" style:--rz-block-picker-columns={COLUMNS}>
+      {#each types as builder (builder.name)}
+        {@const block = builder.block}
+        <CommandPrimitive.Item
+          class="rz-block-tile"
+          value={block.label || capitalize(block.name)}
+          keywords={[block.name, block.description ?? '']}
+          onSelect={() => pick(block)}
+        >
+          <BlockTile {block} />
+        </CommandPrimitive.Item>
+      {/each}
+    </div>
+  </Command.List>
+  <footer class="rz-block-picker__foot">
+    <span><Kbd keys="arrowup" /><Kbd keys="arrowdown" /> {t__('common.palette_move')}</span>
+    <span><Kbd keys="enter" /> {t__('fields.picker_add')}</span>
+    <span><Kbd keys="escape" /> {t__('common.palette_close')}</span>
+  </footer>
+</Command.Dialog>
+
+<style>
+  /* Wider than the command palette, for three tiles a row. */
+  :global(.rz-command-dialog-content:has(.rz-block-picker)) {
+    width: min(46rem, calc(100% - 2 * var(--gutter)));
+  }
+
+  :global(.rz-command-list.rz-block-picker) {
+    max-height: min(60vh, 32rem);
+    padding: var(--rz-size-3);
+  }
+
+  .rz-block-picker__grid {
+    display: grid;
+    grid-template-columns: repeat(var(--rz-block-picker-columns), minmax(0, 1fr));
+    gap: var(--rz-size-2-5);
+  }
+
+  .rz-block-picker__foot {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-4);
+    height: var(--rz-size-9);
+    padding: 0 var(--rz-size-3-5);
+    border-top: 1px solid var(--rz-border);
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+
+    span {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rz-size-1);
+    }
+  }
+</style>

package/dist/fields/blocks/component/picker/BlockPicker.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { BlockBuilder, BlocksFieldBlock } from '../../index.js';
+/** The types to add, as tiles in a dialog: a search above, the arrows walk the grid. */
+type Props = {
+    open: boolean;
+    types: BlockBuilder[];
+    onpick: (block: BlocksFieldBlock) => void;
+};
+declare const BlockPicker: import("svelte").Component<Props, {}, "open">;
+type BlockPicker = ReturnType<typeof BlockPicker>;
+export default BlockPicker;