@selvajs/ui 0.9.0

package/dist/utils/debounce.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Debounce utility - delays function execution until after a specified wait time
+ * has elapsed since the last time it was invoked.
+ *
+ * Use for text inputs, search boxes, etc. where you want to wait for the user
+ * to finish typing before executing. For sliders, use throttle() instead.
+ *
+ * @param func The function to debounce
+ * @param wait The delay in milliseconds
+ * @returns A debounced version of the function with a cancel method
+ */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): ((...args: Parameters<T>) => void) & {
+    cancel: () => void;
+};

package/dist/utils/debounce.js

@@ -0,0 +1,30 @@
+/**
+ * Debounce utility - delays function execution until after a specified wait time
+ * has elapsed since the last time it was invoked.
+ *
+ * Use for text inputs, search boxes, etc. where you want to wait for the user
+ * to finish typing before executing. For sliders, use throttle() instead.
+ *
+ * @param func The function to debounce
+ * @param wait The delay in milliseconds
+ * @returns A debounced version of the function with a cancel method
+ */
+export function debounce(func, wait) {
+    let timeout = null;
+    function debounced(...args) {
+        if (timeout !== null) {
+            clearTimeout(timeout);
+        }
+        timeout = setTimeout(() => {
+            func(...args);
+            timeout = null;
+        }, wait);
+    }
+    debounced.cancel = () => {
+        if (timeout !== null) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+    };
+    return debounced;
+}

package/dist/utils/file-download.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Wrapper utilities for file downloads from Grasshopper outputs
+ * Uses the core package implementation for file handling
+ */
+import { type FileData } from '@selvajs/compute';
+/**
+ * Download file(s) from Grasshopper outputs
+ * Single files are downloaded directly, multiple files are packaged as ZIP
+ */
+export declare function downloadFiles(fileData: FileData | FileData[], fileName?: string): Promise<void>;
+/**
+ * Check if data is FileData
+ */
+export declare function isFileData(data: unknown): data is FileData;
+/**
+ * Format file size for display
+ */
+export declare function formatFileSize(bytes: number): string;
+/**
+ * Get approximate file size from base64 string
+ */
+export declare function getBase64FileSize(base64: string): number;

package/dist/utils/file-download.js

@@ -0,0 +1,93 @@
+/**
+ * Wrapper utilities for file downloads from Grasshopper outputs
+ * Uses the core package implementation for file handling
+ */
+import { downloadFileData } from '@selvajs/compute';
+import { APP_DEFAULTS } from '../constants';
+const MIME_BY_EXT = {
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.webp': 'image/webp',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.json': 'application/json',
+    '.txt': 'text/plain',
+    '.csv': 'text/csv',
+    '.xml': 'application/xml',
+    '.pdf': 'application/pdf',
+    '.3dm': 'model/vnd.3dm',
+    '.obj': 'model/obj',
+    '.stl': 'model/stl'
+};
+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);
+}
+/**
+ * Download file(s) from Grasshopper outputs
+ * Single files are downloaded directly, multiple files are packaged as ZIP
+ */
+export async function downloadFiles(fileData, fileName = 'grasshopper-output') {
+    try {
+        const filesArray = Array.isArray(fileData) ? fileData : [fileData];
+        if (filesArray.length === 0) {
+            console.warn('[FileDownload] No files to download');
+            return;
+        }
+        if (filesArray.length === 1) {
+            saveSingleFile(filesArray[0]);
+            return;
+        }
+        await downloadFileData(filesArray, fileName);
+    }
+    catch (error) {
+        console.error('[FileDownload] Error downloading files:', error);
+        throw error;
+    }
+}
+/**
+ * Check if data is FileData
+ */
+export function isFileData(data) {
+    return (typeof data === 'object' &&
+        data !== null &&
+        'fileName' in data &&
+        'data' in data &&
+        'isBase64Encoded' in data);
+}
+/**
+ * Format file size for display
+ */
+export function formatFileSize(bytes) {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = APP_DEFAULTS.FILE_SIZE.BYTES_PER_KB;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+}
+/**
+ * Get approximate file size from base64 string
+ */
+export function getBase64FileSize(base64) {
+    // Base64 encoded string is approximately 33% larger than original
+    return Math.ceil((base64.length * 3) / 4);
+}

package/dist/utils/loadScript.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Load an external script from a CDN with automatic deduplication.
+ * All calls to load the same script will share a single promise,
+ * preventing duplicate script tags and race conditions.
+ *
+ * @param src The script URL
+ * @param options Script attributes (crossOrigin, async, etc.)
+ * @returns Promise that resolves when script is loaded
+ */
+export declare function loadScript(src: string, options?: {
+    crossOrigin?: string;
+    async?: boolean;
+    defer?: boolean;
+}): Promise<void>;

package/dist/utils/loadScript.js

@@ -0,0 +1,38 @@
+const scriptLoaders = new Map();
+/**
+ * Load an external script from a CDN with automatic deduplication.
+ * All calls to load the same script will share a single promise,
+ * preventing duplicate script tags and race conditions.
+ *
+ * @param src The script URL
+ * @param options Script attributes (crossOrigin, async, etc.)
+ * @returns Promise that resolves when script is loaded
+ */
+export function loadScript(src, options) {
+    if (scriptLoaders.has(src)) {
+        return scriptLoaders.get(src);
+    }
+    if (document.querySelector(`script[src="${src}"]`)) {
+        const resolved = Promise.resolve();
+        scriptLoaders.set(src, resolved);
+        return resolved;
+    }
+    const promise = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = src;
+        if (options?.crossOrigin)
+            script.crossOrigin = options.crossOrigin;
+        if (options?.async !== undefined)
+            script.async = options.async;
+        if (options?.defer !== undefined)
+            script.defer = options.defer;
+        script.onload = () => resolve();
+        script.onerror = () => {
+            scriptLoaders.delete(src);
+            reject(new Error(`Failed to load script: ${src}`));
+        };
+        document.head.appendChild(script);
+    });
+    scriptLoaders.set(src, promise);
+    return promise;
+}

package/dist/utils.d.ts

@@ -0,0 +1,12 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, 'child'> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};

package/dist/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@selvajs/ui",
+  "version": "0.9.0",
+  "description": "Shared UI components and utilities for Selva applications",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./primitives": {
+      "types": "./dist/components/primitives/index.d.ts",
+      "svelte": "./dist/components/primitives/index.js"
+    },
+    "./layout": {
+      "types": "./dist/components/layout/index.d.ts",
+      "svelte": "./dist/components/layout/index.js"
+    },
+    "./compute": {
+      "types": "./dist/components/compute/index.d.ts",
+      "svelte": "./dist/components/compute/index.js"
+    },
+    "./viewer": {
+      "types": "./dist/components/viewer/index.d.ts",
+      "svelte": "./dist/components/viewer/index.js"
+    },
+    "./footer": {
+      "types": "./dist/contexts/footerContext.svelte.d.ts",
+      "svelte": "./dist/contexts/footerContext.svelte.js"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js"
+    },
+    "./styles/base.css": "./src/lib/styles/base.css",
+    "./styles/themes/*": "./src/lib/styles/themes/*"
+  },
+  "files": [
+    "dist",
+    "src/lib",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "!src/lib/**/*.test.*",
+    "!src/lib/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "@selvajs/compute": "1.5.2-beta.7",
+    "@sveltejs/kit": "^2",
+    "bits-ui": "^2.15.4",
+    "svelte": "^5",
+    "tailwind-variants": "^3.2.2",
+    "three": "^0.184.0"
+  },
+  "peerDependenciesMeta": {
+    "three": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.6",
+    "@iconify/svelte": "^5.2.1",
+    "@lucide/svelte": "^1.11.0",
+    "clsx": "^2.1.1",
+    "mode-watcher": "^1.1.0",
+    "paneforge": "^1.0.2",
+    "svelte-sonner": "^1.1.1",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
+    "@selvajs/schemas": "1.1.1"
+  },
+  "devDependencies": {
+    "@internationalized/date": "^3.12.1",
+    "@sveltejs/kit": "2.58.0",
+    "@types/three": "^0.184.0",
+    "bits-ui": "^2.18.0",
+    "svelte": "5.55.5",
+    "tailwind-variants": "^3.2.2",
+    "@selvajs/config": "0.0.0"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "rm -rf dist && vite build && pnpm prepack",
+    "build:fast": "svelte-kit sync && svelte-package",
+    "build:watch": "svelte-kit sync && svelte-package --watch",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
+  }
+}

package/src/lib/components/ErrorScreen.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { AlertCircle } from '@lucide/svelte';
+	import * as Card from './primitives/card/index.js';
+	import { Button } from './primitives/button/index.js';
+
+	interface Props {
+		status?: number;
+		message?: string;
+		details?: string;
+		homeLink?: string;
+	}
+
+	let { status = 500, message, details, homeLink = '/' }: Props = $props();
+</script>
+
+<div class="p-4 flex min-h-screen 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">
+				<div class="p-3 rounded-full bg-destructive/10">
+					<AlertCircle class="h-8 w-8 text-destructive" />
+				</div>
+			</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">
+						{details}
+					</p>
+				</div>
+			{/if}
+		</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>
+	</Card.Root>
+</div>