+
{#each toasts as toast (toast.id)}
{@const ToastIcon = iconMap[toast.type]}
-
-
{toast.message}
-
+
+
+ {toast.message}
+
+
+ {#if toast.actions && toast.actions.length > 0}
+
+ {#each toast.actions as action, i (i)}
+
+ {/each}
+
+ {/if}
{/each}
diff --git a/src/lib/components/ToastHost.svelte.spec.ts b/src/lib/components/ToastHost.svelte.spec.ts
new file mode 100644
index 00000000..114dc574
--- /dev/null
+++ b/src/lib/components/ToastHost.svelte.spec.ts
@@ -0,0 +1,50 @@
+import { page } from 'vitest/browser';
+import { describe, expect, it, beforeEach } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import ToastHost from './ToastHost.svelte';
+import { toasts, addToast } from '$lib/stores/toast.svelte.js';
+
+beforeEach(() => {
+ toasts.length = 0;
+});
+
+describe('ToastHost', () => {
+ it('renders nothing when there are no toasts', () => {
+ render(ToastHost);
+ expect(page.getByRole('alert').query()).toBeNull();
+ });
+
+ it('renders a toast added before render', () => {
+ addToast('info', 'Pre-existing toast');
+ render(ToastHost);
+ expect(page.getByText('Pre-existing toast').query()).not.toBeNull();
+ });
+
+ it('labels the dismiss button', () => {
+ addToast('info', 'Hello');
+ render(ToastHost);
+ const dismissBtn = page.getByRole('button', { name: 'Dismiss' });
+ expect(dismissBtn.query()).not.toBeNull();
+ });
+
+ it('renders multiple pre-existing toasts', () => {
+ addToast('info', 'First');
+ addToast('success', 'Second');
+ render(ToastHost);
+ const alerts = document.querySelectorAll('[role="alert"]');
+ expect(alerts.length).toBe(2);
+ });
+
+ it('renders action buttons when toast has actions', () => {
+ addToast('warning', 'With action', 5000, [{ label: 'Undo', onClick: () => {} }]);
+ render(ToastHost);
+ const undoBtn = page.getByText('Undo');
+ expect(undoBtn.query()).not.toBeNull();
+ });
+
+ it('has aria-live="polite" for screen reader announcements', () => {
+ render(ToastHost);
+ const container = document.querySelector('[aria-live="polite"]');
+ expect(container).not.toBeNull();
+ });
+});
diff --git a/src/lib/components/Tooltip.svelte b/src/lib/components/Tooltip.svelte
new file mode 100644
index 00000000..4aaa3f3b
--- /dev/null
+++ b/src/lib/components/Tooltip.svelte
@@ -0,0 +1,51 @@
+
+
+
diff --git a/src/lib/components/Tooltip.svelte.spec.ts b/src/lib/components/Tooltip.svelte.spec.ts
new file mode 100644
index 00000000..7fdbffa4
--- /dev/null
+++ b/src/lib/components/Tooltip.svelte.spec.ts
@@ -0,0 +1,54 @@
+import { page } from 'vitest/browser';
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import Tooltip from './Tooltip.svelte';
+
+describe('Tooltip', () => {
+ it('renders tooltip text', async () => {
+ render(Tooltip, { text: 'Helpful info', x: 100, y: 200 });
+ const tooltip = page.getByText('Helpful info');
+ await expect.element(tooltip).toBeInTheDocument();
+ });
+
+ it('has role="tooltip"', async () => {
+ render(Tooltip, { text: 'Info', x: 0, y: 0 });
+ const tooltip = page.getByRole('tooltip');
+ await expect.element(tooltip).toBeInTheDocument();
+ });
+
+ it('positions based on right orientation (default)', async () => {
+ render(Tooltip, { text: 'Right', x: 50, y: 100 });
+ const tooltip = page.getByRole('tooltip');
+ const el = tooltip.element();
+ const style = el.getAttribute('style');
+ expect(style).toContain('left: 56px');
+ expect(style).toContain('top: 100px');
+ });
+
+ it('positions based on left orientation', async () => {
+ render(Tooltip, { text: 'Left', x: 50, y: 100, orientation: 'left' });
+ const tooltip = page.getByRole('tooltip');
+ const el = tooltip.element();
+ const style = el.getAttribute('style');
+ expect(style).toContain('left: 44px');
+ expect(style).toContain('top: 100px');
+ });
+
+ it('positions based on up orientation', async () => {
+ render(Tooltip, { text: 'Up', x: 50, y: 100, orientation: 'up' });
+ const tooltip = page.getByRole('tooltip');
+ const el = tooltip.element();
+ const style = el.getAttribute('style');
+ expect(style).toContain('left: 50px');
+ expect(style).toContain('top: 94px');
+ });
+
+ it('positions based on down orientation', async () => {
+ render(Tooltip, { text: 'Down', x: 50, y: 100, orientation: 'down' });
+ const tooltip = page.getByRole('tooltip');
+ const el = tooltip.element();
+ const style = el.getAttribute('style');
+ expect(style).toContain('left: 50px');
+ expect(style).toContain('top: 106px');
+ });
+});
diff --git a/src/lib/components/TooltipTrigger.svelte b/src/lib/components/TooltipTrigger.svelte
new file mode 100644
index 00000000..5e20a797
--- /dev/null
+++ b/src/lib/components/TooltipTrigger.svelte
@@ -0,0 +1,118 @@
+
+
+
text && show()}
+ onmouseleave={hide}
+ onfocusin={() => text && show()}
+ onfocusout={hide}
+>
+ {@render children()}
+
diff --git a/src/lib/components/TooltipTrigger.svelte.spec.ts b/src/lib/components/TooltipTrigger.svelte.spec.ts
new file mode 100644
index 00000000..2f5e1b3b
--- /dev/null
+++ b/src/lib/components/TooltipTrigger.svelte.spec.ts
@@ -0,0 +1,74 @@
+import { page, userEvent } from 'vitest/browser';
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import TooltipTriggerWrapper from './__tests__/TooltipTriggerWrapper.svelte';
+import TooltipTriggerDialogWrapper from './__tests__/TooltipTriggerDialogWrapper.svelte';
+
+describe('TooltipTrigger', () => {
+ it('renders the trigger content without a tooltip', async () => {
+ render(TooltipTriggerWrapper, { text: 'Delete' });
+ await expect.element(page.getByRole('button', { name: 'Trigger' })).toBeInTheDocument();
+ expect(page.getByRole('tooltip').query()).toBeNull();
+ });
+
+ it('shows the tooltip when the trigger is hovered', async () => {
+ render(TooltipTriggerWrapper, { text: 'Delete' });
+ await page.getByRole('button', { name: 'Trigger' }).hover();
+ const tooltip = page.getByRole('tooltip');
+ await expect.element(tooltip).toBeInTheDocument();
+ await expect.element(tooltip).toHaveTextContent('Delete');
+ });
+
+ it('hides the tooltip when the pointer leaves the trigger', async () => {
+ render(TooltipTriggerWrapper, { text: 'Delete' });
+ await page.getByRole('button', { name: 'Trigger' }).hover();
+ await expect.element(page.getByRole('tooltip')).toBeInTheDocument();
+ await userEvent.unhover(await page.getByRole('button', { name: 'Trigger' }).element());
+ await expect.element(page.getByRole('tooltip')).not.toBeInTheDocument();
+ });
+
+ it('shows the tooltip when the trigger receives focus', async () => {
+ render(TooltipTriggerWrapper, { text: 'Delete' });
+ const button = page.getByRole('button', { name: 'Trigger' });
+ (await button.element()).focus();
+ await expect.element(page.getByRole('tooltip')).toBeInTheDocument();
+ });
+
+ it('hides the tooltip when the trigger loses focus', async () => {
+ render(TooltipTriggerWrapper, { text: 'Delete' });
+ const button = page.getByRole('button', { name: 'Trigger' });
+ (await button.element()).focus();
+ await expect.element(page.getByRole('tooltip')).toBeInTheDocument();
+ (await button.element()).blur();
+ await expect.element(page.getByRole('tooltip')).not.toBeInTheDocument();
+ });
+
+ it('does not show a tooltip when no text is supplied', async () => {
+ render(TooltipTriggerWrapper, {});
+ await page.getByRole('button', { name: 'Trigger' }).hover();
+ expect(page.getByRole('tooltip').query()).toBeNull();
+ });
+
+ it('renders the tooltip in a portal attached to , not inline in the trigger', async () => {
+ render(TooltipTriggerWrapper, { text: 'Delete' });
+ await page.getByRole('button', { name: 'Trigger' }).hover();
+ const tooltipEl = (await page.getByRole('tooltip').element()) as HTMLElement;
+ const triggerEl = (await page
+ .getByRole('button', { name: 'Trigger' })
+ .element()) as HTMLElement;
+ // The popup is portaled: it must not be a descendant of the trigger wrapper.
+ expect(triggerEl.contains(tooltipEl)).toBe(false);
+ // It is mounted into a host div that is a direct child of .
+ expect(tooltipEl.parentElement?.parentElement).toBe(document.body);
+ });
+
+ it('portals the tooltip into a
{#if catalogsLoading}
diff --git a/src/lib/components/editor/MonacoEditor.svelte b/src/lib/components/editor/MonacoEditor.svelte
index 65a57c93..64b64d75 100644
--- a/src/lib/components/editor/MonacoEditor.svelte
+++ b/src/lib/components/editor/MonacoEditor.svelte
@@ -2,6 +2,7 @@
import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment';
import { theme } from '$lib/theme.svelte';
+ import { getLocale } from '$lib/paraglide/runtime.js';
import {
registerTrinoSql,
setCompletionDefaultsGetter,
@@ -133,7 +134,6 @@
// Start loading in parallel with the rest of the page — not deferred to onMount.
// Guarded by `browser` because SvelteKit evaluates component scripts on the server too.
const workerImport = browser ? import('monaco-editor/esm/vs/editor/editor.worker?worker') : null;
- const monacoImport = browser ? import('monaco-editor') : null;
function toMonacoTheme(t: string): string {
return t === 'dark' ? 'vs-dark' : 'vs';
@@ -143,14 +143,23 @@
monaco?.editor.setTheme(toMonacoTheme(theme.current));
});
+ const cleanups: (() => void)[] = [];
+
onMount(async () => {
+ // Load Monaco's NLS bundle for the active locale. Static import strings are
+ // required — Vite cannot bundle bare-specifier template literals at build time.
+ if (getLocale() === 'de') {
+ // @ts-expect-error — Monaco ESM nls bundle has no types
+ await import('monaco-editor/esm/nls.messages.de.js');
+ }
+
// By the time onMount fires the imports are likely already resolved.
const EditorWorker = (await workerImport!).default;
self.MonacoEnvironment = {
getWorker: () => new EditorWorker()
};
- monaco = await monacoImport!;
+ monaco = await import('monaco-editor');
setCompletionDefaultsGetter(() => ({
catalog: defaultCatalog || undefined,
@@ -227,9 +236,86 @@
run: onExecuteAll
});
}
+
+ // Ctrl+Mouse Wheel — zoom via built-in command (capture phase on document,
+ // because Monaco's internal handler calls stopPropagation on wheel events,
+ // so a container-level listener never fires)
+ const onWheel = (e: WheelEvent) => {
+ if ((e.ctrlKey || e.metaKey) && container.contains(e.target as Node)) {
+ e.preventDefault();
+ editor?.trigger(
+ 'keyboard',
+ e.deltaY < 0 ? 'editor.action.fontZoomIn' : 'editor.action.fontZoomOut',
+ {}
+ );
+ }
+ };
+ document.addEventListener('wheel', onWheel, { capture: true, passive: false });
+ cleanups.push(() => document.removeEventListener('wheel', onWheel, { capture: true }));
+
+ // Prevent browser zoom & invoke font zoom for any keys Monaco doesn't handle
+ const handleZoomKeys = (e: KeyboardEvent) => {
+ if (!editor?.hasTextFocus()) return;
+ if (!(e.ctrlKey || e.metaKey)) return;
+ let command: string | null = null;
+ if (e.key === '=' || e.key === '+' || e.code === 'NumpadAdd') {
+ command = 'editor.action.fontZoomIn';
+ } else if (e.key === '-' || e.code === 'NumpadSubtract') {
+ command = 'editor.action.fontZoomOut';
+ } else if (e.key === '0' || e.code === 'Numpad0') {
+ command = 'editor.action.fontZoomReset';
+ }
+ if (command) {
+ if (!e.defaultPrevented) editor?.trigger('keyboard', command, {});
+ e.preventDefault();
+ }
+ };
+ document.addEventListener('keydown', handleZoomKeys);
+ cleanups.push(() => document.removeEventListener('keydown', handleZoomKeys));
+
+ // Bind keyboard shortcuts to the built-in font zoom commands
+ const zoomDisposable = monaco!.editor.addKeybindingRules([
+ {
+ keybinding: monaco!.KeyMod.CtrlCmd | monaco!.KeyCode.Equal,
+ command: 'editor.action.fontZoomIn',
+ when: 'editorFocus'
+ },
+ {
+ keybinding: monaco!.KeyMod.CtrlCmd | monaco!.KeyMod.Shift | monaco!.KeyCode.Equal,
+ command: 'editor.action.fontZoomIn',
+ when: 'editorFocus'
+ },
+ {
+ keybinding: monaco!.KeyMod.CtrlCmd | monaco!.KeyCode.NumpadAdd,
+ command: 'editor.action.fontZoomIn',
+ when: 'editorFocus'
+ },
+ {
+ keybinding: monaco!.KeyMod.CtrlCmd | monaco!.KeyCode.Minus,
+ command: 'editor.action.fontZoomOut',
+ when: 'editorFocus'
+ },
+ {
+ keybinding: monaco!.KeyMod.CtrlCmd | monaco!.KeyCode.NumpadSubtract,
+ command: 'editor.action.fontZoomOut',
+ when: 'editorFocus'
+ },
+ {
+ keybinding: monaco!.KeyMod.CtrlCmd | monaco!.KeyCode.Digit0,
+ command: 'editor.action.fontZoomReset',
+ when: 'editorFocus'
+ },
+ {
+ keybinding: monaco!.KeyMod.CtrlCmd | monaco!.KeyCode.Numpad0,
+ command: 'editor.action.fontZoomReset',
+ when: 'editorFocus'
+ }
+ ]);
+ cleanups.push(() => zoomDisposable.dispose());
});
onDestroy(() => {
+ cleanups.forEach((fn) => fn());
editor?.dispose();
});
diff --git a/src/lib/components/editor/TextEditor.svelte b/src/lib/components/editor/TextEditor.svelte
new file mode 100644
index 00000000..94878c7d
--- /dev/null
+++ b/src/lib/components/editor/TextEditor.svelte
@@ -0,0 +1,307 @@
+
+
+
+ {#if !browser || !ready}
+
{displayValue}
+ {/if}
+
diff --git a/src/lib/components/layout/NavigationProgress.svelte b/src/lib/components/layout/NavigationProgress.svelte
new file mode 100644
index 00000000..91c202b7
--- /dev/null
+++ b/src/lib/components/layout/NavigationProgress.svelte
@@ -0,0 +1,40 @@
+
+
+{#if active}
+
+
+
{m.navigation_loading()}
+
+{/if}
diff --git a/src/lib/components/layout/header/LanguageSwitcher.svelte b/src/lib/components/layout/header/LanguageSwitcher.svelte
index 445e0044..4288d1f1 100644
--- a/src/lib/components/layout/header/LanguageSwitcher.svelte
+++ b/src/lib/components/layout/header/LanguageSwitcher.svelte
@@ -26,22 +26,27 @@
}
-
+
+