@zkmake/three-cameras 0.0.0 → 0.2.0

package/dist/mount-DBjcu7if.js

@@ -1,770 +0,0 @@
-import { i as capturePose, o as poseToCode, t as CameraLab } from "./lab-D4PnOVwG.js";
-import { HudTheme, mountDevPanel } from "@zkmake/three-meter/ui";
-//#region src/ui/styles.ts
-/** The panel's stylesheet, injected once. Palettes by `data-theme` on `.tcm`. */
-const CAMERA_PANEL_STYLES = `
-/* Inside a dev-panel card the tokens come from three-meter's (\`--perf-*\`), so the panels match;
-   on its own (in a host's tab) the same palette is the fallback. */
-.tcm {
-  --tcm-bg: var(--perf-bg, rgba(22, 24, 29, 0.92));
-  --tcm-fg: var(--perf-fg, #e6e8eb);
-  --tcm-dim: var(--perf-muted, #8b909a);
-  --tcm-line: var(--perf-border, rgba(255, 255, 255, 0.12));
-  --tcm-field: var(--perf-row, rgba(255, 255, 255, 0.04));
-  --tcm-hover: var(--perf-row, rgba(255, 255, 255, 0.04));
-  --tcm-accent: var(--perf-accent, #60a5fa);
-  --tcm-accent-soft: rgba(96, 165, 250, 0.14);
-  --tcm-live: #34d399;
-  box-sizing: border-box;
-  color: var(--tcm-fg);
-  font: 11px/1.35 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-}
-.tcm[data-theme="light"] {
-  --tcm-bg: rgba(250, 250, 252, 0.94);
-  --tcm-fg: #1a1c21;
-  --tcm-dim: #6b7079;
-  --tcm-line: rgba(0, 0, 0, 0.12);
-  --tcm-field: rgba(0, 0, 0, 0.05);
-  --tcm-hover: rgba(0, 0, 0, 0.05);
-  --tcm-accent: #2563eb;
-  --tcm-accent-soft: rgba(37, 99, 235, 0.1);
-  --tcm-live: #047857;
-}
-.tcm *, .tcm *::before, .tcm *::after { box-sizing: inherit; }
-.tcm button { font: inherit; color: inherit; }
-
-.tcm-panel { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 8px; }
-/* In the dev-panel card: a fixed width (the frame's cap raised to fit), the list scrolling
-   inside the card's height. */
-.perf-hud.tcm-frame { max-width: min(23rem, calc(100vw - 48px)); }
-.perf-hud__card > .tcm-panel { width: 22rem; max-width: 100%; flex: 1; }
-/* Compact: the brand row alone, with the count. */
-.perf-hud.tcm-compact .tcm-panel { display: none; }
-.perf-hud.tcm-compact .perf-hud__brand { padding-bottom: 6px; }
-
-.tcm-toolbar { display: flex; gap: 6px; }
-.tcm-search {
-  flex: 1;
-  min-width: 0;
-  border: 1px solid var(--tcm-line);
-  border-radius: 4px;
-  background: var(--tcm-field);
-  padding: 4px 6px;
-  color: inherit;
-  font: inherit;
-}
-.tcm-search::placeholder { color: var(--tcm-dim); }
-.tcm-search:focus { outline: 1px solid var(--tcm-accent); outline-offset: 0; }
-
-.tcm-icon {
-  display: inline-grid;
-  place-items: center;
-  width: 26px;
-  height: 26px;
-  flex: none;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--tcm-dim);
-  cursor: pointer;
-}
-.tcm-icon:hover:not(:disabled) { background: var(--tcm-hover); color: var(--tcm-fg); }
-.tcm-icon:focus-visible { outline: 1px solid var(--tcm-accent); }
-.tcm-icon:disabled { visibility: hidden; }
-.tcm-icon[aria-pressed="true"] { color: var(--tcm-accent); background: var(--tcm-accent-soft); }
-.tcm svg {
-  width: 16px;
-  height: 16px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.tcm-list { margin: 0; padding: 0; list-style: none; overflow-y: auto; min-height: 0; }
-.tcm-row { border-radius: 5px; border: 1px solid transparent; }
-.tcm-row.is-hidden { display: none; }
-.tcm-row.is-open { border-color: var(--tcm-line); background: var(--tcm-field); }
-.tcm-head {
-  display: grid;
-  grid-template-columns: 32px 1fr auto;
-  align-items: center;
-  gap: 8px;
-  padding: 4px;
-  border-radius: 5px;
-}
-.tcm-row:not(.is-open) .tcm-head:hover { background: var(--tcm-hover); }
-.tcm-kind {
-  display: grid;
-  place-items: center;
-  width: 32px;
-  height: 32px;
-  border: 1px solid var(--tcm-line);
-  border-radius: 5px;
-  color: var(--tcm-dim);
-}
-.tcm-row.is-live .tcm-kind { color: var(--tcm-live); border-color: color-mix(in srgb, var(--tcm-live) 45%, transparent); }
-.tcm-text {
-  min-width: 0;
-  padding: 0;
-  border: 0;
-  background: none;
-  text-align: left;
-  cursor: pointer;
-}
-.tcm-name-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
-.tcm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
-.tcm-badge { flex: none; color: var(--tcm-dim); }
-.tcm-badge:empty { display: none; }
-.tcm-badge.is-live, .tcm-badge.is-viewing { display: inline-flex; align-items: center; gap: 4px; }
-.tcm-badge.is-live { color: var(--tcm-live); }
-.tcm-badge.is-viewing { color: var(--tcm-accent); }
-.tcm-badge.is-live::before {
-  content: "";
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: currentColor;
-  animation: tcm-pulse 1.6s ease-in-out infinite;
-}
-@keyframes tcm-pulse { 50% { opacity: 0.25; } }
-@media (prefers-reduced-motion: reduce) { .tcm-badge.is-live::before { animation: none; } }
-.tcm-row.is-viewing .tcm-kind { color: var(--tcm-accent); border-color: color-mix(in srgb, var(--tcm-accent) 50%, transparent); }
-.tcm-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tcm-dim); }
-.tcm-actions { display: flex; gap: 2px; }
-.tcm-chevron svg { transition: rotate 120ms; }
-.tcm-row.is-open .tcm-chevron svg { rotate: 180deg; }
-
-.tcm-details {
-  display: none;
-  gap: 8px;
-  padding: 2px 8px 8px;
-}
-.tcm-row.is-open .tcm-details { display: grid; }
-.tcm-group { display: grid; gap: 3px; }
-.tcm-term { color: var(--tcm-dim); }
-.tcm-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
-.tcm-fields--lens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.tcm-num {
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  border: 1px solid var(--tcm-line);
-  border-radius: 4px;
-  background: var(--tcm-field);
-}
-.tcm-num:focus-within { border-color: var(--tcm-accent); }
-.tcm-scrub {
-  flex: none;
-  padding: 0 5px;
-  color: var(--tcm-dim);
-  cursor: ew-resize;
-  user-select: none;
-  touch-action: none;
-}
-.tcm-scrub:hover { color: var(--tcm-fg); }
-.tcm-num input {
-  width: 100%;
-  min-width: 0;
-  padding: 3px 5px 3px 0;
-  border: 0;
-  background: none;
-  color: inherit;
-  font: inherit;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-.tcm-num input::-webkit-inner-spin-button, .tcm-num input::-webkit-outer-spin-button { appearance: none; margin: 0; }
-.tcm-num input:focus { outline: none; }
-.tcm-readout { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
-.tcm-readout dt { color: var(--tcm-dim); }
-.tcm-readout dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
-.tcm-buttons { display: flex; gap: 6px; }
-.tcm-text-button {
-  border: 1px solid var(--tcm-line);
-  border-radius: 4px;
-  background: var(--tcm-field);
-  padding: 3px 8px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-.tcm-text-button:hover { border-color: var(--tcm-accent); }
-.tcm-text-button:focus-visible { outline: 1px solid var(--tcm-accent); }
-.tcm-views { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
-.tcm-views:empty { display: none; }
-.tcm-view { display: flex; align-items: center; border: 1px solid var(--tcm-line); border-radius: 4px; }
-.tcm-view .tcm-icon { width: 20px; height: 20px; }
-.tcm-view .tcm-icon svg { width: 12px; height: 12px; }
-.tcm-view-go {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 4px 2px 6px;
-  border: 0;
-  background: none;
-  cursor: pointer;
-}
-.tcm-view-go svg { width: 12px; height: 12px; }
-.tcm-view-go:hover { color: var(--tcm-accent); }
-.tcm-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 4px 4px 4px 8px;
-  border-radius: 5px;
-  background: var(--tcm-accent-soft);
-  color: var(--tcm-accent);
-}
-.tcm-banner[hidden] { display: none; }
-.tcm-status { color: var(--tcm-dim); padding: 0 4px; }
-.tcm-status:empty { display: none; }
-.tcm-empty { color: var(--tcm-dim); padding: 6px 4px; }
-`;
-const STYLE_ID = "zkmake-three-cameras-styles";
-/** Add the stylesheet to `document.head` once. */
-const injectStyles = () => {
-	if (typeof document === "undefined" || document.getElementById(STYLE_ID)) return;
-	const style = document.createElement("style");
-	style.id = STYLE_ID;
-	style.textContent = CAMERA_PANEL_STYLES;
-	document.head.append(style);
-};
-//#endregion
-//#region src/ui/panel.ts
-/** Live badges and open rows update this often, ms. */
-const TICK_MS = 250;
-/** Per field: the step a typed arrow key takes and what a pixel of scrubbing adds. */
-const FIELDS = {
-	px: {
-		label: "x",
-		step: .01,
-		perPixel: .02
-	},
-	py: {
-		label: "y",
-		step: .01,
-		perPixel: .02
-	},
-	pz: {
-		label: "z",
-		step: .01,
-		perPixel: .02
-	},
-	rx: {
-		label: "x",
-		step: .1,
-		perPixel: .5
-	},
-	ry: {
-		label: "y",
-		step: .1,
-		perPixel: .5
-	},
-	rz: {
-		label: "z",
-		step: .1,
-		perPixel: .5
-	},
-	fov: {
-		label: "fov",
-		step: .1,
-		perPixel: .2,
-		min: 1
-	},
-	near: {
-		label: "near",
-		step: .01,
-		perPixel: .005,
-		min: 1e-4
-	},
-	far: {
-		label: "far",
-		step: 1,
-		perPixel: .5,
-		min: .001
-	},
-	zoom: {
-		label: "zoom",
-		step: .01,
-		perPixel: .005,
-		min: .01
-	}
-};
-/** Line icons on a 24 grid, stroked in the text colour (styles.ts). */
-const KIND_ICONS = {
-	perspective: "<rect x=\"2\" y=\"7\" width=\"12\" height=\"10\" rx=\"2\"/><path d=\"m14 10.5 7-4v11l-7-4\"/>",
-	orthographic: "<rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"M3 12h18\"/>",
-	array: "<rect x=\"3\" y=\"3\" width=\"8\" height=\"8\" rx=\"1.5\"/><rect x=\"13\" y=\"3\" width=\"8\" height=\"8\" rx=\"1.5\"/><rect x=\"3\" y=\"13\" width=\"8\" height=\"8\" rx=\"1.5\"/><rect x=\"13\" y=\"13\" width=\"8\" height=\"8\" rx=\"1.5\"/>",
-	cube: "<path d=\"M12 3 20 7.5v9L12 21l-8-4.5v-9Z\"/><path d=\"m4 7.5 8 4.5 8-4.5M12 12v9\"/>",
-	other: "<circle cx=\"12\" cy=\"12\" r=\"8\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>"
-};
-const ICONS = {
-	look: "<path d=\"M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>",
-	frustum: "<path d=\"M3 12 20 5v14Z\"/><path d=\"M20 5v14\"/><circle cx=\"3\" cy=\"12\" r=\"1\"/>",
-	chevron: "<path d=\"m6 9 6 6 6-6\"/>",
-	refresh: "<path d=\"M21 12a9 9 0 1 1-3-6.7L21 8\"/><path d=\"M21 3v5h-5\"/>",
-	go: "<path d=\"M5 12h14\"/><path d=\"m13 6 6 6-6 6\"/>",
-	remove: "<path d=\"M6 6l12 12M18 6 6 18\"/>"
-};
-const svg = (paths) => `<svg viewBox="0 0 24 24" aria-hidden="true">${paths}</svg>`;
-const icon = (name, label, extra = "") => `<button type="button" class="tcm-icon ${extra}" data-action="${name}" title="${label}" aria-label="${label}">${svg(ICONS[name])}</button>`;
-const trim = (value, digits = 2) => {
-	const fixed = value.toFixed(digits);
-	return fixed.includes(".") ? fixed.replace(/\.?0+$/, "") : fixed;
-};
-const range = (near, far) => `${trim(near)}–${trim(far)}`;
-const triple = (values, digits = 2) => values.map((value) => trim(value, digits)).join("  ");
-const escape = (text) => text.replace(/[&<>"]/g, (char) => `&#${char.charCodeAt(0)};`);
-/** A camera's name as a JS identifier, for copied code: `orbit view` → `orbitView`. */
-const identifier = (name) => {
-	const joined = name.split(/[^A-Za-z0-9]+/).filter(Boolean).map((word, index) => index === 0 ? word.toLowerCase() : word[0].toUpperCase() + word.slice(1)).join("");
-	return /^[A-Za-z_]/.test(joined) ? joined : `camera${joined}`;
-};
-/** The row's second line: how it projects, at a glance. */
-const describe = (entry, details) => {
-	const projection = details?.projection;
-	const parts = [];
-	if (entry.kind === "cube") parts.push("cube · 6 faces");
-	else if (projection?.fov !== void 0) {
-		parts.push(`fov ${trim(projection.fov, 1)}°`, range(projection.near, projection.far));
-		if (projection.aspect !== void 0) parts.push(trim(projection.aspect));
-	} else if (projection) parts.push("ortho", `zoom ${trim(projection.zoom)}`, range(projection.near, projection.far));
-	else parts.push(entry.kind);
-	if (!entry.inScene) parts.push("not in scene");
-	return parts.join(" · ");
-};
-/** Facts that aren't edited here, under the fields. */
-const readoutOf = (entry, details) => {
-	const { projection } = details;
-	const rows = [["world", triple(details.position)]];
-	if (projection?.aspect !== void 0) rows.push(["aspect", trim(projection.aspect, 3)]);
-	if (projection?.left !== void 0) rows.push(["frustum", `l ${trim(projection.left)} r ${trim(projection.right)} t ${trim(projection.top)} b ${trim(projection.bottom)}`]);
-	rows.push(["drawing", entry.live ? `${entry.fps} fps` : "no"]);
-	rows.push(["in", entry.inScene ? entry.path.join(" › ") || "scene" : "the renderer only (not in the scene)"]);
-	return rows.map(([term, value]) => `<dt>${term}</dt><dd>${escape(value)}</dd>`).join("");
-};
-const numberField = (key) => {
-	const { label, step, min } = FIELDS[key];
-	return `<label class="tcm-num"><span class="tcm-scrub" data-scrub="${key}" title="Drag to change: Shift for fine, Alt for coarse">${label}</span><input type="number" data-field="${key}" step="${step}"${min === void 0 ? "" : ` min="${min}"`} inputmode="decimal" /></label>`;
-};
-/** The values a field shows, from the camera now. */
-const valuesOf = (details) => {
-	const [px, py, pz] = details.local.position;
-	const [rx, ry, rz] = details.local.rotation;
-	const projection = details.projection;
-	return {
-		px,
-		py,
-		pz,
-		rx,
-		ry,
-		rz,
-		...projection ? {
-			near: projection.near,
-			far: projection.far,
-			zoom: projection.zoom,
-			fov: projection.fov
-		} : {}
-	};
-};
-const formatField = (key, value) => trim(value, key.startsWith("r") || key === "fov" ? 2 : 4);
-const createCameraPanel = (lab) => {
-	injectStyles();
-	const element = document.createElement("div");
-	element.className = "tcm tcm-panel";
-	element.innerHTML = `
-    <div class="tcm-toolbar">
-      <input type="search" class="tcm-search" placeholder="Filter by name…" autocomplete="off" spellcheck="false" aria-label="Filter cameras" />
-      ${icon("refresh", "Look for new cameras")}
-    </div>
-    <div class="tcm-banner" hidden><span></span><button type="button" class="tcm-text-button" data-action="look-back">Back</button></div>
-    <ul class="tcm-list"></ul>
-    <div class="tcm-empty" hidden>No cameras yet. The one the renderer draws with shows up on its first frame.</div>
-    <div class="tcm-status" role="status"></div>
-  `;
-	const search = element.querySelector(".tcm-search");
-	const list = element.querySelector(".tcm-list");
-	const empty = element.querySelector(".tcm-empty");
-	const status = element.querySelector(".tcm-status");
-	const banner = element.querySelector(".tcm-banner");
-	const bannerText = banner.querySelector("span");
-	const rows = /* @__PURE__ */ new Map();
-	let timer = null;
-	/** The field being scrubbed: the tick leaves it alone. */
-	let scrubbing = null;
-	const say = (message) => {
-		status.textContent = message;
-	};
-	const attempt = (work) => {
-		try {
-			say("");
-			work();
-		} catch (error) {
-			say(error.message.replace(/^three-cameras: /, ""));
-		}
-	};
-	/** Read one field (or its x/y/z group) into a patch and set it. */
-	const apply = (id, controls, key) => {
-		const read = (field) => Number(controls.fields.get(field)?.value);
-		const patch = {};
-		if (key.startsWith("p")) {
-			const values = [
-				read("px"),
-				read("py"),
-				read("pz")
-			];
-			if (values.every(Number.isFinite)) patch.position = values;
-		} else if (key.startsWith("r")) {
-			const values = [
-				read("rx"),
-				read("ry"),
-				read("rz")
-			];
-			if (values.every(Number.isFinite)) patch.rotation = values;
-		} else {
-			const value = read(key);
-			const min = FIELDS[key].min;
-			if (Number.isFinite(value) && (min === void 0 || value >= min)) patch[key] = value;
-		}
-		attempt(() => lab.set(id, patch));
-	};
-	const buildControls = (row, entry) => {
-		const lens = entry.kind === "perspective" ? [
-			"fov",
-			"near",
-			"far",
-			"zoom"
-		] : entry.kind === "orthographic" ? [
-			"zoom",
-			"near",
-			"far"
-		] : [];
-		row.details.innerHTML = `
-      <div class="tcm-group"><span class="tcm-term">position</span><div class="tcm-fields">${numberField("px")}${numberField("py")}${numberField("pz")}</div></div>
-      <div class="tcm-group"><span class="tcm-term">rotation °</span><div class="tcm-fields">${numberField("rx")}${numberField("ry")}${numberField("rz")}</div></div>
-      ${lens.length > 0 ? `<div class="tcm-group"><span class="tcm-term">lens</span><div class="tcm-fields tcm-fields--lens">${lens.map(numberField).join("")}</div></div>` : ""}
-      <dl class="tcm-readout"></dl>
-      ${entry.projects ? `<div class="tcm-buttons">
-              <button type="button" class="tcm-text-button" data-action="copy" title="Copy three.js that sets this camera up as it is now">Copy as code</button>
-              <button type="button" class="tcm-text-button" data-action="save" title="Save where it is and how it projects, to fly back to">Save view</button>
-            </div>
-            <ul class="tcm-views" aria-label="Saved views"></ul>` : ""}
-    `;
-		const fields = /* @__PURE__ */ new Map();
-		for (const input of row.details.querySelectorAll("input[data-field]")) fields.set(input.dataset.field, input);
-		const controls = {
-			fields,
-			readout: row.details.querySelector(".tcm-readout"),
-			views: row.details.querySelector(".tcm-views") ?? document.createElement("ul"),
-			copy: row.details.querySelector("[data-action=\"copy\"]") ?? document.createElement("button"),
-			viewsDrawn: ""
-		};
-		const id = entry.id;
-		for (const [key, input] of fields) {
-			input.addEventListener("input", () => apply(id, controls, key));
-			input.addEventListener("blur", () => {
-				const details = lab.details(id);
-				const value = details ? valuesOf(details)[key] : void 0;
-				if (value !== void 0) input.value = formatField(key, value);
-			});
-		}
-		for (const handle of row.details.querySelectorAll("[data-scrub]")) {
-			const key = handle.dataset.scrub;
-			const input = fields.get(key);
-			handle.addEventListener("pointerdown", (event) => {
-				event.preventDefault();
-				handle.setPointerCapture(event.pointerId);
-				scrubbing = input;
-				const startX = event.clientX;
-				const startValue = Number(input.value) || 0;
-				const { perPixel, min } = FIELDS[key];
-				const onMove = (move) => {
-					const scale = move.shiftKey ? .1 : move.altKey ? 10 : 1;
-					let value = startValue + (move.clientX - startX) * perPixel * scale;
-					if (min !== void 0) value = Math.max(min, value);
-					input.value = formatField(key, value);
-					apply(id, controls, key);
-				};
-				const onUp = () => {
-					scrubbing = null;
-					handle.removeEventListener("pointermove", onMove);
-					handle.removeEventListener("pointerup", onUp);
-					handle.removeEventListener("pointercancel", onUp);
-				};
-				handle.addEventListener("pointermove", onMove);
-				handle.addEventListener("pointerup", onUp);
-				handle.addEventListener("pointercancel", onUp);
-			});
-		}
-		return controls;
-	};
-	const drawViews = (row, entry) => {
-		const controls = row.controls;
-		const views = lab.views(entry.id);
-		const drawn = views.map((view) => `${view.id}:${view.name}`).join("|");
-		if (drawn === controls.viewsDrawn) return;
-		controls.viewsDrawn = drawn;
-		controls.views.innerHTML = views.map((view) => `<li class="tcm-view" data-view="${escape(view.id)}">
-          <button type="button" class="tcm-view-go" data-action="go" title="Fly back to ${escape(view.name)}">${svg(ICONS.go)}<span>${escape(view.name)}</span></button>
-          ${icon("remove", `Forget ${escape(view.name)}`)}
-        </li>`).join("");
-	};
-	const makeRow = (entry) => {
-		const li = document.createElement("li");
-		const id = entry.id;
-		li.className = "tcm-row";
-		li.innerHTML = `
-      <div class="tcm-head">
-        <span class="tcm-kind" title="${entry.kind} camera">${svg(KIND_ICONS[entry.kind])}</span>
-        <button type="button" class="tcm-text" data-action="open" aria-expanded="false" title="Pick to edit">
-          <span class="tcm-name-line"><span class="tcm-name"></span><span class="tcm-badge"></span></span>
-          <span class="tcm-meta"></span>
-        </button>
-        <div class="tcm-actions">
-          ${icon("look", "Look through it")}
-          ${icon("frustum", "Show its frustum in the scene")}
-          ${icon("chevron", "Edit", "tcm-chevron")}
-        </div>
-      </div>
-      <div class="tcm-details"></div>
-    `;
-		const row = {
-			li,
-			name: li.querySelector(".tcm-name"),
-			badge: li.querySelector(".tcm-badge"),
-			meta: li.querySelector(".tcm-meta"),
-			look: li.querySelector("[data-action=\"look\"]"),
-			helper: li.querySelector("[data-action=\"frustum\"]"),
-			details: li.querySelector(".tcm-details"),
-			controls: null,
-			open: false
-		};
-		row.name.textContent = id;
-		row.name.title = id;
-		li.addEventListener("click", (event) => {
-			const target = event.target.closest("[data-action]");
-			const action = target?.dataset.action;
-			const current = lab.entry(id);
-			if (!current || !action) return;
-			if (action === "open" || action === "chevron") {
-				row.open = !row.open;
-				if (row.open && !row.controls) row.controls = buildControls(row, current);
-				update(row, current);
-			} else if (action === "look") attempt(() => lab.lookThrough(current.viewing ? null : id));
-			else if (action === "frustum") attempt(() => lab.setHelper(id, !current.helper));
-			else if (action === "copy") copyCode(row, current);
-			else if (action === "save") attempt(() => lab.saveView(id));
-			else if (action === "go" || action === "remove") {
-				const viewId = target.closest("[data-view]")?.dataset.view;
-				if (viewId) attempt(() => action === "go" ? lab.goToView(id, viewId) : lab.deleteView(id, viewId));
-			}
-		});
-		return row;
-	};
-	const copyCode = async (row, entry) => {
-		const code = poseToCode(capturePose(entry.camera), identifier(entry.id));
-		const button = row.controls.copy;
-		try {
-			await navigator.clipboard.writeText(code);
-			button.textContent = "Copied";
-		} catch {
-			say("The clipboard is blocked here. The code is logged to the console instead.");
-			console.log(code);
-		}
-		setTimeout(() => {
-			button.textContent = "Copy as code";
-		}, 1200);
-	};
-	const update = (row, entry) => {
-		const open = row.open;
-		const details = lab.details(entry.id);
-		row.li.classList.toggle("is-live", entry.live);
-		row.li.classList.toggle("is-open", open);
-		row.li.classList.toggle("is-viewing", entry.viewing);
-		row.badge.className = `tcm-badge${entry.viewing ? " is-viewing" : entry.live ? " is-live" : ""}`;
-		row.badge.textContent = entry.viewing ? "viewing" : entry.standingIn ? "replaced" : entry.live ? `live · ${entry.fps} fps` : "";
-		row.meta.textContent = describe(entry, details);
-		row.meta.title = row.meta.textContent;
-		row.look.disabled = !entry.projects || !lab.watching;
-		row.look.setAttribute("aria-pressed", String(entry.viewing));
-		row.look.title = entry.viewing ? "Stop looking through it" : "Look through it";
-		row.look.setAttribute("aria-label", row.look.title);
-		row.helper.disabled = !entry.canHelp;
-		row.helper.setAttribute("aria-pressed", String(entry.helper));
-		row.helper.title = entry.helper ? "Hide its frustum" : "Show its frustum in the scene";
-		row.helper.setAttribute("aria-label", row.helper.title);
-		for (const toggle of row.li.querySelectorAll("[data-action=\"open\"], [data-action=\"chevron\"]")) toggle.setAttribute("aria-expanded", String(open));
-		if (!open || !details || !row.controls) return;
-		const values = valuesOf(details);
-		for (const [key, input] of row.controls.fields) {
-			const value = values[key];
-			if (value !== void 0 && input !== document.activeElement && input !== scrubbing) input.value = formatField(key, value);
-		}
-		row.controls.readout.innerHTML = readoutOf(entry, details);
-		drawViews(row, entry);
-	};
-	const filter = () => {
-		const query = search.value.trim().toLowerCase();
-		for (const [id, row] of rows) row.li.classList.toggle("is-hidden", query.length > 0 && !id.toLowerCase().includes(query));
-	};
-	/** Rows in, rows out, then every row's live state. */
-	const render = () => {
-		const entries = lab.entries();
-		const ids = new Set(entries.map((entry) => entry.id));
-		for (const [id, row] of rows) if (!ids.has(id)) {
-			row.li.remove();
-			rows.delete(id);
-		}
-		for (const entry of entries) {
-			let row = rows.get(entry.id);
-			if (!row) {
-				row = makeRow(entry);
-				rows.set(entry.id, row);
-				list.append(row.li);
-			}
-			update(row, entry);
-		}
-		const viewing = entries.find((entry) => entry.viewing);
-		const standIn = entries.find((entry) => entry.standingIn);
-		banner.hidden = !viewing;
-		bannerText.textContent = viewing ? `Looking through ${viewing.id}${standIn ? ` in place of ${standIn.id}` : ""}` : "";
-		empty.hidden = entries.length > 0;
-		filter();
-		element.dataset.count = String(entries.length);
-		element.dispatchEvent(new CustomEvent("tcm-count", { detail: entries.length }));
-	};
-	element.querySelector("[data-action=\"refresh\"]").addEventListener("click", () => lab.refresh());
-	banner.querySelector("button").addEventListener("click", () => attempt(() => lab.lookThrough(null)));
-	search.addEventListener("input", filter);
-	const unsubscribe = lab.subscribe(render);
-	const setActive = (active) => {
-		if (active && !timer) {
-			lab.refresh();
-			render();
-			timer = setInterval(() => {
-				lab.refresh();
-				render();
-			}, TICK_MS);
-		} else if (!active && timer) {
-			clearInterval(timer);
-			timer = null;
-		}
-	};
-	render();
-	setActive(true);
-	return {
-		element,
-		setTheme: (theme) => {
-			if (element.closest(".perf-hud__card")) delete element.dataset.theme;
-			else element.dataset.theme = theme;
-		},
-		refresh: () => lab.refresh(),
-		setActive,
-		dispose: () => {
-			setActive(false);
-			unsubscribe();
-			element.remove();
-		}
-	};
-};
-//#endregion
-//#region src/ui/mount.ts
-/**
-* The panel in the zkmake dev-panel frame (three-meter's `mountDevPanel`), so it docks, wakes,
-* dims and toggles exactly like the three-meter HUD: drag grip, expand/compact and dim-on-leave
-* discs beside a card with the brand label on top. One call for a vanilla three app.
-*/
-const readFlag = (key) => {
-	try {
-		return localStorage.getItem(key);
-	} catch {
-		return null;
-	}
-};
-const writeFlag = (key, value) => {
-	try {
-		localStorage.setItem(key, value);
-	} catch {}
-};
-/** Saved views in localStorage, as JSON under one key. */
-const localViews = (key) => ({
-	load: () => {
-		try {
-			const parsed = JSON.parse(localStorage.getItem(key) ?? "{}");
-			return parsed && typeof parsed === "object" ? parsed : {};
-		} catch {
-			return {};
-		}
-	},
-	save: (views) => {
-		try {
-			localStorage.setItem(key, JSON.stringify(views));
-		} catch {}
-	}
-});
-const mountCameraPanel = (options) => {
-	const key = options.storageKey === null ? null : options.storageKey ?? "three-cameras";
-	const store = options.store ?? (key ? localViews(`${key}:views`) : void 0);
-	const lab = new CameraLab({
-		...options,
-		...store ? { store } : {}
-	});
-	const panel = createCameraPanel(lab);
-	const theme = new HudTheme(options.theme ?? "system");
-	const compactKey = key ? `${key}:compact` : null;
-	const setCompact = (compact) => {
-		frame.element.classList.toggle("tcm-compact", compact);
-		panel.setActive(!compact);
-		if (compactKey) writeFlag(compactKey, compact ? "1" : "0");
-		frame.refresh();
-	};
-	const frame = mountDevPanel({
-		brand: "three-cameras",
-		content: panel.element,
-		defaultPlacement: options.defaultPlacement ?? {
-			edge: "right",
-			align: "start"
-		},
-		label: "Cameras",
-		onToggle: () => setCompact(!frame.element.classList.contains("tcm-compact")),
-		storageKey: key ? `${key}:panel` : null,
-		theme,
-		toggleLabel: "Show or hide the camera list",
-		...options.container ? { parent: options.container } : {}
-	});
-	frame.element.classList.add("tcm-frame");
-	const paintTheme = () => panel.setTheme(theme.resolved);
-	const unsubscribeTheme = theme.subscribe(paintTheme);
-	const showCount = (count) => {
-		frame.detail.textContent = `${count} camera${count === 1 ? "" : "s"}`;
-	};
-	const onCount = (event) => showCount(event.detail);
-	paintTheme();
-	panel.element.addEventListener("tcm-count", onCount);
-	showCount(Number(panel.element.dataset.count ?? 0));
-	const stored = compactKey ? readFlag(compactKey) : null;
-	setCompact(stored === null ? options.compact === true : stored === "1");
-	return {
-		lab,
-		element: frame.element,
-		setCompact,
-		setTheme: (mode) => theme.setMode(mode),
-		dispose: () => {
-			unsubscribeTheme();
-			theme.dispose();
-			panel.element.removeEventListener("tcm-count", onCount);
-			panel.dispose();
-			frame.dispose();
-			lab.dispose();
-		}
-	};
-};
-//#endregion
-export { injectStyles as i, createCameraPanel as n, CAMERA_PANEL_STYLES as r, mountCameraPanel as t };
-
-//# sourceMappingURL=mount-DBjcu7if.js.map