@scenography/overlay-presets 0.2.0

package/dist/index.mjs

@@ -0,0 +1,890 @@
+import { resolveText } from "@scenography/overlay";
+//#region src/lucide.ts
+/**
+* Render a Lucide icon by name as overlay button content.
+*
+* Lucide is an OPTIONAL peer dependency: it's imported lazily, so the overlay
+* works without it. When lucide isn't installed the icon renders empty — install
+* `lucide`, pass your own `icon` to a prefab, or use `actionButton` if you don't
+* want the dependency.
+*/
+function lucideIcon(name, size = 18) {
+	return () => {
+		const span = document.createElement("span");
+		span.style.display = "inline-flex";
+		import("lucide").then((lucide) => {
+			const node = lucide[name];
+			if (node === void 0) return;
+			const svg = lucide.createElement(node);
+			svg.setAttribute("width", String(size));
+			svg.setAttribute("height", String(size));
+			span.replaceChildren(svg);
+		}).catch(() => {});
+		return span;
+	};
+}
+//#endregion
+//#region src/util.ts
+/** Replace an element's content with an icon/glyph (string → text, node → child). */
+function setIcon(el, content) {
+	const value = typeof content === "function" ? content() : content;
+	el.replaceChildren();
+	if (typeof value === "string") el.textContent = value;
+	else el.appendChild(value);
+}
+/**
+* Run `apply` once and re-run it whenever the overlay's locale changes, so a
+* component's `Text` values stay localized live. Returns an unsubscribe to call
+* on teardown (a no-op when no locale source is configured).
+*/
+function bindLocale(ctx, apply) {
+	apply();
+	return ctx.locale?.subscribe(apply) ?? (() => {});
+}
+//#endregion
+//#region src/components/fullscreen/fullscreen.ts
+/**
+* A fullscreen toggle. daisyUI prefab (styled with `btn`). Defaults to plain
+* glyphs and pulls in no icon library; pass `icons` (e.g. via `lucideIcon` or
+* your own SVGs) for richer iconography.
+*/
+function fullscreenButton(options = {}) {
+	const enter = options.icons?.enter ?? "⛶";
+	const exit = options.icons?.exit ?? "✕";
+	return (ctx) => {
+		const button = document.createElement("button");
+		button.type = "button";
+		button.className = options.className ?? "btn btn-circle btn-sm";
+		const sync = () => {
+			const active = document.fullscreenElement !== null;
+			setIcon(button, active ? exit : enter);
+			button.setAttribute("aria-label", active ? "Exit fullscreen" : "Enter fullscreen");
+		};
+		const onClick = () => {
+			if (document.fullscreenElement) document.exitFullscreen();
+			else ctx.surface.requestFullscreen?.();
+		};
+		button.addEventListener("click", onClick);
+		document.addEventListener("fullscreenchange", sync);
+		sync();
+		return {
+			element: button,
+			destroy() {
+				button.removeEventListener("click", onClick);
+				document.removeEventListener("fullscreenchange", sync);
+			}
+		};
+	};
+}
+//#endregion
+//#region src/components/mute/mute.ts
+/**
+* A mute toggle for background audio. daisyUI prefab (styled with `btn`). Drives
+* `ctx.media` master mute, so it silences every source while keeping their
+* individual volumes — one click restores the mix exactly. Defaults to plain
+* glyphs (no icon library); pass `icons` (e.g. `lucideIcon`) for richer icons.
+*/
+function muteButton(options = {}) {
+	const on = options.icons?.on ?? "🔊";
+	const off = options.icons?.off ?? "🔇";
+	return (ctx) => {
+		const media = ctx.gallery.ctx.media;
+		const button = document.createElement("button");
+		button.type = "button";
+		button.className = options.className ?? "btn btn-circle btn-sm";
+		const sync = () => {
+			const muted = media.muted();
+			setIcon(button, muted ? off : on);
+			button.setAttribute("aria-label", muted ? "Unmute" : "Mute");
+		};
+		const onClick = () => {
+			media.setMuted(!media.muted());
+			sync();
+		};
+		button.addEventListener("click", onClick);
+		sync();
+		return {
+			element: button,
+			destroy: () => button.removeEventListener("click", onClick)
+		};
+	};
+}
+//#endregion
+//#region src/components/cardboard/cardboard.ts
+/**
+* A cardboard (stereoscopic) toggle. Flips `ctx.gallery.setRender({ cardboard })`
+* to split the view into a left/right eye pair for a phone-in-a-headset viewer,
+* and reflects the on state with daisyUI's `btn-active`. Defaults to a plain
+* glyph; pass `icon` (e.g. `lucideIcon("RectangleGoggles")`).
+*/
+function cardboardButton(options = {}) {
+	const icon = options.icon ?? "🥽";
+	const label = options.label ?? "Cardboard mode";
+	return (ctx) => {
+		const button = document.createElement("button");
+		button.type = "button";
+		button.className = options.className ?? "btn btn-circle btn-sm";
+		button.setAttribute("aria-label", label);
+		setIcon(button, icon);
+		let enabled = false;
+		const onClick = () => {
+			enabled = !enabled;
+			ctx.gallery.setRender({ cardboard: enabled });
+			button.classList.toggle("btn-active", enabled);
+			button.setAttribute("aria-pressed", String(enabled));
+		};
+		button.addEventListener("click", onClick);
+		return {
+			element: button,
+			destroy: () => button.removeEventListener("click", onClick)
+		};
+	};
+}
+//#endregion
+//#region src/components/environment/environment.ts
+/**
+* An environment panel: a button (e.g. a sun/cloud icon) opening a daisyUI modal
+* with sliders for ambient settings like time of day and sun azimuth. Optional
+* in the default preset — galleries with a procedural sky opt in. daisyUI +
+* Lucide prefab.
+*/
+function environmentPanel(options) {
+	const icon = options.icon ?? "☀";
+	return (ctx) => {
+		const wrap = document.createElement("div");
+		const button = document.createElement("button");
+		button.type = "button";
+		button.className = "btn btn-circle btn-sm";
+		setIcon(button, icon);
+		const dialog = document.createElement("dialog");
+		dialog.className = "modal";
+		const box = document.createElement("div");
+		box.className = "modal-box max-w-sm";
+		const close = document.createElement("button");
+		close.type = "button";
+		close.className = "btn btn-sm btn-circle btn-ghost absolute right-2 top-2";
+		close.textContent = "✕";
+		const heading = document.createElement("h3");
+		heading.className = "text-lg font-bold mb-4";
+		box.append(close, heading);
+		const cleanups = [];
+		const relabels = [];
+		const controls = /* @__PURE__ */ new Map();
+		for (const slider of options.sliders) {
+			const field = document.createElement("label");
+			field.className = "flex flex-col gap-1 mt-2 first:mt-0";
+			const head = document.createElement("span");
+			head.className = "label-text text-sm flex justify-between";
+			const name = document.createElement("span");
+			const value = document.createElement("span");
+			value.className = "opacity-60";
+			head.append(name, value);
+			const input = document.createElement("input");
+			input.type = "range";
+			input.className = "range range-sm";
+			input.min = String(slider.min);
+			input.max = String(slider.max);
+			input.step = String(slider.step ?? .1);
+			input.value = String(slider.value);
+			value.textContent = input.value;
+			const onInput = () => {
+				value.textContent = input.value;
+				slider.onChange(parseFloat(input.value));
+			};
+			input.addEventListener("input", onInput);
+			cleanups.push(() => input.removeEventListener("input", onInput));
+			field.append(head, input);
+			box.appendChild(field);
+			controls.set(slider.key, {
+				input,
+				value,
+				onChange: slider.onChange
+			});
+			relabels.push(() => {
+				name.textContent = resolveText(slider.label);
+			});
+		}
+		if (options.presets?.length) {
+			const row = document.createElement("div");
+			row.className = "flex flex-wrap gap-2 mt-4";
+			for (const preset of options.presets) {
+				const btn = document.createElement("button");
+				btn.type = "button";
+				btn.className = "btn btn-xs";
+				const apply = () => {
+					for (const [key, val] of Object.entries(preset.values)) {
+						const ctrl = controls.get(key);
+						if (!ctrl) continue;
+						ctrl.input.value = String(val);
+						ctrl.value.textContent = String(val);
+						ctrl.onChange(val);
+					}
+				};
+				btn.addEventListener("click", apply);
+				cleanups.push(() => btn.removeEventListener("click", apply));
+				row.appendChild(btn);
+				relabels.push(() => {
+					btn.textContent = resolveText(preset.label);
+				});
+			}
+			box.appendChild(row);
+		}
+		const backdrop = document.createElement("form");
+		backdrop.method = "dialog";
+		backdrop.className = "modal-backdrop";
+		const backdropBtn = document.createElement("button");
+		backdropBtn.textContent = "close";
+		backdrop.appendChild(backdropBtn);
+		dialog.append(box, backdrop);
+		wrap.append(button, dialog);
+		const unbind = bindLocale(ctx, () => {
+			const title = resolveText(options.title);
+			button.setAttribute("aria-label", title);
+			heading.textContent = title;
+			close.setAttribute("aria-label", resolveText(options.closeLabel ?? "Close"));
+			for (const relabel of relabels) relabel();
+		});
+		const onOpen = () => dialog.showModal();
+		const onClose = () => dialog.close();
+		button.addEventListener("click", onOpen);
+		close.addEventListener("click", onClose);
+		return {
+			element: wrap,
+			destroy: () => {
+				button.removeEventListener("click", onOpen);
+				close.removeEventListener("click", onClose);
+				for (const fn of cleanups) fn();
+				unbind();
+			}
+		};
+	};
+}
+//#endregion
+//#region src/components/credits/credits.ts
+let panelCount = 0;
+const buildRow = (item) => {
+	const row = document.createElement("div");
+	row.className = "text-sm leading-snug";
+	const name = document.createElement(item.href ? "a" : "span");
+	name.textContent = item.label;
+	if (item.href) {
+		const link = name;
+		link.href = item.href;
+		link.target = "_blank";
+		link.rel = "noopener noreferrer";
+		link.className = "link link-hover font-medium";
+	} else name.className = "font-medium";
+	row.appendChild(name);
+	const meta = [item.author, item.license].filter(Boolean).join(" · ");
+	if (meta) {
+		const small = document.createElement("span");
+		small.className = "opacity-60";
+		small.textContent = ` — ${meta}`;
+		row.appendChild(small);
+	}
+	return row;
+};
+const buildSection = (section) => {
+	const heading = document.createElement("div");
+	heading.className = "font-semibold text-xs uppercase tracking-wide opacity-50 mt-3 first:mt-0";
+	heading.textContent = section.label;
+	return heading;
+};
+const buildEntries = (entries) => entries.map((entry) => entry.type === "section" ? buildSection(entry) : buildRow(entry));
+/**
+* A credits panel: a button opening a centered daisyUI modal (✕ close,
+* click-outside, Esc) listing attributions. Entries are data (`items`): loose
+* items and sections show first; `tab` entries become a daisyUI tab strip below
+* (first tab open), so an exhibition can credit its author up top and group
+* assets/technology/etc. into tabs with sectioned lists. Defaults to a plain
+* glyph icon; pass `icon` (e.g. `lucideIcon`).
+*/
+function creditsPanel(options) {
+	const icon = options.icon ?? "ⓘ";
+	return (ctx) => {
+		const tabsName = `sg-credits-tabs-${panelCount++}`;
+		const wrap = document.createElement("div");
+		const button = document.createElement("button");
+		button.type = "button";
+		button.className = options.className ?? "btn btn-circle btn-sm";
+		setIcon(button, icon);
+		const dialog = document.createElement("dialog");
+		dialog.className = "modal";
+		const box = document.createElement("div");
+		box.className = "modal-box";
+		const close = document.createElement("button");
+		close.type = "button";
+		close.className = "btn btn-sm btn-circle btn-ghost absolute right-2 top-2";
+		close.textContent = "✕";
+		close.setAttribute("aria-label", "Close");
+		const heading = document.createElement("h3");
+		heading.className = "text-lg font-bold mb-3";
+		const loose = document.createElement("div");
+		loose.className = "flex flex-col gap-1";
+		const tablist = document.createElement("div");
+		tablist.setAttribute("role", "tablist");
+		tablist.className = "tabs tabs-border mt-2";
+		box.append(close, heading, loose, tablist);
+		const backdrop = document.createElement("form");
+		backdrop.method = "dialog";
+		backdrop.className = "modal-backdrop";
+		const backdropBtn = document.createElement("button");
+		backdropBtn.textContent = "close";
+		backdrop.appendChild(backdropBtn);
+		dialog.append(box, backdrop);
+		wrap.append(button, dialog);
+		const render = (entries) => {
+			const flat = entries.filter((e) => e.type !== "tab");
+			const tabs = entries.filter((e) => e.type === "tab");
+			loose.replaceChildren(...buildEntries(flat));
+			loose.style.display = flat.length ? "" : "none";
+			const nodes = [];
+			tabs.forEach((tab, i) => {
+				const input = document.createElement("input");
+				input.type = "radio";
+				input.name = tabsName;
+				input.role = "tab";
+				input.className = "tab";
+				input.setAttribute("aria-label", tab.label);
+				if (i === 0) input.checked = true;
+				const pane = document.createElement("div");
+				pane.className = "tab-content pt-3";
+				const list = document.createElement("div");
+				list.className = "flex flex-col gap-1";
+				list.replaceChildren(...buildEntries(tab.children));
+				pane.appendChild(list);
+				nodes.push(input, pane);
+			});
+			tablist.replaceChildren(...nodes);
+			tablist.style.display = tabs.length ? "" : "none";
+		};
+		const unbind = bindLocale(ctx, () => {
+			const title = resolveText(options.title ?? "Credits");
+			button.setAttribute("aria-label", title);
+			heading.textContent = title;
+			render(typeof options.items === "function" ? options.items() : options.items);
+		});
+		const onOpen = () => dialog.showModal();
+		const onClose = () => dialog.close();
+		button.addEventListener("click", onOpen);
+		close.addEventListener("click", onClose);
+		return {
+			element: wrap,
+			destroy() {
+				button.removeEventListener("click", onOpen);
+				close.removeEventListener("click", onClose);
+				unbind();
+			}
+		};
+	};
+}
+//#endregion
+//#region src/components/action-button/action-button.ts
+/**
+* A generic clickable button — the lucide-free alternative to the opinionated
+* prefabs. Supply any `icon` (glyph, your own SVG, a Lucide icon you wired up)
+* and an `onClick`. daisyUI prefab (styled with `btn`).
+*/
+function actionButton(options) {
+	return (ctx) => {
+		const button = document.createElement("button");
+		button.type = "button";
+		button.className = options.className ?? "btn btn-sm";
+		if (options.icon !== void 0) setIcon(button, options.icon);
+		if (options.label !== void 0) {
+			const label = document.createElement("span");
+			label.textContent = options.label;
+			button.appendChild(label);
+		}
+		if (options.ariaLabel) button.setAttribute("aria-label", options.ariaLabel);
+		const onClick = () => options.onClick(ctx);
+		button.addEventListener("click", onClick);
+		return {
+			element: button,
+			destroy: () => button.removeEventListener("click", onClick)
+		};
+	};
+}
+//#endregion
+//#region src/components/info/info.ts
+/**
+* An info panel: an ⓘ button that opens a centered daisyUI modal with a title
+* and a block of text (with an ✕ close, click-outside and Esc). Content is data,
+* so the app supplies the (already localized) strings. daisyUI + Lucide prefab.
+*/
+function infoPanel(options) {
+	return (ctx) => {
+		const wrap = document.createElement("div");
+		const button = document.createElement("button");
+		button.type = "button";
+		button.className = "btn btn-circle btn-sm";
+		setIcon(button, lucideIcon("Info"));
+		const dialog = document.createElement("dialog");
+		dialog.className = "modal";
+		const box = document.createElement("div");
+		box.className = "modal-box max-w-sm";
+		const close = document.createElement("button");
+		close.type = "button";
+		close.className = "btn btn-sm btn-circle btn-ghost absolute right-2 top-2";
+		close.textContent = "✕";
+		const heading = document.createElement("h3");
+		heading.className = "text-lg font-bold mb-3";
+		const text = document.createElement("p");
+		text.className = "text-sm leading-relaxed";
+		box.append(close, heading, text);
+		const backdrop = document.createElement("form");
+		backdrop.method = "dialog";
+		backdrop.className = "modal-backdrop";
+		const backdropBtn = document.createElement("button");
+		backdropBtn.textContent = "close";
+		backdrop.appendChild(backdropBtn);
+		dialog.append(box, backdrop);
+		wrap.append(button, dialog);
+		const unbind = bindLocale(ctx, () => {
+			const title = resolveText(options.title);
+			button.setAttribute("aria-label", title);
+			heading.textContent = title;
+			text.textContent = resolveText(options.text);
+			close.setAttribute("aria-label", resolveText(options.closeLabel ?? "Close"));
+		});
+		const onOpen = () => dialog.showModal();
+		const onClose = () => dialog.close();
+		button.addEventListener("click", onOpen);
+		close.addEventListener("click", onClose);
+		return {
+			element: wrap,
+			destroy: () => {
+				button.removeEventListener("click", onOpen);
+				close.removeEventListener("click", onClose);
+				unbind();
+			}
+		};
+	};
+}
+//#endregion
+//#region src/components/artwork-info/artwork-info.ts
+const AVAILABILITY_COLOR = {
+	available: "#22c55e",
+	unavailable: "#ef4444"
+};
+const STYLE_ID = "scenography-artwork-info-styles";
+const PANEL_FRACTION = .4;
+const FREE_FRACTION = 1 - PANEL_FRACTION;
+const CENTER_X = .7;
+/**
+* Inject the panel's own CSS once. Self-contained on purpose: a consumer's
+* Tailwind build doesn't scan this package in `node_modules`, so utility classes
+* wouldn't be generated — the panel must not depend on them.
+*/
+function ensureStyles() {
+	if (typeof document === "undefined" || document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = `.sg-artwork-panel{position:absolute;left:0;top:0;height:100%;width:${PANEL_FRACTION * 100}%;box-sizing:border-box;background:rgba(0,0,0,0.85);color:#fff;padding:2.5rem;z-index:10;overflow-y:auto;display:none;flex-direction:column;gap:0.75rem;pointer-events:auto;font-family:system-ui,sans-serif;}.sg-artwork-panel--open{display:flex;}.sg-artwork-panel__close{align-self:flex-end;background:none;border:none;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;opacity:0.7;padding:0;}.sg-artwork-panel__close:hover{opacity:1;}.sg-artwork-panel__title{font-size:1.75rem;font-weight:700;margin:0;}.sg-artwork-panel__meta{display:flex;flex-direction:column;gap:0.15rem;font-size:0.9rem;opacity:0.8;}.sg-artwork-panel__status{display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;font-weight:600;}.sg-artwork-panel__dot{width:0.7rem;height:0.7rem;border-radius:50%;flex:none;}.sg-artwork-panel__desc{font-size:1rem;line-height:1.6;margin-top:0.5rem;white-space:pre-line;}.sg-artwork-panel__link{align-self:flex-start;margin-top:0.5rem;display:inline-flex;align-items:center;gap:0.4rem;color:#fff;text-decoration:underline;font-size:0.95rem;}.sg-artwork-panel__link:hover{opacity:0.8;}`;
+	document.head.appendChild(style);
+}
+const join = (parts, sep) => parts.filter((p) => Boolean(p)).join(sep);
+/**
+* The artwork info panel. The engine emits `artwork:select { id }` when you click
+* a piece's cartela (or the piece itself); this opens a left-hand panel (40%
+* width, full height, black at 85% alpha) with the full caption and asks the
+* camera to frame the piece in the free right 60%. Closing with ✕ re-centers the
+* piece full-width; if the user walks/turns away the engine emits
+* `artwork:released` and the panel just closes (no camera move).
+*
+* Content is data (`artworks`), unlocalized for now. The panel is mounted on the
+* surface (escaping the overlay grid); the slot element is an inert placeholder.
+*/
+function artworkInfo(options) {
+	const byId = new Map(options.artworks.map((a) => [a.id, a]));
+	return (ctx) => {
+		ensureStyles();
+		const camera = ctx.gallery.ctx.camera;
+		const panel = document.createElement("div");
+		panel.className = "sg-artwork-panel sg-overlay__item";
+		const close = document.createElement("button");
+		close.type = "button";
+		close.className = "sg-artwork-panel__close";
+		close.textContent = "✕";
+		close.setAttribute("aria-label", options.closeLabel ?? "Close");
+		const title = document.createElement("h2");
+		title.className = "sg-artwork-panel__title";
+		const meta = document.createElement("div");
+		meta.className = "sg-artwork-panel__meta";
+		const status = document.createElement("div");
+		status.className = "sg-artwork-panel__status";
+		const statusDot = document.createElement("span");
+		statusDot.className = "sg-artwork-panel__dot";
+		const statusText = document.createElement("span");
+		status.append(statusDot, statusText);
+		const desc = document.createElement("p");
+		desc.className = "sg-artwork-panel__desc";
+		const link = document.createElement("a");
+		link.className = "sg-artwork-panel__link";
+		link.target = "_blank";
+		link.rel = "noopener noreferrer";
+		link.textContent = `${options.linkText ?? "View artwork"} ↗`;
+		panel.append(close, title, meta, status, desc, link);
+		ctx.surface.appendChild(panel);
+		let currentId = null;
+		const render = (artwork) => {
+			title.textContent = artwork.title ?? "";
+			const lines = [join([artwork.author, artwork.year?.toString()], ", "), join([artwork.technique, artwork.dimensions], ", ")].filter(Boolean);
+			meta.replaceChildren(...lines.map((line) => {
+				const span = document.createElement("span");
+				span.textContent = line;
+				return span;
+			}));
+			const av = artwork.availability;
+			if (av === void 0) status.style.display = "none";
+			else {
+				status.style.display = "flex";
+				const forSale = av === "for-sale";
+				statusDot.style.backgroundColor = forSale ? AVAILABILITY_COLOR.available : AVAILABILITY_COLOR.unavailable;
+				statusText.textContent = forSale ? options.availabilityText?.forSale ?? "For sale" : options.availabilityText?.privateCollection ?? "Private collection";
+			}
+			desc.textContent = artwork.description ?? "";
+			if (artwork.href) {
+				link.href = artwork.href;
+				link.style.display = "inline-flex";
+			} else link.style.display = "none";
+		};
+		const hide = () => {
+			panel.classList.remove("sg-artwork-panel--open");
+			currentId = null;
+		};
+		const onSelect = (payload) => {
+			const id = payload?.id;
+			const artwork = id ? byId.get(id) : void 0;
+			if (!artwork || !id) return;
+			currentId = id;
+			render(artwork);
+			panel.classList.add("sg-artwork-panel--open");
+			camera.focusArtwork(id, {
+				centerX: CENTER_X,
+				widthFraction: FREE_FRACTION
+			});
+		};
+		const onReleased = (payload) => {
+			const id = payload?.id;
+			if (id && id === currentId) hide();
+		};
+		const onClose = () => {
+			const id = currentId;
+			hide();
+			if (id) camera.centerArtwork(id);
+		};
+		const offSelect = ctx.gallery.on("artwork:select", onSelect);
+		const offReleased = ctx.gallery.on("artwork:released", onReleased);
+		close.addEventListener("click", onClose);
+		const placeholder = document.createElement("div");
+		placeholder.style.display = "none";
+		return {
+			element: placeholder,
+			destroy() {
+				offSelect();
+				offReleased();
+				close.removeEventListener("click", onClose);
+				panel.remove();
+			}
+		};
+	};
+}
+//#endregion
+//#region src/components/watermark/watermark.ts
+/**
+* A small, unobtrusive text watermark (a "brand stamp"). No daisyUI/Lucide — just
+* a styled element. Defaults to the text "scenography".
+*/
+function watermark(options = {}) {
+	return () => {
+		const el = document.createElement("div");
+		el.textContent = options.text ?? "scenography";
+		if (options.className) el.className = options.className;
+		else el.style.cssText = "font:600 13px system-ui,sans-serif;color:#fff;opacity:0.6;";
+		return el;
+	};
+}
+//#endregion
+//#region src/components/settings/settings.ts
+/**
+* A settings panel: a ⚙ button that opens a centered daisyUI modal (with an ✕
+* close, click-outside and Esc). Each section lives in its own tab (the first
+* present one opens by default). Sections are data — the app supplies labels,
+* current values and callbacks — so the panel stays generic. Labels are `Text`
+* and relocalize live via the overlay's locale source. daisyUI + Lucide prefab.
+*/
+function settingsPanel(options) {
+	return (ctx) => {
+		const wrap = document.createElement("div");
+		const button = document.createElement("button");
+		button.type = "button";
+		button.className = "btn btn-circle btn-sm";
+		setIcon(button, lucideIcon("Settings"));
+		const dialog = document.createElement("dialog");
+		dialog.className = "modal";
+		const box = document.createElement("div");
+		box.className = "modal-box max-w-sm";
+		const close = document.createElement("button");
+		close.type = "button";
+		close.className = "btn btn-sm btn-circle btn-ghost absolute right-2 top-2";
+		close.textContent = "✕";
+		box.appendChild(close);
+		const heading = document.createElement("h3");
+		heading.className = "text-lg font-bold mb-4";
+		box.appendChild(heading);
+		const tablist = document.createElement("div");
+		tablist.setAttribute("role", "tablist");
+		tablist.className = "tabs tabs-border";
+		box.appendChild(tablist);
+		const cleanups = [];
+		const relabels = [];
+		let first = true;
+		const addTab = (tab, fallback, content) => {
+			const input = document.createElement("input");
+			input.type = "radio";
+			input.name = "sg-settings-tabs";
+			input.role = "tab";
+			input.className = "tab";
+			if (first) {
+				input.checked = true;
+				first = false;
+			}
+			const pane = document.createElement("div");
+			pane.className = "tab-content pt-4";
+			pane.appendChild(content);
+			tablist.append(input, pane);
+			relabels.push(() => input.setAttribute("aria-label", resolveText(tab ?? fallback)));
+		};
+		if (options.language) {
+			const lang = options.language;
+			const field = document.createElement("label");
+			field.className = "form-control w-full";
+			const label = document.createElement("span");
+			label.className = "label-text mb-1 block";
+			const select = document.createElement("select");
+			select.className = "select select-bordered select-sm w-full";
+			const optionEls = lang.options.map((opt) => {
+				const o = document.createElement("option");
+				o.value = opt.value;
+				select.appendChild(o);
+				return {
+					o,
+					label: opt.label
+				};
+			});
+			select.value = lang.value;
+			const onChange = () => lang.onChange(select.value);
+			select.addEventListener("change", onChange);
+			cleanups.push(() => select.removeEventListener("change", onChange));
+			relabels.push(() => {
+				label.textContent = resolveText(lang.label);
+				for (const { o, label: l } of optionEls) o.textContent = resolveText(l);
+			});
+			field.append(label, select);
+			addTab(lang.tab, lang.label, field);
+		}
+		if (options.handedness) {
+			const hand = options.handedness;
+			const pane = document.createElement("div");
+			const legend = document.createElement("div");
+			legend.className = "label-text mb-1 block";
+			pane.appendChild(legend);
+			const onChange = (e) => hand.onChange(e.target.value);
+			const texts = [];
+			for (const opt of hand.options) {
+				const row = document.createElement("label");
+				row.className = "label cursor-pointer justify-start gap-3 py-1";
+				const input = document.createElement("input");
+				input.type = "radio";
+				input.name = "sg-settings-handedness";
+				input.value = opt.value;
+				input.className = "radio radio-sm";
+				input.checked = opt.value === hand.value;
+				input.addEventListener("change", onChange);
+				cleanups.push(() => input.removeEventListener("change", onChange));
+				const text = document.createElement("span");
+				text.className = "label-text text-sm";
+				row.append(input, text);
+				pane.appendChild(row);
+				texts.push({
+					el: text,
+					label: opt.label
+				});
+			}
+			relabels.push(() => {
+				legend.textContent = resolveText(hand.label);
+				for (const { el, label } of texts) el.textContent = resolveText(label);
+			});
+			addTab(hand.tab, hand.label, pane);
+		}
+		if (options.graphics) {
+			const gfx = options.graphics;
+			const pane = document.createElement("div");
+			const legend = document.createElement("div");
+			legend.className = "label-text mb-1 block";
+			pane.appendChild(legend);
+			const groupLabels = [];
+			for (const group of gfx.choiceGroups ?? []) {
+				const field = document.createElement("div");
+				field.className = "mb-3";
+				const label = document.createElement("span");
+				label.className = "label-text text-sm mb-1 block";
+				const row = document.createElement("div");
+				row.className = "join w-full";
+				const name = `sg-settings-${group.key}`;
+				const opts = group.options.map((opt) => {
+					const input = document.createElement("input");
+					input.type = "radio";
+					input.name = name;
+					input.className = "btn btn-sm join-item flex-1";
+					input.value = opt.value;
+					input.checked = opt.value === group.value;
+					const onChange = () => group.onChange(input.value);
+					input.addEventListener("change", onChange);
+					cleanups.push(() => input.removeEventListener("change", onChange));
+					row.appendChild(input);
+					return {
+						input,
+						label: opt.label
+					};
+				});
+				field.append(label, row);
+				pane.appendChild(field);
+				groupLabels.push({
+					el: label,
+					label: group.label,
+					opts
+				});
+			}
+			const list = document.createElement("div");
+			list.className = "flex flex-col gap-1";
+			pane.appendChild(list);
+			const texts = [];
+			for (const item of gfx.items) {
+				const row = document.createElement("label");
+				row.className = "label cursor-pointer justify-start gap-3 py-1";
+				const input = document.createElement("input");
+				input.type = "checkbox";
+				input.className = "toggle toggle-sm";
+				input.checked = item.value;
+				const onChange = () => gfx.onChange(item.key, input.checked);
+				input.addEventListener("change", onChange);
+				cleanups.push(() => input.removeEventListener("change", onChange));
+				const text = document.createElement("span");
+				text.className = "label-text text-sm";
+				row.append(input, text);
+				list.appendChild(row);
+				texts.push({
+					el: text,
+					label: item.label
+				});
+			}
+			const sliderLabels = [];
+			for (const slider of gfx.sliders ?? []) {
+				const field = document.createElement("label");
+				field.className = "flex flex-col gap-1 mt-2";
+				const head = document.createElement("span");
+				head.className = "label-text text-sm flex justify-between";
+				const name = document.createElement("span");
+				const value = document.createElement("span");
+				value.className = "opacity-60";
+				head.append(name, value);
+				const input = document.createElement("input");
+				input.type = "range";
+				input.className = "range range-sm";
+				input.min = String(slider.min);
+				input.max = String(slider.max);
+				input.step = String(slider.step ?? .1);
+				input.value = String(slider.value);
+				value.textContent = input.value;
+				const onInput = () => {
+					value.textContent = input.value;
+					slider.onChange(parseFloat(input.value));
+				};
+				input.addEventListener("input", onInput);
+				cleanups.push(() => input.removeEventListener("input", onInput));
+				field.append(head, input);
+				pane.appendChild(field);
+				sliderLabels.push({
+					el: name,
+					label: slider.label
+				});
+			}
+			relabels.push(() => {
+				legend.textContent = resolveText(gfx.label);
+				for (const { el, label, opts } of groupLabels) {
+					el.textContent = resolveText(label);
+					for (const { input, label: l } of opts) input.setAttribute("aria-label", resolveText(l));
+				}
+				for (const { el, label } of texts) el.textContent = resolveText(label);
+				for (const { el, label } of sliderLabels) el.textContent = resolveText(label);
+			});
+			addTab(gfx.tab, gfx.label, pane);
+		}
+		const backdrop = document.createElement("form");
+		backdrop.method = "dialog";
+		backdrop.className = "modal-backdrop";
+		const backdropBtn = document.createElement("button");
+		backdropBtn.textContent = "close";
+		backdrop.appendChild(backdropBtn);
+		dialog.append(box, backdrop);
+		wrap.append(button, dialog);
+		const unbind = bindLocale(ctx, () => {
+			const title = resolveText(options.title);
+			button.setAttribute("aria-label", title);
+			heading.textContent = title;
+			close.setAttribute("aria-label", resolveText(options.closeLabel ?? "Close"));
+			for (const relabel of relabels) relabel();
+		});
+		const onOpen = () => dialog.showModal();
+		const onClose = () => dialog.close();
+		button.addEventListener("click", onOpen);
+		close.addEventListener("click", onClose);
+		return {
+			element: wrap,
+			destroy: () => {
+				button.removeEventListener("click", onOpen);
+				close.removeEventListener("click", onClose);
+				for (const fn of cleanups) fn();
+				unbind();
+			}
+		};
+	};
+}
+//#endregion
+//#region src/presets/default.ts
+/**
+* The default overlay layout: mute + fullscreen (and a settings ⚙ when given)
+* top-right; an info ⓘ and a credits panel bottom-right when given. Wired with
+* Lucide icons — this is the opinionated, batteries-included layer, so the
+* coupling to daisyUI + Lucide lives here, not in `@scenography/overlay`.
+*/
+function defaultPreset(overlay, options = {}) {
+	overlay.add("top-right", muteButton({ icons: {
+		on: lucideIcon("Volume2"),
+		off: lucideIcon("VolumeX")
+	} }));
+	overlay.add("top-right", fullscreenButton({ icons: {
+		enter: lucideIcon("Maximize"),
+		exit: lucideIcon("Minimize")
+	} }));
+	if (options.settings) overlay.add("top-right", settingsPanel(options.settings));
+	if (options.environment) overlay.add("top-right", environmentPanel({
+		icon: lucideIcon("CloudSun"),
+		...options.environment
+	}));
+	overlay.add("top-right", cardboardButton({ icon: lucideIcon("RectangleGoggles") }));
+	if (options.artworks) overlay.add("middle-left", artworkInfo(options.artworks));
+	if (options.info) overlay.add("bottom-right", infoPanel(options.info));
+	if (options.credits) overlay.add("bottom-right", creditsPanel({
+		items: options.credits,
+		title: options.creditsTitle,
+		icon: lucideIcon("Copyleft")
+	}));
+	if (options.watermark !== false) overlay.add("bottom-left", watermark(options.watermark ?? {}));
+}
+//#endregion
+export { actionButton, artworkInfo, cardboardButton, creditsPanel, defaultPreset, environmentPanel, fullscreenButton, infoPanel, lucideIcon, muteButton, settingsPanel, watermark };
+
+//# sourceMappingURL=index.mjs.map