@protobase/ui 0.19.6 → 0.19.7

package/dist/app/export/builder-port.js

@@ -0,0 +1,54 @@
+import { createExportBuilder } from "./builder.js";
+//#region src/app/export/builder-port.ts
+const joined = (chunks) => {
+	const bytes = new Uint8Array(chunks.reduce((size, chunk) => size + chunk.length, 0));
+	let offset = 0;
+	for (const chunk of chunks) {
+		bytes.set(chunk, offset);
+		offset += chunk.length;
+	}
+	return bytes;
+};
+/** Handles one message at a time, as the worker does, returning the bytes it made; used by the worker and by tests. */
+const createBuilderHandler = () => {
+	let builder;
+	let chunks = [];
+	return (message) => {
+		if (message.kind === "start") builder = createExportBuilder(message.plan, (chunk) => chunks.push(chunk));
+		else if (!builder) throw new Error("The export was not started");
+		else if (message.kind === "page") builder.page(message.records, message.labels);
+		else builder.finish();
+		const bytes = joined(chunks);
+		chunks = [];
+		return bytes;
+	};
+};
+/**
+* A port to a Web Worker that builds the file, so compressing it never holds up the page. The worker answers messages
+* in the order they came; an error in it fails every message still waiting.
+*/
+const createWorkerPort = () => {
+	const worker = new Worker(new URL("./export-worker.js", import.meta.url), {
+		type: "module",
+		name: "protobase-export"
+	});
+	const waiting = [];
+	worker.onmessage = (event) => waiting.shift()?.resolve(event.data.bytes);
+	worker.onerror = (event) => {
+		event.preventDefault();
+		const error = /* @__PURE__ */ new Error(`The export could not be built: ${event.message}`);
+		for (const entry of waiting.splice(0)) entry.reject(error);
+	};
+	return {
+		send: (message) => new Promise((resolve, reject) => {
+			waiting.push({
+				resolve,
+				reject
+			});
+			worker.postMessage(message);
+		}),
+		close: () => worker.terminate()
+	};
+};
+//#endregion
+export { createBuilderHandler, createWorkerPort };

package/dist/app/export/builder.js

@@ -0,0 +1,61 @@
+import { createXlsxWriter } from "./xlsx.js";
+import { csvText, xlsxCell } from "./cells.js";
+import { csvField, csvLine, csvTextField, utf8Bom } from "./csv.js";
+//#region src/app/export/builder.ts
+const typedText = /* @__PURE__ */ new Set([
+	"text",
+	"uuid",
+	"enum",
+	"relation",
+	"file",
+	"json",
+	"currency",
+	"country"
+]);
+const minWidth = 8;
+const maxWidth = 60;
+/** Each column's width in characters, room for its header and the longest value of the first page as shown. */
+const columnWidths = (columns, records, labels) => columns.map((column) => {
+	const longest = Math.max(column.header.length, ...records.map((record) => csvText(column, record[column.name], labels, "shown").length));
+	return Math.min(maxWidth, Math.max(minWidth, longest + 2));
+});
+const createCsvBuilder = (plan, onChunk) => {
+	const encoder = new TextEncoder();
+	onChunk(utf8Bom);
+	onChunk(encoder.encode(csvLine(plan.columns.map((column) => csvField(column.header)))));
+	const field = (column, record, labels) => {
+		const text = csvText(column, record[column.name], labels, plan.mode);
+		return typedText.has(column.field.type) ? csvTextField(text) : csvField(text);
+	};
+	return {
+		page: (records, labels) => {
+			onChunk(encoder.encode(records.map((record) => csvLine(plan.columns.map((column) => field(column, record, labels)))).join("")));
+		},
+		finish: () => void 0
+	};
+};
+const createXlsxBuilder = (plan, onChunk) => {
+	let writer;
+	const start = (records, labels) => createXlsxWriter({
+		name: plan.name,
+		headers: plan.columns.map((column) => column.header),
+		widths: columnWidths(plan.columns, records, labels)
+	}, onChunk);
+	return {
+		page: (records, labels) => {
+			writer ??= start(records, labels);
+			writer.rows(records.map((record) => plan.columns.map((column) => xlsxCell(column, record[column.name], labels, plan.mode))));
+		},
+		finish: () => {
+			writer ??= start([], {});
+			writer.finish();
+		}
+	};
+};
+/**
+* Builds an export file page by page: `page` with each page of records and the names of the records their relations
+* point at, then `finish` once. Each piece of the file goes to `onChunk` as soon as it is made.
+*/
+const createExportBuilder = (plan, onChunk) => plan.format === "csv" ? createCsvBuilder(plan, onChunk) : createXlsxBuilder(plan, onChunk);
+//#endregion
+export { columnWidths, createExportBuilder };

package/dist/app/export/cells.js

@@ -0,0 +1,93 @@
+import { fileShown, isStoredFile } from "../../live/file-values.js";
+import { displayValue } from "../../live/display-value.js";
+//#region src/app/export/cells.ts
+const empty = { kind: "empty" };
+const text = (value) => ({
+	kind: "text",
+	value
+});
+const isEmpty = (value) => value === null || value === void 0 || value === "";
+const relationLabel = (column, value, labels) => labels[column.name]?.[String(value)] ?? String(value);
+const fileText = (value, mode) => {
+	if (!isStoredFile(value)) return String(value);
+	return mode === "raw" ? value.uri : fileShown(value)?.name ?? value.uri;
+};
+/** A value as one CSV field: as the list shows it, or as the API sends it, empty for no value. */
+const csvText = (column, value, labels, mode) => {
+	if (isEmpty(value)) return "";
+	const { field, hints } = column;
+	if (field.type === "file") return fileText(value, mode);
+	if (field.type === "relation") return mode === "shown" ? relationLabel(column, value, labels) : String(value);
+	if (mode === "shown") return displayValue(field, value, hints);
+	if (typeof value === "object") return JSON.stringify(value);
+	return String(value);
+};
+const excelEpochDays = 25569;
+const msPerDay = 864e5;
+const excelSerial = (ms) => ms / msPerDay + excelEpochDays;
+const dateFormats = {
+	shown: {
+		date: "d mmm yyyy",
+		timestamp: "d mmm yyyy, hh:mm"
+	},
+	raw: {
+		date: "yyyy-mm-dd",
+		timestamp: "yyyy-mm-dd hh:mm:ss"
+	}
+};
+const literal = (affix) => [...affix ?? ""].map((char) => `\\${char}`).join("");
+/** The Excel number format that shows a number as the list does: its decimals, prefix and suffix, or a percent sign. */
+const numberFormat = (hints) => {
+	if (hints.format === "percent") return "General\\%";
+	const digits = hints.decimals === void 0 ? "General" : hints.decimals > 0 ? `#,##0.${"0".repeat(hints.decimals)}` : "#,##0";
+	const code = `${literal(hints.prefix)}${digits}${literal(hints.suffix)}`;
+	return code === "General" ? void 0 : code;
+};
+const numberCell = (column, value, mode) => {
+	const number = Number(value);
+	if (!Number.isFinite(number)) return text(String(value));
+	if (column.field.type === "bigint" && !Number.isSafeInteger(number)) return text(String(value));
+	const format = mode === "shown" ? numberFormat(column.hints) : void 0;
+	return format ? {
+		kind: "number",
+		value: number,
+		format
+	} : {
+		kind: "number",
+		value: number
+	};
+};
+const dateCell = (type, value, mode) => {
+	const ms = Date.parse(String(value));
+	if (Number.isNaN(ms)) return text(String(value));
+	return {
+		kind: "number",
+		value: excelSerial(ms),
+		format: dateFormats[mode][type]
+	};
+};
+/** A value as one typed Excel cell: numbers, dates and booleans as such, labels or stored values as text. */
+const xlsxCell = (column, value, labels, mode) => {
+	if (isEmpty(value)) return empty;
+	const { field } = column;
+	switch (field.type) {
+		case "boolean": return {
+			kind: "boolean",
+			value: Boolean(value)
+		};
+		case "integer":
+		case "bigint":
+		case "decimal": return numberCell(column, value, mode);
+		case "date":
+		case "timestamp": return dateCell(field.type, value, mode);
+		case "relation":
+			if (mode === "shown") return text(relationLabel(column, value, labels));
+			return typeof value === "number" ? {
+				kind: "number",
+				value
+			} : text(String(value));
+		default: return text(csvText(column, value, labels, mode));
+	}
+};
+//#endregion
+export { csvText, numberFormat, xlsxCell };

package/dist/app/export/csv.js

@@ -0,0 +1,17 @@
+//#region src/app/export/csv.ts
+/** The UTF-8 byte order mark, which makes Excel read a CSV file as UTF-8 instead of the system's code page. */
+const utf8Bom = new Uint8Array([
+	239,
+	187,
+	191
+]);
+const needsQuotes = /[",\r\n]/;
+const formulaStart = /^[=+\-@\t\r]/;
+/** One field as RFC 4180 writes it: in double quotes, its quotes doubled, when it holds a comma, quote or line break. */
+const csvField = (value) => needsQuotes.test(value) ? `"${value.replaceAll("\"", "\"\"")}"` : value;
+/** Text from a text field, kept from running as a formula in a spreadsheet. */
+const csvTextField = (value) => csvField(formulaStart.test(value) ? `'${value}` : value);
+/** One record, CRLF-terminated as RFC 4180 has it. */
+const csvLine = (fields) => `${fields.join(",")}\r\n`;
+//#endregion
+export { csvField, csvLine, csvTextField, utf8Bom };

package/dist/app/export/export-dialog.js

@@ -0,0 +1,235 @@
+import { Segmented } from "../../primitives/segmented.js";
+import { formatApproxRows, formatInt } from "../../format/number.js";
+import { Button } from "../../primitives/button.js";
+import { Checkbox } from "../../primitives/checkbox.js";
+import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
+import { exportLimit } from "./export-options.js";
+import { useState } from "react";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/export/export-dialog.tsx
+const formatOptions = [{
+	value: "xlsx",
+	label: "Excel (.xlsx)"
+}, {
+	value: "csv",
+	label: "CSV"
+}];
+const modeOptions = [{
+	value: "shown",
+	label: "As shown"
+}, {
+	value: "raw",
+	label: "Raw values"
+}];
+const modeHelp = {
+	shown: "Labels, dates and numbers as the list shows them.",
+	raw: "Values as they are stored, such as keys and codes."
+};
+const countText = (count) => {
+	if (count.kind === "counting") return "Counting rows…";
+	if (count.kind === "exact") return formatApproxRows(count.rows);
+	return count.rows > 1e4 ? formatApproxRows(count.rows) : "more than 10,000 rows";
+};
+/** The fewest rows the list finds, as far as the count tells: an estimate stands only above 10,000. */
+const countedRows = (count) => {
+	if (count.kind === "counting") return void 0;
+	return count.kind === "exact" ? count.rows : Math.max(count.rows, 10001);
+};
+const Setting = ({ label, help, children }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col items-start gap-1.5",
+	children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "text-[13px] font-medium",
+			children: label
+		}),
+		children,
+		help && /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-muted-foreground",
+			children: help
+		})
+	]
+});
+const move = (columns, name, by) => {
+	const index = columns.indexOf(name);
+	const next = [...columns];
+	next.splice(index, 1);
+	next.splice(index + by, 0, name);
+	return next;
+};
+/**
+* The columns a file holds, in order: the chosen ones first, each with buttons that move it up or down, then the
+* fields left out, to add. The dialog scrolls when the list is long, so it has no scroll box of its own.
+*/
+const ColumnPicker = ({ fields, columns, onChange }) => {
+	const labels = Object.fromEntries(fields.map((field) => [field.name, field.label]));
+	const ordered = [...columns, ...fields.map((field) => field.name).filter((name) => !columns.includes(name))];
+	return /* @__PURE__ */ jsx("ul", {
+		className: "divide-y self-stretch rounded-md border",
+		"aria-label": "Columns",
+		children: ordered.map((name) => {
+			const chosen = columns.includes(name);
+			const index = columns.indexOf(name);
+			return /* @__PURE__ */ jsxs("li", {
+				className: "flex min-h-10 items-center gap-2 px-3 py-1",
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2.5",
+					children: [/* @__PURE__ */ jsx(Checkbox, {
+						checked: chosen,
+						label: labels[name],
+						onChange: (checked) => onChange(checked ? [...columns, name] : columns.filter((column) => column !== name))
+					}), /* @__PURE__ */ jsx("span", {
+						className: chosen ? "truncate" : "truncate text-muted-foreground",
+						children: labels[name]
+					})]
+				}), chosen && /* @__PURE__ */ jsxs("span", {
+					className: "flex shrink-0 gap-1",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						className: "min-h-8 px-2",
+						"aria-label": `Move ${labels[name]} up`,
+						disabled: index === 0,
+						onClick: () => onChange(move(columns, name, -1)),
+						children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-3.5" })
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						className: "min-h-8 px-2",
+						"aria-label": `Move ${labels[name]} down`,
+						disabled: index === columns.length - 1,
+						onClick: () => onChange(move(columns, name, 1)),
+						children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-3.5" })
+					})]
+				})]
+			}, name);
+		})
+	});
+};
+/**
+* The Export dialog: the file's format, which rows (the list's, or the selected ones), which columns in which order, and
+* whether values are exported as shown or raw, with the number of rows before it starts.
+*/
+const ExportDialog = ({ plural, view, fields, initialColumns, count, selected, open, onExport, onClose }) => {
+	const [format, setFormat] = useState("xlsx");
+	const [scope, setScope] = useState(selected ? "selected" : "list");
+	const [columns, setColumns] = useState(initialColumns);
+	const [mode, setMode] = useState("shown");
+	const limit = exportLimit(view, format);
+	const rows = scope === "selected" ? `${formatInt(selected ?? 0)} selected ${selected === 1 ? "row" : "rows"}` : countText(count);
+	const overLimit = (scope === "selected" ? selected ?? 0 : countedRows(count) ?? 0) > limit;
+	const scopeOptions = [{
+		value: "list",
+		label: "Rows in the list"
+	}, {
+		value: "selected",
+		label: `Selected (${formatInt(selected ?? 0)})`
+	}];
+	return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		title: `Export ${plural.toLowerCase()}`,
+		open,
+		onClose,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			children: "Cancel"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			disabled: columns.length === 0,
+			onClick: () => onExport({
+				format,
+				scope,
+				columns,
+				mode
+			}),
+			children: "Export"
+		})] }),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 text-[13px]",
+			children: [
+				/* @__PURE__ */ jsx(Setting, {
+					label: "Format",
+					children: /* @__PURE__ */ jsx(Segmented, {
+						size: "md",
+						label: "Format",
+						value: format,
+						options: formatOptions,
+						onChange: setFormat
+					})
+				}),
+				selected !== void 0 && selected > 0 && /* @__PURE__ */ jsx(Setting, {
+					label: "Rows",
+					help: scope === "list" ? "With the list’s filters, search and sort." : void 0,
+					children: /* @__PURE__ */ jsx(Segmented, {
+						size: "md",
+						label: "Rows",
+						value: scope,
+						options: scopeOptions,
+						onChange: setScope
+					})
+				}),
+				/* @__PURE__ */ jsx(Setting, {
+					label: "Values",
+					help: modeHelp[mode],
+					children: /* @__PURE__ */ jsx(Segmented, {
+						size: "md",
+						label: "Values",
+						value: mode,
+						options: modeOptions,
+						onChange: setMode
+					})
+				}),
+				/* @__PURE__ */ jsx(Setting, {
+					label: "Columns",
+					children: /* @__PURE__ */ jsx(ColumnPicker, {
+						fields,
+						columns,
+						onChange: setColumns
+					})
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					role: "status",
+					className: "text-muted-foreground",
+					children: [
+						"Exports ",
+						rows,
+						".",
+						overLimit && ` A file holds at most ${formatInt(limit)} rows; the rest are left out.`
+					]
+				})
+			]
+		})
+	});
+};
+/** While the file is built: how many rows are in it so far, out of how many, and a way to stop. */
+const ExportProgressDialog = ({ plural, done, total, onCancel }) => {
+	const share = total ? Math.min(1, done / total) : void 0;
+	return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		title: `Exporting ${plural.toLowerCase()}`,
+		open: true,
+		onClose: onCancel,
+		actions: /* @__PURE__ */ jsx(Button, {
+			onClick: onCancel,
+			children: "Cancel"
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 text-[13px]",
+			children: [/* @__PURE__ */ jsx("div", {
+				role: "progressbar",
+				"aria-label": "Rows exported",
+				"aria-valuemin": 0,
+				"aria-valuemax": total,
+				"aria-valuenow": done,
+				className: "h-1.5 overflow-hidden rounded-full bg-muted",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "h-full rounded-full bg-primary transition-[width]",
+					style: { width: `${(share ?? 0) * 100}%` }
+				})
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: total ? `${formatInt(done)} of ${formatInt(total)} rows` : `${formatInt(done)} rows`
+			})]
+		})
+	});
+};
+//#endregion
+export { ExportDialog, ExportProgressDialog, countedRows };

package/dist/app/export/export-options.js

@@ -0,0 +1,49 @@
+import { columnsFromModel, listColumnNames } from "../../live/columns-from-model.js";
+import { xlsxMaxRows } from "./xlsx.js";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/export/export-options.ts
+const where = createWhere();
+/** Whether the view's list offers Export: unless the view takes it away. */
+const exportOffered = (view) => view?.export !== false;
+/**
+* The fields a file may hold, in the resource's order: those the user may read, which `/meta` gives, but the sensitive
+* ones, which no list carries and the page shows only when revealed one at a time.
+*/
+const exportableFields = (model) => Object.values(model.fields).flatMap((field) => field.sensitive ? [] : [field.name]);
+/** The columns a file starts with: the list's own, in its order. */
+const defaultExportColumns = (model, view) => {
+	const exportable = new Set(exportableFields(model));
+	return listColumnNames(model, view).filter((name) => exportable.has(name));
+};
+/** Each field's header, as the list's column for it reads. */
+const exportHeaders = (model, view, names) => Object.fromEntries(columnsFromModel(model, view, [], names).map((column) => [column.id, column.header]));
+/** The columns of a file, each with its field, header and the view's hints for showing it. */
+const exportColumns = (model, view, names) => {
+	const headers = exportHeaders(model, view, names);
+	return names.flatMap((name) => {
+		const field = model.fields[name];
+		return field ? [{
+			name,
+			header: headers[name],
+			field,
+			hints: view?.fields[name] ?? {}
+		}] : [];
+	});
+};
+/** The most rows a file of `format` holds: the view's limit, and for a workbook what one sheet can hold. */
+const exportLimit = (view, format) => {
+	const viewLimit = view?.export ? view.export.maxRows ?? Infinity : Infinity;
+	return Math.min(viewLimit, format === "xlsx" ? xlsxMaxRows : Infinity);
+};
+/** Whether selected rows can be exported: they are found again by their key, which must be a single field. */
+const exportsSelection = (model) => model.primaryKey.length === 1;
+/** Filters that find the selected records again by key, a page's worth in each. */
+const selectionFilters = (model, keys) => {
+	const [keyField] = model.primaryKey;
+	if (!keyField || model.primaryKey.length !== 1) throw new Error("Not implemented: selected rows are exported by a single-field key");
+	const filters = [];
+	for (let start = 0; start < keys.length; start += 500) filters.push(printFilter(where.in(keyField, keys.slice(start, start + 500))));
+	return filters;
+};
+//#endregion
+export { defaultExportColumns, exportColumns, exportHeaders, exportLimit, exportOffered, exportableFields, exportsSelection, selectionFilters };

package/dist/app/export/export-worker.d.ts

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

package/dist/app/export/export-worker.js

@@ -0,0 +1,9 @@
+import { createBuilderHandler } from "./builder-port.js";
+//#region src/app/export/export-worker.ts
+const handle = createBuilderHandler();
+const scope = self;
+scope.onmessage = (event) => {
+	const bytes = handle(event.data);
+	scope.postMessage({ bytes }, [bytes.buffer]);
+};
+//#endregion

package/dist/app/export/run-export.js

@@ -0,0 +1,62 @@
+const aborted = () => new DOMException("The export was cancelled", "AbortError");
+/**
+* Reads the rows through the list API, page by page with its page tokens, and has the port build the file from each;
+* each piece is written to the sink as it is built, so only a page is held at a time. A cancel stops at the next page
+* and discards what was written.
+*/
+const runExport = async ({ client, resource, filters, orderBy, plan, labels, limit, port, sink, signal, onProgress }) => {
+	const fields = plan.columns.map((column) => column.name);
+	let rows = 0;
+	try {
+		await sink.write(await port.send({
+			kind: "start",
+			plan
+		}));
+		for (const [index, filter] of filters.entries()) {
+			let pageToken = "";
+			do {
+				const page = await client.search(resource, {
+					filter,
+					orderBy,
+					pageSize: 500,
+					pageToken,
+					fields,
+					labels
+				});
+				if (signal.aborted) throw aborted();
+				const records = page.items.slice(0, limit - rows);
+				await sink.write(await port.send({
+					kind: "page",
+					records,
+					labels: page.labels ?? {}
+				}));
+				rows += records.length;
+				onProgress(rows);
+				pageToken = page.nextPageToken;
+				if (rows >= limit) {
+					await finish(port, sink);
+					return {
+						rows,
+						truncated: records.length < page.items.length || pageToken !== "" || index + 1 < filters.length
+					};
+				}
+			} while (pageToken !== "");
+		}
+		await finish(port, sink);
+		return {
+			rows,
+			truncated: false
+		};
+	} catch (error) {
+		await sink.abort();
+		throw error;
+	} finally {
+		port.close();
+	}
+};
+const finish = async (port, sink) => {
+	await sink.write(await port.send({ kind: "finish" }));
+	await sink.close();
+};
+//#endregion
+export { runExport };

package/dist/app/export/sink.js

@@ -0,0 +1,91 @@
+//#region src/app/export/sink.ts
+const types = {
+	xlsx: {
+		mime: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+		extension: ".xlsx",
+		description: "Excel workbook"
+	},
+	csv: {
+		mime: "text/csv",
+		extension: ".csv",
+		description: "CSV file"
+	}
+};
+const unsafeName = /[\\/:*?"<>|\u0000-\u001f]/g;
+/** The file's name: the resource's label and the day, such as `Orders 2026-10-16.xlsx`. */
+const exportFileName = (label, format, now = /* @__PURE__ */ new Date()) => {
+	const day = [
+		now.getFullYear(),
+		String(now.getMonth() + 1).padStart(2, "0"),
+		String(now.getDate()).padStart(2, "0")
+	].join("-");
+	return `${label.replace(unsafeName, " ").trim()} ${day}${types[format].extension}`;
+};
+const blobFlushBytes = 8e6;
+/** Collects the file in a Blob and downloads it under `name` once it is complete, for browsers without a save picker. */
+const createDownloadSink = (name, format) => {
+	let blob = new Blob([], { type: types[format].mime });
+	let pending = [];
+	let pendingBytes = 0;
+	const flush = () => {
+		blob = new Blob([blob, ...pending], { type: types[format].mime });
+		pending = [];
+		pendingBytes = 0;
+	};
+	return {
+		write: async (bytes) => {
+			if (bytes.length === 0) return;
+			pending.push(bytes);
+			pendingBytes += bytes.length;
+			if (pendingBytes >= blobFlushBytes) flush();
+		},
+		close: async () => {
+			flush();
+			const url = URL.createObjectURL(blob);
+			const link = document.createElement("a");
+			link.href = url;
+			link.download = name;
+			link.click();
+			setTimeout(() => URL.revokeObjectURL(url), 6e4);
+		},
+		abort: async () => {
+			pending = [];
+			blob = new Blob([]);
+		}
+	};
+};
+const savePicker = () => globalThis.showSaveFilePicker;
+/** Whether the browser can write the file to disk as it is built (the File System Access API). */
+const canSaveAsBuilt = () => typeof savePicker() === "function";
+/**
+* Asks where to save the file and writes it there as it is built, so the page holds none of it; `undefined` when the
+* user closes the picker. Call it from the click that starts the export, as the browser asks.
+*/
+const pickFileSink = async (name, format) => {
+	const pick = savePicker();
+	if (!pick) throw new Error("This browser cannot save a file as it is built");
+	const type = types[format];
+	let handle;
+	try {
+		handle = await pick({
+			suggestedName: name,
+			types: [{
+				description: type.description,
+				accept: { [type.mime]: [type.extension] }
+			}]
+		});
+	} catch (error) {
+		if (error instanceof DOMException && error.name === "AbortError") return void 0;
+		throw error;
+	}
+	const writable = await handle.createWritable();
+	return {
+		write: async (bytes) => {
+			if (bytes.length > 0) await writable.write(bytes);
+		},
+		close: () => writable.close(),
+		abort: () => writable.abort()
+	};
+};
+//#endregion
+export { canSaveAsBuilt, createDownloadSink, exportFileName, pickFileSink };