@selvajs/ui 6.5.1-beta.1 → 6.6.0-beta.12

package/dist/schema/visibility-rules.js

@@ -1,3 +1,4 @@
+import { isFileData } from '../utils/file-download';
 const toStringArray = (value) => {
     if (Array.isArray(value))
         return value.map(String);
@@ -50,6 +51,9 @@ export function evaluateVisibility(item, values) {
     if ('visible' in item && item.visible === false) {
         return { visible: false, disabled: false };
     }
+    if (item.type === 'output' && drawsNothing(item, values[item.paramId])) {
+        return { visible: false, disabled: false };
+    }
     if (!item.visibilityCondition?.rules)
         return { visible: true, disabled: false };
     const { action = 'show', defaultValue } = item.visibilityCondition;
@@ -57,6 +61,23 @@ export function evaluateVisibility(item, values) {
     const actionFn = ACTIONS[action] ?? ACTIONS.show;
     return actionFn(met, defaultValue);
 }
+/**
+ * An image or chart output has nothing to draw until a solve returns its data, and an empty
+ * preview box would hold its group, tab and pane open; it counts as hidden until then. A dynamic
+ * value list output never draws: it only feeds the options of an input.
+ */
+function drawsNothing(item, value) {
+    switch (item.widgetType) {
+        case 'image':
+            return !(Array.isArray(value) ? value.some(isFileData) : isFileData(value));
+        case 'chart':
+            return value === undefined || value === null || value === '';
+        case 'dynamicValueList':
+            return true;
+        default:
+            return false;
+    }
+}
 /** Must stay identical to the key the renderers use in their `{#each}` blocks. */
 export function itemKey(item) {
     return item.type === 'linebreak' ? item.id : item.paramId;

package/dist/styles/base.css

@@ -3,15 +3,19 @@
 :root {
 	--radius: 0.625rem;
 	--header-h: 3.5rem;
-	--page-px: 1.5rem;
+	--below-header-h: calc(100svh - var(--header-h));
+	--page-px: 1rem;
 	--page-py: 1.75rem;
 	--background: oklch(0.99 0 0);
 	--foreground: oklch(0.22 0 0);
-	--card: oklch(0.985 0 0);
+	/* White, so a card stands apart from background and muted; Group adds a border, since
+	   white on background alone is too close to see. */
+	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.22 0 0);
 	--popover: oklch(0.99 0 0);
 	--popover-foreground: oklch(0.22 0 0);
-	--primary: oklch(0.57 0.07 135);
+	/* 4.5:1 as text on background, card and muted, and under white text. */
+	--primary: oklch(0.52 0.07 135);
 	--primary-foreground: oklch(0.985 0 0);
 	--secondary: oklch(0.94 0 0);
 	--secondary-foreground: oklch(0.28 0 0);
@@ -19,10 +23,14 @@
 	--muted-foreground: oklch(0.5 0 0);
 	--accent: oklch(0.93 0 0);
 	--accent-foreground: oklch(0.3 0 0);
-	--destructive: oklch(0.6 0.18 27);
+	/* 4.5:1 as small text on background, card and muted, and under white text. */
+	--destructive: oklch(0.55 0.19 27);
+	--destructive-foreground: oklch(0.985 0 0);
 	--border: oklch(0.86 0 0);
-	--input: oklch(0.91 0 0);
-	--ring: oklch(0.67 0 0);
+	/* Field borders and unchecked boxes: at least 3:1 against background, card and muted, the
+	   WCAG minimum for a control's boundary. Same for the focus ring, which is drawn opaque. */
+	--input: oklch(0.62 0 0);
+	--ring: oklch(0.55 0 0);
 	--success: oklch(0.66 0.14 145);
 	--success-foreground: oklch(0.99 0 0);
 	--warning: oklch(0.78 0.12 75);
@@ -36,14 +44,16 @@
 	--chart-5: oklch(0.68 0.15 30);
 	--sidebar: oklch(0.96 0 0);
 	--sidebar-foreground: oklch(0.25 0 0);
-	--sidebar-primary: oklch(0.57 0.07 135);
+	--sidebar-primary: oklch(0.52 0.07 135);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
 	--sidebar-accent: oklch(0.93 0 0);
 	--sidebar-accent-foreground: oklch(0.3 0 0);
 	--sidebar-border: oklch(0.88 0 0);
-	--sidebar-ring: oklch(0.67 0 0);
+	--sidebar-ring: oklch(0.55 0 0);
 	--inputparam: oklch(1 0 0);
 	--outputparam: oklch(1 0 0);
+	/* Scrim behind modal dialogs and drawers. */
+	--overlay: oklch(0 0 0 / 50%);
 }
 
 .dark {
@@ -62,8 +72,9 @@
 	--accent: oklch(0.36 0 0);
 	--accent-foreground: oklch(0.92 0 0);
 	--destructive: oklch(0.7 0.17 22);
+	--destructive-foreground: oklch(0.985 0 0);
 	--border: oklch(1 0 0 / 14%);
-	--input: oklch(1 0 0 / 12%);
+	--input: oklch(1 0 0 / 36%);
 	--ring: oklch(0.74 0 0);
 	--success: oklch(0.74 0.15 145);
 	--success-foreground: oklch(0.18 0.03 145);
@@ -108,6 +119,8 @@
 	--color-accent: var(--accent);
 	--color-accent-foreground: var(--accent-foreground);
 	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-overlay: var(--overlay);
 	--color-border: var(--border);
 	--color-input: var(--input);
 	--color-ring: var(--ring);
@@ -134,9 +147,66 @@
 	--color-outputparam: var(--outputparam);
 }
 
+/* Design tokens beyond Tailwind's defaults. Reach for these before an arbitrary value: the
+   design-system lint rejects `text-[10px]`, `max-h-[85dvh]` and the like. */
+@theme {
+	/* Type tags, counters and other dense labels. */
+	--text-2xs: 0.625rem;
+	--text-2xs--line-height: calc(0.875 / 0.625);
+	/* Bottom sheets cast their shadow upward. */
+	--shadow-sheet: 0 -4px 24px oklch(0 0 0 / 12%);
+	/* Width of anything that must keep a 1rem gutter on each side of the viewport. */
+	--container-screen-inset: calc(100% - 2rem);
+}
+
+@utility max-h-dialog {
+	max-height: 85dvh;
+}
+
+@utility no-scrollbar {
+	scrollbar-width: none;
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+/* Number fields whose value is set elsewhere (a slider, a stepper) drop the browser's spinner. */
+@utility no-spinner {
+	appearance: textfield;
+	&::-webkit-inner-spin-button,
+	&::-webkit-outer-spin-button {
+		appearance: none;
+		margin: 0;
+	}
+}
+
+@utility rounded-inherit {
+	border-radius: inherit;
+}
+
+/* Phones keep a narrower gutter: at 390px every 8px of side padding is 2% of the width. */
+@media (min-width: 40rem) {
+	:root {
+		--page-px: 1.5rem;
+	}
+}
+
+/* A native select draws its arrow inside the right padding, so with the `px-2`/`px-3` every
+   caller uses it sits on the border. A drawn chevron with its own gutter fixes them all. Unlayered
+   on purpose: the gutter has to beat the callers' `px-*` utilities. Mid-grey reads on both themes,
+   since a data URI can't take `currentColor`. */
+select:not([multiple]):not([size]) {
+	appearance: none;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: right 0.625rem center;
+	background-size: 1.1em;
+	padding-inline-end: calc(1.1em + 1rem);
+}
+
 @layer base {
 	* {
-		@apply border-border outline-ring/50;
+		@apply border-border outline-ring;
 	}
 	html,
 	body {

package/dist/types/actionButton.d.ts

@@ -1,9 +1,23 @@
+import type { SolveSettlement } from '@selvajs/solve/client';
+/** A host action, listed in the panel footer's ⋯ menu after saving and loading inputs. */
 export interface ActionButton {
     id: string;
     label: string;
     /** A Svelte component, rendered before the label. */
     icon?: any;
-    variant?: 'default' | 'outline' | 'destructive' | 'secondary' | 'ghost';
-    size?: 'default' | 'sm' | 'lg';
-    onclick: () => void | Promise<void>;
+    variant?: 'default' | 'destructive';
+    /** Shows the action as unavailable instead of hiding it. Pair it with a `hint` saying why. */
+    disabled?: boolean;
+    /** A short line under the label: why it is disabled, or what it does. */
+    hint?: string;
+    /**
+     * The action needs the result for the current inputs: picking it solves first when inputs
+     * changed, waits for a solve that is running or under review, and runs `onclick` only if
+     * that solve is applied. `onclick` then receives it. A refused or failed solve already shows
+     * its messages, so the action just doesn't run.
+     */
+    solvesFirst?: boolean;
+    onclick: (settled?: Extract<SolveSettlement, {
+        status: 'applied';
+    }>) => void | Promise<void>;
 }

package/dist/types/presetLabels.d.ts

@@ -3,8 +3,8 @@
  * unset keys fall back to `DEFAULT_PRESET_LABELS`.
  */
 export interface PresetLabels {
-    saveButton: string;
-    loadButton: string;
+    saveMenuItem: string;
+    loadMenuItem: string;
     saveDialogTitle: string;
     saveDialogDescription: string;
     saveNameLabel: string;
@@ -16,6 +16,7 @@ export interface PresetLabels {
     saveTagsLabel: string;
     saveTagsPlaceholder: string;
     saveNameRequired: string;
+    saveConfirmButton: string;
     loadDialogTitle: string;
     loadDialogDescription: string;
     loadFromFileButton: string;

package/dist/types/presetLabels.js

@@ -1,9 +1,9 @@
 export const DEFAULT_PRESET_LABELS = {
-    saveButton: 'Save State',
-    loadButton: 'Load State',
-    saveDialogTitle: 'Save Parameter State',
-    saveDialogDescription: 'Save the current parameter values as a .slvp file',
-    saveNameLabel: 'State Name *',
+    saveMenuItem: 'Save inputs…',
+    loadMenuItem: 'Load inputs…',
+    saveDialogTitle: 'Save inputs',
+    saveDialogDescription: 'Save the current input values as a .slvp file',
+    saveNameLabel: 'Name *',
     saveNamePlaceholder: 'e.g., Design Option A',
     saveDescriptionLabel: 'Description',
     saveDescriptionPlaceholder: 'Optional description of this state',
@@ -11,9 +11,10 @@ export const DEFAULT_PRESET_LABELS = {
     saveAuthorPlaceholder: 'Your name or email',
     saveTagsLabel: 'Tags',
     saveTagsPlaceholder: 'facade, option-a, client-approved (comma-separated)',
-    saveNameRequired: 'Please enter a name for this state',
-    loadDialogTitle: 'Load Parameter State',
-    loadDialogDescription: 'Select a .slvp state file from your drive to load',
+    saveNameRequired: 'Please enter a name for these inputs',
+    saveConfirmButton: 'Save',
+    loadDialogTitle: 'Load inputs',
+    loadDialogDescription: 'Select a .slvp file from your drive to load',
     loadFromFileButton: 'Select .slvp File',
     loadEmptyList: 'No saved states found',
     loadImportError: 'Failed to import state: ',

package/dist/utils/file-download.js

@@ -1,6 +1,7 @@
-import { downloadFileDataByRoot } from '@selvajs/compute/core';
+import { decodeBase64ToBinary, downloadFileDataByRoot } from '@selvajs/compute/core';
 import { SvelteMap } from 'svelte/reactivity';
 import { APP_DEFAULTS } from '../constants';
+import { saveBlob } from './host-files';
 export const MIME_BY_EXT = {
     '.png': 'image/png',
     '.jpg': 'image/jpeg',
@@ -20,23 +21,10 @@ export const MIME_BY_EXT = {
 function saveSingleFile(file) {
     const ext = (file.fileType ?? '').toLowerCase();
     const mime = MIME_BY_EXT[ext] ?? 'application/octet-stream';
-    let blob;
-    if (file.isBase64Encoded) {
-        const binary = atob(file.data);
-        const bytes = new Uint8Array(binary.length);
-        for (let i = 0; i < binary.length; i++)
-            bytes[i] = binary.charCodeAt(i);
-        blob = new Blob([bytes], { type: mime });
-    }
-    else {
-        blob = new Blob([file.data], { type: mime });
-    }
-    const fullName = `${file.fileName}${file.fileType ?? ''}`;
-    const a = document.createElement('a');
-    a.href = URL.createObjectURL(blob);
-    a.download = fullName;
-    a.click();
-    URL.revokeObjectURL(a.href);
+    const content = file.isBase64Encoded ? decodeBase64ToBinary(file.data) : file.data;
+    // decodeBase64ToBinary returns an ArrayBuffer-backed copy, never a SharedArrayBuffer view.
+    const blob = new Blob([content], { type: mime });
+    return saveBlob(blob, `${file.fileName}${file.fileType ?? ''}`);
 }
 export async function downloadFiles(fileData, fileName = 'grasshopper-output') {
     try {
@@ -45,13 +33,13 @@ export async function downloadFiles(fileData, fileName = 'grasshopper-output') {
             console.warn('[FileDownload] No files to download');
             return;
         }
-        // A lone file is saved as itself rather than zipped — the one case that needs the DOM
-        // directly. Everything else, including the per-root archive split, belongs to compute.
+        // A lone file is saved as itself rather than zipped. Everything else, including the
+        // per-root archive split, belongs to compute.
         if (filesArray.length === 1) {
-            saveSingleFile(filesArray[0]);
+            await saveSingleFile(filesArray[0]);
             return;
         }
-        await downloadFileDataByRoot(filesArray, fileName);
+        await downloadFileDataByRoot(filesArray, fileName, null, { saveBlob });
     }
     catch (error) {
         console.error('[FileDownload] Error downloading files:', error);

package/dist/utils/host-files.d.ts

@@ -0,0 +1,12 @@
+/** Resolves false when the user cancelled. An anchor download always resolves true: it can't tell. */
+export type BlobSaver = (blob: Blob, fileName: string) => Promise<boolean>;
+/** `accept` is what `<input accept>` takes: `.slvp,.sps`, `image/*`. Resolves null on cancel. */
+export type FilePicker = (options: {
+    accept: string;
+}) => Promise<File | null>;
+export declare function setBlobSaver(next: BlobSaver): void;
+export declare function setFilePicker(next: FilePicker): void;
+export declare function saveBlob(blob: Blob, fileName: string): Promise<boolean>;
+export declare function pickFile(options: {
+    accept: string;
+}): Promise<File | null>;

package/dist/utils/host-files.js

@@ -0,0 +1,46 @@
+// Where a file the page offers goes, and where a file the page asks for comes from. A browser
+// gets an <a download> click and a hidden <input type=file>. A host whose WebView can't do
+// either safely (the Rhino panel) installs its own once at start-up, before the first save or pick.
+let saver = saveWithAnchor;
+let picker = pickWithInput;
+export function setBlobSaver(next) {
+    saver = next;
+}
+export function setFilePicker(next) {
+    picker = next;
+}
+export function saveBlob(blob, fileName) {
+    return saver(blob, fileName);
+}
+export function pickFile(options) {
+    return picker(options);
+}
+async function saveWithAnchor(blob, fileName) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    // Firefox only downloads from an anchor that is in the document.
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    // Revoking synchronously can abort the download: the browser pins the blob only once it starts.
+    setTimeout(() => URL.revokeObjectURL(url), 10_000);
+    return true;
+}
+function pickWithInput({ accept }) {
+    return new Promise((resolve) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = accept;
+        input.style.display = 'none';
+        const settle = (file) => {
+            input.remove();
+            resolve(file);
+        };
+        input.addEventListener('change', () => settle(input.files?.[0] ?? null), { once: true });
+        input.addEventListener('cancel', () => settle(null), { once: true });
+        document.body.appendChild(input);
+        input.click();
+    });
+}

package/dist/utils/loadScript.d.ts

@@ -4,6 +4,8 @@
  */
 export declare function loadScript(src: string, options?: {
     crossOrigin?: string;
+    /** Subresource Integrity hash. A cross-origin script also needs `crossOrigin`. */
+    integrity?: string;
     async?: boolean;
     defer?: boolean;
 }): Promise<void>;

package/dist/utils/loadScript.js

@@ -17,6 +17,8 @@ export function loadScript(src, options) {
         script.src = src;
         if (options?.crossOrigin)
             script.crossOrigin = options.crossOrigin;
+        if (options?.integrity)
+            script.integrity = options.integrity;
         if (options?.async !== undefined)
             script.async = options.async;
         if (options?.defer !== undefined)

package/dist/utils/webp-to-png.d.ts

@@ -0,0 +1,10 @@
+/** True when a WebP should go out as PNG: the input takes PNG, so a PNG is a valid value. */
+export declare function shouldConvertWebp(fileEnding: string, acceptedFormats: readonly string[]): boolean;
+/** Whether the input takes a file with this ending, counting a WebP it would get as PNG. */
+export declare function acceptsFileEnding(fileEnding: string, acceptedFormats: readonly string[]): boolean;
+/**
+ * By content, not name: image CDNs serve WebP from URLs with no extension or one naming another
+ * format. A WebP file starts `RIFF`, a 4-byte size, then `WEBP`.
+ */
+export declare function isWebp(blob: Blob): Promise<boolean>;
+export declare function webpToPng(blob: Blob): Promise<Blob>;

package/dist/utils/webp-to-png.js

@@ -0,0 +1,41 @@
+// Grasshopper's PDF export can't read WebP: the plugin's PDF library has no WebP decoder, and
+// nothing on Windows or Rhino.Compute decodes it reliably. The browser can, so a WebP picked for
+// an input that also takes PNG is re-encoded here. PNG rather than JPEG keeps transparency.
+/** True when a WebP should go out as PNG: the input takes PNG, so a PNG is a valid value. */
+export function shouldConvertWebp(fileEnding, acceptedFormats) {
+    return fileEnding === '.webp' && acceptedFormats.includes('.png');
+}
+/** Whether the input takes a file with this ending, counting a WebP it would get as PNG. */
+export function acceptsFileEnding(fileEnding, acceptedFormats) {
+    const ending = fileEnding.toLowerCase();
+    if (acceptedFormats.length === 0 || acceptedFormats.includes(ending))
+        return true;
+    return shouldConvertWebp(ending, acceptedFormats);
+}
+const ascii = (bytes, start, end) => String.fromCharCode(...bytes.subarray(start, end));
+/**
+ * By content, not name: image CDNs serve WebP from URLs with no extension or one naming another
+ * format. A WebP file starts `RIFF`, a 4-byte size, then `WEBP`.
+ */
+export async function isWebp(blob) {
+    if (blob.type === 'image/webp')
+        return true;
+    const head = new Uint8Array(await blob.slice(0, 12).arrayBuffer());
+    return head.length === 12 && ascii(head, 0, 4) === 'RIFF' && ascii(head, 8, 12) === 'WEBP';
+}
+export async function webpToPng(blob) {
+    const bitmap = await createImageBitmap(blob);
+    try {
+        const canvas = document.createElement('canvas');
+        canvas.width = bitmap.width;
+        canvas.height = bitmap.height;
+        const context = canvas.getContext('2d');
+        if (!context)
+            throw new Error('Canvas 2D context unavailable');
+        context.drawImage(bitmap, 0, 0);
+        return await new Promise((resolve, reject) => canvas.toBlob((png) => (png ? resolve(png) : reject(new Error('PNG encoding failed'))), 'image/png'));
+    }
+    finally {
+        bitmap.close();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.5.1-beta.1",
+  "version": "6.6.0-beta.12",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -31,12 +31,16 @@
     ".": {
       "selva-source": {
         "types": "./dist/index.d.ts",
-        "svelte": "./dist/index.js"
+        "svelte": "./src/lib/index.ts"
       },
       "types": "./dist/public.d.ts",
       "svelte": "./dist/public.js"
     },
     "./external": {
+      "selva-source": {
+        "types": "./dist/external/storage.d.ts",
+        "svelte": "./src/lib/external/storage.ts"
+      },
       "types": "./dist/external/storage.d.ts",
       "svelte": "./dist/external/storage.js"
     },
@@ -59,10 +63,10 @@
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
     "three": "^0.186.1",
-    "@selvajs/compute": "^4.2.1",
-    "@selvajs/schemas": "^5.2.0",
-    "@selvajs/solve": "^1.2.3-beta.0",
-    "@selvajs/visualization": "^1.5.0"
+    "@selvajs/compute": "^5.0.0-beta.8",
+    "@selvajs/solve": "^2.0.0-beta.10",
+    "@selvajs/visualization": "^1.6.0-beta.6",
+    "@selvajs/schemas": "^5.3.0-beta.1"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -71,8 +75,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@iconify/svelte": "^5.2.1",
-    "@lucide/svelte": "^1.48.0",
+    "@iconify/svelte": "^5.2.3",
+    "@lucide/svelte": "^1.61.0",
     "clsx": "^2.1.1",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
@@ -85,16 +89,16 @@
     "@sveltejs/kit": "2.70.3",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@types/three": "^0.186.0",
-    "bits-ui": "^2.19.3",
+    "bits-ui": "^2.20.2",
     "rimraf": "^6.1.3",
-    "svelte": "5.57.1",
+    "svelte": "5.57.2",
     "tailwind-variants": "^3.3.1",
-    "vitest": "^5.0.2",
+    "vitest": "^5.0.5",
+    "@selvajs/compute": "5.0.0-beta.8",
     "@selvajs/config": "0.0.4",
-    "@selvajs/compute": "4.2.1",
-    "@selvajs/visualization": "1.5.0",
-    "@selvajs/solve": "1.2.3-beta.0",
-    "@selvajs/schemas": "5.2.0"
+    "@selvajs/schemas": "5.3.0-beta.1",
+    "@selvajs/visualization": "1.6.0-beta.6",
+    "@selvajs/solve": "2.0.0-beta.10"
   },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",

package/src/lib/components/ConfirmDialog.svelte

@@ -38,20 +38,12 @@
 		<AlertDialog.Header>
 			<AlertDialog.Title>{title}</AlertDialog.Title>
 			{#if description}
-				<AlertDialog.Description class={variant === 'destructive' ? 'text-destructive' : undefined}>
-					{description}
-				</AlertDialog.Description>
+				<AlertDialog.Description>{description}</AlertDialog.Description>
 			{/if}
 		</AlertDialog.Header>
 		<AlertDialog.Footer>
 			<AlertDialog.Cancel disabled={pending}>{cancelLabel}</AlertDialog.Cancel>
-			<AlertDialog.Action
-				onclick={handleConfirm}
-				disabled={pending}
-				class={variant === 'destructive'
-					? 'text-destructive-foreground bg-destructive hover:bg-destructive/90'
-					: undefined}
-			>
+			<AlertDialog.Action onclick={handleConfirm} disabled={pending} {variant}>
 				{pending ? (pendingLabel ?? confirmLabel) : confirmLabel}
 			</AlertDialog.Action>
 		</AlertDialog.Footer>

package/src/lib/components/ErrorScreen.svelte

@@ -2,6 +2,8 @@
 	import { AlertCircle } from '@lucide/svelte';
 	import * as Card from './primitives/card/index.js';
 	import { Button } from './primitives/button/index.js';
+	import Callout from './primitives/Callout.svelte';
+	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
 
 	interface Props {
 		status?: number;
@@ -11,43 +13,35 @@
 	}
 
 	let { status = 500, message, details, homeLink = '/' }: Props = $props();
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 </script>
 
-<div class="p-4 flex min-h-screen items-center justify-center bg-background">
+<div class="p-4 flex min-h-dvh items-center justify-center bg-background">
 	<Card.Root class="max-w-md w-full">
-		<Card.Header class="text-center">
-			<div class="mb-4 flex justify-center">
+		<Card.Header>
+			<div class="gap-4 flex flex-col items-center text-center">
 				<div class="p-3 rounded-full bg-destructive/10">
-					<AlertCircle class="h-8 w-8 text-destructive" />
+					<AlertCircle class="size-8 text-destructive" />
 				</div>
+				<h1 class="text-3xl font-semibold">{status}</h1>
 			</div>
-			<Card.Title class="text-3xl">{status}</Card.Title>
 		</Card.Header>
-		<Card.Content class="space-y-4">
-			<div class="p-4 rounded-lg border border-destructive/50 bg-destructive/10">
-				<div class="gap-3 flex">
-					<AlertCircle class="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
-					<div class="flex-1">
-						<p class="text-sm font-semibold text-destructive">Error</p>
-						{#if message}
-							<p class="text-sm text-destructive/80">{message}</p>
-						{/if}
-					</div>
-				</div>
-			</div>
-
-			{#if details}
-				<div class="p-4 rounded-lg bg-muted">
-					<p class="font-mono text-sm break-all text-muted-foreground">
+		<Card.Content>
+			<div class="gap-4 flex flex-col">
+				<Callout tone="danger" title={t.errorTitle}>
+					{#if message}{message}{/if}
+				</Callout>
+				{#if details}
+					<p class="p-4 font-mono text-sm rounded-lg bg-muted break-all text-muted-foreground">
 						{details}
 					</p>
-				</div>
-			{/if}
+				{/if}
+			</div>
 		</Card.Content>
-		<Card.Footer class="gap-2 flex">
-			<Button variant="outline" class="flex-1">
-				<a href={homeLink} class="w-full" rel="external">Go Home</a>
-			</Button>
+		<Card.Footer>
+			<Button variant="outline" href={homeLink} rel="external" class="w-full">{t.goHome}</Button>
 		</Card.Footer>
 	</Card.Root>
 </div>