includio-cms 0.13.0 → 0.13.2

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

@@ -2,6 +2,7 @@
 	import { getRemotes } from '../../context/remotes.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import { toast } from 'svelte-sonner';
 	import Upload from '@tabler/icons-svelte/icons/upload';
 	import X from '@tabler/icons-svelte/icons/x';
 
@@ -9,21 +10,36 @@
 	const interfaceLanguage = useInterfaceLanguage();
 	const lang: Record<
 		InterfaceLanguage,
-		{ addFiles: string; dropFiles: string; dropHint: string; uploading: string; uploadComplete: string }
+		{
+			addFiles: string;
+			dropFiles: string;
+			dropHint: string;
+			uploading: string;
+			uploadComplete: string;
+			fileTooLarge: (maxMB: number) => string;
+			uploadError: string;
+			skippedFiles: (count: number) => string;
+		}
 	> = {
 		pl: {
 			addFiles: 'Prześlij pliki',
 			dropFiles: 'Upuść pliki tutaj',
 			dropHint: 'Przeciągnij pliki tutaj',
 			uploading: 'Wysyłanie...',
-			uploadComplete: 'Ukończono'
+			uploadComplete: 'Ukończono',
+			fileTooLarge: (maxMB) => `Plik za duży (max ${maxMB} MB)`,
+			uploadError: 'Błąd przesyłania',
+			skippedFiles: (count) => `Pominięto ${count} plik(ów) przekraczających limit`
 		},
 		en: {
 			addFiles: 'Upload files',
 			dropFiles: 'Drop files here',
 			dropHint: 'Drag files here',
 			uploading: 'Uploading...',
-			uploadComplete: 'Complete'
+			uploadComplete: 'Complete',
+			fileTooLarge: (maxMB) => `File too large (max ${maxMB} MB)`,
+			uploadError: 'Upload error',
+			skippedFiles: (count) => `Skipped ${count} file(s) exceeding the limit`
 		}
 	};
 
@@ -39,7 +55,17 @@
 
 	let inputElement: HTMLInputElement;
 	let isDragging = $state(false);
-	let uploadProgress = $state<{ name: string; progress: number; complete: boolean }[]>([]);
+	let uploadProgress = $state<{ name: string; progress: number; complete: boolean; error?: string }[]>([]);
+	let maxUploadSize = $state<number>(50 * 1024 * 1024);
+
+	$effect(() => {
+		fetch('/admin/api/upload-limit')
+			.then((r) => r.json())
+			.then((data) => {
+				if (data.maxUploadSize) maxUploadSize = data.maxUploadSize;
+			})
+			.catch(() => {});
+	});
 
 	async function uploadFile(file: File, index: number) {
 		const form = new FormData();
@@ -58,13 +84,26 @@
 			};
 
 			xhr.onload = () => {
-				uploadProgress[index].complete = true;
-				uploadProgress[index].progress = 100;
+				if (xhr.status >= 200 && xhr.status < 300) {
+					uploadProgress[index].complete = true;
+					uploadProgress[index].progress = 100;
+				} else {
+					const t = lang[interfaceLanguage.current];
+					const error =
+						xhr.status === 413
+							? t.fileTooLarge(Math.round(maxUploadSize / 1024 / 1024))
+							: t.uploadError;
+					uploadProgress[index].progress = -1;
+					uploadProgress[index].error = error;
+					toast.error(error, { description: file.name });
+				}
 				resolve();
 			};
 
 			xhr.onerror = () => {
 				uploadProgress[index].progress = -1;
+				uploadProgress[index].error = lang[interfaceLanguage.current].uploadError;
+				toast.error(lang[interfaceLanguage.current].uploadError, { description: file.name });
 				resolve();
 			};
 
@@ -76,9 +115,27 @@
 	async function handleFiles(files: File[]) {
 		if (!files.length) return;
 
-		uploadProgress = files.map((f) => ({ name: f.name, progress: 0, complete: false }));
+		const maxMB = Math.round(maxUploadSize / 1024 / 1024);
+		uploadProgress = files.map((f) => ({
+			name: f.name,
+			progress: f.size > maxUploadSize ? -1 : 0,
+			complete: false,
+			error: f.size > maxUploadSize ? lang[interfaceLanguage.current].fileTooLarge(maxMB) : undefined
+		}));
+
+		const validFiles = files
+			.map((file, i) => ({ file, i }))
+			.filter(({ file }) => file.size <= maxUploadSize);
+
+		const rejectedCount = files.length - validFiles.length;
+		if (rejectedCount > 0) {
+			const t = lang[interfaceLanguage.current];
+			toast.error(t.fileTooLarge(maxMB), {
+				description: t.skippedFiles(rejectedCount)
+			});
+		}
 
-		await Promise.all(files.map((file, i) => uploadFile(file, i)));
+		await Promise.all(validFiles.map(({ file, i }) => uploadFile(file, i)));
 
 		remotes.getMedia().refresh();
 
@@ -210,7 +267,7 @@
 							{#if item.complete}
 								{lang[interfaceLanguage.current].uploadComplete}
 							{:else if item.progress === -1}
-								Error
+								{item.error || lang[interfaceLanguage.current].uploadError}
 							{:else}
 								{item.progress}%
 							{/if}

package/dist/admin/components/media/files-list.svelte

@@ -9,6 +9,15 @@
 	import Music from '@tabler/icons-svelte/icons/music';
 	import Pdf from '@tabler/icons-svelte/icons/pdf';
 	import File from '@tabler/icons-svelte/icons/file';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const filesLang: Record<InterfaceLanguage, { noFiles: string; uploadOrFilter: string; tags: string }> = {
+		pl: { noFiles: 'Brak plików', uploadOrFilter: 'Prześlij pliki lub zmień filtry', tags: 'Tagi' },
+		en: { noFiles: 'No files', uploadOrFilter: 'Upload files or change filters', tags: 'Tags' }
+	};
+	const ft = $derived(filesLang[interfaceLanguage.current]);
 
 	type Props = {
 		files: MediaFile[];
@@ -94,8 +103,8 @@
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
 			</svg>
 		</div>
-		<p class="text-sm font-medium text-foreground">Brak plików</p>
-		<p class="text-xs text-muted-foreground mt-1">Prześlij pliki lub zmień filtry</p>
+		<p class="text-sm font-medium text-foreground">{ft.noFiles}</p>
+		<p class="text-xs text-muted-foreground mt-1">{ft.uploadOrFilter}</p>
 	</div>
 {:else}
 	{#each sortedFiles as file, i (file.id)}
@@ -146,7 +155,7 @@
 						<span class="text-[11px] font-medium text-text-light">{formatFileSize(file.size)}</span>
 					{/if}
 					{#if file.tags && file.tags.length > 0}
-						<span class="flex items-center gap-0.5 ml-auto" role="list" aria-label="Tagi">
+						<span class="flex items-center gap-0.5 ml-auto" role="list" aria-label={ft.tags}>
 							{#each file.tags as tag (tag.id)}
 								<span
 									class="h-2 w-2 rounded-full"

package/dist/admin/components/media/media-selector.svelte

@@ -29,6 +29,8 @@
 			cancel: string;
 			confirm: string;
 			selectedCount: string;
+			clickToSelect: string;
+			selectedFile: string;
 		}
 	> = {
 		pl: {
@@ -39,7 +41,9 @@
 			selectionResetLabel: 'Resetuj wybór',
 			cancel: 'Anuluj',
 			confirm: 'Potwierdź',
-			selectedCount: 'Wybrano'
+			selectedCount: 'Wybrano',
+			clickToSelect: '{lang[interfaceLanguage.current].clickToSelect}',
+			selectedFile: 'Wybrany plik:'
 		},
 		en: {
 			fileDeletedToast: 'File has been deleted',
@@ -49,7 +53,9 @@
 			selectionResetLabel: 'Reset selection',
 			cancel: 'Cancel',
 			confirm: 'Confirm',
-			selectedCount: 'Selected'
+			selectedCount: 'Selected',
+			clickToSelect: 'Click a file to select it',
+			selectedFile: 'Selected file:'
 		}
 	};
 
@@ -283,15 +289,15 @@
 					{/each}
 
 					{#if stagedSelection.length === 0}
-						<p class="text-sm text-muted-foreground py-8 text-center">Kliknij na plik aby go wybrać</p>
+						<p class="text-sm text-muted-foreground py-8 text-center">{lang[interfaceLanguage.current].clickToSelect}</p>
 					{/if}
 				{:else}
-					<p class="text-sm font-medium text-muted-foreground">Wybrany plik:</p>
+					<p class="text-sm font-medium text-muted-foreground">{lang[interfaceLanguage.current].selectedFile}</p>
 
 					{#if stagedSelection}
 						<FilePreview fileId={stagedSelection} />
 					{:else}
-						<p class="text-sm text-muted-foreground py-8 text-center">Kliknij na plik aby go wybrać</p>
+						<p class="text-sm text-muted-foreground py-8 text-center">{lang[interfaceLanguage.current].clickToSelect}</p>
 					{/if}
 				{/if}
 			</div>

package/dist/admin/components/tiptap/FigureNodeView.svelte

@@ -5,6 +5,11 @@
 	import AlignCenter from '@tabler/icons-svelte/icons/align-center';
 	import AlignRight from '@tabler/icons-svelte/icons/align-right';
 	import AlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
+	import { tiptapLang } from './lang.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const t = $derived(tiptapLang[interfaceLanguage.current]);
 
 	let { node, updateAttributes, selected }: NodeViewProps = $props();
 
@@ -91,8 +96,8 @@
 					class="toolbar-btn"
 					class:active={node.attrs.align === 'left'}
 					onclick={() => setAlign('left')}
-					aria-label="Wyrównaj do lewej"
-					title="Wyrównaj do lewej"
+					aria-label={t.alignLeftLabel}
+					title={t.alignLeftLabel}
 				>
 					<AlignLeft size={16} />
 				</button>
@@ -101,8 +106,8 @@
 					class="toolbar-btn"
 					class:active={node.attrs.align === 'center'}
 					onclick={() => setAlign('center')}
-					aria-label="Wyśrodkuj"
-					title="Wyśrodkuj"
+					aria-label={t.alignCenterLabel}
+					title={t.alignCenterLabel}
 				>
 					<AlignCenter size={16} />
 				</button>
@@ -111,8 +116,8 @@
 					class="toolbar-btn"
 					class:active={node.attrs.align === 'right'}
 					onclick={() => setAlign('right')}
-					aria-label="Wyrównaj do prawej"
-					title="Wyrównaj do prawej"
+					aria-label={t.alignRightLabel}
+					title={t.alignRightLabel}
 				>
 					<AlignRight size={16} />
 				</button>
@@ -131,7 +136,7 @@
 					bind:value={altInput}
 					onblur={saveAlt}
 					onkeydown={handleAltKeydown}
-					placeholder="Opis zdjęcia..."
+					placeholder={t.imageAltPlaceholder}
 				/>
 			{:else if hasAlt}
 				<button type="button" class="figure-alt-display" onclick={startEditAlt}>
@@ -140,7 +145,7 @@
 			{:else}
 				<button type="button" class="figure-alt-display figure-alt-missing" onclick={startEditAlt}>
 					<AlertTriangle size={14} />
-					<span>Dodaj opis zdjęcia, żeby każdy mógł je zrozumieć</span>
+					<span>{t.addAltMessage}</span>
 				</button>
 			{/if}
 		</div>
@@ -154,11 +159,11 @@
 				bind:value={captionInput}
 				onblur={saveCaption}
 				onkeydown={handleKeydown}
-				placeholder="Dodaj podpis..."
+				placeholder={t.captionPlaceholder}
 			/>
 		{:else}
 			<button type="button" class="caption-display" ondblclick={() => (editing = true)}>
-				{node.attrs.caption || 'Kliknij dwukrotnie, by dodać podpis'}
+				{node.attrs.caption || t.captionDefault}
 			</button>
 		{/if}
 	</div>

package/dist/admin/components/tiptap/InlineBlockNodeView.svelte

@@ -78,6 +78,24 @@
 	const blockLabel = $derived(blockDef?.label ? (typeof blockDef.label === 'string' ? blockDef.label : Object.values(blockDef.label)[0] ?? blockDef.slug) : node.attrs.blockType);
 	const supportedFields = $derived(blockDef?.fields.filter((f) => !SKIP_TYPES.has(f.type)) ?? []);
 
+	const accordionLabel = $derived.by(() => {
+		const field = blockDef?.accordionLabelField;
+		if (!field || typeof field !== 'string' || !field.trim()) return '';
+		const val = $formStore[field] as string | Record<string, string> | undefined;
+		if (!val) return '';
+		if (typeof val === 'string') return val.trim();
+		if (typeof val === 'object') {
+			if ('url' in val) {
+				const urlData = val as { url: string | Record<string, string>; text?: string | Record<string, string> };
+				const display = urlData.text || urlData.url;
+				if (typeof display === 'string') return display.trim();
+				if (typeof display === 'object' && display !== null) return display[contentLanguage.current] ?? '';
+			}
+			return (val as Record<string, string>)[contentLanguage.current] ?? '';
+		}
+		return '';
+	});
+
 	function parseBlockData(raw: unknown): Record<string, unknown> {
 		if (typeof raw === 'string') {
 			try { return JSON.parse(raw); } catch { return {}; }
@@ -192,9 +210,12 @@
 					class="inline-block-collapse-toggle"
 					onclick={() => (collapsed = !collapsed)}
 					aria-expanded={!collapsed}
-					aria-label={collapsed ? 'Rozwiń blok' : 'Zwiń blok'}
+					aria-label={collapsed ? `Rozwiń blok ${blockLabel}${accordionLabel ? ` — ${accordionLabel}` : ''}` : `Zwiń blok ${blockLabel}${accordionLabel ? ` — ${accordionLabel}` : ''}`}
 				>
 					<span class="inline-block-label">{blockLabel}</span>
+					{#if accordionLabel}
+						<span class="inline-block-accordion-label">— {accordionLabel}</span>
+					{/if}
 					<span class="collapse-chevron" class:collapsed>
 						<ChevronDown size={14} />
 					</span>
@@ -298,6 +319,16 @@
 		color: var(--foreground);
 	}
 
+	.inline-block-accordion-label {
+		font-size: 0.8125rem;
+		font-weight: 400;
+		color: var(--muted-foreground);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 200px;
+	}
+
 	.collapse-chevron {
 		display: flex;
 		align-items: center;

package/dist/admin/components/tiptap/SlashCommandPopup.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import type { SlashCommandItem } from './slash-command.js';
 	import { onMount } from 'svelte';
+	import { tiptapLang } from './lang.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const t = $derived(tiptapLang[interfaceLanguage.current]);
 
 	type Props = {
 		items: SlashCommandItem[];
@@ -79,9 +84,9 @@
 	});
 </script>
 
-<div class="slash-popup" bind:this={listEl} data-slash-popup role="listbox" aria-label="Polecenia">
+<div class="slash-popup" bind:this={listEl} data-slash-popup role="listbox" aria-label={t.commandsLabel}>
 	{#if items.length === 0}
-		<div class="slash-empty">Brak wyników</div>
+		<div class="slash-empty">{t.noResults}</div>
 	{:else}
 		{@const groups = grouped()}
 		{#each [...groups.entries()] as [group, groupItems]}
@@ -114,7 +119,7 @@
 				class="slash-more-btn"
 				onclick={() => (showTier2 = true)}
 			>
-				Więcej...
+				{t.more}
 			</button>
 		{/if}
 	{/if}

package/dist/admin/components/tiptap/editor-toolbar.svelte

@@ -3,6 +3,11 @@
 	import ToolbarButton from './toolbar-button.svelte';
 	import * as Tooltip from '../../../components/ui/tooltip/index.js';
 	import Separator from '../../../components/ui/separator/separator.svelte';
+	import { tiptapLang } from './lang.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const t = $derived(tiptapLang[interfaceLanguage.current]);
 
 	// Icons
 	import H_2 from '@tabler/icons-svelte/icons/h-2';
@@ -60,21 +65,21 @@
 	<div class="flex flex-wrap items-center gap-0.5 border-b p-1 sticky top-0 z-10 bg-muted/50">
 		<!-- Headings -->
 		<ToolbarButton
-			label="Nagłówek 2"
+			label={t.heading2}
 			active={ed.isActive('heading', { level: 2 })}
 			onclick={() => ed.chain().focus().toggleHeading({ level: 2 }).run()}
 		>
 			<H_2 class="h-4 w-4" />
 		</ToolbarButton>
 		<ToolbarButton
-			label="Nagłówek 3"
+			label={t.heading3}
 			active={ed.isActive('heading', { level: 3 })}
 			onclick={() => ed.chain().focus().toggleHeading({ level: 3 }).run()}
 		>
 			<H_3 class="h-4 w-4" />
 		</ToolbarButton>
 		<ToolbarButton
-			label="Paragraf"
+			label={t.paragraph}
 			active={ed.isActive('paragraph') && !ed.isActive('heading')}
 			onclick={() => ed.chain().focus().setParagraph().run()}
 		>
@@ -85,35 +90,35 @@
 
 		<!-- Text formatting -->
 		<ToolbarButton
-			label="Pogrubienie"
+			label={t.bold}
 			active={ed.isActive('bold')}
 			onclick={() => ed.chain().focus().toggleBold().run()}
 		>
 			<Bold class="h-4 w-4" />
 		</ToolbarButton>
 		<ToolbarButton
-			label="Kursywa"
+			label={t.italic}
 			active={ed.isActive('italic')}
 			onclick={() => ed.chain().focus().toggleItalic().run()}
 		>
 			<Italic class="h-4 w-4" />
 		</ToolbarButton>
 		<ToolbarButton
-			label="Podkreślenie"
+			label={t.underline}
 			active={ed.isActive('underline')}
 			onclick={() => ed.chain().focus().toggleUnderline().run()}
 		>
 			<Underline class="h-4 w-4" />
 		</ToolbarButton>
 		<ToolbarButton
-			label="Przekreślenie"
+			label={t.strikethrough}
 			active={ed.isActive('strike')}
 			onclick={() => ed.chain().focus().toggleStrike().run()}
 		>
 			<Strikethrough class="h-4 w-4" />
 		</ToolbarButton>
 		<ToolbarButton
-			label="Wyróżnienie"
+			label={t.highlight}
 			active={ed.isActive('highlight')}
 			onclick={() => ed.chain().focus().toggleHighlight().run()}
 		>
@@ -124,28 +129,28 @@
 
 		<!-- Alignment -->
 		<ToolbarButton
-			label="Do lewej"
+			label={t.alignLeft}
 			active={ed.isActive({ textAlign: 'left' })}
 			onclick={() => ed.chain().focus().setTextAlign('left').run()}
 		>
 			<AlignLeft class="h-4 w-4" />
 		</ToolbarButton>
 		<ToolbarButton
-			label="Wyśrodkuj"
+			label={t.alignCenter}
 			active={ed.isActive({ textAlign: 'center' })}
 			onclick={() => ed.chain().focus().setTextAlign('center').run()}
 		>
 			<AlignCenter class="h-4 w-4" />
 		</ToolbarButton>
 		<ToolbarButton
-			label="Do prawej"
+			label={t.alignRight}
 			active={ed.isActive({ textAlign: 'right' })}
 			onclick={() => ed.chain().focus().setTextAlign('right').run()}
 		>
 			<AlignRight class="h-4 w-4" />
 		</ToolbarButton>
 		<ToolbarButton
-			label="Wyjustuj"
+			label={t.alignJustify}
 			active={ed.isActive({ textAlign: 'justify' })}
 			onclick={() => ed.chain().focus().setTextAlign('justify').run()}
 		>
@@ -156,21 +161,21 @@
 
 		<!-- Lists & Quote -->
 		<ToolbarButton
-			label="Lista punktowa"
+			label={t.bulletList}
 			active={ed.isActive('bulletList')}
 			onclick={() => ed.chain().focus().toggleBulletList().run()}
 		>
 			<List class="h-4 w-4" />
 		</ToolbarButton>
 		<ToolbarButton
-			label="Lista numerowana"
+			label={t.orderedList}
 			active={ed.isActive('orderedList')}
 			onclick={() => ed.chain().focus().toggleOrderedList().run()}
 		>
 			<ListNumbers class="h-4 w-4" />
 		</ToolbarButton>
 		<ToolbarButton
-			label="Cytat"
+			label={t.blockquote}
 			active={ed.isActive('blockquote')}
 			onclick={() => ed.chain().focus().toggleBlockquote().run()}
 		>
@@ -180,16 +185,16 @@
 		<Separator orientation="vertical" class="mx-1 h-6" />
 
 		<!-- Link, Image, Table -->
-		<ToolbarButton label="Link" active={ed.isActive('link')} onclick={onLinkDialog}>
+		<ToolbarButton label={t.link} active={ed.isActive('link')} onclick={onLinkDialog}>
 			<LinkIcon class="h-4 w-4" />
 		</ToolbarButton>
-		<ToolbarButton label="Obrazek" active={false} onclick={onImageDialog}>
+		<ToolbarButton label={t.image} active={false} onclick={onImageDialog}>
 			<Photo class="h-4 w-4" />
 		</ToolbarButton>
-		<ToolbarButton label="Wideo" active={false} onclick={onVideoDialog}>
+		<ToolbarButton label={t.video} active={false} onclick={onVideoDialog}>
 			<VideoIcon class="h-4 w-4" />
 		</ToolbarButton>
-		<ToolbarButton label="Tabela" active={false} onclick={onTableDialog}>
+		<ToolbarButton label={t.table} active={false} onclick={onTableDialog}>
 			<Table class="h-4 w-4" />
 		</ToolbarButton>
 
@@ -197,14 +202,14 @@
 
 		<!-- Code -->
 		<ToolbarButton
-			label="Kod inline"
+			label={t.inlineCode}
 			active={ed.isActive('code')}
 			onclick={() => ed.chain().focus().toggleCode().run()}
 		>
 			<Code class="h-4 w-4" />
 		</ToolbarButton>
 		<ToolbarButton
-			label="Blok kodu"
+			label={t.codeBlock}
 			active={ed.isActive('codeBlock')}
 			onclick={() => ed.chain().focus().toggleCodeBlock().run()}
 		>
@@ -213,7 +218,7 @@
 
 		{#if showInsertBlock && onInsertBlock}
 			<Separator orientation="vertical" class="mx-1 h-6" />
-			<ToolbarButton label="Wstaw blok" active={false} onclick={onInsertBlock}>
+			<ToolbarButton label={t.insertBlock} active={false} onclick={onInsertBlock}>
 				<Plus class="h-4 w-4" />
 			</ToolbarButton>
 		{/if}
@@ -222,7 +227,7 @@
 			<Separator orientation="vertical" class="mx-1 h-6" />
 
 			<!-- HTML View -->
-			<ToolbarButton label="Widok HTML" active={isCodeViewActive} onclick={onToggleCodeView}>
+			<ToolbarButton label={t.htmlView} active={isCodeViewActive} onclick={onToggleCodeView}>
 				<SourceCode class="h-4 w-4" />
 			</ToolbarButton>
 		{/if}

package/dist/admin/components/tiptap/image-dialog.svelte

@@ -4,6 +4,11 @@
 	import { getRemotes } from '../../context/remotes.js';
 	import type { Editor } from '@tiptap/core';
 	import AlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
+	import { tiptapLang } from './lang.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const t = $derived(tiptapLang[interfaceLanguage.current]);
 
 	type Props = {
 		open: boolean;
@@ -78,7 +83,7 @@
 <Dialog.Root bind:open {onOpenChange}>
 	<Dialog.Content class="max-w-5xl! sm:max-w-5xl!">
 		<Dialog.Header>
-			<Dialog.Title>Wstaw obrazek</Dialog.Title>
+			<Dialog.Title>{t.insertImage}</Dialog.Title>
 		</Dialog.Header>
 		<MediaSelector bind:selected accept="image/*" onConfirm={handleConfirm} />
 	</Dialog.Content>
@@ -88,26 +93,26 @@
 <Dialog.Root bind:open={altOpen}>
 	<Dialog.Content class="max-w-lg! sm:max-w-lg!">
 		<Dialog.Header>
-			<Dialog.Title>Opis zdjęcia</Dialog.Title>
+			<Dialog.Title>{t.imageDescription}</Dialog.Title>
 		</Dialog.Header>
 		<div class="image-alt-prompt">
 			{#if !altText.trim()}
 				<div class="image-alt-banner">
 					<AlertTriangle class="size-4 shrink-0" />
-					<span>Dodaj opis zdjęcia, żeby każdy mógł je zrozumieć</span>
+					<span>{t.addAltBanner}</span>
 				</div>
 			{/if}
 			<div class="image-alt-preview">
 				<img src={fileUrl} alt="" class="image-alt-thumb" />
 			</div>
-			<label class="image-alt-label" for="image-alt-input">Opis alternatywny (alt text)</label>
+			<label class="image-alt-label" for="image-alt-input">{t.altLabel}</label>
 			<input
 				id="image-alt-input"
 				type="text"
 				class="image-alt-input"
 				bind:value={altText}
 				onkeydown={handleAltKeydown}
-				placeholder="Np. Zdjęcie zespołu na konferencji..."
+				placeholder={t.altPlaceholder}
 			/>
 			<div class="image-alt-actions">
 				<button
@@ -115,14 +120,14 @@
 					class="image-alt-btn-primary"
 					onclick={() => insertImage(altText.trim())}
 				>
-					Dodaj i wstaw
+					{t.addAndInsert}
 				</button>
 				<button
 					type="button"
 					class="image-alt-btn-ghost"
 					onclick={handleAltCancel}
 				>
-					Pomiń
+					{t.skip}
 				</button>
 			</div>
 		</div>