rimecms 0.27.6 → 0.28.1

package/dist/panel/components/ui/input/input.svelte

@@ -25,19 +25,13 @@
   <input bind:this={ref} class="rz-input" bind:value {...restProps} />
 </div>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-:root {
+<style>:root {
     --rz-input-border-color: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-6) / 0.6));
     --rz-input-padding-x: var(--rz-size-3);
     --rz-input-padding-y: var(--rz-size-1);
   }
 
-.rz-input {
+  .rz-input {
     border: 1px solid var(--rz-input-border-color);
     background-color: hsl(var(--rz-input-bg));
     display: flex;
@@ -48,11 +42,11 @@
     padding: var(--rz-input-padding-y) var(--rz-input-padding-x);
   }
 
-.rz-input__icon + .rz-input {
+  .rz-input__icon + .rz-input {
     padding-left: calc(var(--rz-input-padding-x) + var(--rz-size-6));
   }
 
-input.rz-input:is(:-webkit-autofill, :-webkit-autofill) {
+  input.rz-input:is(:-webkit-autofill, :-webkit-autofill) {
     --color: color-mix(in lch, hsl(var(--rz-input-bg)), hsl(var(--rz-color-spot)) 12%);
     background-color: var(--color) !important;
     box-shadow: 0 0 0 1000px var(--color) inset !important;
@@ -60,23 +54,21 @@ input.rz-input:is(:-webkit-autofill, :-webkit-autofill) {
     -webkit-text-fill-color: hsl(var(--rz-color-fg) / 1) !important;
   }
 
-input.rz-input:is(:-webkit-autofill, :autofill) {
+  input.rz-input:is(:-webkit-autofill, :autofill) {
     --color: color-mix(in lch, hsl(var(--rz-input-bg)), hsl(var(--rz-color-spot)) 12%);
     background-color: var(--color) !important;
     box-shadow: 0 0 0 1000px var(--color) inset !important;
     color: hsl(var(--rz-color-fg) / 1) !important;
     -webkit-text-fill-color: hsl(var(--rz-color-fg) / 1) !important;
   }
-
-input.rz-input:is(:-webkit-autofill, :-webkit-autofill):focus {
+  input.rz-input:is(:-webkit-autofill, :-webkit-autofill):focus {
     --color: color-mix(in lch, hsl(var(--rz-input-bg)), hsl(var(--rz-color-spot)) 24%);
     background-color: var(--color) !important;
     box-shadow: 0 0 0 1000px var(--color) inset !important;
     color: hsl(var(--rz-color-fg) / 1) !important;
     -webkit-text-fill-color: hsl(var(--rz-color-fg) / 1) !important;
   }
-
-input.rz-input:is(:-webkit-autofill, :autofill):focus {
+  input.rz-input:is(:-webkit-autofill, :autofill):focus {
     --color: color-mix(in lch, hsl(var(--rz-input-bg)), hsl(var(--rz-color-spot)) 24%);
     background-color: var(--color) !important;
     box-shadow: 0 0 0 1000px var(--color) inset !important;
@@ -84,34 +76,32 @@ input.rz-input:is(:-webkit-autofill, :autofill):focus {
     -webkit-text-fill-color: hsl(var(--rz-color-fg) / 1) !important;
   }
 
-.rz-input:disabled {
+  .rz-input:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-
-.rz-input::-moz-placeholder {
+  .rz-input::-moz-placeholder {
     color: hsl(var(--rz-color-fg) / 0.5);
   }
-
-.rz-input::placeholder {
+  .rz-input::placeholder {
     color: hsl(var(--rz-color-fg) / 0.5);
   }
 
-.rz-input:focus-visible {
+  .rz-input:focus-visible {
     outline: none;
     box-shadow:
     0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
     0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
   }
 
-.rz-input[data-error] {
+  .rz-input[data-error] {
     outline: none;
     box-shadow:
     0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
     0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-alert) / var(--rz-ring-opacity, 1));
   }
 
-.rz-input-wrapper {
+  .rz-input-wrapper {
     position: relative;
     width: 100%;
 

package/dist/panel/components/ui/label/label.css

@@ -8,7 +8,6 @@
   opacity: 0.7;
   cursor: not-allowed;
 }
-
 .rz-label[for] {
   cursor: pointer;
 }

package/dist/panel/components/ui/nav/NavItemButton.svelte

@@ -25,13 +25,7 @@
   {@render children?.()}
 </a>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-button-nav {
+<style>.rz-button-nav {
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -51,7 +45,7 @@
     }
   }
 
-.rz-button-nav--active {
+  .rz-button-nav--active {
     text-decoration: underline;
     position: relative;
   }

package/dist/panel/components/ui/page-header/PageHeader.svelte

@@ -55,13 +55,7 @@
   {/if}
 {/if}
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-.rz-page-header__row {
+<style>.rz-page-header__row {
     display: flex;
     justify-content: space-between;
     gap: var(--rz-size-4);
@@ -69,11 +63,11 @@
     padding-inline: var(--rz-page-gutter, var(--rz-size-6));
   }
 
-.rz-page-header__row:first-child {
+  .rz-page-header__row:first-child {
     height: var(--rz-size-16);
   }
 
-h1 {
+  h1 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -83,7 +77,7 @@ h1 {
     font-weight: 600;
   }
 
-.rz-page-header__bottom-left,
+  .rz-page-header__bottom-left,
   .rz-page-header__bottom-left > div,
   .rz-page-header__bottom-right {
     display: flex;
@@ -91,7 +85,7 @@ h1 {
     gap: var(--rz-size-2);
   }
 
-.rz-page-header__row-bottom {
+  .rz-page-header__row-bottom {
     position: sticky;
     top: 0;
     z-index: 100;
@@ -101,8 +95,7 @@ h1 {
     border-bottom: var(--rz-border);
     padding-bottom: var(--rz-size-2);
   }
-
-.rz-page-header__row-top {
+  .rz-page-header__row-top {
     height: var(--rz-size-14);
     background: hsl(var(--rz-color-bg));
     margin-bottom: var(--rz-size-16);

package/dist/panel/components/ui/radio-group/radio-group.css

@@ -22,11 +22,13 @@
   flex-shrink: 0;
   cursor: pointer;
 }
+
 .rz-radio-group-item:hover {
   --border-color: var(--rz-gray-2);
   --border-opacity: 0.3;
   border-width: 6px;
 }
+
 .rz-radio-group-item[data-state='checked'] {
   border: 6px solid hsl(var(--rz-color-spot));
   background-color: hsl(var(--rz-gray-19));

package/dist/panel/components/ui/scroll-area/scroll-area.css

@@ -6,11 +6,9 @@
   height: 100%;
   width: 100%;
 }
-
 /**************************************/
 /* ScrollBar
 /**************************************/
-
 .rz-scroll-area-scroll-bar {
   display: flex;
   touch-action: none;
@@ -30,11 +28,9 @@
   height: 100%;
   border-left: 1px solid transparent;
 }
-
 .rz-scroll-area-scroll-bar--vertical .rz-scroll-area-scroll-bar__thumb {
   flex: 1;
 }
-
 .rz-scroll-area-scroll-bar__thumb {
   background-color: hsl(var(--rz-color-border));
   position: relative;

package/dist/panel/components/ui/sheet/sheet.css

@@ -1,7 +1,6 @@
 /**************************************/
 /* Content
 /**************************************/
-
 .rz-sheet-content {
   --ease: cubic-bezier(0.445, 0.05, 0.55, 0.95);
   position: fixed;
@@ -29,7 +28,6 @@
     width: 50%;
   }
 }
-
 @keyframes exit {
   from {
     opacity: 1;
@@ -40,7 +38,6 @@
     transform: translate3d(100%, 0, 0);
   }
 }
-
 @keyframes enter {
   from {
     opacity: 0;
@@ -51,14 +48,12 @@
     transform: translate3d(0%, 0, 0);
   }
 }
-
 .rz-sheet-content__close {
   position: absolute;
   z-index: 1010;
   right: var(--rz-size-4);
   top: var(--rz-size-4);
 }
-
 .rz-sheet-content__close:focus-visible {
   outline: none;
   /* --rz-ring-offset: 2px; */
@@ -67,7 +62,6 @@
     0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
     0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
 }
-
 .rz-sheet-content--right {
   height: 100%;
   right: 0;
@@ -75,20 +69,16 @@
   bottom: 0;
   border-left: var(--rz-border);
 }
-
 /**************************************/
 /* Description
 /**************************************/
-
 .rz-sheet-description {
   color: hsl(var(--rz-color-fg) / 0.7);
   font-size: var(--rz-text-sm);
 }
-
 /**************************************/
 /* Footer
 /**************************************/
-
 .rz-sheet-footer {
   display: flex;
   flex-direction: column-reverse;
@@ -100,11 +90,9 @@
     flex-direction: row;
   }
 }
-
 /**************************************/
 /* Header
 /**************************************/
-
 .rz-sheet-header {
   display: flex;
   flex-direction: column;
@@ -118,11 +106,9 @@
     text-align: left;
   }
 }
-
 /**************************************/
 /* Overlay
 /**************************************/
-
 .rz-sheet-overlay {
   background-color: var(--rz-overlay-color);
   position: fixed;
@@ -130,11 +116,9 @@
   z-index: 100;
   backdrop-filter: blur(var(--rz-overlay-blur));
 }
-
 /**************************************/
 /* Title
 /**************************************/
-
 .rz-sheet-title {
   font-size: var(--rz-text-lg);
   font-variation-settings: 'wght' 600;

package/dist/panel/components/ui/tabs/tabs.css

@@ -4,6 +4,7 @@
 }
 
 /**************************************/
+
 /* Trigger
 /**************************************/
 
@@ -32,9 +33,11 @@
 .rz-tabs-trigger[data-state='active']:not([data-error='true']) {
   color: hsl(var(--rz-color-fg));
 }
+
 .rz-tabs-trigger[data-error='true'] {
   color: hsl(var(--rz-color-alert) / 1);
 }
+
 .rz-tabs-trigger[data-state='inactive'] {
   opacity: 0.8;
 }
@@ -46,18 +49,21 @@
     0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
   outline: none;
 }
+
 .rz-tabs-trigger:disabled {
   pointer-events: none;
   opacity: 0.5;
 }
 
 /**************************************/
+
 /* Content
 /**************************************/
 
 .rz-tabs-content {
   margin-top: var(--rz-size-2);
 }
+
 .rz-tabs-content:focus-visible {
   outline: none;
   border-radius: var(--rz-radius-sm);
@@ -69,6 +75,7 @@
 }
 
 /**************************************/
+
 /* List
 /**************************************/
 

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

@@ -43,8 +43,6 @@ export declare function setCollectionContext(key: string, args: Args): {
         currentPath: `root${string}`;
         parentDirectory: Directory | null;
     };
-    /****************************************************/
-    /****************************************************/
     addDoc: (doc: GenericDoc) => void;
     updateDoc: (incomingDoc: GenericDoc) => void;
     deleteDoc: (id: string) => Promise<void>;
@@ -98,8 +96,6 @@ export declare function getCollectionContext(key?: string): {
         currentPath: `root${string}`;
         parentDirectory: Directory | null;
     };
-    /****************************************************/
-    /****************************************************/
     addDoc: (doc: GenericDoc) => void;
     updateDoc: (incomingDoc: GenericDoc) => void;
     deleteDoc: (id: string) => Promise<void>;

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

@@ -410,9 +410,6 @@ function createCollectionStore(args) {
         set upload(value) {
             upload = value;
         },
-        /****************************************************/
-        // Docs
-        /****************************************************/
         addDoc,
         updateDoc,
         deleteDoc,

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

@@ -41,6 +41,7 @@ function createDocumentFormState({ initial, config, readOnly, key, onNestedDocum
     const hasError = $derived(errors.length);
     const canSubmit = $derived(!isDisabled && !readOnly && Object.keys(changes).length > 0 && !hasError);
     const nestedLevel = initLevel();
+    /** onDataChange is only used to trigger action on live-edit so determine if this is a live-edit form */
     const isLiveEdit = !!onDataChange;
     const locale = getLocaleContext();
     const titleContext = getTitleContext();

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

@@ -1,27 +1,14 @@
 import type { GenericDoc } from '../../core/types/doc.js';
 import type { BeforeNavigate } from '@sveltejs/kit';
-/**
- * Live Editing Flow:
- * 1. Live.svelte sends handshake message to iframe
- * 2. Live context in iframe receives it, enables itself
- * 3. Live context sends handshake response with its href
- * 4. Live.svelte receives the handshake response
- * 5. Live.svelte compares iframe href to expected iframeSrc
- * 6. If they match, sync is established and user can edit
- * 7. When navigating, iframe context sends message to parent with new location + ?live=1
- * 8. Live.svelte navigates to new location, maintaining live edit mode
- */
-type OnDataCallback = (args: {
-    path: string;
-    value: any;
-}) => void;
 /**
  * Creates and sets the live context for the current component
  */
 export declare function setLiveContext<T extends GenericDoc = GenericDoc>(href: string): {
     beforeNavigate: (params: BeforeNavigate) => void;
-    onMessage: (e: any) => Promise<void>;
-    onData: (callback: OnDataCallback) => void;
+    onMessage: (e: MessageEvent) => Promise<void>;
+    readonly documentUpdateURI: string;
+    getPanelValue: (update: string, path: string) => any;
+    readonly activePanelKey: string | null;
     readonly data: {
         doc: T_1 | undefined;
     };
@@ -33,12 +20,13 @@ export declare function setLiveContext<T extends GenericDoc = GenericDoc>(href:
  */
 export declare function getLiveContext<T extends GenericDoc = GenericDoc>(): {
     beforeNavigate: (params: BeforeNavigate) => void;
-    onMessage: (e: any) => Promise<void>;
-    onData: (callback: OnDataCallback) => void;
+    onMessage: (e: MessageEvent) => Promise<void>;
+    readonly documentUpdateURI: string;
+    getPanelValue: (update: string, path: string) => any;
+    readonly activePanelKey: string | null;
     readonly data: {
         doc: T_1 | undefined;
     };
     doc: T | undefined;
     readonly enabled: boolean;
 };
-export {};

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

@@ -1,20 +1,26 @@
+import { page } from '$app/state';
+import { env } from '$env/dynamic/public';
 import { apiUrl } from '../../core/api/index.js';
+import { PARAMS } from '../../core/constant.js';
 import { toKebabCase } from '../../util/string.js';
 import { getContext, setContext } from 'svelte';
-import { isObjectLiteral, setValueAtPath } from '../../util/object.js';
+import { getValueAtPath, isObjectLiteral, setValueAtPath } from '../../util/object.js';
 const LIVE_KEY = Symbol('rime.live');
 function createStore(href) {
     let enabled = $state(false);
     let doc = $state();
-    const callbacks = [];
-    let currentFocusedElement = $state();
+    const liveStore = $state({});
+    let activePanelKey = $state(null);
+    const origin = new URL(env.PUBLIC_RIME_URL).origin;
     /**
      * Handles navigation within iframe to maintain live editing mode
      */
     const beforeNavigate = (params) => {
-        if (window && window.top && params.to?.url.href && enabled) {
-            // Send navigation message to parent with live=1 param
-            window.top.postMessage({ location: params.to.url.href + '?live=1' });
+        if (params.type === 'leave')
+            return;
+        const url = params.to?.url.href;
+        if (window && window.top && url && enabled) {
+            window.top.postMessage({ location: url + '?live=1' });
             params.cancel();
         }
     };
@@ -22,6 +28,9 @@ function createStore(href) {
      * Processes messages from parent window
      */
     const onMessage = async (e) => {
+        // Only accept messages from the trusted panel origin
+        if (e.origin !== origin)
+            return;
         // Handle handshake request
         if (e.data.handshake) {
             enabled = true;
@@ -30,14 +39,20 @@ function createStore(href) {
                 window.top.postMessage({ handshake: href });
             }
         }
-        // Handle field updates
+        // Handle panel store updates (new protocol — has `update` key)
+        else if (e.data.update !== undefined &&
+            e.data.path !== undefined &&
+            e.data.value !== undefined) {
+            await handlePanelUpdate(e.data);
+        }
+        // Handle active panel notification from parent
+        else if ('activePanel' in e.data) {
+            activePanelKey = e.data.activePanel ?? null;
+        }
+        // Handle field updates (legacy single-doc protocol)
         else if (e.data.path && e.data.value !== undefined) {
             await handleFieldUpdate(e.data);
         }
-        // Handle focus requests
-        else if (e.data.focus && typeof e.data.focus === 'string' && typeof document !== 'undefined') {
-            handleFocusField(e.data.focus);
-        }
     };
     /**
      * Recursively processes relation objects in any data structure
@@ -109,6 +124,19 @@ function createStore(href) {
         // Return primitives as is
         return value;
     };
+    /**
+     * Handles panel store updates (new multi-panel protocol)
+     */
+    const handlePanelUpdate = async (data) => {
+        const processedValue = await populate(data.value);
+        if (!data.path) {
+            // Empty path = full doc seed (sent on panel activation)
+            liveStore[data.update] = processedValue;
+            return;
+        }
+        const current = liveStore[data.update] ?? {};
+        liveStore[data.update] = setValueAtPath(data.path, current, processedValue);
+    };
     /**
      * Handles field value updates
      */
@@ -120,34 +148,36 @@ function createStore(href) {
         // Update the document
         doc = setValueAtPath(data.path, doc, processedValue);
     };
-    /**
-     * Handles focusing a specific field in the UI
-     */
-    const handleFocusField = (focusPath) => {
-        const element = document.querySelector(`[data-field="${focusPath}"]`);
-        if (element) {
-            const ringStyle = '0px 0px 0px 1px red';
-            // Scroll to the element
-            element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
-            // Add highlight style
-            element.style.boxShadow = ringStyle;
-            if (currentFocusedElement) {
-                currentFocusedElement.style.boxShadow = '';
-            }
-            currentFocusedElement = element;
-        }
-    };
-    /**
-     * Registers a callback for data changes
-     */
-    const onData = (callback) => {
-        callbacks.push(callback);
-    };
     // Return public facade
     return {
         beforeNavigate,
         onMessage,
-        onData,
+        get documentUpdateURI() {
+            const doc = page.data.doc;
+            if (!doc)
+                throw new Error('live.doc has not been set before accessing documentAPIUpdateURL');
+            let uri = `/${doc._type}`;
+            if (doc._prototype === 'collection')
+                uri += `/${doc.id}`;
+            const params = [];
+            if (doc.versionId)
+                params.push(`${PARAMS.VERSION_ID}=${doc.versionId}`);
+            if (doc.locale)
+                params.push(`${PARAMS.LOCALE}=${doc.locale}`);
+            if (params.length)
+                uri += `?${params.join('&')}`;
+            return uri;
+        },
+        getPanelValue: (update, path) => {
+            const entry = liveStore[update];
+            if (!entry) {
+                return undefined;
+            }
+            return getValueAtPath(path, entry);
+        },
+        get activePanelKey() {
+            return activePanelKey;
+        },
         get data() {
             return { doc };
         },

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

@@ -0,0 +1,11 @@
+export type ActivePanel = {
+    key: string;
+    update: string;
+    fieldPath: string;
+};
+export type LivePanelStore = {
+    readonly activePanel: ActivePanel | null;
+    readonly panelStack: ActivePanel[];
+};
+export declare function setLivePanelContext(store: LivePanelStore): LivePanelStore;
+export declare function getLivePanelContext(): LivePanelStore;

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

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('rime.live-panel');
+export function setLivePanelContext(store) {
+    return setContext(KEY, store);
+}
+export function getLivePanelContext() {
+    return getContext(KEY);
+}

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

@@ -51,13 +51,7 @@
   {/if}
 </AuthForm>
 
-<style>/**************************************/
-
-/* Font */
-
-/**************************************/
-
-p {
+<style>p {
     font-size: var(--rz-text-lg);
     font-variation-settings: 'wght' 600;
     font-weight: 600;

package/dist/panel/pages/collection/Collection.svelte

@@ -76,7 +76,9 @@
         {/snippet}
 
         {#snippet bottomLeft()}
-          <ButtonCreate size="sm" />
+          {#if collection.canCreate}
+            <ButtonCreate config={collection.config} size="sm" />
+          {/if}
           {#if collection.isUpload}
             <Separator />
             <Button