@heyramzi/ui 3.7.1 → 3.8.0

package/COMPONENTS.md

@@ -79,6 +79,7 @@ Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<
 - `segmented` — AnimatedTabs (pill or underline), SegmentedFilter, SegmentedNav, SectionRuns, one bordered track with a sliding pill, a badge note and an overflow menu
 - `theme` — ThemeProvider, mode, userPrefersMode, setMode, toggleMode, resetMode: the one light and dark system (mode-watcher, optional peer). Mount `<ThemeProvider initial onModeChange themeColors modeStorageKey />` once; flip with `toggleMode()`, read `mode.current`. Pair with `revealTheme(event, toggleMode)` from `@heyramzi/ui/lib/theme-transition.js` for the wipe
 - `star-rating-input` — StarRatingInput
+- `file-drop-zone` — FileDropZone, a drop zone over a real `<input type="file">`: drag, click, keyboard or paste; accept, size and count limits with French messages; a file list with thumbnails and remove. Plus checkFiles, matchesAccept, formatSize, describeLimits
 - `svg` — Svg, an SVG file imported with `?raw`
 
 ## Effects (`src/effects`)

package/dist/components/file-drop-zone/files.js

@@ -0,0 +1,111 @@
+const tokens = (accept) => (accept ?? "").split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+/** Whether a file passes the `accept` string, the way the browser's picker reads it. */
+export function matchesAccept(file, accept) {
+	const list = tokens(accept);
+	if (list.length === 0) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return list.some((token) => {
+		if (token.startsWith(".")) return name.endsWith(token);
+		if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+		return type === token;
+	});
+}
+// The same file picked twice is one file: name, size and date match.
+const same = (a, b) => a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+/**
+* Sorts a drop, paste or pick into the next list and the refusals.
+* A file is refused for its first fault: type, then size, then room.
+*/
+export function checkFiles(incoming, current, { accept, maxFileSize, maxFiles, multiple = false }) {
+	const room = multiple ? maxFiles ?? Infinity : 1;
+	const kept = multiple ? [...current] : [];
+	const accepted = [];
+	const rejected = [];
+	for (const file of incoming) {
+		if (!matchesAccept(file, accept)) rejected.push({
+			file,
+			reason: "type"
+		});
+		else if (maxFileSize !== undefined && file.size > maxFileSize) rejected.push({
+			file,
+			reason: "size"
+		});
+		else if (kept.some((other) => same(other, file))) continue;
+		else if (kept.length >= room) rejected.push({
+			file,
+			reason: "count"
+		});
+		else {
+			kept.push(file);
+			accepted.push(file);
+		}
+	}
+	return {
+		files: accepted.length > 0 || multiple ? kept : [...current],
+		accepted,
+		rejected
+	};
+}
+/** Drops one file from the list. */
+export const removeFile = (files, file) => files.filter((other) => other !== file);
+const UNITS = [
+	"o",
+	"Ko",
+	"Mo",
+	"Go"
+];
+/** A byte count the way a French reader says it: "820 o", "12 Ko", "1,4 Mo". */
+export function formatSize(bytes, locale = "fr-FR") {
+	let value = bytes;
+	let unit = 0;
+	while (value >= 1024 && unit < UNITS.length - 1) {
+		value /= 1024;
+		unit += 1;
+	}
+	const digits = unit === 0 || value >= 10 ? 0 : 1;
+	const number = new Intl.NumberFormat(locale, { maximumFractionDigits: digits }).format(value);
+	return `${number} ${UNITS[unit]}`;
+}
+const GROUPS = {
+	"image/": "Images",
+	"audio/": "Audio",
+	"video/": "Vidéos",
+	"text/": "Texte"
+};
+const MIME_NAMES = {
+	"application/pdf": "PDF",
+	"text/csv": "CSV",
+	"application/vnd.ms-excel": "XLS",
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+	"application/msword": "DOC",
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+	"application/zip": "ZIP",
+	"application/json": "JSON"
+};
+/** The `accept` string as a reader names it: ".pdf,application/pdf" is "PDF", "image/*" is "Images". */
+export function describeAccept(accept) {
+	const names = [];
+	for (const token of tokens(accept)) {
+		const name = token.startsWith(".") ? token.slice(1).toUpperCase() : token.endsWith("/*") ? GROUPS[token.slice(0, -1)] ?? token : MIME_NAMES[token] ?? token.split("/").pop()?.toUpperCase() ?? token;
+		if (name === "JPEG" && names.includes("JPG")) continue;
+		if (!names.includes(name)) names.push(name);
+	}
+	return names.join(", ");
+}
+/** The muted line under the title: "PDF, 10 Mo maximum". Empty when nothing limits the pick. */
+export function describeLimits(accept, maxFileSize) {
+	const types = describeAccept(accept);
+	const size = maxFileSize === undefined ? "" : `${formatSize(maxFileSize)} maximum`;
+	return [types, size].filter(Boolean).join(", ");
+}
+/** Which icon a file gets. */
+export function fileKind(file) {
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	if (type === "application/pdf" || name.endsWith(".pdf")) return "pdf";
+	if (type.startsWith("image/")) return "image";
+	if (type === "text/csv" || name.endsWith(".csv")) return "csv";
+	if (/\.(xlsx?|ods)$/.test(name) || type.includes("spreadsheet") || type.includes("excel")) return "sheet";
+	return "other";
+}

package/dist/components/file-drop-zone/index.js

@@ -0,0 +1,2 @@
+export { default as FileDropZone } from "../../../src/components/file-drop-zone/file-drop-zone.svelte";
+export { checkFiles, describeAccept, describeLimits, fileKind, formatSize, matchesAccept, removeFile } from "./files.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",

package/scripts/svelte-dts.mjs

@@ -39,6 +39,8 @@ await emitDts({
   ["svelteShimsPath"]: createRequire(import.meta.url).resolve("svelte2tsx/svelte-shims-v4.d.ts"),
   declarationDir: out,
 });
+// A script a test imports gets its .d.mts written beside it, outside libRoot (3.7.1).
+for (const file of walk(join(root, "scripts"), (n) => n.endsWith(".d.mts"))) rmSync(file);
 
 const components = walk(src, (n) => n.endsWith(".svelte"));
 const dtsOf = (file) => join(out, `${relative(src, file)}.d.ts`);

package/scripts/sync-shadcn.mjs

@@ -80,7 +80,6 @@ const NOT_SHIPPED = new Set([
   "chart",
   "data-table",
   "form",
-  "kbd",
   "menubar",
   "navigation-menu",
   "range-calendar",

package/src/components/file-drop-zone/file-drop-zone.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import {
+		File as FileIcon,
+		FileCsv,
+		FileImage,
+		FilePdf,
+		FileXls,
+		UploadSimple,
+		WarningCircle,
+		X,
+	} from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import * as Attachment from "../../shadcn/attachment/index.js";
+	import {
+		checkFiles,
+		describeLimits,
+		fileKind,
+		formatSize,
+		removeFile,
+		type Rejection,
+	} from "./files.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Labels {
+		/** The zone's first line. Defaults to the singular or plural by `multiple`. */
+		title: string;
+		/** The muted line under it. */
+		subtitle: string;
+		/** The first line while a file is dragged over the zone. */
+		dragging: string;
+		/** The line with the accepted types and size. Built from `accept` and `maxFileSize` when left out. */
+		hint: string;
+		remove: (name: string) => string;
+		tooLarge: (name: string, max: string) => string;
+		wrongType: (name: string) => string;
+		tooMany: (max: number) => string;
+	}
+
+	interface Props {
+		/** The file input's name: what the form post carries the files under. */
+		name?: string;
+		/** The id of the real input, for an outside `<label for>`. */
+		id?: string;
+		/** Same syntax as the input's `accept`: `.pdf`, `application/pdf`, `image/*`. */
+		accept?: string;
+		multiple?: boolean;
+		/** Most files the list holds when `multiple` is set. */
+		maxFiles?: number;
+		/** Largest file, in bytes. */
+		maxFileSize?: number;
+		required?: boolean;
+		disabled?: boolean;
+		/** Takes files pasted anywhere on the page. */
+		capturePaste?: boolean;
+		/** The chosen files. Kept in step with the real input, so a plain form post sends them. */
+		files?: File[];
+		/** Called with the files a drop, a paste or the picker just added. */
+		onUpload?: (added: File[]) => void;
+		/** Called with each file turned away and why. */
+		onFileRejected?: (rejected: Rejection[]) => void;
+		labels?: Partial<Labels>;
+		class?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		name,
+		id,
+		accept,
+		multiple = false,
+		maxFiles,
+		maxFileSize,
+		required = false,
+		disabled = false,
+		capturePaste = false,
+		files = $bindable([]),
+		onUpload,
+		onFileRejected,
+		labels,
+		class: className,
+	}: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	const uid = $props.id();
+	let input = $state<HTMLInputElement | null>(null);
+	// dragenter and dragleave fire for every child the pointer crosses, so the zone counts them.
+	let depth = $state(0);
+	let rejected = $state<Rejection[]>([]);
+
+	// =========================
+	// DERIVED
+	// =========================
+	const inputId = $derived(id ?? `${uid}-input`);
+	const text: Labels = $derived({
+		title: multiple ? "Glissez vos fichiers ici" : "Glissez votre fichier ici",
+		subtitle: multiple ? "ou cliquez pour les choisir" : "ou cliquez pour le choisir",
+		dragging: multiple ? "Déposez vos fichiers" : "Déposez votre fichier",
+		hint: describeLimits(accept, maxFileSize),
+		remove: (file) => `Retirer ${file}`,
+		tooLarge: (file, max) => `${file} : fichier trop lourd, ${max} maximum`,
+		wrongType: (file) => `${file} : format non accepté`,
+		tooMany: (max) => (max === 1 ? "Un seul fichier à la fois" : `${max} fichiers au maximum`),
+		...labels,
+	});
+	const dragging = $derived(depth > 0);
+	// One file without `multiple` takes the zone's place, and removing it brings the zone back.
+	const showZone = $derived(multiple || files.length === 0);
+	const room = $derived(multiple ? (maxFiles ?? Infinity) : 1);
+	const messages = $derived([
+		...new Set(
+			rejected.map(({ file, reason }) =>
+				reason === "type"
+					? text.wrongType(file.name)
+					: reason === "size"
+						? text.tooLarge(file.name, formatSize(maxFileSize ?? 0))
+						: text.tooMany(room),
+			),
+		),
+	]);
+
+	// =========================
+	// EFFECTS
+	// =========================
+	// The real input always holds the list, so `use:enhance` and a plain multipart post both carry it.
+	$effect(() => {
+		const list = files;
+		if (!input || typeof DataTransfer === "undefined") return;
+		// Already in step (the picker just wrote it, or both are empty): writing again would only churn.
+		const held = [...(input.files ?? [])];
+		if (held.length === list.length && held.every((file, index) => file === list[index])) return;
+		const transfer = new DataTransfer();
+		for (const file of list) transfer.items.add(file);
+		input.files = transfer.files;
+	});
+
+	$effect(() => {
+		if (!capturePaste || disabled) return;
+		const onPaste = (event: ClipboardEvent) => {
+			const pasted = [...(event.clipboardData?.files ?? [])];
+			if (pasted.length === 0) return;
+			event.preventDefault();
+			take(pasted);
+		};
+		window.addEventListener("paste", onPaste);
+		return () => window.removeEventListener("paste", onPaste);
+	});
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function take(incoming: File[]) {
+		if (disabled || incoming.length === 0) return;
+		const next = checkFiles(incoming, files, { accept, maxFileSize, maxFiles, multiple });
+		rejected = next.rejected;
+		files = next.files;
+		if (next.accepted.length > 0) onUpload?.(next.accepted);
+		if (next.rejected.length > 0) onFileRejected?.(next.rejected);
+	}
+
+	function remove(file: File) {
+		files = removeFile(files, file);
+		rejected = [];
+		if (files.length === 0 && !multiple) queueMicrotask(() => input?.focus());
+	}
+
+	const hasFiles = (event: DragEvent) => event.dataTransfer?.types.includes("Files") ?? false;
+
+	function onDragEnter(event: DragEvent) {
+		if (disabled || !hasFiles(event)) return;
+		event.preventDefault();
+		depth += 1;
+	}
+
+	function onDragOver(event: DragEvent) {
+		if (disabled || !hasFiles(event)) return;
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+	}
+
+	function onDragLeave(event: DragEvent) {
+		if (disabled || !hasFiles(event)) return;
+		depth = Math.max(0, depth - 1);
+	}
+
+	function onDrop(event: DragEvent) {
+		depth = 0;
+		if (disabled) return;
+		event.preventDefault();
+		take([...(event.dataTransfer?.files ?? [])]);
+	}
+
+	function onChange() {
+		// The picker replaces input.files. take() merges it with the list, and the effect writes the list back.
+		take([...(input?.files ?? [])]);
+	}
+
+	// Space opens a file input natively. Enter doesn't everywhere, and must never submit the form.
+	function onKey(event: KeyboardEvent) {
+		if (event.key !== "Enter") return;
+		event.preventDefault();
+		input?.click();
+	}
+
+	// One blob URL per image thumbnail, freed when its file leaves the list or the zone unmounts.
+	const urls = new Map<File, string>();
+	function thumb(file: File) {
+		let url = urls.get(file);
+		if (!url) urls.set(file, (url = URL.createObjectURL(file)));
+		return url;
+	}
+	$effect(() => {
+		const live = new Set(files);
+		for (const [file, url] of urls) {
+			if (live.has(file)) continue;
+			URL.revokeObjectURL(url);
+			urls.delete(file);
+		}
+	});
+	$effect(() => () => {
+		for (const url of urls.values()) URL.revokeObjectURL(url);
+		urls.clear();
+	});
+	const canPreview = typeof URL !== "undefined" && typeof URL.createObjectURL === "function";
+</script>
+
+{#snippet kindIcon(file: File)}
+	{@const kind = fileKind(file)}
+	{#if kind === "pdf"}
+		<FilePdf weight="regular" aria-hidden="true" />
+	{:else if kind === "image"}
+		<FileImage weight="regular" aria-hidden="true" />
+	{:else if kind === "csv"}
+		<FileCsv weight="regular" aria-hidden="true" />
+	{:else if kind === "sheet"}
+		<FileXls weight="regular" aria-hidden="true" />
+	{:else}
+		<FileIcon weight="regular" aria-hidden="true" />
+	{/if}
+{/snippet}
+
+<div
+	data-slot="file-drop-zone"
+	data-dragging={dragging || undefined}
+	data-disabled={disabled || undefined}
+	class={cn("flex w-full min-w-0 flex-col gap-2", className)}
+	role="presentation"
+	ondragenter={onDragEnter}
+	ondragover={onDragOver}
+	ondragleave={onDragLeave}
+	ondrop={onDrop}
+>
+	<input
+		bind:this={input}
+		id={inputId}
+		type="file"
+		class="peer sr-only"
+		{name}
+		{accept}
+		{multiple}
+		{required}
+		{disabled}
+		tabindex={showZone ? undefined : -1}
+		aria-describedby={messages.length > 0 ? `${uid}-errors` : undefined}
+		onchange={onChange}
+		onkeydown={onKey}
+	/>
+	{#if showZone}
+		<label
+			for={inputId}
+			data-slot="file-drop-zone-target"
+			data-dragging={dragging || undefined}
+			class={cn(
+				"group/zone flex min-h-36 cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed border-input bg-muted/40 px-6 py-7 text-center",
+				"transition-[border-color,background-color,box-shadow] duration-quick ease-smooth-out motion-reduce:transition-none",
+				"hover:border-foreground/30 hover:bg-muted/70",
+				"peer-focus-visible:border-ring peer-focus-visible:shadow-[var(--ring-focus)]",
+				"data-dragging:border-solid data-dragging:border-primary data-dragging:bg-primary/6",
+				disabled && "pointer-events-none cursor-not-allowed opacity-50",
+			)}
+		>
+			<span
+				aria-hidden="true"
+				class="mb-3 grid size-10 place-items-center rounded-lg bg-background text-muted-foreground shadow-[var(--elev-hairline)] transition-[translate,color] duration-fast ease-smooth-out group-hover/zone:text-foreground group-data-dragging/zone:-translate-y-0.5 group-data-dragging/zone:text-primary motion-reduce:transition-none motion-reduce:group-data-dragging/zone:translate-y-0"
+			>
+				<UploadSimple class="size-5" weight="regular" aria-hidden="true" />
+			</span>
+			<span class="text-sm font-medium text-foreground">
+				{dragging ? text.dragging : text.title}
+			</span>
+			<span class="text-sm text-muted-foreground">{text.subtitle}</span>
+			{#if text.hint}
+				<span class="mt-2 text-xs text-muted-foreground tabular-nums">{text.hint}</span>
+			{/if}
+		</label>
+	{/if}
+
+	{#if files.length > 0}
+		<ul class="flex flex-col gap-1.5" data-slot="file-drop-zone-list">
+			{#each files as file (file)}
+				<li class="min-w-0">
+					<Attachment.Root class="w-full" data-file-name={file.name}>
+						{#if canPreview && fileKind(file) === "image"}
+							<Attachment.Media variant="image">
+								<img alt="" src={thumb(file)} />
+							</Attachment.Media>
+						{:else}
+							<Attachment.Media>{@render kindIcon(file)}</Attachment.Media>
+						{/if}
+						<Attachment.Content>
+							<Attachment.Title title={file.name}>{file.name}</Attachment.Title>
+							<Attachment.Description class="tabular-nums">
+								{formatSize(file.size)}
+							</Attachment.Description>
+						</Attachment.Content>
+						<Attachment.Actions>
+							<Attachment.Action
+								type="button"
+								aria-label={text.remove(file.name)}
+								{disabled}
+								onclick={() => remove(file)}
+							>
+								<X weight="bold" aria-hidden="true" />
+							</Attachment.Action>
+						</Attachment.Actions>
+					</Attachment.Root>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	<div id="{uid}-errors" aria-live="polite" class="empty:hidden">
+		{#each messages as message (message)}
+			<p class="flex items-start gap-1.5 text-sm text-destructive">
+				<WarningCircle class="mt-0.5 size-4 shrink-0" weight="regular" aria-hidden="true" />
+				<span class="min-w-0 break-words">{message}</span>
+			</p>
+		{/each}
+	</div>
+</div>

package/src/components/file-drop-zone/file-drop-zone.svelte.d.ts

@@ -0,0 +1,43 @@
+import { type Rejection } from "./files.js";
+interface Labels {
+    /** The zone's first line. Defaults to the singular or plural by `multiple`. */
+    title: string;
+    /** The muted line under it. */
+    subtitle: string;
+    /** The first line while a file is dragged over the zone. */
+    dragging: string;
+    /** The line with the accepted types and size. Built from `accept` and `maxFileSize` when left out. */
+    hint: string;
+    remove: (name: string) => string;
+    tooLarge: (name: string, max: string) => string;
+    wrongType: (name: string) => string;
+    tooMany: (max: number) => string;
+}
+interface Props {
+    /** The file input's name: what the form post carries the files under. */
+    name?: string;
+    /** The id of the real input, for an outside `<label for>`. */
+    id?: string;
+    /** Same syntax as the input's `accept`: `.pdf`, `application/pdf`, `image/*`. */
+    accept?: string;
+    multiple?: boolean;
+    /** Most files the list holds when `multiple` is set. */
+    maxFiles?: number;
+    /** Largest file, in bytes. */
+    maxFileSize?: number;
+    required?: boolean;
+    disabled?: boolean;
+    /** Takes files pasted anywhere on the page. */
+    capturePaste?: boolean;
+    /** The chosen files. Kept in step with the real input, so a plain form post sends them. */
+    files?: File[];
+    /** Called with the files a drop, a paste or the picker just added. */
+    onUpload?: (added: File[]) => void;
+    /** Called with each file turned away and why. */
+    onFileRejected?: (rejected: Rejection[]) => void;
+    labels?: Partial<Labels>;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "files">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/file-drop-zone/file-drop-zone.test.ts

@@ -0,0 +1,148 @@
+import { afterEach, beforeEach, describe, expect, it } from "vite-plus/test";
+import { flushSync, mount, unmount } from "svelte";
+import FileDropZone from "./file-drop-zone.svelte";
+
+// jsdom has no DataTransfer and its input.files takes only a FileList, so the stub returns an
+// array and each input records what the zone wrote.
+class DataTransferStub {
+  readonly list: File[] = [];
+  readonly items = { add: (file: File) => this.list.push(file) };
+  get files() {
+    return this.list;
+  }
+}
+
+beforeEach(() => {
+  (globalThis as { DataTransfer?: unknown }).DataTransfer = DataTransferStub;
+});
+
+afterEach(() => {
+  delete (globalThis as { DataTransfer?: unknown }).DataTransfer;
+  document.body.innerHTML = "";
+});
+
+const pdf = (name: string, size = 10) =>
+  new File([new Uint8Array(size)], name, { type: "application/pdf", lastModified: 1 });
+
+function render(props: Record<string, unknown> = {}) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(FileDropZone, { target, props: { name: "justificatif", ...props } });
+  flushSync();
+  const input = target.querySelector<HTMLInputElement>("input[type=file]");
+  if (!input) throw new Error("no file input");
+  let written: File[] = [];
+  Object.defineProperty(input, "files", {
+    configurable: true,
+    get: () => written,
+    set: (value: File[]) => {
+      written = [...value];
+    },
+  });
+  const fire = (type: string, files: File[]) => {
+    const event = new Event(type, { bubbles: true, cancelable: true });
+    Object.defineProperty(event, "dataTransfer", {
+      value: { types: ["Files"], files, dropEffect: "none" },
+    });
+    target.querySelector("[data-slot=file-drop-zone-target]")?.dispatchEvent(event);
+    flushSync();
+  };
+  const drop = (files: File[]) => {
+    fire("dragenter", files);
+    fire("drop", files);
+  };
+  const names = () =>
+    [...target.querySelectorAll("[data-file-name]")].map((row) =>
+      row.getAttribute("data-file-name"),
+    );
+  return {
+    target,
+    input,
+    drop,
+    fire,
+    names,
+    written: () => written.map((file) => file.name),
+    done: () => void unmount(app),
+  };
+}
+
+describe("FileDropZone", () => {
+  it("speaks French with no setup", () => {
+    const { target, done } = render({ accept: ".pdf", maxFileSize: 10 * 1024 * 1024 });
+    const text = target.textContent ?? "";
+    expect(text).toContain("Glissez votre fichier ici");
+    expect(text).toContain("ou cliquez pour le choisir");
+    expect(text).toContain("PDF, 10 Mo maximum");
+    done();
+  });
+
+  it("writes dropped files into the real input, so a form post carries them", () => {
+    const { input, drop, names, written, done } = render({ multiple: true });
+    drop([pdf("bail.pdf"), pdf("quittance.pdf")]);
+    expect(names()).toEqual(["bail.pdf", "quittance.pdf"]);
+    expect(written()).toEqual(["bail.pdf", "quittance.pdf"]);
+    expect(input.name).toBe("justificatif");
+    done();
+  });
+
+  it("shows the drag state while a file hovers", () => {
+    const { target, fire, done } = render();
+    fire("dragenter", [pdf("bail.pdf")]);
+    expect(target.textContent).toContain("Déposez votre fichier");
+    fire("dragleave", [pdf("bail.pdf")]);
+    expect(target.textContent).toContain("Glissez votre fichier ici");
+    done();
+  });
+
+  it("refuses the wrong format and a file too heavy, and says so", () => {
+    const rejected: string[] = [];
+    const { target, drop, names, done } = render({
+      accept: ".pdf",
+      maxFileSize: 100,
+      multiple: true,
+      onFileRejected: (list: { reason: string }[]) => rejected.push(...list.map((r) => r.reason)),
+    });
+    const photo = new File(["x"], "photo.png", { type: "image/png" });
+    drop([photo, pdf("gros.pdf", 500), pdf("ok.pdf")]);
+    expect(names()).toEqual(["ok.pdf"]);
+    expect(rejected).toEqual(["type", "size"]);
+    expect(target.textContent).toContain("photo.png : format non accepté");
+    expect(target.textContent).toContain("gros.pdf : fichier trop lourd");
+    done();
+  });
+
+  it("stops at maxFiles", () => {
+    const { target, drop, names, done } = render({ multiple: true, maxFiles: 2 });
+    drop([pdf("a.pdf"), pdf("b.pdf"), pdf("c.pdf")]);
+    expect(names()).toEqual(["a.pdf", "b.pdf"]);
+    expect(target.textContent).toContain("2 fichiers au maximum");
+    done();
+  });
+
+  it("removes a file from the list and from the input", () => {
+    const { target, drop, names, written, done } = render({ multiple: true });
+    drop([pdf("a.pdf"), pdf("b.pdf")]);
+    target.querySelector<HTMLButtonElement>('[aria-label="Retirer a.pdf"]')?.click();
+    flushSync();
+    expect(names()).toEqual(["b.pdf"]);
+    expect(written()).toEqual(["b.pdf"]);
+    done();
+  });
+
+  it("puts the one file in the zone's place, and brings the zone back on removal", () => {
+    const { target, drop, done } = render();
+    drop([pdf("bail.pdf")]);
+    expect(target.querySelector("[data-slot=file-drop-zone-target]")).toBeNull();
+    target.querySelector<HTMLButtonElement>('[aria-label="Retirer bail.pdf"]')?.click();
+    flushSync();
+    expect(target.querySelector("[data-slot=file-drop-zone-target]")).not.toBeNull();
+    done();
+  });
+
+  it("ignores drops while disabled", () => {
+    const { drop, names, done } = render({ disabled: true });
+    drop([pdf("bail.pdf")]);
+    expect(names()).toEqual([]);
+    done();
+  });
+});

package/src/components/file-drop-zone/files.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, it } from "vite-plus/test";
+import {
+  checkFiles,
+  describeAccept,
+  describeLimits,
+  fileKind,
+  formatSize,
+  matchesAccept,
+  removeFile,
+} from "./files.js";
+
+const file = (name: string, type: string, size = 10) =>
+  new File([new Uint8Array(size)], name, { type, lastModified: 1 });
+
+describe("matchesAccept", () => {
+  it("takes extensions, exact types and groups, in any case", () => {
+    expect(matchesAccept(file("Bail.PDF", ""), ".pdf")).toBe(true);
+    expect(matchesAccept(file("a.bin", "application/pdf"), "application/pdf")).toBe(true);
+    expect(matchesAccept(file("photo.heic", "image/heic"), "image/*")).toBe(true);
+    expect(matchesAccept(file("releve.csv", "text/csv"), ".pdf,image/*")).toBe(false);
+  });
+
+  it("lets everything through without an accept string", () => {
+    expect(matchesAccept(file("x.zip", "application/zip"), undefined)).toBe(true);
+    expect(matchesAccept(file("x.zip", "application/zip"), " ")).toBe(true);
+  });
+});
+
+describe("checkFiles", () => {
+  it("turns away the wrong type before the size", () => {
+    const big = file("gros.csv", "text/csv", 5000);
+    const result = checkFiles([big], [], { accept: ".pdf", maxFileSize: 100 });
+    expect(result.rejected).toEqual([{ file: big, reason: "type" }]);
+  });
+
+  it("turns away a file over the size limit", () => {
+    const big = file("gros.pdf", "application/pdf", 5000);
+    const small = file("petit.pdf", "application/pdf", 50);
+    const result = checkFiles([big, small], [], {
+      accept: ".pdf",
+      maxFileSize: 100,
+      multiple: true,
+    });
+    expect(result.files).toEqual([small]);
+    expect(result.rejected).toEqual([{ file: big, reason: "size" }]);
+  });
+
+  it("stops at maxFiles, counting what's already there", () => {
+    const a = file("a.pdf", "application/pdf");
+    const b = file("b.pdf", "application/pdf");
+    const c = file("c.pdf", "application/pdf");
+    const result = checkFiles([b, c], [a], { multiple: true, maxFiles: 2 });
+    expect(result.files).toEqual([a, b]);
+    expect(result.accepted).toEqual([b]);
+    expect(result.rejected).toEqual([{ file: c, reason: "count" }]);
+  });
+
+  it("replaces the one file without multiple, and keeps it when the new one is refused", () => {
+    const a = file("a.pdf", "application/pdf");
+    const b = file("b.pdf", "application/pdf");
+    expect(checkFiles([b], [a], { accept: ".pdf" }).files).toEqual([b]);
+    expect(checkFiles([file("x.png", "image/png")], [a], { accept: ".pdf" }).files).toEqual([a]);
+  });
+
+  it("ignores the same file picked twice", () => {
+    const a = file("a.pdf", "application/pdf");
+    const again = file("a.pdf", "application/pdf");
+    const result = checkFiles([again], [a], { multiple: true });
+    expect(result.files).toEqual([a]);
+    expect(result.rejected).toEqual([]);
+  });
+});
+
+describe("removeFile", () => {
+  it("drops that one file and keeps the order", () => {
+    const a = file("a.pdf", "application/pdf");
+    const b = file("b.pdf", "application/pdf");
+    const c = file("c.pdf", "application/pdf");
+    expect(removeFile([a, b, c], b)).toEqual([a, c]);
+  });
+});
+
+describe("words", () => {
+  it("writes sizes the French way", () => {
+    expect(formatSize(820)).toBe("820 o");
+    expect(formatSize(12 * 1024)).toBe("12 Ko");
+    expect(formatSize(1.4 * 1024 * 1024)).toBe("1,4 Mo");
+    expect(formatSize(10 * 1024 * 1024)).toBe("10 Mo");
+  });
+
+  it("names the accepted types once each", () => {
+    expect(describeAccept(".pdf,application/pdf")).toBe("PDF");
+    expect(describeAccept("image/*,.csv")).toBe("Images, CSV");
+    expect(describeLimits(".pdf", 10 * 1024 * 1024)).toBe("PDF, 10 Mo maximum");
+    expect(describeLimits(undefined, undefined)).toBe("");
+  });
+
+  it("picks an icon kind from the type or the name", () => {
+    expect(fileKind(file("a.pdf", ""))).toBe("pdf");
+    expect(fileKind(file("a.jpg", "image/jpeg"))).toBe("image");
+    expect(fileKind(file("a.csv", ""))).toBe("csv");
+    expect(fileKind(file("a.xlsx", ""))).toBe("sheet");
+    expect(fileKind(file("a.txt", "text/plain"))).toBe("other");
+  });
+});

package/src/components/file-drop-zone/files.ts

@@ -0,0 +1,144 @@
+/** Why a file didn't make it into the list. */
+export type RejectReason = "type" | "size" | "count";
+
+export interface Rejection {
+  file: File;
+  reason: RejectReason;
+}
+
+export interface CheckOptions {
+  /** The input's `accept` string: extensions (`.pdf`), MIME types (`application/pdf`) or groups (`image/*`). */
+  accept?: string;
+  /** Largest file, in bytes. */
+  maxFileSize?: number;
+  /** Most files the list holds. */
+  maxFiles?: number;
+  /** Without it, a new file replaces the one already there. */
+  multiple?: boolean;
+}
+
+export type FileKind = "pdf" | "image" | "csv" | "sheet" | "other";
+
+const tokens = (accept: string | undefined) =>
+  (accept ?? "")
+    .split(",")
+    .map((token) => token.trim().toLowerCase())
+    .filter(Boolean);
+
+/** Whether a file passes the `accept` string, the way the browser's picker reads it. */
+export function matchesAccept(file: File, accept: string | undefined): boolean {
+  const list = tokens(accept);
+  if (list.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return list.some((token) => {
+    if (token.startsWith(".")) return name.endsWith(token);
+    if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+    return type === token;
+  });
+}
+
+// The same file picked twice is one file: name, size and date match.
+const same = (a: File, b: File) =>
+  a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+
+/**
+ * Sorts a drop, paste or pick into the next list and the refusals.
+ * A file is refused for its first fault: type, then size, then room.
+ */
+export function checkFiles(
+  incoming: readonly File[],
+  current: readonly File[],
+  { accept, maxFileSize, maxFiles, multiple = false }: CheckOptions,
+): { files: File[]; accepted: File[]; rejected: Rejection[] } {
+  const room = multiple ? (maxFiles ?? Infinity) : 1;
+  const kept = multiple ? [...current] : [];
+  const accepted: File[] = [];
+  const rejected: Rejection[] = [];
+  for (const file of incoming) {
+    if (!matchesAccept(file, accept)) rejected.push({ file, reason: "type" });
+    else if (maxFileSize !== undefined && file.size > maxFileSize)
+      rejected.push({ file, reason: "size" });
+    else if (kept.some((other) => same(other, file))) continue;
+    else if (kept.length >= room) rejected.push({ file, reason: "count" });
+    else {
+      kept.push(file);
+      accepted.push(file);
+    }
+  }
+  return { files: accepted.length > 0 || multiple ? kept : [...current], accepted, rejected };
+}
+
+/** Drops one file from the list. */
+export const removeFile = (files: readonly File[], file: File): File[] =>
+  files.filter((other) => other !== file);
+
+const UNITS = ["o", "Ko", "Mo", "Go"] as const;
+
+/** A byte count the way a French reader says it: "820 o", "12 Ko", "1,4 Mo". */
+export function formatSize(bytes: number, locale = "fr-FR"): string {
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < UNITS.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  const digits = unit === 0 || value >= 10 ? 0 : 1;
+  const number = new Intl.NumberFormat(locale, { maximumFractionDigits: digits }).format(value);
+  return `${number} ${UNITS[unit]}`;
+}
+
+const GROUPS: Record<string, string> = {
+  "image/": "Images",
+  "audio/": "Audio",
+  "video/": "Vidéos",
+  "text/": "Texte",
+};
+
+const MIME_NAMES: Record<string, string> = {
+  "application/pdf": "PDF",
+  "text/csv": "CSV",
+  "application/vnd.ms-excel": "XLS",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+  "application/msword": "DOC",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+  "application/zip": "ZIP",
+  "application/json": "JSON",
+};
+
+/** The `accept` string as a reader names it: ".pdf,application/pdf" is "PDF", "image/*" is "Images". */
+export function describeAccept(accept: string | undefined): string {
+  const names: string[] = [];
+  for (const token of tokens(accept)) {
+    const name = token.startsWith(".")
+      ? token.slice(1).toUpperCase()
+      : token.endsWith("/*")
+        ? (GROUPS[token.slice(0, -1)] ?? token)
+        : (MIME_NAMES[token] ?? token.split("/").pop()?.toUpperCase() ?? token);
+    if (name === "JPEG" && names.includes("JPG")) continue;
+    if (!names.includes(name)) names.push(name);
+  }
+  return names.join(", ");
+}
+
+/** The muted line under the title: "PDF, 10 Mo maximum". Empty when nothing limits the pick. */
+export function describeLimits(
+  accept: string | undefined,
+  maxFileSize: number | undefined,
+): string {
+  const types = describeAccept(accept);
+  const size = maxFileSize === undefined ? "" : `${formatSize(maxFileSize)} maximum`;
+  return [types, size].filter(Boolean).join(", ");
+}
+
+/** Which icon a file gets. */
+export function fileKind(file: File): FileKind {
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  if (type === "application/pdf" || name.endsWith(".pdf")) return "pdf";
+  if (type.startsWith("image/")) return "image";
+  if (type === "text/csv" || name.endsWith(".csv")) return "csv";
+  if (/\.(xlsx?|ods)$/.test(name) || type.includes("spreadsheet") || type.includes("excel"))
+    return "sheet";
+  return "other";
+}

package/src/components/file-drop-zone/index.ts

@@ -0,0 +1,14 @@
+export { default as FileDropZone } from "./file-drop-zone.svelte";
+export {
+  checkFiles,
+  describeAccept,
+  describeLimits,
+  fileKind,
+  formatSize,
+  matchesAccept,
+  removeFile,
+  type CheckOptions,
+  type FileKind,
+  type RejectReason,
+  type Rejection,
+} from "./files.js";

package/src/shadcn/calendar/calendar-month-select.svelte

@@ -26,7 +26,7 @@
 						value={monthItem.value}
 						selected={value !== undefined
 							? monthItem.value === value
-							: monthItem.value === selectedMonthItem.value}
+							: monthItem.value === selectedMonthItem?.value}
 					>
 						{monthItem.label}
 					</option>
@@ -36,7 +36,7 @@
 				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
-				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem?.label}
 				<CaretDown aria-hidden="true" class="size-4" />
 			</span>
 		{/snippet}

package/src/shadcn/calendar/calendar-year-select.svelte

@@ -25,7 +25,7 @@
 						value={yearItem.value}
 						selected={value !== undefined
 							? yearItem.value === value
-							: yearItem.value === selectedYearItem.value}
+							: yearItem.value === selectedYearItem?.value}
 					>
 						{yearItem.label}
 					</option>
@@ -35,7 +35,7 @@
 				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
-				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem?.label || value}
 				<CaretDown aria-hidden="true" class="size-4" />
 			</span>
 		{/snippet}

package/src/shadcn/calendar/calendar.svelte

@@ -1,9 +1,19 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	// The root component composes its own sibling sub-components through the barrel it
-	// is re-exported from; standard shadcn-svelte shape, not an initialization hazard.
-	// fallow-ignore-next-line circular-dependency
-	import * as Calendar from "./index.js";
+	import CalendarCaption from "./calendar-caption.svelte";
+	import CalendarCell from "./calendar-cell.svelte";
+	import CalendarDay from "./calendar-day.svelte";
+	import CalendarGridBody from "./calendar-grid-body.svelte";
+	import CalendarGridHead from "./calendar-grid-head.svelte";
+	import CalendarGridRow from "./calendar-grid-row.svelte";
+	import CalendarGrid from "./calendar-grid.svelte";
+	import CalendarHeadCell from "./calendar-head-cell.svelte";
+	import CalendarHeader from "./calendar-header.svelte";
+	import CalendarMonth from "./calendar-month.svelte";
+	import CalendarMonths from "./calendar-months.svelte";
+	import CalendarNav from "./calendar-nav.svelte";
+	import CalendarNextButton from "./calendar-next-button.svelte";
+	import CalendarPrevButton from "./calendar-prev-button.svelte";
 	import { cn, type WithoutChildrenOrChild } from "../../lib/utils.js";
 	import type { ButtonVariant } from "../button/button.svelte";
 	import { isEqualMonth, type DateValue } from "@internationalized/date";
@@ -68,15 +78,15 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
-		<Calendar.Months>
-			<Calendar.Nav>
-				<Calendar.PrevButton variant={buttonVariant} />
-				<Calendar.NextButton variant={buttonVariant} />
-			</Calendar.Nav>
+		<CalendarMonths>
+			<CalendarNav>
+				<CalendarPrevButton variant={buttonVariant} />
+				<CalendarNextButton variant={buttonVariant} />
+			</CalendarNav>
 			{#each months as month, monthIndex (month)}
-				<Calendar.Month>
-					<Calendar.Header>
-						<Calendar.Caption
+				<CalendarMonth>
+					<CalendarHeader>
+						<CalendarCaption
 							{captionLayout}
 							months={monthsProp}
 							{monthFormat}
@@ -87,38 +97,38 @@ get along, so we shut typescript up by casting `value` to `never`.
 							{locale}
 							{monthIndex}
 						/>
-					</Calendar.Header>
-					<Calendar.Grid>
-						<Calendar.GridHead>
-							<Calendar.GridRow class="select-none">
+					</CalendarHeader>
+					<CalendarGrid>
+						<CalendarGridHead>
+							<CalendarGridRow class="select-none">
 								{#each weekdays as weekday (weekday)}
-									<Calendar.HeadCell>
+									<CalendarHeadCell>
 										{weekday.slice(0, 2)}
-									</Calendar.HeadCell>
+									</CalendarHeadCell>
 								{/each}
-							</Calendar.GridRow>
-						</Calendar.GridHead>
-						<Calendar.GridBody>
+							</CalendarGridRow>
+						</CalendarGridHead>
+						<CalendarGridBody>
 							{#each month.weeks as weekDates (weekDates)}
-								<Calendar.GridRow class="mt-2 w-full">
+								<CalendarGridRow class="mt-2 w-full">
 									{#each weekDates as date (date)}
-										<Calendar.Cell {date} month={month.value}>
+										<CalendarCell {date} month={month.value}>
 											{#if day}
 												{@render day({
 													day: date,
 													outsideMonth: !isEqualMonth(date, month.value),
 												})}
 											{:else}
-												<Calendar.Day />
+												<CalendarDay />
 											{/if}
-										</Calendar.Cell>
+										</CalendarCell>
 									{/each}
-								</Calendar.GridRow>
+								</CalendarGridRow>
 							{/each}
-						</Calendar.GridBody>
-					</Calendar.Grid>
-				</Calendar.Month>
+						</CalendarGridBody>
+					</CalendarGrid>
+				</CalendarMonth>
 			{/each}
-		</Calendar.Months>
+		</CalendarMonths>
 	{/snippet}
 </CalendarPrimitive.Root>

package/src/shadcn/calendar/calendar.svelte.d.ts

@@ -1,5 +1,4 @@
 import { Calendar as CalendarPrimitive } from "bits-ui";
-import * as Calendar from "./index.js";
 import { type WithoutChildrenOrChild } from "../../lib/utils.js";
 import type { ButtonVariant } from "../button/button.svelte";
 import { type DateValue } from "@internationalized/date";

package/src/shadcn/input/input.svelte

@@ -6,7 +6,7 @@
 
 	type Props = WithElementRef<
 		Omit<HTMLInputAttributes, "type"> &
-			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+			({ type: "file"; files?: FileList | null } | { type?: InputType; files?: undefined })
 	>;
 
 	let {

package/src/shadcn/input/input.svelte.d.ts

@@ -3,7 +3,7 @@ import { type WithElementRef } from "../../lib/utils.js";
 type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type: "file";
-    files?: FileList;
+    files?: FileList | null;
 } | {
     type?: InputType;
     files?: undefined;

package/src/shadcn/input-group/input-group-input.svelte.d.ts

@@ -1,6 +1,6 @@
 declare const $$Component: import("svelte").Component<(Omit<import("svelte/elements").HTMLInputAttributes, "type"> & ({
     type: "file";
-    files?: FileList;
+    files?: FileList | null;
 } | {
     type?: "number" | "hidden" | "color" | "text" | "search" | "submit" | "reset" | "button" | "checkbox" | "radio" | (string & {}) | "tel" | "url" | "email" | "date" | "image" | "time" | "month" | "datetime-local" | "password" | "range" | "week";
     files?: undefined;

package/src/shadcn/input-otp/input-otp-group.svelte

@@ -13,6 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="input-otp-group"
+	aria-hidden="true"
 	class={cn("flex items-center", className)}
 	{...restProps}
 >

package/src/shadcn/input-otp/input-otp-slot.svelte

@@ -22,5 +22,9 @@
 	)}
 	{...restProps}
 >
-	{cell.char}
+	{#snippet child({ props })}
+		<div {...props} data-active={cell.isActive}>
+			{cell.char}
+		</div>
+	{/snippet}
 </InputOTPPrimitive.Cell>

package/src/shadcn/input-otp/input-otp.svelte

@@ -4,6 +4,7 @@
 
 	let {
 		ref = $bindable(null),
+		inputRef = $bindable(null),
 		class: className,
 		value = $bindable(""),
 		...restProps
@@ -12,6 +13,7 @@
 
 <InputOTPPrimitive.Root
 	bind:ref
+	bind:inputRef
 	bind:value
 	data-slot="input-otp"
 	class={cn(

package/src/shadcn/input-otp/input-otp.svelte.d.ts

@@ -1,4 +1,4 @@
 import { PinInput as InputOTPPrimitive } from "bits-ui";
-declare const $$Component: import("svelte").Component<InputOTPPrimitive.RootProps, {}, "value" | "ref">;
+declare const $$Component: import("svelte").Component<InputOTPPrimitive.RootProps, {}, "value" | "ref" | "inputRef">;
 type $$Component = ReturnType<typeof $$Component>;
 export default $$Component;

package/src/shadcn/sidebar/sidebar-input.svelte.d.ts

@@ -1,6 +1,6 @@
 declare const $$Component: import("svelte").Component<(Omit<import("svelte/elements").HTMLInputAttributes, "type"> & ({
     type: "file";
-    files?: FileList;
+    files?: FileList | null;
 } | {
     type?: "number" | "hidden" | "color" | "text" | "search" | "submit" | "reset" | "button" | "checkbox" | "radio" | (string & {}) | "tel" | "url" | "email" | "date" | "image" | "time" | "month" | "datetime-local" | "password" | "range" | "week";
     files?: undefined;

package/scripts/lib/svelte-modules.d.mts

@@ -1,4 +0,0 @@
-/** Deletes every `x.svelte.js` that sits beside an `x.svelte.ts` under `src`. */
-export function cleanSvelteModules(src: any): void;
-/** Writes a type-free `x.svelte.js` beside each `x.svelte.ts` under `src`, and returns how many. */
-export function writeSvelteModules(src: any): Promise<number>;