rimecms 0.26.9 → 0.27.0

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

@@ -79,6 +79,7 @@
   {#if !groupOpen}
     <FieldsPreviewTrigger onclick={handleClick}>
       <FieldsPreview
+        preview={config.preview}
         fields={previewFields}
         getField={(field) => form.useField(basePath + field.name)}
       />

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

@@ -1,10 +1,11 @@
 import type { FieldBuilder } from '../../core/fields/builders/field-builder.js';
 import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
-import type { Field, FormField } from '../types.js';
+import type { Field, FieldsPreviewProps, FormField } from '../types.js';
+import type { Component } from 'svelte';
 export declare class GroupFieldBuilder extends FormFieldBuilder<GroupField> {
     _metaUrl: string;
     constructor(name: string);
-    get component(): import("svelte").Component<{
+    get component(): Component<{
         path: string;
         config: GroupField;
         form: import("../../panel").DocumentFormContext<import("../../types").GenericDoc>;
@@ -12,6 +13,7 @@ export declare class GroupFieldBuilder extends FormFieldBuilder<GroupField> {
     label(label: string): this;
     fields(...fields: FieldBuilder<Field>[]): this;
     localized(): this;
+    preview(component: Component<FieldsPreviewProps>): this;
     compile(): {
         fields: ({
             type: string;
@@ -19,16 +21,16 @@ export declare class GroupFieldBuilder extends FormFieldBuilder<GroupField> {
             condition?: ((doc: any, siblings: any) => boolean) | undefined;
             width?: import("../types.js").FieldWidth | undefined;
             className?: string | undefined;
-            component: import("svelte").Component<any>;
-            cell: import("svelte").Component<any> | undefined;
+            component: Component<any>;
+            cell: Component<any> | undefined;
             access: {
                 create: import("../types.js").FieldAccess;
                 read: import("../types.js").FieldAccess;
                 update: import("../types.js").FieldAccess;
             };
         } & {
-            component: import("svelte").Component<any>;
-            cell?: import("svelte").Component<{
+            component: Component<any>;
+            cell?: Component<{
                 value: any;
             }> | null;
         })[];
@@ -37,8 +39,8 @@ export declare class GroupFieldBuilder extends FormFieldBuilder<GroupField> {
         condition?: (doc: any, siblings: any) => boolean;
         width?: import("../types.js").FieldWidth;
         className?: string;
-        component: import("svelte").Component<any>;
-        cell: import("svelte").Component<any> | undefined;
+        component: Component<any>;
+        cell: Component<any> | undefined;
         access: {
             create: import("../types.js").FieldAccess;
             read: import("../types.js").FieldAccess;
@@ -60,6 +62,7 @@ export declare class GroupFieldBuilder extends FormFieldBuilder<GroupField> {
         };
         defaultValue?: import("../types.js").DefaultValueFn<any> | unknown;
         isEmpty: (value: unknown) => boolean;
+        preview?: Component<FieldsPreviewProps>;
     };
 }
 export declare const group: (name: string) => GroupFieldBuilder;
@@ -77,6 +80,7 @@ export type GroupField = FormField & {
     name: string;
     label?: string;
     fields: FieldBuilder<Field>[];
+    preview?: Component<FieldsPreviewProps>;
 };
 export type GroupFieldRaw = FormField & {
     type: 'group';

package/dist/fields/group/index.js

@@ -34,6 +34,10 @@ export class GroupFieldBuilder extends FormFieldBuilder {
         });
         return this;
     }
+    preview(component) {
+        this.field.preview = component;
+        return this;
+    }
     compile() {
         return { ...this.field, fields: this.field.fields.map((f) => f.compile()) };
     }

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

@@ -4,7 +4,7 @@
   import type { GenericDoc } from '../../../core/types/doc.js';
   import * as Command from '../../../panel/components/ui/command/index.js';
   import Tag from '../../../panel/components/ui/tag/tag.svelte';
-  import { API_PROXY, getAPIProxyContext } from '../../../panel/context/api-proxy.svelte.js';
+  import { getAPIProxyContext } from '../../../panel/context/api-proxy.svelte.js';
   import type { PrototypeSlug } from '../../../types';
   import { toKebabCase } from '../../../util/string';
 
@@ -28,7 +28,7 @@
   let resources = $state<Ressource[]>([]);
   let selected = $state<Ressource | null>();
 
-  const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
+  const APIProxy = getAPIProxyContext();
   let resource = $state<any>(null);
 
   function convertDocToResource(doc: GenericDoc) {

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

@@ -3,7 +3,7 @@
   import { apiUrl } from '../../../core/api/index.js';
   import type { GenericDoc } from '../../../core/types/doc.js';
   import UploadThumbCell from '../../../panel/components/sections/collection/upload-thumb-cell/UploadThumbCell.svelte';
-  import { API_PROXY, getAPIProxyContext } from '../../../panel/context/api-proxy.svelte.js';
+  import { getAPIProxyContext } from '../../../panel/context/api-proxy.svelte.js';
   import { toKebabCase } from '../../../util/string';
 
   type Props = {
@@ -17,7 +17,7 @@
   let { value }: Props = $props();
   let displayCount = $derived(value && value.length > 1);
 
-  const APIProxy = getAPIProxyContext(API_PROXY.ROOT);
+  const APIProxy = getAPIProxyContext();
 
   let APIUrl = $derived.by(() => {
     if (value && value.length && value[0].documentId) {

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

@@ -11,7 +11,7 @@
   import { panelUrl } from '../../../panel/util/url.js';
   import { moveItem } from '../../../util/array.js';
   import { snapshot } from '../../../util/state.js';
-  import { API_PROXY, getAPIProxyContext } from '../../../panel/context/api-proxy.svelte.js';
+  import { getAPIProxyContext } from '../../../panel/context/api-proxy.svelte.js';
   import type { Relation, RelationField } from '../index.js';
   import Default from './default/Default.svelte';
   import type { RelationFieldItem } from './types.js';
@@ -24,7 +24,7 @@
   // Context
   const { getCollection } = getConfigContext();
   const locale = getLocaleContext();
-  const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
+  const APIProxy = getAPIProxyContext();
   const field = $derived(form.useField(path, config));
   // svelte-ignore state_referenced_locally
   const relationConfig = getCollection(config.relationTo);

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

@@ -10,7 +10,7 @@
   import * as Dialog from '../../../../panel/components/ui/dialog/index.js';
   import * as DropdownMenu from '../../../../panel/components/ui/dropdown-menu/index.js';
   import Input from '../../../../panel/components/ui/input/input.svelte';
-  import { API_PROXY, getAPIProxyContext } from '../../../../panel/context/api-proxy.svelte.js';
+  import { getAPIProxyContext } from '../../../../panel/context/api-proxy.svelte.js';
   import type { BuiltCollection, UploadDoc } from '../../../../types';
   import { ListFilter, Search } from '@lucide/svelte';
 
@@ -62,7 +62,7 @@
     return `${apiUrl(withDirectoriesSuffix(config.kebab))}?where[parent][equals]=${path}`;
   });
 
-  const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
+  const APIProxy = getAPIProxyContext();
   let files = $derived(APIProxy.getRessource<{ docs: UploadDoc[] }>(filesURL));
   let folders = $derived(APIProxy.getRessource<{ docs: Directory[] }>(foldersURL));
 

package/dist/fields/rich-text/client.d.ts

@@ -1,5 +1,7 @@
+import type { FieldBuilder } from '../../core/fields/builders/index.js';
 import type { Level } from '@tiptap/extension-heading';
-import { FieldsFeature } from './core/features/fields/index.js';
+import type { Component } from 'svelte';
+import type { FieldsPreviewProps } from '../types.js';
 import { LinkFeature } from './core/features/link/index.js';
 import { ResourceFeature } from './core/features/resource/index.js';
 import type { RichTextResource } from './core/features/resource/types.js';
@@ -9,7 +11,12 @@ import SvelteNodeViewRenderer from './core/svelte/node-view-renderer.svelte';
 import NodeViewWrapper from './core/svelte/node-view-wrapper.svelte';
 import type { RichTextNodeRenderer, RichTextNodeRendererProps } from './core/types.js';
 import { richTextJSONToText } from './index.js';
-export declare const fields: (args: Parameters<typeof FieldsFeature>[0]) => import("./core/types.js").RichTextFeature;
+export declare const fields: (args: {
+    name: string;
+    label: string;
+    fields: FieldBuilder[];
+    preview: Component<FieldsPreviewProps>;
+}) => import("./core/types.js").RichTextFeature;
 export declare const bold: () => import("./core/types.js").RichTextFeature;
 export declare const bulletList: () => import("./core/types.js").RichTextFeature;
 export declare const heading: (...levels: Level[]) => import("./core/types.js").RichTextFeature;

package/dist/fields/rich-text/core/config-builders.js

@@ -7,6 +7,7 @@ import Typography from '@tiptap/extension-typography';
 import { Dropcursor, Gapcursor, Placeholder, UndoRedo } from '@tiptap/extensions';
 import { API_PROXY, getAPIProxyContext } from '../../../panel/context/api-proxy.svelte.js';
 import { CONFIG_CTX, getConfigContext } from '../../../panel/context/config.svelte.js';
+import { getLocaleContext, LOCALE_CTX } from '../../../panel/context/locale.svelte.js';
 import { getUserContext, USER_CTX } from '../../../panel/context/user.svelte.js';
 import { hasSuggestion } from '../util.js';
 import { CurrentNodeAttribute } from './extensions/current-node/current-node.js';
@@ -60,12 +61,14 @@ export function buildEditorConfig(args) {
             if ('addNodeView' in feature.extension.config) {
                 const originalAddOption = feature.extension.config.addOptions || (() => ({}));
                 const contexts = new Map();
+                const localeContext = getLocaleContext();
                 const configContext = getConfigContext();
-                const apiProxyContext = getAPIProxyContext(API_PROXY.DOCUMENT);
+                const apiProxyContext = getAPIProxyContext();
                 const userContext = getUserContext();
                 contexts.set(CONFIG_CTX, configContext);
-                contexts.set(API_PROXY.DOCUMENT, apiProxyContext);
+                contexts.set(API_PROXY.ROOT, apiProxyContext);
                 contexts.set(USER_CTX, userContext);
+                contexts.set(LOCALE_CTX, localeContext);
                 feature.extension.config.addOptions = () => {
                     // @ts-expect-error
                     return { ...originalAddOption(), contexts };

package/dist/fields/rich-text/core/features/fields/extension.d.ts

@@ -1,10 +1,17 @@
+import type { FieldBuilder } from '../../../../../core/fields/builders';
+import type { FieldsPreviewProps } from '../../../../types';
 import type { Dic } from '../../../../../util/types.js';
 import { Node } from '@tiptap/core';
+import type { Component } from 'svelte';
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        sheet: {
-            insertSheet: (attributes: Dic) => ReturnType;
+        'richt-text-fields': {
+            insertSheet: (attributes?: Dic) => ReturnType;
         };
     }
 }
-export declare const FieldsExtension: Node<any, any>;
+export interface FieldsFeatureExtensionOptions {
+    fields: FieldBuilder[];
+    preview?: Component<FieldsPreviewProps>;
+}
+export declare const FieldsExtension: Node<FieldsFeatureExtensionOptions, any>;

package/dist/fields/rich-text/core/features/fields/extension.js

@@ -5,13 +5,8 @@ export const FieldsExtension = Node.create({
     name: 'richt-text-fields',
     group: 'block',
     atom: true,
-    draggable: true, // Optional: to make the node draggable
+    draggable: true,
     inline: false,
-    addOptions() {
-        return {
-            fields: null
-        };
-    },
     addAttributes() {
         return ['json'].reduce((acc, key) => {
             acc[key] = { default: null };

package/dist/fields/rich-text/core/features/fields/fields.css

@@ -25,4 +25,8 @@
   .rz-render-fields-preview__row:last-child .rz-render-fields-preview__name {
     border-bottom-left-radius: var(--rz-radius-lg);
   }
+
+  &.rz-rich-text-fields-preview--custom {
+    max-width: unset;
+  }
 }

package/dist/fields/rich-text/core/features/fields/fields.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-  import { page } from '$app/state';
   import { FieldBuilder, FormFieldBuilder } from '../../../../../core/fields/builders';
+  import type { FieldsPreviewProps } from '../../../../types';
   import FieldsPreview from '../../../../../panel/components/fields/FieldsPreview.svelte';
   import FieldsPreviewTrigger from '../../../../../panel/components/fields/FieldsPreviewTrigger.svelte';
   import * as Sheet from '../../../../../panel/components/ui/sheet/index.js';
   import { setFormContext } from '../../../../../panel/context/form.svelte';
-  import { setLocaleContext } from '../../../../../panel/context/locale.svelte';
   import type { NodeViewProps } from '@tiptap/core';
-  import { onMount } from 'svelte';
+  import { onMount, type Component } from 'svelte';
   import NodeViewWrapper from '../../svelte/node-view-wrapper.svelte';
   import './fields.css';
 
@@ -15,6 +14,7 @@
     extension: {
       options: {
         fields: FieldBuilder[];
+        preview?: Component<FieldsPreviewProps>;
       };
     };
   };
@@ -22,7 +22,6 @@
   let { node, extension, updateAttributes }: Props = $props();
   let isSheetOpen = $state(false);
 
-  setLocaleContext(page.data.locale || 'en');
   // svelte-ignore state_referenced_locally
   const form = setFormContext(node.attrs.json || {}, 'fields');
 
@@ -43,19 +42,27 @@
   const previewFields = $derived.by(() => {
     return extension.options.fields.filter((field) => field instanceof FormFieldBuilder);
   });
+
+  const classModifiers = $derived(
+    extension.options.preview ? 'rz-rich-text-fields-preview--custom' : ''
+  );
 </script>
 
 <NodeViewWrapper>
-  <FieldsPreviewTrigger class="rz-rich-text-fields-preview" onclick={() => (isSheetOpen = true)}>
+  <FieldsPreviewTrigger
+    class="rz-rich-text-fields-preview {classModifiers}"
+    onclick={() => (isSheetOpen = true)}
+  >
     <FieldsPreview
       fields={previewFields}
       getField={(field) => form.useField(field.name, field.raw)}
+      preview={extension.options.preview}
     />
   </FieldsPreviewTrigger>
 </NodeViewWrapper>
 
 <Sheet.Root bind:open={isSheetOpen}>
-  <Sheet.Content side="right" class="rz-rich-text-sheet">
+  <Sheet.Content preventScroll={false} side="right" class="rz-rich-text-sheet">
     {#each previewFields || [] as field, index (index)}
       {@const FieldComponent = field.component}
       <FieldComponent path={field.raw.name} config={field.raw} {form} />

package/dist/fields/rich-text/core/features/fields/fields.svelte.d.ts

@@ -1,13 +1,16 @@
 import { FieldBuilder } from '../../../../../core/fields/builders';
+import type { FieldsPreviewProps } from '../../../../types';
 import type { NodeViewProps } from '@tiptap/core';
+import { type Component } from 'svelte';
 import './fields.css';
 type Props = Omit<NodeViewProps, 'extension'> & {
     extension: {
         options: {
             fields: FieldBuilder[];
+            preview?: Component<FieldsPreviewProps>;
         };
     };
 };
-declare const Fields: import("svelte").Component<Props, {}, "">;
+declare const Fields: Component<Props, {}, "">;
 type Fields = ReturnType<typeof Fields>;
 export default Fields;

package/dist/fields/rich-text/core/features/fields/index.d.ts

@@ -1,9 +1,11 @@
 import type { FieldBuilder } from '../../../../../core/fields/builders/field-builder.js';
+import type { FieldsPreviewProps } from '../../../../types.js';
+import type { Component } from 'svelte';
 import type { RichTextFeature } from '../../../../../types.js';
-type Args = {
+export interface FieldsFeatureOptions {
     name: string;
     label: string;
     fields: FieldBuilder[];
-};
-export declare const FieldsFeature: (args: Args) => RichTextFeature;
-export {};
+    preview?: Component<FieldsPreviewProps>;
+}
+export declare const FieldsFeature: (args: FieldsFeatureOptions) => RichTextFeature;

package/dist/fields/rich-text/core/features/fields/index.js

@@ -5,11 +5,10 @@ const fieldsFeatureNode = (args) => ({
     icon: SheetIcon,
     isActive: ({ editor }) => editor.isActive('richt-text-fields'),
     suggestion: {
-        //@ts-expect-error annoying
         command: ({ editor }) => editor.chain().focus().insertSheet().run()
     }
 });
 export const FieldsFeature = (args) => ({
-    extension: FieldsExtension.configure(args),
+    extension: FieldsExtension.configure({ fields: args.fields, preview: args.preview }),
     nodes: [fieldsFeatureNode(args)]
 });

package/dist/fields/rich-text/core/features/link/component/link-selector.svelte

@@ -6,11 +6,7 @@
   import Button from '../../../../../../panel/components/ui/button/button.svelte';
   import * as Command from '../../../../../../panel/components/ui/command/index.js';
   import Input from '../../../../../../panel/components/ui/input/input.svelte';
-  import {
-    API_PROXY,
-    getAPIProxyContext,
-    type Resource
-  } from '../../../../../../panel/context/api-proxy.svelte.js';
+  import { getAPIProxyContext, type Resource } from '../../../../../../panel/context/api-proxy.svelte.js';
   import { getLocaleContext } from '../../../../../../panel/context/locale.svelte';
   import validate from '../../../../../../util/validate.js';
   import { CornerDownLeft, ExternalLink, Link2, Newspaper, Trash } from '@lucide/svelte';
@@ -40,7 +36,7 @@
   /**
    * Logic to get internal resources e.g., collections, areas
    */
-  const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
+  const APIProxy = getAPIProxyContext();
   const locale = getLocaleContext();
   let resources = $state<Resource<LinkResource[]>[]>([]);
   let resourcesFlatMap = $state<LinkResource[]>();

package/dist/fields/rich-text/core/features/resource/index.d.ts

@@ -1,6 +1,3 @@
-import type { PrototypeSlug } from '../../../../../types.js';
 import type { RichTextFeature } from '../../types.js';
-export declare const ResourceFeature: (args: {
-    query?: string;
-    slug: PrototypeSlug;
-}) => RichTextFeature;
+import { type ResourceFeatureExtensionOptions } from './resource-extension.js';
+export declare const ResourceFeature: (args: ResourceFeatureExtensionOptions) => RichTextFeature;

package/dist/fields/rich-text/core/features/resource/index.js

@@ -5,7 +5,6 @@ const resourceFeatureNode = {
     icon: Images,
     isActive: ({ editor }) => editor.isActive('richt-text-resource'),
     suggestion: {
-        //@ts-expect-error annoying
         command: ({ editor }) => editor.chain().focus().insertResource().run()
     }
 };

package/dist/fields/rich-text/core/features/resource/resource-extension.d.ts

@@ -1,10 +1,15 @@
+import type { PrototypeSlug } from '../../../../../core/types/doc';
 import type { Dic } from '../../../../../util/types.js';
 import { Node } from '@tiptap/core';
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         resource: {
-            insertResource: (attributes: Dic) => ReturnType;
+            insertResource: (attributes?: Dic) => ReturnType;
         };
     }
 }
-export declare const Resource: Node<any, any>;
+export interface ResourceFeatureExtensionOptions {
+    query?: string;
+    slug: PrototypeSlug;
+}
+export declare const Resource: Node<ResourceFeatureExtensionOptions, any>;

package/dist/fields/rich-text/core/features/resource/resource-extension.js

@@ -5,14 +5,8 @@ export const Resource = Node.create({
     name: 'resource',
     group: 'block',
     atom: true,
-    draggable: true, // Optional: to make the node draggable
+    draggable: true,
     inline: false,
-    addOptions() {
-        return {
-            query: null,
-            _type: null
-        };
-    },
     addAttributes() {
         return ['id', 'title', '_type', '_thumbnail'].reduce((acc, key) => {
             acc[key] = { default: null };

package/dist/fields/rich-text/core/features/resource/resource.svelte

@@ -4,7 +4,7 @@
   import Button from '../../../../../panel/components/ui/button/button.svelte';
   import CardResource from '../../../../../panel/components/ui/card-resource/card-resource.svelte';
   import * as Command from '../../../../../panel/components/ui/command/index.js';
-  import { API_PROXY, getAPIProxyContext } from '../../../../../panel/context/api-proxy.svelte.js';
+  import { getAPIProxyContext } from '../../../../../panel/context/api-proxy.svelte.js';
   import type { NodeViewProps } from '@tiptap/core';
   import { onMount } from 'svelte';
   import NodeViewWrapper from '../../svelte/node-view-wrapper.svelte';
@@ -37,7 +37,7 @@
     }
   });
 
-  const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
+  const APIProxy = getAPIProxyContext();
 
   // svelte-ignore state_referenced_locally
   const url = extension.options.query

package/dist/fields/rich-text/core/features/upload/index.js

@@ -5,8 +5,7 @@ const uploadFeatureNode = {
     icon: Images,
     isActive: ({ editor }) => editor.isActive('richt-text-media'),
     suggestion: {
-        //@ts-expect-error insertMedia is defined by the extension
-        command: ({ editor }) => editor.chain().focus().insertMedia().run()
+        command: ({ editor }) => editor.chain().focus().insertUpload().run()
     }
 };
 export const UploadFeature = (args) => ({

package/dist/fields/rich-text/core/features/upload/upload-extension.d.ts

@@ -1,2 +1,15 @@
+import type { CollectionSlug } from '../../../../../types';
+import type { Dic } from '../../../../../util/types.js';
 import { Node } from '@tiptap/core';
-export declare const Upload: Node<any, any>;
+export interface UploadFeatureExtensionOptions {
+    query?: string;
+    slug: CollectionSlug;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        upload: {
+            insertUpload: (attributes?: Dic) => ReturnType;
+        };
+    }
+}
+export declare const Upload: Node<UploadFeatureExtensionOptions, any>;

package/dist/fields/rich-text/core/features/upload/upload-extension.js

@@ -5,25 +5,17 @@ export const Upload = Node.create({
     name: 'upload',
     group: 'block',
     atom: true,
-    draggable: true, // Optional: to make the node draggable
+    draggable: true,
     inline: false,
-    addOptions() {
-        return {
-            query: null
-        };
-    },
     addAttributes() {
         return ['id', 'title', 'sizes', 'mimeType', 'url', 'filename', 'legend'].reduce((acc, key) => {
             acc[key] = { default: null };
             return acc;
         }, {});
     },
-    //@ts-expect-error annoying
     addCommands() {
         return {
-            insertMedia: (attributes = {}) => 
-            //@ts-expect-error annoying
-            ({ commands }) => {
+            insertUpload: (attributes = {}) => ({ commands }) => {
                 return commands.insertContent({
                     type: this.name,
                     attrs: attributes

package/dist/fields/rich-text/core/features/upload/upload.svelte

@@ -6,7 +6,7 @@
   import * as Command from '../../../../../panel/components/ui/command/index.js';
   import * as Dialog from '../../../../../panel/components/ui/dialog/index.js';
   import Input from '../../../../../panel/components/ui/input/input.svelte';
-  import { API_PROXY, getAPIProxyContext } from '../../../../../panel/context/api-proxy.svelte.js';
+  import { getAPIProxyContext } from '../../../../../panel/context/api-proxy.svelte.js';
   import { X } from '@lucide/svelte';
   import type { NodeViewProps } from '@tiptap/core';
   import { onMount } from 'svelte';
@@ -54,7 +54,7 @@
     }
   });
 
-  const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
+  const APIProxy = getAPIProxyContext();
 
   // svelte-ignore state_referenced_locally
   const url = extension.options.query

package/dist/fields/rich-text/core/svelte/node-view-renderer.svelte.js

@@ -55,11 +55,16 @@ class SvelteNodeView extends NodeView {
             // Focus the editor
             this.editor.view.focus();
         });
-        const svelteComponent = mount(Component, { target, props, context });
-        this.renderer = new SvelteRenderer(svelteComponent, {
-            element: target,
-            props
-        });
+        try {
+            this.renderer = new SvelteRenderer(mount(Component, { target, props, context }), {
+                element: target,
+                props
+            });
+        }
+        catch (e) {
+            console.error('Error mounting Svelte component in NodeView', e);
+            throw e;
+        }
         this.appendContendDom();
         this.updateElementAttributes();
     }

package/dist/fields/rich-text/core/svelte/node-view-wrapper.svelte

@@ -1,3 +1,4 @@
+<!-- based on https://github.com/sibiraj-s/svelte-tiptap/blob/master/src/lib/NodeViewWrapper.svelte -->
 <script lang="ts" generics="T extends keyof SvelteHTMLElements = 'div'">
   import { getContext, onMount, tick } from 'svelte';
   import type { SvelteHTMLElements } from 'svelte/elements';

package/dist/fields/rich-text/core/svelte/renderer.d.ts

@@ -1,5 +1,5 @@
-import { mount } from 'svelte';
 import type { NodeViewProps } from '@tiptap/core';
+import { mount } from 'svelte';
 interface RendererOptions {
     element: HTMLElement;
     props: NodeViewProps;

package/dist/fields/types.d.ts

@@ -110,3 +110,13 @@ export type RelationValue<T> = T[] | {
     documentId: string;
 }[] | string[] | string;
 export type SimplerField<T extends FormField> = WithRequired<Partial<T>, 'name' | 'isEmpty' | 'type'>;
+export type BaseUseFieldReturn = {
+    path: string;
+    value: any;
+    readonly editable: boolean;
+    readonly visible: boolean;
+    readonly error: string | false;
+};
+export type FieldsPreviewProps = {
+    fields: Record<string, BaseUseFieldReturn>;
+};

package/dist/panel/components/Root.svelte

@@ -10,7 +10,7 @@
   import { setUserContext } from '../context/user.svelte.js';
   import type { Route } from '../types.js';
   import { onMount, type Snippet } from 'svelte';
-  import { API_PROXY, setAPIProxyContext } from '../context/api-proxy.svelte.js';
+  import { setAPIProxyContext } from '../context/api-proxy.svelte.js';
 
   type Props = {
     routes: Record<string, Route[]>;
@@ -29,7 +29,7 @@
   // svelte-ignore state_referenced_locally
   setUserContext(user);
   createContext('title', '[untitled]');
-  setAPIProxyContext(API_PROXY.ROOT);
+  setAPIProxyContext();
 
   const locale = $derived(setLocaleContext(initialeLocale));
 

package/dist/panel/components/fields/FieldsPreview.svelte

@@ -1,42 +1,49 @@
 <script lang="ts">
   import { FormFieldBuilder } from '../../../core/fields/builders';
-  import type { FormField } from '../../../fields/types.js';
+  import type { BaseUseFieldReturn, FieldsPreviewProps, FormField } from '../../../fields/types.js';
   import { capitalize } from '../../../util/string.js';
+  import type { Component } from 'svelte';
 
   type Props = {
     fields: FormFieldBuilder<FormField>[];
-    getField: (field: FormFieldBuilder<FormField>) => { visible: boolean; value: any | null };
+    getField: (field: FormFieldBuilder<FormField>) => BaseUseFieldReturn;
+    preview?: Component<FieldsPreviewProps>;
   };
 
-  const { fields, getField }: Props = $props();
-
-  //
+  const { fields, getField, preview }: Props = $props();
 </script>
 
 <div class="rz-render-fields-preview">
-  {#each fields as builder, index (index)}
-    {@const field = getField(builder)}
-    {#if !builder.raw.hidden && field.visible}
-      <div class="rz-render-fields-preview__row" data-visible={field.visible || null}>
-        <div class="rz-render-fields-preview__name">
-          <p>
-            {builder.raw.label || capitalize(builder.name)}
-          </p>
-        </div>
-        <div class="rz-render-fields-preview__value">
-          {#if builder.raw.table?.cell}
-            {@const ColumnTableCell = builder.raw.table.cell}
-            <span><ColumnTableCell value={field.value} /></span>
-          {:else if builder.cell}
-            {@const Cell = builder.cell}
-            <span><Cell value={field.value} /></span>
-          {:else}
-            <span>{field.value}</span>
-          {/if}
+  {#if preview}
+    {@const Preview = preview}
+    <div class="rz-render-fields-preview__custom" data-visible>
+      <Preview fields={Object.fromEntries(fields.map((field) => [field.name, getField(field)]))} />
+    </div>
+  {:else}
+    {#each fields as builder, index (index)}
+      {@const field = getField(builder)}
+      {#if !builder.raw.hidden && field.visible}
+        <div class="rz-render-fields-preview__row" data-visible={field.visible || null}>
+          <div class="rz-render-fields-preview__name">
+            <p>
+              {builder.raw.label || capitalize(builder.name)}
+            </p>
+          </div>
+          <div class="rz-render-fields-preview__value">
+            {#if builder.raw.table?.cell}
+              {@const ColumnTableCell = builder.raw.table.cell}
+              <span><ColumnTableCell value={field.value} /></span>
+            {:else if builder.cell}
+              {@const Cell = builder.cell}
+              <span><Cell value={field.value} /></span>
+            {:else}
+              <span>{field.value}</span>
+            {/if}
+          </div>
         </div>
-      </div>
-    {/if}
-  {/each}
+      {/if}
+    {/each}
+  {/if}
 </div>
 
 <style>

package/dist/panel/components/fields/FieldsPreview.svelte.d.ts

@@ -1,12 +1,11 @@
 import { FormFieldBuilder } from '../../../core/fields/builders';
-import type { FormField } from '../../../fields/types.js';
+import type { BaseUseFieldReturn, FieldsPreviewProps, FormField } from '../../../fields/types.js';
+import type { Component } from 'svelte';
 type Props = {
     fields: FormFieldBuilder<FormField>[];
-    getField: (field: FormFieldBuilder<FormField>) => {
-        visible: boolean;
-        value: any | null;
-    };
+    getField: (field: FormFieldBuilder<FormField>) => BaseUseFieldReturn;
+    preview?: Component<FieldsPreviewProps>;
 };
-declare const FieldsPreview: import("svelte").Component<Props, {}, "">;
+declare const FieldsPreview: Component<Props, {}, "">;
 type FieldsPreview = ReturnType<typeof FieldsPreview>;
 export default FieldsPreview;

package/dist/panel/components/sections/collection/folder/FolderEdit.svelte

@@ -6,7 +6,6 @@
   import RenderFields from '../../../fields/RenderFields.svelte';
   import Button from '../../../ui/button/button.svelte';
   import * as Dialog from '../../../ui/dialog/index.js';
-  import { API_PROXY, setAPIProxyContext } from '../../../../context/api-proxy.svelte.js';
   import { getConfigContext } from '../../../../context/config.svelte.js';
   import { setDocumentFormContext } from '../../../../context/documentForm.svelte.js';
   import { getUserContext } from '../../../../context/user.svelte.js';
@@ -18,7 +17,6 @@
   };
   let { folder, collection, open = $bindable() }: Props = $props();
 
-  setAPIProxyContext(API_PROXY.DOCUMENT);
   let formElement = $state<HTMLFormElement>();
   const user = getUserContext();
   const configCtx = getConfigContext();

package/dist/panel/components/sections/collection/folder/FolderWithActions.svelte

@@ -10,7 +10,7 @@
   import ContextMenu from '../../../ui/context-menu/ContextMenu.svelte';
   import ContextMenuItem from '../../../ui/context-menu/ContextMenuItem.svelte';
   import * as Dialog from '../../../ui/dialog/index.js';
-  import { API_PROXY, getAPIProxyContext } from '../../../../context/api-proxy.svelte.js';
+  import { getAPIProxyContext } from '../../../../context/api-proxy.svelte.js';
   import { panelUrl } from '../../../../util/url.js';
   import { trycatchFetch } from '../../../../../util/function.js';
   import { Pencil, Trash2 } from '@lucide/svelte';
@@ -42,7 +42,7 @@
   let rootElement = $state<HTMLButtonElement>();
   let isDragging = $state(false);
   const isFolderUpperPath = $derived(folder.name === '...');
-  const APIProxy = getAPIProxyContext(API_PROXY.ROOT);
+  const APIProxy = getAPIProxyContext();
   const childFilesURL = $derived(
     `${apiUrl(collection.kebab)}?where[_path][equals]=${folder.id}&select=id`
   );

package/dist/panel/components/sections/collection/grid/create-directory-dialog/CreateDirectoryDialog.svelte

@@ -5,7 +5,6 @@
   import RenderFields from '../../../../fields/RenderFields.svelte';
   import Button from '../../../../ui/button/button.svelte';
   import * as Dialog from '../../../../ui/dialog/index.js';
-  import { API_PROXY, setAPIProxyContext } from '../../../../../context/api-proxy.svelte.js';
   import type { CollectionContext } from '../../../../../context/collection.svelte.js';
   import { getConfigContext } from '../../../../../context/config.svelte.js';
   import {
@@ -16,7 +15,6 @@
   type Props = { collection: CollectionContext; open: boolean };
   let { collection, open = $bindable() }: Props = $props();
 
-  setAPIProxyContext(API_PROXY.DOCUMENT);
   let formElement = $state<HTMLFormElement>();
   const configCtx = getConfigContext();
   // svelte-ignore state_referenced_locally

package/dist/panel/components/sections/document/Header.svelte

@@ -65,6 +65,7 @@
     {/if}
 
     {#if form.values.id}
+      {/* @ts-ignore form doc is GenericDoc as form.values.id is defined */ null}
       <Settings {form} />
     {/if}
 

package/dist/panel/components/sections/document/Settings.svelte

@@ -8,13 +8,14 @@
   import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
   import { getLocaleContext } from '../../../context/locale.svelte.js';
   import { panelUrl } from '../../../util/url.js';
+  import type { GenericDoc } from '../../../../types.js';
   import { trycatchFetch } from '../../../../util/function.js';
   import { Copy, History, Import, Pickaxe, Settings, Trash2 } from '@lucide/svelte';
   import { toast } from 'svelte-sonner';
   import { t__ } from '../../../../core/i18n/index.js';
   import Button from '../../ui/button/button.svelte';
 
-  type Props = { form: DocumentFormContext };
+  type Props = { form: DocumentFormContext<GenericDoc> };
 
   const { form }: Props = $props();
 
@@ -84,7 +85,7 @@
     }
     const { id } = await success.json();
     toast.success(t__('common.duplicate_success'));
-    await goto(panelUrl(form.config.kebab, form.values.id));
+    await goto(panelUrl(form.config.kebab, id));
   }
 
   const shouldShowSettings = $derived.by(() => {

package/dist/panel/components/sections/document/Settings.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
+import type { GenericDoc } from '../../../../types.js';
 import { Settings } from '@lucide/svelte';
 type Props = {
-    form: DocumentFormContext;
+    form: DocumentFormContext<GenericDoc>;
 };
 declare const Settings: import("svelte").Component<Props, {}, "">;
 type Settings = ReturnType<typeof Settings>;

package/dist/panel/components/sections/live/SidePanel.svelte

@@ -3,7 +3,7 @@
   import type { User } from '../../../../core/collections/auth/types.js';
   import type { BuiltConfigClient } from '../../../../core/config/types.js';
   import { Toaster } from '../../ui/sonner';
-  import { API_PROXY, setAPIProxyContext } from '../../../context/api-proxy.svelte.js';
+  import { setAPIProxyContext } from '../../../context/api-proxy.svelte.js';
   import { setConfigContext } from '../../../context/config.svelte.js';
   import createContext from '../../../context/createContext.svelte.js';
   import { setLocaleContext } from '../../../context/locale.svelte.js';
@@ -22,7 +22,7 @@
     user: User;
   };
 
-  const { doc, config, locale: initialeLocale, user, onDataChange, onFieldFocus }: Props = $props();
+  const { doc, config, locale: initialLocale, user, onDataChange, onFieldFocus }: Props = $props();
 
   function buildPanelURL() {
     // Start with the base URI for the panel
@@ -35,16 +35,14 @@
     return panelUri;
   }
 
-  setAPIProxyContext(API_PROXY.DOCUMENT);
+  setAPIProxyContext();
   // svelte-ignore state_referenced_locally
   setConfigContext(config);
   // svelte-ignore state_referenced_locally
   setUserContext(user);
+  // svelte-ignore state_referenced_locally
+  setLocaleContext(initialLocale);
   createContext('title', '[untitled]');
-
-  $effect(() => {
-    setLocaleContext(initialeLocale);
-  });
 </script>
 
 <Toaster />

package/dist/panel/context/api-proxy.svelte.d.ts

@@ -9,7 +9,6 @@ export declare function getAPIProxyContext(key?: symbol): {
     readonly urls: string[];
 };
 export declare const API_PROXY: {
-    DOCUMENT: symbol;
     ROOT: symbol;
 };
 export type Resource<T = any> = {

package/dist/panel/context/api-proxy.svelte.js

@@ -78,8 +78,6 @@ export function setAPIProxyContext(key = API_PROXY.ROOT) {
 export function getAPIProxyContext(key = API_PROXY.ROOT) {
     return getContext(key);
 }
-// @TODO why multiple APIProxy... ROOT everywhere should work
 export const API_PROXY = {
-    DOCUMENT: Symbol('api-proxy.document'),
     ROOT: Symbol('api-proxy.root')
 };

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

@@ -71,7 +71,7 @@ export declare function setDocumentFormContext<T extends WithOptional<GenericDoc
     readonly isLive: boolean;
     setFocusedField(path: string): void;
 };
-export declare function getDocumentFormContext<T extends WithOptional<GenericDoc, 'id'> = GenericDoc>(key?: string): {
+export declare function getDocumentFormContext<T extends WithOptional<GenericDoc, 'id'> = WithOptional<GenericDoc, 'id'>>(key?: string): {
     key: string;
     setValue: (path: string, value: any) => void;
     getRawValue: <T_1>(path: string) => NonNullable<T_1> | null;
@@ -140,7 +140,7 @@ export declare function getDocumentFormContext<T extends WithOptional<GenericDoc
     readonly isLive: boolean;
     setFocusedField(path: string): void;
 };
-export type DocumentFormContext<T extends WithOptional<GenericDoc, 'id'> = GenericDoc> = ReturnType<typeof setDocumentFormContext<T>>;
+export type DocumentFormContext<T extends WithOptional<GenericDoc, 'id'> = WithOptional<GenericDoc, 'id'>> = ReturnType<typeof setDocumentFormContext<T>>;
 type AddBlock = (block: Omit<GenericBlock, 'id' | 'path'>) => void;
 type MoveBlock = (from: number, to: number) => void;
 export type FormSuccessData = {

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

@@ -18,7 +18,7 @@ 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 { API_PROXY, getAPIProxyContext } from './api-proxy.svelte.js';
+import { getAPIProxyContext } from './api-proxy.svelte.js';
 import { getCollectionContext } from './collection.svelte.js';
 import { setErrorsContext } from './errors.svelte.js';
 import { getLocaleContext } from './locale.svelte.js';
@@ -45,7 +45,7 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
     const titleContext = getContext('title');
     const initialTitle = initTitle();
     let title = $state(initialTitle);
-    const apiProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
+    const apiProxy = getAPIProxyContext();
     function initLevel() {
         const last = key.split('_').pop();
         const isDigit = /[\d]+/.test(last);

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

@@ -30,7 +30,6 @@ function createFormStore(initial, key) {
      * // value will not update if doc.blocks.0.title update
      */
     function getRawValue(path) {
-        console.log(path);
         return snapshot(getValueAtPath(path, form)) || null;
     }
     function setValue(path, value) {

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

@@ -1,3 +1,4 @@
+export declare const LOCALE_CTX: unique symbol;
 export declare function setLocaleContext(initial?: string): {
     dateFormat: (date: Date | string, args?: {
         short?: boolean;

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

@@ -1,6 +1,6 @@
 import { getContext, setContext } from 'svelte';
 import { getConfigContext } from './config.svelte.js';
-const LOCALE_KEY = Symbol('rime.locale');
+export const LOCALE_CTX = Symbol('rime.locale');
 function createStore(initial) {
     let code = $state();
     let label = $state();
@@ -56,8 +56,8 @@ function createStore(initial) {
 }
 export function setLocaleContext(initial) {
     const store = createStore(initial);
-    return setContext(LOCALE_KEY, store);
+    return setContext(LOCALE_CTX, store);
 }
 export function getLocaleContext() {
-    return getContext(LOCALE_KEY);
+    return getContext(LOCALE_CTX);
 }

package/dist/panel/pages/area/Area.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
   import Document from '../../components/sections/document/Document.svelte';
-  import Unauthorized from '../../components/sections/unauthorized/Unauthorized.svelte';
-  import { API_PROXY, setAPIProxyContext } from '../../context/api-proxy.svelte.js';
   import Page from '../../components/sections/page-layout/Page.svelte';
+  import Unauthorized from '../../components/sections/unauthorized/Unauthorized.svelte';
   import type { AreaDocData } from '../../index.js';
 
   const { data }: { data: AreaDocData<false> } = $props();
-
-  setAPIProxyContext(API_PROXY.DOCUMENT);
 </script>
 
 {#if data.status === 200}

package/dist/panel/pages/area/AreaVersionsDoc.svelte

@@ -3,12 +3,9 @@
   import Versions from '../../components/sections/document/Versions.svelte';
   import Page from '../../components/sections/page-layout/Page.svelte';
   import Unauthorized from '../../components/sections/unauthorized/Unauthorized.svelte';
-  import { API_PROXY, setAPIProxyContext } from '../../context/api-proxy.svelte.js';
   import type { AreaDocData } from '../../index.js';
 
   const { data }: { data: AreaDocData<true> } = $props();
-
-  setAPIProxyContext(API_PROXY.DOCUMENT);
 </script>
 
 {#if data.status === 200}

package/dist/panel/pages/collection-document/CollectionDocVersions.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
-  import type { VersionsStatus } from '../../../core/constant.js';
-  import type { VersionDoc } from '../../../core/types/doc.js';
   import Document from '../../components/sections/document/Document.svelte';
   import Versions from '../../components/sections/document/Versions.svelte';
   import Page from '../../components/sections/page-layout/Page.svelte';
   import Unauthorized from '../../components/sections/unauthorized/Unauthorized.svelte';
-  import { API_PROXY, setAPIProxyContext } from '../../context/api-proxy.svelte.js';
   import type { CollectionDocData } from '../../index.js';
 
   const { data }: { data: CollectionDocData<true> } = $props();
-
-  setAPIProxyContext(API_PROXY.DOCUMENT);
 </script>
 
 {#if data.status === 200}

package/dist/panel/pages/collection-document/CollectionDocument.svelte

@@ -2,12 +2,9 @@
   import Document from '../../components/sections/document/Document.svelte';
   import Page from '../../components/sections/page-layout/Page.svelte';
   import Unauthorized from '../../components/sections/unauthorized/Unauthorized.svelte';
-  import { API_PROXY, setAPIProxyContext } from '../../context/api-proxy.svelte.js';
   import type { CollectionDocData } from '../../index.js';
 
   const { data }: { data: CollectionDocData<false> } = $props();
-
-  setAPIProxyContext(API_PROXY.DOCUMENT);
 </script>
 
 {#if data.status === 200}

package/dist/panel/pages/live/Live.svelte

@@ -7,6 +7,7 @@
   import Button from '../../components/ui/button/button.svelte';
   import { Pane, PaneGroup, PaneResizer } from '../../components/ui/pane/index.js';
   import SpinLoader from '../../components/ui/spin-loader/SpinLoader.svelte';
+  import { snapshot } from '../../../util/state';
   import { Laptop, Smartphone } from '@lucide/svelte';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
@@ -30,7 +31,8 @@
   const onDataChange = (args: Partial<GenericDoc>) => {
     /** Send message to iframe */
     if (iframe?.contentWindow) {
-      iframe.contentWindow.postMessage(args);
+      // Use snapshot to ensure we're sending a plain object without reactive proxies
+      iframe.contentWindow.postMessage(snapshot(args));
     }
   };
 
@@ -89,12 +91,7 @@
     }
   });
 
-  const ZOOMS = [0.5, 0.66, 1] as const;
-
-  let currentZoom = $state(1);
   let currentDevice = $state<'mobile' | 'desktop'>('mobile');
-
-  const iframeScale = $derived(ZOOMS[currentZoom]);
 </script>
 
 <div class="rz-live-container">
@@ -169,8 +166,6 @@
 
   .rz-live-container iframe.mobile {
     width: 320px;
-    /*transform: translateX(-50%);
-		margin-left: 50%;*/
     aspect-ratio: 2 / 3.3;
     scale: 1.25;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rimecms",
-  "version": "0.26.9",
+  "version": "0.27.0",
   "homepage": "https://github.com/bienbiendev/rime",
   "scripts": {
     "dev": "vite dev",
@@ -170,7 +170,7 @@
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.20.0",
     "vite": "^8.0.8",
-    "vitest": "^4.0.5"
+    "vitest": "^4.1.4"
   },
   "dependencies": {
     "@babel/generator": "^7.28.3",