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

package/dist/utils/color-space.js

@@ -0,0 +1,90 @@
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+/** Accepts `#rgb`, `#rrggbb` and the same without `#`. Returns lowercase `#rrggbb`, or null. */
+export function normalizeHex(input) {
+    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) {
+    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 }) {
+    const channel = (n) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
+    return `#${channel(r)}${channel(g)}${channel(b)}`;
+}
+export function rgbToHsv({ r, g, b }) {
+    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 }) {
+    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) => {
+    const rgb = hexToRgb(hex);
+    return rgb ? rgbToHsv(rgb) : null;
+};
+export const hsvToHex = (hsv) => rgbToHex(hsvToRgb(hsv));
+/** WCAG relative luminance of an sRGB color. */
+function luminance({ r, g, b }) {
+    const lin = (c) => {
+        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, b) {
+    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/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.6.0-beta.2",
+  "version": "6.6.0-beta.20",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -31,17 +31,20 @@
     ".": {
       "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"
     },
-    "./styles/base.css": "./src/lib/styles/base.css",
-    "./styles/themes/*": "./src/lib/styles/themes/*"
+    "./styles/base.css": "./src/lib/styles/base.css"
   },
   "files": [
     "dist",
@@ -58,11 +61,11 @@
     "bits-ui": "^2.18.0",
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
-    "three": "^0.186.1",
-    "@selvajs/compute": "^4.2.1",
-    "@selvajs/schemas": "^5.2.0",
-    "@selvajs/visualization": "^1.5.0",
-    "@selvajs/solve": "^1.2.3-beta.0"
+    "three": "^0.187.0",
+    "@selvajs/compute": "^5.0.0-beta.10",
+    "@selvajs/visualization": "^1.6.0-beta.10",
+    "@selvajs/schemas": "^5.3.0-beta.3",
+    "@selvajs/solve": "^2.0.0-beta.13"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -71,30 +74,35 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@iconify/svelte": "^5.2.1",
-    "@lucide/svelte": "^1.48.0",
+    "@fontsource-variable/hanken-grotesk": "^5.3.0",
+    "@iconify/svelte": "^5.2.4",
+    "@lucide/svelte": "^1.66.0",
     "clsx": "^2.1.1",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
-    "svelte-sonner": "^1.2.1",
+    "svelte-sonner": "^1.2.2",
     "tailwind-merge": "^3.7.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@internationalized/date": "^3.12.4",
-    "@sveltejs/kit": "2.70.3",
+    "@sveltejs/kit": "3.1.1",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
-    "@types/three": "^0.186.0",
-    "bits-ui": "^2.19.3",
+    "@types/three": "^0.187.0",
+    "bits-ui": "^2.20.2",
     "rimraf": "^6.1.3",
-    "svelte": "5.57.1",
+    "svelte": "5.57.3",
     "tailwind-variants": "^3.3.1",
-    "vitest": "^5.0.2",
-    "@selvajs/visualization": "1.5.0",
-    "@selvajs/schemas": "5.2.0",
-    "@selvajs/compute": "4.2.1",
-    "@selvajs/solve": "1.2.3-beta.0",
-    "@selvajs/config": "0.0.4"
+    "vitest": "^5.0.5",
+    "@selvajs/compute": "5.0.0-beta.10",
+    "@selvajs/config": "0.0.4",
+    "@selvajs/visualization": "1.6.0-beta.10",
+    "@selvajs/schemas": "5.3.0-beta.3",
+    "@selvajs/solve": "2.0.0-beta.13"
+  },
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*"
   },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",

package/src/lib/components/ErrorScreen.svelte

@@ -3,6 +3,7 @@
 	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.js';
 
 	interface Props {
 		status?: number;
@@ -12,9 +13,12 @@
 	}
 
 	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>
 			<div class="gap-4 flex flex-col items-center text-center">
@@ -26,7 +30,7 @@
 		</Card.Header>
 		<Card.Content>
 			<div class="gap-4 flex flex-col">
-				<Callout tone="danger" title="Error">
+				<Callout tone="danger" title={t.errorTitle}>
 					{#if message}{message}{/if}
 				</Callout>
 				{#if details}
@@ -37,7 +41,7 @@
 			</div>
 		</Card.Content>
 		<Card.Footer>
-			<Button variant="outline" href={homeLink} rel="external" class="w-full">Go Home</Button>
+			<Button variant="outline" href={homeLink} rel="external" class="w-full">{t.goHome}</Button>
 		</Card.Footer>
 	</Card.Root>
 </div>