@daydreamui/media 0.0.0-stage → 0.3.0

package/dist/index.js

@@ -0,0 +1,678 @@
+import { createComponent, delegateEvents, effect, insert, memo, readShallow, ref, setAttribute, style, template } from "@solidjs/web";
+import { Show, createSignal, onCleanup, onSettled, untrack } from "solid-js";
+var IMAGE_KIND = "daydream.image";
+var VIDEO_KIND = "daydream.video";
+var DEFAULT_FOCAL_POINT = {
+	x: .5,
+	y: .5
+};
+var DEFAULT_IMAGE_FIT = "cover";
+function newMediaPayload(kind, src, label) {
+	return {
+		src,
+		...label === void 0 ? {} : { label },
+		...kind === "daydream.image" ? { fit: DEFAULT_IMAGE_FIT } : {}
+	};
+}
+function applyDefaultImageFit(item) {
+	if (item.kind === "daydream.image" && item.payload.fit === void 0) item.payload.fit = DEFAULT_IMAGE_FIT;
+}
+var ASPECT_RATIO_TOLERANCE = .005;
+function resizeBreaksAspect(context) {
+	if (context.proportional) return false;
+	const startRatio = context.startSize.width / context.startSize.height;
+	const ratio = context.size.width / context.size.height;
+	return Number.isFinite(startRatio) && Number.isFinite(ratio) && Math.abs(ratio / startRatio - 1) > ASPECT_RATIO_TOLERANCE;
+}
+function imageFit(payload) {
+	return payload.fit === "cover" ? "cover" : "contain";
+}
+function imageFocalPoint(payload) {
+	return payload.focalPoint ?? DEFAULT_FOCAL_POINT;
+}
+var DOCUMENT_FILE = /^assets\/(?:[A-Za-z0-9_-]{1,80}\/){0,7}[A-Za-z0-9_-]{1,80}\.[A-Za-z0-9]{1,8}$/;
+function mediaSrcProblem(src) {
+	if (DOCUMENT_FILE.test(src)) return null;
+	if (src.startsWith("https://")) try {
+		if (new URL(src).protocol === "https:") return null;
+	} catch {}
+	return "src must be an https URL or a file of the project's own, assets/<file>";
+}
+function mediaPayloadProblem(raw, where, noun) {
+	if (raw === null || typeof raw !== "object" || Array.isArray(raw)) return `${where} is not ${noun === "image" ? "an" : "a"} ${noun} payload`;
+	const payload = raw;
+	if (typeof payload["src"] !== "string" || payload["src"] === "") return `${where}.src must be a non-empty string`;
+	const problem = mediaSrcProblem(payload["src"]);
+	if (problem !== null) return `${where}.${problem}`;
+	if (payload["label"] !== void 0 && (typeof payload["label"] !== "string" || payload["label"].trim() === "")) return `${where}.label must be a non-empty string (or omitted)`;
+	if (noun === "video" && (payload["fit"] !== void 0 || payload["focalPoint"] !== void 0)) return `${where}.fit and ${where}.focalPoint are only valid for images`;
+	if (payload["fit"] !== void 0 && payload["fit"] !== "contain" && payload["fit"] !== "cover") return `${where}.fit must be "contain", "cover", or omitted`;
+	if (payload["focalPoint"] !== void 0) {
+		const focalPoint = payload["focalPoint"];
+		if (focalPoint === null || typeof focalPoint !== "object" || Array.isArray(focalPoint)) return `${where}.focalPoint must be an object or omitted`;
+		for (const axis of ["x", "y"]) {
+			const value = focalPoint[axis];
+			if (typeof value !== "number" || !Number.isFinite(value) || value < 0 || value > 1) return `${where}.focalPoint.${axis} must be a finite number from 0 to 1`;
+		}
+	}
+	return null;
+}
+function mediaName(item) {
+	return item.payload.label ?? (item.kind === "daydream.image" ? "Image" : "Video");
+}
+var extensions = {
+	png: "image/png",
+	jpg: "image/jpeg",
+	jpeg: "image/jpeg",
+	gif: "image/gif",
+	webp: "image/webp",
+	avif: "image/avif",
+	svg: "image/svg+xml",
+	mp4: "video/mp4",
+	m4v: "video/mp4",
+	webm: "video/webm",
+	mov: "video/quicktime",
+	ogv: "video/ogg"
+};
+function mediaFile(file) {
+	const type = file.type === "" || file.type === "application/octet-stream" ? extensions[file.name.split(".").pop()?.toLowerCase() ?? ""] : file.type;
+	if (type === void 0 || !Object.values(extensions).includes(type)) return null;
+	return type === file.type ? file : new File([file], file.name, {
+		type,
+		lastModified: file.lastModified
+	});
+}
+function labelFromFileName(name) {
+	const dot = name.lastIndexOf(".");
+	return (dot === -1 ? name : name.slice(0, dot)).trim() || void 0;
+}
+function mediaKindOfUrl(src) {
+	try {
+		const type = extensions[new URL(src, "https://local.invalid").pathname.split(".").pop()?.toLowerCase() ?? ""];
+		return type?.startsWith("image/") ? IMAGE_KIND : type?.startsWith("video/") ? VIDEO_KIND : null;
+	} catch {
+		return null;
+	}
+}
+var _tmpl$ = template(`<div class=dd-media-item><!><!>`);
+var _tmpl$2 = template(`<img alt>`);
+var _tmpl$3 = template(`<img alt aria-hidden=true style=position:absolute;visibility:hidden;pointer-events:none;width:100%;height:auto>`);
+var _tmpl$4 = template(`<img alt aria-hidden=true style=position:absolute;visibility:hidden;pointer-events:none;width:auto;height:100%>`);
+var _tmpl$5 = template(`<video controls preload=metadata>`);
+var _tmpl$6 = template(`<span class=dd-media-fit-label role=status>`);
+function mediaStyle(frame, item) {
+	if (frame === void 0) return { display: "block" };
+	if (frame.height === void 0) return {
+		display: "block",
+		width: "100%",
+		height: "auto"
+	};
+	const fit = item?.kind === "daydream.image" ? imageFit(item.payload) : "contain";
+	const focalPoint = item?.kind === "daydream.image" ? imageFocalPoint(item.payload) : void 0;
+	return {
+		display: "block",
+		width: "100%",
+		height: "100%",
+		"object-fit": fit,
+		...focalPoint === void 0 ? {} : { "object-position": `${focalPoint.x * 100}% ${focalPoint.y * 100}%` }
+	};
+}
+function MediaItem(props) {
+	const id = untrack(() => props.item.id);
+	const isImage = untrack(() => props.item.kind === IMAGE_KIND);
+	let binding;
+	let cropBinding;
+	let cropTransaction;
+	let cropStart = DEFAULT_FOCAL_POINT;
+	let cropOverflow = {
+		x: 0,
+		y: 0
+	};
+	let disposing = false;
+	let boxNode;
+	let widthProbeNode;
+	let heightProbeNode;
+	let geometryObserver;
+	let geometryRaf;
+	let fitLabelTimer;
+	const [fitLabel, setFitLabel] = createSignal(null);
+	const [cropping, setCropping] = createSignal(false);
+	const [overflow, setOverflow] = createSignal({
+		x: 0,
+		y: 0
+	});
+	onSettled(() => () => untrack(() => {
+		disposing = true;
+		const transaction = cropTransaction;
+		cropTransaction = void 0;
+		binding?.dispose();
+		cropBinding?.dispose();
+		geometryObserver?.disconnect();
+		if (geometryRaf !== void 0) cancelAnimationFrame(geometryRaf);
+		if (transaction !== void 0) queueMicrotask(() => transaction.cancel());
+		if (fitLabelTimer !== void 0) clearTimeout(fitLabelTimer);
+	}));
+	const src = () => mediaSrcProblem(props.item.payload.src) === null ? props.dd.assetUrl(props.item.payload.src) : void 0;
+	const style$1 = () => ({
+		left: `${props.item.position.x}px`,
+		top: `${props.item.position.y}px`,
+		...props.item.frame === void 0 ? {} : { width: `${props.item.frame.width}px` },
+		...props.item.frame?.height === void 0 ? {} : { height: `${props.item.frame.height}px` },
+		...isImage && props.item.frame?.height !== void 0 && imageFit(props.item.payload) === "cover" ? { overflow: "hidden" } : {}
+	});
+	const failed = () => props.onError?.(`Could not display ${mediaName(props.item)}. This browser may not support the file's format.`);
+	const renderedOverflow = () => {
+		if (boxNode === void 0 || widthProbeNode === void 0 || heightProbeNode === void 0) return {
+			x: 0,
+			y: 0
+		};
+		const frameRect = boxNode.getBoundingClientRect();
+		const widthRect = widthProbeNode.getBoundingClientRect();
+		const heightRect = heightProbeNode.getBoundingClientRect();
+		const coverRect = widthRect.height >= frameRect.height ? widthRect : heightRect;
+		return {
+			x: Math.max(0, coverRect.width - frameRect.width),
+			y: Math.max(0, coverRect.height - frameRect.height)
+		};
+	};
+	const updateOverflow = () => {
+		geometryRaf = void 0;
+		setOverflow(renderedOverflow());
+	};
+	const scheduleOverflowUpdate = () => {
+		if (geometryRaf === void 0) geometryRaf = requestAnimationFrame(updateOverflow);
+	};
+	const observeGeometry = () => {
+		if (geometryObserver !== void 0 || boxNode === void 0) return;
+		geometryObserver = new ResizeObserver(scheduleOverflowUpdate);
+		geometryObserver.observe(boxNode);
+		scheduleOverflowUpdate();
+	};
+	const cropPossible = () => {
+		if (imageFit(props.item.payload) !== "cover") return false;
+		const current = overflow();
+		return current.x > .01 || current.y > .01;
+	};
+	const applyCrop = (delta) => {
+		const clamp = (value) => Math.max(0, Math.min(1, value));
+		const focalPoint = {
+			x: cropOverflow.x > .01 ? clamp(cropStart.x - delta.x / cropOverflow.x) : cropStart.x,
+			y: cropOverflow.y > .01 ? clamp(cropStart.y - delta.y / cropOverflow.y) : cropStart.y
+		};
+		cropTransaction?.update(id, (item) => {
+			if (item.kind === "daydream.image") item.payload.focalPoint = focalPoint;
+		});
+	};
+	const bindCrop = (node) => {
+		cropBinding?.dispose();
+		cropBinding = props.dd.canvas.bindDrag(node, {
+			shouldStart: (event) => event.altKey && cropPossible(),
+			movementAxes: () => ({
+				x: cropOverflow.x > .01,
+				y: cropOverflow.y > .01
+			}),
+			onStart: () => {
+				if (!props.dd.itemSelection().includes(id)) props.dd.select(id);
+				cropStart = { ...imageFocalPoint(props.item.payload) };
+				cropOverflow = renderedOverflow();
+				node.dataset["mediaCropping"] = "";
+				setCropping(true);
+				cropTransaction = props.dd.beginItemTransaction({ onInterrupted: () => {
+					cropTransaction = void 0;
+					delete node.dataset["mediaCropping"];
+					setCropping(false);
+				} });
+			},
+			onMove: (context) => {
+				if (context.moved) applyCrop(context.deltaScreen);
+			},
+			onEnd: (context) => {
+				if (disposing) return;
+				delete node.dataset["mediaCropping"];
+				setCropping(false);
+				if (context.canceled) cropTransaction?.cancel();
+				else if (context.moved) {
+					applyCrop(context.deltaScreen);
+					cropTransaction?.commit();
+				} else cropTransaction?.cancel();
+				cropTransaction = void 0;
+			}
+		});
+	};
+	const toggleFit = (event) => {
+		event.stopPropagation();
+		if (!isImage || event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || props.dd.canvas.panMode() || props.item.frame?.height === void 0) return;
+		const fit = imageFit(props.item.payload) === "cover" ? "contain" : "cover";
+		props.dd.updateItem(id, (item) => {
+			if (item.kind === "daydream.image") item.payload.fit = fit;
+		});
+		props.dd.select(id);
+		setFitLabel(fit === "cover" ? "Fill" : "Fit");
+		if (fitLabelTimer !== void 0) clearTimeout(fitLabelTimer);
+		fitLabelTimer = setTimeout(() => setFitLabel(null), 900);
+	};
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	var _el$3 = _el$2.nextSibling;
+	ref(() => {
+		return (node) => {
+			boxNode = node;
+			observeGeometry();
+			binding = props.dd.canvas.bindItemNode(id, node, {
+				draggable: isImage,
+				canMove: (event) => !isImage || !event.altKey
+			});
+		};
+	}, _el$);
+	_el$._$$dblclick = toggleFit;
+	insert(_el$, (() => {
+		var _c$ = memo(() => {
+			return props.item.kind === IMAGE_KIND;
+		});
+		return () => {
+			return _c$() ? [
+				(() => {
+					var _el$4 = _tmpl$2();
+					_el$4.addEventListener("error", failed);
+					_el$4.addEventListener("load", scheduleOverflowUpdate);
+					ref(() => {
+						return (node) => {
+							observeGeometry();
+							bindCrop(node);
+						};
+					}, _el$4);
+					effect(() => {
+						return {
+							e: src(),
+							t: {
+								...mediaStyle(props.item.frame, props.item),
+								...cropping() ? { cursor: "grabbing" } : props.dd.canvas.optionMode() && cropPossible() ? { cursor: "grab" } : {}
+							}
+						};
+					}, ({ e, t }, _p$) => {
+						e !== _p$?.e && setAttribute(_el$4, "src", e);
+						style(_el$4, t, _p$?.t);
+					});
+					return _el$4;
+				})(),
+				(() => {
+					var _el$5 = _tmpl$3();
+					_el$5.addEventListener("load", scheduleOverflowUpdate);
+					ref(() => {
+						return (node) => widthProbeNode = node;
+					}, _el$5);
+					effect(() => src(), (_v$) => {
+						setAttribute(_el$5, "src", _v$);
+					});
+					return _el$5;
+				})(),
+				(() => {
+					var _el$6 = _tmpl$4();
+					_el$6.addEventListener("load", scheduleOverflowUpdate);
+					ref(() => {
+						return (node) => heightProbeNode = node;
+					}, _el$6);
+					effect(() => src(), (_v$) => {
+						setAttribute(_el$6, "src", _v$);
+					});
+					return _el$6;
+				})()
+			] : (() => {
+				var _el$7 = _tmpl$5();
+				_el$7.addEventListener("error", failed);
+				effect(() => {
+					return {
+						e: src(),
+						t: mediaName(props.item),
+						a: readShallow(mediaStyle(props.item.frame, props.item))
+					};
+				}, ({ e, t, a }, _p$) => {
+					e !== _p$?.e && setAttribute(_el$7, "src", e);
+					t !== _p$?.t && setAttribute(_el$7, "aria-label", t);
+					style(_el$7, a, _p$?.a);
+				});
+				return _el$7;
+			})();
+		};
+	})(), _el$2);
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return fitLabel();
+		},
+		children: (label) => (() => {
+			var _el$8 = _tmpl$6();
+			insert(_el$8, label);
+			return _el$8;
+		})()
+	}), _el$3);
+	effect(() => {
+		return {
+			e: readShallow(style$1()),
+			t: props.item.kind
+		};
+	}, ({ e, t }, _p$) => {
+		style(_el$, e, _p$?.e);
+		t !== _p$?.t && setAttribute(_el$, "data-item-kind", t);
+	});
+	return _el$;
+}
+delegateEvents(["dblclick"]);
+async function measureIncomingMediaItem(item, assetUrl, signal) {
+	const src = assetUrl(item.payload.src);
+	if (typeof document === "undefined" || document.body === null) return null;
+	if (signal?.aborted) return null;
+	const box = document.createElement("div");
+	Object.assign(box.style, {
+		position: "fixed",
+		left: "-100000px",
+		top: "-100000px",
+		visibility: "hidden",
+		pointerEvents: "none",
+		...item.frame === void 0 ? {} : { width: `${item.frame.width}px` },
+		...item.frame?.height === void 0 ? {} : { height: `${item.frame.height}px` }
+	});
+	const media = item.kind === "daydream.image" ? document.createElement("img") : document.createElement("video");
+	if (media instanceof HTMLVideoElement) {
+		media.controls = true;
+		media.preload = "metadata";
+	}
+	for (const [property, value] of Object.entries(mediaStyle(item.frame, item))) media.style.setProperty(property, value);
+	box.append(media);
+	try {
+		if (!await new Promise((resolve) => {
+			const readyEvent = item.kind === "daydream.image" ? "load" : "loadedmetadata";
+			const settle = (ready) => {
+				clearTimeout(timer);
+				media.removeEventListener(readyEvent, onReady);
+				media.removeEventListener("error", onError);
+				signal?.removeEventListener("abort", onError);
+				resolve(ready);
+			};
+			const onReady = () => settle(true);
+			const onError = () => settle(false);
+			const timer = setTimeout(() => settle(false), 1e3);
+			media.addEventListener(readyEvent, onReady);
+			media.addEventListener("error", onError);
+			signal?.addEventListener("abort", onError, { once: true });
+			media.src = src;
+			document.body.append(box);
+		})) return null;
+		const { width, height } = box.getBoundingClientRect();
+		return width > 0 && height > 0 ? {
+			width,
+			height
+		} : null;
+	} finally {
+		box.remove();
+		media.removeAttribute("src");
+		if (media instanceof HTMLVideoElement) media.load();
+	}
+}
+var MAX_DROPPED_IMAGE_WIDTH = 1200;
+var CONCURRENCY = 4;
+var MEASUREMENT_BUDGET_MS = 1e3;
+async function intrinsicImageWidth(file) {
+	try {
+		const bitmap = await createImageBitmap(file);
+		const width = bitmap.width;
+		bitmap.close();
+		return width;
+	} catch {
+		return;
+	}
+}
+function createMediaImporter(dd, status, deps = {}) {
+	let active = true;
+	const batches = new Set();
+	const measureSource = deps.measureSource ?? ((item, signal) => measureIncomingMediaItem(item, (src) => dd.assetUrl(src), signal));
+	const cancel = () => {
+		const aborted = batches.size > 0;
+		for (const batch of batches) batch.abort();
+		batches.clear();
+		return aborted;
+	};
+	const run = async (jobs, at) => {
+		if (!active) return;
+		if (jobs.length === 0) {
+			status("Choose a supported image or video file.");
+			return;
+		}
+		const load = dd.loadVersion();
+		const controller = new AbortController();
+		const measurement = new AbortController();
+		const stopMeasurement = () => measurement.abort();
+		controller.signal.addEventListener("abort", stopMeasurement, { once: true });
+		const timer = setTimeout(stopMeasurement, MEASUREMENT_BUDGET_MS);
+		const current = () => active && !controller.signal.aborted && dd.loadVersion() === load;
+		batches.add(controller);
+		const results = new Array(jobs.length);
+		const failures = [];
+		let cursor = 0;
+		let completed = 0;
+		const progress = () => status(`Importing media… ${completed}/${jobs.length}`);
+		progress();
+		const worker = async () => {
+			while (cursor < jobs.length && current()) {
+				const index = cursor++;
+				const job = jobs[index];
+				try {
+					results[index] = await job.prepare(controller.signal, measurement.signal);
+				} catch (error) {
+					failures.push(`${job.name}: ${error instanceof Error ? error.message : "could not import file"}`);
+				}
+				if (!current()) return;
+				completed++;
+				progress();
+			}
+		};
+		try {
+			await Promise.all(Array.from({ length: Math.min(CONCURRENCY, jobs.length) }, worker));
+			if (!current()) return;
+			const items = results.filter((result) => result !== void 0).map(({ kind, payload, width }, index) => ({
+				id: dd.core.generateId(),
+				kind,
+				payload,
+				position: {
+					x: at.x + index * 24,
+					y: at.y + index * 24
+				},
+				...kind === "daydream.image" && width !== void 0 && width > 1200 ? { frame: { width: MAX_DROPPED_IMAGE_WIDTH } } : {}
+			}));
+			if (items.length > 0) dd.mutateItems((draft) => {
+				draft.push(...items);
+			});
+			status(failures.length > 0 ? failures.join("; ") : `Added ${items.length} ${items.length === 1 ? "file" : "files"}.`);
+		} catch (error) {
+			if (current()) status(error instanceof Error ? error.message : "Could not add media.");
+		} finally {
+			clearTimeout(timer);
+			controller.signal.removeEventListener("abort", stopMeasurement);
+			measurement.abort();
+			batches.delete(controller);
+		}
+	};
+	return {
+		cancel() {
+			if (cancel() && active) status("Import canceled.");
+		},
+		dispose() {
+			active = false;
+			cancel();
+		},
+		add(files, at) {
+			return run(files.map(mediaFile).filter((file) => file !== null).map((file) => ({
+				name: file.name,
+				async prepare(signal) {
+					const { pageSrc: src } = await dd.vendorFile(file);
+					signal.throwIfAborted();
+					const image = file.type.startsWith("image/");
+					const width = image ? await (deps.imageWidth ?? intrinsicImageWidth)(file) : void 0;
+					const label = labelFromFileName(file.name);
+					return {
+						kind: image ? IMAGE_KIND : VIDEO_KIND,
+						payload: newMediaPayload(image ? IMAGE_KIND : VIDEO_KIND, src, label),
+						width
+					};
+				}
+			})), at);
+		},
+		addSources(sources, at) {
+			return run(sources.filter(({ src }) => mediaSrcProblem(src) === null).map(({ kind, src }) => ({
+				name: src,
+				async prepare(_signal, measurementSignal) {
+					const item = {
+						id: "probe",
+						kind,
+						payload: newMediaPayload(kind, src),
+						position: {
+							x: 0,
+							y: 0
+						}
+					};
+					const size = measurementSignal.aborted ? null : await measureSource(item, measurementSignal);
+					return {
+						kind,
+						payload: newMediaPayload(kind, src),
+						width: size?.width
+					};
+				}
+			})), at);
+		}
+	};
+}
+function mediaSources(dd, transfer) {
+	const sources = [];
+	const add = (kind, src) => {
+		if (src === null || mediaSrcProblem(src) !== null) return;
+		if (!sources.some((source) => source.src === src)) sources.push({
+			kind,
+			src
+		});
+	};
+	const uriList = transfer.getData("text/uri-list");
+	if (uriList !== "") {
+		for (const line of uriList.split(/\r?\n/)) {
+			const src = line.trim();
+			if (src.startsWith("#")) continue;
+			const kind = mediaKindOfUrl(src);
+			if (kind !== null) add(kind, src);
+		}
+		if (sources.length > 0) return sources;
+	}
+	const html = transfer.getData("text/html");
+	if (html !== "") {
+		const template = document.createElement("template");
+		template.innerHTML = html;
+		const elements = [...template.content.querySelectorAll("img,video")];
+		const prose = template.content.cloneNode(true);
+		for (const element of prose.querySelectorAll("img,video,picture,script,style,template")) element.remove();
+		if (prose.textContent?.trim()) return [];
+		for (const element of elements) add(element.localName === "img" ? IMAGE_KIND : VIDEO_KIND, element.getAttribute("src") ?? element.querySelector("source[src]")?.getAttribute("src") ?? null);
+		if (elements.length > 0) return sources;
+	}
+	const lines = transfer.getData("text/plain").trim().split(/\r?\n/).map((line) => line.trim());
+	for (const src of lines) {
+		const kind = mediaKindOfUrl(src);
+		if (kind === null || mediaSrcProblem(src) !== null) return [];
+		add(kind, src);
+	}
+	return sources;
+}
+function registerTransfers(dd, importer) {
+	const receive = (event, transfer, at) => {
+		if (transfer === null) return;
+		const files = Array.from(transfer.files);
+		if (files.some((file) => mediaFile(file) !== null)) {
+			event.preventDefault();
+			importer.add(files, at);
+			return;
+		}
+		const sources = mediaSources(dd, transfer);
+		if (sources.length === 0) return;
+		event.preventDefault();
+		importer.addSources(sources, at);
+	};
+	dd.canvas.onPaste((event) => receive(event, event.clipboardData, dd.canvas.center()), { priority: 10 });
+	dd.canvas.onDragOver((event) => {
+		if (!event.dataTransfer?.types.some((type) => [
+			"Files",
+			"text/html",
+			"text/uri-list"
+		].includes(type))) return;
+		event.preventDefault();
+		event.dataTransfer.dropEffect = "copy";
+	});
+	dd.canvas.onDrop((event) => receive(event, event.dataTransfer, dd.canvas.screenToWorld(event.clientX, event.clientY)));
+}
+var mediaStyles = `
+.dd-media-item { position: absolute; }
+.dd-media-item img[data-media-cropping] { cursor: grabbing; }
+.dd-media-fit-label {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 1;
+  transform: translate(-50%, -50%);
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--dream-app-raised, #141416) 88%, transparent);
+  color: var(--dream-app-bright, #f4f4f5);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 1.4;
+  pointer-events: none;
+}
+`;
+function activate(dd) {
+	const report = (message) => {
+		console.info(`[${dd.plugin.id}] ${message}`);
+	};
+	const importer = createMediaImporter(dd, report);
+	let load = untrack(() => dd.loadVersion());
+	dd.on("document", () => {
+		const nextLoad = untrack(() => dd.loadVersion());
+		if (nextLoad === load) return;
+		load = nextLoad;
+		importer.cancel();
+	});
+	const style = document.createElement("style");
+	style.dataset["daydreamMediaStyles"] = "";
+	style.textContent = mediaStyles;
+	document.head.append(style);
+	onCleanup(() => {
+		importer.dispose();
+		style.remove();
+	});
+	for (const kind of [IMAGE_KIND, VIDEO_KIND]) dd.registerItemKind({
+		kind,
+		payloadProblem: (raw, where) => mediaPayloadProblem(raw, where, kind === "daydream.image" ? "image" : "video"),
+		render: (props) => createComponent(MediaItem, {
+			dd,
+			get item() {
+				return props.item;
+			},
+			onError: report
+		}),
+		name: (item) => mediaName(item),
+		rename: (item, name) => {
+			item.payload.label = name;
+		},
+		describe: (item) => {
+			const { src, label } = item.payload;
+			const source = label === void 0 ? src : `${label} — ${src}`;
+			return kind === "daydream.image" ? `${source} — ${imageFit(item.payload) === "cover" ? "Fill" : "Fit"}` : source;
+		},
+		resize: {
+			reset: true,
+			...kind === "daydream.image" ? {
+				freeform: true,
+				handles: "all",
+				onResize: (item, context) => {
+					if (resizeBreaksAspect(context)) applyDefaultImageFit(item);
+				}
+			} : {}
+		}
+	});
+	registerTransfers(dd, importer);
+}
+export { activate as default };

package/icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter">
+  <path d="M3 4h18v16H3V4Z" stroke="#839999"/>
+  <path d="m4 17 5-5 5 5h6" stroke="#E7E5DE"/>
+  <circle cx="16" cy="9" r="2.2" fill="#F66A2C"/>
+</svg>

package/manifest.json

@@ -0,0 +1,15 @@
+{
+  "id": "daydream.media",
+  "name": "Media",
+  "description": "Images and videos as canvas items, beside your pages.",
+  "version": "0.3.0",
+  "api": "3.1",
+  "contributes": {
+    "itemKinds": [
+      "daydream.image",
+      "daydream.video"
+    ],
+    "instructions": "Images and videos on the canvas are provided together by Media. Media contributes no panel, command or shortcut. They are daydream.image and daydream.video items with payload {src, label?, fit?, focalPoint?}; src is an https URL, kept as written and loaded from its source, or a file of the project's own, assets/<file>, from the project's root; label is an optional non-empty canvas name. Image fit is contain or cover and defaults to cover for new images; focalPoint is normalized {x,y} from 0 to 1 and defaults to center. Omit frame for intrinsic size; width alone scales proportionally, while width and height use the image fit mode. Change an existing one with update_item and take it out with remove_item. Double-click a two-axis image to toggle Fill/Fit; Option-click-drag repositions cropped Fill content. Images otherwise drag by their body; videos always contain, play with native controls, and move by the title bar. Disabling Media preserves existing items as placeholders. Pasting or dropping a browser image/video, or a direct https media URL, adds an item: only its safe source URL is stored, never the foreign HTML, and it depends on that source staying available. Pasting or dropping an image or video FILE copies it into the project's assets/, named by its bytes (assets/gen-<hash>.<ext>), and adds an item whose src names that copy, project-relative."
+  },
+  "built": "dist/index.js"
+}

package/package.json

@@ -1,6 +1,17 @@
 {
   "name": "@daydreamui/media",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.0",
+  "type": "module",
+  "description": "Images and videos as canvas items, beside your pages.",
+  "keywords": [
+    "daydream-plugin"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/martinbavio/daydream-plugins.git",
+    "directory": "plugins/daydream.media"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.