@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/dist/kit/FileField.js

@@ -0,0 +1,341 @@
+import { formatSize } from "./numbers.js";
+import { useKit, useParts } from "./context.js";
+import { failureOf, familyOf, isAbort, limitsOf, refusalOf } from "./uploads.js";
+import { FileMark } from "./FileMark.js";
+import { ariaOf } from "./Field.js";
+import { useEffect, useRef, useState } from "react";
+import { ArrowClockwiseIcon, UploadSimpleIcon, XIcon } from "@phosphor-icons/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/FileField.tsx
+/**
+* A file as a chip: the glyph of its family, its name, and under it its size, how much has gone while it uploads (a line filling at its foot), or what went wrong in the danger
+* tone; at its end, trying it again and taking it away. With `onOpen` it opens on a click.
+*/
+function FileChip({ name, size, type = "", progress, problem, onOpen, onRetry, onRemove }) {
+	const { code, messages } = useKit();
+	const part = useParts();
+	const family = familyOf(name, type);
+	const meta = problem ?? (progress !== void 0 ? `${messages.uploading} ${new Intl.NumberFormat(code, { style: "percent" }).format(progress)}` : size !== void 0 ? formatSize(size, code) : "");
+	const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FileMark, {
+		name,
+		type,
+		size: 28
+	}), /* @__PURE__ */ jsxs("span", {
+		className: part("sc-attachment__text"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: part("sc-attachment__name"),
+			title: name,
+			children: name
+		}), meta !== "" && /* @__PURE__ */ jsx("span", {
+			className: part("sc-attachment__meta"),
+			children: meta
+		})]
+	})] });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-family": family,
+		className: part("sc-attachment", ...problem ? ["sc-attachment--failed"] : []),
+		children: [
+			onOpen ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onOpen,
+				"aria-label": messages.open(name),
+				className: part("sc-attachment__main"),
+				children: body
+			}) : /* @__PURE__ */ jsx("span", {
+				className: part("sc-attachment__main"),
+				children: body
+			}),
+			onRetry && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onRetry,
+				"aria-label": messages.retry,
+				title: messages.retry,
+				className: part("sc-attachment__action"),
+				children: /* @__PURE__ */ jsx(ArrowClockwiseIcon, {
+					"aria-hidden": true,
+					weight: "bold"
+				})
+			}),
+			onRemove && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onRemove,
+				"aria-label": messages.remove(name),
+				title: messages.remove(name),
+				className: part("sc-attachment__action"),
+				children: /* @__PURE__ */ jsx(XIcon, {
+					"aria-hidden": true,
+					weight: "bold"
+				})
+			}),
+			progress !== void 0 && /* @__PURE__ */ jsx("span", {
+				role: "progressbar",
+				"aria-label": name,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": Math.round(progress * 100),
+				style: { "--_progress": progress },
+				className: part("sc-attachment__bar")
+			})
+		]
+	});
+}
+/** Files already sent, as chips in a row that wraps; with `onOpen`, each opens on a click. */
+function FileChips({ files, onOpen }) {
+	const part = useParts();
+	return /* @__PURE__ */ jsx("ul", {
+		className: part("sc-attachments"),
+		children: files.map((file) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(FileChip, {
+			name: file.name,
+			size: file.size,
+			type: file.media_type,
+			onOpen: onOpen && (() => onOpen(file))
+		}) }, file.id))
+	});
+}
+let picks = 0;
+/** A file already in, by its id: what `useUploads` starts from. */
+function uploaded(id, known) {
+	return {
+		key: ++picks,
+		name: known?.name ?? "",
+		size: known?.size,
+		type: known?.media_type ?? "",
+		state: "done",
+		progress: 1,
+		id,
+		problem: null,
+		file: null
+	};
+}
+/**
+* Files picked and sent at once through `host`: each is refused before it goes when it is not a
+* kind taken, is too heavy, or is one too many; then it is on its way, then in (its id) or failed
+* (to be tried again). With `multiple` false a new pick replaces what was there. Whatever is on
+* its way when its file goes (taken away, cleared, the component gone) is let go.
+*/
+function useUploads(host, { accept, maxMb, multiple = true, max = Infinity }, start = () => []) {
+	const { code, messages } = useKit();
+	const [items, setItems] = useState(start);
+	const running = useRef(/* @__PURE__ */ new Map());
+	useEffect(() => {
+		const now = running.current;
+		return () => {
+			for (const controller of now.values()) controller.abort();
+			now.clear();
+		};
+	}, []);
+	const change = (key, patch) => {
+		setItems((now) => now.map((item) => item.key === key ? {
+			...item,
+			...patch
+		} : item));
+	};
+	const letGo = (key) => {
+		running.current.get(key)?.abort();
+		running.current.delete(key);
+	};
+	const send = (key, file) => {
+		if (!host) return;
+		const controller = new AbortController();
+		running.current.set(key, controller);
+		host.upload(file, (progress) => change(key, { progress }), controller.signal).then((stored) => {
+			change(key, {
+				state: "done",
+				id: stored.id,
+				progress: 1,
+				file: null
+			});
+		}, (error) => {
+			if (isAbort(error)) return;
+			change(key, {
+				state: "failed",
+				problem: failureOf(error, maxMb, code, messages)
+			});
+		}).finally(() => {
+			if (running.current.get(key) === controller) running.current.delete(key);
+		});
+	};
+	const add = (files) => {
+		if (!host || files.length === 0) return;
+		const picked = multiple ? files : files.slice(0, 1);
+		const kept = multiple ? items.filter((item) => item.state !== "refused").length : 0;
+		const fresh = picked.map((file, index) => {
+			const problem = kept + index >= max ? messages.tooMany(max) : refusalOf(file, accept, maxMb, code, messages);
+			return {
+				key: ++picks,
+				name: file.name || messages.file,
+				size: file.size,
+				type: file.type,
+				state: problem === null ? "uploading" : "refused",
+				progress: 0,
+				id: null,
+				problem,
+				file: problem === null ? file : null
+			};
+		});
+		if (!multiple) for (const key of running.current.keys()) letGo(key);
+		setItems((now) => multiple ? [...now, ...fresh] : fresh);
+		for (const item of fresh) if (item.file) send(item.key, item.file);
+	};
+	const remove = (key) => {
+		letGo(key);
+		setItems((now) => now.filter((item) => item.key !== key));
+	};
+	const retry = (key) => {
+		const item = items.find((each) => each.key === key);
+		if (item?.state !== "failed" || !item.file) return;
+		change(key, {
+			state: "uploading",
+			progress: 0,
+			problem: null
+		});
+		send(key, item.file);
+	};
+	const clear = () => {
+		for (const key of [...running.current.keys()]) letGo(key);
+		setItems([]);
+	};
+	return {
+		items,
+		ids: items.flatMap((item) => item.state === "done" && item.id ? [item.id] : []),
+		waiting: items.some((item) => item.state === "uploading") ? "uploading" : items.some((item) => item.state === "failed" || item.state === "refused") ? "failed" : null,
+		add,
+		remove,
+		retry,
+		clear
+	};
+}
+/**
+* The files picked, as chips: each with how it goes; taken away while they can be, the failed
+* tried again; once in, a name not known here is read from the host's files, and opens there.
+*/
+function UploadChips({ uploads, host, closed = false }) {
+	const { messages } = useKit();
+	const part = useParts();
+	return /* @__PURE__ */ jsx("ul", {
+		className: part("sc-attachments"),
+		children: uploads.items.map((item) => {
+			const stored = item.id !== null ? host?.known.get(item.id) : void 0;
+			const { open } = host ?? {};
+			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(FileChip, {
+				name: stored?.name ?? (item.name || messages.file),
+				size: stored?.size ?? item.size,
+				type: stored?.media_type ?? item.type,
+				progress: item.state === "uploading" ? item.progress : void 0,
+				problem: item.problem,
+				onOpen: stored && open && (() => open(stored)),
+				onRetry: !closed && item.state === "failed" ? () => uploads.retry(item.key) : void 0,
+				onRemove: closed ? void 0 : () => uploads.remove(item.key)
+			}) }, item.key);
+		})
+	});
+}
+/** Whether what is dragged carries files (not words, not a link). */
+function carriesFiles(event) {
+	return [...event.dataTransfer.types].includes("Files");
+}
+/**
+* Files to give: a zone to drop them on or press to choose them, saying what it takes; each file
+* uploads at once (a line fills under it), then sits as a chip to take away; what is wrong with
+* one (too heavy, a kind not taken, an upload that failed, to try again) says so on its chip.
+* The value is the ids of the files in. One file unless `multiple`: once it is in, the zone
+* steps aside until it is taken away. Closed, the chips are read, and open where the host shows
+* files.
+*/
+function FileField({ value, onChange, files, accept, multiple = false, maxMb, onWait, ...control }) {
+	const { code, messages } = useKit();
+	const part = useParts();
+	const picker = useRef(null);
+	const [over, setOver] = useState(false);
+	const uploads = useUploads(files, {
+		accept,
+		maxMb,
+		multiple
+	}, () => value.map((id) => uploaded(id, files?.known.get(id))));
+	const closed = control.disabled === true || files === void 0;
+	const sent = useRef(value.join(" "));
+	const ids = uploads.ids;
+	useEffect(() => {
+		const now = ids.join(" ");
+		if (now === sent.current) return;
+		sent.current = now;
+		onChange(ids);
+	}, [ids, onChange]);
+	const wait = uploads.waiting === "uploading" ? messages.stillUploading : uploads.waiting === "failed" ? messages.fixFiles : null;
+	useEffect(() => {
+		onWait?.(wait);
+	}, [wait, onWait]);
+	const missing = ids.filter((id) => !files?.known.has(id)).join(" ");
+	useEffect(() => {
+		if (missing !== "") files?.find?.(missing.split(" "));
+	}, [missing, files]);
+	const held = uploads.items.some((item) => item.state !== "refused" && item.state !== "failed");
+	const zone = closed ? uploads.items.length === 0 : multiple || !held;
+	const { id, labelledBy } = control;
+	return /* @__PURE__ */ jsxs("div", {
+		className: part("sc-upload"),
+		children: [
+			zone && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				id,
+				disabled: closed,
+				"data-drop": true,
+				"data-over": over || void 0,
+				"data-invalid": control.invalid || void 0,
+				...ariaOf(control),
+				"aria-labelledby": labelledBy === void 0 || id === void 0 ? labelledBy : `${labelledBy} ${id}`,
+				"aria-required": void 0,
+				onClick: () => picker.current?.click(),
+				onDragOver: (event) => {
+					if (closed || !carriesFiles(event)) return;
+					event.preventDefault();
+					event.dataTransfer.dropEffect = "copy";
+					setOver(true);
+				},
+				onDragLeave: () => {
+					setOver(false);
+				},
+				onDrop: (event) => {
+					if (closed) return;
+					event.preventDefault();
+					setOver(false);
+					uploads.add([...event.dataTransfer.files]);
+				},
+				className: part("sc-upload__zone"),
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: part("sc-upload__icon"),
+					children: /* @__PURE__ */ jsx(UploadSimpleIcon, { weight: "bold" })
+				}), /* @__PURE__ */ jsxs("span", {
+					className: part("sc-upload__text"),
+					children: [/* @__PURE__ */ jsx("strong", { children: messages.upload(multiple) }), /* @__PURE__ */ jsxs("small", { children: [
+						messages.drop,
+						". ",
+						limitsOf(accept, maxMb, code, messages)
+					] })]
+				})]
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref: picker,
+				type: "file",
+				hidden: true,
+				tabIndex: -1,
+				accept: accept?.join(","),
+				multiple,
+				onChange: (event) => {
+					uploads.add([...event.target.files ?? []]);
+					event.target.value = "";
+				}
+			}),
+			uploads.items.length > 0 && /* @__PURE__ */ jsx(UploadChips, {
+				uploads,
+				host: files,
+				closed
+			})
+		]
+	});
+}
+//#endregion
+export { FileChip, FileChips, FileField, UploadChips, carriesFiles, uploaded, useUploads };
+
+//# sourceMappingURL=FileField.js.map

package/dist/kit/FileField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.js","names":[],"sources":["../../src/kit/FileField.tsx"],"sourcesContent":["import { ArrowClockwiseIcon, UploadSimpleIcon, XIcon } from \"@phosphor-icons/react\";\nimport { useEffect, useRef, useState, type CSSProperties, type DragEvent } from \"react\";\n\nimport type { Attachment } from \"../types\";\nimport { useKit, useParts } from \"./context\";\nimport { ariaOf, type ControlBase } from \"./Field\";\nimport { FileMark } from \"./FileMark\";\nimport { formatSize } from \"./numbers\";\nimport { failureOf, familyOf, isAbort, limitsOf, refusalOf, type FileHost } from \"./uploads\";\n\n// --- One file -----------------------------------------------------------------------------\n\nexport interface FileChipProps {\n  name: string;\n  /** Its weight in bytes; none while it is not known. */\n  size?: number | undefined;\n  /** Its type, for its glyph when its name has no extension. */\n  type?: string | undefined;\n  /** On its way: how much of it has gone, from 0 to 1. */\n  progress?: number | undefined;\n  /** What went wrong with it, in place of its size. */\n  problem?: string | null | undefined;\n  /** Opens it: the chip is a button. */\n  onOpen?: (() => void) | undefined;\n  onRetry?: (() => void) | undefined;\n  onRemove?: (() => void) | undefined;\n}\n\n/**\n * A file as a chip: the glyph of its family, its name, and under it its size, how much has gone while it uploads (a line filling at its foot), or what went wrong in the danger\n * tone; at its end, trying it again and taking it away. With `onOpen` it opens on a click.\n */\nexport function FileChip({\n  name,\n  size,\n  type = \"\",\n  progress,\n  problem,\n  onOpen,\n  onRetry,\n  onRemove,\n}: FileChipProps) {\n  const { code, messages } = useKit();\n  const part = useParts();\n  const family = familyOf(name, type);\n  // The name says its extension; under it, how big it is, or how far it has gone.\n  const meta =\n    problem ??\n    (progress !== undefined\n      ? `${messages.uploading} ${new Intl.NumberFormat(code, { style: \"percent\" }).format(progress)}`\n      : size !== undefined\n        ? formatSize(size, code)\n        : \"\");\n  const body = (\n    <>\n      <FileMark name={name} type={type} size={28} />\n      <span className={part(\"sc-attachment__text\")}>\n        <span className={part(\"sc-attachment__name\")} title={name}>\n          {name}\n        </span>\n        {meta !== \"\" && <span className={part(\"sc-attachment__meta\")}>{meta}</span>}\n      </span>\n    </>\n  );\n  return (\n    <div\n      data-family={family}\n      className={part(\"sc-attachment\", ...(problem ? ([\"sc-attachment--failed\"] as const) : []))}\n    >\n      {onOpen ? (\n        <button\n          type=\"button\"\n          onClick={onOpen}\n          aria-label={messages.open(name)}\n          className={part(\"sc-attachment__main\")}\n        >\n          {body}\n        </button>\n      ) : (\n        <span className={part(\"sc-attachment__main\")}>{body}</span>\n      )}\n      {onRetry && (\n        <button\n          type=\"button\"\n          onClick={onRetry}\n          aria-label={messages.retry}\n          title={messages.retry}\n          className={part(\"sc-attachment__action\")}\n        >\n          <ArrowClockwiseIcon aria-hidden weight=\"bold\" />\n        </button>\n      )}\n      {onRemove && (\n        <button\n          type=\"button\"\n          onClick={onRemove}\n          aria-label={messages.remove(name)}\n          title={messages.remove(name)}\n          className={part(\"sc-attachment__action\")}\n        >\n          <XIcon aria-hidden weight=\"bold\" />\n        </button>\n      )}\n      {progress !== undefined && (\n        <span\n          role=\"progressbar\"\n          aria-label={name}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={Math.round(progress * 100)}\n          style={{ \"--_progress\": progress } as CSSProperties}\n          className={part(\"sc-attachment__bar\")}\n        />\n      )}\n    </div>\n  );\n}\n\n/** Files already sent, as chips in a row that wraps; with `onOpen`, each opens on a click. */\nexport function FileChips({\n  files,\n  onOpen,\n}: {\n  files: readonly Attachment[];\n  onOpen?: ((file: Attachment) => void) | undefined;\n}) {\n  const part = useParts();\n  return (\n    <ul className={part(\"sc-attachments\")}>\n      {files.map((file) => (\n        <li key={file.id}>\n          <FileChip\n            name={file.name}\n            size={file.size}\n            type={file.media_type}\n            onOpen={onOpen && (() => onOpen(file))}\n          />\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n// --- Files on their way -------------------------------------------------------------------\n\n/** A file picked here, on its way or in: what its chip draws. */\nexport interface Upload {\n  /** Tells it from the others here. */\n  key: number;\n  name: string;\n  size: number | undefined;\n  type: string;\n  /**\n   * uploading: on its way (`progress`, 0 to 1); done: stored as `id`; failed: its upload failed,\n   * to be tried again; refused: never sent, a kind not taken or too heavy (`problem` says which).\n   */\n  state: \"uploading\" | \"done\" | \"failed\" | \"refused\";\n  progress: number;\n  id: string | null;\n  problem: string | null;\n  /** The bytes, kept to try again. */\n  file: File | null;\n}\n\n/** What files may be picked: their kinds, their most in MB, one or many, how many at most. */\nexport interface UploadRules {\n  accept?: readonly string[] | undefined;\n  maxMb?: number | undefined;\n  /** False: one file, a new pick replacing it. */\n  multiple?: boolean | undefined;\n  max?: number | undefined;\n}\n\n/** Files picked and how each goes, and what can be done with them. */\nexport interface Uploads {\n  items: readonly Upload[];\n  /** The ids of the files in, in the order they were picked. */\n  ids: string[];\n  /** What the files still wait on: one on its way, or one that failed or was refused; null once all are in. */\n  waiting: \"uploading\" | \"failed\" | null;\n  add: (files: readonly File[]) => void;\n  remove: (key: number) => void;\n  retry: (key: number) => void;\n  /** Takes them all away, letting go of any on its way. */\n  clear: () => void;\n}\n\nlet picks = 0;\n\n/** A file already in, by its id: what `useUploads` starts from. */\nexport function uploaded(id: string, known: Attachment | undefined): Upload {\n  return {\n    key: ++picks,\n    name: known?.name ?? \"\",\n    size: known?.size,\n    type: known?.media_type ?? \"\",\n    state: \"done\",\n    progress: 1,\n    id,\n    problem: null,\n    file: null,\n  };\n}\n\n/**\n * Files picked and sent at once through `host`: each is refused before it goes when it is not a\n * kind taken, is too heavy, or is one too many; then it is on its way, then in (its id) or failed\n * (to be tried again). With `multiple` false a new pick replaces what was there. Whatever is on\n * its way when its file goes (taken away, cleared, the component gone) is let go.\n */\nexport function useUploads(\n  host: FileHost | undefined,\n  { accept, maxMb, multiple = true, max = Infinity }: UploadRules,\n  start: () => Upload[] = () => [],\n): Uploads {\n  const { code, messages } = useKit();\n  const [items, setItems] = useState<Upload[]>(start);\n  const running = useRef(new Map<number, AbortController>());\n\n  useEffect(() => {\n    const now = running.current;\n    return () => {\n      for (const controller of now.values()) controller.abort();\n      now.clear();\n    };\n  }, []);\n\n  const change = (key: number, patch: Partial<Upload>) => {\n    setItems((now) => now.map((item) => (item.key === key ? { ...item, ...patch } : item)));\n  };\n\n  const letGo = (key: number) => {\n    running.current.get(key)?.abort();\n    running.current.delete(key);\n  };\n\n  const send = (key: number, file: File) => {\n    if (!host) return;\n    const controller = new AbortController();\n    running.current.set(key, controller);\n    host\n      .upload(file, (progress) => change(key, { progress }), controller.signal)\n      .then(\n        (stored) => {\n          change(key, { state: \"done\", id: stored.id, progress: 1, file: null });\n        },\n        (error: unknown) => {\n          if (isAbort(error)) return;\n          change(key, { state: \"failed\", problem: failureOf(error, maxMb, code, messages) });\n        },\n      )\n      .finally(() => {\n        if (running.current.get(key) === controller) running.current.delete(key);\n      });\n  };\n\n  const add = (files: readonly File[]) => {\n    if (!host || files.length === 0) return;\n    const picked = multiple ? files : files.slice(0, 1);\n    const kept = multiple ? items.filter((item) => item.state !== \"refused\").length : 0;\n    const fresh = picked.map((file, index): Upload => {\n      const problem =\n        kept + index >= max\n          ? messages.tooMany(max)\n          : refusalOf(file, accept, maxMb, code, messages);\n      return {\n        key: ++picks,\n        name: file.name || messages.file,\n        size: file.size,\n        type: file.type,\n        state: problem === null ? \"uploading\" : \"refused\",\n        progress: 0,\n        id: null,\n        problem,\n        file: problem === null ? file : null,\n      };\n    });\n    if (!multiple) for (const key of running.current.keys()) letGo(key);\n    setItems((now) => (multiple ? [...now, ...fresh] : fresh));\n    for (const item of fresh) if (item.file) send(item.key, item.file);\n  };\n\n  const remove = (key: number) => {\n    letGo(key);\n    setItems((now) => now.filter((item) => item.key !== key));\n  };\n\n  const retry = (key: number) => {\n    const item = items.find((each) => each.key === key);\n    if (item?.state !== \"failed\" || !item.file) return;\n    change(key, { state: \"uploading\", progress: 0, problem: null });\n    send(key, item.file);\n  };\n\n  const clear = () => {\n    for (const key of [...running.current.keys()]) letGo(key);\n    setItems([]);\n  };\n\n  const ids = items.flatMap((item) => (item.state === \"done\" && item.id ? [item.id] : []));\n  const waiting = items.some((item) => item.state === \"uploading\")\n    ? \"uploading\"\n    : items.some((item) => item.state === \"failed\" || item.state === \"refused\")\n      ? \"failed\"\n      : null;\n  return { items, ids, waiting, add, remove, retry, clear };\n}\n\n/**\n * The files picked, as chips: each with how it goes; taken away while they can be, the failed\n * tried again; once in, a name not known here is read from the host's files, and opens there.\n */\nexport function UploadChips({\n  uploads,\n  host,\n  closed = false,\n}: {\n  uploads: Uploads;\n  host: FileHost | undefined;\n  closed?: boolean | undefined;\n}) {\n  const { messages } = useKit();\n  const part = useParts();\n  return (\n    <ul className={part(\"sc-attachments\")}>\n      {uploads.items.map((item) => {\n        const stored = item.id !== null ? host?.known.get(item.id) : undefined;\n        const { open } = host ?? {};\n        return (\n          <li key={item.key}>\n            <FileChip\n              name={stored?.name ?? (item.name || messages.file)}\n              size={stored?.size ?? item.size}\n              type={stored?.media_type ?? item.type}\n              progress={item.state === \"uploading\" ? item.progress : undefined}\n              problem={item.problem}\n              onOpen={stored && open && (() => open(stored))}\n              onRetry={\n                !closed && item.state === \"failed\" ? () => uploads.retry(item.key) : undefined\n              }\n              onRemove={closed ? undefined : () => uploads.remove(item.key)}\n            />\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\n/** Whether what is dragged carries files (not words, not a link). */\nexport function carriesFiles(event: DragEvent): boolean {\n  return [...event.dataTransfer.types].includes(\"Files\");\n}\n\n// --- The field ----------------------------------------------------------------------------\n\nexport interface FileFieldProps extends ControlBase {\n  /** The ids of the files in. */\n  value: string[];\n  onChange: (ids: string[]) => void;\n  /** Where its files go and are found; none: it takes none (closed). */\n  files?: FileHost | undefined;\n  /** The kinds it takes: types, families (\"image/*\"), extensions (\".xlsx\"); none: any. */\n  accept?: readonly string[] | undefined;\n  multiple?: boolean | undefined;\n  /** The most a file may weigh, in MB (50 at most). */\n  maxMb?: number | undefined;\n  /**\n   * Hears what the field still waits on before its form may go, in words (a file on its way,\n   * one that failed), and null once nothing.\n   */\n  onWait?: ((problem: string | null) => void) | undefined;\n}\n\n/**\n * Files to give: a zone to drop them on or press to choose them, saying what it takes; each file\n * uploads at once (a line fills under it), then sits as a chip to take away; what is wrong with\n * one (too heavy, a kind not taken, an upload that failed, to try again) says so on its chip.\n * The value is the ids of the files in. One file unless `multiple`: once it is in, the zone\n * steps aside until it is taken away. Closed, the chips are read, and open where the host shows\n * files.\n */\nexport function FileField({\n  value,\n  onChange,\n  files,\n  accept,\n  multiple = false,\n  maxMb,\n  onWait,\n  ...control\n}: FileFieldProps) {\n  const { code, messages } = useKit();\n  const part = useParts();\n  const picker = useRef<HTMLInputElement>(null);\n  const [over, setOver] = useState(false);\n  const uploads = useUploads(files, { accept, maxMb, multiple }, () =>\n    value.map((id) => uploaded(id, files?.known.get(id))),\n  );\n  const closed = control.disabled === true || files === undefined;\n\n  // The ids go up whenever the files in change.\n  const sent = useRef(value.join(\" \"));\n  const ids = uploads.ids;\n  useEffect(() => {\n    const now = ids.join(\" \");\n    if (now === sent.current) return;\n    sent.current = now;\n    onChange(ids);\n  }, [ids, onChange]);\n\n  const wait =\n    uploads.waiting === \"uploading\"\n      ? messages.stillUploading\n      : uploads.waiting === \"failed\"\n        ? messages.fixFiles\n        : null;\n  useEffect(() => {\n    onWait?.(wait);\n  }, [wait, onWait]);\n\n  // Files in whose names are not known here are asked for, once.\n  const missing = ids.filter((id) => !files?.known.has(id)).join(\" \");\n  useEffect(() => {\n    if (missing !== \"\") files?.find?.(missing.split(\" \"));\n  }, [missing, files]);\n\n  const held = uploads.items.some((item) => item.state !== \"refused\" && item.state !== \"failed\");\n  const zone = closed ? uploads.items.length === 0 : multiple || !held;\n  const { id, labelledBy } = control;\n\n  return (\n    <div className={part(\"sc-upload\")}>\n      {zone && (\n        <button\n          type=\"button\"\n          id={id}\n          disabled={closed}\n          data-drop\n          data-over={over || undefined}\n          data-invalid={control.invalid || undefined}\n          {...ariaOf(control)}\n          // Its name is its label and what it says.\n          aria-labelledby={\n            labelledBy === undefined || id === undefined ? labelledBy : `${labelledBy} ${id}`\n          }\n          aria-required={undefined}\n          onClick={() => picker.current?.click()}\n          onDragOver={(event) => {\n            if (closed || !carriesFiles(event)) return;\n            event.preventDefault();\n            event.dataTransfer.dropEffect = \"copy\";\n            setOver(true);\n          }}\n          onDragLeave={() => {\n            setOver(false);\n          }}\n          onDrop={(event) => {\n            if (closed) return;\n            event.preventDefault();\n            setOver(false);\n            uploads.add([...event.dataTransfer.files]);\n          }}\n          className={part(\"sc-upload__zone\")}\n        >\n          <span aria-hidden className={part(\"sc-upload__icon\")}>\n            <UploadSimpleIcon weight=\"bold\" />\n          </span>\n          <span className={part(\"sc-upload__text\")}>\n            <strong>{messages.upload(multiple)}</strong>\n            <small>\n              {messages.drop}. {limitsOf(accept, maxMb, code, messages)}\n            </small>\n          </span>\n        </button>\n      )}\n      <input\n        ref={picker}\n        type=\"file\"\n        hidden\n        tabIndex={-1}\n        accept={accept?.join(\",\")}\n        multiple={multiple}\n        onChange={(event) => {\n          uploads.add([...(event.target.files ?? [])]);\n          event.target.value = \"\";\n        }}\n      />\n      {uploads.items.length > 0 && <UploadChips uploads={uploads} host={files} closed={closed} />}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/kit/FileMark.d.ts

@@ -0,0 +1,15 @@
+//#region src/kit/FileMark.d.ts
+/**
+ * A file's mark: the glyph of its family, bare, by its name's extension (then its type), the
+ * common formats in their own tint (a PDF rose, a sheet green, a document blue, slides amber, a
+ * picture sand), the rest in the muted ink. It keeps `Mark`'s square.
+ */
+export declare function FileMark({ name, type, size, className }: {
+  name: string;
+  /** Its media type, when the name says nothing. */
+  type?: string | undefined;
+  size?: number | undefined;
+  className?: string | undefined;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=FileMark.d.ts.map

package/dist/kit/FileMark.js

@@ -0,0 +1,39 @@
+import { Mark } from "./Mark.js";
+import { familyOf } from "./uploads.js";
+import { FileAudioIcon, FileDocIcon, FileIcon, FileImageIcon, FilePdfIcon, FilePptIcon, FileTextIcon, FileVideoIcon, FileXlsIcon, FileZipIcon } from "@phosphor-icons/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/kit/FileMark.tsx
+/** Each family's glyph: the format's own sheet (PDF, Word, Excel, PowerPoint), a picture, a clip. */
+const GLYPHS = {
+	image: FileImageIcon,
+	pdf: FilePdfIcon,
+	sheet: FileXlsIcon,
+	doc: FileDocIcon,
+	slides: FilePptIcon,
+	text: FileTextIcon,
+	archive: FileZipIcon,
+	audio: FileAudioIcon,
+	video: FileVideoIcon,
+	other: FileIcon
+};
+/**
+* A file's mark: the glyph of its family, bare, by its name's extension (then its type), the
+* common formats in their own tint (a PDF rose, a sheet green, a document blue, slides amber, a
+* picture sand), the rest in the muted ink. It keeps `Mark`'s square.
+*/
+function FileMark({ name, type = "", size, className }) {
+	const family = familyOf(name, type);
+	const Glyph = GLYPHS[family];
+	return /* @__PURE__ */ jsx(Mark, {
+		size,
+		className,
+		children: /* @__PURE__ */ jsx(Glyph, {
+			weight: "regular",
+			"data-family": family
+		})
+	});
+}
+//#endregion
+export { FileMark };
+
+//# sourceMappingURL=FileMark.js.map

package/dist/kit/FileMark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileMark.js","names":[],"sources":["../../src/kit/FileMark.tsx"],"sourcesContent":["import {\n  FileAudioIcon,\n  FileDocIcon,\n  FileIcon,\n  FileImageIcon,\n  FilePdfIcon,\n  FilePptIcon,\n  FileTextIcon,\n  FileVideoIcon,\n  FileXlsIcon,\n  FileZipIcon,\n  type Icon,\n} from \"@phosphor-icons/react\";\n\nimport { Mark } from \"./Mark\";\nimport { familyOf, type FileFamily } from \"./uploads\";\n\n/** Each family's glyph: the format's own sheet (PDF, Word, Excel, PowerPoint), a picture, a clip. */\nconst GLYPHS: Readonly<Record<FileFamily, Icon>> = {\n  image: FileImageIcon,\n  pdf: FilePdfIcon,\n  sheet: FileXlsIcon,\n  doc: FileDocIcon,\n  slides: FilePptIcon,\n  text: FileTextIcon,\n  archive: FileZipIcon,\n  audio: FileAudioIcon,\n  video: FileVideoIcon,\n  other: FileIcon,\n};\n\n/**\n * A file's mark: the glyph of its family, bare, by its name's extension (then its type), the\n * common formats in their own tint (a PDF rose, a sheet green, a document blue, slides amber, a\n * picture sand), the rest in the muted ink. It keeps `Mark`'s square.\n */\nexport function FileMark({\n  name,\n  type = \"\",\n  size,\n  className,\n}: {\n  name: string;\n  /** Its media type, when the name says nothing. */\n  type?: string | undefined;\n  size?: number | undefined;\n  className?: string | undefined;\n}) {\n  const family = familyOf(name, type);\n  const Glyph = GLYPHS[family];\n  return (\n    <Mark size={size} className={className}>\n      <Glyph weight=\"regular\" data-family={family} />\n    </Mark>\n  );\n}\n"],"mappings":";;;;;;AAkBA,MAAM,SAA6C;CACjD,OAAO;CACP,KAAK;CACL,OAAO;CACP,KAAK;CACL,QAAQ;CACR,MAAM;CACN,SAAS;CACT,OAAO;CACP,OAAO;CACP,OAAO;AACT;;;;;;AAOA,SAAgB,SAAS,EACvB,MACA,OAAO,IACP,MACA,aAOC;CACD,MAAM,SAAS,SAAS,MAAM,IAAI;CAClC,MAAM,QAAQ,OAAO;CACrB,OACE,oBAAC,MAAD;EAAY;EAAiB;EAC3B,UAAA,oBAAC,OAAD;GAAO,QAAO;GAAU,eAAa;EAAS,CAAA;CAC1C,CAAA;AAEV"}

package/dist/kit/Inputs.d.ts

@@ -0,0 +1,59 @@
+import { NumberBounds } from "./numbers.js";
+import { ControlBase } from "./Field.js";
+import { ReactNode } from "react";
+//#region src/kit/Inputs.d.ts
+interface WordsProps extends ControlBase {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string | undefined;
+}
+declare const SHAPES: {
+  readonly text: {
+    readonly type: "text";
+    readonly inputMode: "text";
+    readonly autoComplete: undefined;
+    readonly icon: undefined;
+  };
+  readonly email: {
+    readonly type: "email";
+    readonly inputMode: "email";
+    readonly autoComplete: "email";
+    readonly icon: import("@phosphor-icons/react").Icon;
+  };
+  readonly phone: {
+    readonly type: "tel";
+    readonly inputMode: "tel";
+    readonly autoComplete: "tel";
+    readonly icon: import("@phosphor-icons/react").Icon;
+  };
+  readonly url: {
+    readonly type: "url";
+    readonly inputMode: "url";
+    readonly autoComplete: "url";
+    readonly icon: import("@phosphor-icons/react").Icon;
+  };
+};
+/** Words on one line; an email, a phone or an address with its icon and the right keyboard. */
+export declare function TextInput({ kind, value, onChange, placeholder, ...control }: WordsProps & {
+  kind?: keyof typeof SHAPES | undefined;
+}): import("react").JSX.Element;
+/** Words over a few lines: the box grows with them up to a height, then scrolls. */
+export declare function TextArea({ value, onChange, placeholder, ...control }: WordsProps): import("react").JSX.Element;
+/** A number: typed, or a step at a time with − and + (or the arrows), its unit after it. */
+export declare function NumberInput({ value, onChange, placeholder, min, max, step, unit, ...control }: ControlBase & NumberBounds & {
+  value: number | null;
+  onChange: (value: number | null) => void;
+  placeholder?: string | undefined;
+  unit?: string | undefined;
+}): import("react").JSX.Element;
+/** A value typed once and never shown again: hidden as it is typed, unless the person asks. */
+export declare function SecretInput({ value, onChange, placeholder, ...control }: WordsProps): import("react").JSX.Element;
+/** A box to tick, the sentence beside it its label; drawn in the accent once ticked. */
+export declare function Checkbox({ value, onChange, children, ...control }: Omit<ControlBase, "labelledBy" | "label"> & {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+export {};
+//# sourceMappingURL=Inputs.d.ts.map