rimecms 0.26.4 → 0.26.6

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

@@ -59,9 +59,12 @@
 	// available from inside tiptap rendered components
 	// TODO try to pass it as a prop in a near future
 	const APIProxy = setAPIProxyContext(API_PROXY.TIPTAP);
+
+	// svelte-ignore state_referenced_locally
 	const url = extension.options.query
 		? apiUrl(extension.options.slug, extension.options.query)
 		: apiUrl(extension.options.slug);
+
 	const ressource = APIProxy.getRessource<{ docs: UploadDoc[] }>(url);
 	let docs = $state<UploadDoc[]>([]);
 
@@ -203,8 +206,13 @@
 	</Dialog.Content>
 </Dialog.Root>
 
-<style>
-	:global(.ProseMirror-selectednode .rz-richtext-media) {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+:global(.ProseMirror-selectednode .rz-richtext-media) {
 		.rz-richtext-media__media,
 		:global(button.rz-richtext-media__add) {
 			box-shadow:
@@ -216,15 +224,16 @@
 		}
 	}
 
-	.rz-richtext-media {
+.rz-richtext-media {
 		position: relative;
 	}
 
-	.rz-richtext-media__media {
+.rz-richtext-media__media {
 		border-radius: var(--rz-radius-lg);
 		overflow: hidden;
 	}
-	.rz-richtext-media__actions {
+
+.rz-richtext-media__actions {
 		position: absolute;
 		font-size: var(--rz-text-sm);
 		right: var(--rz-size-3);
@@ -251,7 +260,7 @@
 		}
 	}
 
-	.rz-richtext-media__legend {
+.rz-richtext-media__legend {
 		font-style: italic;
 		font-size: var(--rz-text-sm);
 		opacity: 0.5;

package/dist/fields/select/component/Select.svelte

@@ -11,13 +11,11 @@
 	const { path, config, form }: SelectFieldProps = $props();
 
 	let listHTMLElement: HTMLElement;
-	const validValues = config.options.map((o) => o.value);
 	let initialized = false;
-
+	let options = $derived(config.options);
+	const validValues = $derived(config.options.map((o) => o.value));
 	const field = $derived(form.useField<string | string[]>(path, config));
 
-	let options = $state(config.options);
-
 	let isFull = $derived.by(() => {
 		if (!field.value) return false;
 		const notManyAndOneSelected = !config.many && typeof field.value === 'string';

package/dist/fields/slug/component/Slug.svelte

@@ -5,7 +5,6 @@
 	import Button from '../../../panel/components/ui/button/button.svelte';
 	import { Input } from '../../../panel/components/ui/input/index.js';
 	import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
-	import { getValueAtPath } from '../../../util/object.js';
 	import { slugify } from '../../../util/string.js';
 	import { Hash } from '@lucide/svelte';
 	import type { SlugField } from '../index';
@@ -14,34 +13,25 @@
 	const { path, config, form }: Props = $props();
 
 	const field = $derived(form.useField(path, config));
+	let isFocused = false;
+	// svelte-ignore state_referenced_locally
 	const initialValue = form.getRawValue(path);
 	const initialEmpty = !initialValue;
-	let internalValue = $state(initialValue);
+	const slugifySource = $derived(config.slugify ? form.useField<string>(config.slugify) : null);
 
-	$effect(() => {
-		if (initialEmpty) {
-			generateFromField();
+	const slugifiedValue = $derived.by(() => {
+		if (slugifySource && slugifySource.value) {
+			return slugify(slugifySource.value);
 		}
+		return '';
 	});
 
 	$effect(() => {
-		if (internalValue !== field.value) {
-			field.value = internalValue;
+		if (!isFocused && initialEmpty && slugifiedValue && field.value !== slugifiedValue) {
+			field.value = slugifiedValue;
 		}
 	});
 
-	const generateFromField = () => {
-		if (config.slugify) {
-			const source = config.slugify in form.changes ? form.changes : form.values;
-			const fromValue = getValueAtPath<string>(config.slugify, source);
-			if (!fromValue) return;
-			const slugifiedValue = slugify(fromValue);
-			if (internalValue !== slugifiedValue) {
-				internalValue = slugifiedValue;
-			}
-		}
-	};
-
 	const onInput = (event: Event) => {
 		const inputElement = event.target as HTMLInputElement;
 		const inputValue = inputElement.value;
@@ -49,11 +39,11 @@
 		if (inputValue !== slugifiedValue) {
 			inputElement.value = slugifiedValue;
 		}
-		internalValue = inputElement.value;
+		field.value = inputElement.value;
 	};
 
-	const classNameCompact = config.layout === 'compact' ? 'rz-slug-field--compact' : '';
-	const classNames = `rz-slug-field ${classNameCompact || ''} ${config.className}`;
+	const classNameCompact = $derived(config.layout === 'compact' ? 'rz-slug-field--compact' : '');
+	const classNames = $derived(`rz-slug-field ${classNameCompact || ''} ${config.className}`);
 </script>
 
 <fieldset class={classNames} use:root={field}>
@@ -69,12 +59,14 @@
 			value={field.value}
 			name={path || config.name}
 			oninput={onInput}
+			onfocus={() => (isFocused = true)}
+			onblur={() => (isFocused = false)}
 		/>
 
 		{#if config.slugify}
 			<Button
 				disabled={!field.editable}
-				onclick={generateFromField}
+				onclick={() => (field.value = slugifiedValue)}
 				type="button"
 				size="sm"
 				variant="secondary"

package/dist/fields/tabs/component/Tabs.svelte

@@ -1,96 +1,96 @@
 <script lang="ts">
-	import { dev } from '$app/environment';
 	import RichText from '../../rich-text/component/RichText.svelte';
 	import { RichTextFieldBuilder } from '../../rich-text/index.js';
 	import RenderFields from '../../../panel/components/fields/RenderFields.svelte';
 	import * as Tabs from '../../../panel/components/ui/tabs/index.js';
 	import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
-	import Cookies from 'js-cookie';
 	import type { TabBuilder, TabsField } from '../index.js';
 
 	type Props = { config: TabsField; path: string; form: DocumentFormContext };
 
 	const { config, path: initialPath, form }: Props = $props();
 
-	const cookieKey = `rime.Tabs:${form.values.id || 'create'}:${initialPath}:${config.tabs.map((t) => t.name).join('-')}`;
-	let activeTabName = $state(Cookies.get(cookieKey) || config.tabs[0].name);
+	const storageActiveKey = $derived(`rime.Tabs:${form.values.id || 'create'}:${initialPath}`);
+	let errorTabs = $state<string[]>([]);
+	// Path to prepend to fields inside tabs
+	const prependPath = $derived(initialPath === '' ? '' : `${initialPath}.`);
+	// Generate unique IDs for each tab to use as data attributes for error handling.
+	const tabIds = $derived(
+		config.tabs.map((tab) => `${tab.name}-${new Date().getTime().toString()}`)
+	);
 
-	// Prevent localStorage opened tab to open when tab.live is false
-	$effect(() => {
-		if (form.isLive) {
-			const currentActiveTab = config.tabs.find((tab) => tab.name === activeTabName);
-			if (!currentActiveTab || currentActiveTab.raw.live === false) {
-				activeTabName = config.tabs[0].name;
+	// Retrieve active tab from localStorage, if not found use the first tab.
+	// If the stored active tab is not available in live mode, fallback to the first tab.
+	let activeTabName = $derived.by(() => {
+		let storedActiveTab = localStorage.getItem(storageActiveKey);
+		if (storedActiveTab && form.isLive) {
+			const activeTab = config.tabs.find((tab) => tab.name === storedActiveTab);
+			if (!activeTab || activeTab.raw.live === false) {
+				return config.tabs[0].name;
 			}
 		}
+		return storedActiveTab || config.tabs[0].name;
 	});
 
-	let tabErrors = $state<string[]>([]);
-	const tabIds = $derived(
-		config.tabs.map((tab) => `${tab.name}-${new Date().getTime().toString()}`)
-	);
+	// On live mode only show tabs with live=true
+	function isTabVisible(tab: TabBuilder) {
+		return form.isLive ? tab.raw.live === true : true;
+	}
 
-	function onActiveTabChange(value: string | undefined): void {
-		value = value || config.tabs[0].name;
-		Cookies.set(cookieKey, value, {
-			sameSite: 'strict',
-			secure: !dev
-		});
+	function onActiveTabChange(value: string): void {
+		localStorage.setItem(storageActiveKey, value);
 		activeTabName = value;
 	}
 
 	// Emphasize tabs that includes errors
 	$effect(() => {
 		if (form.errors.length) {
-			const errorsTabs = document.querySelectorAll<HTMLElement>(
-				'.rz-tabs-content:has(*[data-error])'
-			);
+			const selector = '.rz-tabs-content:has(*[data-error])';
+			const errorsTabs = document.querySelectorAll<HTMLElement>(selector);
 			if (errorsTabs) {
-				tabErrors = Array.from(errorsTabs)
-					.map((el: HTMLElement) => (el.dataset.tabId ? el.dataset.tabId : false))
-					.filter((entry) => typeof entry === 'string');
+				errorTabs = Array.from(errorsTabs)
+					.map((el) => el.dataset.tabId)
+					.filter((str) => typeof str === 'string');
 			}
 		} else {
-			tabErrors = [];
+			errorTabs = [];
 		}
 	});
-
-	const path = $derived(initialPath === '' ? '' : `${initialPath}.`);
-
-	function isTabVisible(tab: TabBuilder) {
-		return form.isLive ? tab.raw.live === true : true;
-	}
 </script>
 
 <div class="rz-tabs">
 	<Tabs.Root onValueChange={onActiveTabChange} value={activeTabName}>
 		<Tabs.List>
-			{#each config.tabs.filter(isTabVisible) as tab, index (index)}
-				<Tabs.Trigger
-					data-error={tabErrors.includes(tabIds[index]) ? 'true' : null}
-					value={tab.name}
-				>
-					{tab.raw.label || tab.name}
-				</Tabs.Trigger>
+			{#each config.tabs as tab, index (index)}
+				{#if isTabVisible(tab)}
+					<Tabs.Trigger
+						data-error={errorTabs.includes(tabIds[index]) ? 'true' : null}
+						value={tab.name}
+					>
+						{tab.raw.label || tab.name}
+					</Tabs.Trigger>
+				{/if}
 			{/each}
 		</Tabs.List>
 
-		{#each config.tabs.filter(isTabVisible) as tab, index (index)}
-			<Tabs.Content data-tab-id={tabIds[index]} value={tab.name}>
-				<!-- If the first field is a rich text field, render it directly -->
-				{#if tab.fields.length === 1 && tab.raw.fields[0].type === 'richText'}
-					{@const firstField = tab.raw.fields[0] as RichTextFieldBuilder}
-					<RichText
-						standAlone={true}
-						path="{path}{tab.name}.{firstField.name}"
-						config={firstField.raw}
-						{form}
-					/>
-				{:else}
-					<!-- Otherwise, render the fields -->
-					<RenderFields fields={tab.raw.fields} path="{path}{tab.name}" {form} />
-				{/if}
-			</Tabs.Content>
+		{#each config.tabs as tab, index (index)}
+			{#if isTabVisible(tab)}
+				<Tabs.Content data-tab-id={tabIds[index]} value={tab.name}>
+					<!-- If the first and only field is a rich text field, render it directly -->
+					{#if tab.fields.length === 1 && tab.raw.fields[0].type === 'richText'}
+						{@const firstField = tab.raw.fields[0] as RichTextFieldBuilder}
+						<RichText
+							standAlone={true}
+							path="{prependPath}{tab.name}.{firstField.name}"
+							config={firstField.raw}
+							{form}
+						/>
+					{:else}
+						<!-- Otherwise, render the fields -->
+						<RenderFields fields={tab.raw.fields} path="{prependPath}{tab.name}" {form} />
+					{/if}
+				</Tabs.Content>
+			{/if}
 		{/each}
 	</Tabs.Root>
 </div>

package/dist/fields/toggle/component/Toggle.svelte

@@ -7,7 +7,7 @@
 
 	const { path, config, form }: ToggleProps = $props();
 	const field = $derived(form.useField<boolean>(path, config));
-	const inputId = slugify(`${form.key}-${path}`);
+	const inputId = $derived(slugify(`${form.key}-${path}`));
 
 	const onCheckedChange = (bool: boolean) => {
 		field.value = bool;

package/dist/fields/tree/component/Tree.svelte

@@ -117,7 +117,12 @@
 	{/key}
 
 	<div class="rz-tree__actions">
-		<AddItemButton addItem={add} class="rz-tree__add-button" size={nested ? 'sm' : 'default'} fields={config.fields}>
+		<AddItemButton
+			addItem={add}
+			class="rz-tree__add-button"
+			size={nested ? 'sm' : 'default'}
+			fields={config.fields}
+		>
 			{config.addItemLabel}
 		</AddItemButton>
 

package/dist/fields/tree/component/TreeBlock.svelte

@@ -2,7 +2,6 @@
 	import type { TreeBlock } from '../../../core/types/doc.js';
 	import RenderFields from '../../../panel/components/fields/RenderFields.svelte';
 	import { useOnce } from '../../../panel/util/once.svelte.js';
-	import { snapshot } from '../../../util/state.js';
 	import { GripVertical } from '@lucide/svelte';
 	import { extractFieldName } from '../util.js';
 	import TreeBlockComp from './TreeBlock.svelte';
@@ -11,7 +10,6 @@
 
 	const { config, treeKey, treeState, form, sorting = false, path }: TreeBlockProps = $props();
 
-	const initialPath = $state(snapshot(path));
 	const depth = $derived(
 		path
 			.replace(`${treeState.path}.`, '')
@@ -66,11 +64,12 @@
 		return `${position} - ${config.label || config.name}`;
 	};
 
-	$effect(() => {
-		if (initialPath !== path) {
-			form.setValue(path, itemValue);
-		}
-	});
+	// $effect(() => {
+	// 	if (initialPath !== path) {
+	// 		form.setValue(path, itemValue);
+	// 		initialPath = path;
+	// 	}
+	// });
 </script>
 
 <div
@@ -119,26 +118,31 @@
 	{/if}
 </div>
 
-<style>
-	.rz-tree-item {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+.rz-tree-item {
 		position: relative;
 	}
 
-	.rz-tree-item__grip {
+.rz-tree-item__grip {
 		cursor: grab;
 		position: absolute;
 		top: 1rem;
 		left: -1rem;
 	}
 
-	.rz-tree-item__header:hover {
+.rz-tree-item__header:hover {
 		> :global(.rz-tree-item-actions) {
 			opacity: 1;
 			pointer-events: all;
 		}
 	}
 
-	.rz-tree-item__header {
+.rz-tree-item__header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -151,7 +155,7 @@
 		width: 100%;
 	}
 
-	.rz-tree-item__content--closed {
+.rz-tree-item__content--closed {
 		.rz-tree-item__header {
 			border-radius: var(--rz-radius-md);
 		}
@@ -162,20 +166,20 @@
 		}
 	}
 
-	.rz-tree-item__content + .rz-tree-item__list-placeholder,
+.rz-tree-item__content + .rz-tree-item__list-placeholder,
 	.rz-tree-item__content + .rz-tree__list {
 		margin-top: 1rem;
 		min-height: 5px;
 	}
 
-	.rz-tree-item__title {
+.rz-tree-item__title {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		gap: var(--rz-size-2);
 	}
 
-	.rz-tree-item__fields {
+.rz-tree-item__fields {
 		--rz-fields-padding: var(--rz-size-4);
 		background-color: var(--rz-collapse-fields-content-bg);
 		border: var(--rz-border);
@@ -186,21 +190,21 @@
 		flex: 1;
 	}
 
-	.rz-tree-item__fields--hidden {
+.rz-tree-item__fields--hidden {
 		display: none;
 	}
 
-	.rz-tree-item[data-sorting='true'] .rz-tree-item__grip {
+.rz-tree-item[data-sorting='true'] .rz-tree-item__grip {
 		display: none;
 	}
 
-	.rz-tree-item__content--closed:has(:global(.rz-field-error)) {
+.rz-tree-item__content--closed:has(:global(.rz-field-error)) {
 		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));
 	}
 
-	:global(.rz-tree-item-actions) {
+:global(.rz-tree-item-actions) {
 		opacity: 0;
 		pointer-events: none;
 	}

package/dist/panel/components/Root.svelte

@@ -24,16 +24,14 @@
 	let isCollapsed = $state(false);
 	let localeCollapsed = $state<string | null>(null);
 
+	// svelte-ignore state_referenced_locally
 	setConfigContext(config);
+	// svelte-ignore state_referenced_locally
 	setUserContext(user);
 	createContext('title', '[untitled]');
 	setAPIProxyContext(API_PROXY.ROOT);
 
-	const locale = setLocaleContext(initialeLocale);
-
-	$effect(() => {
-		locale.code = initialeLocale;
-	});
+	const locale = $derived(setLocaleContext(initialeLocale));
 
 	function onResize() {
 		if (window.innerWidth < 1024) {

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

@@ -18,14 +18,14 @@
 	};
 	let { folder, collection, open = $bindable() }: Props = $props();
 
+	setAPIProxyContext(API_PROXY.DOCUMENT);
+	let formElement = $state<HTMLFormElement>();
 	const user = getUserContext();
 	const configCtx = getConfigContext();
+	// svelte-ignore state_referenced_locally
 	const config = configCtx.getCollection(withDirectoriesSuffix(collection.slug));
-	let formElement = $state<HTMLFormElement>();
-	setAPIProxyContext(API_PROXY.DOCUMENT);
-
+	// svelte-ignore state_referenced_locally
 	const form = setDocumentFormContext({
-		element: () => formElement,
 		initial: folder,
 		config,
 		readOnly: !config.access.update(user.attributes, { id: folder.id }),
@@ -55,7 +55,7 @@
 <Dialog.Root bind:open>
 	<Dialog.Content>
 		{#snippet child({ props })}
-			<form use:form.enhance action={form.buildPanelActionUrl()} bind:this={formElement} {...props}>
+			<form use:form.enhance bind:this={formElement} {...props}>
 				<RenderFields {form} fields={config.fields} />
 				<Dialog.Footer --rz-justify-content="space-between">
 					<Button data-submit disabled={!form.canSubmit} type="submit">{t__('common.save')}</Button>

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

@@ -16,20 +16,13 @@
 	type Props = { collection: CollectionContext; open: boolean };
 	let { collection, open = $bindable() }: Props = $props();
 
-	const configCtx = getConfigContext();
-	const directoriesConfig = configCtx.getCollection(withDirectoriesSuffix(collection.config.slug));
-
 	setAPIProxyContext(API_PROXY.DOCUMENT);
 	let formElement = $state<HTMLFormElement>();
-
-	async function beforeRedirect(data?: FormSuccessData) {
-		open = false;
-		invalidateAll();
-		return false;
-	}
-
+	const configCtx = getConfigContext();
+	// svelte-ignore state_referenced_locally
+	const directoriesConfig = configCtx.getCollection(withDirectoriesSuffix(collection.config.slug));
+	// svelte-ignore state_referenced_locally
 	const form = setDocumentFormContext({
-		element: () => formElement,
 		initial: {
 			parent: collection.upload.currentPath
 		},
@@ -39,29 +32,18 @@
 		beforeRedirect: beforeRedirect
 	});
 
-	function handleKeyDown(event: KeyboardEvent) {
-		if (!open) return;
-		if (!formElement) throw Error('formElement is not defined');
-		if ((event.ctrlKey || event.metaKey) && event.key === 's') {
-			event.preventDefault();
-			if (!form.canSubmit) return;
-			const saveButton = formElement.querySelector('button[data-submit]');
-			if (saveButton) {
-				formElement.requestSubmit(saveButton as HTMLButtonElement);
-			} else {
-				// Fallback to default submit if no specific button found
-				formElement.requestSubmit();
-			}
-		}
+	// Prevent redirection after directory creation
+	async function beforeRedirect(data?: FormSuccessData) {
+		open = false;
+		invalidateAll();
+		return false;
 	}
 </script>
 
-<svelte:window onkeydown={handleKeyDown} />
-
 <Dialog.Root bind:open>
 	<Dialog.Content class="rz-status-dialog">
 		{#snippet child({ props })}
-			<form use:form.enhance action={form.buildPanelActionUrl()} bind:this={formElement} {...props}>
+			<form use:form.enhance bind:this={formElement} {...props}>
 				<Dialog.Header>{t__('common.create_folder')}</Dialog.Header>
 				<RenderFields {form} fields={directoriesConfig.fields} />
 				<Dialog.Footer --rz-justify-content="space-between">

package/dist/panel/components/sections/collection/grid/grid-item/GridItem.svelte

@@ -6,14 +6,13 @@
 	import type { GenericDoc } from '../../../../../../core/types/doc';
 	import CardDocument from '../../../../ui/card-document/card-document.svelte';
 	import Checkbox from '../../../../ui/checkbox/checkbox.svelte';
-	import { type CollectionContext } from '../../../../../context/collection.svelte.js';
+	import { getCollectionContext } from '../../../../../context/collection.svelte.js';
 	import { panelUrl } from '../../../../../util/url.js';
-	import { getContext } from 'svelte';
 
 	type Props = { checked: boolean; doc: GenericDoc; draggable?: 'true' };
 	const { checked, doc, draggable }: Props = $props();
 
-	const collection = getContext<CollectionContext>('rime.collectionList');
+	const collection = getCollectionContext('list');
 
 	const isUploadCollection = $derived(isUploadConfig(collection.config));
 

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

@@ -3,14 +3,13 @@
 	import { PARAMS } from '../../../../../core/constant.js';
 	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 { CirclePlus } from '@lucide/svelte';
-	import { getContext } from 'svelte';
 
 	type ButtonSize = 'sm' | 'default';
 	const { size = 'default' }: { size?: ButtonSize } = $props();
-	const collection = getContext<CollectionContext>('rime.collectionList');
 
+	const collection = getCollectionContext('list');
 	const isSmallSize = $derived(size === 'sm');
 	const buttonVariant = $derived(isSmallSize ? 'ghost' : 'default');
 	const buttonSize = $derived(isSmallSize ? 'icon-sm' : 'default');

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

@@ -1,14 +1,18 @@
 <script lang="ts">
 	import Button from '../../../ui/button/button.svelte';
-	import { DISPLAY_MODE, type CollectionContext, type DisplayMode } from '../../../../context/collection.svelte.js';
+	import {
+		DISPLAY_MODE,
+		getCollectionContext,
+		type DisplayMode
+	} from '../../../../context/collection.svelte.js';
 	import { LayoutGrid, List, TextQuote } from '@lucide/svelte';
-	import { getContext } from 'svelte';
-
-	const collection = getContext<CollectionContext>('rime.collectionList');
 
+	const collection = getCollectionContext('list');
 	const listIconClass = $derived(collection.isList() ? 'rz-header-display-mode__icon--active' : '');
 	const gridIconClass = $derived(collection.isGrid() ? 'rz-header-display-mode__icon--active' : '');
-	const nestedIconClass = $derived(collection.isNested() ? 'rz-header-display-mode__icon--active' : '');
+	const nestedIconClass = $derived(
+		collection.isNested() ? 'rz-header-display-mode__icon--active' : ''
+	);
 
 	const setVariant = (mode: DisplayMode) => (mode === collection.display ? 'secondary' : 'ghost');
 	const isActive = (mode: DisplayMode) => mode === collection.display;

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

@@ -1,12 +1,10 @@
 <script lang="ts">
-	import { type CollectionContext } from '../../../../context/collection.svelte.js';
-	import { getContext } from 'svelte';
+	import { getCollectionContext } from '../../../../context/collection.svelte.js';
 	import DisplayMode from './DisplayMode.svelte';
 	import SelectUI from './SelectUI.svelte';
 	import Separator from './Separator.svelte';
 
-	const collection = getContext<CollectionContext>('rime.collectionList');
-
+	const collection = getCollectionContext('list');
 	const showSelectUI = $derived(!collection.isNested());
 	const showDisplayMode = $derived(collection.isUpload || collection.config.nested);
 </script>