@selvajs/ui 6.5.1-beta.0 → 6.6.0-beta.11

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/alert/alert.svelte

@@ -1,44 +0,0 @@
-<script lang="ts" module>
-	import { type VariantProps, tv } from 'tailwind-variants';
-
-	export const alertVariants = tv({
-		base: 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
-		variants: {
-			variant: {
-				default: 'bg-card text-card-foreground',
-				destructive:
-					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current'
-			}
-		},
-		defaultVariants: {
-			variant: 'default'
-		}
-	});
-
-	export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
-</script>
-
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '../../../utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		variant = 'default',
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		variant?: AlertVariant;
-	} = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="alert"
-	class={cn(alertVariants({ variant }), className)}
-	{...restProps}
-	role="alert"
->
-	{@render children?.()}
-</div>

package/dist/components/primitives/alert/alert.svelte.d.ts

@@ -1,26 +0,0 @@
-import { type VariantProps } from 'tailwind-variants';
-export declare const alertVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: "bg-card text-card-foreground";
-        destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current";
-    };
-}, undefined, "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
-    variant: {
-        default: "bg-card text-card-foreground";
-        destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: "bg-card text-card-foreground";
-        destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current";
-    };
-}, undefined>>;
-export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
-import type { HTMLAttributes } from 'svelte/elements';
-import { type WithElementRef } from '../../../utils.js';
-type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-    variant?: AlertVariant;
-};
-declare const Alert: import("svelte").Component<$$ComponentProps, {}, "ref">;
-type Alert = ReturnType<typeof Alert>;
-export default Alert;

package/dist/components/primitives/alert/index.d.ts

@@ -1,5 +0,0 @@
-import Root from './alert.svelte';
-import Description from './alert-description.svelte';
-import Title from './alert-title.svelte';
-export { alertVariants, type AlertVariant } from './alert.svelte';
-export { Root, Description, Title, Root as Alert, Description as AlertDescription, Title as AlertTitle };

package/dist/components/primitives/alert/index.js

@@ -1,7 +0,0 @@
-import Root from './alert.svelte';
-import Description from './alert-description.svelte';
-import Title from './alert-title.svelte';
-export { alertVariants } from './alert.svelte';
-export { Root, Description, Title, 
-//
-Root as Alert, Description as AlertDescription, Title as AlertTitle };

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 class="min-w-60 max-w-xs p-0 gap-0 w-auto overflow-hidden">
-		{#if meshName}
-			<div class="px-4 pt-3 pb-2 border-b">
-				<Dialog.Title class="text-sm font-semibold">{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-green-500' : '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/src/lib/components/primitives/alert/alert.svelte

@@ -1,44 +0,0 @@
-<script lang="ts" module>
-	import { type VariantProps, tv } from 'tailwind-variants';
-
-	export const alertVariants = tv({
-		base: 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
-		variants: {
-			variant: {
-				default: 'bg-card text-card-foreground',
-				destructive:
-					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current'
-			}
-		},
-		defaultVariants: {
-			variant: 'default'
-		}
-	});
-
-	export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
-</script>
-
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		variant = 'default',
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		variant?: AlertVariant;
-	} = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="alert"
-	class={cn(alertVariants({ variant }), className)}
-	{...restProps}
-	role="alert"
->
-	{@render children?.()}
-</div>

package/src/lib/components/primitives/alert/index.ts

@@ -1,14 +0,0 @@
-import Root from './alert.svelte';
-import Description from './alert-description.svelte';
-import Title from './alert-title.svelte';
-export { alertVariants, type AlertVariant } from './alert.svelte';
-
-export {
-	Root,
-	Description,
-	Title,
-	//
-	Root as Alert,
-	Description as AlertDescription,
-	Title as AlertTitle
-};

package/src/lib/components/viewer/MeshMetadataDialog.svelte

@@ -1,126 +0,0 @@
-<script lang="ts">
-	import * as Dialog from '../primitives/dialog/index.js';
-	import { getLocaleContext } from '$lib/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 class="min-w-60 max-w-xs p-0 gap-0 w-auto overflow-hidden">
-		{#if meshName}
-			<div class="px-4 pt-3 pb-2 border-b">
-				<Dialog.Title class="text-sm font-semibold">{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-green-500' : '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>