rimecms 0.26.5 → 0.26.6

package/dist/panel/components/sections/collection/header/SearchInput.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
 	import { t__ } from '../../../../../core/i18n/index.js';
 	import Input from '../../../ui/input/input.svelte';
-	import type { CollectionContext } from '../../../../context/collection.svelte.js';
+	import { getCollectionContext } from '../../../../context/collection.svelte.js';
 	import { Search } from '@lucide/svelte';
-	import { getContext } from 'svelte';
 
-	const collection = getContext<CollectionContext>('rime.collectionList');
+	const collection = getCollectionContext('list');
 	let searchValue = $state('');
 
 	$effect(() => {

package/dist/panel/components/sections/collection/header/SelectUI.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
 	import { t__ } from '../../../../../core/i18n/index.js';
 	import Button from '../../../ui/button/button.svelte';
-	import type { CollectionContext } from '../../../../context/collection.svelte.js';
+	import { getCollectionContext } from '../../../../context/collection.svelte.js';
 	import { ListChecks, SquareCheck, SquareMinus, Trash } from '@lucide/svelte';
-	import { getContext } from 'svelte';
-
-	const collection = getContext<CollectionContext>('rime.collectionList');
 
+	const collection = getCollectionContext('list');
 	const selectedCount = $derived(collection.selected.length);
 	const pluralSuffix = $derived(selectedCount > 1 ? 's' : '');
 	const activeListClass = $derived(collection.selectMode ? 'rz-header-select__icon--active' : '');

package/dist/panel/components/sections/collection/list/header/Header.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
+	import type { FormField } from '../../../../../../fields/types.js';
+	import { getCollectionContext } from '../../../../../context/collection.svelte.js';
 	import { capitalize } from '../../../../../../util/string.js';
 	import { ChevronDown, ChevronUp } from '@lucide/svelte';
-	import type { CollectionContext } from '../../../../../context/collection.svelte.js';
-	import type { FormField } from '../../../../../../fields/types.js';
-	import { getContext } from 'svelte';
 
 	type TableColumn = Partial<FormField> & { name: string; label?: string };
 
-	const collection = getContext<CollectionContext>('rime.collectionList');
+	const collection = getCollectionContext('list');
 	let gridTemplateColumn = $state('grid-template-columns: 2fr repeat(1, minmax(0, 1fr));');
 
 	$effect(() => {
@@ -55,8 +54,13 @@
 	{@render sortableColumnHeader({ name: 'updatedAt' })}
 </div>
 
-<style>
-	.rz-list-header {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+.rz-list-header {
 		display: grid;
 		height: var(--rz-size-14);
 		/* width: calc(100% - var(--rz-size-10)); */
@@ -66,14 +70,14 @@
 		font-size: var(--rz-text-sm);
 	}
 
-	.rz-list-header__column {
+.rz-list-header__column {
 		color: hsl(var(--rz-ground-2) / 1);
 		display: flex;
 		align-items: center;
 		gap: var(--rz-size-1);
 	}
 
-	.rz-list-header__sort-button {
+.rz-list-header__sort-button {
 		color: hsl(var(--rz-ground-2) / 1);
 		display: flex;
 		align-items: center;

package/dist/panel/components/sections/collection/list/row/Row.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import type { GenericDoc } from '../../../../../../core/types/doc.js';
 	import Checkbox from '../../../../ui/checkbox/checkbox.svelte';
-	import type { CollectionContext } from '../../../../../context/collection.svelte.js';
+	import { getCollectionContext } from '../../../../../context/collection.svelte.js';
 	import { getLocaleContext } from '../../../../../context/locale.svelte';
 	import { getValueAtPath } from '../../../../../../util/object';
-	import { getContext } from 'svelte';
 	import StatusDot from '../../StatusDot.svelte';
 	import UploadThumbCell from '../../upload-thumb-cell/UploadThumbCell.svelte';
 
@@ -14,8 +13,8 @@
 	};
 
 	const { checked, doc }: Props = $props();
-	const collection = getContext<CollectionContext>('rime.collectionList');
 
+	const collection = getCollectionContext('list');
 	const locale = getLocaleContext();
 
 	let gridTemplateColumn = $state('grid-template-columns: 2fr repeat(1, minmax(0, 1fr));');
@@ -77,8 +76,13 @@
 	</div>
 </div>
 
-<style>
-	.rz-list-row {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+.rz-list-row {
 		display: grid;
 		height: var(--rz-row-height);
 		align-items: center;
@@ -103,7 +107,7 @@
 		}
 	}
 
-	.rz-list-row__main {
+.rz-list-row__main {
 		display: flex;
 		align-items: center;
 		gap: var(--rz-size-3);
@@ -111,24 +115,25 @@
 		padding-right: var(--rz-size-5);
 	}
 
-	.rz-list-row__link {
+.rz-list-row__link {
 		display: flex;
 		align-items: center;
 		gap: var(--rz-size-4);
 	}
 
-	.rz-list-row__title {
+.rz-list-row__title {
 		display: -webkit-box;
 		-webkit-line-clamp: 1;
 		-webkit-box-orient: vertical;
 		overflow: hidden;
 		word-break: break-all;
 	}
-	label.rz-list-row__title {
+
+label.rz-list-row__title {
 		cursor: pointer;
 	}
 
-	.rz-list-row__cell {
+.rz-list-row__cell {
 		color: hsl(var(--rz-foreground) / 0.6);
 	}
 </style>

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

@@ -25,14 +25,14 @@
 			{
 				method: 'PATCH',
 				body: JSON.stringify({
-					status: internalValue
+					status: status
 				})
 			}
 		)
 			.then((r) => {
 				if (r.status === 200) {
 					toast.success(t__('common.doc_updated'));
-					form.setValue('status', internalValue);
+					form.setValue('status', status);
 					dialogOpen = false;
 					invalidateAll();
 				} else {
@@ -44,8 +44,7 @@
 			});
 	}
 
-	let initialValue = $state.snapshot(form.values.status);
-	let internalValue = $state(initialValue);
+	let status = $derived(form.values.status);
 </script>
 
 <Dialog.Root bind:open={dialogOpen}>
@@ -58,7 +57,7 @@
 		{/snippet}
 	</Dialog.Trigger>
 	<Dialog.Content class="rz-status-dialog">
-		<Radio.Root bind:value={internalValue}>
+		<Radio.Root bind:value={status}>
 			{#each statusList as status, index (index)}
 				<div class="rz-radio__option">
 					<Radio.Item id="document.{status}" value={status} />
@@ -76,19 +75,26 @@
 	</Dialog.Content>
 </Dialog.Root>
 
-<style>
-	.rz-radio__option {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+.rz-radio__option {
 		display: flex;
 		gap: var(--rz-size-3);
 		padding: var(--rz-size-3);
 		border: var(--rz-border);
 	}
-	:global {
+
+:global {
 		.rz-dialog-footer button {
 			flex: 1;
 		}
 	}
-	p {
+
+p {
 		font-variation-settings: 'wght' 400;
 		font-weight: 400;
 	}

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

@@ -46,12 +46,14 @@
 	}: Props = $props();
 
 	const { getDocumentConfig } = getConfigContext();
-	const config = getDocumentConfig({
-		prototype: initial._prototype,
-		slug: initial._type
-	});
 
 	const user = getUserContext();
+	const config = $derived(
+		getDocumentConfig({
+			prototype: initial._prototype,
+			slug: initial._type
+		})
+	);
 
 	let formElement = $state<HTMLFormElement>();
 	// This is used to intercept navigation when there are unsaved changes in the form
@@ -59,6 +61,12 @@
 	let interceptedLeave = $state<{ url: string } | null>(null);
 	// This is used to prevent the beforeNavigate from triggering when we programmatically navigate
 	let isRedirect = $state(false);
+	// Dialog for unsaved changes confirmation
+	const isConfirmLeaveOpen = $derived(!!interceptedLeave);
+	const locale = getLocaleContext();
+	const liveEditing = $derived(!!onDataChange);
+	// This is used to show the API key after creating a document in a collection with API key auth
+	let apiKey = $state<string | null>('');
 
 	// Intercept navigation when there are unsaved changes in the form
 	beforeNavigate(async ({ cancel, to }) => {
@@ -71,8 +79,8 @@
 		interceptedLeave = { url: to.url.href };
 	});
 
+	// svelte-ignore state_referenced_locally
 	const form = setDocumentFormContext({
-		element: () => formElement,
 		initial,
 		config,
 		readOnly,
@@ -83,10 +91,6 @@
 		beforeRedirect: beforeRedirect
 	});
 
-	const isConfirmLeaveOpen = $derived(!!interceptedLeave);
-	const locale = getLocaleContext();
-	const liveEditing = !!onDataChange;
-
 	function handleKeyDown(event: KeyboardEvent) {
 		if (!formElement) throw Error('formElement is not defined');
 		if ((event.ctrlKey || event.metaKey) && event.key === 's') {
@@ -102,8 +106,6 @@
 		}
 	}
 
-	let apiKey = $state<string | null>('');
-
 	async function beforeRedirect(data?: FormSuccessData) {
 		const IS_API_AUTH = config.type === 'collection' && config.auth?.type === 'apiKey';
 		if (IS_API_AUTH) {
@@ -137,7 +139,6 @@
 	class="rz-document {className}"
 	bind:this={formElement}
 	use:form.enhance
-	action={form.buildPanelActionUrl()}
 	enctype="multipart/form-data"
 	method="post"
 >

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

@@ -20,7 +20,7 @@
 	};
 	const { form, onClose, config }: Props = $props();
 
-	const onCloseIsDefined = !!onClose;
+	const onCloseIsDefined = $derived(!!onClose);
 	const buttonLabel = $derived(form.values.id ? t__('common.save') : t__('common.create'));
 
 	function buildDocumentURL() {

package/dist/panel/components/sections/document/upload-header/UploadHeader.svelte

@@ -20,8 +20,8 @@
 	let file = $state<File | null>(null);
 	let isValidFile = $state(false);
 
-	const hasAccept = 'accept' in form.config;
-	const allowedMimeTypes = accept || [];
+	const hasAccept = $derived('accept' in form.config);
+	const allowedMimeTypes = $derived(accept || []);
 
 	const deleteFile = () => {
 		preview = null;

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

@@ -36,13 +36,14 @@
 	}
 
 	setAPIProxyContext(API_PROXY.DOCUMENT);
+	// svelte-ignore state_referenced_locally
 	setConfigContext(config);
+	// svelte-ignore state_referenced_locally
 	setUserContext(user);
 	createContext('title', '[untitled]');
-	const locale = setLocaleContext(initialeLocale);
 
 	$effect(() => {
-		locale.code = initialeLocale;
+		setLocaleContext(initialeLocale);
 	});
 </script>
 

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

@@ -15,8 +15,9 @@
 
 	const config = getConfigContext();
 
-	const RouteIcon =
-		typeof route.icon === 'function' ? route.icon : config.raw.icons[route.icon] || File;
+	const RouteIcon = $derived(
+		typeof route.icon === 'function' ? route.icon : config.raw.icons[route.icon] || File
+	);
 
 	let pathname = page.url.pathname;
 

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

@@ -9,7 +9,7 @@ export declare const DISPLAY_MODE: {
     readonly GRID: "display_grid";
     readonly NESTED: "display_nested";
 };
-export declare function setCollectionContext(args: Args): {
+export declare function setCollectionContext(key: string, args: Args): {
     readonly stamp: number;
     readonly title: string;
     readonly hasDraft: boolean | undefined;
@@ -129,6 +129,5 @@ type Args<T extends GenericDoc = GenericDoc> = {
         currentPath?: `root${string}`;
         parentDirectory?: Directory;
     };
-    key?: string;
 };
 export {};

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

@@ -434,9 +434,9 @@ function createCollectionStore(args) {
     };
 }
 const COLLECTION_KEY = 'rime.collection';
-export function setCollectionContext(args) {
+export function setCollectionContext(key, args) {
     const store = createCollectionStore(args);
-    return setContext(`${COLLECTION_KEY}.${args.key || 'root'}`, store);
+    return setContext(`${COLLECTION_KEY}.${key}`, store);
 }
 export function getCollectionContext(key = 'root') {
     return getContext(`${COLLECTION_KEY}.${key}`);

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

@@ -6,7 +6,7 @@ export declare function setDocumentFormContext<T extends WithOptional<GenericDoc
     key: string;
     setValue: (path: string, value: any) => void;
     getRawValue: <T_1>(path: string) => NonNullable<T_1> | null;
-    enhance: (formElement: HTMLFormElement) => {
+    enhance: (node: HTMLFormElement) => {
         destroy(): void;
     };
     useField: <TValue>(path: string, config?: SimplerField<FormField>) => {
@@ -75,7 +75,7 @@ export declare function getDocumentFormContext<T extends WithOptional<GenericDoc
     key: string;
     setValue: (path: string, value: any) => void;
     getRawValue: <T_1>(path: string) => NonNullable<T_1> | null;
-    enhance: (formElement: HTMLFormElement) => {
+    enhance: (node: HTMLFormElement) => {
         destroy(): void;
     };
     useField: <TValue>(path: string, config?: SimplerField<FormField>) => {
@@ -149,7 +149,6 @@ export type FormSuccessData = {
     message?: string;
 };
 type Args<T> = {
-    element: () => HTMLFormElement | undefined;
     beforeSubmit?: (data: Dic) => Promise<Dic>;
     beforeRedirect?: (data?: FormSuccessData) => Promise<boolean>;
     afterSuccess?: (doc?: T) => void;

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

@@ -1,5 +1,4 @@
 import { applyAction, deserialize } from '$app/forms';
-import { invalidateAll } from '$app/navigation';
 import { page } from '$app/state';
 import { apiUrl } from '../../core/api/index.js';
 import { compileDocumentConfig } from '../../core/config/shared/compile.js';
@@ -24,15 +23,16 @@ import { getCollectionContext } from './collection.svelte.js';
 import { setErrorsContext } from './errors.svelte.js';
 import { getLocaleContext } from './locale.svelte.js';
 import { getUserContext } from './user.svelte.js';
-function createDocumentFormState({ initial, element, config, readOnly, key, onNestedDocumentCreated, afterSuccess, onDataChange, beforeSubmit, beforeRedirect, onFieldFocus }) {
+function createDocumentFormState({ initial, config, readOnly, key, onNestedDocumentCreated, afterSuccess, onDataChange, beforeSubmit, beforeRedirect, onFieldFocus }) {
     //
     let initialDoc = $state(initial);
     let doc = $state(initial);
+    let formElement = $state();
     const documentConfig = compileDocumentConfig(config);
     const changes = $derived(diff(initialDoc, doc));
     let isDisabled = $state(readOnly);
     let processing = $state(false);
-    const operation = doc.id ? 'update' : 'create';
+    const operation = $derived(doc.id ? 'update' : 'create');
     const user = getUserContext();
     const errors = setErrorsContext(key);
     const isCollection = documentConfig.type === 'collection';
@@ -506,18 +506,14 @@ function createDocumentFormState({ initial, element, config, readOnly, key, onNe
                 }
                 return applyAction({ type: 'redirect', location: redirect, status: 301 });
             }
-            // Assign document
+            // Assign documents returned from the server to the form state
             doc = (data?.document || doc);
+            initialDoc = doc;
+            // Invalidate all queries to ensure data consistency across the app
+            apiProxy.invalidateAll();
             toast.success(message);
-            if (nestedLevel === 0) {
-                await invalidateAll();
-                initialDoc = doc;
-            }
-            else {
-                apiProxy.invalidateAll();
-                // Do not redirect on creation if it's a nested form
-                // the form will auto close and we are back to the parent
-                // Form so no need to assign the returned doc
+            // Callbacks
+            if (nestedLevel !== 0) {
                 if (onNestedDocumentCreated)
                     onNestedDocumentCreated(doc);
             }
@@ -546,15 +542,19 @@ function createDocumentFormState({ initial, element, config, readOnly, key, onNe
         }
         processing = false;
     };
-    const enhance = (formElement) => {
+    const enhance = (node) => {
+        // Assign form element
+        formElement = node;
+        // Set status field if submitter has a data-status attribute
         const setStatus = (submitter) => {
             const status = !!submitter?.dataset.status;
             if (status && documentConfig.versions && documentConfig.versions.draft) {
                 setValue('status', submitter?.dataset.status);
             }
         };
+        // Build full action URL with query params based on submitter attributes (draft, versionId)
         const enhanceAction = (submitter) => {
-            let action = formElement.action;
+            let action = buildPanelActionUrl();
             const draft = !!submitter?.dataset.draft;
             if (draft) {
                 action += `&draft=true`;
@@ -571,10 +571,10 @@ function createDocumentFormState({ initial, element, config, readOnly, key, onNe
             setStatus(event.submitter);
             submit(enhanceAction(event.submitter));
         };
-        formElement.addEventListener('submit', listener);
+        node.addEventListener('submit', listener);
         return {
             destroy() {
-                formElement.removeEventListener('submit', listener);
+                node.removeEventListener('submit', listener);
             }
         };
     };
@@ -646,10 +646,9 @@ function createDocumentFormState({ initial, element, config, readOnly, key, onNe
             isDisabled = bool;
         },
         get element() {
-            const htmlFormElement = element();
-            if (!htmlFormElement)
+            if (!formElement)
                 throw new Error('form element is not defined');
-            return htmlFormElement;
+            return formElement;
         },
         get canSubmit() {
             return canSubmit;

package/dist/panel/pages/auth/sign-in/SignIn.svelte

@@ -20,6 +20,7 @@
 	};
 	const { data }: Props = $props();
 
+	// svelte-ignore state_referenced_locally
 	const context = setFormContext(data.form, 'login');
 
 	$effect(() => {

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

@@ -18,7 +18,7 @@
 	import { setCollectionContext } from '../../context/collection.svelte.js';
 	import { getConfigContext } from '../../context/config.svelte.js';
 	import { CopyPlus } from '@lucide/svelte';
-	import { getContext, setContext } from 'svelte';
+	import { getContext } from 'svelte';
 
 	type Props = {
 		slug: string;
@@ -36,18 +36,17 @@
 
 	const { data, slug }: Props = $props();
 	const config = getConfigContext();
-	const collectionConfig = config.getCollection(slug);
+	const collectionConfig = $derived(config.getCollection(slug));
 	let bulkDialogOpen = $state(false);
 
-	const collection = setCollectionContext({
-		initial: data.docs,
-		config: collectionConfig,
-		canCreate: data.canCreate,
-		upload: data.upload,
-		key: slug
-	});
-
-	setContext('rime.collectionList', collection);
+	const collection = $derived(
+		setCollectionContext('list', {
+			initial: data.docs,
+			config: collectionConfig,
+			canCreate: data.canCreate,
+			upload: data.upload
+		})
+	);
 
 	$effect(() => {
 		collection.upload = {
@@ -62,7 +61,10 @@
 	});
 
 	const titleContext = getContext<{ value: string }>('title');
-	titleContext.value = collection.config.label.plural;
+
+	$effect(() => {
+		titleContext.value = collection.config.label.plural;
+	});
 </script>
 
 {#if data.status === 200}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "rimecms",
-	"version": "0.26.5",
+	"version": "0.26.6",
 	"homepage": "https://github.com/bienbiendev/rime",
 	"scripts": {
 		"dev": "vite dev",
@@ -221,7 +221,7 @@
 		"paneforge": "^0.0.6",
 		"polka": "^0.5.2",
 		"qs": "^6.14.0",
-		"runed": "^0.23.4",
+		"runed": "^0.37.1",
 		"sharp": "^0.34.0",
 		"sortablejs": "^1.15.6",
 		"svelte-sonner": "^1.0.5"