@calmlens/sdk 0.16.2 → 0.17.1

package/esm/elements.d.ts

@@ -0,0 +1,88 @@
+import { A as CustomUploadResult, B as MediaAsset, C as getDropzoneHint, D as resolveMessages, E as getUploadItemOutcome, G as MediaState, H as MediaOptions, J as resolveMediaProps, K as getMediaState, L as UploadStage, M as UploadController, P as UploadFile, S as formatMessage, T as getUploadItemMessage, U as MediaSettings, V as MediaImageSource, W as MediaSource, _ as UploadItemView, a as createProgressFetch, b as describeUploader, c as IconName, d as UploaderDisplayOptions, g as DEFAULT_MESSAGES, h as CalmLensMessages, i as CALMLENS_STYLES, j as UploadClient, k as CustomUploadContext, l as MediaDisplayOptions, m as getMediaLoadKey, n as CalmLensTheme, o as ICONS, p as getMediaAspectRatio, q as pickMediaSource, r as resolveTheme, s as ICON_ATTRIBUTES, t as CALMLENS_THEME, u as MediaProps, v as UploaderView, w as getMediaUnavailableMessage, x as formatBytes, y as describeUploadItem, z as isFileAccepted } from "./ui-CgZpgpNo.js";
+import { a as UploaderProps, i as UploadSnapshot, n as UploadControllerOptions, r as UploadItem, s as createUploadController, t as CalmLensUpload } from "./BrowserUpload-uZjVFGfP.js";
+/** The `detail` of each event the elements dispatch. */
+export interface CalmLensElementEvents {
+  "calmlens-uploaded": CalmLensUpload;
+  "calmlens-rejected": UploadItem;
+  "calmlens-failed": UploadItem;
+  "calmlens-removed": UploadItem;
+  "calmlens-change": UploadSnapshot;
+  "calmlens-reveal": undefined;
+}
+declare const BaseElement: typeof HTMLElement;
+/**
+ * `<calmlens-uploader upload-preset-id="…" token-url="/api/upload-token">` uploads through an
+ * upload preset and dispatches `calmlens-uploaded` with `{ assetId, status, file }` for each
+ * finished upload. Attributes: `upload-preset-id`, `token-url`, `accept`, `max-file-size`
+ * (bytes), `no-auto-upload`, `multiple`, `max-files`, `disabled`, `capture` and `base-url`. Set
+ * the `token`, `upload`, `checkStatus`, `messages` and `controller` properties from script for
+ * anything an attribute can't hold.
+ */
+export declare class CalmLensUploaderElement extends BaseElement {
+  #private;
+  static observedAttributes: string[];
+  /** The upload token, or a function returning one per file, instead of `token-url`. */
+  get token(): UploadControllerOptions["token"];
+  set token(value: UploadControllerOptions["token"]);
+  /** Uploads each file your own way instead of through `upload-preset-id`. */
+  get upload(): UploadControllerOptions["upload"];
+  set upload(value: UploadControllerOptions["upload"]);
+  /** Checks a pending upload made with `upload`. */
+  get checkStatus(): UploadControllerOptions["checkStatus"];
+  set checkStatus(value: UploadControllerOptions["checkStatus"]);
+  /** Creates the client for each upload, for example a `MockCalmLensAppClient` in tests. */
+  get createClient(): UploadControllerOptions["createClient"];
+  set createClient(value: UploadControllerOptions["createClient"]);
+  get messages(): Partial<CalmLensMessages> | undefined;
+  set messages(value: Partial<CalmLensMessages> | undefined);
+  /**
+   * The upload queue, for reading items or calling `start`, `retry`, `remove` and `clear`. Set it
+   * to show a queue your script created; its own options then apply instead of the attributes.
+   */
+  get controller(): UploadController<File>;
+  set controller(value: UploadController<File>);
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(): void;
+}
+/**
+ * `<calmlens-media project-id="…" asset-id="…" status="allowed" alt="…">` shows an asset from the
+ * CalmLens CDN with a blurred placeholder while it loads. Age-restricted assets show the
+ * placeholder and a reveal button, which dispatches `calmlens-reveal`, until `age-confirmed` is set.
+ * Attributes: `project-id`, `asset-id`, `status`, `age-confirmed`, `type`, `resource`, `lens`,
+ * `transform`, `widths` (comma-separated), `url`, `no-placeholder`, `placeholder-hash`,
+ * `placeholder-url`, `average-color`, `cdn-base-url`, `alt`, `aspect-ratio`, `width`, `height`,
+ * `sizes`, `fit`, `position`, `eager`, `fetch-priority` and `no-controls`. Set the
+ * `asset` property to an API asset instead of `project-id` and `asset-id`.
+ */
+export declare class CalmLensMediaElement extends BaseElement {
+  #private;
+  static observedAttributes: string[];
+  get messages(): Partial<CalmLensMessages> | undefined;
+  set messages(value: Partial<CalmLensMessages> | undefined);
+  /**
+   * An asset from the API, in place of `project-id` and `asset-id`. It supplies the status, type
+   * and preview too; attributes you set win over it.
+   */
+  get asset(): MediaAsset | undefined;
+  set asset(value: MediaAsset | undefined);
+  connectedCallback(): void;
+  attributeChangedCallback(): void;
+}
+/** Defines `<calmlens-uploader>` and `<calmlens-media>`, if they aren't defined yet. */
+export declare const defineCalmLensElements: () => void;
+declare global {
+  interface HTMLElementTagNameMap {
+    "calmlens-uploader": CalmLensUploaderElement;
+    "calmlens-media": CalmLensMediaElement;
+  }
+  interface HTMLElementEventMap {
+    "calmlens-uploaded": CustomEvent<CalmLensUpload>;
+    "calmlens-rejected": CustomEvent<UploadItem>;
+    "calmlens-failed": CustomEvent<UploadItem>;
+    "calmlens-removed": CustomEvent<UploadItem>;
+    "calmlens-change": CustomEvent<UploadSnapshot>;
+    "calmlens-reveal": CustomEvent<undefined>;
+  }
+}
+export { CALMLENS_STYLES, CALMLENS_THEME, type CalmLensMessages, type CalmLensTheme, type CalmLensUpload, type CustomUploadContext, type CustomUploadResult, DEFAULT_MESSAGES, ICONS, ICON_ATTRIBUTES, type IconName, type MediaAsset, type MediaDisplayOptions, type MediaImageSource, type MediaOptions, type MediaProps, type MediaSettings, type MediaSource, type MediaState, type UploadClient, UploadController, type UploadControllerOptions, type UploadFile, type UploadItem, type UploadItemView, type UploadSnapshot, type UploadStage, type UploaderDisplayOptions, type UploaderProps, type UploaderView, createProgressFetch, createUploadController, describeUploadItem, describeUploader, formatBytes, formatMessage, getDropzoneHint, getMediaAspectRatio, getMediaLoadKey, getMediaState, getMediaUnavailableMessage, getUploadItemMessage, getUploadItemOutcome, isFileAccepted, pickMediaSource, resolveMediaProps, resolveMessages, resolveTheme };

package/esm/elements.js

@@ -0,0 +1,528 @@
+import { _ as getMediaState, a as getMediaAspectRatio, b as ICONS, c as describeUploadItem, d as formatMessage, f as getDropzoneHint, g as resolveMessages, h as getUploadItemOutcome, i as resolveTheme, l as describeUploader, m as getUploadItemMessage, o as getMediaLoadKey, p as getMediaUnavailableMessage, r as CALMLENS_THEME, s as DEFAULT_MESSAGES, t as CALMLENS_STYLES, u as formatBytes, v as pickMediaSource, x as ICON_ATTRIBUTES, y as resolveMediaProps } from "./ui-Ca_SpJXf.js";
+import { i as createProgressFetch, n as createUploadController$1, r as isFileAccepted, t as UploadController } from "./UploadController-txp5NuzH.js";
+import { t as createUploadController } from "./BrowserUpload-D7-zNmc0.js";
+// src/elements.ts
+const el = (tag, attributes = {}, children = []) => {
+	const node = document.createElement(tag);
+	for (const [name, value] of Object.entries(attributes)) {
+		if (value === void 0 || value === false) continue;
+		node.setAttribute(name, value === true ? "" : String(value));
+	}
+	for (const child of children) if (child) node.append(child);
+	return node;
+};
+const icon = (name) => {
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	for (const [attribute, value] of Object.entries(ICON_ATTRIBUTES)) svg.setAttribute(attribute, value);
+	const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+	path.setAttribute("d", ICONS[name]);
+	svg.append(path);
+	return svg;
+};
+/** A row's file-type icon, from the SDK's own SVG markup. */
+const fileThumbnail = (svg) => {
+	const thumbnail = el("span", {
+		class: "calmlens-upload__thumb",
+		"data-kind": "file",
+		"aria-hidden": "true"
+	});
+	thumbnail.innerHTML = svg;
+	return thumbnail;
+};
+const numberAttribute = (element, name) => {
+	const value = element.getAttribute(name);
+	return value === null || value === "" ? void 0 : Number(value);
+};
+/**
+* Moves properties set on an element before it was defined onto its setters. Until then they're
+* plain own properties, which would hide the class's accessors.
+*/
+const upgradeProperties = (element, names) => {
+	const record = element;
+	for (const name of names) {
+		if (!Object.hasOwn(element, name)) continue;
+		const value = record[name];
+		delete record[name];
+		record[name] = value;
+	}
+};
+const BaseElement = typeof HTMLElement === "undefined" ? class {} : HTMLElement;
+/**
+* `<calmlens-uploader upload-preset-id="…" token-url="/api/upload-token">` uploads through an
+* upload preset and dispatches `calmlens-uploaded` with `{ assetId, status, file }` for each
+* finished upload. Attributes: `upload-preset-id`, `token-url`, `accept`, `max-file-size`
+* (bytes), `no-auto-upload`, `multiple`, `max-files`, `disabled`, `capture` and `base-url`. Set
+* the `token`, `upload`, `checkStatus`, `messages` and `controller` properties from script for
+* anything an attribute can't hold.
+*/
+var CalmLensUploaderElement = class extends BaseElement {
+	static {
+		this.observedAttributes = [
+			"upload-preset-id",
+			"token-url",
+			"accept",
+			"max-file-size",
+			"no-auto-upload",
+			"multiple",
+			"max-files",
+			"disabled",
+			"capture",
+			"base-url"
+		];
+	}
+	#token;
+	#upload;
+	#checkStatus;
+	#createClient;
+	#messages;
+	#controller;
+	/** Whether `controller` was set from script, so its options and uploads aren't this element's. */
+	#external = false;
+	#unsubscribe;
+	#dragging = false;
+	#input;
+	/** The upload token, or a function returning one per file, instead of `token-url`. */
+	get token() {
+		return this.#token;
+	}
+	set token(value) {
+		this.#token = value;
+		this.#updateOptions();
+	}
+	/** Uploads each file your own way instead of through `upload-preset-id`. */
+	get upload() {
+		return this.#upload;
+	}
+	set upload(value) {
+		this.#upload = value;
+		this.#updateOptions();
+	}
+	/** Checks a pending upload made with `upload`. */
+	get checkStatus() {
+		return this.#checkStatus;
+	}
+	set checkStatus(value) {
+		this.#checkStatus = value;
+		this.#updateOptions();
+	}
+	/** Creates the client for each upload, for example a `MockCalmLensAppClient` in tests. */
+	get createClient() {
+		return this.#createClient;
+	}
+	set createClient(value) {
+		this.#createClient = value;
+		this.#updateOptions();
+	}
+	get messages() {
+		return this.#messages;
+	}
+	set messages(value) {
+		this.#messages = value;
+		this.#render();
+	}
+	/**
+	* The upload queue, for reading items or calling `start`, `retry`, `remove` and `clear`. Set it
+	* to show a queue your script created; its own options then apply instead of the attributes.
+	*/
+	get controller() {
+		this.#controller ??= createUploadController$1(this.#options());
+		return this.#controller;
+	}
+	set controller(value) {
+		if (value === this.#controller) return;
+		this.#unsubscribe?.();
+		if (!this.#external) this.#controller?.clear();
+		this.#controller = value;
+		this.#external = true;
+		if (this.isConnected) {
+			this.#subscribe();
+			this.#render();
+		}
+	}
+	#updateOptions() {
+		if (!this.#external) this.#controller?.setOptions(this.#options());
+	}
+	#subscribe() {
+		this.#unsubscribe = this.controller.subscribe((snapshot) => {
+			this.#renderItems();
+			this.dispatchEvent(new CustomEvent("calmlens-change", { detail: snapshot }));
+		});
+	}
+	#options() {
+		const emit = (type, detail) => this.dispatchEvent(new CustomEvent(type, {
+			detail,
+			bubbles: true
+		}));
+		return {
+			uploadPresetId: this.getAttribute("upload-preset-id") ?? void 0,
+			upload: this.upload,
+			checkStatus: this.checkStatus,
+			createClient: this.createClient,
+			token: this.token,
+			tokenUrl: this.getAttribute("token-url") ?? void 0,
+			accept: this.getAttribute("accept") ?? void 0,
+			maxFileSize: numberAttribute(this, "max-file-size"),
+			autoUpload: !this.hasAttribute("no-auto-upload"),
+			multiple: this.hasAttribute("multiple"),
+			maxFiles: numberAttribute(this, "max-files"),
+			baseUrl: this.getAttribute("base-url") ?? void 0,
+			onUploaded: (upload) => emit("calmlens-uploaded", upload),
+			onRejected: (item) => emit("calmlens-rejected", item),
+			onFailed: (item) => emit("calmlens-failed", item),
+			onRemoved: (item) => emit("calmlens-removed", item)
+		};
+	}
+	connectedCallback() {
+		upgradeProperties(this, [
+			"token",
+			"upload",
+			"checkStatus",
+			"createClient",
+			"messages",
+			"controller"
+		]);
+		this.classList.add("calmlens-uploader");
+		this.#subscribe();
+		this.#render();
+	}
+	disconnectedCallback() {
+		this.#unsubscribe?.();
+		if (!this.#external) this.controller.clear();
+	}
+	attributeChangedCallback() {
+		this.#updateOptions();
+		if (this.isConnected) this.#render();
+	}
+	#render() {
+		if (!this.isConnected) return;
+		this.#updateOptions();
+		const { accept, multiple } = this.controller.options;
+		const messages = resolveMessages(this.#messages);
+		const disabled = this.hasAttribute("disabled");
+		const view = describeUploader(this.controller.getSnapshot(), this.controller.options, messages);
+		const input = el("input", {
+			type: "file",
+			hidden: true,
+			accept,
+			multiple,
+			capture: this.getAttribute("capture") ?? void 0,
+			disabled
+		});
+		this.#input = input;
+		input.addEventListener("change", () => {
+			if (input.files) this.controller.addFiles(input.files);
+			input.value = "";
+		});
+		const button = el("button", {
+			type: "button",
+			class: "calmlens-button",
+			"data-variant": "outline",
+			disabled
+		}, [view.chooseLabel]);
+		button.addEventListener("click", (event) => {
+			event.stopPropagation();
+			this.#openPicker();
+		});
+		const title = el("p", { class: "calmlens-dropzone__title" }, [messages.dropzoneTitle]);
+		const zone = el("div", {
+			class: "calmlens-dropzone",
+			"data-disabled": disabled
+		}, [
+			el("span", { class: "calmlens-dropzone__icon" }, [icon("upload")]),
+			el("div", { class: "calmlens-dropzone__text" }, [title, view.hint && el("p", { class: "calmlens-dropzone__hint" }, [view.hint])]),
+			button
+		]);
+		const setDragging = (dragging) => {
+			this.#dragging = dragging;
+			zone.toggleAttribute("data-dragging", dragging);
+			title.textContent = dragging ? messages.dropzoneTitleDragging : messages.dropzoneTitle;
+		};
+		const onDragOver = (event) => {
+			event.preventDefault();
+			if (!this.hasAttribute("disabled") && !this.#dragging) setDragging(true);
+		};
+		zone.addEventListener("click", () => this.#openPicker());
+		zone.addEventListener("dragover", onDragOver);
+		zone.addEventListener("dragenter", onDragOver);
+		zone.addEventListener("dragleave", (event) => {
+			if (!zone.contains(event.relatedTarget)) setDragging(false);
+		});
+		zone.addEventListener("drop", (event) => {
+			event.preventDefault();
+			setDragging(false);
+			if (!this.hasAttribute("disabled") && event.dataTransfer) this.controller.addFiles(event.dataTransfer.files);
+		});
+		zone.addEventListener("paste", (event) => {
+			const files = event.clipboardData?.files;
+			if (!this.hasAttribute("disabled") && files?.length) this.controller.addFiles(files);
+		});
+		this.replaceChildren(zone, input, el("ul", {
+			class: "calmlens-uploads",
+			hidden: true
+		}));
+		this.#renderItems();
+	}
+	#openPicker() {
+		if (!this.hasAttribute("disabled")) this.#input?.click();
+	}
+	#renderItems() {
+		const list = this.querySelector(":scope > .calmlens-uploads");
+		const zone = this.querySelector(":scope > .calmlens-dropzone");
+		if (!list || !zone) return;
+		const messages = resolveMessages(this.#messages);
+		const snapshot = this.controller.getSnapshot();
+		const { items } = snapshot;
+		const view = describeUploader(snapshot, this.controller.options, messages);
+		zone.hidden = !view.showDropzone;
+		list.hidden = items.length === 0;
+		const thumbnails = new Map([...list.querySelectorAll(".calmlens-upload")].map((row) => [row.dataset.key, row.querySelector(".calmlens-upload__thumb")]));
+		const disabled = this.hasAttribute("disabled");
+		list.replaceChildren(...items.map((item) => {
+			const itemView = describeUploadItem(item, messages);
+			const thumbnail = thumbnails.get(item.key) ?? (item.previewUrl ? el("img", {
+				class: "calmlens-upload__thumb",
+				src: item.previewUrl,
+				alt: ""
+			}) : fileThumbnail(itemView.fileIcon));
+			const bar = el("div", { class: "calmlens-progress__bar" });
+			if (itemView.progressPercent !== void 0) bar.style.width = `${itemView.progressPercent}%`;
+			const chooseAnother = !view.showDropzone && el("button", {
+				type: "button",
+				class: "calmlens-button",
+				"data-variant": "outline",
+				"data-size": "small",
+				disabled
+			}, [messages.chooseAnother]);
+			if (chooseAnother) chooseAnother.addEventListener("click", () => this.#openPicker());
+			const retry = itemView.canRetry && el("button", {
+				type: "button",
+				class: "calmlens-icon-button",
+				"aria-label": messages.retry,
+				title: messages.retry
+			}, [icon("retry")]);
+			if (retry) retry.addEventListener("click", () => this.controller.retry(item.key));
+			const remove = el("button", {
+				type: "button",
+				class: "calmlens-icon-button",
+				"aria-label": itemView.removeLabel,
+				title: itemView.removeLabel
+			}, [icon("remove")]);
+			remove.addEventListener("click", () => this.controller.remove(item.key));
+			const row = el("li", {
+				class: "calmlens-upload",
+				"data-stage": item.stage,
+				"data-outcome": itemView.outcome
+			}, [
+				thumbnail,
+				el("div", { class: "calmlens-upload__body" }, [
+					el("span", { class: "calmlens-upload__name" }, [item.file.name]),
+					el("span", { class: "calmlens-upload__size" }, [itemView.size]),
+					itemView.busy && el("div", {
+						class: "calmlens-progress",
+						role: "progressbar",
+						"aria-label": itemView.message,
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-valuenow": itemView.progressPercent
+					}, [bar]),
+					itemView.message && el("p", {
+						class: "calmlens-upload__message",
+						role: "status"
+					}, [itemView.message])
+				]),
+				el("div", { class: "calmlens-upload__actions" }, [
+					chooseAnother,
+					retry,
+					remove
+				])
+			]);
+			row.dataset.key = item.key;
+			return row;
+		}));
+	}
+};
+/**
+* `<calmlens-media project-id="…" asset-id="…" status="allowed" alt="…">` shows an asset from the
+* CalmLens CDN with a blurred placeholder while it loads. Age-restricted assets show the
+* placeholder and a reveal button, which dispatches `calmlens-reveal`, until `age-confirmed` is set.
+* Attributes: `project-id`, `asset-id`, `status`, `age-confirmed`, `type`, `resource`, `lens`,
+* `transform`, `widths` (comma-separated), `url`, `no-placeholder`, `placeholder-hash`,
+* `placeholder-url`, `average-color`, `cdn-base-url`, `alt`, `aspect-ratio`, `width`, `height`,
+* `sizes`, `fit`, `position`, `eager`, `fetch-priority` and `no-controls`. Set the
+* `asset` property to an API asset instead of `project-id` and `asset-id`.
+*/
+var CalmLensMediaElement = class extends BaseElement {
+	static {
+		this.observedAttributes = [
+			"project-id",
+			"asset-id",
+			"status",
+			"content-removed",
+			"type",
+			"resource",
+			"lens",
+			"transform",
+			"widths",
+			"url",
+			"no-placeholder",
+			"placeholder-hash",
+			"placeholder-url",
+			"average-color",
+			"cdn-base-url",
+			"viewer-claims",
+			"alt",
+			"aspect-ratio",
+			"width",
+			"height",
+			"sizes",
+			"fit",
+			"position",
+			"eager",
+			"fetch-priority",
+			"no-controls"
+		];
+	}
+	#messages;
+	#asset;
+	#loadKey;
+	get messages() {
+		return this.#messages;
+	}
+	set messages(value) {
+		this.#messages = value;
+		this.#loadKey = void 0;
+		this.#render();
+	}
+	/**
+	* An asset from the API, in place of `project-id` and `asset-id`. It supplies the status, type
+	* and preview too; attributes you set win over it.
+	*/
+	get asset() {
+		return this.#asset;
+	}
+	set asset(value) {
+		this.#asset = value;
+		this.#render();
+	}
+	connectedCallback() {
+		upgradeProperties(this, ["messages", "asset"]);
+		this.classList.add("calmlens-media");
+		this.setAttribute("role", "figure");
+		this.#render();
+	}
+	attributeChangedCallback() {
+		this.#render();
+	}
+	#mediaOptions() {
+		const list = (name) => this.getAttribute(name)?.split(",").map((value) => value.trim()).filter(Boolean);
+		return resolveMediaProps({
+			asset: this.#asset,
+			projectId: this.getAttribute("project-id") ?? void 0,
+			assetId: this.getAttribute("asset-id") ?? void 0,
+			status: this.getAttribute("status") ?? void 0,
+			contentRemoved: this.hasAttribute("content-removed") ? true : void 0,
+			type: this.getAttribute("type") ?? void 0,
+			resource: this.getAttribute("resource") ?? void 0,
+			lens: this.getAttribute("lens") ?? void 0,
+			transform: this.getAttribute("transform") ?? void 0,
+			widths: list("widths")?.map(Number),
+			url: this.getAttribute("url") ?? void 0,
+			placeholder: !this.hasAttribute("no-placeholder"),
+			placeholderHash: this.getAttribute("placeholder-hash") ?? void 0,
+			placeholderUrl: this.getAttribute("placeholder-url") ?? void 0,
+			viewerClaims: this.hasAttribute("viewer-claims") ? JSON.parse(this.getAttribute("viewer-claims")) : void 0,
+			cdnBaseUrl: this.getAttribute("cdn-base-url") ?? void 0,
+			width: numberAttribute(this, "width"),
+			height: numberAttribute(this, "height"),
+			averageColor: this.getAttribute("average-color") ?? void 0
+		});
+	}
+	#render() {
+		if (!this.isConnected) return;
+		const options = this.#mediaOptions();
+		if (!options.projectId || !options.assetId) return;
+		const state = getMediaState(options);
+		const loadKey = `${getMediaLoadKey(state)} ${this.getAttribute("alt")} ${this.getAttribute("sizes")} ${options.viewerClaims?.ageConfirmed}`;
+		const ratio = getMediaAspectRatio({
+			aspectRatio: numberAttribute(this, "aspect-ratio"),
+			width: options.width,
+			height: options.height
+		});
+		this.style.aspectRatio = ratio ? String(ratio) : "";
+		this.toggleAttribute("data-sized", Boolean(ratio));
+		this.style.backgroundColor = options.averageColor ?? "";
+		this.style.setProperty("--calmlens-fit", this.getAttribute("fit"));
+		this.style.setProperty("--calmlens-position", this.getAttribute("position"));
+		this.dataset.kind = state.kind;
+		if (loadKey === this.#loadKey) return;
+		this.#loadKey = loadKey;
+		this.dataset.state = "loading";
+		const messages = resolveMessages(this.#messages);
+		const alt = this.getAttribute("alt") ?? "";
+		const sizes = this.getAttribute("sizes") ?? void 0;
+		const placeholder = state.kind !== "audio" && state.kind !== "unavailable" && state.placeholderUrl ? el("img", {
+			class: "calmlens-media__placeholder",
+			src: state.placeholderUrl,
+			alt: "",
+			"aria-hidden": "true"
+		}) : void 0;
+		const notice = (children) => el("div", { class: "calmlens-media__notice" }, children);
+		const unavailable = () => notice([el("p", {}, [icon("unavailable"), el("span", { class: "calmlens-media__label" }, [getMediaUnavailableMessage(state, messages)])])]);
+		const fail = () => {
+			this.dataset.state = "error";
+			this.replaceChildren(unavailable());
+		};
+		const controls = !this.hasAttribute("no-controls");
+		if (state.kind === "unavailable") this.replaceChildren(unavailable());
+		else if (state.kind === "gated") {
+			const reveal = el("button", {
+				type: "button",
+				class: "calmlens-button"
+			}, [messages.reveal]);
+			reveal.addEventListener("click", () => this.dispatchEvent(new CustomEvent("calmlens-reveal", { bubbles: true })));
+			this.replaceChildren(...[placeholder].filter((node) => node !== void 0), notice([
+				el("strong", {}, [messages.sensitiveTitle]),
+				el("p", {}, [messages.sensitiveBody]),
+				reveal
+			]));
+		} else if (state.kind === "image") {
+			const image = el("img", {
+				class: "calmlens-media__content",
+				src: state.src,
+				srcset: state.srcSet,
+				sizes,
+				alt,
+				width: options.width,
+				height: options.height,
+				loading: this.hasAttribute("eager") ? void 0 : "lazy",
+				decoding: "async",
+				fetchpriority: this.getAttribute("fetch-priority") ?? void 0
+			});
+			image.addEventListener("load", () => {
+				this.dataset.state = "loaded";
+				placeholder?.remove();
+			});
+			image.addEventListener("error", fail);
+			this.replaceChildren(...[placeholder, image].filter((node) => node !== void 0));
+		} else {
+			const media = el(state.kind, {
+				class: "calmlens-media__content",
+				src: state.src,
+				controls,
+				playsinline: state.kind === "video",
+				preload: "metadata",
+				"aria-label": alt || void 0
+			});
+			media.addEventListener("error", fail);
+			this.replaceChildren(media);
+		}
+	}
+};
+/** Defines `<calmlens-uploader>` and `<calmlens-media>`, if they aren't defined yet. */
+const defineCalmLensElements = () => {
+	if (typeof customElements === "undefined") return;
+	if (!customElements.get("calmlens-uploader")) customElements.define("calmlens-uploader", CalmLensUploaderElement);
+	if (!customElements.get("calmlens-media")) customElements.define("calmlens-media", CalmLensMediaElement);
+};
+defineCalmLensElements();
+export { CALMLENS_STYLES, CALMLENS_THEME, CalmLensMediaElement, CalmLensUploaderElement, DEFAULT_MESSAGES, ICONS, ICON_ATTRIBUTES, UploadController, createProgressFetch, createUploadController, defineCalmLensElements, describeUploadItem, describeUploader, formatBytes, formatMessage, getDropzoneHint, getMediaAspectRatio, getMediaLoadKey, getMediaState, getMediaUnavailableMessage, getUploadItemMessage, getUploadItemOutcome, isFileAccepted, pickMediaSource, resolveMediaProps, resolveMessages, resolveTheme };

package/esm/file-icons.d.ts

@@ -0,0 +1,67 @@
+/**
+ * File-type icons for files without an image preview: a file outline in the family's colour with
+ * the family's symbol and an extension label, drawn the same way by every framework. The symbols are
+ * Tabler icons (MIT) as 24×24 stroke paths.
+ */
+type FileIconFamily = "documents" | "spreadsheets" | "presentations" | "images" | "audio" | "video" | "archives" | "code" | "data" | "design" | "applications" | "fonts" | "maps" | "games" | "system" | "security" | "unknown";
+/** The families `getFileIcon` finds from a file's name and MIME type. */
+type UploadFileIconFamily = Exclude<FileIconFamily, "applications" | "maps" | "games" | "system" | "security" | "unknown">;
+/** The file outline every family's icon is drawn on. */
+export declare const FILE_ICON_OUTLINE = "M14 3v4a1 1 0 0 0 1 1h4 M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2";
+/** The symbols of the families `getFileIcon` finds, which the upload widget draws. */
+export declare const FILE_ICON_SYMBOLS: Record<UploadFileIconFamily, string>;
+/**
+ * The symbols of the families only an app's own file detection finds, kept apart so the upload
+ * widget doesn't bundle them.
+ */
+export declare const MORE_FILE_ICON_SYMBOLS: Record<Exclude<FileIconFamily, UploadFileIconFamily | "unknown">, string>;
+export declare const FILE_ICON_COLORS: Record<FileIconFamily, string>;
+/** A file's icon family and the extension its label shows, such as `pdf`. */
+export declare const getFileIcon: (file: {
+  name: string;
+  type: string;
+}) => {
+  family: UploadFileIconFamily;
+  extension: string;
+};
+/**
+ * Where each part of the icon goes in its 24×24 box: the symbol inside the outline, above a band
+ * holding the extension. Icons 32 pixels or smaller leave the band out and centre the symbol.
+ */
+export declare const getFileIconLayout: (size: number) => {
+  compact: boolean;
+  symbol: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  outlineStroke: number;
+  /** The band and its label, in a half-scale group: `transform="scale(0.5)"`. */
+  band: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rx: number;
+  };
+  label: {
+    x: number;
+    y: number;
+  };
+};
+/** The label's font size, and a squeezed width for long extensions. */
+export declare const getFileIconLabel: (extension: string) => {
+  text: string;
+  fontSize: number;
+  textLength: number | undefined;
+};
+/**
+ * The icon as SVG markup, for the components to insert as it is. `extension` must come from
+ * `getFileIcon`, which keeps only letters and digits.
+ */
+export declare const renderFileIconSvg: ({ family, extension }: {
+  family: UploadFileIconFamily | "unknown";
+  extension: string;
+}, size: number) => string;
+export type { FileIconFamily, UploadFileIconFamily };

package/esm/file-icons.js

@@ -0,0 +1 @@
+export { t as FILE_ICON_COLORS, n as FILE_ICON_OUTLINE, r as FILE_ICON_SYMBOLS, i as MORE_FILE_ICON_SYMBOLS, a as getFileIcon, o as getFileIconLabel, s as getFileIconLayout, c as renderFileIconSvg } from "./FileIcons-M6dzjFxd.js";