@selvajs/ui 6.6.0-beta.2 → 6.6.0-beta.20

package/src/lib/utils/color-space.ts

@@ -0,0 +1,107 @@
+export interface Rgb {
+	r: number;
+	g: number;
+	b: number;
+}
+
+/** h in [0, 360), s and v in [0, 1]. */
+export interface Hsv {
+	h: number;
+	s: number;
+	v: number;
+}
+
+const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));
+
+/** Accepts `#rgb`, `#rrggbb` and the same without `#`. Returns lowercase `#rrggbb`, or null. */
+export function normalizeHex(input: string): string | null {
+	const raw = input.trim().replace(/^#/, '');
+	if (/^[0-9a-f]{3}$/i.test(raw)) {
+		return `#${raw
+			.split('')
+			.map((c) => c + c)
+			.join('')
+			.toLowerCase()}`;
+	}
+	if (/^[0-9a-f]{6}$/i.test(raw)) return `#${raw.toLowerCase()}`;
+	return null;
+}
+
+export function hexToRgb(hex: string): Rgb | null {
+	const normalized = normalizeHex(hex);
+	if (!normalized) return null;
+	return {
+		r: parseInt(normalized.slice(1, 3), 16),
+		g: parseInt(normalized.slice(3, 5), 16),
+		b: parseInt(normalized.slice(5, 7), 16)
+	};
+}
+
+export function rgbToHex({ r, g, b }: Rgb): string {
+	const channel = (n: number) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
+	return `#${channel(r)}${channel(g)}${channel(b)}`;
+}
+
+export function rgbToHsv({ r, g, b }: Rgb): Hsv {
+	const rn = r / 255;
+	const gn = g / 255;
+	const bn = b / 255;
+	const max = Math.max(rn, gn, bn);
+	const delta = max - Math.min(rn, gn, bn);
+
+	let h = 0;
+	if (delta !== 0) {
+		if (max === rn) h = ((gn - bn) / delta) % 6;
+		else if (max === gn) h = (bn - rn) / delta + 2;
+		else h = (rn - gn) / delta + 4;
+		h *= 60;
+		if (h < 0) h += 360;
+	}
+	return { h, s: max === 0 ? 0 : delta / max, v: max };
+}
+
+export function hsvToRgb({ h, s, v }: Hsv): Rgb {
+	const c = v * s;
+	const hp = (((h % 360) + 360) % 360) / 60;
+	const x = c * (1 - Math.abs((hp % 2) - 1));
+	const [r1, g1, b1] =
+		hp < 1
+			? [c, x, 0]
+			: hp < 2
+				? [x, c, 0]
+				: hp < 3
+					? [0, c, x]
+					: hp < 4
+						? [0, x, c]
+						: hp < 5
+							? [x, 0, c]
+							: [c, 0, x];
+	const m = v - c;
+	return { r: (r1 + m) * 255, g: (g1 + m) * 255, b: (b1 + m) * 255 };
+}
+
+export const hexToHsv = (hex: string): Hsv | null => {
+	const rgb = hexToRgb(hex);
+	return rgb ? rgbToHsv(rgb) : null;
+};
+
+export const hsvToHex = (hsv: Hsv): string => rgbToHex(hsvToRgb(hsv));
+
+/** WCAG relative luminance of an sRGB color. */
+function luminance({ r, g, b }: Rgb): number {
+	const lin = (c: number) => {
+		const n = c / 255;
+		return n <= 0.04045 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
+	};
+	return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+/** WCAG contrast ratio between two hex colors, 1 to 21. Null if either isn't a hex color. */
+export function contrastRatio(a: string, b: string): number | null {
+	const ra = hexToRgb(a);
+	const rb = hexToRgb(b);
+	if (!ra || !rb) return null;
+	const la = luminance(ra);
+	const lb = luminance(rb);
+	return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}

package/src/lib/utils/file-download.ts

@@ -1,6 +1,7 @@
-import { downloadFileDataByRoot, type FileData } from '@selvajs/compute/core';
+import { decodeBase64ToBinary, downloadFileDataByRoot, type FileData } from '@selvajs/compute/core';
 import { SvelteMap } from 'svelte/reactivity';
 import { APP_DEFAULTS } from '../constants';
+import { saveBlob } from './host-files';
 
 export const MIME_BY_EXT: Record<string, string> = {
 	'.png': 'image/png',
@@ -19,26 +20,15 @@ export const MIME_BY_EXT: Record<string, string> = {
 	'.stl': 'model/stl'
 };
 
-function saveSingleFile(file: FileData): void {
+function saveSingleFile(file: FileData): Promise<boolean> {
 	const ext = (file.fileType ?? '').toLowerCase();
 	const mime = MIME_BY_EXT[ext] ?? 'application/octet-stream';
 
-	let blob: 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 content = file.isBase64Encoded ? decodeBase64ToBinary(file.data) : file.data;
+	// decodeBase64ToBinary returns an ArrayBuffer-backed copy, never a SharedArrayBuffer view.
+	const blob = new Blob([content as BlobPart], { 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);
+	return saveBlob(blob, `${file.fileName}${file.fileType ?? ''}`);
 }
 
 export async function downloadFiles(
@@ -53,14 +43,14 @@ export async function downloadFiles(
 			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);
 		throw error;

package/src/lib/utils/host-files.ts

@@ -0,0 +1,61 @@
+// 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.
+
+/** 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>;
+
+let saver: BlobSaver = saveWithAnchor;
+let picker: FilePicker = pickWithInput;
+
+export function setBlobSaver(next: BlobSaver): void {
+	saver = next;
+}
+
+export function setFilePicker(next: FilePicker): void {
+	picker = next;
+}
+
+export function saveBlob(blob: Blob, fileName: string): Promise<boolean> {
+	return saver(blob, fileName);
+}
+
+export function pickFile(options: { accept: string }): Promise<File | null> {
+	return picker(options);
+}
+
+async function saveWithAnchor(blob: Blob, fileName: string): Promise<boolean> {
+	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 }: { accept: string }): Promise<File | null> {
+	return new Promise((resolve) => {
+		const input = document.createElement('input');
+		input.type = 'file';
+		input.accept = accept;
+		input.style.display = 'none';
+
+		const settle = (file: File | null) => {
+			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/src/lib/utils/loadScript.ts

@@ -8,6 +8,8 @@ export function loadScript(
 	src: string,
 	options?: {
 		crossOrigin?: string;
+		/** Subresource Integrity hash. A cross-origin script also needs `crossOrigin`. */
+		integrity?: string;
 		async?: boolean;
 		defer?: boolean;
 	}
@@ -26,6 +28,7 @@ export function loadScript(
 		const script = document.createElement('script');
 		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) script.defer = options.defer;
 

package/src/lib/utils/webp-to-png.ts

@@ -0,0 +1,48 @@
+// 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: string, acceptedFormats: readonly string[]): boolean {
+	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: string, acceptedFormats: readonly string[]): boolean {
+	const ending = fileEnding.toLowerCase();
+	if (acceptedFormats.length === 0 || acceptedFormats.includes(ending)) return true;
+	return shouldConvertWebp(ending, acceptedFormats);
+}
+
+const ascii = (bytes: Uint8Array, start: number, end: number) =>
+	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: Blob): Promise<boolean> {
+	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: Blob): Promise<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<Blob>((resolve, reject) =>
+			canvas.toBlob(
+				(png) => (png ? resolve(png) : reject(new Error('PNG encoding failed'))),
+				'image/png'
+			)
+		);
+	} finally {
+		bitmap.close();
+	}
+}

package/dist/components/primitives/theme-switcher/ThemeSwitcher.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { themeStore, type Theme } from '../../../theme/themeStore.svelte';
-	import * as Select from '../select';
-	import { Palette } from '@lucide/svelte';
-
-	const themes: { value: Theme; label: string; description: string }[] = [
-		{ value: 'neutral', label: 'Neutral', description: 'Classic grayscale' },
-		{ value: 'selva', label: 'Selva', description: 'Forest green' },
-		{ value: 'ocean', label: 'Ocean', description: 'Calm blue tones' },
-		{ value: 'cyberpunk', label: 'Cyberpunk', description: 'Vibrant neon colors' }
-	];
-
-	let value = $state(themeStore.current);
-
-	$effect(() => {
-		if (value) {
-			themeStore.set(value as Theme);
-		}
-	});
-
-	const triggerContent = $derived(themes.find((t) => t.value === value)?.label ?? 'Select theme');
-</script>
-
-<Select.Root type="single" bind:value>
-	<Select.Trigger class="gap-2 w-35">
-		<Palette size={14} />
-		<span>{triggerContent}</span>
-	</Select.Trigger>
-	<Select.Content>
-		{#each themes as theme (theme.value)}
-			<Select.Item value={theme.value} label={theme.label}>
-				<div class="flex flex-col items-start">
-					<span class="font-medium text-sm">{theme.label}</span>
-					<span class="text-xs text-muted-foreground">{theme.description}</span>
-				</div>
-			</Select.Item>
-		{/each}
-	</Select.Content>
-</Select.Root>

package/dist/components/primitives/theme-switcher/ThemeSwitcher.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const ThemeSwitcher: import("svelte").Component<Record<string, never>, {}, "">;
-type ThemeSwitcher = ReturnType<typeof ThemeSwitcher>;
-export default ThemeSwitcher;

package/dist/components/primitives/theme-switcher/index.d.ts

@@ -1 +0,0 @@
-export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/dist/components/primitives/theme-switcher/index.js

@@ -1 +0,0 @@
-export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/dist/components/viewer/MeshMetadataDialog.svelte

@@ -1,126 +0,0 @@
-<script lang="ts">
-	import * as Dialog from '../primitives/dialog/index.js';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
-
-	const locale = getLocaleContext();
-	const t = $derived(locale.messages);
-
-	interface Props {
-		open: boolean;
-		metadata: Record<string, any> | null;
-		meshName: string | null;
-		onOpenChange: (open: boolean) => void;
-		isFullscreen?: boolean;
-	}
-
-	const EXCLUDED_KEYS = new Set(['name', 'layer', 'id']);
-
-	let {
-		open = $bindable(),
-		metadata,
-		meshName,
-		onOpenChange,
-		isFullscreen = false
-	}: Props = $props();
-
-	$effect(() => {
-		document.body.toggleAttribute('data-viewer-fullscreen', isFullscreen);
-	});
-
-	const getFilteredMetadata = () => {
-		if (!metadata) return {};
-		const entries = Object.entries(metadata).filter(([key]) => !EXCLUDED_KEYS.has(key));
-		const result: Record<string, unknown> = {};
-		for (const [key, value] of entries) {
-			if (
-				key === 'metadata' &&
-				typeof value === 'object' &&
-				value !== null &&
-				!Array.isArray(value)
-			) {
-				Object.assign(result, value);
-			} else {
-				result[key] = value;
-			}
-		}
-		return result;
-	};
-</script>
-
-<Dialog.Root bind:open {onOpenChange}>
-	<Dialog.Content variant="flush" class="min-w-60 max-w-xs w-auto">
-		{#if meshName}
-			<div class="px-4 pt-3 pb-2 border-b">
-				<Dialog.Title size="sm">{meshName}</Dialog.Title>
-			</div>
-		{:else}
-			<Dialog.Title class="sr-only">{t.objectFallbackName}</Dialog.Title>
-		{/if}
-
-		<div class="max-h-80 overflow-y-auto">
-			{#if !metadata || Object.keys(getFilteredMetadata()).length === 0}
-				<p class="px-4 py-3 text-xs text-muted-foreground">{t.noMetadata}</p>
-			{:else}
-				<table class="text-xs w-full border-collapse">
-					<tbody>
-						{#each Object.entries(getFilteredMetadata()) as [key, value] (key)}
-							<tr class="border-b border-border/60 transition-colors hover:bg-muted/40">
-								<th
-									scope="row"
-									class="px-4 py-2 font-normal text-left align-top whitespace-nowrap text-muted-foreground"
-									>{key}</th
-								>
-								<td class="px-4 py-2 text-right align-top text-foreground">
-									{#if typeof value === 'object' && value !== null}
-										{#if Array.isArray(value)}
-											<div class="space-y-1 text-left">
-												{#each value as item, index (index)}
-													{#if typeof item === 'object'}
-														<div class="space-y-0.5">
-															{#each Object.entries(item) as [k, v] (k)}
-																<div class="gap-2 flex">
-																	<span class="shrink-0 text-muted-foreground">{k}:</span>
-																	<span>{v}</span>
-																</div>
-															{/each}
-														</div>
-													{:else}
-														<div>{item}</div>
-													{/if}
-												{/each}
-											</div>
-										{:else}
-											<div class="space-y-0.5 text-left">
-												{#each Object.entries(value) as [k, v] (k)}
-													<div class="gap-2 flex">
-														<span class="shrink-0 text-muted-foreground">{k}:</span>
-														<span>{v}</span>
-													</div>
-												{/each}
-											</div>
-										{/if}
-									{:else if typeof value === 'number'}
-										<span class="font-mono">{value}</span>
-									{:else if typeof value === 'boolean'}
-										<span class={value ? 'text-success' : 'text-muted-foreground'}
-											>{value ? 'true' : 'false'}</span
-										>
-									{:else}
-										<span class="break-all">{value}</span>
-									{/if}
-								</td>
-							</tr>
-						{/each}
-					</tbody>
-				</table>
-			{/if}
-		</div>
-	</Dialog.Content>
-</Dialog.Root>
-
-<style>
-	:global([data-viewer-fullscreen] [data-slot='dialog-content']),
-	:global([data-viewer-fullscreen] [data-slot='dialog-overlay']) {
-		z-index: 10001;
-	}
-</style>

package/dist/components/viewer/MeshMetadataDialog.svelte.d.ts

@@ -1,10 +0,0 @@
-interface Props {
-    open: boolean;
-    metadata: Record<string, any> | null;
-    meshName: string | null;
-    onOpenChange: (open: boolean) => void;
-    isFullscreen?: boolean;
-}
-declare const MeshMetadataDialog: import("svelte").Component<Props, {}, "open">;
-type MeshMetadataDialog = ReturnType<typeof MeshMetadataDialog>;
-export default MeshMetadataDialog;

package/dist/styles/themes/cyberpunk.css

@@ -1,98 +0,0 @@
-:root {
-	--radius: 0.625rem;
-
-	--background: oklch(0.98 0.01 300);
-	--foreground: oklch(0.18 0.05 300);
-
-	--card: oklch(0.97 0.015 300);
-	--card-foreground: oklch(0.18 0.05 300);
-
-	--popover: oklch(0.97 0.015 300);
-	--popover-foreground: oklch(0.18 0.05 300);
-
-	--primary: oklch(0.7 0.28 295);
-	--primary-foreground: oklch(0.98 0 0);
-
-	--secondary: oklch(0.9 0.05 300);
-	--secondary-foreground: oklch(0.18 0.05 300);
-
-	--muted: oklch(0.92 0.015 300);
-	--muted-foreground: oklch(0.5 0.03 300);
-
-	--accent: oklch(0.78 0.2 305);
-	--accent-foreground: oklch(0.12 0.05 300);
-
-	--destructive: oklch(0.62 0.25 20);
-	--destructive-foreground: oklch(0.98 0 0);
-
-	--border: oklch(0.86 0.02 300);
-	--input: oklch(0.92 0.015 300);
-	--ring: oklch(0.75 0.18 295);
-
-	--chart-1: oklch(0.7 0.28 295);
-	--chart-2: oklch(0.8 0.24 305);
-	--chart-3: oklch(0.65 0.22 310);
-	--chart-4: oklch(0.55 0.18 290);
-	--chart-5: oklch(0.85 0.15 300);
-
-	--sidebar: oklch(0.97 0.015 300);
-	--sidebar-foreground: oklch(0.18 0.05 300);
-	--sidebar-primary: oklch(0.7 0.28 295);
-	--sidebar-primary-foreground: oklch(0.98 0 0);
-	--sidebar-accent: oklch(0.92 0.015 300);
-	--sidebar-accent-foreground: oklch(0.18 0.05 300);
-	--sidebar-border: oklch(0.86 0.02 300);
-	--sidebar-ring: oklch(0.75 0.18 295);
-
-	--inputparam: oklch(0.86 0.02 300);
-	--outputparam: oklch(0.86 0.04 305);
-	--downloadparam: oklch(0.86 0.05 295);
-}
-
-.dark {
-	--background: oklch(0.18 0.05 300);
-	--foreground: oklch(0.98 0 0);
-
-	--card: oklch(0.22 0.05 300);
-	--card-foreground: oklch(0.98 0 0);
-
-	--popover: oklch(0.22 0.05 300);
-	--popover-foreground: oklch(0.98 0 0);
-
-	--primary: oklch(0.7 0.28 295);
-	--primary-foreground: oklch(0.18 0.05 300);
-
-	--secondary: oklch(0.28 0.03 300);
-	--secondary-foreground: oklch(0.98 0 0);
-
-	--muted: oklch(0.28 0.03 300);
-	--muted-foreground: oklch(0.75 0.04 300);
-
-	--accent: oklch(0.22 0.05 305);
-	--accent-foreground: oklch(0.98 0 0);
-
-	--destructive: oklch(0.55 0.22 20);
-	--destructive-foreground: oklch(0.18 0.05 300);
-
-	--border: oklch(0.35 0.04 300);
-	--input: oklch(0.3 0.03 300);
-	--ring: oklch(0.75 0.18 295);
-
-	--chart-1: oklch(0.7 0.28 295);
-	--chart-2: oklch(0.8 0.24 305);
-	--chart-3: oklch(0.65 0.22 310);
-	--chart-4: oklch(0.32 0.03 300);
-	--chart-5: oklch(0.85 0.15 300);
-
-	--sidebar: oklch(0.18 0.05 300);
-	--sidebar-foreground: oklch(0.98 0 0);
-	--sidebar-primary: oklch(0.7 0.28 295);
-	--sidebar-primary-foreground: oklch(0.18 0.05 300);
-	--sidebar-accent: oklch(0.28 0.03 300);
-	--sidebar-accent-foreground: oklch(0.98 0 0);
-	--sidebar-border: oklch(0.35 0.04 300);
-	--sidebar-ring: oklch(0.75 0.18 295);
-
-	--inputparam: oklch(0.12 0.03 300);
-	--outputparam: oklch(0.32 0.04 305);
-}

package/dist/styles/themes/neutral.css

@@ -1,72 +0,0 @@
-:root {
-	--radius: 0.625rem;
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.205 0 0);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.97 0 0);
-	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
-	--destructive: oklch(0.577 0.245 27.325);
-	--border: oklch(87.61% 0.0001 271.152);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
-	--sidebar-primary: oklch(0.205 0 0);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
-	--sidebar-ring: oklch(0.708 0 0);
-	--inputparam: oklch(100% 0.00011 271.152);
-	--outputparam: oklch(100% 0.00011 271.152);
-}
-
-.dark {
-	--background: oklch(0.145 0 0);
-	--foreground: oklch(0.985 0 0);
-	--card: oklch(0.205 0 0);
-	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.205 0 0);
-	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.922 0 0);
-	--primary-foreground: oklch(0.205 0 0);
-	--secondary: oklch(0.269 0 0);
-	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.269 0 0);
-	--muted-foreground: oklch(0.708 0 0);
-	--accent: oklch(0.269 0 0);
-	--accent-foreground: oklch(0.985 0 0);
-	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.556 0 0);
-	--chart-1: oklch(0.488 0.243 264.376);
-	--chart-2: oklch(0.696 0.17 162.48);
-	--chart-3: oklch(0.769 0.188 70.08);
-	--chart-4: oklch(0.627 0.265 303.9);
-	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.205 0 0);
-	--sidebar-foreground: oklch(0.985 0 0);
-	--sidebar-primary: oklch(0.488 0.243 264.376);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.269 0 0);
-	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.556 0 0);
-	--inputparam: oklch(0% 0 271.152);
-	--outputparam: oklch(23.574% 0.00241 67.461);
-}