@calmlens/sdk 0.16.3 → 0.18.0

package/cjs/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-wIiMfqMB.js";
+import { a as UploaderProps, i as UploadSnapshot, n as UploadControllerOptions, r as UploadItem, s as createUploadController, t as CalmLensUpload } from "./BrowserUpload-BT091eOB.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/cjs/elements.js

@@ -0,0 +1,555 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_ui = require("./ui-CC1GOoMg.js");
+const require_UploadController = require("./UploadController-BGO1eyzb.js");
+const require_BrowserUpload = require("./BrowserUpload-CQwXEGFv.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(require_ui.ICON_ATTRIBUTES)) svg.setAttribute(attribute, value);
+	const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+	path.setAttribute("d", require_ui.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 ??= require_UploadController.createUploadController(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 = require_ui.resolveMessages(this.#messages);
+		const disabled = this.hasAttribute("disabled");
+		const view = require_ui.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 = require_ui.resolveMessages(this.#messages);
+		const snapshot = this.controller.getSnapshot();
+		const { items } = snapshot;
+		const view = require_ui.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 = require_ui.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 require_ui.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 = require_ui.getMediaState(options);
+		const loadKey = `${require_ui.getMediaLoadKey(state)} ${this.getAttribute("alt")} ${this.getAttribute("sizes")} ${options.viewerClaims?.ageConfirmed}`;
+		const ratio = require_ui.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 = require_ui.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" }, [require_ui.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();
+exports.CALMLENS_STYLES = require_ui.CALMLENS_STYLES;
+exports.CALMLENS_THEME = require_ui.CALMLENS_THEME;
+exports.CalmLensMediaElement = CalmLensMediaElement;
+exports.CalmLensUploaderElement = CalmLensUploaderElement;
+exports.DEFAULT_MESSAGES = require_ui.DEFAULT_MESSAGES;
+exports.ICONS = require_ui.ICONS;
+exports.ICON_ATTRIBUTES = require_ui.ICON_ATTRIBUTES;
+exports.UploadController = require_UploadController.UploadController;
+exports.createProgressFetch = require_UploadController.createProgressFetch;
+exports.createUploadController = require_BrowserUpload.createUploadController;
+exports.defineCalmLensElements = defineCalmLensElements;
+exports.describeUploadItem = require_ui.describeUploadItem;
+exports.describeUploader = require_ui.describeUploader;
+exports.formatBytes = require_ui.formatBytes;
+exports.formatMessage = require_ui.formatMessage;
+exports.getDropzoneHint = require_ui.getDropzoneHint;
+exports.getMediaAspectRatio = require_ui.getMediaAspectRatio;
+exports.getMediaLoadKey = require_ui.getMediaLoadKey;
+exports.getMediaState = require_ui.getMediaState;
+exports.getMediaUnavailableMessage = require_ui.getMediaUnavailableMessage;
+exports.getUploadItemMessage = require_ui.getUploadItemMessage;
+exports.getUploadItemOutcome = require_ui.getUploadItemOutcome;
+exports.isFileAccepted = require_UploadController.isFileAccepted;
+exports.pickMediaSource = require_ui.pickMediaSource;
+exports.resolveMediaProps = require_ui.resolveMediaProps;
+exports.resolveMessages = require_ui.resolveMessages;
+exports.resolveTheme = require_ui.resolveTheme;