rimecms 0.32.1 → 1.0.0

package/dist/panel/context/collection.svelte.js

@@ -1,18 +1,18 @@
 import { invalidateAll } from '$app/navigation';
 import { PARAMS } from '../../core/constants.js';
 import { isFormField } from '../../core/fields/util.js';
+import { walkFields } from '../../core/fields/walk.js';
 import { directoriesKebab } from '../../core/prototype/collection/upload/naming.js';
 import { isUploadConfig } from '../../core/prototype/collection/upload/util/config.js';
-import { toNestedStructure } from '../../core/prototype/doc.js';
+import { toNestedStructure } from '../../core/prototype/collection/nested/tree.js';
 import { apiUrl, panelUrl } from '../../core/routes/util.js';
-import { GroupFieldBuilder } from '../../fields/group/index.js';
-import { TabsBuilder } from '../../fields/tabs/index.js';
+import { VERSIONS_STATUS } from '../../core/prototype/shared/versions/constant.js';
+import { fileSizeBytes, mediaKind, MEDIA_KINDS } from '../util/upload-file.js';
 import { trycatch, trycatchFetch } from '../../util/function.js';
 import { getValueAtPath, hasProp } from '../../util/object.js';
-import { getContext, onMount, setContext } from 'svelte';
+import { computeCommandScore } from 'bits-ui';
+import { getContext, onMount, setContext, untrack } from 'svelte';
 import { toast } from 'svelte-sonner';
-//@ts-expect-error command-score has no types
-import commandScore from 'command-score';
 export const DISPLAY_MODE = {
     LIST: 'display_list',
     GRID: 'display_grid',
@@ -20,12 +20,14 @@ export const DISPLAY_MODE = {
 };
 function createCollectionStore(args) {
     const { initial, config, canCreate, upload: incomingUpload } = args;
-    let initialDocs = $state.raw(initial);
-    let docs = $state(initial);
-    let sortingOrder = $state('asc');
+    // The latest edit first, until another order is picked.
+    let sortingOrder = $state('dsc');
     let sortingBy = $state('updatedAt');
-    let selectMode = $state(false);
+    let initialDocs = $state.raw(initial);
+    let docs = $state(sorted([...initial]));
     let selected = $state([]);
+    let statusFilter = $state('all');
+    let kindFilter = $state('all');
     let displayMode = $state(DISPLAY_MODE.LIST);
     let upload = $state({
         directories: incomingUpload?.directories || [],
@@ -33,6 +35,8 @@ function createCollectionStore(args) {
         parentDirectory: incomingUpload?.parentDirectory || null
     });
     let isFiltered = $state(false);
+    /** The search as typed. */
+    let query = '';
     let stamp = $state(Date.now()); // Timestamp to invalidate on changes
     const hasVersions = $derived(!!config.versions);
     const hasDraft = $derived(config.versions && config.versions.draft);
@@ -45,44 +49,63 @@ function createCollectionStore(args) {
         const localSortBy = localStorage.getItem(`collection.${config.slug}.sortBy`);
         sortingBy = localSortBy || 'updatedAt';
         const localSortOrder = localStorage.getItem(`collection.${config.slug}.sortOrder`);
-        sortingOrder = localSortOrder || 'asc';
+        sortingOrder = localSortOrder || 'dsc';
         if (localSortBy) {
             sortBy(sortingBy, false);
         }
     });
-    $effect(() => {
-        if (!selectMode)
-            selected = [];
-    });
     const nested = $derived.by(() => {
         return toNestedStructure(docs);
     });
-    const buildFieldColumns = (fields, parentPath = '') => {
-        let columns = [];
-        for (const field of fields) {
-            if (field instanceof GroupFieldBuilder) {
-                // For group fields, pass the current group name as parent path for nested fields
-                const groupPath = parentPath ? `${parentPath}.${field.name}` : field.name;
-                columns = [...columns, ...buildFieldColumns(field.get.fields, groupPath)];
+    /** An upload collection shows the files of the folder on screen; any other, all of them. */
+    const inFolder = (doc) => !config.upload || doc._path === upload.currentPath;
+    const ofStatus = (doc) => statusFilter === 'all' || doc.status === statusFilter;
+    const ofKind = (doc) => kindFilter === 'all' || mediaKind(doc.mimeType) === kindFilter;
+    /** The documents on screen: the search's, in the folder, of the status and the kind picked. */
+    const shown = $derived(docs.filter((doc) => inFolder(doc) && ofStatus(doc) && ofKind(doc)));
+    /** The kinds of file the collection holds, in a fixed order. */
+    const kinds = $derived.by(() => {
+        const present = new Set(initialDocs.map((doc) => mediaKind(doc.mimeType)));
+        return MEDIA_KINDS.filter((kind) => present.has(kind));
+    });
+    const draftsCount = $derived(hasDraft ? initialDocs.filter((doc) => doc.status === VERSIONS_STATUS.DRAFT).length : 0);
+    /** What the files weigh together, in bytes. */
+    const totalSize = $derived(initialDocs.reduce((sum, doc) => sum + (fileSizeBytes(doc.filesize) ?? 0), 0));
+    /** Where a slug field sits, when the collection has one. */
+    const slugPath = [...walkFields(config.fields, { determinate: true })].find(({ field }) => field.type === 'slug')?.path;
+    /**
+     * The path of a document, after its title: the pathname of its url, else its slug.
+     *
+     * ```ts
+     * pathOf({ url: 'https://site.com/studio' }) // '/studio'
+     * pathOf({ attributes: { slug: 'studio' } }) // 'studio'
+     * ```
+     */
+    function pathOf(doc) {
+        if (!config.upload && typeof doc.url === 'string' && doc.url) {
+            try {
+                return new URL(doc.url, 'http://localhost').pathname;
+            }
+            catch {
+                return doc.url;
             }
+        }
+        const slug = slugPath ? getValueAtPath(slugPath, doc) : null;
+        return typeof slug === 'string' ? slug : '';
+    }
+    /** Every field marked `table()`, at a path a config alone can name. */
+    const buildFieldColumns = (fields) => {
+        const columns = [];
+        for (const { field, path } of walkFields(fields, { determinate: true })) {
             if (isFormField(field) && hasProp('table', field.get)) {
-                // Create current field path
-                const path = parentPath ? `${parentPath}.${field.name}` : field.name;
-                // Create column
-                const column = {
+                columns.push({
                     type: field.type,
+                    name: field.name,
+                    label: field.get.label,
                     path,
                     cell: field.get.table.cell || field.cell,
                     table: field.get.table
-                };
-                columns.push(column);
-            }
-            else if (field instanceof TabsBuilder) {
-                for (const tab of field.get.tabs) {
-                    // For tab fields, create a path with the tab name
-                    const path = parentPath ? `${parentPath}.${tab.name}` : tab.name;
-                    columns = [...columns, ...buildFieldColumns(tab.get.fields, path)];
-                }
+                });
             }
         }
         return columns;
@@ -100,6 +123,19 @@ function createCollectionStore(args) {
         return { ...col, table: tableConfig };
     })
         .sort((a, b) => a.table.position - b.table.position);
+    /** The documents in the order picked, by `sortingBy` then `sortingOrder`. */
+    function sorted(list) {
+        const orderMult = sortingOrder === 'asc' ? 1 : -1;
+        return list.sort((a, b) => {
+            if (a[sortingBy] < b[sortingBy]) {
+                return -1 * orderMult;
+            }
+            if (a[sortingBy] > b[sortingBy]) {
+                return 1 * orderMult;
+            }
+            return 0;
+        });
+    }
     const sortBy = (fieldName, toggle = true) => {
         if (sortingBy === fieldName) {
             if (toggle) {
@@ -110,17 +146,7 @@ function createCollectionStore(args) {
             // Else sort by field asc
             sortingBy = fieldName;
         }
-        // Do sorting logic
-        const orderMult = sortingOrder === 'asc' ? 1 : -1;
-        docs = docs.sort((a, b) => {
-            if (a[fieldName] < b[fieldName]) {
-                return -1 * orderMult;
-            }
-            if (a[fieldName] > b[fieldName]) {
-                return 1 * orderMult;
-            }
-            return 0;
-        });
+        docs = sorted(docs);
         // Save to local storage
         localStorage.setItem(`collection.${config.slug}.sortBy`, fieldName);
         localStorage.setItem(`collection.${config.slug}.sortOrder`, sortingOrder);
@@ -258,18 +284,15 @@ function createCollectionStore(args) {
         }
     }
     function selectAll() {
-        if (config.upload) {
-            selected = docs.filter((doc) => doc._path === upload.currentPath).map((doc) => doc.id);
-        }
-        else {
-            selected = docs.map((doc) => doc.id);
-        }
+        selected = shown.map((doc) => doc.id);
     }
     async function deleteSelection() {
-        deleteDocs(selected);
-        selectMode = false;
+        const ids = selected;
+        selected = [];
+        await deleteDocs(ids);
     }
     function filterBy(inputValue) {
+        query = inputValue;
         if (inputValue !== '') {
             isFiltered = true;
             const scores = [];
@@ -277,7 +300,7 @@ function createCollectionStore(args) {
                 const asTitle = getValueAtPath(config.asTitle, doc);
                 if (!asTitle)
                     continue;
-                const score = commandScore(asTitle, inputValue);
+                const score = computeCommandScore(asTitle, inputValue);
                 if (score > 0) {
                     scores.push({
                         doc,
@@ -299,7 +322,7 @@ function createCollectionStore(args) {
         }
         else {
             isFiltered = false;
-            docs = [...initialDocs];
+            docs = sorted([...initialDocs]);
         }
     }
     return {
@@ -357,22 +380,52 @@ function createCollectionStore(args) {
         set selected(value) {
             selected = value;
         },
+        /** On while a document is checked; turning it off drops the selection. */
         get selectMode() {
-            return selectMode;
+            return selected.length > 0;
         },
         set selectMode(bool) {
-            selectMode = bool;
+            if (!bool)
+                selected = [];
         },
         get isAllSelected() {
-            if (config.upload) {
-                return selected.length === docs.filter((d) => d._path === upload.currentPath).length;
-            }
-            else {
-                return selected.length === docs.length;
-            }
+            return shown.length > 0 && shown.every((doc) => selected.includes(doc.id));
         },
         deleteSelection,
         filterBy,
+        /** The documents on screen, after the search, the folder and the filters. */
+        get shown() {
+            return shown;
+        },
+        /** A filter change drops the selection, so no hidden document stays picked. */
+        get statusFilter() {
+            return statusFilter;
+        },
+        set statusFilter(value) {
+            statusFilter = value;
+            selected = [];
+        },
+        get kindFilter() {
+            return kindFilter;
+        },
+        set kindFilter(value) {
+            kindFilter = value;
+            selected = [];
+        },
+        get kinds() {
+            return kinds;
+        },
+        get draftsCount() {
+            return draftsCount;
+        },
+        get totalSize() {
+            return totalSize;
+        },
+        /** Every document of the collection, whatever the search. */
+        get total() {
+            return initialDocs.length;
+        },
+        pathOf,
         get isUpload() {
             return isUploadConfig(config);
         },
@@ -389,8 +442,10 @@ function createCollectionStore(args) {
         get docs() {
             return docs;
         },
+        /** A reload: the search runs again over the new documents, in the order picked. */
         set docs(value) {
-            docs = value;
+            initialDocs = value;
+            untrack(() => filterBy(query));
             stamp = Date.now();
         },
         get length() {

package/dist/panel/context/commands.svelte.d.ts

@@ -0,0 +1,80 @@
+import type { IconProps } from '@lucide/svelte';
+import { type Component } from 'svelte';
+/** One thing the user can do where they are: a palette line, a key, or both. */
+export type Command = {
+    /** `document.save`, `blocks.duplicate`, `text.bold` */
+    id: string;
+    label: string;
+    /** The palette's heading: `Document`, `Block`, `Add`, `Go to`, `Text` */
+    group?: string;
+    /** On the palette line, before the label. */
+    icon?: Component<IconProps>;
+    /** `mod+s`, `alt+arrowup`, `backspace`, `/`. `mod` is ⌘ on a Mac, Ctrl elsewhere. */
+    keys?: string;
+    /** Fires while a field has the keyboard. Off, the field keeps the key. */
+    inField?: boolean;
+    /** Keys only, not a palette line: the arrows. */
+    hidden?: boolean;
+    /** Offered right now. A command that is not is skipped, keys and palette alike. */
+    when?: () => boolean;
+    /** From a key, the event; from the palette, nothing. */
+    run: (event?: KeyboardEvent) => unknown;
+};
+/**
+ * The commands a mounted component offers, read when a key comes or the palette opens. `depth`
+ * is how many scopes it sits inside; `order` breaks a tie, the latest mounted first.
+ */
+type Scope = {
+    get: () => Command[];
+    depth: number;
+    order: number;
+};
+/**
+ * One dispatcher for every key of the panel, and one palette. Components nest their scopes; a key
+ * goes to the innermost scope that claims it, and the palette lists them all, the innermost
+ * first, so what the page offers comes before what the panel offers.
+ */
+export declare function setCommandsContext(): {
+    register: (scope: Omit<Scope, "order">) => () => void;
+    dispatch: (event: KeyboardEvent) => void;
+    palette: {
+        open: boolean;
+        query: string;
+        readonly group: string | null;
+        /** The commands on offer when the palette opened; the dialog takes the focus, they stay. */
+        readonly commands: Command[];
+        show(options?: {
+            group?: string;
+        }): void;
+        toggle(): void;
+    };
+};
+export type CommandsContext = ReturnType<typeof setCommandsContext>;
+export declare function getCommandsContext(): {
+    register: (scope: Omit<Scope, "order">) => () => void;
+    dispatch: (event: KeyboardEvent) => void;
+    palette: {
+        open: boolean;
+        query: string;
+        readonly group: string | null;
+        /** The commands on offer when the palette opened; the dialog takes the focus, they stay. */
+        readonly commands: Command[];
+        show(options?: {
+            group?: string;
+        }): void;
+        toggle(): void;
+    };
+} | undefined;
+/**
+ * The commands a component offers while it is mounted. Outside the panel, nothing listens.
+ *
+ * Its depth is one more than the scope it sits in, and the components under it sit one deeper:
+ *
+ *   Document 1 > BlocksFocus 2 > RichText 3
+ *
+ * `depth: 0` puts it with the panel's own, below every page: the language, the navigation.
+ */
+export declare function useCommands(get: () => Command[], options?: {
+    depth?: number;
+}): void;
+export {};

package/dist/panel/context/commands.svelte.js

@@ -0,0 +1,108 @@
+import { isTyping, matches, parseKeys } from '../util/keys.js';
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('rime.commands');
+const DEPTH = Symbol('rime.commands.depth');
+/**
+ * One dispatcher for every key of the panel, and one palette. Components nest their scopes; a key
+ * goes to the innermost scope that claims it, and the palette lists them all, the innermost
+ * first, so what the page offers comes before what the panel offers.
+ */
+export function setCommandsContext() {
+    // Read on a key and when the palette opens, never by a derived: a plain array, so registering
+    // from an effect does not re-run that effect.
+    let scopes = [];
+    let open = $state(false);
+    let query = $state('');
+    let group = $state(null);
+    let listed = $state.raw([]);
+    let mounted = 0;
+    function register(scope) {
+        const entry = { ...scope, order: mounted++ };
+        scopes = [...scopes, entry];
+        return () => {
+            scopes = scopes.filter((candidate) => candidate !== entry);
+        };
+    }
+    /** What is offered right now, innermost scope first. */
+    function available() {
+        return scopes
+            .toSorted((a, b) => b.depth - a.depth || b.order - a.order)
+            .flatMap((scope) => scope.get())
+            .filter((command) => !command.when || command.when());
+    }
+    function dispatch(event) {
+        // Taken already: a dialog closing on Escape, an editor's own shortcut.
+        if (event.defaultPrevented)
+            return;
+        const typing = isTyping(event);
+        for (const command of available()) {
+            if (!command.keys || !matches(event, parseKeys(command.keys)))
+                continue;
+            if (typing && !command.inField)
+                continue;
+            event.preventDefault();
+            command.run(event);
+            return;
+        }
+    }
+    const palette = {
+        get open() {
+            return open;
+        },
+        set open(value) {
+            open = value;
+            if (!value)
+                group = null;
+        },
+        get query() {
+            return query;
+        },
+        set query(value) {
+            query = value;
+        },
+        get group() {
+            return group;
+        },
+        /** The commands on offer when the palette opened; the dialog takes the focus, they stay. */
+        get commands() {
+            return listed;
+        },
+        show(options = {}) {
+            listed = available().filter((command) => !command.hidden);
+            group = options.group ?? null;
+            query = '';
+            open = true;
+        },
+        toggle() {
+            if (open)
+                palette.open = false;
+            else
+                palette.show();
+        }
+    };
+    return setContext(KEY, { register, dispatch, palette });
+}
+export function getCommandsContext() {
+    return getContext(KEY);
+}
+/**
+ * The commands a component offers while it is mounted. Outside the panel, nothing listens.
+ *
+ * Its depth is one more than the scope it sits in, and the components under it sit one deeper:
+ *
+ *   Document 1 > BlocksFocus 2 > RichText 3
+ *
+ * `depth: 0` puts it with the panel's own, below every page: the language, the navigation.
+ */
+export function useCommands(get, options = {}) {
+    const commands = getCommandsContext();
+    if (!commands)
+        return;
+    let depth = options.depth;
+    if (depth === undefined) {
+        depth = (getContext(DEPTH) ?? 0) + 1;
+        setContext(DEPTH, depth);
+    }
+    const scope = { get, depth };
+    $effect(() => commands.register(scope));
+}

package/dist/panel/context/documentForm.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { BuiltAreaClient, BuiltCollectionClient } from '../../core/config/types.js';
 import type { FormFieldBuilder } from '../../core/fields/builders/index.js';
 import type { AreaSlug, GenericBlock, GenericDoc, TreeBlock } from '../../core/prototype/types.js';
+import type { BlocksBuilder } from '../../fields/blocks/index.js';
 import type { FormField } from '../../types.js';
 import type { Dic, WithOptional } from '../../util/types.js';
+import { type BlockAt, type NewBlock } from './blocks-ops.js';
 export declare function setDocumentFormContext<T extends WithOptional<GenericDoc, 'id'>>(args: Args<T>): {
     key: string;
     setValue: (path: string, value: any) => void;
@@ -30,13 +32,28 @@ export declare function setDocumentFormContext<T extends WithOptional<GenericDoc
         readonly blocks: GenericBlock[];
     };
     useTree: (path: string) => {
-        addItem: (emptyFields: Dic) => void;
+        addItem: (emptyFields: Dic, atPath?: string) => void;
         moveItem: (fromPath: string, toPath: string) => void;
         deleteItem: (atPath: string, index: number) => void;
         path: string;
         readonly stamp: string;
         readonly items: TreeBlock[];
     };
+    blocks: {
+        list(list: string): GenericBlock[];
+        /** The `BlocksBuilder` a list path names, read through the document for the block types. */
+        builder(list: string): BlocksBuilder | undefined;
+        /** Whether the list's block set has this type. */
+        accepts(list: string, type: string): boolean;
+        insert(at: BlockAt, block: NewBlock): string;
+        remove(path: string): void;
+        duplicate(path: string): string | null;
+        move(from: string, to: BlockAt): void;
+        /** Copies the block to the clipboard, and keeps it here for a browser that refuses to read back. */
+        copy(path: string): Promise<void>;
+        /** Pastes the copied block at `at`. `null` when there is none, or the list refuses its type. */
+        paste(at: BlockAt): Promise<string | null>;
+    };
     nestedLevel: number;
     buildPanelActionUrl: () => string;
     readOnly: boolean;
@@ -100,13 +117,28 @@ export declare function getDocumentFormContext<T extends WithOptional<GenericDoc
         readonly blocks: GenericBlock[];
     };
     useTree: (path: string) => {
-        addItem: (emptyFields: Dic) => void;
+        addItem: (emptyFields: Dic, atPath?: string) => void;
         moveItem: (fromPath: string, toPath: string) => void;
         deleteItem: (atPath: string, index: number) => void;
         path: string;
         readonly stamp: string;
         readonly items: TreeBlock[];
     };
+    blocks: {
+        list(list: string): GenericBlock[];
+        /** The `BlocksBuilder` a list path names, read through the document for the block types. */
+        builder(list: string): BlocksBuilder | undefined;
+        /** Whether the list's block set has this type. */
+        accepts(list: string, type: string): boolean;
+        insert(at: BlockAt, block: NewBlock): string;
+        remove(path: string): void;
+        duplicate(path: string): string | null;
+        move(from: string, to: BlockAt): void;
+        /** Copies the block to the clipboard, and keeps it here for a browser that refuses to read back. */
+        copy(path: string): Promise<void>;
+        /** Pastes the copied block at `at`. `null` when there is none, or the list refuses its type. */
+        paste(at: BlockAt): Promise<string | null>;
+    };
     nestedLevel: number;
     buildPanelActionUrl: () => string;
     readOnly: boolean;