@oeave/bakery3 0.0.0-stage → 0.2.0

package/dist/chunk-QRCT5UGZ.js

@@ -0,0 +1,3286 @@
+import { linearToSrgbHex, OBJECT_PROPERTIES, prepareBake, aspectOf, createTimeline, outputSize } from './chunk-Z7IYVH22.js';
+import { createBakeSession } from './chunk-KNUAOILG.js';
+import { Bakery3Error } from './chunk-3G5QL4F4.js';
+
+// src/devtools/dom.ts
+var INK = "#06070d";
+var BLUE = "#46b8ed";
+var PEACH = "#fdc385";
+var ORANGE = "#ec9d3c";
+var BLUE_RGB = "70,184,237";
+var SWEEP = `linear-gradient(90deg, ${BLUE}, ${PEACH}, ${ORANGE})`;
+var CORNERS = {
+  "bottom-right": { right: "16px", bottom: "16px" },
+  "bottom-left": { left: "16px", bottom: "16px" },
+  "top-right": { right: "16px", top: "16px" },
+  "top-left": { left: "16px", top: "16px" }
+};
+var SHELL = {
+  position: "fixed",
+  zIndex: "2147483000",
+  width: "380px",
+  background: "rgba(18,18,20,0.92)",
+  backdropFilter: "blur(12px)",
+  color: "#f4f4f5",
+  borderRadius: "10px",
+  border: "1px solid rgba(255,255,255,0.08)",
+  boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
+  font: "12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace",
+  overflow: "hidden"
+};
+var HEADER = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  width: "100%",
+  padding: "10px 12px",
+  background: "transparent",
+  border: "0",
+  color: "inherit",
+  font: "inherit",
+  fontWeight: "600",
+  letterSpacing: "0.02em",
+  cursor: "pointer"
+};
+var BODY = { padding: "0 12px 12px" };
+var PILL = {
+  flex: "1 1 auto",
+  padding: "4px 8px",
+  background: "rgba(255,255,255,0.06)",
+  border: "1px solid transparent",
+  borderRadius: "6px",
+  color: "inherit",
+  font: "inherit",
+  cursor: "pointer"
+};
+var CTA = {
+  flex: "1 1 auto",
+  padding: "6px 8px",
+  background: "#f4f4f5",
+  color: "#18181b",
+  border: "0",
+  borderRadius: "6px",
+  font: "inherit",
+  fontWeight: "600",
+  cursor: "pointer"
+};
+function div(style) {
+  const element = document.createElement("div");
+  Object.assign(element.style, style);
+  return element;
+}
+function span(text, style) {
+  const element = document.createElement("span");
+  element.textContent = text;
+  Object.assign(element.style, style);
+  return element;
+}
+function button(text, style) {
+  const element = document.createElement("button");
+  element.textContent = text;
+  Object.assign(element.style, style);
+  return element;
+}
+function numberInput(value, min, step) {
+  const element = document.createElement("input");
+  element.type = "number";
+  element.value = String(value);
+  element.min = String(min);
+  element.step = String(step);
+  Object.assign(element.style, {
+    ...PILL,
+    width: "100%",
+    cursor: "text"
+  });
+  return element;
+}
+function select(entries) {
+  const element = document.createElement("select");
+  Object.assign(element.style, PILL);
+  for (const [value, label] of entries)
+    element.appendChild(optionEl(value, label));
+  return element;
+}
+function optionEl(value, label) {
+  const option = document.createElement("option");
+  option.value = value;
+  option.textContent = label;
+  return option;
+}
+function labeled(text, control) {
+  const wrapper = div({ flex: "1 1 auto" });
+  wrapper.appendChild(
+    span(text, { display: "block", opacity: "0.5", fontSize: "10px" })
+  );
+  wrapper.appendChild(control);
+  return wrapper;
+}
+function describe(error) {
+  if (error && typeof error === "object" && "toDisplayString" in error) {
+    return error.toDisplayString();
+  }
+  return error instanceof Error ? error.message : String(error);
+}
+
+// src/devtools/timelinePanel.ts
+var EASINGS = ["linear", "ease-in", "ease-out", "ease-in-out"];
+var OBJECT_TRACKS = [
+  "position",
+  "rotation",
+  "scale",
+  "color",
+  "emissive",
+  "emissiveIntensity",
+  "roughness",
+  "metalness",
+  "opacity",
+  "intensity",
+  "target",
+  "groundColor",
+  "environmentIntensity",
+  "environmentRotation"
+];
+var GUTTER_PX = 104;
+var END_PX = 22;
+var GAP_PX = 6;
+var INSET_PX = 6;
+var AXIS_PX = 6;
+function axis() {
+  return div({
+    position: "absolute",
+    top: "0",
+    bottom: "0",
+    left: `${AXIS_PX}px`,
+    right: `${AXIS_PX}px`
+  });
+}
+var ROW = {
+  display: "flex",
+  alignItems: "center",
+  gap: `${GAP_PX}px`,
+  padding: `0 ${INSET_PX}px`
+};
+var ROUND = {
+  flex: "0 0 auto",
+  width: "28px",
+  height: "28px",
+  padding: "0",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "rgba(255,255,255,0.08)",
+  border: "0",
+  borderRadius: "50%",
+  color: "inherit",
+  font: "inherit",
+  fontSize: "11px",
+  cursor: "pointer"
+};
+var DIAMOND = {
+  position: "absolute",
+  top: "50%",
+  width: "10px",
+  height: "10px",
+  marginTop: "-5px",
+  transform: "rotate(45deg)",
+  borderRadius: "2px"
+};
+var INLINE_NUMBER = {
+  flex: "0 0 auto",
+  padding: "3px 5px",
+  background: "rgba(255,255,255,0.06)",
+  border: "1px solid transparent",
+  borderRadius: "4px",
+  textAlign: "right",
+  fontVariantNumeric: "tabular-nums"
+};
+var MUTED = { opacity: "0.55" };
+function mountTimelinePanel(options) {
+  const host = options.container ?? document.body;
+  let open = options.defaultOpen ?? true;
+  const shell = div(SHELL);
+  Object.assign(shell.style, CORNERS[options.position ?? "bottom-left"]);
+  const header = button("Timeline", HEADER);
+  const caret = span(open ? "\u25BE" : "\u25B4", { opacity: "0.5" });
+  header.appendChild(caret);
+  const timelineBody = buildTimelineBody({
+    timeline: options.timeline,
+    ...options.targets ? { targets: options.targets } : {},
+    ...options.onRenderVideo ? { onRenderVideo: options.onRenderVideo } : {},
+    ...options.onPlaybackChange ? { onPlaybackChange: options.onPlaybackChange } : {},
+    style: BODY,
+    showRenderButton: true
+  });
+  const body = timelineBody.element;
+  if (!open) body.style.display = "none";
+  header.onclick = () => {
+    open = !open;
+    caret.textContent = open ? "\u25BE" : "\u25B4";
+    body.style.display = open ? "block" : "none";
+  };
+  shell.append(header, body);
+  host.appendChild(shell);
+  return {
+    refresh() {
+      timelineBody.refresh(options.targets ?? []);
+    },
+    setStatus: timelineBody.setStatus,
+    dispose() {
+      timelineBody.dispose();
+      shell.remove();
+    }
+  };
+}
+function buildTimelineBody(options) {
+  const { timeline } = options;
+  let targets = options.targets ?? [];
+  let selected = null;
+  let holding = false;
+  let scrubbing = false;
+  let busy = false;
+  const body = div(options.style ?? {});
+  const transport = div({ display: "flex", alignItems: "center", gap: "8px" });
+  const playButton = button("\u25B6", ROUND);
+  playButton.title = "play";
+  const loopButton = button("\u27F2", {
+    ...ROUND,
+    borderRadius: "6px",
+    background: "transparent",
+    fontSize: "15px"
+  });
+  loopButton.title = "loop";
+  const timeNow = span("0.00", {
+    fontSize: "13px",
+    fontWeight: "600",
+    fontVariantNumeric: "tabular-nums"
+  });
+  const timeTotal = span(" / 0.00 s", { opacity: "0.5" });
+  const readout = span("", { flex: "1 1 auto", whiteSpace: "nowrap" });
+  readout.append(timeNow, timeTotal);
+  const cameraButton = button("\u25C6 Keyframe camera", {
+    flex: "0 0 auto",
+    padding: "6px 10px",
+    background: `rgba(${BLUE_RGB},0.12)`,
+    color: BLUE,
+    border: "0",
+    borderRadius: "6px",
+    font: "inherit",
+    fontSize: "11px",
+    cursor: "pointer"
+  });
+  cameraButton.title = "Record where the camera is and what it looks at, here";
+  transport.append(playButton, loopButton, readout, cameraButton);
+  const view = div({
+    marginTop: "10px",
+    padding: "6px 0",
+    borderRadius: "8px",
+    background: "rgba(255,255,255,0.025)",
+    border: "1px solid rgba(255,255,255,0.06)",
+    userSelect: "none"
+  });
+  const stack = div({ position: "relative" });
+  const rulerRow = div(ROW);
+  const ruler = div({
+    position: "relative",
+    flex: "1 1 auto",
+    height: "22px",
+    cursor: "ew-resize"
+  });
+  const rulerBase = div({
+    position: "absolute",
+    left: "0",
+    right: "0",
+    bottom: "0",
+    height: "2px",
+    borderRadius: "1px",
+    background: "rgba(255,255,255,0.08)"
+  });
+  const played = div({
+    position: "absolute",
+    left: "0",
+    right: "0",
+    bottom: "0",
+    height: "2px",
+    borderRadius: "1px",
+    background: SWEEP,
+    clipPath: "inset(0 100% 0 0)"
+  });
+  const ticks = div({ position: "absolute", inset: "0" });
+  const rulerAxis = axis();
+  rulerAxis.append(ticks, rulerBase, played);
+  ruler.appendChild(rulerAxis);
+  rulerRow.append(gutter(), ruler, end());
+  const lanes = div({ display: "flex", flexDirection: "column", gap: "2px" });
+  const head = div({
+    position: "absolute",
+    top: "0",
+    bottom: "0",
+    left: `${INSET_PX + GUTTER_PX + GAP_PX + AXIS_PX}px`,
+    right: `${INSET_PX + END_PX + GAP_PX + AXIS_PX}px`,
+    pointerEvents: "none"
+  });
+  const playhead = div({
+    position: "absolute",
+    top: "0",
+    bottom: "0",
+    left: "0%",
+    width: "2px",
+    marginLeft: "-1px",
+    background: BLUE,
+    boxShadow: `0 0 6px rgba(${BLUE_RGB},0.6)`
+  });
+  const knob = div({
+    position: "absolute",
+    top: "12px",
+    left: "-4px",
+    width: "10px",
+    height: "8px",
+    borderRadius: "2px 2px 5px 5px",
+    background: BLUE
+  });
+  playhead.appendChild(knob);
+  head.appendChild(playhead);
+  stack.append(rulerRow, lanes, head);
+  const addRow = div({ ...ROW, marginTop: "4px" });
+  const trackPicker = select(addOptions(targets));
+  Object.assign(trackPicker.style, {
+    flex: "0 1 auto",
+    padding: "3px 6px",
+    background: "transparent",
+    border: "1px dashed rgba(255,255,255,0.14)",
+    fontSize: "11px",
+    opacity: "0.75"
+  });
+  trackPicker.title = "Add a lane for another property";
+  addRow.appendChild(trackPicker);
+  const emptyNote = span(
+    "Frame the shot and press Keyframe camera. Move the playhead, frame the next one, and press it again.",
+    {
+      display: "none",
+      padding: `8px ${INSET_PX}px 4px`,
+      fontSize: "11px",
+      opacity: "0.5"
+    }
+  );
+  view.append(stack, emptyNote, addRow);
+  const inspector = div({
+    display: "none",
+    alignItems: "center",
+    gap: "8px",
+    marginTop: "8px",
+    fontSize: "11px"
+  });
+  const inspectorMark = div({
+    ...DIAMOND,
+    position: "static",
+    flex: "0 0 auto",
+    width: "8px",
+    height: "8px",
+    margin: "0 2px",
+    background: ORANGE
+  });
+  const inspectorText = span("", {
+    flex: "1 1 auto",
+    minWidth: "0",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  });
+  const easingSelect = select(
+    EASINGS.map((value) => [String(value), String(value)])
+  );
+  Object.assign(easingSelect.style, { flex: "0 0 auto", fontSize: "11px" });
+  easingSelect.title = "how it eases into this keyframe";
+  const deleteButton = button("Delete", { ...PILL, flex: "0 0 auto" });
+  const deselect = button("\xD7", { ...PILL, flex: "0 0 auto", width: "24px" });
+  deselect.title = "done";
+  inspector.append(
+    inspectorMark,
+    inspectorText,
+    easingSelect,
+    deleteButton,
+    deselect
+  );
+  const clip = div({
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    marginTop: "10px",
+    fontSize: "11px"
+  });
+  const durationInput = numberInput(timeline.duration, 0.25, 0.25);
+  Object.assign(durationInput.style, INLINE_NUMBER, { width: "52px" });
+  durationInput.title = "length in seconds";
+  const fpsInput = numberInput(timeline.fps, 1, 1);
+  Object.assign(fpsInput.style, INLINE_NUMBER, { width: "40px" });
+  fpsInput.title = "frames per second";
+  const frames = span(String(timeline.frameCount), {
+    fontWeight: "600",
+    fontVariantNumeric: "tabular-nums"
+  });
+  const copyButton = button("Copy JSON", {
+    ...PILL,
+    flex: "0 0 auto",
+    marginLeft: "auto",
+    fontSize: "11px"
+  });
+  copyButton.title = "the timeline as JSON, for `createTimeline()`";
+  clip.append(
+    durationInput,
+    span("s \xD7", MUTED),
+    fpsInput,
+    span("fps =", MUTED),
+    frames,
+    span("frames", MUTED),
+    copyButton
+  );
+  const actions = div({ display: "none", marginTop: "10px" });
+  const renderButton = button("Render video", { ...CTA, width: "100%" });
+  if (options.onRenderVideo && options.showRenderButton !== false) {
+    actions.style.display = "flex";
+    actions.appendChild(renderButton);
+  }
+  const status = div({
+    display: "none",
+    marginTop: "8px",
+    fontSize: "11px",
+    opacity: "0.7",
+    whiteSpace: "pre-wrap"
+  });
+  body.append(transport, view, inspector, clip, actions, status);
+  function hold(active) {
+    if (holding === active) return;
+    holding = active;
+    options.onPlaybackChange?.(active);
+  }
+  playButton.onclick = () => {
+    if (timeline.playing) timeline.pause();
+    else timeline.play();
+  };
+  loopButton.onclick = () => {
+    timeline.loop = !timeline.loop;
+    paintLoop();
+  };
+  cameraButton.onclick = () => {
+    try {
+      timeline.captureCameraKeyframe();
+      setStatus(`camera keyframed at ${timeline.time.toFixed(2)} s`);
+    } catch (error) {
+      setStatus(describe(error), "error");
+    }
+  };
+  function scrubbable(element, time) {
+    const seek = (event) => {
+      const rect = time.getBoundingClientRect();
+      const fraction = Math.max(
+        0,
+        Math.min(1, (event.clientX - rect.left) / rect.width)
+      );
+      timeline.seek(fraction * timeline.duration);
+    };
+    element.addEventListener("pointerdown", (event) => {
+      scrubbing = true;
+      timeline.pause();
+      hold(true);
+      element.setPointerCapture(event.pointerId);
+      seek(event);
+    });
+    element.addEventListener("pointermove", (event) => {
+      if (scrubbing) seek(event);
+    });
+    const endScrub = (event) => {
+      if (!scrubbing) return;
+      scrubbing = false;
+      element.releasePointerCapture?.(event.pointerId);
+      if (!timeline.playing) hold(false);
+    };
+    element.addEventListener("pointerup", endScrub);
+    element.addEventListener("pointercancel", endScrub);
+  }
+  scrubbable(ruler, rulerAxis);
+  durationInput.onchange = () => {
+    timeline.duration = Number(durationInput.value) || timeline.duration;
+    durationInput.value = String(timeline.duration);
+  };
+  fpsInput.onchange = () => {
+    timeline.fps = Number(fpsInput.value) || timeline.fps;
+    fpsInput.value = String(timeline.fps);
+  };
+  trackPicker.onchange = () => {
+    const [kind, property] = trackPicker.value.split("|");
+    trackPicker.value = "";
+    try {
+      const target = kind === "camera" ? "camera" : targets[Number(kind)]?.object;
+      if (!target || !property) return;
+      timeline.keyframe(target, property, timeline.time);
+      setStatus(`${property} keyframed at ${timeline.time.toFixed(2)} s`);
+    } catch (error) {
+      setStatus(describe(error), "error");
+    }
+  };
+  copyButton.onclick = () => {
+    const json = JSON.stringify(timeline.toJSON(), null, 2);
+    void navigator.clipboard?.writeText(json);
+    setStatus(`${json.length} bytes of timeline JSON copied`);
+  };
+  async function renderVideo() {
+    if (!options.onRenderVideo) return;
+    timeline.pause();
+    hold(false);
+    busy = true;
+    renderButton.disabled = true;
+    renderButton.style.opacity = "0.6";
+    try {
+      await options.onRenderVideo(timeline);
+    } catch (error) {
+      setStatus(describe(error), "error");
+    } finally {
+      busy = false;
+      renderButton.disabled = false;
+      renderButton.style.opacity = "1";
+    }
+  }
+  renderButton.onclick = () => void renderVideo();
+  easingSelect.onchange = () => {
+    if (!selected) return;
+    timeline.setEasing(
+      selected.trackId,
+      selected.index,
+      easingSelect.value
+    );
+  };
+  deleteButton.onclick = () => {
+    if (!selected) return;
+    const { trackId, index } = selected;
+    pick(null);
+    timeline.removeKeyframe(trackId, index);
+  };
+  deselect.onclick = () => {
+    pick(null);
+    paintLanes();
+  };
+  function pick(next) {
+    selected = next;
+    inspector.style.display = next ? "flex" : "none";
+  }
+  function paintTime() {
+    const fraction = timeline.duration ? timeline.time / timeline.duration : 0;
+    const percent = Math.max(0, Math.min(1, fraction)) * 100;
+    playhead.style.left = `${percent}%`;
+    played.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;
+    timeNow.textContent = timeline.time.toFixed(2);
+    timeTotal.textContent = ` / ${timeline.duration.toFixed(2)} s`;
+    playButton.textContent = timeline.playing ? "\u275A\u275A" : "\u25B6";
+    playButton.title = timeline.playing ? "pause" : "play";
+    playButton.style.background = timeline.playing ? BLUE : "rgba(255,255,255,0.08)";
+    playButton.style.color = timeline.playing ? INK : "inherit";
+    if (timeline.playing) hold(true);
+    else if (!scrubbing) hold(false);
+  }
+  function paintLoop() {
+    loopButton.style.color = timeline.loop ? BLUE : "inherit";
+    loopButton.style.opacity = timeline.loop ? "1" : "0.45";
+  }
+  function paintRuler() {
+    const step = rulerStep(timeline.duration);
+    const marks = [];
+    if (step > 0) {
+      for (let i = 0; i * step / 2 <= timeline.duration + 1e-9; i++) {
+        const at = i * step / 2;
+        const major = i % 2 === 0;
+        const fraction = at / timeline.duration;
+        marks.push(
+          div({
+            position: "absolute",
+            bottom: "2px",
+            left: `${fraction * 100}%`,
+            width: "1px",
+            height: major ? "5px" : "3px",
+            background: "rgba(255,255,255,0.22)"
+          })
+        );
+        if (!major) continue;
+        const shift = fraction <= 0 ? "0" : fraction >= 0.999 ? "-100%" : "-50%";
+        marks.push(
+          span(`${formatSeconds(at)}s`, {
+            position: "absolute",
+            top: "0",
+            left: `${fraction * 100}%`,
+            transform: `translateX(${shift})`,
+            fontSize: "10px",
+            opacity: "0.45",
+            fontVariantNumeric: "tabular-nums"
+          })
+        );
+      }
+    }
+    ticks.replaceChildren(...marks);
+  }
+  function paintLanes() {
+    paintRuler();
+    durationInput.value = String(timeline.duration);
+    fpsInput.value = String(timeline.fps);
+    frames.textContent = String(timeline.frameCount);
+    emptyNote.style.display = timeline.tracks.length ? "none" : "block";
+    if (!timeline.tracks.length) {
+      pick(null);
+      lanes.replaceChildren();
+      return;
+    }
+    if (selected) {
+      const track = timeline.tracks.find(
+        (each) => each.id === selected.trackId
+      );
+      const keyframe = track?.keyframes[selected.index];
+      if (!track || !keyframe) pick(null);
+      else {
+        inspectorText.textContent = `${laneName(track)} at ${keyframe.time.toFixed(2)} s`;
+        easingSelect.value = String(keyframe.easing ?? "linear");
+      }
+    }
+    lanes.replaceChildren(...timeline.tracks.map(lane));
+  }
+  function lane(track) {
+    const row = div({ ...ROW, height: "24px" });
+    const name = div({
+      flex: `0 0 ${GUTTER_PX}px`,
+      display: "flex",
+      alignItems: "center",
+      gap: "5px",
+      minWidth: "0",
+      fontSize: "11px"
+    });
+    name.title = laneName(track);
+    if (track.property === "color" || track.property === "emissive") {
+      const value = timeline.valueAt(track, timeline.time);
+      if (value) {
+        name.appendChild(
+          span("", {
+            flex: "0 0 auto",
+            width: "8px",
+            height: "8px",
+            borderRadius: "50%",
+            background: linearToSrgbHex(value)
+          })
+        );
+      }
+    }
+    name.appendChild(
+      span(laneName(track), {
+        minWidth: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        opacity: "0.75"
+      })
+    );
+    const strip = div({
+      position: "relative",
+      flex: "1 1 auto",
+      height: "18px",
+      borderRadius: "4px",
+      background: "rgba(255,255,255,0.04)",
+      cursor: "ew-resize"
+    });
+    const time = axis();
+    strip.appendChild(time);
+    scrubbable(strip, time);
+    const at = (time2) => timeline.duration ? time2 / timeline.duration * 100 : 0;
+    track.keyframes.forEach((keyframe, index) => {
+      if (index === 0) return;
+      const from = at(track.keyframes[index - 1].time);
+      time.appendChild(
+        div({
+          position: "absolute",
+          top: "50%",
+          left: `${from}%`,
+          width: `${at(keyframe.time) - from}%`,
+          height: "2px",
+          marginTop: "-1px",
+          background: keyframe.path === "orbit" ? `rgba(${BLUE_RGB},0.55)` : "rgba(244,244,245,0.22)"
+        })
+      );
+    });
+    track.keyframes.forEach((keyframe, index) => {
+      const isSelected = selected?.trackId === track.id && selected.index === index;
+      const diamond = div({
+        ...DIAMOND,
+        left: `calc(${at(keyframe.time)}% - 5px)`,
+        background: isSelected ? ORANGE : keyframe.path === "orbit" ? BLUE : "#e4e4e7",
+        boxShadow: isSelected ? `0 0 0 2px rgb(24,24,27), 0 0 10px rgba(236,157,60,0.7)` : "0 0 0 2px rgb(24,24,27)",
+        cursor: "pointer"
+      });
+      diamond.title = `${keyframe.time.toFixed(2)} s${keyframe.path === "orbit" ? ", orbiting" : ""}`;
+      diamond.addEventListener(
+        "pointerdown",
+        (event) => event.stopPropagation()
+      );
+      diamond.onclick = (event) => {
+        event.stopPropagation();
+        pick({ trackId: track.id, index });
+        timeline.seek(keyframe.time);
+        paintLanes();
+      };
+      time.appendChild(diamond);
+    });
+    const add = button("\uFF0B", {
+      ...PILL,
+      flex: `0 0 ${END_PX}px`,
+      height: "18px",
+      padding: "0",
+      fontSize: "11px",
+      opacity: "0.7"
+    });
+    add.title = "keyframe the live value here";
+    add.onclick = () => {
+      try {
+        if (track.target === "camera" && track.property === "lookAt") {
+          timeline.captureCameraKeyframe();
+        } else {
+          timeline.keyframe(track.target, track.property, timeline.time);
+        }
+      } catch (error) {
+        setStatus(describe(error), "error");
+      }
+    };
+    row.append(name, strip, add);
+    return row;
+  }
+  function setStatus(message, tone = "info") {
+    status.textContent = message;
+    status.style.display = message ? "block" : "none";
+    status.style.color = tone === "error" ? "#ff6b6b" : "inherit";
+  }
+  const offChange = timeline.on("change", () => {
+    paintLanes();
+    paintTime();
+  });
+  const offTime = timeline.on("time", () => paintTime());
+  const offPlay = timeline.on("play", () => paintTime());
+  const offPause = timeline.on("pause", () => paintTime());
+  paintLoop();
+  paintLanes();
+  paintTime();
+  return {
+    element: body,
+    get busy() {
+      return busy;
+    },
+    refresh(next) {
+      if (next) targets = next;
+      trackPicker.replaceChildren();
+      for (const [value, label] of addOptions(targets)) {
+        trackPicker.appendChild(optionEl(value, label));
+      }
+      trackPicker.value = "";
+      paintLanes();
+      paintTime();
+    },
+    setStatus,
+    renderVideo,
+    dispose() {
+      offChange();
+      offTime();
+      offPlay();
+      offPause();
+      timeline.pause();
+      hold(false);
+    }
+  };
+}
+function gutter() {
+  return div({ flex: `0 0 ${GUTTER_PX}px` });
+}
+function end() {
+  return div({ flex: `0 0 ${END_PX}px` });
+}
+function laneName(track) {
+  return `${track.label}.${track.property}`;
+}
+function rulerStep(duration) {
+  if (!(duration > 0)) return 0;
+  for (const step of [0.25, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300]) {
+    if (duration / step <= 5) return step;
+  }
+  return Math.ceil(duration / 5);
+}
+function formatSeconds(seconds) {
+  return Number.isInteger(seconds) ? String(seconds) : seconds.toFixed(2).replace(/0$/, "");
+}
+function addOptions(targets) {
+  return [["", "\uFF0B Add a track"], ...trackOptions(targets)];
+}
+function trackOptions(targets) {
+  const entries = [
+    ["camera|position", "camera \xB7 position"],
+    ["camera|lookAt", "camera \xB7 lookAt"],
+    ["camera|fov", "camera \xB7 fov"]
+  ];
+  targets.forEach((target, index) => {
+    for (const property of OBJECT_TRACKS) {
+      const applies = OBJECT_PROPERTIES[property]?.appliesTo;
+      if (applies && !applies(target.object)) continue;
+      entries.push([`${index}|${property}`, `${target.label} \xB7 ${property}`]);
+    }
+  });
+  return entries;
+}
+
+// src/devtools/devPanel.ts
+var CARD = {
+  ...SHELL,
+  /**
+   * In-flow, unlike the standalone timeline shell: the corner-anchored root is
+   * the one fixed element, so a `bottom`-anchored panel grows upward from the
+   * FAB's corner. A fixed card here would sit at its static position (the
+   * corner point) and run its full height off the bottom of the screen.
+   */
+  position: "static",
+  width: "380px",
+  display: "flex",
+  flexDirection: "column",
+  maxHeight: "min(78vh, 720px)"
+};
+var TAB = {
+  flex: "1 1 0",
+  minWidth: "0",
+  padding: "12px 8px 10px",
+  background: "transparent",
+  border: "0",
+  borderBottom: "2px solid transparent",
+  color: "inherit",
+  font: "inherit",
+  opacity: "0.55",
+  cursor: "pointer"
+};
+var META = {
+  flex: "1 1 0",
+  minWidth: "0",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  gap: "12px",
+  fontSize: "11px",
+  whiteSpace: "nowrap",
+  position: "relative"
+};
+var COMPAT = {
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  minWidth: "0",
+  padding: "0",
+  background: "transparent",
+  border: "0",
+  color: "inherit",
+  font: "inherit",
+  opacity: "0.65",
+  cursor: "default",
+  transition: "opacity 120ms ease"
+};
+var PRICE = {
+  flex: "0 0 auto",
+  color: BLUE,
+  cursor: "default",
+  transition: "opacity 120ms ease"
+};
+var BREAKDOWN = {
+  display: "none",
+  position: "absolute",
+  right: "0",
+  bottom: "calc(100% + 8px)",
+  zIndex: "1",
+  width: "max-content",
+  maxWidth: "330px",
+  padding: "8px 10px",
+  borderRadius: "8px",
+  background: "rgb(28,29,34)",
+  border: "1px solid rgba(255,255,255,0.10)",
+  boxShadow: "0 8px 24px rgba(0,0,0,0.45)",
+  whiteSpace: "normal",
+  pointerEvents: "none"
+};
+var WARNING = "#ffc107";
+var ERROR = "#ff6b6b";
+var GHOST = {
+  ...PILL,
+  flex: "0 0 auto",
+  padding: "3px 8px",
+  fontSize: "11px"
+};
+var HISTORY_ROW_PX = 40;
+var HISTORY_VISIBLE = 5;
+var JOBS_MAX_PX = 172;
+var HISTORY_LIST = {
+  maxHeight: `${HISTORY_ROW_PX * HISTORY_VISIBLE}px`,
+  overflowY: "auto"
+};
+var SECTION_LABEL = {
+  display: "block",
+  marginTop: "10px",
+  marginBottom: "4px",
+  fontSize: "10px",
+  letterSpacing: "0.08em",
+  textTransform: "uppercase",
+  opacity: "0.4"
+};
+var OUTPUT_READOUT = {
+  opacity: "0.6",
+  fontSize: "11px",
+  display: "block",
+  padding: "4px 0",
+  whiteSpace: "nowrap"
+};
+var WATCH_MS = 250;
+var SCENE_SETTLE_MS = 250;
+var SCENE_MAX_WAIT_MS = 1500;
+var VIEW_SETTLE_MS = 600;
+var RETRY_MS = 1e4;
+var FOCUS_FRESH_MS = 5e3;
+var LOUD_ESTIMATE_ERRORS = {
+  Unauthorized: { label: "Check your key:", url: "https://bakery3.com/keys" },
+  TokenExpired: { label: "Check your key:", url: "https://bakery3.com/keys" },
+  OriginNotAllowed: {
+    label: "Check your key:",
+    url: "https://bakery3.com/keys"
+  },
+  InsufficientBalance: {
+    label: "Add credit:",
+    url: "https://bakery3.com/billing"
+  }
+};
+function mountDevPanel(options) {
+  const host = options.container ?? document.body;
+  const tabs = availableTabs(options);
+  if (!tabs.length) {
+    return inertPanel();
+  }
+  let open = options.defaultOpen ?? false;
+  let tab = options.defaultTab && tabs.includes(options.defaultTab) ? options.defaultTab : tabs[0];
+  let disposed = false;
+  const ownHistory = !options.history;
+  const root = div({ position: "fixed", zIndex: "2147483000" });
+  Object.assign(root.style, CORNERS[options.position ?? "bottom-right"]);
+  const fab = button("", {
+    width: "48px",
+    height: "48px",
+    padding: "0",
+    borderRadius: "50%",
+    background: INK,
+    border: "1px solid rgba(255,255,255,0.10)",
+    boxShadow: "0 6px 20px rgba(0,0,0,0.45)",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "box-shadow 120ms ease, border-color 120ms ease"
+  });
+  fab.title = "Bakery3: render, video, bake";
+  fab.appendChild(brandMark(46));
+  fab.onmouseenter = () => {
+    fab.style.boxShadow = `0 0 0 3px rgba(${BLUE_RGB},0.28), 0 6px 20px rgba(0,0,0,0.45)`;
+    fab.style.borderColor = `rgba(${BLUE_RGB},0.6)`;
+  };
+  fab.onmouseleave = () => {
+    fab.style.boxShadow = "0 6px 20px rgba(0,0,0,0.45)";
+    fab.style.borderColor = "rgba(255,255,255,0.10)";
+  };
+  fab.onclick = () => panel.open();
+  const card = div(CARD);
+  const header = div({
+    display: "flex",
+    alignItems: "center",
+    gap: "2px",
+    padding: "0 12px",
+    borderBottom: "1px solid rgba(255,255,255,0.08)",
+    flex: "0 0 auto"
+  });
+  const headerMark = brandMark(40);
+  headerMark.style.marginRight = "6px";
+  header.appendChild(headerMark);
+  if (options.title) {
+    header.appendChild(
+      span(options.title, {
+        fontWeight: "600",
+        letterSpacing: "0.02em",
+        marginRight: "8px"
+      })
+    );
+  }
+  const tabButtons = /* @__PURE__ */ new Map();
+  for (const name of tabs) {
+    const element = button(
+      name === "bake" ? "Bake" : name === "video" ? "Video" : "Render",
+      TAB
+    );
+    element.onclick = () => panel.setTab(name);
+    tabButtons.set(name, element);
+    header.appendChild(element);
+  }
+  const collapse = button("\u25BE", {
+    ...GHOST,
+    marginLeft: "auto",
+    width: "24px"
+  });
+  collapse.title = "collapse";
+  collapse.onclick = () => panel.close();
+  header.appendChild(collapse);
+  const bodies = div({
+    flex: "1 1 auto",
+    overflowY: "auto",
+    padding: "0 12px 4px",
+    borderTop: "1px solid rgba(255,255,255,0.08)"
+  });
+  const progressRow = div({
+    display: "none",
+    padding: "6px 12px 0",
+    flex: "0 0 auto"
+  });
+  const progressText = span("", {
+    fontSize: "11px",
+    opacity: "0.8",
+    display: "block"
+  });
+  const progressTrack = div({
+    height: "3px",
+    marginTop: "4px",
+    borderRadius: "2px",
+    background: "rgba(255,255,255,0.08)",
+    overflow: "hidden"
+  });
+  const progressFill = div({
+    height: "100%",
+    width: "0%",
+    background: SWEEP,
+    transition: "width 160ms ease"
+  });
+  progressTrack.appendChild(progressFill);
+  progressRow.append(progressText, progressTrack);
+  const jobsRow = div({
+    display: "none",
+    margin: "14px 12px 0",
+    padding: "10px 0 0",
+    borderTop: "1px solid rgba(255,255,255,0.12)",
+    flex: "0 0 auto"
+  });
+  const jobsList = div({ maxHeight: `${JOBS_MAX_PX}px`, overflowY: "auto" });
+  jobsRow.append(span("jobs", { ...SECTION_LABEL, marginTop: "0" }), jobsList);
+  const statusRow = div({
+    display: "none",
+    padding: "6px 12px 0",
+    fontSize: "11px",
+    whiteSpace: "pre-wrap",
+    flex: "0 0 auto"
+  });
+  const actionBar = div({
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "10px 12px 0",
+    flex: "0 0 auto"
+  });
+  const action = button("Render", { ...CTA, flex: "1 1 0", minWidth: "0" });
+  const meta = div(META);
+  const compat = button("", COMPAT);
+  const compatDot = span("", {
+    flex: "0 0 auto",
+    width: "6px",
+    height: "6px",
+    borderRadius: "50%",
+    background: BLUE
+  });
+  const compatLabel = span("", {
+    minWidth: "0",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    textUnderlineOffset: "2px"
+  });
+  compat.append(compatDot, compatLabel);
+  compat.style.display = "none";
+  const price = span("", PRICE);
+  const breakdown = div(BREAKDOWN);
+  meta.append(compat, price, breakdown);
+  actionBar.append(action, meta);
+  const issuesRow = div({
+    display: "none",
+    margin: "10px 12px 0",
+    padding: "8px 10px",
+    borderRadius: "8px",
+    background: "rgba(255,255,255,0.04)",
+    flex: "0 0 auto"
+  });
+  const issuesClose = button("\xD7", { ...GHOST, width: "22px" });
+  issuesClose.title = "close";
+  const issuesHead = div({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: "6px"
+  });
+  const issuesTitle = span("", { fontSize: "11px", opacity: "0.8" });
+  issuesHead.append(issuesTitle, issuesClose);
+  const issuesList = div({ maxHeight: "180px", overflowY: "auto" });
+  issuesRow.append(issuesHead, issuesList);
+  const jobsFoot = div({ flex: "0 0 auto", height: "10px" });
+  const tabSettings = div({ flex: "0 0 auto", padding: "0 12px" });
+  card.append(
+    header,
+    tabSettings,
+    actionBar,
+    issuesRow,
+    progressRow,
+    statusRow,
+    jobsRow,
+    jobsFoot,
+    bodies
+  );
+  root.append(fab, card);
+  host.appendChild(root);
+  const renderTab = options.render ? buildRenderTab(options.render) : null;
+  const videoTab = options.video ? buildVideoTab(options.video) : null;
+  const bakeTab = options.bake ? buildBakeTab(options.bake) : null;
+  for (const body of [renderTab, videoTab, bakeTab]) {
+    if (!body) continue;
+    tabSettings.appendChild(body.settings);
+    bodies.appendChild(body.element);
+  }
+  let costToken = 0;
+  let lastCostAt = 0;
+  let pricedKey;
+  let retryAt;
+  function estimateRequest() {
+    if (tab === "render" && renderTab) return renderTab.estimateRequest();
+    if (tab === "video" && videoTab) return videoTab.estimateRequest();
+    if (tab === "bake" && bakeTab) return bakeTab.estimateRequest();
+    return null;
+  }
+  let loudEstimateError = null;
+  let statusFromEstimate = false;
+  async function refreshCost(force = false) {
+    if (!options.estimate || disposed) return;
+    renderTab?.paintOutput();
+    videoTab?.paintOutput();
+    const request = estimateRequest();
+    if (!request) return;
+    const key = [JSON.stringify(request), seenScene, seenView].join("\n");
+    if (!force && key === pricedKey) return;
+    pricedKey = key;
+    retryAt = void 0;
+    const token = ++costToken;
+    lastCostAt = Date.now();
+    if (!price.textContent) price.textContent = "\u2026";
+    price.style.opacity = "0.55";
+    try {
+      const estimate = await options.estimate(request);
+      if (token !== costToken || disposed) return;
+      price.style.opacity = "1";
+      settleLoudEstimateError();
+      if (!estimate) {
+        price.textContent = "";
+        breakdown.replaceChildren();
+        return;
+      }
+      price.textContent = (estimate.approximate === false ? "" : "\u2248 ") + usd(estimate.usd);
+      breakdown.replaceChildren(...breakdownLines(request, estimate));
+    } catch (error) {
+      if (token !== costToken || disposed) return;
+      price.style.opacity = "1";
+      price.textContent = "";
+      breakdown.replaceChildren();
+      if (!sayLoudEstimateError(error)) retryAt = Date.now() + RETRY_MS;
+    }
+  }
+  function sayLoudEstimateError(error) {
+    const code = errorCode(error);
+    const link = code ? LOUD_ESTIMATE_ERRORS[code] : void 0;
+    if (!link) return false;
+    const text = describe(error);
+    const key = `${code}
+${text}`;
+    if (key === loudEstimateError) return true;
+    loudEstimateError = key;
+    panel.setStatus(
+      text.includes(link.url) ? text : `${text}
+
+${link.label} ${link.url}`,
+      "error"
+    );
+    statusFromEstimate = true;
+    return true;
+  }
+  function settleLoudEstimateError() {
+    if (loudEstimateError === null) return;
+    loudEstimateError = null;
+    if (statusFromEstimate) panel.setStatus("");
+  }
+  price.onmouseenter = () => {
+    if (breakdown.childNodes.length) breakdown.style.display = "block";
+  };
+  price.onmouseleave = () => {
+    breakdown.style.display = "none";
+  };
+  let report = null;
+  let issuesOpen = false;
+  function paintCompatibility() {
+    report = options.compatibility?.() ?? null;
+    if (!report) {
+      compat.style.display = "none";
+      closeIssues();
+      return;
+    }
+    const counts = { error: 0, warning: 0, info: 0 };
+    for (const issue of report.issues) {
+      counts[issue.severity] = (counts[issue.severity] ?? 0) + 1;
+    }
+    compat.style.display = "flex";
+    compatLabel.textContent = `${Math.round(report.score * 100)}% compatible`;
+    compatDot.style.background = counts.error ? ERROR : counts.warning ? WARNING : BLUE;
+    const openable = report.issues.length > 0;
+    compat.style.cursor = openable ? "pointer" : "default";
+    compat.title = openable ? `${issueCount(report.issues.length)} in this scene. Click to see which objects.` : "Everything in this scene renders as you see it.";
+    if (!issuesOpen) return;
+    if (openable) paintIssues();
+    else closeIssues();
+  }
+  function paintIssues() {
+    const issues = [...report?.issues ?? []].sort(
+      (a, b) => severityRank(a.severity) - severityRank(b.severity)
+    );
+    const groups = /* @__PURE__ */ new Map();
+    for (const issue of issues) {
+      const where = issue.path ?? "";
+      groups.set(where, [...groups.get(where) ?? [], issue]);
+    }
+    issuesTitle.textContent = "What renders differently";
+    issuesList.replaceChildren(
+      ...[...groups].map(([path, list]) => issueGroup(path, list))
+    );
+  }
+  function openIssues() {
+    issuesOpen = true;
+    paintIssues();
+    issuesRow.style.display = "block";
+    compat.style.opacity = "1";
+  }
+  function closeIssues() {
+    issuesOpen = false;
+    issuesRow.style.display = "none";
+    compat.style.opacity = "0.65";
+  }
+  compat.onclick = () => {
+    if (!report?.issues.length) return;
+    if (issuesOpen) closeIssues();
+    else openIssues();
+  };
+  compat.onmouseenter = () => {
+    if (!report?.issues.length) return;
+    compat.style.opacity = "1";
+    compatLabel.style.textDecoration = "underline";
+  };
+  compat.onmouseleave = () => {
+    compat.style.opacity = issuesOpen ? "1" : "0.65";
+    compatLabel.style.textDecoration = "none";
+  };
+  issuesClose.onclick = () => closeIssues();
+  let seenScene;
+  let seenView;
+  let seenRequest = "";
+  let sceneDirtySince;
+  let sceneMovedAt = 0;
+  let viewMovedAt;
+  let watching = false;
+  let cancelLook;
+  const page = typeof window === "undefined" ? void 0 : window;
+  function startWatching() {
+    if (watching || disposed) return;
+    watching = true;
+    seenScene = options.sceneVersion?.();
+    seenView = options.viewVersion?.();
+    seenRequest = requestShape();
+    sceneDirtySince = viewMovedAt = void 0;
+    const next = () => {
+      cancelLook = afterAWhile(() => {
+        look(Date.now());
+        if (watching) next();
+      });
+    };
+    next();
+    page?.addEventListener("focus", onFocus);
+  }
+  function stopWatching() {
+    if (!watching) return;
+    watching = false;
+    cancelLook?.();
+    cancelLook = void 0;
+    page?.removeEventListener("focus", onFocus);
+  }
+  function requestShape() {
+    return tab === "bake" ? "" : JSON.stringify(estimateRequest());
+  }
+  function look(now) {
+    renderTab?.paintOutput();
+    videoTab?.paintOutput();
+    const request = requestShape();
+    const scene = options.sceneVersion?.();
+    const view = options.viewVersion?.();
+    if (scene !== seenScene) {
+      seenScene = scene;
+      sceneMovedAt = now;
+      sceneDirtySince ??= now;
+    }
+    if (view !== seenView || request !== seenRequest) {
+      seenView = view;
+      seenRequest = request;
+      viewMovedAt = now;
+    }
+    if (sceneDirtySince !== void 0) {
+      if (now - sceneMovedAt < SCENE_SETTLE_MS && now - sceneDirtySince < SCENE_MAX_WAIT_MS) {
+        return;
+      }
+      sceneDirtySince = void 0;
+      bakeTab?.paintCandidates();
+      paintCompatibility();
+      videoTab?.reconcile();
+      void refreshCost();
+      return;
+    }
+    if (viewMovedAt !== void 0) {
+      if (now - viewMovedAt < VIEW_SETTLE_MS) return;
+      viewMovedAt = void 0;
+      void refreshCost();
+      return;
+    }
+    if (retryAt !== void 0 && now >= retryAt) void refreshCost(true);
+  }
+  function onFocus() {
+    if (open && Date.now() - lastCostAt > FOCUS_FRESH_MS) {
+      void refreshCost(true);
+    }
+  }
+  let historyEntries = [];
+  let historyToken = 0;
+  let openedAt = open ? Date.now() : Infinity;
+  const seenHistory = /* @__PURE__ */ new Set();
+  let sessionEntries = ownHistory ? readSessionHistory() : [];
+  function record(entry) {
+    if (!ownHistory || disposed) return;
+    sessionEntries = [
+      entry,
+      ...sessionEntries.filter((each) => each.id !== entry.id)
+    ].slice(0, SESSION_HISTORY_MAX);
+    writeSessionHistory(sessionEntries);
+    historyEntries = liveEntries(sessionEntries);
+    paintHistory();
+  }
+  function recordResult(id, result, kind) {
+    const isVideo = kind === "video" || /^(mp4|webm|mov)$/.test(result.format ?? "");
+    const createdAt = Date.now();
+    record({
+      id: id ?? `${isVideo ? "video" : "render"}-${createdAt}`,
+      kind: isVideo ? "video" : "render",
+      createdAt: new Date(createdAt).toISOString(),
+      expiresAt: new Date(
+        result.expiresAt ?? createdAt + URL_LIFETIME_MS
+      ).toISOString(),
+      meta: {
+        ...result.width ? { width: result.width } : {},
+        ...result.height ? { height: result.height } : {},
+        ...result.format ? { format: result.format } : {},
+        ...result.frames ? { frames: result.frames } : {},
+        ...result.quality ? { quality: result.quality } : {},
+        ...result.cost !== void 0 ? { cost: result.cost } : {}
+      },
+      ...isVideo ? {} : { thumbnail: result.url },
+      artifact: result.url
+    });
+  }
+  async function refreshHistory() {
+    if (disposed) return;
+    if (ownHistory) {
+      historyEntries = liveEntries(sessionEntries);
+      paintHistory();
+      return;
+    }
+    if (!options.history) return;
+    const token = ++historyToken;
+    try {
+      const entries = await options.history.list();
+      if (token !== historyToken || disposed) return;
+      historyEntries = entries;
+      showFreshEntries(entries);
+    } catch {
+      historyEntries = [];
+    }
+    paintHistory();
+  }
+  function showFreshEntries(entries) {
+    if (!open) return;
+    const fresh = (kind) => entries.find(
+      (entry) => entry.kind === kind && !seenHistory.has(entry.id) && Date.parse(entry.createdAt) >= openedAt
+    );
+    const render = fresh("render");
+    const video = fresh("video");
+    if (render) renderTab?.showEntry(render);
+    if (video) videoTab?.showEntry(video);
+    for (const entry of entries) seenHistory.add(entry.id);
+  }
+  function paintHistory() {
+    renderTab?.paintHistory(
+      historyEntries.filter((entry) => entry.kind === "render")
+    );
+    videoTab?.paintHistory(
+      historyEntries.filter((entry) => entry.kind === "video")
+    );
+    bakeTab?.paintHistory(
+      historyEntries.filter((entry) => entry.kind === "bake")
+    );
+  }
+  let hostJobs = [];
+  const trackedJobs = /* @__PURE__ */ new Map();
+  const lingering = /* @__PURE__ */ new Set();
+  let actionsInFlight = 0;
+  let pendingRows = 0;
+  let activeJobIds = /* @__PURE__ */ new Set();
+  let rowsShown = 0;
+  function paintJobs() {
+    const jobs = [
+      ...[...trackedJobs].filter(
+        ([key, job]) => lingering.has(key) || !TERMINAL_JOB_STATES.has(job.state)
+      ).map(([, job]) => job),
+      ...hostJobs.filter((job) => !TERMINAL_JOB_STATES.has(job.state))
+    ];
+    const ids = new Set(jobs.map((job) => job.id));
+    const ended = [...activeJobIds].some((id) => !ids.has(id));
+    activeJobIds = ids;
+    rowsShown = jobs.length;
+    jobsList.replaceChildren(...jobs.map(jobRow));
+    jobsRow.style.display = jobs.length ? "block" : "none";
+    paintProgress();
+    if (ended) void refreshHistory();
+  }
+  function retire(key, entry) {
+    if (entry.state === "completed" && actionsInFlight > 0) lingering.add(key);
+    else trackedJobs.delete(key);
+    paintJobs();
+  }
+  function releaseLingering() {
+    if (!lingering.size) return;
+    for (const key of lingering) trackedJobs.delete(key);
+    lingering.clear();
+    paintJobs();
+  }
+  function attach(entry, job, recordOnComplete) {
+    entry.id = job.id;
+    entry.state = job.status;
+    entry.progress = job.progress;
+    delete entry.detail;
+    if (job.previewUrl) entry.previewUrl = job.previewUrl;
+    if (job.cancel) {
+      entry.onCancel = () => {
+        const failed = (error) => panel.setStatus(describe(error), "error");
+        try {
+          void Promise.resolve(job.cancel()).catch(failed);
+        } catch (error) {
+          failed(error);
+        }
+      };
+    }
+    return [
+      job.on("progress", (payload) => {
+        if (payload.state) entry.state = payload.state;
+        if (payload.percent !== void 0)
+          entry.progress = payload.percent / 100;
+        paintJobs();
+      }),
+      job.on("preview", (payload) => {
+        if (payload.url) entry.previewUrl = payload.url;
+        paintJobs();
+      }),
+      job.on("complete", (payload) => {
+        entry.state = "completed";
+        entry.progress = 1;
+        const result = payload.result;
+        if (result?.url) {
+          entry.resultUrl = result.url;
+          if (recordOnComplete) recordResult(job.id, result);
+        }
+        paintJobs();
+      }),
+      job.on("failed", (payload) => {
+        entry.state = "failed";
+        if (payload.error?.message) entry.detail = payload.error.message;
+        panel.setStatus(
+          `${entry.label} failed${entry.detail ? `: ${entry.detail}` : ""}`,
+          "error"
+        );
+        paintJobs();
+      }),
+      job.on("cancelled", () => {
+        entry.state = "cancelled";
+        paintJobs();
+      })
+    ];
+  }
+  let progressLabel = null;
+  let progressFraction;
+  function paintProgress() {
+    if (progressLabel === null || rowsShown > 0) {
+      progressRow.style.display = "none";
+      return;
+    }
+    progressRow.style.display = "block";
+    progressText.textContent = progressLabel;
+    progressFill.style.width = progressFraction === void 0 ? "100%" : `${Math.round(Math.max(0, Math.min(1, progressFraction)) * 100)}%`;
+    progressFill.style.opacity = progressFraction === void 0 ? "0.35" : "1";
+  }
+  function historySection(list) {
+    const section = div({});
+    section.append(span("recent", SECTION_LABEL), list);
+    section.style.display = ownHistory ? "none" : "block";
+    return section;
+  }
+  function paintSection(section, rows) {
+    section.style.display = !ownHistory || rows ? "block" : "none";
+  }
+  function downloadButton(entry, part) {
+    const download = options.history?.download;
+    if (!download) return null;
+    const element = button(part === "glb" ? "GLB" : "Download", GHOST);
+    element.title = `download ${part === "glb" ? "the portable GLB" : "this artifact"}`;
+    element.onclick = async () => {
+      try {
+        await download(entry, part);
+      } catch (error) {
+        panel.setStatus(describe(error), "error");
+      }
+    };
+    return element;
+  }
+  let baking = false;
+  function paintAction() {
+    const busy = tab === "bake" && baking;
+    action.disabled = busy;
+    action.style.opacity = busy ? "0.6" : "1";
+  }
+  async function runAction() {
+    const kind = tab;
+    if (kind === "bake") {
+      if (baking) return;
+      baking = true;
+      paintAction();
+    }
+    panel.setStatus("");
+    actionsInFlight += 1;
+    try {
+      try {
+        if (kind === "render" && renderTab) await renderTab.run();
+        else if (kind === "video" && videoTab) await videoTab.run();
+        else if (kind === "bake" && bakeTab) await bakeTab.run();
+      } finally {
+        actionsInFlight -= 1;
+        releaseLingering();
+      }
+      await refreshHistory();
+      void refreshCost(true);
+    } catch (error) {
+      panel.setStatus(describe(error), "error");
+    } finally {
+      if (kind === "bake") {
+        baking = false;
+        paintAction();
+      }
+      if (actionsInFlight === 0) panel.setProgress(null);
+    }
+  }
+  action.onclick = (event) => {
+    if (event?.detail > 1) return;
+    void runAction();
+  };
+  function paintTab() {
+    for (const [name, element] of tabButtons) {
+      const active = name === tab;
+      element.style.opacity = active ? "1" : "0.55";
+      element.style.borderBottomColor = active ? BLUE : "transparent";
+      element.style.fontWeight = active ? "600" : "400";
+    }
+    for (const [name, body] of [
+      ["render", renderTab],
+      ["video", videoTab],
+      ["bake", bakeTab]
+    ]) {
+      if (!body) continue;
+      body.element.style.display = tab === name ? "block" : "none";
+      body.settings.style.display = tab === name ? "flex" : "none";
+    }
+    action.textContent = tab === "render" ? "Render" : tab === "video" ? "Render video" : "Bake";
+    paintAction();
+  }
+  function paintOpen() {
+    fab.style.display = open ? "none" : "flex";
+    card.style.display = open ? "flex" : "none";
+  }
+  const panel = {
+    open() {
+      if (disposed || open) return;
+      open = true;
+      openedAt = Date.now();
+      paintOpen();
+      options.onOpenChange?.(true);
+      panel.refresh();
+      startWatching();
+      void refreshCost(true);
+    },
+    close() {
+      if (disposed || !open) return;
+      open = false;
+      openedAt = Infinity;
+      paintOpen();
+      stopWatching();
+      options.onOpenChange?.(false);
+    },
+    setTab(next) {
+      if (disposed || !tabs.includes(next)) return;
+      tab = next;
+      paintTab();
+      void refreshCost();
+    },
+    refresh() {
+      if (disposed) return;
+      paintCompatibility();
+      bakeTab?.paintCandidates();
+      bakeTab?.paintGenerations();
+      videoTab?.refreshTimeline();
+      void refreshHistory();
+    },
+    refreshCost() {
+      void refreshCost(true);
+    },
+    setStatus(message, tone = "info") {
+      statusFromEstimate = false;
+      statusRow.replaceChildren(...linkified(message));
+      statusRow.style.display = message ? "block" : "none";
+      statusRow.style.color = tone === "error" ? ERROR : tone === "ok" ? BLUE : "rgba(244,244,245,0.75)";
+    },
+    setJobs(jobs) {
+      hostJobs = jobs;
+      paintJobs();
+    },
+    trackJob(job, label) {
+      const key = job.id;
+      const entry = {
+        id: job.id,
+        label: label ?? `render ${job.id.slice(0, 8)}`,
+        state: job.status
+      };
+      trackedJobs.set(key, entry);
+      const offs = attach(entry, job, true);
+      paintJobs();
+      let ended = false;
+      return () => {
+        if (ended) return;
+        ended = true;
+        for (const off of offs) off();
+        retire(key, entry);
+      };
+    },
+    startJob(label) {
+      pendingRows += 1;
+      const key = `pending:${pendingRows}`;
+      const entry = {
+        id: key,
+        label,
+        state: "preparing",
+        detail: "capturing the scene"
+      };
+      trackedJobs.set(key, entry);
+      paintJobs();
+      let offs = [];
+      let ended = false;
+      return {
+        update(detail, progress, state) {
+          if (ended || disposed) return;
+          if (state) entry.state = state;
+          entry.detail = detail;
+          if (progress === void 0) delete entry.progress;
+          else entry.progress = progress;
+          paintJobs();
+        },
+        follow(job) {
+          if (ended || disposed) return;
+          for (const off of offs) off();
+          offs = attach(entry, job, false);
+          paintJobs();
+        },
+        end() {
+          if (ended) return;
+          ended = true;
+          for (const off of offs) off();
+          retire(key, entry);
+        }
+      };
+    },
+    setProgress(text, fraction) {
+      progressLabel = text;
+      progressFraction = fraction;
+      if (text === null) progressFill.style.width = "0%";
+      paintProgress();
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      stopWatching();
+      videoTab?.dispose();
+      bakeTab?.dispose();
+      root.remove();
+    }
+  };
+  paintTab();
+  paintOpen();
+  if (open) {
+    panel.refresh();
+    startWatching();
+    void refreshCost(true);
+  } else {
+    bakeTab?.paintCandidates();
+    bakeTab?.paintGenerations();
+  }
+  return panel;
+  function buildRenderTab(config) {
+    const element = div({ display: "none" });
+    const qualities = config.qualities ?? ["preview", "studio", "ultra"];
+    const sizes = config.sizes ?? [512, 768, 1024, 2048];
+    const qualitySelect = select(qualities.map((value) => [value, value]));
+    qualitySelect.value = config.defaultQuality ?? qualities[0];
+    const sizeSelect = select(
+      sizes.map((value) => [String(value), `${value}`])
+    );
+    sizeSelect.value = String(config.defaultSize ?? sizes[0]);
+    const readout = span("", OUTPUT_READOUT);
+    const output = () => outputSize({}, Number(sizeSelect.value), readAspect(config.aspect));
+    const settings = div({ display: "flex", gap: "6px", marginTop: "10px" });
+    settings.append(
+      labeled("quality", qualitySelect),
+      labeled("long edge", sizeSelect),
+      labeled("output", readout)
+    );
+    const paintOutput = () => {
+      const { width, height } = output();
+      readout.textContent = `${width} \xD7 ${height} png`;
+    };
+    paintOutput();
+    qualitySelect.onchange = () => void refreshCost();
+    sizeSelect.onchange = () => {
+      paintOutput();
+      void refreshCost();
+    };
+    const result = div({ marginTop: "10px" });
+    let shownId;
+    const showOutcome = async (outcome) => {
+      if (!outcome?.url) return;
+      shownId = outcome.entry?.id ?? outcome.id;
+      if (shownId) seenHistory.add(shownId);
+      await paintResult(result, outcome, downloadButton);
+      recordResult(outcome.id, { ...outcome, url: outcome.url }, "render");
+      paintList();
+    };
+    const historyList = div(HISTORY_LIST);
+    const history = historySection(historyList);
+    let listed = [];
+    const paintList = () => {
+      paintHistoryList(historyList, listed, downloadButton, showEntry, shownId);
+      paintSection(history, listed.length);
+    };
+    element.append(result, history);
+    return {
+      element,
+      settings,
+      paintOutput,
+      estimateRequest() {
+        return { kind: "render", quality: qualitySelect.value, ...output() };
+      },
+      async run() {
+        panel.setProgress("Rendering\u2026");
+        const outcome = await config.onRender({
+          quality: qualitySelect.value,
+          ...output()
+        });
+        await showOutcome(outcome ?? void 0);
+      },
+      paintHistory(entries) {
+        listed = entries;
+        paintList();
+      },
+      showEntry
+    };
+    function showEntry(entry) {
+      if (entry.id === shownId) return;
+      const url = entry.artifact ?? entry.thumbnail;
+      if (!url) return;
+      shownId = entry.id;
+      paintList();
+      void paintResult(
+        result,
+        {
+          url,
+          meta: describeEntry(entry),
+          isVideo: false,
+          entry,
+          ...entry.meta?.width ? { width: entry.meta.width } : {},
+          ...entry.meta?.height ? { height: entry.meta.height } : {}
+        },
+        downloadButton
+      );
+    }
+  }
+  function buildVideoTab(config) {
+    const element = div({ display: "none" });
+    const qualities = config.qualities ?? ["preview", "studio", "ultra"];
+    const sizes = config.sizes ?? [256, 512, 768, 1024, 1280, 1920, 2048];
+    const formats = config.formats ?? ["mp4", "webm"];
+    const qualitySelect = select(qualities.map((value) => [value, value]));
+    qualitySelect.value = config.defaultQuality ?? qualities[0];
+    const sizeSelect = select(
+      sizes.map((value) => [String(value), `${value}`])
+    );
+    sizeSelect.value = String(config.defaultSize ?? sizes[0]);
+    const formatSelect = select(formats.map((value) => [value, value]));
+    formatSelect.value = config.defaultFormat ?? formats[0];
+    const readout = span("", OUTPUT_READOUT);
+    const output = () => outputSize({}, Number(sizeSelect.value), readAspect(config.aspect), {
+      even: true
+    });
+    const paintOutput = () => {
+      const { width, height } = output();
+      readout.textContent = `${width} \xD7 ${height}`;
+    };
+    paintOutput();
+    const settings = div({ display: "flex", gap: "6px", marginTop: "10px" });
+    settings.append(
+      labeled("quality", qualitySelect),
+      labeled("long edge", sizeSelect),
+      labeled("format", formatSelect),
+      labeled("output", readout)
+    );
+    for (const control of [qualitySelect, sizeSelect, formatSelect]) {
+      control.onchange = () => {
+        paintOutput();
+        void refreshCost();
+      };
+    }
+    const body = buildTimelineBody({
+      timeline: config.timeline,
+      ...config.targets ? { targets: config.targets } : {},
+      ...config.onPlaybackChange ? { onPlaybackChange: config.onPlaybackChange } : {},
+      onRenderVideo: async () => {
+        const outcome = await config.onRenderVideo({
+          quality: qualitySelect.value,
+          ...output(),
+          format: formatSelect.value,
+          timeline: config.timeline
+        });
+        await showOutcome(outcome ?? void 0);
+      },
+      // The action lives in the shared action bar next to the price.
+      showRenderButton: false,
+      style: { marginTop: "4px" }
+    });
+    const offChange = config.timeline.on("change", () => void refreshCost());
+    const result = div({ marginTop: "4px" });
+    let shownId;
+    const showOutcome = async (outcome) => {
+      if (!outcome?.url) return;
+      shownId = outcome.entry?.id ?? outcome.id;
+      if (shownId) seenHistory.add(shownId);
+      await paintResult(result, outcome, downloadButton);
+      recordResult(
+        outcome.id,
+        {
+          ...outcome,
+          url: outcome.url,
+          frames: outcome.frames ?? config.timeline.frameCount
+        },
+        "video"
+      );
+      paintList();
+    };
+    const historyList = div(HISTORY_LIST);
+    const history = historySection(historyList);
+    let listed = [];
+    const paintList = () => {
+      paintHistoryList(historyList, listed, downloadButton, showEntry, shownId);
+      paintSection(history, listed.length);
+    };
+    const repairLine = span("", {
+      fontSize: "11px",
+      marginTop: "6px",
+      display: "none",
+      whiteSpace: "pre-wrap"
+    });
+    element.append(body.element, repairLine, result, history);
+    return {
+      element,
+      settings,
+      paintOutput,
+      estimateRequest() {
+        return {
+          kind: "video",
+          quality: qualitySelect.value,
+          ...output(),
+          frames: config.timeline.frameCount,
+          fps: config.timeline.fps,
+          format: formatSelect.value
+        };
+      },
+      async run() {
+        if (!config.timeline.tracks.length) {
+          panel.setStatus(
+            "The timeline has no keyframes yet. Frame the shot and press Keyframe camera, move the playhead, frame the next shot and press it again. Then press Render video.",
+            "error"
+          );
+          return;
+        }
+        panel.setProgress(`Rendering ${config.timeline.frameCount} frames\u2026`);
+        await body.renderVideo();
+      },
+      refreshTimeline() {
+        body.refresh(config.targets);
+      },
+      /**
+       * Re-attach tracks to a rebuilt scene, and say what happened.
+       *
+       * A stale track is repaired where possible and removed where not: a lane
+       * that can only refuse at export is not a lane, and leaving it there
+       * means the developer finds out by pressing Render.
+       */
+      reconcile() {
+        const scene = config.scene?.();
+        if (!scene) return;
+        const { healed, stale } = config.timeline.reconcile(scene);
+        for (const track of stale) config.timeline.removeTrack(track.trackId);
+        if (healed.length || stale.length) body.refresh(config.targets);
+        const notes = [];
+        if (healed.length) {
+          notes.push(
+            `re-attached ${healed.length} track${healed.length === 1 ? "" : "s"} to the rebuilt scene`
+          );
+        }
+        for (const track of stale) {
+          notes.push(
+            `dropped "${track.label} \xB7 ${track.property}": ${track.reason}`
+          );
+        }
+        repairLine.textContent = notes.join("\n");
+        repairLine.style.color = stale.length ? WARNING : "rgba(244,244,245,0.55)";
+        repairLine.style.display = notes.length ? "block" : "none";
+      },
+      paintHistory(entries) {
+        listed = entries;
+        paintList();
+      },
+      showEntry,
+      dispose() {
+        offChange();
+        body.dispose();
+      }
+    };
+    function showEntry(entry) {
+      if (entry.id === shownId) return;
+      const url = entry.artifact ?? entry.thumbnail;
+      if (!url) return;
+      shownId = entry.id;
+      paintList();
+      void paintResult(
+        result,
+        {
+          url,
+          meta: describeEntry(entry),
+          isVideo: true,
+          entry,
+          ...entry.meta?.width ? { width: entry.meta.width } : {},
+          ...entry.meta?.height ? { height: entry.meta.height } : {}
+        },
+        downloadButton
+      );
+    }
+  }
+  function buildBakeTab(config) {
+    const element = div({ display: "none" });
+    const { session } = config;
+    const qualities = config.qualities ?? ["preview", "standard", "high"];
+    const sizes = config.sizes ?? [256, 512, 1024, 2048];
+    const qualitySelect = select(qualities.map((value) => [value, value]));
+    qualitySelect.value = config.defaultQuality ?? "standard";
+    const sizeSelect = select(
+      sizes.map((value) => [String(value), `${value}\xB2`])
+    );
+    sizeSelect.value = String(config.defaultSize ?? 1024);
+    const settings = div({ display: "flex", gap: "6px", marginTop: "10px" });
+    settings.append(
+      labeled("texture size", sizeSelect),
+      labeled("quality", qualitySelect)
+    );
+    for (const control of [qualitySelect, sizeSelect]) {
+      control.onchange = () => void refreshCost();
+    }
+    const ticked = /* @__PURE__ */ new Map();
+    const objectList = div({
+      maxHeight: "168px",
+      overflowY: "auto",
+      border: "1px solid rgba(255,255,255,0.06)",
+      borderRadius: "6px",
+      padding: "4px 6px"
+    });
+    const appliedRow = div({
+      display: "none",
+      alignItems: "center",
+      gap: "12px",
+      marginTop: "8px"
+    });
+    const compareButton = button("Hold to compare", GHOST);
+    compareButton.title = "hold to see the scene without the bake";
+    const muteToggle = document.createElement("input");
+    muteToggle.type = "checkbox";
+    muteToggle.style.accentColor = BLUE;
+    const muteLabel = span("Mute realtime lights", {
+      fontSize: "11px",
+      opacity: "0.75"
+    });
+    muteLabel.title = "The lightmap already replaces the diffuse light from this scene's lamps; they only add highlights now. Muting them shows the bake on its own. Reflections from an environment map keep running.";
+    const mute = div({ display: "flex", alignItems: "center", gap: "6px" });
+    mute.append(muteToggle, muteLabel);
+    appliedRow.append(compareButton, mute);
+    const reportLine = span("", {
+      display: "none",
+      marginTop: "8px",
+      fontSize: "11px",
+      color: WARNING,
+      whiteSpace: "pre-wrap"
+    });
+    const historyList = div(HISTORY_LIST);
+    const history = historySection(historyList);
+    let hostBakes = [];
+    element.append(
+      span("objects", SECTION_LABEL),
+      objectList,
+      history,
+      appliedRow,
+      reportLine
+    );
+    const entryByGeneration = /* @__PURE__ */ new Map();
+    function include() {
+      return session.candidates().filter(
+        (candidate) => candidate.bakeable && ticked.get(candidate.objectId)
+      ).map((candidate) => candidate.objectId);
+    }
+    function texels() {
+      const size = Number(sizeSelect.value);
+      return include().length * size * size;
+    }
+    function paintCandidates() {
+      const candidates = session.candidates();
+      const report2 = session.current >= 0 && session.lastReport?.generation === session.current ? session.lastReport : null;
+      const applied = new Set(report2?.applied ?? []);
+      const applySkips = new Map(
+        (report2?.skipped ?? []).map((skip) => [skip.objectId, skip])
+      );
+      const workerSkips = new Map(
+        (report2 ? session.generations[session.current]?.bundle.skipped ?? [] : []).map((skip) => [skip.objectId, skip])
+      );
+      objectList.replaceChildren();
+      if (!candidates.length) {
+        objectList.appendChild(
+          span("no meshes in this scene yet", {
+            opacity: "0.45",
+            fontSize: "11px"
+          })
+        );
+        return;
+      }
+      for (const candidate of candidates) {
+        if (!ticked.has(candidate.objectId)) {
+          ticked.set(
+            candidate.objectId,
+            candidate.bakeable && candidate.defaultInclude
+          );
+        }
+        const row = div({
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "2px 0"
+        });
+        const box = document.createElement("input");
+        box.type = "checkbox";
+        box.style.accentColor = BLUE;
+        box.checked = Boolean(ticked.get(candidate.objectId)) && candidate.bakeable;
+        box.disabled = !candidate.bakeable;
+        box.onchange = () => {
+          ticked.set(candidate.objectId, box.checked);
+          void refreshCost();
+        };
+        const name = span(candidate.name, {
+          flex: "1 1 auto",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          fontSize: "11px",
+          opacity: candidate.bakeable ? "0.9" : "0.5"
+        });
+        name.title = candidate.path;
+        row.append(box, name);
+        if (report2) {
+          const skip = applySkips.get(candidate.objectId) ?? workerSkips.get(candidate.objectId);
+          if (applied.has(candidate.objectId)) {
+            const lit = span("\u2713", {
+              flex: "0 0 auto",
+              color: BLUE,
+              cursor: "help"
+            });
+            lit.title = "lit by the applied bake";
+            row.appendChild(lit);
+          } else if (skip) {
+            const missed = span("\u2717", {
+              flex: "0 0 auto",
+              color: WARNING,
+              cursor: "help"
+            });
+            missed.title = [skip.message, skip.why, skip.fix].filter(Boolean).join("\n\n");
+            row.appendChild(missed);
+          }
+        }
+        if (candidate.reason) {
+          const warn = span(candidate.bakeable ? "\xB7" : "\u26A0", {
+            flex: "0 0 auto",
+            color: candidate.bakeable ? "rgba(244,244,245,0.4)" : WARNING,
+            cursor: "help"
+          });
+          warn.title = [
+            candidate.reason.message,
+            candidate.reason.why,
+            candidate.reason.fix
+          ].filter(Boolean).join("\n\n");
+          row.appendChild(warn);
+        }
+        objectList.appendChild(row);
+      }
+    }
+    function paintGenerations() {
+      const rows = [];
+      for (let index = session.generations.length - 1; index >= 0; index--) {
+        rows.push(generationRow(index));
+      }
+      const linked = new Set(
+        [...entryByGeneration.values()].map((entry) => entry.id)
+      );
+      for (const entry of hostBakes) {
+        const download = linked.has(entry.id) ? null : downloadButton(entry);
+        if (!download) continue;
+        rows.push(
+          recentRow({
+            tile: bakeTile(false),
+            title: entryTitle(entry),
+            meta: entryMeta(entry),
+            selected: false,
+            actions: [download]
+          })
+        );
+      }
+      historyList.replaceChildren(...rows);
+      if (!rows.length) {
+        historyList.appendChild(
+          span("nothing yet", { opacity: "0.4", fontSize: "11px" })
+        );
+      }
+      paintSection(history, rows.length);
+      const applied = session.current >= 0;
+      appliedRow.style.display = applied ? "flex" : "none";
+      muteToggle.checked = session.lightsMuted;
+      const notes = [];
+      const report2 = session.lastReport;
+      if (applied && report2 && report2.generation >= 0) {
+        if (report2.unmatched.length) {
+          notes.push(
+            `${report2.unmatched.length} baked object${report2.unmatched.length === 1 ? "" : "s"} no longer exist${report2.unmatched.length === 1 ? "s" : ""}`
+          );
+        }
+        if (report2.unbaked.length) {
+          notes.push(
+            `${report2.unbaked.length} new object${report2.unbaked.length === 1 ? " is" : "s are"} unbaked`
+          );
+        }
+        for (const skip of report2.skipped) notes.push(`${skip.message}`);
+      }
+      const skipped = applied ? session.generations[session.current]?.bundle.skipped ?? [] : [];
+      if (skipped.length) {
+        notes.push(
+          `${skipped.length} object${skipped.length === 1 ? "" : "s"} skipped by the bake, hover the list`
+        );
+      }
+      reportLine.textContent = notes.join(" \xB7 ");
+      reportLine.style.display = notes.length ? "block" : "none";
+    }
+    function generationRow(index) {
+      const generation = session.generations[index];
+      const { settings: settings2, objects, skipped } = generation.bundle;
+      const applied = session.current === index;
+      const entry = entryByGeneration.get(index);
+      const actions = [];
+      if (entry) {
+        const bundle = downloadButton(entry);
+        if (bundle) {
+          bundle.textContent = "Bundle";
+          actions.push(bundle);
+        }
+        if (generation.bundle.glb) {
+          const glb = downloadButton(entry, "glb");
+          if (glb) actions.push(glb);
+        }
+      }
+      const cost = entry?.meta?.cost;
+      return recentRow({
+        tile: bakeTile(applied),
+        title: `${objects.length} object${objects.length === 1 ? "" : "s"} \xB7 ${settings2.textureSize}\xB2`,
+        meta: [
+          ago(generation.createdAt),
+          settings2.quality,
+          skipped.length ? `${skipped.length} skipped` : void 0,
+          cost !== void 0 ? `$${cost.toFixed(2)}` : void 0
+        ].filter(Boolean).join(" \xB7 "),
+        selected: applied,
+        pick: applied ? {
+          hint: "Take it off: back to the live scene",
+          run: () => {
+            session.revert();
+            paintGenerations();
+          }
+        } : {
+          hint: "Put this bake on the scene",
+          run: () => void applyGeneration(index)
+        },
+        actions
+      });
+    }
+    async function applyGeneration(index) {
+      try {
+        panel.setProgress("Applying\u2026");
+        await session.apply(index);
+        panel.setStatus("");
+      } catch (error) {
+        panel.setStatus(describe(error), "error");
+      } finally {
+        panel.setProgress(null);
+        paintGenerations();
+      }
+    }
+    compareButton.addEventListener("pointerdown", () => session.compare(true));
+    for (const event of [
+      "pointerup",
+      "pointercancel",
+      "pointerleave"
+    ]) {
+      compareButton.addEventListener(event, () => session.compare(false));
+    }
+    muteToggle.onchange = () => session.muteLights(muteToggle.checked);
+    const offSession = session.on("change", () => {
+      paintCandidates();
+      paintGenerations();
+    });
+    paintCandidates();
+    paintGenerations();
+    return {
+      element,
+      settings,
+      estimateRequest() {
+        const chosen = include();
+        return {
+          kind: "bake",
+          quality: qualitySelect.value,
+          textureSize: Number(sizeSelect.value),
+          objects: chosen.length,
+          texels: texels(),
+          include: chosen
+        };
+      },
+      async run() {
+        const chosen = include();
+        if (!chosen.length) {
+          panel.setStatus(
+            "Nothing is ticked. Choose at least one object to bake.",
+            "error"
+          );
+          return;
+        }
+        panel.setProgress(
+          `Baking\u2026 (${chosen.length} object${chosen.length === 1 ? "" : "s"})`
+        );
+        const outcome = await config.onBake({
+          quality: qualitySelect.value,
+          textureSize: Number(sizeSelect.value),
+          include: chosen
+        });
+        if (outcome?.entry !== void 0 && outcome.generation !== void 0) {
+          entryByGeneration.set(outcome.generation, outcome.entry);
+        }
+        paintCandidates();
+        paintGenerations();
+      },
+      paintCandidates,
+      paintGenerations,
+      paintHistory(entries) {
+        hostBakes = ownHistory ? [] : entries;
+        paintGenerations();
+      },
+      dispose() {
+        offSession();
+      }
+    };
+  }
+}
+function afterAWhile(callback) {
+  let frame;
+  const timer = setTimeout(() => {
+    if (typeof requestAnimationFrame === "function") {
+      frame = requestAnimationFrame(() => callback());
+    } else {
+      callback();
+    }
+  }, WATCH_MS);
+  return () => {
+    clearTimeout(timer);
+    if (frame !== void 0) cancelAnimationFrame(frame);
+  };
+}
+function readAspect(aspect) {
+  const value = typeof aspect === "function" ? aspect() : aspect ?? 1;
+  return Number.isFinite(value) && value > 0 ? value : 1;
+}
+function describeRequest(request) {
+  if (request.kind === "bake") {
+    return `${request.quality} \xB7 ${request.textureSize}\xB2 per object`;
+  }
+  const size = `${request.width} \xD7 ${request.height}`;
+  if (request.kind === "video") {
+    return `${request.quality} \xB7 ${size} \xB7 ${request.fps} fps \xB7 ${request.format}`;
+  }
+  return `${request.quality} \xB7 ${size}`;
+}
+function breakdownLines(request, estimate) {
+  const muted = { display: "block", fontSize: "11px", opacity: "0.6" };
+  const count = request.kind === "video" ? { n: request.frames, unit: "frame" } : request.kind === "bake" ? { n: request.objects, unit: "object" } : null;
+  const approximate = estimate.approximate !== false;
+  const lines = [
+    span(describeRequest(request), { ...muted, marginBottom: "4px" }),
+    breakdownRow(
+      count && count.n > 0 ? `${count.n} ${count.unit}${count.n === 1 ? "" : "s"} \xD7 ${usd(estimate.usd / count.n, true)}` : approximate ? "estimate" : "price",
+      `${approximate ? "\u2248 " : ""}${usd(estimate.usd)}`
+    )
+  ];
+  if (estimate.maximum !== void 0) {
+    lines.push(breakdownRow("at most", usd(estimate.maximum)));
+  }
+  if (estimate.detail) {
+    lines.push(span(estimate.detail, { ...muted, marginTop: "4px" }));
+  }
+  if (approximate) {
+    lines.push(
+      span("You pay for the GPU time used.", { ...muted, marginTop: "4px" })
+    );
+  }
+  return lines;
+}
+function breakdownRow(label, value) {
+  const row = div({
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "24px",
+    fontSize: "11px"
+  });
+  row.append(span(label, { opacity: "0.85" }), span(value, { color: BLUE }));
+  return row;
+}
+function usd(value, unit = false) {
+  const digits = unit ? value < 0.01 ? 4 : value < 0.1 ? 3 : 2 : 2;
+  return `$${value.toFixed(digits)}`;
+}
+function issueGroup(path, issues) {
+  const group = div({ padding: "4px 0" });
+  const name = span(path ? objectName(path) : "Scene", {
+    display: "block",
+    fontSize: "11px",
+    fontWeight: "600",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  });
+  if (path) name.title = path;
+  group.appendChild(name);
+  for (const issue of issues) {
+    const row = div({
+      display: "flex",
+      alignItems: "baseline",
+      gap: "6px",
+      marginTop: "2px",
+      fontSize: "11px"
+    });
+    const [glyph, color] = issue.severity === "error" ? ["\u2715", ERROR] : issue.severity === "warning" ? ["\u26A0", WARNING] : ["i", "rgba(244,244,245,0.5)"];
+    row.append(
+      span(glyph, { flex: "0 0 auto", width: "12px", color }),
+      span(issue.message, {
+        flex: "1 1 auto",
+        minWidth: "0",
+        opacity: "0.8",
+        whiteSpace: "normal"
+      })
+    );
+    if (issue.docs) {
+      const docs = document.createElement("a");
+      docs.textContent = "docs";
+      docs.href = issue.docs;
+      docs.target = "_blank";
+      docs.rel = "noreferrer";
+      Object.assign(docs.style, {
+        flex: "0 0 auto",
+        color: BLUE,
+        textDecoration: "none"
+      });
+      row.appendChild(docs);
+    }
+    group.appendChild(row);
+  }
+  return group;
+}
+function objectName(path) {
+  return /<([^>]*)>$/.exec(path)?.[1] || path;
+}
+function severityRank(severity) {
+  return severity === "error" ? 0 : severity === "warning" ? 1 : 2;
+}
+function issueCount(count) {
+  return `${count} thing${count === 1 ? "" : "s"} render${count === 1 ? "s" : ""} differently`;
+}
+function errorCode(error) {
+  const code = error?.code;
+  return typeof code === "string" ? code : void 0;
+}
+var URL_PATTERN = /https:\/\/[^\s<>"')]*[^\s<>"').,;:]/g;
+function linkified(message) {
+  const parts = [];
+  let last = 0;
+  for (const match of message.matchAll(URL_PATTERN)) {
+    const at = match.index ?? 0;
+    if (at > last) parts.push(span(message.slice(last, at), {}));
+    const link = document.createElement("a");
+    link.textContent = match[0];
+    link.href = match[0];
+    link.target = "_blank";
+    link.rel = "noreferrer";
+    Object.assign(link.style, {
+      color: "inherit",
+      textDecoration: "underline",
+      textUnderlineOffset: "2px"
+    });
+    parts.push(link);
+    last = at + match[0].length;
+  }
+  if (last < message.length) parts.push(span(message.slice(last), {}));
+  return parts;
+}
+var SESSION_HISTORY_KEY = "bakery3.devtools.history";
+var SESSION_HISTORY_MAX = 40;
+var URL_LIFETIME_MS = 24 * 60 * 60 * 1e3;
+function readSessionHistory() {
+  try {
+    const raw = globalThis.localStorage?.getItem(SESSION_HISTORY_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    if (!Array.isArray(parsed)) return [];
+    return liveEntries(
+      parsed.filter(
+        (entry) => !!entry && typeof entry === "object" && typeof entry.id === "string" && typeof entry.createdAt === "string"
+      )
+    );
+  } catch {
+    return [];
+  }
+}
+function writeSessionHistory(entries) {
+  try {
+    globalThis.localStorage?.setItem(
+      SESSION_HISTORY_KEY,
+      JSON.stringify(entries)
+    );
+  } catch {
+  }
+}
+function liveEntries(entries) {
+  const soon = Date.now() + 6e4;
+  return entries.filter(
+    (entry) => !entry.expiresAt || Date.parse(entry.expiresAt) > soon
+  );
+}
+var paintTokens = /* @__PURE__ */ new WeakMap();
+var RESULT_LOAD_TIMEOUT_MS = 8e3;
+async function paintResult(host, outcome, downloadButton) {
+  if (!outcome?.url) return;
+  const token = (paintTokens.get(host) ?? 0) + 1;
+  paintTokens.set(host, token);
+  const shape = outcome.width && outcome.height ? { aspectRatio: `${outcome.width} / ${outcome.height}` } : {};
+  let media;
+  let loaded;
+  if (outcome.isVideo) {
+    const video = document.createElement("video");
+    video.controls = true;
+    video.loop = true;
+    video.muted = true;
+    video.autoplay = true;
+    video.preload = "auto";
+    Object.assign(video.style, {
+      width: "100%",
+      borderRadius: "6px",
+      display: "block",
+      ...shape
+    });
+    loaded = typeof video.load === "function" ? loadedOrTimeout(video, ["loadeddata", "error"]) : Promise.resolve();
+    video.src = outcome.url;
+    media = video;
+  } else {
+    const image = document.createElement("img");
+    image.alt = "render";
+    Object.assign(image.style, {
+      width: "100%",
+      borderRadius: "6px",
+      display: "block",
+      background: "repeating-conic-gradient(#2a2a2e 0% 25%, #232327 0% 50%) 50% / 12px 12px",
+      ...shape
+    });
+    image.src = outcome.url;
+    loaded = typeof image.decode === "function" ? Promise.race([
+      image.decode().catch(() => void 0),
+      delay(RESULT_LOAD_TIMEOUT_MS)
+    ]) : Promise.resolve();
+    media = image;
+  }
+  const parts = [media];
+  if (outcome.meta) {
+    parts.push(
+      span(outcome.meta, {
+        display: "block",
+        marginTop: "6px",
+        fontSize: "11px",
+        opacity: "0.7"
+      })
+    );
+  }
+  const actions = div({ display: "flex", gap: "6px", marginTop: "6px" });
+  appendLinks(actions, outcome.url);
+  if (outcome.entry) {
+    const download = downloadButton(outcome.entry);
+    if (download) actions.appendChild(download);
+  }
+  if (actions.childNodes.length) parts.push(actions);
+  await loaded;
+  if (paintTokens.get(host) !== token) return;
+  host.replaceChildren(...parts);
+}
+function loadedOrTimeout(target, events) {
+  return new Promise((resolve) => {
+    const done = () => {
+      for (const event of events) target.removeEventListener(event, done);
+      resolve();
+    };
+    for (const event of events) target.addEventListener(event, done);
+    void delay(RESULT_LOAD_TIMEOUT_MS).then(done);
+  });
+}
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function appendLinks(actions, url) {
+  const openLink = document.createElement("a");
+  openLink.textContent = "Open";
+  openLink.href = url;
+  openLink.target = "_blank";
+  openLink.rel = "noreferrer";
+  Object.assign(openLink.style, {
+    ...GHOST,
+    textAlign: "center",
+    textDecoration: "none"
+  });
+  const copy = button("Copy URL", GHOST);
+  copy.onclick = () => void navigator.clipboard?.writeText(url);
+  actions.append(openLink, copy);
+}
+var TERMINAL_JOB_STATES = /* @__PURE__ */ new Set([
+  "completed",
+  "failed",
+  "cancelled",
+  "expired"
+]);
+function jobRow(job) {
+  const terminal = TERMINAL_JOB_STATES.has(job.state);
+  const row = div({
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "4px 0"
+  });
+  const thumb = div({
+    width: "44px",
+    height: "33px",
+    flex: "0 0 auto",
+    borderRadius: "4px",
+    background: "rgba(255,255,255,0.06)",
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  });
+  const image = job.resultUrl ?? job.previewUrl;
+  if (image) {
+    const img = document.createElement("img");
+    img.src = image;
+    img.alt = job.resultUrl ? "result" : "preview";
+    Object.assign(img.style, {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      display: "block"
+    });
+    thumb.appendChild(img);
+  } else {
+    thumb.appendChild(
+      span(job.state === "queued" ? "\u2026" : "", {
+        opacity: "0.5",
+        fontSize: "11px"
+      })
+    );
+  }
+  const text = div({ flex: "1 1 auto", minWidth: "0" });
+  const line = [
+    job.state.replace(/_/g, " "),
+    job.detail,
+    job.seconds !== void 0 ? `${Math.round(job.seconds)}s` : void 0,
+    job.previewUrl && !job.resultUrl ? "preview" : void 0
+  ].filter(Boolean).join(" \xB7 ");
+  text.append(
+    span(job.label, {
+      display: "block",
+      fontSize: "11px",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    }),
+    span(line, {
+      display: "block",
+      fontSize: "10px",
+      opacity: "0.7",
+      color: job.state === "failed" ? ERROR : "inherit"
+    })
+  );
+  const track = div({
+    height: "2px",
+    marginTop: "3px",
+    borderRadius: "1px",
+    background: "rgba(255,255,255,0.08)",
+    overflow: "hidden"
+  });
+  const indeterminate = job.progress === void 0 && !terminal;
+  track.appendChild(
+    div({
+      height: "100%",
+      width: terminal || indeterminate ? "100%" : `${Math.round(Math.max(0, Math.min(1, job.progress)) * 100)}%`,
+      opacity: indeterminate ? "0.35" : "1",
+      background: terminal ? "rgba(255,255,255,0.25)" : SWEEP
+    })
+  );
+  text.appendChild(track);
+  row.append(thumb, text);
+  if (job.onCancel && !terminal) {
+    const cancel = button("\xD7", { ...GHOST, width: "24px" });
+    cancel.title = "cancel";
+    cancel.onclick = () => job.onCancel?.();
+    row.appendChild(cancel);
+  }
+  return row;
+}
+function recentRow(item) {
+  const row = div({
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    height: `${HISTORY_ROW_PX}px`,
+    padding: "0 6px",
+    boxSizing: "border-box",
+    borderRadius: "6px",
+    flex: "0 0 auto",
+    background: item.selected ? `rgba(${BLUE_RGB},0.10)` : "transparent",
+    boxShadow: item.selected ? `inset 2px 0 0 ${BLUE}` : "none"
+  });
+  const text = div({ flex: "1 1 auto", minWidth: "0" });
+  const line = {
+    display: "block",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  };
+  text.append(
+    span(item.title, {
+      ...line,
+      fontSize: "11px",
+      opacity: item.selected ? "1" : "0.85"
+    }),
+    span(item.meta, { ...line, fontSize: "10px", opacity: "0.5" })
+  );
+  if (item.pick) {
+    const { hint, run } = item.pick;
+    row.style.cursor = "pointer";
+    row.title = hint;
+    row.onclick = (event) => {
+      const target = event.target?.tagName;
+      if (target?.toUpperCase() === "BUTTON") return;
+      run();
+    };
+  }
+  row.append(item.tile, text, ...item.actions);
+  return row;
+}
+var TILE = {
+  flex: "0 0 auto",
+  width: "32px",
+  height: "32px",
+  borderRadius: "5px",
+  background: "rgba(255,255,255,0.06)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "10px",
+  overflow: "hidden"
+};
+function imageTile(url) {
+  const image = document.createElement("img");
+  image.loading = "lazy";
+  image.src = url;
+  image.alt = "";
+  Object.assign(image.style, { ...TILE, objectFit: "cover" });
+  return image;
+}
+function bakeTile(applied) {
+  const glow = applied ? 1 : 0.5;
+  return div({
+    ...TILE,
+    background: `radial-gradient(circle at 32% 30%, rgba(253,195,133,${glow}) 0%, rgba(236,157,60,${glow * 0.6}) 30%, rgba(${BLUE_RGB},${glow * 0.35}) 70%, rgba(255,255,255,0.04) 100%)`
+  });
+}
+function paintHistoryList(host, entries, downloadButton, select2, shownId) {
+  host.replaceChildren();
+  if (!entries.length) {
+    host.appendChild(span("nothing yet", { opacity: "0.4", fontSize: "11px" }));
+    return;
+  }
+  for (const entry of entries) {
+    const selected = entry.id === shownId;
+    const download = downloadButton(entry);
+    host.appendChild(
+      recentRow({
+        // A clip without a still: its tile says what it is.
+        tile: entry.thumbnail ? imageTile(entry.thumbnail) : span(entry.kind === "video" ? "\u25B6" : "", {
+          ...TILE,
+          opacity: "0.7"
+        }),
+        title: entryTitle(entry),
+        meta: entryMeta(entry),
+        selected,
+        ...select2 && !selected && (entry.artifact ?? entry.thumbnail) ? { pick: { hint: "Show it above", run: () => select2(entry) } } : {},
+        actions: download ? [download] : []
+      })
+    );
+  }
+}
+function entryTitle(entry) {
+  const meta = entry.meta ?? {};
+  const size = meta.width && meta.height ? `${meta.width} \xD7 ${meta.height}` : void 0;
+  if (entry.kind === "bake") {
+    return [
+      meta.objects !== void 0 ? `${meta.objects} object${meta.objects === 1 ? "" : "s"}` : void 0,
+      meta.textureSize !== void 0 ? `${meta.textureSize}\xB2` : void 0
+    ].filter(Boolean).join(" \xB7 ") || "bake";
+  }
+  if (entry.kind === "video") {
+    return [meta.frames !== void 0 ? `${meta.frames} frames` : void 0, size].filter(Boolean).join(" \xB7 ") || "video";
+  }
+  return size ?? "render";
+}
+function entryMeta(entry) {
+  const meta = entry.meta ?? {};
+  return [
+    ago(Date.parse(entry.createdAt)),
+    meta.quality,
+    entry.kind === "video" ? meta.format : void 0,
+    meta.skipped ? `${meta.skipped} skipped` : void 0,
+    meta.cost !== void 0 ? `$${meta.cost.toFixed(2)}` : void 0,
+    entry.cached ? "cached" : void 0
+  ].filter(Boolean).join(" \xB7 ");
+}
+function describeEntry(entry) {
+  const meta = entry.meta ?? {};
+  const parts = [ago(Date.parse(entry.createdAt))];
+  if (entry.kind === "bake") {
+    if (meta.objects !== void 0) parts.push(`${meta.objects} objects`);
+    if (meta.textureSize !== void 0) parts.push(`${meta.textureSize}\xB2`);
+    if (meta.skipped) parts.push(`${meta.skipped} skipped`);
+  } else {
+    if (meta.width && meta.height) parts.push(`${meta.width}\xD7${meta.height}`);
+    if (meta.frames !== void 0) parts.push(`${meta.frames} frames`);
+    if (meta.format) parts.push(meta.format);
+  }
+  if (meta.quality) parts.push(meta.quality);
+  if (meta.cost !== void 0) parts.push(`$${meta.cost.toFixed(2)}`);
+  if (entry.cached) parts.push("cached");
+  return parts.join(" \xB7 ");
+}
+function ago(timestamp) {
+  if (!Number.isFinite(timestamp)) return "just now";
+  const seconds = Math.max(0, Math.round((Date.now() - timestamp) / 1e3));
+  if (seconds < 45) return "just now";
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  return `${Math.round(hours / 24)}d ago`;
+}
+function availableTabs(options) {
+  const tabs = [];
+  if (options.render) tabs.push("render");
+  if (options.video) tabs.push("video");
+  if (options.bake) tabs.push("bake");
+  return tabs;
+}
+function inertPanel() {
+  const noop = () => {
+  };
+  return {
+    open: noop,
+    close: noop,
+    setTab: noop,
+    refresh: noop,
+    refreshCost: noop,
+    setStatus: noop,
+    setProgress: noop,
+    setJobs: noop,
+    trackJob: () => noop,
+    startJob: () => ({ update: noop, follow: noop, end: noop }),
+    dispose: noop
+  };
+}
+var AVATAR_URL = "https://cdn.bakery3.com/sdk/brand/avatar-6fffdec6ef.png";
+function brandMark(size) {
+  const img = document.createElement("img");
+  img.src = AVATAR_URL;
+  img.alt = "";
+  img.width = size;
+  img.height = size;
+  img.decoding = "async";
+  img.draggable = false;
+  Object.assign(img.style, {
+    display: "block",
+    flex: "0 0 auto",
+    width: `${size}px`,
+    height: `${size}px`,
+    borderRadius: "50%",
+    background: INK
+  });
+  img.onerror = () => img.replaceWith(convergeMark(Math.round(size * 0.65)));
+  return img;
+}
+var MARK_CELLS = [
+  [23, 3, "#2d5daf"],
+  [43, 3, "#46b8ed"],
+  [3, 23, "#2d5daf"],
+  [23, 23, "#46b8ed"],
+  [63, 23, "#fdc385"],
+  [3, 43, "#46b8ed"],
+  [23, 43, "#ffd4ae"],
+  [43, 43, "#fdc385"],
+  [63, 43, "#ec9d3c"],
+  [83, 43, "#be5c20"],
+  [23, 63, "#fdc385"],
+  [63, 63, "#be5c20"],
+  [43, 83, "#be5c20"]
+];
+function convergeMark(size) {
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(NS, "svg");
+  svg.setAttribute("viewBox", "0 0 100 100");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("aria-hidden", "true");
+  Object.assign(svg.style, { display: "block", flex: "0 0 auto" });
+  for (const [x, y, fill] of MARK_CELLS) {
+    const rect = document.createElementNS(NS, "rect");
+    rect.setAttribute("x", String(x));
+    rect.setAttribute("y", String(y));
+    rect.setAttribute("width", "14");
+    rect.setAttribute("height", "14");
+    rect.setAttribute("rx", "3");
+    rect.setAttribute("fill", fill);
+    svg.appendChild(rect);
+  }
+  return svg;
+}
+
+// src/devtools/sceneVersion.ts
+function sceneFingerprint(scene) {
+  let count = 0;
+  let triangles = 0;
+  let hash = 0;
+  const mix = (value) => {
+    hash = Math.imul(hash, 31) + value | 0;
+  };
+  scene.traverse((object) => {
+    count += 1;
+    if (!object.visible) mix(count);
+    const mesh = object;
+    const geometry = mesh.geometry;
+    if (geometry) {
+      mix(geometry.id);
+      triangles += (geometry.index?.count ?? geometry.attributes?.position?.count ?? 0) / 3;
+    }
+    const materials = mesh.material;
+    if (Array.isArray(materials)) {
+      for (const material of materials) mix(material.id ?? 0);
+    } else if (materials) {
+      mix(materials.id ?? 0);
+    }
+    if (typeof mesh.count === "number") mix(mesh.count);
+  });
+  return `${count}:${Math.round(triangles)}:${hash}:${scene.fog ? 1 : 0}`;
+}
+function viewFingerprint(scene, camera) {
+  let sum = 0;
+  scene.traverse((object) => {
+    const elements = object.matrix?.elements;
+    if (elements) for (let i = 12; i < 15; i++) sum += elements[i] ?? 0;
+  });
+  const eye = camera.matrixWorld.elements;
+  return `${sum.toFixed(3)}:${eye[12].toFixed(2)},${eye[13].toFixed(2)},${eye[14].toFixed(2)}`;
+}
+
+// src/devtools/bakery3Devtools.ts
+function mountBakery3Devtools(options) {
+  const { bakery3 } = options;
+  const bakeSession = createBakeSession({ scene: options.scene });
+  const timeline = options.timeline ?? liveTimeline(options);
+  const ownTimeline = options.timeline === void 0;
+  let disposed = false;
+  const running = /* @__PURE__ */ new Set();
+  const capture = () => ({
+    scene: options.scene,
+    camera: options.camera,
+    ...options.renderer ? { renderer: options.renderer } : {}
+  });
+  function startRow(label) {
+    const row = panel.startJob(label);
+    let job;
+    const stop = () => {
+      row.end();
+      job?.stop?.();
+    };
+    running.add(stop);
+    return {
+      /** For `onUpload`: the bytes on their way, or the cache hit. */
+      upload(progress) {
+        if (!progress.bytesTotal) {
+          row.update("already uploaded");
+          return;
+        }
+        row.update(
+          `uploading ${megabytes(progress.bytesUploaded)} of ${megabytes(progress.bytesTotal)}`,
+          progress.bytesUploaded / progress.bytesTotal
+        );
+      },
+      update: (detail, state) => row.update(detail, void 0, state),
+      follow(next) {
+        job = next;
+        row.follow(next);
+      },
+      end() {
+        running.delete(stop);
+        row.end();
+      }
+    };
+  }
+  const panel = mountDevPanel({
+    ...options.container ? { container: options.container } : {},
+    ...options.position ? { position: options.position } : {},
+    ...options.defaultOpen !== void 0 ? { defaultOpen: options.defaultOpen } : {},
+    ...options.defaultTab ? { defaultTab: options.defaultTab } : {},
+    ...options.title ? { title: options.title } : {},
+    ...options.onOpenChange ? { onOpenChange: options.onOpenChange } : {},
+    compatibility: () => {
+      try {
+        return bakery3.check(options.scene);
+      } catch {
+        return null;
+      }
+    },
+    sceneVersion: () => sceneFingerprint(options.scene),
+    viewVersion: () => viewFingerprint(options.scene, options.camera),
+    estimate: async (request) => {
+      if (request.kind === "bake") {
+        if (!request.include.length) return null;
+        const estimate2 = await bakery3.estimate({
+          scene: options.scene,
+          bake: {
+            quality: request.quality,
+            textureSize: request.textureSize,
+            include: request.include
+          }
+        });
+        return { usd: estimate2.estimatedCost, maximum: estimate2.maximumCost };
+      }
+      const estimate = await bakery3.estimate({
+        scene: options.scene,
+        // An interior is priced from where the camera stands, and a vanilla
+        // client has nothing attached to fall back on: without it every
+        // estimate threw and the chip stayed blank.
+        camera: options.camera,
+        quality: request.quality,
+        width: request.width,
+        height: request.height,
+        // The route prices a clip itself (a frame in a clip is cheaper than
+        // a still), so the chip quotes what the render will be accepted under.
+        ...request.kind === "video" ? { frames: request.frames } : {}
+      });
+      return { usd: estimate.estimatedCost, maximum: estimate.maximumCost };
+    },
+    ...options.history ? { history: options.history } : {},
+    render: {
+      defaultQuality: options.defaultQuality ?? "studio",
+      // The camera's own aspect, by the rule render() uses when it is given
+      // no size, so a wide viewport renders wide.
+      aspect: () => aspectOf(options.camera, options.renderer),
+      onRender: async (settings) => {
+        const startedAt = Date.now();
+        const row = startRow(
+          `render \xB7 ${settings.width} \xD7 ${settings.height} \xB7 ${settings.quality}`
+        );
+        let job;
+        try {
+          job = await bakery3.render({
+            ...capture(),
+            quality: settings.quality,
+            width: settings.width,
+            height: settings.height,
+            onUpload: row.upload
+          });
+          if (disposed) return void 0;
+          row.follow(job);
+          const result = await job.result();
+          return {
+            id: job.id,
+            url: result.url,
+            width: result.width,
+            height: result.height,
+            format: result.format,
+            quality: settings.quality,
+            cost: result.cost,
+            ...result.expiresAt ? { expiresAt: result.expiresAt } : {},
+            meta: `$${result.cost.toFixed(2)} \xB7 ${result.width} \xD7 ${result.height} \xB7 ${elapsed(startedAt)}`
+          };
+        } catch (error) {
+          if (disposed) return void 0;
+          if (job && wasCancelled(job, error)) {
+            panel.setStatus("Render cancelled.");
+            return void 0;
+          }
+          throw error;
+        } finally {
+          row.end();
+        }
+      }
+    },
+    video: {
+      timeline,
+      ...options.timelineTargets ? { targets: options.timelineTargets } : {},
+      // The scene is handed over so the panel can re-attach tracks whose
+      // objects were rebuilt (a variant swap, a reload) instead of letting a
+      // stale lane survive to refuse at export.
+      scene: () => options.scene,
+      aspect: () => aspectOf(options.camera, options.renderer),
+      onPlaybackChange: (active) => options.onPlaybackChange?.(active),
+      defaultQuality: options.defaultQuality ?? "studio",
+      onRenderVideo: async (settings) => {
+        const startedAt = Date.now();
+        const row = startRow(
+          `video \xB7 ${settings.timeline.frameCount} frames \xB7 ${settings.width} \xD7 ${settings.height}`
+        );
+        let job;
+        try {
+          job = await bakery3.renderVideo({
+            ...capture(),
+            timeline: settings.timeline,
+            quality: settings.quality,
+            width: settings.width,
+            height: settings.height,
+            format: settings.format,
+            onUpload: row.upload
+          });
+          if (disposed) return void 0;
+          row.follow(job);
+          const result = await job.result();
+          return {
+            id: job.id,
+            url: result.url,
+            isVideo: true,
+            width: result.width,
+            height: result.height,
+            format: result.format,
+            frames: settings.timeline.frameCount,
+            quality: settings.quality,
+            cost: result.cost,
+            ...result.expiresAt ? { expiresAt: result.expiresAt } : {},
+            meta: `$${result.cost.toFixed(2)} \xB7 ${elapsed(startedAt)}`
+          };
+        } catch (error) {
+          if (disposed) return void 0;
+          if (job && wasCancelled(job, error)) {
+            panel.setStatus("Video cancelled.");
+            return void 0;
+          }
+          throw error;
+        } finally {
+          row.end();
+        }
+      }
+    },
+    bake: {
+      session: bakeSession,
+      onBake: async (settings) => {
+        const transport = options.bakeTransport;
+        const count = settings.include.length;
+        const row = startRow(
+          `bake \xB7 ${count} object${count === 1 ? "" : "s"} at ${settings.textureSize}\xB2`
+        );
+        try {
+          const bakeSettings = {
+            quality: settings.quality,
+            textureSize: settings.textureSize,
+            include: settings.include
+          };
+          let bundle;
+          if (transport) {
+            const { spec, assets } = await prepareBake({
+              scene: options.scene,
+              camera: options.camera,
+              settings: bakeSettings
+            });
+            row.update("baking", "baking");
+            bundle = await transport(spec, assets);
+          } else {
+            if (!bakery3.bake) {
+              throw new Bakery3Error({
+                code: "InvalidRequest",
+                message: "This client cannot bake.",
+                why: "The devtools were mounted with a client that has no bake() and no bakeTransport was given.",
+                fix: "Mount them with the object createBakery3() returns, or pass a bakeTransport.",
+                docs: "https://bakery3.com/docs/devtools"
+              });
+            }
+            const job = await bakery3.bake({
+              ...capture(),
+              settings: bakeSettings,
+              onUpload: row.upload
+            });
+            if (disposed) return void 0;
+            row.follow(trackableBake(job));
+            try {
+              bundle = (await job.result()).bundle;
+            } catch (error) {
+              if (disposed) return void 0;
+              if (wasCancelled(job, error)) {
+                panel.setStatus("Bake cancelled.");
+                return void 0;
+              }
+              throw error;
+            }
+          }
+          if (disposed) return void 0;
+          row.update("applying the lightmaps", "applying");
+          const generation = bakeSession.addGeneration(bundle, {
+            ...transport && options.bakeBaseUrl ? { baseUrl: options.bakeBaseUrl } : {}
+          });
+          const report = await bakeSession.apply(generation);
+          if (disposed) return void 0;
+          if (options.muteLightsOnApply) bakeSession.muteLights(true);
+          panel.setStatus(
+            `Applied to ${report.applied.length} object${report.applied.length === 1 ? "" : "s"}.`,
+            "ok"
+          );
+          return { generation };
+        } finally {
+          row.end();
+        }
+      }
+    }
+  });
+  return {
+    ...panel,
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      for (const stop of [...running]) stop();
+      running.clear();
+      panel.dispose();
+      if (ownTimeline) timeline.dispose();
+      bakeSession.dispose();
+    }
+  };
+}
+function liveTimeline(options) {
+  const timeline = createTimeline({ duration: 4, fps: 24 });
+  for (const key of ["scene", "camera"]) {
+    Object.defineProperty(timeline, key, {
+      configurable: true,
+      enumerable: true,
+      get: () => options[key],
+      // The timeline never reassigns these itself; a host that does wants the
+      // live one anyway.
+      set: () => {
+      }
+    });
+  }
+  return timeline;
+}
+function wasCancelled(job, error) {
+  return job.status === "cancelled" || error?.code === "Cancelled";
+}
+function trackableBake(job) {
+  return {
+    id: job.id,
+    get status() {
+      return job.status;
+    },
+    get progress() {
+      return job.progress;
+    },
+    on(event, listener) {
+      if (event === "preview") return () => {
+      };
+      return job.on(
+        event,
+        (payload) => listener(payload)
+      );
+    },
+    cancel: () => job.cancel(),
+    stop: () => job.stop()
+  };
+}
+function megabytes(bytes) {
+  return `${(bytes / 1e6).toFixed(1)} MB`;
+}
+function elapsed(startedAt) {
+  return `${Math.max(0, (Date.now() - startedAt) / 1e3).toFixed(1)}s`;
+}
+
+export { mountBakery3Devtools, mountDevPanel, mountTimelinePanel };
+//# sourceMappingURL=chunk-QRCT5UGZ.js.map
+//# sourceMappingURL=chunk-QRCT5UGZ.js.map