rimecms 0.26.8 → 0.27.0

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;
   }