@hiai-gg/hiai-docs 0.0.1

package/frontend/src/routes/s/[token]/+page.svelte

@@ -0,0 +1,496 @@
+<script lang="ts">
+import { Check, Copy, FileText, Folder, Lock } from "lucide-svelte";
+import { marked } from "marked";
+import { page } from "$app/state";
+import * as m from "$lib/paraglide/messages.js";
+
+const token = $derived(page.params.token);
+
+let password = $state("");
+let requiresPassword = $state(false);
+let error = $state("");
+let loading = $state(false);
+let shareData = $state<{
+	type?: string;
+	data?: {
+		title?: string;
+		content?: string;
+		contentJson?: object | null;
+		name?: string;
+		documents?: { title: string }[];
+	};
+} | null>(null);
+let copied = $state(false);
+let copiedText = $state(false);
+
+// SvelteKit-injected fetch avoids the `window.fetch` warning during SSR/CSR
+// transitions. Falls back to global fetch when running outside a load fn
+// (e.g. in unit tests).
+const kitFetch = $derived(
+	(page.data.fetch as typeof fetch | undefined) ?? globalThis.fetch,
+);
+
+// Configure marked for safe, GFM-flavored rendering of shared document
+// markdown. The HiAiEditor JSON path (contentJson) is preferred when the
+// server provides it, but `content` (raw markdown) is the universal fallback.
+marked.setOptions({ gfm: true, breaks: false });
+
+function renderContent(): string {
+	if (!shareData?.data) return "";
+	const docJson = shareData.data.contentJson as
+		| { content?: unknown }
+		| null
+		| undefined;
+	if (docJson && Array.isArray(docJson.content)) {
+		return docToHtml(docJson as ProseMirrorDoc);
+	}
+	const md = shareData.data.content;
+	if (md && md.length > 0) {
+		return marked.parse(md, { async: false }) as string;
+	}
+	return "";
+}
+
+type ProseMirrorNode = {
+	type: string;
+	text?: string;
+	content?: ProseMirrorNode[];
+	attrs?: Record<string, unknown>;
+	marks?: Array<{ type: string; attrs?: Record<string, unknown> }>;
+};
+
+type ProseMirrorDoc = ProseMirrorNode & { content?: ProseMirrorNode[] };
+
+function escapeHtml(s: string): string {
+	return s
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#39;");
+}
+
+function docToHtml(doc: ProseMirrorDoc): string {
+	const renderNode = (node: ProseMirrorNode): string => {
+		if (node.type === "text") {
+			let html = escapeHtml(node.text ?? "");
+			for (const mark of node.marks ?? []) {
+				html = wrapMark(mark, html);
+			}
+			return html;
+		}
+		const inner = (node.content ?? []).map(renderNode).join("");
+		return wrapBlock(node, inner);
+	};
+	return (doc.content ?? []).map(renderNode).join("");
+}
+
+function wrapMark(
+	mark: { type: string; attrs?: Record<string, unknown> },
+	html: string,
+): string {
+	switch (mark.type) {
+		case "bold":
+			return `<strong>${html}</strong>`;
+		case "italic":
+			return `<em>${html}</em>`;
+		case "strike":
+		case "strikethrough":
+			return `<s>${html}</s>`;
+		case "underline":
+			return `<u>${html}</u>`;
+		case "code":
+			return `<code>${html}</code>`;
+		case "link": {
+			const href = (mark.attrs?.href as string) ?? "#";
+			return `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${html}</a>`;
+		}
+		case "highlight": {
+			const color = (mark.attrs?.color as string) ?? "#fde68a";
+			return `<mark style="background-color: ${escapeHtml(color)}">${html}</mark>`;
+		}
+		default:
+			return html;
+	}
+}
+
+// Returns an inline `style` attribute fragment (` style="text-align: X"`) for
+// the block-level textAlign attribute, or an empty string when alignment is
+// unset / not a recognized value. Whitelists the four values supported by the
+// editor to avoid passing attacker-controlled strings into the markup.
+function alignStyle(attrs?: Record<string, unknown>): string {
+	const align = attrs?.textAlign as string | undefined;
+	if (
+		align !== "left" &&
+		align !== "center" &&
+		align !== "right" &&
+		align !== "justify"
+	) {
+		return "";
+	}
+	return ` style="text-align: ${align}"`;
+}
+
+function wrapBlock(node: ProseMirrorNode, inner: string): string {
+	const lang = (node.attrs?.language as string) ?? "";
+	const align = alignStyle(node.attrs);
+	switch (node.type) {
+		case "paragraph":
+			return `<p${align}>${inner}</p>`;
+		case "heading": {
+			const level = Math.min(Math.max(Number(node.attrs?.level ?? 1), 1), 6);
+			return `<h${level}${align}>${inner}</h${level}>`;
+		}
+		case "bulletList":
+			return `<ul${align}>${inner}</ul>`;
+		case "orderedList":
+			return `<ol${align}>${inner}</ol>`;
+		case "listItem":
+			return `<li${align}>${inner}</li>`;
+		case "taskList":
+			return `<ul data-type="taskList">${inner}</ul>`;
+		case "taskItem": {
+			// Read-only checkbox reflecting the saved checked state.
+			const isChecked =
+				node.attrs?.checked === true || node.attrs?.checked === "true";
+			const checked = isChecked ? " checked" : "";
+			return `<li data-type="taskItem"${isChecked ? ' data-checked="true"' : ""}><label><input type="checkbox" onclick="return false;" class="cursor-default" ${checked} /></label><div>${inner}</div></li>`;
+		}
+		case "blockquote":
+			return `<blockquote${align}>${inner}</blockquote>`;
+		case "table":
+			return `<table><tbody>${inner}</tbody></table>`;
+		case "tableRow":
+			return `<tr>${inner}</tr>`;
+		case "tableHeader":
+			return `<th${align}>${inner}</th>`;
+		case "tableCell":
+			return `<td${align}>${inner}</td>`;
+		case "codeBlock":
+			return `<pre><code${lang ? ` class="language-${escapeHtml(lang)}"` : ""}>${inner}</code></pre>`;
+		case "horizontalRule":
+			return `<hr />`;
+		case "hardBreak":
+			return `<br />`;
+		case "image": {
+			const src = (node.attrs?.src as string) ?? "";
+			const alt = (node.attrs?.alt as string) ?? "";
+			return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" />`;
+		}
+		default:
+			return inner;
+	}
+}
+
+const renderedContent = $derived(renderContent());
+
+async function fetchShare() {
+	loading = true;
+	try {
+		const headers: Record<string, string> = {};
+		if (password) headers["x-share-password"] = password;
+
+		const res = await kitFetch(`/api/share/${token}`, { headers });
+		const data = await res.json();
+
+		if (res.status === 401) {
+			// Server signals the share is password-protected when `requiresPassword`
+			// is true on the response (initial load with no password supplied).
+			// A wrong password comes back as 401 without that flag — we must keep
+			// the password form visible and surface a retryable inline error
+			// instead of replacing the whole view with a fatal error banner.
+			requiresPassword = true;
+			password = "";
+			error = data.requiresPassword ? "" : m.share_password_incorrect();
+			return;
+		}
+		if (!res.ok) {
+			// Non-password failure (expired, missing share, server error). Drop
+			// the password form so the user sees the banner with a way home.
+			requiresPassword = false;
+			password = "";
+			error = data.error ?? m.share_load_error();
+			return;
+		}
+		// Success — clear transient auth state so the document view renders.
+		shareData = data;
+		requiresPassword = false;
+		password = "";
+		error = "";
+	} catch (_e) {
+		requiresPassword = false;
+		password = "";
+		error = m.share_network_error();
+	} finally {
+		loading = false;
+	}
+}
+
+function copyUrl() {
+	navigator.clipboard.writeText(window.location.href);
+	copied = true;
+	setTimeout(() => {
+		copied = false;
+	}, 2000);
+}
+
+function copyText() {
+	const text = shareData?.data?.content ?? "";
+	if (!text) return;
+	navigator.clipboard.writeText(text);
+	copiedText = true;
+	setTimeout(() => {
+		copiedText = false;
+	}, 2000);
+}
+
+fetchShare();
+</script>
+
+<svelte:head>
+  <title>{m.share_page_title()}</title>
+</svelte:head>
+
+<div class="flex min-h-screen items-center justify-center bg-background p-4">
+  {#if loading}
+    <div class="text-muted-foreground">{m.action_loading()}</div>
+  {:else if shareData}
+    <div class="w-full max-w-3xl space-y-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2 text-sm text-muted-foreground">
+          {#if shareData.type === "document"}
+            <FileText class="h-4 w-4" />
+          {:else}
+            <Folder class="h-4 w-4" />
+          {/if}
+          {m.share_via_label()}
+        </div>
+        <div class="flex items-center gap-2">
+          {#if shareData.type === "document" && shareData.data?.content}
+            <button
+              onclick={copyText}
+              class="flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-xs hover:bg-accent"
+            >
+              {#if copiedText}
+                <Check class="h-3 w-3" /> {m.share_copied()}
+              {:else}
+                <Copy class="h-3 w-3" /> Copy Text
+              {/if}
+            </button>
+          {/if}
+          <button
+            onclick={copyUrl}
+            class="flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-xs hover:bg-accent"
+          >
+            {#if copied}
+              <Check class="h-3 w-3" /> {m.share_copied()}
+            {:else}
+              <Copy class="h-3 w-3" /> {m.share_copy_link()}
+            {/if}
+          </button>
+        </div>
+      </div>
+
+      {#if shareData.type === "document"}
+        <article class="rounded-lg border border-border bg-card p-8 shadow-sm">
+          <h1 class="mb-6 text-3xl font-bold tracking-tight">{shareData.data?.title ?? ""}</h1>
+          {#if renderedContent}
+            <div class="shared-doc-body">
+              {@html renderedContent}
+            </div>
+          {:else}
+            <p class="text-muted-foreground">{m.share_empty_document()}</p>
+          {/if}
+        </article>
+      {:else}
+        <div class="rounded-lg border border-border bg-card p-6 shadow-sm">
+          <h1 class="mb-4 text-2xl font-bold">{shareData.data?.name ?? ""}</h1>
+          {#if shareData.data?.documents && shareData.data.documents.length > 0}
+            <ul class="space-y-2">
+              {#each shareData.data.documents as doc}
+                <li class="flex items-center gap-2 rounded-md border border-border px-3 py-2">
+                  <FileText class="h-4 w-4 text-muted-foreground" />
+                  <span>{doc.title}</span>
+                </li>
+              {/each}
+            </ul>
+          {:else}
+            <p class="text-muted-foreground">{m.share_folder_empty()}</p>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {:else if requiresPassword}
+    <form
+      onsubmit={(e) => { e.preventDefault(); fetchShare(); }}
+      class="w-full max-w-sm space-y-4 rounded-lg border border-border bg-card p-6 shadow-sm"
+    >
+      <div class="flex items-center gap-2 text-lg font-semibold">
+        <Lock class="h-5 w-5" />
+        {m.share_password_required()}
+      </div>
+      {#if error}
+        <div
+          role="alert"
+          class="rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive"
+        >
+          {error}
+        </div>
+      {/if}
+      <input
+        type="password"
+        bind:value={password}
+        placeholder={m.share_password_placeholder()}
+        class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      />
+      <button
+        type="submit"
+        class="inline-flex h-9 w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90"
+      >
+        {m.share_access_button()}
+      </button>
+    </form>
+  {:else if error}
+    <div class="w-full max-w-md rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center">
+      <p class="text-lg font-medium text-destructive">{error}</p>
+      <a href="/" class="mt-4 inline-block text-sm text-primary underline">{m.share_go_home()}</a>
+    </div>
+  {/if}
+</div>
+
+<style>
+  /* Shared document body — minimal styles for the markdown/JSON HTML output
+     rendered via {@html}. The `prose` class from @tailwindcss/typography
+     is not installed in this project, so we provide the essentials. */
+  .shared-doc-body {
+    color: var(--foreground);
+    line-height: 1.7;
+    font-size: 1rem;
+    word-wrap: break-word;
+  }
+  .shared-doc-body :global(h1) {
+    font-size: 1.875rem;
+    font-weight: 700;
+    margin: 1.5rem 0 0.75rem;
+    letter-spacing: -0.02em;
+  }
+  .shared-doc-body :global(h2) {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin: 1.25rem 0 0.5rem;
+  }
+  .shared-doc-body :global(h3) {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 1rem 0 0.5rem;
+  }
+  .shared-doc-body :global(p) {
+    margin: 0.5rem 0;
+  }
+  .shared-doc-body :global(ul),
+  .shared-doc-body :global(ol) {
+    padding-left: 1.5rem;
+    margin: 0.5rem 0;
+  }
+  .shared-doc-body :global(ul) {
+    list-style-type: disc;
+  }
+  .shared-doc-body :global(ol) {
+    list-style-type: decimal;
+  }
+  .shared-doc-body :global(li) {
+    margin: 0.25rem 0;
+  }
+  /* Task lists — no bullet, checkbox + content laid out in a row. */
+  .shared-doc-body :global(ul[data-type="taskList"]) {
+    list-style: none;
+    padding-left: 0.25rem;
+  }
+  .shared-doc-body :global(ul[data-type="taskList"] li) {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+  .shared-doc-body :global(ul[data-type="taskList"] li > label) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.7em;
+    margin: 0;
+  }
+  .shared-doc-body :global(ul[data-type="taskList"] li > div > p) {
+    margin: 0;
+  }
+  .shared-doc-body :global(ul[data-type="taskList"] input[type="checkbox"]) {
+    accent-color: var(--primary);
+  }
+  .shared-doc-body :global(blockquote) {
+    border-left: 3px solid var(--border);
+    padding-left: 1rem;
+    margin: 0.75rem 0;
+    color: var(--muted-foreground);
+    font-style: italic;
+  }
+  .shared-doc-body :global(code) {
+    background: var(--muted);
+    padding: 0.125rem 0.375rem;
+    border-radius: 4px;
+    font-size: 0.875em;
+    font-family: "Fira Code", "Consolas", monospace;
+  }
+  .shared-doc-body :global(pre) {
+    background: var(--muted);
+    color: var(--foreground);
+    border: 1px solid var(--border);
+    padding: 1rem;
+    border-radius: 8px;
+    font-family: "Fira Code", "Consolas", monospace;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    overflow-x: auto;
+    margin: 0.75rem 0;
+  }
+  .shared-doc-body :global(pre code) {
+    background: transparent;
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+  }
+  .shared-doc-body :global(hr) {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 1.5rem 0;
+  }
+  .shared-doc-body :global(a) {
+    color: var(--primary);
+    text-decoration: underline;
+  }
+  .shared-doc-body :global(img) {
+    max-width: 100%;
+    height: auto;
+    border-radius: 6px;
+    margin: 0.75rem 0;
+    display: block;
+  }
+  .shared-doc-body :global(mark) {
+    background-color: var(--highlight-default, #fde68a);
+    border-radius: 2px;
+    padding: 0 2px;
+  }
+  .shared-doc-body :global(table) {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 0.75rem 0;
+  }
+  .shared-doc-body :global(th),
+  .shared-doc-body :global(td) {
+    border: 1px solid var(--border);
+    padding: 0.4rem 0.6rem;
+    text-align: left;
+    vertical-align: top;
+  }
+  .shared-doc-body :global(th) {
+    background: var(--muted);
+    font-weight: 600;
+  }
+</style>

package/frontend/src/routes/s/[token]/+page.ts

@@ -0,0 +1,5 @@
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ params, fetch }) => {
+	return { token: params.token, fetch };
+};

package/frontend/src/routes/settings/+page.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import { goto } from "$app/navigation";
+import {
+	deleteAccount,
+	getEmbeddingConfig,
+	getProfile,
+	updateEmbeddingConfig,
+	updateProfile,
+} from "$lib/api/settings";
+import { signOut } from "$lib/auth-client";
+import * as m from "$lib/paraglide/messages.js";
+import { themeStore } from "$lib/stores/theme.svelte";
+
+let loggingOut = $state(false);
+
+async function handleLogout() {
+	loggingOut = true;
+	try {
+		await signOut();
+		goto("/login");
+	} catch {
+		loggingOut = false;
+	}
+}
+
+let activeTab = $state<"profile" | "embedding" | "danger">("profile");
+let saveStatus = $state<"idle" | "saving" | "saved" | "error">("idle");
+
+let name = $state("User");
+let email = $state("user@example.com");
+let embeddingProvider = $state("ollama");
+let embeddingModel = $state("nomic-embed-text");
+let deleteConfirm = $state(false);
+
+onMount(async () => {
+	try {
+		const profile = await getProfile();
+		if (profile.name) name = profile.name;
+		if (profile.email) email = profile.email;
+	} catch {
+		// Use defaults
+	}
+
+	const config = getEmbeddingConfig();
+	embeddingProvider = config.provider;
+	embeddingModel = config.model;
+});
+
+async function saveProfile() {
+	saveStatus = "saving";
+	try {
+		await updateProfile({ name });
+		saveStatus = "saved";
+		setTimeout(() => {
+			saveStatus = "idle";
+		}, 2000);
+	} catch {
+		saveStatus = "error";
+	}
+}
+
+function saveEmbedding() {
+	saveStatus = "saving";
+	try {
+		updateEmbeddingConfig({
+			provider: embeddingProvider as "ollama" | "openrouter" | "voyage",
+			model: embeddingModel,
+		});
+		saveStatus = "saved";
+		setTimeout(() => {
+			saveStatus = "idle";
+		}, 2000);
+	} catch {
+		saveStatus = "error";
+	}
+}
+
+async function handleDeleteAccount() {
+	try {
+		await deleteAccount();
+		goto("/login");
+	} catch {
+		alert(m.settings_delete_failed());
+	}
+}
+</script>
+
+<svelte:head>
+  <title>{m.settings_page_title()}</title>
+</svelte:head>
+
+<div class="mx-auto max-w-2xl p-6">
+  <h1 class="mb-6 text-2xl font-semibold">{m.settings_title()}</h1>
+
+  <div class="mb-6 flex gap-1 rounded-lg border border-border p-1">
+    {#each [["profile", m.settings_profile()], ["embedding", m.settings_tab_embedding()], ["danger", m.settings_tab_danger()]] as [key, label]}
+      <button
+        onclick={() => { activeTab = key as typeof activeTab; }}
+        class="flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors
+          {activeTab === key ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'}"
+      >
+        {label}
+      </button>
+    {/each}
+  </div>
+
+  {#if activeTab === "profile"}
+    <div class="space-y-4 rounded-lg border border-border bg-card p-6">
+      <h2 class="text-lg font-medium">{m.settings_profile()}</h2>
+      <div class="space-y-2">
+        <label for="name" class="text-sm font-medium">{m.settings_name()}</label>
+        <input id="name" bind:value={name} class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+      </div>
+      <div class="space-y-2">
+        <label for="email" class="text-sm font-medium">{m.settings_email()}</label>
+        <input id="email" type="email" bind:value={email} class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" disabled />
+      </div>
+      <div class="flex items-center gap-3">
+        <button onclick={saveProfile} disabled={saveStatus === "saving"} class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50">
+          {saveStatus === "saving" ? m.settings_saving() : saveStatus === "saved" ? m.settings_saved_status() : m.settings_save()}
+        </button>
+        <button
+          id="logout-button"
+          onclick={handleLogout}
+          disabled={loggingOut}
+          class="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-destructive hover:text-destructive-foreground disabled:opacity-50"
+        >
+          {loggingOut ? "…" : m.auth_logout()}
+        </button>
+      </div>
+    </div>
+  {/if}
+
+  {#if activeTab === "embedding"}
+    <div class="space-y-4 rounded-lg border border-border bg-card p-6">
+      <h2 class="text-lg font-medium">{m.settings_embedding_title()}</h2>
+      <div class="space-y-2">
+        <label for="provider" class="text-sm font-medium">{m.settings_embedding_provider()}</label>
+        <select id="provider" bind:value={embeddingProvider} class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
+          <option value="ollama">{m.settings_embedding_provider_ollama()}</option>
+          <option value="openrouter">{m.settings_embedding_provider_openrouter()}</option>
+          <option value="voyage">{m.settings_embedding_provider_voyage()}</option>
+        </select>
+      </div>
+      <div class="space-y-2">
+        <label for="model" class="text-sm font-medium">{m.settings_embedding_model()}</label>
+        <input id="model" bind:value={embeddingModel} placeholder="nomic-embed-text" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+      </div>
+      <button onclick={saveEmbedding} disabled={saveStatus === "saving"} class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50">
+        {saveStatus === "saving" ? m.settings_saving() : saveStatus === "saved" ? m.settings_saved_status() : m.settings_embedding_save()}
+      </button>
+    </div>
+  {/if}
+
+  {#if activeTab === "danger"}
+    <div class="space-y-4 rounded-lg border border-destructive/50 bg-card p-6">
+      <h2 class="text-lg font-medium text-destructive">{m.settings_danger_title()}</h2>
+      <p class="text-sm text-muted-foreground">{m.settings_danger_description()}</p>
+      {#if !deleteConfirm}
+        <button onclick={() => { deleteConfirm = true; }} class="rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground hover:bg-destructive/90">{m.settings_delete_account()}</button>
+      {:else}
+        <div class="flex items-center gap-3">
+          <span class="text-sm font-medium">{m.settings_delete_confirm_text()}</span>
+          <button onclick={handleDeleteAccount} class="rounded-md bg-destructive px-3 py-1.5 text-sm font-medium text-destructive-foreground hover:bg-destructive/90">{m.settings_delete_confirm_yes()}</button>
+          <button onclick={() => { deleteConfirm = false; }} class="rounded-md border border-border px-3 py-1.5 text-sm font-medium hover:bg-accent">{m.action_cancel()}</button>
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  <p class="mt-4 text-xs text-muted-foreground">
+    {m.settings_theme()}: {themeStore.value} ({themeStore.isDark ? "dark" : "light"})
+  </p>
+</div>

package/frontend/svelte.config.js

@@ -0,0 +1,15 @@
+import adapter from "@sveltejs/adapter-node";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: [vitePreprocess()],
+  kit: {
+    adapter: adapter(),
+    alias: {
+      "$lib/*": "src/lib/*",
+    },
+  },
+};
+
+export default config;