rimecms 0.33.0 → 1.0.1

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

@@ -7,21 +7,21 @@ import { getFieldAtPath } from '../../core/fields/util.js';
 import { buildConfigMap } from '../../core/pipeline/config-map/index.js';
 import { AUTO_SAVE_DELAY_MS, VERSIONS_STATUS } from '../../core/prototype/shared/versions/constant.js';
 import { apiUrl, panelUrl } from '../../core/routes/util.js';
-import { isJSONContent, richTextJSONToText } from '../../fields/rich-text/index.js';
+import { isJSONContent, richTextJSONToText } from '../../fields/rich-text/json.js';
 import { isObjectLiteral, omit } from '../../util/object.js';
-import { normalizeFieldPath } from '../../util/path.js';
+import { normalizeFieldPath } from '../../util/string.js';
 import { randomId } from '../../util/random.js';
 import cloneDeep from 'clone-deep';
 import { diff } from 'deep-object-diff';
 import { flatten } from 'flat';
 import { getContext, setContext } from 'svelte';
-import { SvelteURLSearchParams } from 'svelte/reactivity';
 import { toast } from 'svelte-sonner';
+import { SvelteURLSearchParams } from 'svelte/reactivity';
 import { t__ } from '../../core/i18n/index.js';
-import { moveItem } from '../../util/array.js';
 import { getValueAtPath, setValueAtPath } from '../../util/object.js';
 import { snapshot } from '../../util/state.js';
 import { getAPIProxyContext } from './api-proxy.svelte.js';
+import { duplicateBlock as duplicateBlockIn, fromClipboard, insertBlock, moveBlock as moveBlockIn, parseBlockPath, readList, rebuildPaths, removeBlock, toClipboard, withBlockTypes, withFreshIds } from './blocks-ops.js';
 import { setErrorsContext } from './errors.svelte.js';
 import { getLocaleContext } from './locale.svelte.js';
 import { getTitleContext } from './title.js';
@@ -100,29 +100,6 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
             return doc && initialTitle ? initialTitle : '[untitled]';
         }
     }
-    const rebuildPaths = (items, basePath, parentPath = basePath) => {
-        return items.map((item, index) => {
-            // Clone the item
-            const newItem = cloneDeep(item);
-            // If item has a path property, update it with parent path
-            if ('path' in newItem) {
-                newItem.path = parentPath;
-            }
-            // If item is part of an array, update its position
-            newItem.position = index;
-            // Process all properties of the item
-            Object.keys(newItem).forEach((key) => {
-                // If property is an array of object, process it recursively
-                if (Array.isArray(newItem[key]) &&
-                    newItem[key].length &&
-                    isObjectLiteral(newItem[key][0])) {
-                    const newParentPath = `${parentPath}.${index}.${key}`;
-                    newItem[key] = rebuildPaths(newItem[key], basePath, newParentPath);
-                }
-            });
-            return newItem;
-        });
-    };
     function setValue(path, value) {
         doc = setValueAtPath(path, doc, value);
         if (onDataChange)
@@ -162,16 +139,25 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
             /** update stamp to rerender */
             stamp = new Date().getTime().toString();
         };
-        const addItem = (emptyFields) => {
-            let items = [...getItems()];
-            const itemWithPath = {
+        /** A new item at the end of a list: the tree's own, or one inside an item, `links.0._children`. */
+        const addItem = (emptyFields, atPath = path) => {
+            let items = cloneDeep(snapshot(getItems()));
+            let target = items;
+            if (atPath !== path) {
+                const parent = getValueAtPath(atPath.replace(`${path}.`, '').replace(/\._children$/, ''), items);
+                if (!parent)
+                    return;
+                parent._children ??= [];
+                target = parent._children;
+            }
+            target.push({
                 ...emptyFields,
                 id: generateTempId(),
-                path: path,
-                position: items.length,
+                path: atPath,
+                position: target.length,
                 _children: []
-            };
-            items = items.toSpliced(items.length, 0, itemWithPath);
+            });
+            items = rebuildPaths(items, path);
             assignItemsToDoc(items);
         };
         const deleteItem = (atPath, index) => {
@@ -233,78 +219,94 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
             }
         };
     }
+    /**
+     * The block operations, document-wide. Paths are normalized, without `:type`; a list path names
+     * the array, `sections` or `sections.0.items`. Every view of the blocks calls these.
+     */
+    const blocks = {
+        list(list) {
+            return readList(doc, list);
+        },
+        /** The `BlocksBuilder` a list path names, read through the document for the block types. */
+        builder(list) {
+            const field = getFieldAtPath(withBlockTypes(list, doc), documentConfig.fields);
+            return field && field.type === 'blocks' ? field : undefined;
+        },
+        /** Whether the list's block set has this type. */
+        accepts(list, type) {
+            return !!blocks.builder(list)?.get.blocks.some((block) => block.name === type);
+        },
+        insert(at, block) {
+            const change = insertBlock(doc, at, block);
+            apply(change);
+            return change.id;
+        },
+        remove(path) {
+            const at = parseBlockPath(path);
+            errors.deleteAllThatStartWith(`${at.list}.${at.index}.`);
+            apply(removeBlock(doc, path));
+        },
+        duplicate(path) {
+            const change = duplicateBlockIn(doc, path);
+            apply(change);
+            return change.id;
+        },
+        move(from, to) {
+            apply(moveBlockIn(doc, from, to));
+        },
+        /** Copies the block to the clipboard, and keeps it here for a browser that refuses to read back. */
+        async copy(path) {
+            const at = parseBlockPath(path);
+            const block = readList(doc, at.list)[at.index];
+            if (!block)
+                return;
+            const data = toClipboard(block);
+            clipboard = data;
+            try {
+                await navigator.clipboard.writeText(JSON.stringify(data));
+            }
+            catch {
+                // The in-memory copy above is what paste reads then.
+            }
+        },
+        /** Pastes the copied block at `at`. `null` when there is none, or the list refuses its type. */
+        async paste(at) {
+            let data = clipboard;
+            try {
+                data = fromClipboard(await navigator.clipboard.readText()) ?? data;
+            }
+            catch {
+                // Reading the clipboard needs a permission some browsers never give.
+            }
+            if (!data || !blocks.accepts(at.list, data.type))
+                return null;
+            const { id: _id, path: _path, position: _position, ...block } = withFreshIds(data.block);
+            return blocks.insert(at, block);
+        }
+    };
+    let clipboard = null;
+    function apply(change) {
+        if (!change.lists.length)
+            return;
+        doc = change.doc;
+        if (onDataChange) {
+            for (const list of change.lists) {
+                onDataChange({ path: list, value: snapshot(getValueAtPath(list, doc)) });
+            }
+        }
+    }
+    /** One list's view of the operations above, for the inline cards. */
     function useBlocks(path) {
-        const generateTempId = () => 'temp-' + new Date().getTime().toString();
-        const getBlocks = () => {
-            return cloneDeep(getValueAtPath(path, doc)) || [];
-        };
-        const assignBlocksToDoc = (blocks) => {
-            blocks = rebuildPaths(blocks, path);
-            doc = setValueAtPath(path, doc, blocks);
-            if (onDataChange)
-                onDataChange({ path, value: snapshot(blocks) });
-        };
+        const list = normalizeFieldPath(path);
         const addBlock = (block) => {
-            const blockWithPath = {
-                ...block,
-                id: generateTempId(),
-                type: block.type,
-                path: path,
-                position: block.position
-            };
-            let blocks = [...getBlocks()];
-            blocks = blocks.toSpliced(block.position, 0, blockWithPath);
-            assignBlocksToDoc(blocks);
-        };
-        const deleteBlock = (index) => {
-            const blocks = [...getBlocks()]
-                .filter((_, i) => i !== index)
-                .map((block, index) => ({ ...block, position: index }));
-            errors.deleteAllThatStartWith(`${path}.${index}.`);
-            assignBlocksToDoc(blocks);
-        };
-        const moveBlock = (from, to) => {
-            let blocks = moveItem(getBlocks(), from, to);
-            blocks = blocks.map((block, index) => ({
-                ...block,
-                position: index
-            }));
-            assignBlocksToDoc(blocks);
+            const { position, ...rest } = block;
+            const index = position ?? blocks.list(list).length;
+            blocks.insert({ list, index }, rest);
         };
+        const deleteBlock = (index) => blocks.remove(`${list}.${index}`);
+        const moveBlock = (from, to) => blocks.move(`${list}.${from}`, { list, index: to });
         const duplicateBlock = (index) => {
-            // return;
-            let blocks = [...getBlocks()];
-            const cloneBlock = (block) => {
-                // First deep clone the block so duplicate origin
-                // is not impacted.
-                const clone = cloneDeep(block);
-                // Function to reset all nested id properties
-                // so nested elements are threated as created elements
-                const resetIds = (obj) => {
-                    if ('id' in obj) {
-                        obj = { ...obj, id: generateTempId() };
-                    }
-                    for (const key of Object.keys(obj)) {
-                        const value = obj[key];
-                        if (Array.isArray(value) && value.length && isObjectLiteral(value[0])) {
-                            obj = {
-                                ...obj,
-                                [key]: value.map((child) => resetIds(child))
-                            };
-                        }
-                    }
-                    return obj;
-                };
-                // set temp-ids for nested elements
-                return resetIds(clone);
-            };
-            const blockCopy = cloneBlock(blocks[index]);
-            blocks.splice(index + 1, 0, blockCopy);
-            blocks = blocks.map((block, index) => ({
-                ...block,
-                position: index
-            }));
-            assignBlocksToDoc(blocks);
+            blocks.duplicate(`${list}.${index}`);
         };
         return {
             addBlock,
@@ -312,7 +314,7 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
             moveBlock,
             duplicateBlock,
             get blocks() {
-                return getBlocks();
+                return blocks.list(list);
             }
         };
     }
@@ -804,6 +806,7 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
         getValue,
         useBlocks,
         useTree,
+        blocks,
         nestedLevel,
         buildPanelActionUrl,
         readOnly,

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

@@ -0,0 +1,23 @@
+export declare const NAV_CTX = "rime.nav";
+/**
+ * The panel's navigation: folded or not, and how wide, for whatever lines up with its edge.
+ *
+ * Folded is the user's choice, kept in the browser across visits, open until they fold it. A
+ * narrow window folds it regardless, and gives the choice back when it widens.
+ */
+export declare function setNavContext(): {
+    readonly collapsed: boolean;
+    /** A CSS length: the navigation's width as it stands. */
+    readonly width: "var(--rz-size-12)" | "var(--rz-size-60)";
+    setCollapsed: (value: boolean) => void;
+    toggle: () => void;
+};
+export type NavStore = ReturnType<typeof setNavContext>;
+/** The navigation, or nothing on a page without one: the live edit page. */
+export declare const getNavContext: () => {
+    readonly collapsed: boolean;
+    /** A CSS length: the navigation's width as it stands. */
+    readonly width: "var(--rz-size-12)" | "var(--rz-size-60)";
+    setCollapsed: (value: boolean) => void;
+    toggle: () => void;
+} | undefined;

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

@@ -0,0 +1,56 @@
+import { getContext, setContext } from 'svelte';
+export const NAV_CTX = 'rime.nav';
+const STORAGE_KEY = 'rz-panel-collapsed';
+/** Under this width the navigation is folded whatever was chosen. */
+const NARROW_PX = 1024;
+/**
+ * The panel's navigation: folded or not, and how wide, for whatever lines up with its edge.
+ *
+ * Folded is the user's choice, kept in the browser across visits, open until they fold it. A
+ * narrow window folds it regardless, and gives the choice back when it widens.
+ */
+export function setNavContext() {
+    let collapsed = $state(true);
+    let chosen = null;
+    function setCollapsed(value) {
+        collapsed = value;
+        chosen = value;
+        try {
+            localStorage.setItem(STORAGE_KEY, String(value));
+        }
+        catch {
+            // A browser without storage keeps the choice for the visit.
+        }
+    }
+    /** The window's width decides first, the choice second, open by default. */
+    function fit() {
+        collapsed = window.innerWidth < NARROW_PX ? true : (chosen ?? false);
+    }
+    $effect(() => {
+        try {
+            const stored = localStorage.getItem(STORAGE_KEY);
+            if (stored !== null)
+                chosen = stored === 'true';
+        }
+        catch {
+            // No storage, no remembered choice.
+        }
+        fit();
+        window.addEventListener('resize', fit);
+        return () => window.removeEventListener('resize', fit);
+    });
+    const store = {
+        get collapsed() {
+            return collapsed;
+        },
+        /** A CSS length: the navigation's width as it stands. */
+        get width() {
+            return collapsed ? 'var(--rz-size-12)' : 'var(--rz-size-60)';
+        },
+        setCollapsed,
+        toggle: () => setCollapsed(!collapsed)
+    };
+    return setContext(NAV_CTX, store);
+}
+/** The navigation, or nothing on a page without one: the live edit page. */
+export const getNavContext = () => getContext(NAV_CTX);

package/dist/panel/index.d.ts

@@ -3,21 +3,23 @@ import type { AutoSaves } from '../core/prototype/shared/versions/types.js';
 import type { GenericDoc } from '../core/prototype/types.js';
 import type { Snippet } from 'svelte';
 import { Field } from './components/fields/index.js';
+import RelationInline from '../fields/relation/component/RelationInline.svelte';
+import RichTextInline from '../fields/rich-text/component/RichTextInline.svelte';
+import RenderFields from './components/fields/RenderFields.svelte';
 import Panel from './components/Root.svelte';
 import Doc from './components/sections/document/Document.svelte';
 import Button from './components/ui/button/button.svelte';
 import Input from './components/ui/input/input.svelte';
 import SpinLoader from './components/ui/spin-loader/SpinLoader.svelte';
 import Area from './pages/area/Area.svelte';
-import ForgotPassword from './pages/auth/forgot-password/ForgotPassword.svelte';
-import ResetPassword from './pages/auth/reset-password/ResetPassword.svelte';
-import SignIn from './pages/auth/sign-in/SignIn.svelte';
 import CollectionDoc from './pages/collection-document/CollectionDocument.svelte';
 import Collection from './pages/collection/Collection.svelte';
 import Dashboard from './pages/dashboard/Dashboard.svelte';
 import Live from './pages/live/Live.svelte';
 import type { Route } from './types.js';
-export { Area, Button, Collection, CollectionDoc, Dashboard, Doc, Field, ForgotPassword, Input, Live, Panel, ResetPassword, SignIn, SpinLoader };
+import { populate } from '../fields/relation/populate.js';
+import { useCommands } from './context/commands.svelte.js';
+export { Area, Button, Collection, CollectionDoc, Dashboard, Doc, Field, Input, Live, Panel, RelationInline, RenderFields, RichTextInline, SpinLoader, populate, useCommands };
 export declare const CONTEXT: {
     COLLECTION: symbol;
     LIVE: symbol;
@@ -27,6 +29,7 @@ export declare const CONTEXT: {
     TITLE: string;
 };
 export type { DocumentFormContext } from './context/documentForm.svelte.js';
+export type { Command } from './context/commands.svelte.js';
 export type CollectionProps = {
     data: {
         docs: GenericDoc[];

package/dist/panel/index.js

@@ -1,4 +1,7 @@
 import { Field } from './components/fields/index.js';
+import RelationInline from '../fields/relation/component/RelationInline.svelte';
+import RichTextInline from '../fields/rich-text/component/RichTextInline.svelte';
+import RenderFields from './components/fields/RenderFields.svelte';
 import Panel from './components/Root.svelte';
 import Doc from './components/sections/document/Document.svelte';
 import Button from './components/ui/button/button.svelte';
@@ -6,21 +9,24 @@ import Input from './components/ui/input/input.svelte';
 import SpinLoader from './components/ui/spin-loader/SpinLoader.svelte';
 import { API_PROXY } from './context/api-proxy.svelte.js';
 import { COLLECTION_CTX } from './context/collection.svelte.js';
-import { LIVE_KEY } from './context/live.svelte.js';
+import { LIVE_KEY } from '../live/context.svelte.js';
 import { LOCALE_CTX } from './context/locale.svelte.js';
 import { USER_CTX } from './context/user.svelte.js';
 import { TITLE_CTX } from './context/title.js';
 import Area from './pages/area/Area.svelte';
-import ForgotPassword from './pages/auth/forgot-password/ForgotPassword.svelte';
-import ResetPassword from './pages/auth/reset-password/ResetPassword.svelte';
-import SignIn from './pages/auth/sign-in/SignIn.svelte';
 import CollectionDoc from './pages/collection-document/CollectionDocument.svelte';
 import Collection from './pages/collection/Collection.svelte';
 import Dashboard from './pages/dashboard/Dashboard.svelte';
 import Live from './pages/live/Live.svelte';
+import { populate } from '../fields/relation/populate.js';
+import { useCommands } from './context/commands.svelte.js';
 export { 
 // Components
-Area, Button, Collection, CollectionDoc, Dashboard, Doc, Field, ForgotPassword, Input, Live, Panel, ResetPassword, SignIn, SpinLoader };
+Area, Button, Collection, CollectionDoc, Dashboard, Doc, Field, Input, Live, Panel, RelationInline, RenderFields, RichTextInline, SpinLoader, 
+// A block render's relations, resolved as the API answers them
+populate, 
+// The commands a component offers while mounted: palette lines, keys
+useCommands };
 // Context keys, for a plugin/field that needs to read a context rime's own panel sets
 export const CONTEXT = {
     COLLECTION: COLLECTION_CTX,

package/dist/panel/pages/auth/forgot-password/ForgotPassword.svelte

@@ -52,7 +52,22 @@
   {/if}
 </AuthForm>
 
-<style>p {
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* 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. */
+p {
     font-size: var(--rz-text-lg);
     font-variation-settings: 'wght' 600;
     font-weight: 600;