compote-ui 0.5.7 → 0.6.0

package/dist/components/dialog/alert-dialog.svelte

@@ -2,18 +2,7 @@
 	import PhX from '../../icons/PhX.svelte';
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import { Portal } from '@ark-ui/svelte/portal';
-
-	type Variant = 'default' | 'destructive';
-
-	type Props = {
-		open: boolean;
-		title: string;
-		description?: string | string[];
-		confirmLabel?: string;
-		cancelLabel?: string;
-		onConfirm?: () => void;
-		variant?: Variant;
-	};
+	import type { AlertDialogProps } from './dialog.types';
 
 	let {
 		open = $bindable(),
@@ -22,8 +11,12 @@
 		confirmLabel = 'Confirm',
 		cancelLabel = 'Cancel',
 		onConfirm,
-		variant = 'default'
-	}: Props = $props();
+		onCancel,
+		variant = 'default',
+		lazyMount = true,
+		unmountOnExit = true,
+		...restProps
+	}: AlertDialogProps = $props();
 
 	const confirmClass = $derived(
 		variant === 'destructive'
@@ -32,7 +25,7 @@
 	);
 </script>
 
-<Dialog.Root role="alertdialog" bind:open>
+<Dialog.Root role="alertdialog" bind:open {lazyMount} {unmountOnExit} {...restProps}>
 	<Portal>
 		<Dialog.Backdrop
 			class="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/50"
@@ -54,6 +47,7 @@
 				<div class="mt-6 flex justify-end gap-3">
 					<Dialog.CloseTrigger
 						class="inline-flex h-9 items-center justify-center rounded-md border bg-surface-1 px-4 text-sm font-medium shadow-sm transition-colors hover:bg-surface-2 hover:text-ink focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none"
+						onclick={onCancel}
 					>
 						{cancelLabel}
 					</Dialog.CloseTrigger>

package/dist/components/dialog/alert-dialog.svelte.d.ts

@@ -1,13 +1,4 @@
-type Variant = 'default' | 'destructive';
-type Props = {
-    open: boolean;
-    title: string;
-    description?: string | string[];
-    confirmLabel?: string;
-    cancelLabel?: string;
-    onConfirm?: () => void;
-    variant?: Variant;
-};
-declare const AlertDialog: import("svelte").Component<Props, {}, "open">;
+import type { AlertDialogProps } from './dialog.types';
+declare const AlertDialog: import("svelte").Component<AlertDialogProps, {}, "open">;
 type AlertDialog = ReturnType<typeof AlertDialog>;
 export default AlertDialog;

package/dist/components/dialog/dialog.svelte

@@ -1,19 +1,9 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import { cn } from 'tailwind-variants';
 	import PhX from '../../icons/PhX.svelte';
-
-	interface Props {
-		open: boolean;
-		title: string;
-		description?: string;
-		children: Snippet;
-		footer?: Snippet;
-		onClose?: () => void;
-		contentClass?: string;
-	}
+	import type { DialogProps } from './dialog.types';
 
 	let {
 		open = $bindable(),
@@ -21,12 +11,14 @@
 		description,
 		children,
 		footer,
-		onClose,
-		contentClass
-	}: Props = $props();
+		contentClass,
+		lazyMount = true,
+		unmountOnExit = true,
+		...restProps
+	}: DialogProps = $props();
 </script>
 
-<Dialog.Root bind:open lazyMount unmountOnExit>
+<Dialog.Root bind:open {lazyMount} {unmountOnExit} {...restProps}>
 	<Portal>
 		<Dialog.Backdrop
 			class="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/50"
@@ -57,7 +49,6 @@
 
 				<Dialog.CloseTrigger
 					class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-none active:opacity-50"
-					onclick={onClose}
 				>
 					<PhX class="size-4" />
 					<span class="sr-only">Close</span>

package/dist/components/dialog/dialog.svelte.d.ts

@@ -1,14 +1,5 @@
-import type { Snippet } from 'svelte';
 import { Dialog } from '@ark-ui/svelte/dialog';
-interface Props {
-    open: boolean;
-    title: string;
-    description?: string;
-    children: Snippet;
-    footer?: Snippet;
-    onClose?: () => void;
-    contentClass?: string;
-}
-declare const Dialog: import("svelte").Component<Props, {}, "open">;
+import type { DialogProps } from './dialog.types';
+declare const Dialog: import("svelte").Component<DialogProps, {}, "open">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/dist/components/dialog/dialog.types.d.ts

@@ -0,0 +1,24 @@
+import type { DialogRootBaseProps } from '@ark-ui/svelte/dialog';
+import type { Snippet } from 'svelte';
+export type { DialogRootBaseProps };
+type DialogSharedProps = Pick<DialogRootBaseProps, 'closeOnEscape' | 'closeOnInteractOutside' | 'onOpenChange' | 'lazyMount' | 'unmountOnExit'>;
+export interface DialogProps extends DialogSharedProps {
+    open: boolean;
+    title: string;
+    description?: string;
+    children: Snippet;
+    footer?: Snippet;
+    contentClass?: string;
+    initialFocusEl?: DialogRootBaseProps['initialFocusEl'];
+}
+export type AlertDialogVariant = 'default' | 'destructive';
+export interface AlertDialogProps extends DialogSharedProps {
+    open: boolean;
+    title: string;
+    description?: string | string[];
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    variant?: AlertDialogVariant;
+}

package/dist/components/dialog/dialog.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/image-crop-dialog/image-crop-dialog.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import Dialog from '../dialog/dialog.svelte';
+	import ImageCropper from '../image-cropper/image-cropper.svelte';
+	import { Button } from '../..';
+	import { cropImage, processImage } from '../../utils/image-processing';
+	import type { ImageCropperCropData } from '../image-cropper/types';
+	import type { ImageCropDialogProps } from './types';
+
+	let {
+		open = $bindable(),
+		imageSrc,
+		onConfirm,
+		onCancel,
+		title = 'Crop Image',
+		description = 'Adjust the crop area or skip to use the full image.',
+		aspectRatio = undefined,
+		processOptions = undefined,
+		showSkipCrop = true,
+		confirmLabel = 'Crop & Save',
+		skipLabel = 'Skip Crop'
+	}: ImageCropDialogProps = $props();
+
+	let getCropData = $state<(() => ImageCropperCropData) | undefined>(undefined);
+	let processing = $state(false);
+
+	async function handleCrop() {
+		processing = true;
+		try {
+			const cropData = getCropData?.();
+			if (cropData) {
+				const processed = await cropImage(imageSrc, cropData, processOptions);
+				onConfirm(processed);
+			}
+		} finally {
+			processing = false;
+		}
+	}
+
+	async function handleSkipCrop() {
+		processing = true;
+		try {
+			const processed = await processImage(imageSrc, processOptions);
+			onConfirm(processed);
+		} finally {
+			processing = false;
+		}
+	}
+</script>
+
+<Dialog bind:open {title} {description} onOpenChange={(details) => { if (!details.open) onCancel(); }}>
+	<ImageCropper bind:getCropData src={imageSrc} alt="Crop preview" {aspectRatio} />
+	{#snippet footer()}
+		<Button variant="outline" onclick={onCancel} disabled={processing}>Cancel</Button>
+		{#if showSkipCrop}
+			<Button variant="outline" onclick={handleSkipCrop} disabled={processing}>
+				{processing ? 'Processing...' : skipLabel}
+			</Button>
+		{/if}
+		<Button onclick={handleCrop} disabled={processing}>
+			{processing ? 'Processing...' : confirmLabel}
+		</Button>
+	{/snippet}
+</Dialog>

package/dist/components/image-crop-dialog/image-crop-dialog.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ImageCropDialogProps } from './types';
+declare const ImageCropDialog: import("svelte").Component<ImageCropDialogProps, {}, "open">;
+type ImageCropDialog = ReturnType<typeof ImageCropDialog>;
+export default ImageCropDialog;

package/dist/components/image-crop-dialog/types.d.ts

@@ -0,0 +1,25 @@
+import type { ProcessImageOptions } from '../../utils/image-processing';
+export interface ImageCropDialogProps {
+    /** Controls dialog open state */
+    open: boolean;
+    /** Source image (data URL, blob URL, or regular URL) */
+    imageSrc: string;
+    /** Called with the processed data URL on crop or skip */
+    onConfirm: (processedDataUrl: string) => void;
+    /** Called when the user cancels (Cancel button or clicking outside/Escape) */
+    onCancel: () => void;
+    /** Dialog title */
+    title?: string;
+    /** Dialog description */
+    description?: string;
+    /** Default aspect ratio for the cropper (undefined = free) */
+    aspectRatio?: number;
+    /** Processing options applied to both crop and skip paths */
+    processOptions?: ProcessImageOptions;
+    /** Whether to show the "Skip Crop" button (default: true) */
+    showSkipCrop?: boolean;
+    /** Label for the confirm button */
+    confirmLabel?: string;
+    /** Label for the skip button */
+    skipLabel?: string;
+}

package/dist/components/image-crop-dialog/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/image-cropper/image-cropper.svelte

@@ -2,6 +2,8 @@
 	import { ImageCropper, useImageCropper } from '@ark-ui/svelte/image-cropper';
 	import type { ImageCropperProps } from './types';
 	import { Button } from '../..';
+	import { cropImage } from '../../utils/image-processing';
+	import type { ProcessImageOptions } from '../../utils/image-processing';
 
 	let {
 		src,
@@ -11,6 +13,8 @@
 		getCroppedImage = $bindable(),
 		// eslint-disable-next-line no-useless-assignment
 		getCropData = $bindable(),
+		// eslint-disable-next-line no-useless-assignment
+		getProcessedImage = $bindable(),
 		...cropperProps
 	}: ImageCropperProps = $props();
 
@@ -43,6 +47,8 @@
 	getCroppedImage = (options) => imageCropper().getCroppedImage(options);
 	// eslint-disable-next-line no-useless-assignment
 	getCropData = () => imageCropper().getCropData();
+	// eslint-disable-next-line no-useless-assignment
+	getProcessedImage = (opts?: ProcessImageOptions) => cropImage(src, imageCropper().getCropData(), opts);
 
 	let cropData = $derived(imageCropper().getCropData());
 </script>

package/dist/components/image-cropper/image-cropper.svelte.d.ts

@@ -1,5 +1,5 @@
 import { ImageCropper } from '@ark-ui/svelte/image-cropper';
 import type { ImageCropperProps } from './types';
-declare const ImageCropper: import("svelte").Component<ImageCropperProps, {}, "getCropData" | "aspectRatio" | "getCroppedImage">;
+declare const ImageCropper: import("svelte").Component<ImageCropperProps, {}, "getCropData" | "aspectRatio" | "getCroppedImage" | "getProcessedImage">;
 type ImageCropper = ReturnType<typeof ImageCropper>;
 export default ImageCropper;

package/dist/components/image-cropper/types.d.ts

@@ -1,8 +1,11 @@
 import type { UseImageCropperProps, UseImageCropperReturn } from '@ark-ui/svelte/image-cropper';
+import type { ProcessImageOptions } from '../../utils/image-processing';
 export type ImageCropperCropData = ReturnType<ReturnType<UseImageCropperReturn>['getCropData']>;
 export interface ImageCropperProps extends UseImageCropperProps {
     src: string;
     alt?: string;
     getCroppedImage?: ReturnType<UseImageCropperReturn>['getCroppedImage'];
     getCropData?: ReturnType<UseImageCropperReturn>['getCropData'];
+    /** Bindable: returns a processed (cropped + resized + converted) data URL in one call */
+    getProcessedImage?: (opts?: ProcessImageOptions) => Promise<string>;
 }

package/dist/index.d.ts

@@ -1,12 +1,20 @@
 export { default as Button } from './components/button/button.svelte';
+export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
+export type { ProcessImageOptions, CropRegion } from './utils/image-processing';
 export { default as Carousel } from './components/carousel/carousel.svelte';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';
 export { default as Dialog } from './components/dialog/dialog.svelte';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
+export type { DialogProps, AlertDialogProps } from './components/dialog/dialog.types';
+export { default as FileUploadDropzone } from './components/file-upload/dropzone.svelte';
+export { default as FileUploadBasicDocument } from './components/file-upload/basic-document.svelte';
+export type { FileType } from './components/file-upload/utils';
 export { default as ImageCropper } from './components/image-cropper/image-cropper.svelte';
 export type { ImageCropperProps, ImageCropperCropData } from './components/image-cropper/types';
+export { default as ImageCropDialog } from './components/image-crop-dialog/image-crop-dialog.svelte';
+export type { ImageCropDialogProps } from './components/image-crop-dialog/types';
 export { default as Listbox } from './components/listbox/listbox.svelte';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
 export type { NumberInputProps } from './components/number-input/types';

package/dist/index.js

@@ -1,12 +1,16 @@
 // Reexport your entry components here
 export { default as Button } from './components/button/button.svelte';
+export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
 export { default as Carousel } from './components/carousel/carousel.svelte';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';
 export { default as Dialog } from './components/dialog/dialog.svelte';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
+export { default as FileUploadDropzone } from './components/file-upload/dropzone.svelte';
+export { default as FileUploadBasicDocument } from './components/file-upload/basic-document.svelte';
 export { default as ImageCropper } from './components/image-cropper/image-cropper.svelte';
+export { default as ImageCropDialog } from './components/image-crop-dialog/image-crop-dialog.svelte';
 export { default as Listbox } from './components/listbox/listbox.svelte';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
 export { default as Select } from './components/select/select.svelte';

package/dist/utils/image-processing.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Client-side image processing utilities using the Canvas API.
+ * These are browser-only utilities — they will throw if called during SSR.
+ */
+export interface ProcessImageOptions {
+    maxWidth?: number;
+    maxHeight?: number;
+    quality?: number;
+    format?: 'image/webp' | 'image/jpeg' | 'image/png';
+}
+export interface CropRegion {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Load an image element from a src URL (data URL, blob URL, or regular URL) */
+export declare function loadImage(src: string): Promise<HTMLImageElement>;
+/** Convert a File to a base64 data URL */
+export declare function fileToDataUrl(file: File): Promise<string>;
+/**
+ * Crop a full-resolution source image using natural pixel coordinates, then resize and convert.
+ * Use this instead of getCroppedImage() from Ark UI which outputs at CSS/display resolution.
+ */
+export declare function cropImage(src: string, crop: CropRegion, opts?: ProcessImageOptions): Promise<string>;
+/** Resize and convert an image without cropping, returns a base64 data URL */
+export declare function processImage(src: string, opts?: ProcessImageOptions): Promise<string>;

package/dist/utils/image-processing.js

@@ -0,0 +1,66 @@
+/**
+ * Client-side image processing utilities using the Canvas API.
+ * These are browser-only utilities — they will throw if called during SSR.
+ */
+const defaults = {
+    maxWidth: 1000,
+    maxHeight: 1000,
+    quality: 0.85,
+    format: 'image/webp'
+};
+/** Load an image element from a src URL (data URL, blob URL, or regular URL) */
+export function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error('Failed to load image'));
+        img.src = src;
+    });
+}
+/** Convert a File to a base64 data URL */
+export function fileToDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = () => reject(new Error('Failed to read file'));
+        reader.readAsDataURL(file);
+    });
+}
+/**
+ * Crop a full-resolution source image using natural pixel coordinates, then resize and convert.
+ * Use this instead of getCroppedImage() from Ark UI which outputs at CSS/display resolution.
+ */
+export async function cropImage(src, crop, opts) {
+    const { maxWidth, maxHeight, quality, format } = { ...defaults, ...opts };
+    const img = await loadImage(src);
+    let { width, height } = crop;
+    if (width > maxWidth || height > maxHeight) {
+        const ratio = Math.min(maxWidth / width, maxHeight / height);
+        width = Math.round(width * ratio);
+        height = Math.round(height * ratio);
+    }
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height);
+    return canvas.toDataURL(format, quality);
+}
+/** Resize and convert an image without cropping, returns a base64 data URL */
+export async function processImage(src, opts) {
+    const { maxWidth, maxHeight, quality, format } = { ...defaults, ...opts };
+    const img = await loadImage(src);
+    let { width, height } = img;
+    if (width > maxWidth || height > maxHeight) {
+        const ratio = Math.min(maxWidth / width, maxHeight / height);
+        width = Math.round(width * ratio);
+        height = Math.round(height * ratio);
+    }
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(img, 0, 0, width, height);
+    return canvas.toDataURL(format, quality);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.5.7",
+	"version": "0.6.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",