includio-cms 0.0.66 → 0.0.68

package/dist/admin/client/entry/entry-form.svelte

@@ -4,7 +4,7 @@
 	import type { SuperForm } from 'sveltekit-superforms';
 
 	type Props = {
-		form: SuperForm<any>;
+		form: SuperForm<Record<string, unknown>>;
 		entry: RawEntry;
 		focusedPath?: string | null;
 		onPathSelect?: (path: string) => void;

package/dist/admin/client/entry/entry-form.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { RawEntry } from '../../../types/entries.js';
 import type { SuperForm } from 'sveltekit-superforms';
 type Props = {
-    form: SuperForm<any>;
+    form: SuperForm<Record<string, unknown>>;
     entry: RawEntry;
     focusedPath?: string | null;
     onPathSelect?: (path: string) => void;

package/dist/admin/client/entry/entry-header.svelte

@@ -7,8 +7,6 @@
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import StatusBadge from './header/status-badge.svelte';
 	import SaveIndicator from './header/save-indicator.svelte';
-	import PublishPanel from './header/publish-panel.svelte';
-	import VersionHistorySheet from './header/version-history-sheet.svelte';
 	import type { UpdateEntryVersionCommandType } from '../../../core/server/entries/operations/update.js';
 	import LayoutSidebar from '@tabler/icons-svelte/icons/layout-sidebar';
 	import { hasHybridContext, getHybridContext } from './hybrid/hybrid-context.svelte.js';
@@ -108,9 +106,13 @@
 			{primaryButtonLabel}
 		</Button>
 
-		<PublishPanel {entry} {version} {onSave} {onArchive} />
+		{#await import('./header/publish-panel.svelte') then { default: PublishPanel }}
+			<PublishPanel {entry} {version} {onSave} {onArchive} />
+		{/await}
 
-		<VersionHistorySheet {entry} currentVersionId={version.id} />
+		{#await import('./header/version-history-sheet.svelte') then { default: VersionHistorySheet }}
+			<VersionHistorySheet {entry} currentVersionId={version.id} />
+		{/await}
 
 		{#if hybridContext?.enabled}
 			<Button

package/dist/admin/client/entry/entry.svelte

@@ -14,20 +14,12 @@
 	import { zod4, zod4Client } from 'sveltekit-superforms/adapters';
 	import { generateZodSchemaFromFields } from '../../../core/fields/fieldSchemaToTs.js';
 	import type { DbEntryVersion, RawEntry } from '../../../types/entries.js';
-	import * as ToggleGroup from '../../../components/ui/toggle-group/index.js';
 	import EntryForm from './entry-form.svelte';
-	import DeviceTablet from '@tabler/icons-svelte/icons/device-tablet';
-	import DeviceMobile from '@tabler/icons-svelte/icons/device-mobile';
-	import Button from '../../../components/ui/button/button.svelte';
-	import Link from '@tabler/icons-svelte/icons/link';
-	import DeviceDesktop from '@tabler/icons-svelte/icons/device-desktop';
-	import ArrowsMaximize from '@tabler/icons-svelte/icons/arrows-maximize';
 	import type { UpdateEntryVersionCommandType } from '../../../core/server/entries/operations/update.js';
 	import { getRawCollectionEntryLabel } from '../../utils/entryLabel.js';
 	import type { Field } from '../../../types/fields.js';
 	import type { ValidationErrors } from 'sveltekit-superforms';
 	import { createHybridContext } from './hybrid/hybrid-context.svelte.js';
-	import HybridLayout from './hybrid/hybrid-layout.svelte';
 	import { onMount } from 'svelte';
 	import { get } from 'svelte/store';
 
@@ -298,8 +290,18 @@
 
 	let sizePreset: SizePreset = $state('responsive');
 
+	function getOriginFromUrl(url: string): string {
+		try {
+			return new URL(url, window.location.origin).origin;
+		} catch {
+			return window.location.origin;
+		}
+	}
+
+	const previewOrigin = collection.previewUrl ? getOriginFromUrl(collection.previewUrl) : window.location.origin;
+
 	const updatePreview = useDebounce(
-		async (window: Window, form: SuperForm<any>) => {
+		async (window: Window, form: SuperForm<Record<string, unknown>>) => {
 			const data = await form.validateForm();
 
 			if (data.valid) {
@@ -314,7 +316,7 @@
 						type: 'preview-update',
 						data: updatedData
 					},
-					'*'
+					previewOrigin
 				);
 			}
 		},
@@ -329,6 +331,7 @@
 
 	// Subscribe to form changes for preview updates
 	onMount(() => {
+		if (!collection.previewUrl) return;
 		const unsub = form.form.subscribe(() => {
 			onUpdate();
 		});
@@ -347,7 +350,7 @@
 		// Send hybrid mode state first
 		previewIframe.contentWindow.postMessage(
 			{ type: 'hybrid-mode-enable', enabled: hybridContext.mode === 'hybrid' },
-			'*'
+			previewOrigin
 		);
 
 		// Then send form data
@@ -360,7 +363,7 @@
 			});
 			previewIframe.contentWindow.postMessage(
 				{ type: 'preview-update', data: updatedData },
-				'*'
+				previewOrigin
 			);
 		}
 	}
@@ -376,6 +379,7 @@
 	// Listen for messages from iframe
 	onMount(() => {
 		function handleMessage(e: MessageEvent) {
+			if (e.origin !== previewOrigin) return;
 			// Click on preview element - debounced to prevent scroll jumping
 			if (e.data.type === 'hybrid-focus' && e.data.path) {
 				debouncedSetFocusPath(e.data.path);
@@ -394,7 +398,7 @@
 		if (previewIframe?.contentWindow) {
 			previewIframe.contentWindow.postMessage(
 				{ type: 'hybrid-highlight', path: hybridContext.focusedPath },
-				'*'
+				previewOrigin
 			);
 		}
 	});
@@ -407,7 +411,7 @@
 			if (previewIframe?.contentWindow) {
 				previewIframe.contentWindow.postMessage(
 					{ type: 'hybrid-mode-enable', enabled: hybridContext.mode === 'hybrid' },
-					'*'
+					previewOrigin
 				);
 			}
 		}
@@ -418,55 +422,31 @@
 
 {#if hybridContext.mode === 'hybrid' && collection.previewUrl}
 <div class="flex min-h-0 flex-1 overflow-hidden">
-	<HybridLayout>
-		{#snippet preview()}
-			<div class="flex h-full flex-col overflow-hidden">
-				<div class="flex items-center justify-center gap-2 border-b px-2 py-1.5">
-					<ToggleGroup.Root type="single" bind:value={sizePreset}>
-						<ToggleGroup.Item value="responsive" aria-label="Responsive view">
-							<ArrowsMaximize class="size-4" />
-						</ToggleGroup.Item>
-						<ToggleGroup.Item value="desktop" aria-label="Desktop view">
-							<DeviceDesktop class="size-4" />
-						</ToggleGroup.Item>
-						<ToggleGroup.Item value="tablet" aria-label="Tablet view">
-							<DeviceTablet class="size-4" />
-						</ToggleGroup.Item>
-						<ToggleGroup.Item value="mobile" aria-label="Mobile view">
-							<DeviceMobile class="size-4" />
-						</ToggleGroup.Item>
-					</ToggleGroup.Root>
-					<Button
-						variant="ghost"
-						size="icon"
-						href="{collection.previewUrl}?preview={editingEntry.id}"
-						target="_blank"
-					>
-						<Link class="size-4" />
-					</Button>
-				</div>
-				<div class="relative flex-1 overflow-hidden" bind:this={el}>
-					<iframe
-						bind:this={previewIframe}
-						style={sizePreset !== 'responsive' ? `transform: scale(${size.width / sizePresets[sizePreset][0]});` : ''}
-						class="{sizePreset === 'responsive' ? 'h-full w-full' : 'absolute top-0 left-0 origin-top-left'} border-0"
-						width={sizePreset !== 'responsive' ? sizePresets[sizePreset][0] : undefined}
-						height={sizePreset !== 'responsive' ? sizePresets[sizePreset][1] : undefined}
-						src="{collection.previewUrl}?preview={editingEntry.id}"
-						title="preview"
-					></iframe>
-				</div>
-			</div>
-		{/snippet}
-		{#snippet formPanel()}
-			<EntryForm
-				{form}
-				{entry}
-				focusedPath={hybridContext.focusedPath}
-				onPathSelect={(path) => hybridContext.focusedPath = path}
-			/>
-		{/snippet}
-	</HybridLayout>
+	{#await import('./hybrid/hybrid-layout.svelte')}
+		<div class="h-full animate-pulse rounded-md bg-accent"></div>
+	{:then { default: HybridLayout }}
+		<HybridLayout>
+			{#snippet preview()}
+				{#await import('./hybrid/hybrid-preview.svelte')}
+					<div class="h-full animate-pulse rounded-md bg-accent"></div>
+				{:then { default: HybridPreview }}
+					<HybridPreview {collection} {editingEntry} bind:previewIframe bind:sizePreset {size} bind:el />
+				{:catch}
+					<p class="p-4 text-sm text-destructive">Failed to load preview</p>
+				{/await}
+			{/snippet}
+			{#snippet formPanel()}
+				<EntryForm
+					{form}
+					{entry}
+					focusedPath={hybridContext.focusedPath}
+					onPathSelect={(path) => hybridContext.focusedPath = path}
+				/>
+			{/snippet}
+		</HybridLayout>
+	{:catch}
+		<p class="p-4 text-sm text-destructive">Failed to load layout</p>
+	{/await}
 </div>
 {:else}
 	<div class="flex items-stretch justify-center">

package/dist/admin/client/entry/hybrid/hybrid-context.svelte.d.ts

@@ -5,6 +5,7 @@ export declare function createHybridContext(): {
     enabled: boolean;
     toggle(): void;
 };
+export type HybridContext = ReturnType<typeof createHybridContext>;
 export declare function getHybridContext(): {
     mode: HybridViewMode;
     focusedPath: string | null;

package/dist/admin/client/entry/hybrid/hybrid-preview.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import * as ToggleGroup from '../../../../components/ui/toggle-group/index.js';
+	import Button from '../../../../components/ui/button/button.svelte';
+	import DeviceTablet from '@tabler/icons-svelte/icons/device-tablet';
+	import DeviceMobile from '@tabler/icons-svelte/icons/device-mobile';
+	import DeviceDesktop from '@tabler/icons-svelte/icons/device-desktop';
+	import ArrowsMaximize from '@tabler/icons-svelte/icons/arrows-maximize';
+	import Link from '@tabler/icons-svelte/icons/link';
+	import type { DbEntryVersion } from '../../../../types/entries.js';
+	import type { ElementSize } from 'runed';
+
+	type SizePreset = 'responsive' | 'desktop' | 'tablet' | 'mobile';
+
+	type Props = {
+		collection: { previewUrl?: string };
+		editingEntry: DbEntryVersion;
+		previewIframe?: HTMLIFrameElement;
+		sizePreset: SizePreset;
+		size: ElementSize;
+		el?: HTMLElement;
+	};
+
+	let { collection, editingEntry, previewIframe = $bindable(), sizePreset = $bindable('responsive'), size, el = $bindable() }: Props = $props();
+
+	const sizePresets = {
+		responsive: null,
+		desktop: [1440, 925],
+		tablet: [768, 1024],
+		mobile: [375, 667]
+	} as const;
+</script>
+
+<div class="flex h-full flex-col overflow-hidden">
+	<div class="flex items-center justify-center gap-2 border-b px-2 py-1.5">
+		<ToggleGroup.Root type="single" bind:value={sizePreset}>
+			<ToggleGroup.Item value="responsive" aria-label="Responsive view">
+				<ArrowsMaximize class="size-4" />
+			</ToggleGroup.Item>
+			<ToggleGroup.Item value="desktop" aria-label="Desktop view">
+				<DeviceDesktop class="size-4" />
+			</ToggleGroup.Item>
+			<ToggleGroup.Item value="tablet" aria-label="Tablet view">
+				<DeviceTablet class="size-4" />
+			</ToggleGroup.Item>
+			<ToggleGroup.Item value="mobile" aria-label="Mobile view">
+				<DeviceMobile class="size-4" />
+			</ToggleGroup.Item>
+		</ToggleGroup.Root>
+		<Button
+			variant="ghost"
+			size="icon"
+			href="{collection.previewUrl}?preview={editingEntry.id}"
+			target="_blank"
+		>
+			<Link class="size-4" />
+		</Button>
+	</div>
+	<div class="relative flex-1 overflow-hidden" bind:this={el}>
+		<iframe
+			bind:this={previewIframe}
+			style={sizePreset !== 'responsive' ? `transform: scale(${size.width / sizePresets[sizePreset][0]});` : ''}
+			class="{sizePreset === 'responsive' ? 'h-full w-full' : 'absolute top-0 left-0 origin-top-left'} border-0"
+			width={sizePreset !== 'responsive' ? sizePresets[sizePreset][0] : undefined}
+			height={sizePreset !== 'responsive' ? sizePresets[sizePreset][1] : undefined}
+			src="{collection.previewUrl}?preview={editingEntry.id}"
+			title="preview"
+		></iframe>
+	</div>
+</div>

package/dist/admin/client/entry/hybrid/hybrid-preview.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { DbEntryVersion } from '../../../../types/entries.js';
+import type { ElementSize } from 'runed';
+type SizePreset = 'responsive' | 'desktop' | 'tablet' | 'mobile';
+type Props = {
+    collection: {
+        previewUrl?: string;
+    };
+    editingEntry: DbEntryVersion;
+    previewIframe?: HTMLIFrameElement;
+    sizePreset: SizePreset;
+    size: ElementSize;
+    el?: HTMLElement;
+};
+declare const HybridPreview: import("svelte").Component<Props, {}, "previewIframe" | "sizePreset" | "el">;
+type HybridPreview = ReturnType<typeof HybridPreview>;
+export default HybridPreview;

package/dist/admin/components/fields/field-renderer.svelte

@@ -2,10 +2,6 @@
 	import * as Form from '../../../components/ui/form/index.js';
 
 	import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
-	import ImageField from './image-field.svelte';
-	import MediaFieldComponent from './media-field.svelte';
-	import ArrayField from './array-field.svelte';
-	import ObjectField from './object-field.svelte';
 	import SlugField from './slug-field.svelte';
 	import type { Field, FieldType } from '../../../types/fields.js';
 	import TextFieldWrapper from './text-field-wrapper.svelte';
@@ -13,14 +9,12 @@
 	import BooleanField from './boolean-field.svelte';
 	import RadioField from './radio-field.svelte';
 	import CheckboxesField from './checkboxes-field.svelte';
-	import FileField from './file-field.svelte';
 	import NumberField from './number-field.svelte';
 	import DateField from './date-field.svelte';
 	import DateTimeField from './datetime-field.svelte';
 	import SelectField from './select-field.svelte';
-	import SeoField from './seo-field.svelte';
-	import RelationField from './relation-field.svelte';
 	import UrlFieldWrapper from './url-field-wrapper.svelte';
+	import LazyField from './lazy-field.svelte';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 
@@ -105,15 +99,15 @@
 					{/if}
 
 					{#if field.type === 'image'}
-						<ImageField {field} {form} {path} {...props} />
+						<LazyField loader={() => import('./image-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-24" />
 					{:else if field.type === 'media'}
-						<MediaFieldComponent {field} {form} {path} {...props} />
+						<LazyField loader={() => import('./media-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-24" />
 					{:else if field.type === 'file'}
-						<FileField {field} {form} {path} {...props} />
+						<LazyField loader={() => import('./file-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-12" />
 					{:else if field.type === 'array'}
-						<ArrayField {field} {form} {path} {focusedPath} {flashingPath} {depth} {...props} />
+						<LazyField loader={() => import('./array-field.svelte')} props={{ field, form, path, focusedPath, flashingPath, depth, ...props }} skeletonClass="h-20" />
 					{:else if field.type === 'object'}
-						<ObjectField {field} {form} {path} {objectFieldType} {focusedPath} {flashingPath} {depth} {...props} />
+						<LazyField loader={() => import('./object-field.svelte')} props={{ field, form, path, objectFieldType, focusedPath, flashingPath, depth, ...props }} skeletonClass="h-20" />
 					{:else if field.type === 'slug'}
 						<SlugField {field} {form} {path} {...props} />
 					{:else if field.type === 'boolean'}
@@ -121,11 +115,11 @@
 					{:else if field.type === 'number'}
 						<NumberField {field} {form} {path} {...props} />
 					{:else if field.type === 'seo'}
-						<SeoField {field} {form} {path} {...props} />
+						<LazyField loader={() => import('./seo-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-16" />
 					{:else if field.type === 'url'}
 						<UrlFieldWrapper {field} {form} {path} {...props} />
 					{:else if field.type === 'relation'}
-						<RelationField {field} {form} {path} {...props} />
+						<LazyField loader={() => import('./relation-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-16" />
 					{:else if field.type === 'date'}
 						<DateField {field} {form} {path} {...props} />
 					{:else if field.type === 'datetime'}

package/dist/admin/components/fields/image-field.svelte

@@ -35,7 +35,6 @@
 	let currentIndex = $state(0);
 	let lightboxOpen = $state(false);
 	let lightboxFile = $state<MediaFile | null>(null);
-
 	function openLightbox(file: MediaFile) {
 		lightboxFile = file;
 		lightboxOpen = true;
@@ -139,10 +138,12 @@
 						<div
 							class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-black/60 to-transparent p-2 pt-8"
 						>
-							<Button {...props} size="sm" variant="secondary" class="h-8">
-								<Plus class="h-4 w-4" />
-								{lang[interfaceLanguage.current].change}
-							</Button>
+							<div class="flex gap-1">
+								<Button {...props} size="sm" variant="secondary" class="h-8">
+									<Plus class="h-4 w-4" />
+									{lang[interfaceLanguage.current].change}
+								</Button>
+							</div>
 							{#if !field.required}
 								<Button
 									variant="destructive"

package/dist/admin/components/fields/lazy-field.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	type Props = {
+		loader: () => Promise<{ default: Component<any> }>;
+		props: Record<string, any>;
+		skeletonClass?: string;
+	};
+
+	let { loader, props: fieldProps, skeletonClass = 'h-10' }: Props = $props();
+	let Comp = $state<Component<any> | null>(null);
+
+	$effect(() => {
+		loader().then((m) => {
+			Comp = m.default;
+		});
+	});
+</script>
+
+{#if Comp}
+	<Comp {...fieldProps} />
+{:else}
+	<div class="{skeletonClass} animate-pulse rounded-md bg-accent"></div>
+{/if}

package/dist/admin/components/fields/lazy-field.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Component } from 'svelte';
+type Props = {
+    loader: () => Promise<{
+        default: Component<any>;
+    }>;
+    props: Record<string, any>;
+    skeletonClass?: string;
+};
+declare const LazyField: Component<Props, {}, "">;
+type LazyField = ReturnType<typeof LazyField>;
+export default LazyField;

package/dist/admin/components/fields/text-field-wrapper.svelte

@@ -12,7 +12,6 @@
 	import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
 	import TextField from './text-field.svelte';
 	import { joinPath } from '../../utils/objectPath.js';
-	import RichtextField from './richtext-field.svelte';
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
@@ -53,12 +52,16 @@
 								path={joinPath(path, lang) as FormPathLeaves<T, string | undefined>}
 							/>
 						{:else if field.type === 'richtext'}
-							<RichtextField
-								{...props}
-								{field}
-								{form}
-								path={joinPath(path, lang) as FormPathLeaves<T, string | undefined>}
-							/>
+							{#await import('./richtext-field.svelte') then { default: RichtextField }}
+								<RichtextField
+									{...props}
+									{field}
+									{form}
+									path={joinPath(path, lang) as FormPathLeaves<T, string | undefined>}
+								/>
+							{:catch}
+								<div class="h-32 animate-pulse rounded-md bg-accent"></div>
+							{/await}
 						{/if}
 					{/snippet}
 				</Form.Control>

package/dist/admin/components/media/file/file-details.svelte

@@ -6,6 +6,7 @@
 	import type { InterfaceLanguage } from '../../../../types/languages.js';
 	import type { MediaFile, MediaTag } from '../../../../types/media.js';
 	import AltInput from '../alt-input.svelte';
+	import FocalPointInput from '../focal-point-input.svelte';
 	import TagCombobox from '../tag-combobox.svelte';
 	import FileMiniature from './file-miniature.svelte';
 	import MediaSelector from '../media-selector.svelte';
@@ -276,12 +277,13 @@
 		</InputGroup.Root>
 	</div>
 
-	<!-- Alt text dla obrazów -->
+	<!-- Alt text + focal point for images -->
 	{#if file.type === 'image'}
 		<div class="space-y-1.5">
 			<Label class="text-xs">{lang[interfaceLanguage.current].fileAltLabel}</Label>
 			<AltInput alt={file.alt} fileId={file.id} />
 		</div>
+		<FocalPointInput {file} />
 	{/if}
 
 	<!-- Accessibility section for video -->

package/dist/admin/components/media/focal-point-input.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import Button from '../../../components/ui/button/button.svelte';
+	import { getRemotes } from '../../context/remotes.js';
+	import { toast } from 'svelte-sonner';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import type { MediaFile } from '../../../types/media.js';
+	import Focus from '@tabler/icons-svelte/icons/focus-2';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const lang: Record<InterfaceLanguage, { label: string; save: string; success: string; error: string }> = {
+		pl: {
+			label: 'Punkt ogniskowy',
+			save: 'Zapisz punkt ogniskowy',
+			success: 'Punkt ogniskowy zapisany.',
+			error: 'Nie udało się zapisać punktu ogniskowego.'
+		},
+		en: {
+			label: 'Focal point',
+			save: 'Save focal point',
+			success: 'Focal point saved.',
+			error: 'Failed to save focal point.'
+		}
+	};
+
+	const remotes = getRemotes();
+
+	type Props = {
+		file: MediaFile;
+	};
+
+	let { file }: Props = $props();
+
+	let focalX = $state(file.focalX ?? 0.5);
+	let focalY = $state(file.focalY ?? 0.5);
+	let saving = $state(false);
+	let container: HTMLDivElement;
+
+	function handlePointer(e: PointerEvent) {
+		if (!container) return;
+		const rect = container.getBoundingClientRect();
+		focalX = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+		focalY = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+	}
+
+	function onPointerDown(e: PointerEvent) {
+		container.setPointerCapture(e.pointerId);
+		handlePointer(e);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (container.hasPointerCapture(e.pointerId)) {
+			handlePointer(e);
+		}
+	}
+
+	async function save() {
+		saving = true;
+		try {
+			await remotes.setFocalPoint({ fileId: file.id, focalX, focalY });
+			file.focalX = focalX;
+			file.focalY = focalY;
+			toast.success(lang[interfaceLanguage.current].success);
+		} catch {
+			toast.error(lang[interfaceLanguage.current].error);
+		} finally {
+			saving = false;
+		}
+	}
+
+	// Reset when file changes
+	$effect(() => {
+		focalX = file.focalX ?? 0.5;
+		focalY = file.focalY ?? 0.5;
+	});
+</script>
+
+<div class="space-y-2">
+	<div class="flex items-center gap-1.5 text-xs font-medium">
+		<Focus class="h-3.5 w-3.5 text-muted-foreground" />
+		{lang[interfaceLanguage.current].label}
+	</div>
+
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		bind:this={container}
+		class="relative cursor-crosshair overflow-hidden rounded-lg border select-none"
+		onpointerdown={onPointerDown}
+		onpointermove={onPointerMove}
+	>
+		<img src={file.url} alt={file.alt || file.name} class="w-full pointer-events-none" draggable="false" />
+		<!-- Crosshair -->
+		<div
+			class="absolute w-6 h-6 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+			style="left: {focalX * 100}%; top: {focalY * 100}%;"
+		>
+			<div class="absolute inset-0 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.3)]"></div>
+			<div class="absolute left-1/2 top-0 h-full w-px bg-white/80 -translate-x-px"></div>
+			<div class="absolute top-1/2 left-0 w-full h-px bg-white/80 -translate-y-px"></div>
+		</div>
+	</div>
+
+	<Button variant="outline" class="w-full" size="sm" onclick={save} disabled={saving}>
+		{lang[interfaceLanguage.current].save}
+	</Button>
+</div>

package/dist/admin/components/media/focal-point-input.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MediaFile } from '../../../types/media.js';
+type Props = {
+    file: MediaFile;
+};
+declare const FocalPointInput: import("svelte").Component<Props, {}, "">;
+type FocalPointInput = ReturnType<typeof FocalPointInput>;
+export default FocalPointInput;

package/dist/admin/remote/media.remote.d.ts

@@ -46,6 +46,11 @@ export declare const updateMediaAccessibility: import("@sveltejs/kit").RemoteCom
     audioDescriptionFileId?: string | null | undefined;
     posterUrl?: string | null | undefined;
 }, Promise<import("../../types/media.js").MediaFile>>;
+export declare const setFocalPoint: import("@sveltejs/kit").RemoteCommand<{
+    fileId: string;
+    focalX: number;
+    focalY: number;
+}, Promise<void>>;
 export declare const renameMediaFile: import("@sveltejs/kit").RemoteCommand<{
     fileId: string;
     newName: string;